Turn the main menu into a 'drawer' instead of a screen in the history
parent
53b8f0d040
commit
e73c7cee39
|
@ -12,7 +12,7 @@ function genId() {
|
||||||
// until we're fully sure what that is, the tabs are being repurposed into a fixed topology
|
// until we're fully sure what that is, the tabs are being repurposed into a fixed topology
|
||||||
// - Tab 0: The "Default" tab
|
// - Tab 0: The "Default" tab
|
||||||
// - Tab 1: The "Notifications" tab
|
// - Tab 1: The "Notifications" tab
|
||||||
// These tabs always retain the first 2 items in their history.
|
// These tabs always retain the first item in their history.
|
||||||
// The default tab is used for basically everything except notifications.
|
// The default tab is used for basically everything except notifications.
|
||||||
// -prf
|
// -prf
|
||||||
export enum TabPurpose {
|
export enum TabPurpose {
|
||||||
|
@ -32,20 +32,14 @@ export type HistoryPtr = [number, number]
|
||||||
export class NavigationTabModel {
|
export class NavigationTabModel {
|
||||||
id = genId()
|
id = genId()
|
||||||
history: HistoryItem[]
|
history: HistoryItem[]
|
||||||
index = 1
|
index = 0
|
||||||
isNewTab = false
|
isNewTab = false
|
||||||
|
|
||||||
constructor(public fixedTabPurpose: TabPurpose) {
|
constructor(public fixedTabPurpose: TabPurpose) {
|
||||||
if (fixedTabPurpose === TabPurpose.Notifs) {
|
if (fixedTabPurpose === TabPurpose.Notifs) {
|
||||||
this.history = [
|
this.history = [{url: '/notifications', ts: Date.now(), id: genId()}]
|
||||||
{url: '/menu', ts: Date.now(), id: genId()},
|
|
||||||
{url: '/notifications', ts: Date.now(), id: genId()},
|
|
||||||
]
|
|
||||||
} else {
|
} else {
|
||||||
this.history = [
|
this.history = [{url: '/', ts: Date.now(), id: genId()}]
|
||||||
{url: '/menu', ts: Date.now(), id: genId()},
|
|
||||||
{url: '/', ts: Date.now(), id: genId()},
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
makeAutoObservable(this, {
|
makeAutoObservable(this, {
|
||||||
serialize: false,
|
serialize: false,
|
||||||
|
@ -85,7 +79,7 @@ export class NavigationTabModel {
|
||||||
|
|
||||||
getForwardList(n: number) {
|
getForwardList(n: number) {
|
||||||
const start = Math.min(this.index + 1, this.history.length)
|
const start = Math.min(this.index + 1, this.history.length)
|
||||||
const end = Math.min(this.index + n, this.history.length)
|
const end = Math.min(this.index + n + 1, this.history.length)
|
||||||
return this.history.slice(start, end).map((item, i) => ({
|
return this.history.slice(start, end).map((item, i) => ({
|
||||||
url: item.url,
|
url: item.url,
|
||||||
title: item.title,
|
title: item.title,
|
||||||
|
@ -109,7 +103,7 @@ export class NavigationTabModel {
|
||||||
this.history.length = this.index + 1
|
this.history.length = this.index + 1
|
||||||
}
|
}
|
||||||
// TEMP ensure the tab has its purpose's main view -prf
|
// TEMP ensure the tab has its purpose's main view -prf
|
||||||
if (this.history.length < 2) {
|
if (this.history.length < 1) {
|
||||||
const fixedUrl =
|
const fixedUrl =
|
||||||
this.fixedTabPurpose === TabPurpose.Notifs ? '/notifications' : '/'
|
this.fixedTabPurpose === TabPurpose.Notifs ? '/notifications' : '/'
|
||||||
this.history.push({url: fixedUrl, ts: Date.now(), id: genId()})
|
this.history.push({url: fixedUrl, ts: Date.now(), id: genId()})
|
||||||
|
@ -142,17 +136,7 @@ export class NavigationTabModel {
|
||||||
// a helper to bring the tab back to its base state
|
// a helper to bring the tab back to its base state
|
||||||
// -prf
|
// -prf
|
||||||
fixedTabReset() {
|
fixedTabReset() {
|
||||||
if (this.index >= 1) {
|
this.index = 0
|
||||||
// fall back in history to "main" view
|
|
||||||
if (this.index > 1) {
|
|
||||||
this.index = 1
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const url =
|
|
||||||
this.fixedTabPurpose === TabPurpose.Notifs ? '/notifications' : '/'
|
|
||||||
this.history = [this.history[0], {url, ts: Date.now(), id: genId()}]
|
|
||||||
this.index = 1
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
goForward() {
|
goForward() {
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React, {MutableRefObject} from 'react'
|
import React, {MutableRefObject} from 'react'
|
||||||
import {FlatList} from 'react-native'
|
import {FlatList} from 'react-native'
|
||||||
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||||
import {Menu} from './screens/Menu'
|
|
||||||
import {Home} from './screens/Home'
|
import {Home} from './screens/Home'
|
||||||
import {Contacts} from './screens/Contacts'
|
import {Contacts} from './screens/Contacts'
|
||||||
import {Search} from './screens/Search'
|
import {Search} from './screens/Search'
|
||||||
|
@ -34,7 +33,6 @@ export type MatchResult = {
|
||||||
|
|
||||||
const r = (pattern: string) => new RegExp('^' + pattern + '([?]|$)', 'i')
|
const r = (pattern: string) => new RegExp('^' + pattern + '([?]|$)', 'i')
|
||||||
export const routes: Route[] = [
|
export const routes: Route[] = [
|
||||||
[Menu, 'Menu', 'bars', r('/menu')],
|
|
||||||
[Home, 'Home', 'house', r('/')],
|
[Home, 'Home', 'house', r('/')],
|
||||||
[Contacts, 'Contacts', ['far', 'circle-user'], r('/contacts')],
|
[Contacts, 'Contacts', ['far', 'circle-user'], r('/contacts')],
|
||||||
[Search, 'Search', 'magnifying-glass', r('/search')],
|
[Search, 'Search', 'magnifying-glass', r('/search')],
|
||||||
|
|
|
@ -8,26 +8,29 @@ import {
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import VersionNumber from 'react-native-version-number'
|
import VersionNumber from 'react-native-version-number'
|
||||||
import {s, colors} from '../lib/styles'
|
import {s, colors} from '../../lib/styles'
|
||||||
import {ScreenParams} from '../routes'
|
import {useStores} from '../../../state'
|
||||||
import {useStores} from '../../state'
|
|
||||||
import {
|
import {
|
||||||
HomeIcon,
|
HomeIcon,
|
||||||
UserGroupIcon,
|
UserGroupIcon,
|
||||||
BellIcon,
|
BellIcon,
|
||||||
CogIcon,
|
CogIcon,
|
||||||
MagnifyingGlassIcon,
|
MagnifyingGlassIcon,
|
||||||
} from '../lib/icons'
|
} from '../../lib/icons'
|
||||||
import {UserAvatar} from '../com/util/UserAvatar'
|
import {UserAvatar} from '../../com/util/UserAvatar'
|
||||||
import {ViewHeader} from '../com/util/ViewHeader'
|
import {CreateSceneModel} from '../../../state/models/shell-ui'
|
||||||
import {CreateSceneModel} from '../../state/models/shell-ui'
|
|
||||||
|
|
||||||
export const Menu = ({navIdx, visible}: ScreenParams) => {
|
export const Menu = ({
|
||||||
|
visible,
|
||||||
|
onClose,
|
||||||
|
}: {
|
||||||
|
visible: boolean
|
||||||
|
onClose: () => void
|
||||||
|
}) => {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (visible) {
|
if (visible) {
|
||||||
store.nav.setTitle(navIdx, 'Menu')
|
|
||||||
// trigger a refresh in case memberships have changed recently
|
// trigger a refresh in case memberships have changed recently
|
||||||
store.me.refreshMemberships()
|
store.me.refreshMemberships()
|
||||||
}
|
}
|
||||||
|
@ -37,14 +40,18 @@ export const Menu = ({navIdx, visible}: ScreenParams) => {
|
||||||
// =
|
// =
|
||||||
|
|
||||||
const onNavigate = (url: string) => {
|
const onNavigate = (url: string) => {
|
||||||
|
onClose()
|
||||||
if (url === '/notifications') {
|
if (url === '/notifications') {
|
||||||
store.nav.switchTo(1, true)
|
store.nav.switchTo(1, true)
|
||||||
} else {
|
} else {
|
||||||
store.nav.switchTo(0, true)
|
store.nav.switchTo(0, true)
|
||||||
store.nav.navigate(url)
|
if (url !== '/') {
|
||||||
|
store.nav.navigate(url)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const onPressCreateScene = () => {
|
const onPressCreateScene = () => {
|
||||||
|
onClose()
|
||||||
store.shell.openModal(new CreateSceneModel())
|
store.shell.openModal(new CreateSceneModel())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -88,10 +95,8 @@ export const Menu = ({navIdx, visible}: ScreenParams) => {
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)
|
)
|
||||||
|
|
||||||
/*TODO <MenuItem icon={['far', 'compass']} label="Discover" url="/" />*/
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.view}>
|
<View style={styles.view}>
|
||||||
<ViewHeader title="Bluesky" subtitle="Private Beta" />
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.searchBtn}
|
style={styles.searchBtn}
|
||||||
onPress={() => onNavigate('/search')}>
|
onPress={() => onNavigate('/search')}>
|
|
@ -24,6 +24,7 @@ import {useStores} from '../../../state'
|
||||||
import {NavigationModel} from '../../../state/models/navigation'
|
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 {Menu} from './Menu'
|
||||||
import {Onboard} from '../../screens/Onboard'
|
import {Onboard} from '../../screens/Onboard'
|
||||||
import {HorzSwipe} from '../../com/util/gestures/HorzSwipe'
|
import {HorzSwipe} from '../../com/util/gestures/HorzSwipe'
|
||||||
import {Modal} from '../../com/modals/Modal'
|
import {Modal} from '../../com/modals/Modal'
|
||||||
|
@ -109,6 +110,7 @@ const Btn = ({
|
||||||
|
|
||||||
export const MobileShell: React.FC = observer(() => {
|
export const MobileShell: React.FC = observer(() => {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
|
const [isMenuActive, setMenuActive] = useState(false)
|
||||||
const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
|
const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
|
||||||
const scrollElRef = useRef<FlatList | undefined>()
|
const scrollElRef = useRef<FlatList | undefined>()
|
||||||
const winDim = useWindowDimensions()
|
const winDim = useWindowDimensions()
|
||||||
|
@ -121,6 +123,9 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
const screenRenderDesc = constructScreenRenderDesc(store.nav)
|
const screenRenderDesc = constructScreenRenderDesc(store.nav)
|
||||||
|
|
||||||
const onPressHome = () => {
|
const onPressHome = () => {
|
||||||
|
if (isMenuActive) {
|
||||||
|
setMenuActive(false)
|
||||||
|
}
|
||||||
if (store.nav.tab.fixedTabPurpose === 0) {
|
if (store.nav.tab.fixedTabPurpose === 0) {
|
||||||
if (store.nav.tab.current.url === '/') {
|
if (store.nav.tab.current.url === '/') {
|
||||||
scrollElRef.current?.scrollToOffset({offset: 0})
|
scrollElRef.current?.scrollToOffset({offset: 0})
|
||||||
|
@ -135,6 +140,9 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const onPressNotifications = () => {
|
const onPressNotifications = () => {
|
||||||
|
if (isMenuActive) {
|
||||||
|
setMenuActive(false)
|
||||||
|
}
|
||||||
if (store.nav.tab.fixedTabPurpose === 1) {
|
if (store.nav.tab.fixedTabPurpose === 1) {
|
||||||
store.nav.tab.fixedTabReset()
|
store.nav.tab.fixedTabReset()
|
||||||
} else {
|
} else {
|
||||||
|
@ -203,15 +211,44 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
|
|
||||||
// navigation swipes
|
// navigation swipes
|
||||||
// =
|
// =
|
||||||
|
const canSwipeLeft = store.nav.tab.canGoBack || !isMenuActive
|
||||||
|
const canSwipeRight = isMenuActive
|
||||||
const onNavSwipeEnd = (dx: number) => {
|
const onNavSwipeEnd = (dx: number) => {
|
||||||
if (dx < 0 && store.nav.tab.canGoBack) {
|
if (dx < 0) {
|
||||||
store.nav.tab.goBack()
|
if (store.nav.tab.canGoBack) {
|
||||||
|
store.nav.tab.goBack()
|
||||||
|
} else {
|
||||||
|
setMenuActive(true)
|
||||||
|
}
|
||||||
|
} else if (dx > 0) {
|
||||||
|
if (isMenuActive) {
|
||||||
|
setMenuActive(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const swipeTransform = {
|
const swipeTranslateX = Animated.multiply(
|
||||||
transform: [
|
swipeGestureInterp,
|
||||||
{translateX: Animated.multiply(swipeGestureInterp, winDim.width * -1)},
|
winDim.width * -1,
|
||||||
],
|
)
|
||||||
|
const swipeTransform = store.nav.tab.canGoBack
|
||||||
|
? {transform: [{translateX: swipeTranslateX}]}
|
||||||
|
: undefined
|
||||||
|
let menuTranslateX
|
||||||
|
if (isMenuActive) {
|
||||||
|
// menu is active, interpret swipes as closes
|
||||||
|
menuTranslateX = Animated.multiply(swipeGestureInterp, winDim.width * -1)
|
||||||
|
} else if (!store.nav.tab.canGoBack) {
|
||||||
|
// at back of history, interpret swipes as opens
|
||||||
|
menuTranslateX = Animated.subtract(
|
||||||
|
winDim.width * -1,
|
||||||
|
Animated.multiply(swipeGestureInterp, winDim.width),
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// not at back of history, leave off screen
|
||||||
|
menuTranslateX = winDim.width * -1
|
||||||
|
}
|
||||||
|
const menuSwipeTransform = {
|
||||||
|
transform: [{translateX: menuTranslateX}],
|
||||||
}
|
}
|
||||||
const swipeOpacity = {
|
const swipeOpacity = {
|
||||||
opacity: swipeGestureInterp.interpolate({
|
opacity: swipeGestureInterp.interpolate({
|
||||||
|
@ -219,12 +256,13 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
outputRange: [0, 0.6, 0],
|
outputRange: [0, 0.6, 0],
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
const tabMenuTransform = {
|
// TODO
|
||||||
transform: [{translateY: Animated.multiply(tabMenuInterp.value, -320)}],
|
// const tabMenuTransform = {
|
||||||
}
|
// transform: [{translateY: Animated.multiply(tabMenuInterp, -320)}],
|
||||||
const newTabTransform = {
|
// }
|
||||||
transform: [{scale: newTabInterp}],
|
// const newTabTransform = {
|
||||||
}
|
// transform: [{scale: newTabInterp}],
|
||||||
|
// }
|
||||||
|
|
||||||
if (!store.session.hasSession) {
|
if (!store.session.hasSession) {
|
||||||
return (
|
return (
|
||||||
|
@ -252,6 +290,7 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
|
|
||||||
const isAtHome = store.nav.tab.current.url === '/'
|
const isAtHome = store.nav.tab.current.url === '/'
|
||||||
const isAtNotifications = store.nav.tab.current.url === '/notifications'
|
const isAtNotifications = store.nav.tab.current.url === '/notifications'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.outerContainer}>
|
<View style={styles.outerContainer}>
|
||||||
<SafeAreaView style={styles.innerContainer}>
|
<SafeAreaView style={styles.innerContainer}>
|
||||||
|
@ -260,11 +299,21 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
useNativeDriver
|
useNativeDriver
|
||||||
panX={swipeGestureInterp}
|
panX={swipeGestureInterp}
|
||||||
swipeEnabled
|
swipeEnabled
|
||||||
canSwipeLeft={store.nav.tab.canGoBack}
|
canSwipeLeft={canSwipeLeft}
|
||||||
|
canSwipeRight={canSwipeRight}
|
||||||
onSwipeEnd={onNavSwipeEnd}>
|
onSwipeEnd={onNavSwipeEnd}>
|
||||||
<ScreenContainer style={styles.screenContainer}>
|
<ScreenContainer style={styles.screenContainer}>
|
||||||
{screenRenderDesc.screens.map(
|
{screenRenderDesc.screens.map(
|
||||||
({Com, navIdx, params, key, current, previous}) => {
|
({Com, navIdx, params, key, current, previous}) => {
|
||||||
|
if (isMenuActive) {
|
||||||
|
// HACK menu is active, treat current as previous
|
||||||
|
if (previous) {
|
||||||
|
previous = false
|
||||||
|
} else if (current) {
|
||||||
|
current = false
|
||||||
|
previous = true
|
||||||
|
}
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Screen
|
<Screen
|
||||||
key={key}
|
key={key}
|
||||||
|
@ -299,6 +348,9 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
},
|
},
|
||||||
)}
|
)}
|
||||||
</ScreenContainer>
|
</ScreenContainer>
|
||||||
|
<Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
|
||||||
|
<Menu visible={isMenuActive} onClose={() => setMenuActive(false)} />
|
||||||
|
</Animated.View>
|
||||||
</HorzSwipe>
|
</HorzSwipe>
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
{isTabsSelectorActive ? (
|
{isTabsSelectorActive ? (
|
||||||
|
@ -423,6 +475,17 @@ const styles = StyleSheet.create({
|
||||||
backgroundColor: '#000',
|
backgroundColor: '#000',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
},
|
},
|
||||||
|
menuDrawer: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: colors.gray2,
|
||||||
|
borderRightWidth: 1,
|
||||||
|
borderRightColor: colors.gray2,
|
||||||
|
},
|
||||||
topBarProtector: {
|
topBarProtector: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 0,
|
top: 0,
|
||||||
|
|
Loading…
Reference in New Issue