Skip to content

Commit

Permalink
feat: added menu back handling, streamlined icons, added drawer anima…
Browse files Browse the repository at this point in the history 
…tions
  • Loading branch information
@Vali-98
Vali-98 committed Feb 25, 2024
1 parent d16c334 commit 644a2dd
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 38 deletions.
40 changes: 32 additions & 8 deletions components/ChatMenu/ChatMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ChatWindow } from './ChatWindow/ChatWindow'
import { Ionicons, MaterialIcons, FontAwesome } from '@expo/vector-icons'
import { Ionicons, MaterialIcons, FontAwesome, AntDesign } from '@expo/vector-icons'
import { Global, Color, Chats, Logger } from '@globals'
import { generateResponse } from '@constants/Inference'
import { Stack, useFocusEffect, useRouter } from 'expo-router'
import { useCallback, useState } from 'react'
import { useCallback, useRef, useState } from 'react'
import {
View,
Text,
Expand Down Expand Up @@ -34,10 +34,24 @@ const ChatMenu = () => {
const router = useRouter()
const [charName, setCharName] = useMMKVString(Global.CurrentCharacter)
const [newMessage, setNewMessage] = useState<string>('')
const [showDrawer, setShowDrawer] = useState<boolean>(false)
const [showDrawer, setDrawer] = useState<boolean>(false)
const [userName, setUserName] = useMMKVString(Global.CurrentUser)
const menuRef = useRef<Menu | null>(null)

const setShowDrawer = (show: boolean | ((b: boolean) => void)) => {
if (typeof show === 'boolean') setDrawer(show)
else Logger.debug('This was not supposed to be used!')
if (menuRef.current?.isOpen()) {
menuRef.current.close()
}
}

const backAction = () => {
if (menuRef.current?.isOpen()) {
menuRef.current.close()
return true
}

if (showDrawer) {
setShowDrawer(false)
Logger.debug('Closing Drawer')
Expand All @@ -60,7 +74,7 @@ const ChatMenu = () => {
return () => {
BackHandler.removeEventListener('hardwareBackPress', backAction)
}
}, [charName, showDrawer])
}, [charName, showDrawer, menuRef.current?.isOpen()])
)

const goToChars = () => {
Expand Down Expand Up @@ -106,12 +120,22 @@ const ChatMenu = () => {
}

const menuoptions = [
/*{
callback: () => {},
text: 'Continue',
button: 'forward',
},
{
callback: () => {},
text: 'Regenerate',
button: 'retweet',
},*/
{
callback: () => {
setCharName('Welcome')
},
text: 'Main Menu',
button: 'chevron-left',
button: 'back',
},
{
callback: () => {
Expand All @@ -125,12 +149,12 @@ const ChatMenu = () => {
router.push('/ChatSelector')
},
text: 'Chat History',
button: 'comment',
button: 'paperclip',
},
]

const modificationMenu = (
<Menu renderer={SlideInMenu}>
<Menu renderer={SlideInMenu} ref={menuRef}>
<MenuTrigger>
<FontAwesome
name="cog"
Expand All @@ -148,7 +172,7 @@ const ChatMenu = () => {
? styles.optionItemLast
: styles.optionItem
}>
<FontAwesome
<AntDesign
style={{ minWidth: 25, marginLeft: 5 }}
//@ts-expect-error
name={item.button}
Expand Down
83 changes: 53 additions & 30 deletions components/ChatMenu/SettingsDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Animated, {
SlideOutRight,
SlideOutLeft,
FadeIn,
FadeOut,
} from 'react-native-reanimated'
import { Color, Global, Users } from '@globals'
import { usePathname, useRouter } from 'expo-router'
Expand Down Expand Up @@ -43,11 +44,45 @@ const SettingsDrawer: React.FC<SettingsDrawerProps> = ({ booleans: [showModal, s
const handlePush = (route: any) => {
router.navigate(route)
}

type ButtonData = {
name: string
path: `/${string}`
}

const paths: Array<ButtonData> = [
{
name: 'Sampler',
path: '/PresetMenu',
},
{
name: 'Instruct',
path: '/Instruct',
},
{
name: 'API',
path: '/APIMenu',
},
{
name: 'TTS',
path: '/TTSMenu',
},
{
name: 'Sampler',
path: '/PresetMenu',
},
{
name: 'Logs',
path: '/Logs',
},
]

if (showModal)
return (
<View style={styles.absolute}>
<Animated.View
entering={FadeIn.duration(200).easing(Easing.ease)}
entering={FadeIn.duration(200)}
exiting={FadeOut.duration(200)}
style={styles.absolute}>
<TouchableOpacity
activeOpacity={1}
Expand Down Expand Up @@ -90,33 +125,21 @@ const SettingsDrawer: React.FC<SettingsDrawerProps> = ({ booleans: [showModal, s
</View>
</View>
</View>
<TouchableOpacity
style={styles.firstlargeButton}
onPress={() => {
handlePush('/PresetMenu')
}}>
<Text style={styles.largeButtonText}>Sampler</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.largeButton}
onPress={() => handlePush('/Instruct')}>
<Text style={styles.largeButtonText}>Instruct</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.largeButton}
onPress={() => handlePush('/APIMenu')}>
<Text style={styles.largeButtonText}>API</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.largeButton}
onPress={() => handlePush('/TTSMenu')}>
<Text style={styles.largeButtonText}>TTS</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.largeButton}
onPress={() => handlePush('/Logs')}>
<Text style={styles.largeButtonText}>Logs</Text>
</TouchableOpacity>
{paths.map((item, index) => (
<Animated.View
key={index}
entering={SlideInLeft.duration(500 + index * 30)
.withInitialValues({ originX: index * -150 + -400 })
.easing(Easing.out(Easing.exp))}>
<TouchableOpacity
style={styles.firstlargeButton}
onPress={() => {
handlePush(item.path)
}}>
<Text style={styles.largeButtonText}>{item.name}</Text>
</TouchableOpacity>
</Animated.View>
))}

{__DEV__ && (
<TouchableOpacity
Expand Down Expand Up @@ -205,13 +228,13 @@ const styles = StyleSheet.create({
largeButton: {
borderBottomWidth: 1,
fontSize: 20,
borderColor: Color.Offwhite,
borderColor: Color.Container,
},

firstlargeButton: {
borderBottomWidth: 1,
borderTopWidth: 1,
fontSize: 20,
borderColor: Color.Offwhite,
borderColor: Color.Container,
},
})

0 comments on commit 644a2dd

Please sign in to comment.