Rework footer controls
Paul Frazee
parent
287f2992fa
commit
ba6580101e
|
|
@ -0,0 +1,210 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
TouchableWithoutFeedback,
|
||||||
|
View,
|
||||||
|
} from 'react-native'
|
||||||
|
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import LinearGradient from 'react-native-linear-gradient'
|
||||||
|
import {useStores} from '../../../state'
|
||||||
|
import {s, colors, gradients} from '../../lib/styles'
|
||||||
|
import {DEF_AVATER} from '../../lib/assets'
|
||||||
|
|
||||||
|
export const MainMenu = observer(
|
||||||
|
({active, onClose}: {active: boolean; onClose: () => void}) => {
|
||||||
|
const store = useStores()
|
||||||
|
|
||||||
|
// events
|
||||||
|
// =
|
||||||
|
|
||||||
|
const onNavigate = (url: string) => {
|
||||||
|
store.nav.navigate(url)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
// rendering
|
||||||
|
// =
|
||||||
|
|
||||||
|
const FatMenuItem = ({
|
||||||
|
icon,
|
||||||
|
label,
|
||||||
|
url,
|
||||||
|
gradient,
|
||||||
|
}: {
|
||||||
|
icon: IconProp
|
||||||
|
label: string
|
||||||
|
url: string
|
||||||
|
gradient: keyof typeof gradients
|
||||||
|
}) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.fatMenuItem, styles.fatMenuItemMargin]}
|
||||||
|
onPress={() => onNavigate(url)}>
|
||||||
|
<LinearGradient
|
||||||
|
style={[styles.fatMenuItemIconWrapper]}
|
||||||
|
colors={[gradients[gradient].start, gradients[gradient].end]}
|
||||||
|
start={{x: 0, y: 0}}
|
||||||
|
end={{x: 1, y: 1}}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={icon}
|
||||||
|
style={styles.fatMenuItemIcon}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
</LinearGradient>
|
||||||
|
<Text style={styles.fatMenuItemLabel} numberOfLines={1}>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)
|
||||||
|
if (!active) {
|
||||||
|
return <View />
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TouchableWithoutFeedback onPress={onClose}>
|
||||||
|
<View style={styles.bg} />
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
<View style={styles.wrapper}>
|
||||||
|
<View style={[styles.topSection]}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.profile}
|
||||||
|
onPress={() => onNavigate(`/profile/${store.me.name || ''}`)}>
|
||||||
|
<Image style={styles.profileImage} source={DEF_AVATER} />
|
||||||
|
<Text style={styles.profileText} numberOfLines={1}>
|
||||||
|
{store.me.displayName || store.me.name || 'My profile'}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<View style={[s.flex1]} />
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.settings}
|
||||||
|
onPress={() => onNavigate(`/settings`)}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="gear"
|
||||||
|
style={styles.settingsIcon}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
<View style={[styles.section]}>
|
||||||
|
<View style={styles.fatMenuItems}>
|
||||||
|
<FatMenuItem
|
||||||
|
icon="house"
|
||||||
|
label="Feed"
|
||||||
|
url="/"
|
||||||
|
gradient="primary"
|
||||||
|
/>
|
||||||
|
<FatMenuItem
|
||||||
|
icon="bell"
|
||||||
|
label="Notifications"
|
||||||
|
url="/notifications"
|
||||||
|
gradient="purple"
|
||||||
|
/>
|
||||||
|
<FatMenuItem
|
||||||
|
icon="gear"
|
||||||
|
label="Settings"
|
||||||
|
url="/settings"
|
||||||
|
gradient="blue"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
bg: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
backgroundColor: '#000',
|
||||||
|
opacity: 0.2,
|
||||||
|
},
|
||||||
|
wrapper: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 75,
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: 8,
|
||||||
|
opacity: 1,
|
||||||
|
paddingVertical: 10,
|
||||||
|
},
|
||||||
|
|
||||||
|
topSection: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
},
|
||||||
|
|
||||||
|
profile: {
|
||||||
|
paddingVertical: 10,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
profileImage: {
|
||||||
|
borderRadius: 15,
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
marginRight: 5,
|
||||||
|
},
|
||||||
|
profileText: {
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
|
||||||
|
settings: {},
|
||||||
|
settingsIcon: {
|
||||||
|
color: colors.gray5,
|
||||||
|
marginRight: 10,
|
||||||
|
},
|
||||||
|
|
||||||
|
fatMenuItems: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
marginTop: 10,
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
fatMenuItem: {
|
||||||
|
width: 80,
|
||||||
|
alignItems: 'center',
|
||||||
|
marginRight: 6,
|
||||||
|
},
|
||||||
|
fatMenuItemMargin: {
|
||||||
|
marginRight: 14,
|
||||||
|
},
|
||||||
|
fatMenuItemIconWrapper: {
|
||||||
|
borderRadius: 6,
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 5,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOpacity: 0.2,
|
||||||
|
shadowOffset: {width: 0, height: 2},
|
||||||
|
shadowRadius: 2,
|
||||||
|
},
|
||||||
|
fatMenuItemIcon: {
|
||||||
|
color: colors.white,
|
||||||
|
},
|
||||||
|
fatMenuImage: {
|
||||||
|
borderRadius: 30,
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
marginBottom: 5,
|
||||||
|
},
|
||||||
|
fatMenuItemLabel: {
|
||||||
|
fontSize: 13,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,383 @@
|
||||||
|
import React, {createRef, useRef, useMemo, useState} from 'react'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
ScrollView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
TouchableWithoutFeedback,
|
||||||
|
View,
|
||||||
|
} from 'react-native'
|
||||||
|
import Animated, {
|
||||||
|
useSharedValue,
|
||||||
|
useAnimatedStyle,
|
||||||
|
withTiming,
|
||||||
|
runOnJS,
|
||||||
|
} from 'react-native-reanimated'
|
||||||
|
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import Swipeable from 'react-native-gesture-handler/Swipeable'
|
||||||
|
import LinearGradient from 'react-native-linear-gradient'
|
||||||
|
import {useStores} from '../../../state'
|
||||||
|
import {s, colors, gradients} from '../../lib/styles'
|
||||||
|
import {DEF_AVATER} from '../../lib/assets'
|
||||||
|
import {match} from '../../routes'
|
||||||
|
import {LinkActionsModel} from '../../../state/models/shell'
|
||||||
|
|
||||||
|
const TAB_HEIGHT = 42
|
||||||
|
|
||||||
|
export const TabsSelector = observer(
|
||||||
|
({active, onClose}: {active: boolean; onClose: () => void}) => {
|
||||||
|
const store = useStores()
|
||||||
|
const [closingTabIndex, setClosingTabIndex] = useState<number | undefined>(
|
||||||
|
undefined,
|
||||||
|
)
|
||||||
|
const closeInterp = useSharedValue<number>(0)
|
||||||
|
const tabsRef = useRef<ScrollView>(null)
|
||||||
|
const tabRefs = useMemo(
|
||||||
|
() =>
|
||||||
|
Array.from({length: store.nav.tabs.length}).map(() =>
|
||||||
|
createRef<Animated.View>(),
|
||||||
|
),
|
||||||
|
[store.nav.tabs.length],
|
||||||
|
)
|
||||||
|
|
||||||
|
// events
|
||||||
|
// =
|
||||||
|
|
||||||
|
const onPressNewTab = () => {
|
||||||
|
store.nav.newTab('/')
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
const onPressCloneTab = () => {
|
||||||
|
store.nav.newTab(store.nav.tab.current.url)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
const onPressShareTab = () => {
|
||||||
|
onClose()
|
||||||
|
store.shell.openModal(
|
||||||
|
new LinkActionsModel(
|
||||||
|
store.nav.tab.current.url,
|
||||||
|
store.nav.tab.current.title || 'This Page',
|
||||||
|
{newTab: false},
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const onPressChangeTab = (tabIndex: number) => {
|
||||||
|
store.nav.setActiveTab(tabIndex)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
const doCloseTab = (index: number) => store.nav.closeTab(index)
|
||||||
|
const onCloseTab = (tabIndex: number) => {
|
||||||
|
setClosingTabIndex(tabIndex)
|
||||||
|
closeInterp.value = 0
|
||||||
|
closeInterp.value = withTiming(1, {duration: 300}, () => {
|
||||||
|
runOnJS(setClosingTabIndex)(undefined)
|
||||||
|
runOnJS(doCloseTab)(tabIndex)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const onNavigate = (url: string) => {
|
||||||
|
store.nav.navigate(url)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
const onLayout = () => {
|
||||||
|
// focus the current tab
|
||||||
|
const targetTab = tabRefs[store.nav.tabIndex]
|
||||||
|
if (tabsRef.current && targetTab.current) {
|
||||||
|
targetTab.current.measureLayout?.(
|
||||||
|
tabsRef.current,
|
||||||
|
(_left: number, top: number) => {
|
||||||
|
tabsRef.current?.scrollTo({y: top, animated: false})
|
||||||
|
},
|
||||||
|
() => {},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// rendering
|
||||||
|
// =
|
||||||
|
|
||||||
|
const FatMenuItem = ({
|
||||||
|
icon,
|
||||||
|
label,
|
||||||
|
url,
|
||||||
|
gradient,
|
||||||
|
}: {
|
||||||
|
icon: IconProp
|
||||||
|
label: string
|
||||||
|
url: string
|
||||||
|
gradient: keyof typeof gradients
|
||||||
|
}) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.fatMenuItem, styles.fatMenuItemMargin]}
|
||||||
|
onPress={() => onNavigate(url)}>
|
||||||
|
<LinearGradient
|
||||||
|
style={[styles.fatMenuItemIconWrapper]}
|
||||||
|
colors={[gradients[gradient].start, gradients[gradient].end]}
|
||||||
|
start={{x: 0, y: 0}}
|
||||||
|
end={{x: 1, y: 1}}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={icon}
|
||||||
|
style={styles.fatMenuItemIcon}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
</LinearGradient>
|
||||||
|
<Text style={styles.fatMenuItemLabel} numberOfLines={1}>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)
|
||||||
|
|
||||||
|
const renderSwipeActions = () => {
|
||||||
|
return <View style={[s.p2]} />
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentTabIndex = store.nav.tabIndex
|
||||||
|
const closingTabAnimStyle = useAnimatedStyle(() => ({
|
||||||
|
height: TAB_HEIGHT * (1 - closeInterp.value),
|
||||||
|
opacity: 1 - closeInterp.value,
|
||||||
|
marginBottom: 4 * (1 - closeInterp.value),
|
||||||
|
}))
|
||||||
|
|
||||||
|
if (!active) {
|
||||||
|
return <View />
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TouchableWithoutFeedback onPress={onClose}>
|
||||||
|
<View style={styles.bg} />
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
<View style={styles.wrapper}>
|
||||||
|
<View onLayout={onLayout}>
|
||||||
|
<View style={[s.p10, styles.section]}>
|
||||||
|
<View style={styles.btns}>
|
||||||
|
<TouchableWithoutFeedback onPress={onPressShareTab}>
|
||||||
|
<View style={[styles.btn]}>
|
||||||
|
<View style={styles.btnIcon}>
|
||||||
|
<FontAwesomeIcon size={16} icon="share" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.btnText}>Share</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
<TouchableWithoutFeedback onPress={onPressCloneTab}>
|
||||||
|
<View style={[styles.btn]}>
|
||||||
|
<View style={styles.btnIcon}>
|
||||||
|
<FontAwesomeIcon size={16} icon={['far', 'clone']} />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.btnText}>Clone tab</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
<TouchableWithoutFeedback onPress={onPressNewTab}>
|
||||||
|
<View style={[styles.btn]}>
|
||||||
|
<View style={styles.btnIcon}>
|
||||||
|
<FontAwesomeIcon size={16} icon="plus" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.btnText}>New tab</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={[s.p10, styles.section, styles.sectionGrayBg]}>
|
||||||
|
<ScrollView ref={tabsRef} style={styles.tabs}>
|
||||||
|
{store.nav.tabs.map((tab, tabIndex) => {
|
||||||
|
const {icon} = match(tab.current.url)
|
||||||
|
const isActive = tabIndex === currentTabIndex
|
||||||
|
const isClosing = closingTabIndex === tabIndex
|
||||||
|
return (
|
||||||
|
<Swipeable
|
||||||
|
key={tab.id}
|
||||||
|
renderLeftActions={renderSwipeActions}
|
||||||
|
renderRightActions={renderSwipeActions}
|
||||||
|
leftThreshold={100}
|
||||||
|
rightThreshold={100}
|
||||||
|
onSwipeableWillOpen={() => onCloseTab(tabIndex)}>
|
||||||
|
<Animated.View
|
||||||
|
style={[
|
||||||
|
styles.tabOuter,
|
||||||
|
isClosing ? closingTabAnimStyle : undefined,
|
||||||
|
]}>
|
||||||
|
<Animated.View
|
||||||
|
ref={tabRefs[tabIndex]}
|
||||||
|
style={[
|
||||||
|
styles.tab,
|
||||||
|
styles.existing,
|
||||||
|
isActive && styles.active,
|
||||||
|
]}>
|
||||||
|
<TouchableWithoutFeedback
|
||||||
|
onPress={() => onPressChangeTab(tabIndex)}>
|
||||||
|
<View style={styles.tabInner}>
|
||||||
|
<View style={styles.tabIcon}>
|
||||||
|
<FontAwesomeIcon size={20} icon={icon} />
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
ellipsizeMode="tail"
|
||||||
|
numberOfLines={1}
|
||||||
|
suppressHighlighting={true}
|
||||||
|
style={[
|
||||||
|
styles.tabText,
|
||||||
|
isActive && styles.tabTextActive,
|
||||||
|
]}>
|
||||||
|
{tab.current.title || tab.current.url}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
<TouchableWithoutFeedback
|
||||||
|
onPress={() => onCloseTab(tabIndex)}>
|
||||||
|
<View style={styles.tabClose}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
size={14}
|
||||||
|
icon="x"
|
||||||
|
style={styles.tabCloseIcon}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
</Animated.View>
|
||||||
|
</Animated.View>
|
||||||
|
</Swipeable>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
bg: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
backgroundColor: '#000',
|
||||||
|
opacity: 0.2,
|
||||||
|
},
|
||||||
|
wrapper: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 75,
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: 8,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
borderBottomColor: colors.gray2,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
},
|
||||||
|
sectionGrayBg: {
|
||||||
|
backgroundColor: colors.gray1,
|
||||||
|
borderBottomLeftRadius: 8,
|
||||||
|
borderBottomRightRadius: 8,
|
||||||
|
},
|
||||||
|
fatMenuItems: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
marginTop: 10,
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
fatMenuItem: {
|
||||||
|
width: 80,
|
||||||
|
alignItems: 'center',
|
||||||
|
marginRight: 6,
|
||||||
|
},
|
||||||
|
fatMenuItemMargin: {
|
||||||
|
marginRight: 14,
|
||||||
|
},
|
||||||
|
fatMenuItemIconWrapper: {
|
||||||
|
borderRadius: 6,
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 5,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOpacity: 0.2,
|
||||||
|
shadowOffset: {width: 0, height: 2},
|
||||||
|
shadowRadius: 2,
|
||||||
|
},
|
||||||
|
fatMenuItemIcon: {
|
||||||
|
color: colors.white,
|
||||||
|
},
|
||||||
|
fatMenuImage: {
|
||||||
|
borderRadius: 30,
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
marginBottom: 5,
|
||||||
|
},
|
||||||
|
fatMenuItemLabel: {
|
||||||
|
fontSize: 13,
|
||||||
|
},
|
||||||
|
tabs: {
|
||||||
|
height: 240,
|
||||||
|
},
|
||||||
|
tabOuter: {
|
||||||
|
height: TAB_HEIGHT + 4,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
tab: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
height: TAB_HEIGHT,
|
||||||
|
backgroundColor: colors.gray1,
|
||||||
|
alignItems: 'center',
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
tabInner: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingLeft: 12,
|
||||||
|
paddingVertical: 12,
|
||||||
|
},
|
||||||
|
existing: {
|
||||||
|
borderColor: colors.gray4,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
borderColor: colors.black,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
tabIcon: {},
|
||||||
|
tabText: {
|
||||||
|
flex: 1,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
tabTextActive: {
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
tabClose: {
|
||||||
|
paddingVertical: 16,
|
||||||
|
paddingRight: 16,
|
||||||
|
},
|
||||||
|
tabCloseIcon: {
|
||||||
|
color: '#655',
|
||||||
|
},
|
||||||
|
btns: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
paddingTop: 2,
|
||||||
|
},
|
||||||
|
btn: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: colors.gray1,
|
||||||
|
borderRadius: 4,
|
||||||
|
marginRight: 5,
|
||||||
|
paddingLeft: 12,
|
||||||
|
paddingRight: 16,
|
||||||
|
paddingVertical: 10,
|
||||||
|
},
|
||||||
|
btnIcon: {
|
||||||
|
marginRight: 8,
|
||||||
|
},
|
||||||
|
btnText: {
|
||||||
|
fontWeight: '500',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
Image,
|
|
||||||
StyleSheet,
|
|
||||||
Text,
|
|
||||||
TouchableOpacity,
|
|
||||||
TouchableWithoutFeedback,
|
|
||||||
View,
|
|
||||||
} from 'react-native'
|
|
||||||
import RootSiblings from 'react-native-root-siblings'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import {DEF_AVATER} from '../../lib/assets'
|
|
||||||
import {s, colors} from '../../lib/styles'
|
|
||||||
|
|
||||||
export function createAccountsMenu({
|
|
||||||
debug_onPressItem,
|
|
||||||
onPressLogout,
|
|
||||||
}: {
|
|
||||||
debug_onPressItem: () => void
|
|
||||||
onPressLogout: () => void
|
|
||||||
}): RootSiblings {
|
|
||||||
const onPressItem = (_index: number) => {
|
|
||||||
sibling.destroy()
|
|
||||||
debug_onPressItem() // TODO
|
|
||||||
}
|
|
||||||
const onOuterPress = () => sibling.destroy()
|
|
||||||
const sibling = new RootSiblings(
|
|
||||||
(
|
|
||||||
<>
|
|
||||||
<TouchableWithoutFeedback onPress={onOuterPress}>
|
|
||||||
<View style={styles.bg} />
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
<View style={[styles.menu]}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.menuItem]}
|
|
||||||
onPress={() => onPressItem(0)}>
|
|
||||||
<Image style={styles.avi} source={DEF_AVATER} />
|
|
||||||
<Text style={[styles.label, s.bold]}>Alice</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.menuItem, styles.menuItemBorder]}
|
|
||||||
onPress={() => onPressItem(0)}>
|
|
||||||
<FontAwesomeIcon style={styles.icon} icon="plus" />
|
|
||||||
<Text style={styles.label}>New Account</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.menuItem, styles.menuItemBorder]}
|
|
||||||
onPress={() => {
|
|
||||||
sibling.destroy()
|
|
||||||
onPressLogout()
|
|
||||||
}}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
style={styles.icon}
|
|
||||||
icon="arrow-right-from-bracket"
|
|
||||||
/>
|
|
||||||
<Text style={styles.label}>Log out</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
)
|
|
||||||
return sibling
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
bg: {
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
backgroundColor: '#000',
|
|
||||||
opacity: 0.1,
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: 4,
|
|
||||||
top: 70,
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
borderRadius: 14,
|
|
||||||
opacity: 1,
|
|
||||||
paddingVertical: 2,
|
|
||||||
},
|
|
||||||
menuItem: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingVertical: 8,
|
|
||||||
paddingLeft: 10,
|
|
||||||
paddingRight: 30,
|
|
||||||
},
|
|
||||||
menuItemBorder: {
|
|
||||||
borderTopWidth: 1,
|
|
||||||
borderTopColor: colors.gray1,
|
|
||||||
},
|
|
||||||
avi: {
|
|
||||||
width: 28,
|
|
||||||
height: 28,
|
|
||||||
marginRight: 8,
|
|
||||||
borderRadius: 14,
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
marginLeft: 6,
|
|
||||||
marginRight: 6,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
@ -28,53 +28,16 @@ import {TabsSelectorModel} from '../../../state/models/shell'
|
||||||
import {match, MatchResult} from '../../routes'
|
import {match, MatchResult} from '../../routes'
|
||||||
import {Login} from '../../screens/Login'
|
import {Login} from '../../screens/Login'
|
||||||
import {Modal} from '../../com/modals/Modal'
|
import {Modal} from '../../com/modals/Modal'
|
||||||
import {LocationNavigator} from './location-navigator'
|
import {LocationNavigator} from './LocationNavigator'
|
||||||
import {createBackMenu, createForwardMenu} from './history-menu'
|
import {createBackMenu, createForwardMenu} from './HistoryMenu'
|
||||||
import {createAccountsMenu} from './accounts-menu'
|
import {MainMenu} from './MainMenu'
|
||||||
import {createLocationMenu} from './location-menu'
|
import {TabsSelector} from './TabsSelector'
|
||||||
import {s, colors} from '../../lib/styles'
|
import {s, colors} from '../../lib/styles'
|
||||||
import {GridIcon, HomeIcon} from '../../lib/icons'
|
import {GridIcon, HomeIcon} from '../../lib/icons'
|
||||||
import {DEF_AVATER} from '../../lib/assets'
|
|
||||||
|
|
||||||
const locationIconNeedsNudgeUp = (icon: IconProp) => icon === 'house'
|
|
||||||
const SWIPE_GESTURE_DIST_TRIGGER = 0.5
|
const SWIPE_GESTURE_DIST_TRIGGER = 0.5
|
||||||
const SWIPE_GESTURE_VEL_TRIGGER = 2500
|
const SWIPE_GESTURE_VEL_TRIGGER = 2500
|
||||||
|
|
||||||
const Location = ({
|
|
||||||
icon,
|
|
||||||
title,
|
|
||||||
onPress,
|
|
||||||
}: {
|
|
||||||
icon: IconProp
|
|
||||||
title?: string
|
|
||||||
onPress?: (event: GestureResponderEvent) => void
|
|
||||||
}) => {
|
|
||||||
const nudgeUp = locationIconNeedsNudgeUp(icon)
|
|
||||||
return (
|
|
||||||
<TouchableOpacity style={styles.location} onPress={onPress}>
|
|
||||||
{title ? (
|
|
||||||
<FontAwesomeIcon
|
|
||||||
size={12}
|
|
||||||
style={[
|
|
||||||
styles.locationIcon,
|
|
||||||
nudgeUp ? styles.locationIconNudgeUp : undefined,
|
|
||||||
]}
|
|
||||||
icon={icon}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<FontAwesomeIcon
|
|
||||||
size={12}
|
|
||||||
style={styles.locationIconLight}
|
|
||||||
icon="magnifying-glass"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Text style={title ? styles.locationText : styles.locationTextLight}>
|
|
||||||
{title || 'Search'}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Btn = ({
|
const Btn = ({
|
||||||
icon,
|
icon,
|
||||||
inactive,
|
inactive,
|
||||||
|
|
@ -89,7 +52,7 @@ const Btn = ({
|
||||||
onLongPress?: (event: GestureResponderEvent) => void
|
onLongPress?: (event: GestureResponderEvent) => void
|
||||||
}) => {
|
}) => {
|
||||||
let IconEl
|
let IconEl
|
||||||
if (icon === 'bars') {
|
if (icon === 'menu') {
|
||||||
IconEl = GridIcon
|
IconEl = GridIcon
|
||||||
} else if (icon === 'house') {
|
} else if (icon === 'house') {
|
||||||
IconEl = HomeIcon
|
IconEl = HomeIcon
|
||||||
|
|
@ -131,18 +94,12 @@ const Btn = ({
|
||||||
export const MobileShell: React.FC = observer(() => {
|
export const MobileShell: React.FC = observer(() => {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
const [isLocationMenuActive, setLocationMenuActive] = useState(false)
|
const [isLocationMenuActive, setLocationMenuActive] = useState(false)
|
||||||
|
const [isMainMenuActive, setMainMenuActive] = useState(false)
|
||||||
|
const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
|
||||||
const winDim = useWindowDimensions()
|
const winDim = useWindowDimensions()
|
||||||
const swipeGestureInterp = useSharedValue<number>(0)
|
const swipeGestureInterp = useSharedValue<number>(0)
|
||||||
const screenRenderDesc = constructScreenRenderDesc(store.nav)
|
const screenRenderDesc = constructScreenRenderDesc(store.nav)
|
||||||
|
|
||||||
const onPressAvi = () =>
|
|
||||||
createAccountsMenu({
|
|
||||||
debug_onPressItem: () => store.nav.navigate('/profile/alice.test'),
|
|
||||||
onPressLogout: () => store.session.logout(),
|
|
||||||
})
|
|
||||||
const onPressLocation = () => setLocationMenuActive(true)
|
|
||||||
const onPressEllipsis = () => createLocationMenu()
|
|
||||||
|
|
||||||
const onNavigateLocation = (url: string) => {
|
const onNavigateLocation = (url: string) => {
|
||||||
setLocationMenuActive(false)
|
setLocationMenuActive(false)
|
||||||
store.nav.navigate(url)
|
store.nav.navigate(url)
|
||||||
|
|
@ -150,13 +107,14 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
const onDismissLocationNavigator = () => setLocationMenuActive(false)
|
const onDismissLocationNavigator = () => setLocationMenuActive(false)
|
||||||
|
|
||||||
const onPressBack = () => store.nav.tab.goBack()
|
const onPressBack = () => store.nav.tab.goBack()
|
||||||
const onPressForward = () => store.nav.tab.goForward()
|
// const onPressForward = () => store.nav.tab.goForward()
|
||||||
const onPressHome = () => store.nav.navigate('/')
|
const onPressHome = () => store.nav.navigate('/')
|
||||||
|
const onPressMenu = () => setMainMenuActive(true)
|
||||||
const onPressNotifications = () => store.nav.navigate('/notifications')
|
const onPressNotifications = () => store.nav.navigate('/notifications')
|
||||||
const onPressTabs = () => store.shell.openModal(new TabsSelectorModel())
|
const onPressTabs = () => setTabsSelectorActive(true) //store.shell.openModal(new TabsSelectorModel())
|
||||||
|
|
||||||
const onLongPressBack = () => createBackMenu(store.nav.tab)
|
const onLongPressBack = () => createBackMenu(store.nav.tab)
|
||||||
const onLongPressForward = () => createForwardMenu(store.nav.tab)
|
// const onLongPressForward = () => createForwardMenu(store.nav.tab)
|
||||||
|
|
||||||
const goBack = () => store.nav.tab.goBack()
|
const goBack = () => store.nav.tab.goBack()
|
||||||
const swipeGesture = Gesture.Pan()
|
const swipeGesture = Gesture.Pan()
|
||||||
|
|
@ -205,19 +163,6 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.outerContainer}>
|
<View style={styles.outerContainer}>
|
||||||
{/* <View style={styles.topBar}>
|
|
||||||
<TouchableOpacity onPress={onPressAvi}>
|
|
||||||
<Image style={styles.avi} source={DEF_AVATER} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
<Location
|
|
||||||
icon={screenRenderDesc.icon}
|
|
||||||
title={store.nav.tab.current.title}
|
|
||||||
onPress={onPressLocation}
|
|
||||||
/>
|
|
||||||
<TouchableOpacity style={styles.topBarBtn} onPress={onPressEllipsis}>
|
|
||||||
<FontAwesomeIcon icon="ellipsis" />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View> */}
|
|
||||||
<SafeAreaView style={styles.innerContainer}>
|
<SafeAreaView style={styles.innerContainer}>
|
||||||
<GestureDetector gesture={swipeGesture}>
|
<GestureDetector gesture={swipeGesture}>
|
||||||
<ScreenContainer style={styles.screenContainer}>
|
<ScreenContainer style={styles.screenContainer}>
|
||||||
|
|
@ -255,21 +200,32 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
onPress={onPressBack}
|
onPress={onPressBack}
|
||||||
onLongPress={onLongPressBack}
|
onLongPress={onLongPressBack}
|
||||||
/>
|
/>
|
||||||
<Btn
|
{
|
||||||
|
undefined /*<Btn
|
||||||
icon="angle-right"
|
icon="angle-right"
|
||||||
inactive={!store.nav.tab.canGoForward}
|
inactive={!store.nav.tab.canGoForward}
|
||||||
onPress={onPressForward}
|
onPress={onPressForward}
|
||||||
onLongPress={onLongPressForward}
|
onLongPress={onLongPressForward}
|
||||||
/>
|
/>*/
|
||||||
|
}
|
||||||
<Btn icon="house" onPress={onPressHome} />
|
<Btn icon="house" onPress={onPressHome} />
|
||||||
|
<Btn icon="menu" onPress={onPressMenu} />
|
||||||
<Btn
|
<Btn
|
||||||
icon={['far', 'bell']}
|
icon={['far', 'bell']}
|
||||||
onPress={onPressNotifications}
|
onPress={onPressNotifications}
|
||||||
notificationCount={store.me.notificationCount}
|
notificationCount={store.me.notificationCount}
|
||||||
/>
|
/>
|
||||||
<Btn icon="bars" onPress={onPressTabs} />
|
<Btn icon={['far', 'clone']} onPress={onPressTabs} />
|
||||||
</View>
|
</View>
|
||||||
<Modal />
|
<Modal />
|
||||||
|
<MainMenu
|
||||||
|
active={isMainMenuActive}
|
||||||
|
onClose={() => setMainMenuActive(false)}
|
||||||
|
/>
|
||||||
|
<TabsSelector
|
||||||
|
active={isTabsSelectorActive}
|
||||||
|
onClose={() => setTabsSelectorActive(false)}
|
||||||
|
/>
|
||||||
{isLocationMenuActive && (
|
{isLocationMenuActive && (
|
||||||
<LocationNavigator
|
<LocationNavigator
|
||||||
url={store.nav.tab.current.url}
|
url={store.nav.tab.current.url}
|
||||||
|
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
StyleSheet,
|
|
||||||
Text,
|
|
||||||
TouchableOpacity,
|
|
||||||
TouchableWithoutFeedback,
|
|
||||||
View,
|
|
||||||
} from 'react-native'
|
|
||||||
import RootSiblings from 'react-native-root-siblings'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import {colors} from '../../lib/styles'
|
|
||||||
|
|
||||||
export function createLocationMenu(): RootSiblings {
|
|
||||||
const onPressItem = (_index: number) => {
|
|
||||||
sibling.destroy()
|
|
||||||
}
|
|
||||||
const onOuterPress = () => sibling.destroy()
|
|
||||||
const sibling = new RootSiblings(
|
|
||||||
(
|
|
||||||
<>
|
|
||||||
<TouchableWithoutFeedback onPress={onOuterPress}>
|
|
||||||
<View style={styles.bg} />
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
<View style={[styles.menu]}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.menuItem]}
|
|
||||||
onPress={() => onPressItem(0)}>
|
|
||||||
<FontAwesomeIcon style={styles.icon} icon="share" />
|
|
||||||
<Text style={styles.label}>Share</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.menuItem]}
|
|
||||||
onPress={() => onPressItem(0)}>
|
|
||||||
<FontAwesomeIcon style={styles.icon} icon="link" />
|
|
||||||
<Text style={styles.label}>Copy Link</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.menuItem, styles.menuItemBorder]}
|
|
||||||
onPress={() => onPressItem(0)}>
|
|
||||||
<FontAwesomeIcon style={styles.icon} icon={['far', 'clone']} />
|
|
||||||
<Text style={styles.label}>Duplicate Tab</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
)
|
|
||||||
return sibling
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
bg: {
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
backgroundColor: '#000',
|
|
||||||
opacity: 0.1,
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
position: 'absolute',
|
|
||||||
right: 4,
|
|
||||||
top: 70,
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
borderRadius: 14,
|
|
||||||
opacity: 1,
|
|
||||||
paddingVertical: 6,
|
|
||||||
},
|
|
||||||
menuItem: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingVertical: 6,
|
|
||||||
paddingLeft: 10,
|
|
||||||
paddingRight: 30,
|
|
||||||
},
|
|
||||||
menuItemBorder: {
|
|
||||||
borderTopWidth: 1,
|
|
||||||
borderTopColor: colors.gray1,
|
|
||||||
marginTop: 4,
|
|
||||||
paddingTop: 12,
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
marginLeft: 6,
|
|
||||||
marginRight: 8,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
fontSize: 15,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue