Turn the main menu into a 'drawer' instead of a screen in the history

zio/stable
Paul Frazee 2022-12-08 15:34:22 -06:00
parent 53b8f0d040
commit e73c7cee39
4 changed files with 100 additions and 50 deletions

View File

@ -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() {

View File

@ -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')],

View File

@ -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')}>

View File

@ -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,