Remove old tabs selector modal
Paul Frazee
parent
98937dda47
commit
05055e184d
|
|
@ -2,14 +2,6 @@ import {makeAutoObservable} from 'mobx'
|
||||||
import {ProfileViewModel} from './profile-view'
|
import {ProfileViewModel} from './profile-view'
|
||||||
import * as Post from '../../third-party/api/src/types/app/bsky/post'
|
import * as Post from '../../third-party/api/src/types/app/bsky/post'
|
||||||
|
|
||||||
export class TabsSelectorModel {
|
|
||||||
name = 'tabs-selector'
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
makeAutoObservable(this)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LinkActionsModelOpts {
|
export interface LinkActionsModelOpts {
|
||||||
newTab?: boolean
|
newTab?: boolean
|
||||||
}
|
}
|
||||||
|
|
@ -62,7 +54,6 @@ export class EditProfileModel {
|
||||||
export class ShellModel {
|
export class ShellModel {
|
||||||
isModalActive = false
|
isModalActive = false
|
||||||
activeModal:
|
activeModal:
|
||||||
| TabsSelectorModel
|
|
||||||
| LinkActionsModel
|
| LinkActionsModel
|
||||||
| SharePostModel
|
| SharePostModel
|
||||||
| ComposePostModel
|
| ComposePostModel
|
||||||
|
|
@ -75,7 +66,6 @@ export class ShellModel {
|
||||||
|
|
||||||
openModal(
|
openModal(
|
||||||
modal:
|
modal:
|
||||||
| TabsSelectorModel
|
|
||||||
| LinkActionsModel
|
| LinkActionsModel
|
||||||
| SharePostModel
|
| SharePostModel
|
||||||
| ComposePostModel
|
| ComposePostModel
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
|
||||||
|
|
||||||
import * as models from '../../../state/models/shell'
|
import * as models from '../../../state/models/shell'
|
||||||
|
|
||||||
import * as TabsSelectorModal from './TabsSelector'
|
|
||||||
import * as LinkActionsModal from './LinkActions'
|
import * as LinkActionsModal from './LinkActions'
|
||||||
import * as SharePostModal from './SharePost.native'
|
import * as SharePostModal from './SharePost.native'
|
||||||
import * as ComposePostModal from './ComposePost'
|
import * as ComposePostModal from './ComposePost'
|
||||||
|
|
@ -38,14 +37,7 @@ export const Modal = observer(function Modal() {
|
||||||
|
|
||||||
let snapPoints: (string | number)[] = CLOSED_SNAPPOINTS
|
let snapPoints: (string | number)[] = CLOSED_SNAPPOINTS
|
||||||
let element
|
let element
|
||||||
if (store.shell.activeModal?.name === 'tabs-selector') {
|
if (store.shell.activeModal?.name === 'link-actions') {
|
||||||
snapPoints = TabsSelectorModal.snapPoints
|
|
||||||
element = (
|
|
||||||
<TabsSelectorModal.Component
|
|
||||||
{...(store.shell.activeModal as models.TabsSelectorModel)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else if (store.shell.activeModal?.name === 'link-actions') {
|
|
||||||
snapPoints = LinkActionsModal.snapPoints
|
snapPoints = LinkActionsModal.snapPoints
|
||||||
element = (
|
element = (
|
||||||
<LinkActionsModal.Component
|
<LinkActionsModal.Component
|
||||||
|
|
|
||||||
|
|
@ -1,376 +0,0 @@
|
||||||
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_AVATAR} from '../../lib/assets'
|
|
||||||
import {match} from '../../routes'
|
|
||||||
import {LinkActionsModel} from '../../../state/models/shell'
|
|
||||||
|
|
||||||
const TAB_HEIGHT = 42
|
|
||||||
|
|
||||||
export const snapPoints = [500]
|
|
||||||
|
|
||||||
export const Component = observer(() => {
|
|
||||||
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 onClose = () => {
|
|
||||||
store.shell.closeModal()
|
|
||||||
}
|
|
||||||
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),
|
|
||||||
}))
|
|
||||||
return (
|
|
||||||
<View onLayout={onLayout}>
|
|
||||||
<View style={[s.p10, styles.section]}>
|
|
||||||
<View style={styles.fatMenuItems}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.fatMenuItem}
|
|
||||||
onPress={() => onNavigate(`/profile/${store.me.name || ''}`)}>
|
|
||||||
<Image style={styles.fatMenuImage} source={DEF_AVATAR} />
|
|
||||||
<Text style={styles.fatMenuItemLabel} numberOfLines={1}>
|
|
||||||
{store.me.displayName || store.me.name || 'My profile'}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<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 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>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
section: {
|
|
||||||
borderBottomColor: colors.gray2,
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
},
|
|
||||||
sectionGrayBg: {
|
|
||||||
backgroundColor: colors.gray1,
|
|
||||||
},
|
|
||||||
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,176 +0,0 @@
|
||||||
import React, {useState, useRef} from 'react'
|
|
||||||
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
|
|
||||||
import LinearGradient from 'react-native-linear-gradient'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import {s, gradients, colors} from '../../lib/styles'
|
|
||||||
|
|
||||||
export function LocationNavigator({
|
|
||||||
url,
|
|
||||||
onNavigate,
|
|
||||||
onDismiss,
|
|
||||||
}: {
|
|
||||||
url: string
|
|
||||||
onNavigate: (url: string) => void
|
|
||||||
onDismiss: () => void
|
|
||||||
}) {
|
|
||||||
const [searchText, onChangeSearchText] = useState(url !== '/' ? url : '')
|
|
||||||
const inputRef = useRef<TextInput | null>(null)
|
|
||||||
|
|
||||||
const onFocusSearchText = () => {
|
|
||||||
if (inputRef.current && searchText.length) {
|
|
||||||
// select the text on focus
|
|
||||||
inputRef.current.setNativeProps({
|
|
||||||
selection: {start: 0, end: searchText.length},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const FatMenuItem = ({
|
|
||||||
icon,
|
|
||||||
label,
|
|
||||||
url,
|
|
||||||
gradient,
|
|
||||||
}: {
|
|
||||||
icon: IconProp
|
|
||||||
label: string
|
|
||||||
url: string
|
|
||||||
gradient: keyof typeof gradients
|
|
||||||
}) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.fatMenuItem}
|
|
||||||
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}>{label}</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
)
|
|
||||||
|
|
||||||
const ThinMenuItem = ({label, url}: {label: string; url: string}) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.thinMenuItem}
|
|
||||||
onPress={() => onNavigate(url)}>
|
|
||||||
<Text style={styles.thinMenuItemLabel}>{label}</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.menu}>
|
|
||||||
<View style={styles.searchContainer}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="magnifying-glass"
|
|
||||||
size={18}
|
|
||||||
style={styles.searchIcon}
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
autoFocus
|
|
||||||
ref={inputRef}
|
|
||||||
value={searchText}
|
|
||||||
style={styles.searchInput}
|
|
||||||
onChangeText={onChangeSearchText}
|
|
||||||
onFocus={onFocusSearchText}
|
|
||||||
/>
|
|
||||||
<TouchableOpacity onPress={() => onDismiss()}>
|
|
||||||
<Text style={[s.blue3, s.f15]}>Cancel</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
<View style={styles.menuItemsContainer}>
|
|
||||||
<View style={styles.fatMenuItems}>
|
|
||||||
<FatMenuItem icon="house" label="Feed" url="/" gradient="primary" />
|
|
||||||
<FatMenuItem
|
|
||||||
icon="bell"
|
|
||||||
label="Notifications"
|
|
||||||
url="/notifications"
|
|
||||||
gradient="purple"
|
|
||||||
/>
|
|
||||||
<FatMenuItem
|
|
||||||
icon={['far', 'user']}
|
|
||||||
label="My Profile"
|
|
||||||
url="/"
|
|
||||||
gradient="blue"
|
|
||||||
/>
|
|
||||||
<FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
|
|
||||||
</View>
|
|
||||||
<View style={styles.thinMenuItems}>
|
|
||||||
<ThinMenuItem label="Send us feedback" url="/" />
|
|
||||||
<ThinMenuItem label="Get help..." url="/" />
|
|
||||||
<ThinMenuItem label="Settings" url="/" />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
menu: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
searchContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
backgroundColor: colors.gray1,
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderColor: colors.gray2,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingTop: 48,
|
|
||||||
paddingBottom: 8,
|
|
||||||
},
|
|
||||||
searchIcon: {
|
|
||||||
color: colors.gray5,
|
|
||||||
marginRight: 8,
|
|
||||||
},
|
|
||||||
searchInput: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
menuItemsContainer: {
|
|
||||||
paddingVertical: 30,
|
|
||||||
paddingHorizontal: 8,
|
|
||||||
},
|
|
||||||
fatMenuItems: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
fatMenuItem: {
|
|
||||||
width: 86,
|
|
||||||
alignItems: 'center',
|
|
||||||
marginRight: 6,
|
|
||||||
},
|
|
||||||
fatMenuItemIconWrapper: {
|
|
||||||
borderRadius: 6,
|
|
||||||
width: 50,
|
|
||||||
height: 50,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 5,
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOpacity: 0.2,
|
|
||||||
shadowOffset: {width: 0, height: 2},
|
|
||||||
shadowRadius: 2,
|
|
||||||
},
|
|
||||||
fatMenuItemIcon: {
|
|
||||||
color: colors.white,
|
|
||||||
},
|
|
||||||
fatMenuItemLabel: {
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
thinMenuItems: {
|
|
||||||
paddingHorizontal: 18,
|
|
||||||
},
|
|
||||||
thinMenuItem: {
|
|
||||||
paddingVertical: 4,
|
|
||||||
},
|
|
||||||
thinMenuItemLabel: {
|
|
||||||
color: colors.blue3,
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
@ -28,7 +28,6 @@ import {NavigationModel} from '../../../state/models/navigation'
|
||||||
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 './LocationNavigator'
|
|
||||||
import {MainMenu} from './MainMenu'
|
import {MainMenu} from './MainMenu'
|
||||||
import {TabsSelector} from './TabsSelector'
|
import {TabsSelector} from './TabsSelector'
|
||||||
import {s, colors} from '../../lib/styles'
|
import {s, colors} from '../../lib/styles'
|
||||||
|
|
@ -99,7 +98,6 @@ 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 [isMainMenuActive, setMainMenuActive] = useState(false)
|
const [isMainMenuActive, setMainMenuActive] = useState(false)
|
||||||
const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
|
const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
|
||||||
const scrollElRef = useRef<FlatList | undefined>()
|
const scrollElRef = useRef<FlatList | undefined>()
|
||||||
|
|
@ -107,12 +105,6 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
const swipeGestureInterp = useSharedValue<number>(0)
|
const swipeGestureInterp = useSharedValue<number>(0)
|
||||||
const screenRenderDesc = constructScreenRenderDesc(store.nav)
|
const screenRenderDesc = constructScreenRenderDesc(store.nav)
|
||||||
|
|
||||||
const onNavigateLocation = (url: string) => {
|
|
||||||
setLocationMenuActive(false)
|
|
||||||
store.nav.navigate(url)
|
|
||||||
}
|
|
||||||
const onDismissLocationNavigator = () => setLocationMenuActive(false)
|
|
||||||
|
|
||||||
const onPressHome = () => {
|
const onPressHome = () => {
|
||||||
if (store.nav.tab.current.url === '/') {
|
if (store.nav.tab.current.url === '/') {
|
||||||
scrollElRef.current?.scrollToOffset({offset: 0})
|
scrollElRef.current?.scrollToOffset({offset: 0})
|
||||||
|
|
@ -225,13 +217,6 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
active={isTabsSelectorActive}
|
active={isTabsSelectorActive}
|
||||||
onClose={() => setTabsSelectorActive(false)}
|
onClose={() => setTabsSelectorActive(false)}
|
||||||
/>
|
/>
|
||||||
{isLocationMenuActive && (
|
|
||||||
<LocationNavigator
|
|
||||||
url={store.nav.tab.current.url}
|
|
||||||
onNavigate={onNavigateLocation}
|
|
||||||
onDismiss={onDismissLocationNavigator}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue