From 60f234bb13b28aee3cb9459faa64dccc8e823133 Mon Sep 17 00:00:00 2001 From: Vali98 Date: Sun, 13 Oct 2024 22:11:26 +0800 Subject: [PATCH] feat: moved User list to drawer --- app/components/Avatar.tsx | 10 +- app/components/ChatMenu/ChatMenu.tsx | 2 +- app/components/ChatMenu/SettingsDrawer.tsx | 5 +- app/components/UserEditor/UserCardEditor.tsx | 110 ++++++++----------- app/components/UserEditor/UserDrawer.tsx | 66 +++++++++++ app/components/UserEditor/UserList.tsx | 24 ++-- app/components/UserEditor/UserListing.tsx | 9 +- app/components/UserEditor/index.tsx | 65 ++++++++--- 8 files changed, 195 insertions(+), 96 deletions(-) create mode 100644 app/components/UserEditor/UserDrawer.tsx diff --git a/app/components/Avatar.tsx b/app/components/Avatar.tsx index 4853651..0be93e9 100644 --- a/app/components/Avatar.tsx +++ b/app/components/Avatar.tsx @@ -17,15 +17,7 @@ const Avatar: React.FC = ({ targetImage, ...rest }) => { setImageSource(fallbackImage) } - return ( - - ) + return } export default Avatar diff --git a/app/components/ChatMenu/ChatMenu.tsx b/app/components/ChatMenu/ChatMenu.tsx index bea58a7..a5c1c09 100644 --- a/app/components/ChatMenu/ChatMenu.tsx +++ b/app/components/ChatMenu/ChatMenu.tsx @@ -6,7 +6,7 @@ import { useCallback, useRef, useState } from 'react' import { View, SafeAreaView, TouchableOpacity, StyleSheet, BackHandler } from 'react-native' import { Gesture, GestureDetector } from 'react-native-gesture-handler' import { Menu } from 'react-native-popup-menu' -import Animated, { runOnJS, ZoomIn, ZoomOut } from 'react-native-reanimated' +import Animated, { runOnJS, ZoomIn } from 'react-native-reanimated' import { useShallow } from 'zustand/react/shallow' import ChatInput from './ChatInput' diff --git a/app/components/ChatMenu/SettingsDrawer.tsx b/app/components/ChatMenu/SettingsDrawer.tsx index 85b0ef9..4973de0 100644 --- a/app/components/ChatMenu/SettingsDrawer.tsx +++ b/app/components/ChatMenu/SettingsDrawer.tsx @@ -282,7 +282,7 @@ const styles = StyleSheet.create({ userContainer: { alignItems: 'center', columnGap: 12, - paddingBottom: 12, + paddingBottom: 24, paddingTop: 24, padding: 16, }, @@ -369,7 +369,8 @@ const styles = StyleSheet.create({ }, appModeText: { - color: Style.getColor('primary-text1'), + marginLeft: 8, + color: Style.getColor('primary-text2'), marginBottom: 8, }, }) diff --git a/app/components/UserEditor/UserCardEditor.tsx b/app/components/UserEditor/UserCardEditor.tsx index a60ad58..7f5d2e5 100644 --- a/app/components/UserEditor/UserCardEditor.tsx +++ b/app/components/UserEditor/UserCardEditor.tsx @@ -44,9 +44,8 @@ const UserCardEditor = () => { - - - Name + + Name { - - - Description - - { - if (currentCard) - setCurrentCard({ - ...currentCard, - data: { ...currentCard.data, description: text }, - }) - }} - placeholder="Describe this user..." - placeholderTextColor={Style.getColor('primary-text2')} + Description + { + if (currentCard) + setCurrentCard({ + ...currentCard, + data: { ...currentCard.data, description: text }, + }) + }} + placeholder="Describe this user..." + placeholderTextColor={Style.getColor('primary-text2')} + /> + + + - - - - - Change Image - - - - - Save - - + Change Image + + + + + Save + ) } @@ -113,28 +108,26 @@ export default UserCardEditor const styles = StyleSheet.create({ userContainer: { - minHeight: Dimensions.get('screen').height / 3, + flex: 1, paddingTop: 16, paddingHorizontal: 16, }, optionsBar: { flexDirection: 'row', - alignItems: 'center', columnGap: 24, }, buttonContainer: { - marginTop: 12, - flexDirection: 'row', + marginTop: 32, columnGap: 8, }, buttonIcon: {}, button: { + marginTop: 12, flexDirection: 'row', - flex: 1, paddingVertical: 8, paddingHorizontal: 12, columnGap: 8, @@ -142,20 +135,10 @@ const styles = StyleSheet.create({ backgroundColor: Style.getColor('primary-surface4'), }, - buttonDestructive: { - flexDirection: 'row', - columnGap: 8, - flex: 1, - paddingVertical: 8, - paddingHorizontal: 12, - borderRadius: 8, - backgroundColor: Style.getColor('destructive-brand'), - }, - buttonApprove: { + marginTop: 12, flexDirection: 'row', columnGap: 8, - flex: 1, paddingVertical: 8, paddingHorizontal: 12, borderRadius: 8, @@ -170,6 +153,12 @@ const styles = StyleSheet.create({ borderWidth: 2, }, + inputDescription: { + color: Style.getColor('primary-text2'), + marginTop: 8, + marginBottom: 4, + }, + inputName: { textAlign: 'center', color: Style.getColor('primary-text1'), @@ -180,12 +169,7 @@ const styles = StyleSheet.create({ borderRadius: 8, }, - inputArea: { - flex: 1, - }, - input: { - flex: 1, color: Style.getColor('primary-text1'), textAlignVertical: 'top', borderColor: Style.getColor('primary-brand'), diff --git a/app/components/UserEditor/UserDrawer.tsx b/app/components/UserEditor/UserDrawer.tsx new file mode 100644 index 0000000..b9d899f --- /dev/null +++ b/app/components/UserEditor/UserDrawer.tsx @@ -0,0 +1,66 @@ +import FadeBackrop from '@components/FadeBackdrop' +import { Style } from '@globals' +import { SetStateAction, useEffect } from 'react' +import { BackHandler, GestureResponderEvent, StyleSheet, View } from 'react-native' +import Animated, { Easing, SlideInRight, SlideOutRight } from 'react-native-reanimated' + +import UserList from './UserList' + +type UserDrawerProps = { + booleans: [boolean, (b: boolean | SetStateAction) => void] +} + +const UserDrawer: React.FC = ({ booleans: [showModal, setShowModal] }) => { + const handleOverlayClick = (e: GestureResponderEvent) => { + if (e.target === e.currentTarget) setShowModal(false) + } + + useEffect(() => { + const backAction = () => { + if (showModal) { + setShowModal(false) + return true + } + return false + } + const handler = BackHandler.addEventListener('hardwareBackPress', backAction) + return () => handler.remove() + }, [showModal]) + + return ( + + + + + + + + ) +} + +export default UserDrawer + +const styles = StyleSheet.create({ + absolute: { + position: 'absolute', + width: '100%', + height: '100%', + }, + + drawer: { + backgroundColor: Style.getColor('primary-surface1'), + width: '80%', + shadowColor: Style.getColor('primary-shadow'), + left: '20%', + borderTopWidth: 3, + elevation: 20, + position: 'absolute', + height: '100%', + paddingHorizontal: 16, + paddingTop: 16, + paddingBottom: 32, + }, +}) diff --git a/app/components/UserEditor/UserList.tsx b/app/components/UserEditor/UserList.tsx index 8c9040d..cbfbb88 100644 --- a/app/components/UserEditor/UserList.tsx +++ b/app/components/UserEditor/UserList.tsx @@ -8,9 +8,13 @@ import { View, StyleSheet, Text, TouchableOpacity } from 'react-native' import UserListing from './UserListing' -type CharacterData = Awaited> +// type CharacterData = Awaited> -const UserList = () => { +type UserListProps = { + setShowModal: (b: boolean) => void +} + +const UserList: React.FC = ({ setShowModal }) => { const { data } = useLiveQuery(Characters.db.query.cardListQuery('user')) const [showNewUser, setShowNewUser] = useState(false) @@ -45,6 +49,7 @@ const UserList = () => { user={item} nowLoading={nowLoading} setNowLoading={setNowLoading} + setShowModal={setShowModal} /> )} estimatedItemSize={100} @@ -52,7 +57,7 @@ const UserList = () => { /> setShowNewUser(true)}> - New User + New User @@ -63,24 +68,30 @@ export default UserList const styles = StyleSheet.create({ mainContainer: { - paddingHorizontal: 16, flex: 1, }, - userListBorder: { flex: 1 }, + userListBorder: { + flex: 1, + }, userListContainer: { flex: 1, }, listHeader: { - marginTop: 30, + paddingHorizontal: 16, marginBottom: 12, flexDirection: 'row', justifyContent: 'space-between', }, listTitle: { + fontSize: 18, + color: Style.getColor('primary-text2'), + }, + + buttonText: { fontSize: 16, color: Style.getColor('primary-text1'), }, @@ -90,7 +101,6 @@ const styles = StyleSheet.create({ justifyContent: 'center', flexDirection: 'row', paddingVertical: 8, - paddingHorizontal: 12, marginTop: 4, columnGap: 8, borderRadius: 8, diff --git a/app/components/UserEditor/UserListing.tsx b/app/components/UserEditor/UserListing.tsx index 4ebd58e..c918a98 100644 --- a/app/components/UserEditor/UserListing.tsx +++ b/app/components/UserEditor/UserListing.tsx @@ -11,6 +11,7 @@ type CharacterListingProps = { user: CharacterData nowLoading: boolean setNowLoading: (b: boolean) => void + setShowModal: (b: boolean) => void } const day_ms = 86400000 @@ -22,7 +23,12 @@ const getTimeStamp = (oldtime: number) => { return new Date(oldtime).toLocaleDateString() } -const UserListing: React.FC = ({ user, nowLoading, setNowLoading }) => { +const UserListing: React.FC = ({ + user, + nowLoading, + setNowLoading, + setShowModal, +}) => { const { userId, setCard } = Characters.useUserCard((state) => ({ userId: state.id, setCard: state.setCard, @@ -89,6 +95,7 @@ const UserListing: React.FC = ({ user, nowLoading, setNow onPress={async () => { setNowLoading(true) await setCard(user.id) + setShowModal(false) setNowLoading(false) }}> diff --git a/app/components/UserEditor/index.tsx b/app/components/UserEditor/index.tsx index 0ece1af..3e8cfa8 100644 --- a/app/components/UserEditor/index.tsx +++ b/app/components/UserEditor/index.tsx @@ -1,21 +1,61 @@ +import { AntDesign } from '@expo/vector-icons' +import { Style } from '@globals' import { Stack } from 'expo-router' -import { View, StyleSheet } from 'react-native' +import { useState } from 'react' +import { View, StyleSheet, TouchableOpacity } from 'react-native' +import { Gesture, GestureDetector } from 'react-native-gesture-handler' +import { runOnJS } from 'react-native-reanimated' import UserCardEditor from './UserCardEditor' -import UserList from './UserList' +import UserDrawer from './UserDrawer' const UserEditor = () => { + const [showDrawer, setShowDrawer] = useState(false) + + const handleLeftFling = () => { + setShowDrawer(false) + } + + const handleRightFlight = () => { + setShowDrawer(true) + } + + const swipeShowDrawer = Gesture.Fling() + .direction(3) + .onEnd(() => { + runOnJS(handleRightFlight)() + }) + + const swipeHideDrawer = Gesture.Fling() + .direction(1) + .onEnd(() => { + runOnJS(handleLeftFling)() + }) + + const gesture = Gesture.Exclusive(swipeHideDrawer, swipeShowDrawer) + return ( - - - - - + + + ( + setShowDrawer(!showDrawer)}> + + + ), + }} + /> + + {showDrawer && } + + ) } @@ -23,7 +63,6 @@ export default UserEditor const styles = StyleSheet.create({ mainContainer: { - paddingBottom: 24, flex: 1, }, })