From 53deb48e2d37b6fb153cb157465db49a9c46e02a Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 1 Sep 2022 16:06:09 -0500 Subject: [PATCH] Add location 'menu' --- src/view/index.ts | 2 + src/view/shell/mobile/index.tsx | 33 ++++- src/view/shell/mobile/location-menu.tsx | 183 ++++++++++++++++++++++++ 3 files changed, 214 insertions(+), 4 deletions(-) create mode 100644 src/view/shell/mobile/location-menu.tsx diff --git a/src/view/index.ts b/src/view/index.ts index 89db506d03..9fcebcc3b7 100644 --- a/src/view/index.ts +++ b/src/view/index.ts @@ -12,6 +12,7 @@ import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck' import {faClone} from '@fortawesome/free-regular-svg-icons/faClone' import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis' +import {faGear} from '@fortawesome/free-solid-svg-icons/faGear' import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart' import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse' @@ -39,6 +40,7 @@ export function setup() { faClone, faComment, faEllipsis, + faGear, faHeart, fasHeart, faHouse, diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 4dd5cf3490..68387883b3 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -1,4 +1,4 @@ -import React, {useRef} from 'react' +import React, {useState, useRef} from 'react' import {observer} from 'mobx-react-lite' import { GestureResponderEvent, @@ -16,16 +16,25 @@ import {useStores} from '../../../state' import {NavigationModel} from '../../../state/models/navigation' import {match, MatchResult} from '../../routes' import {TabsSelectorModal} from './tabs-selector' +import {LocationMenu} from './location-menu' import {createBackMenu, createForwardMenu} from './history-menu' import {colors} from '../../lib/styles' import {AVIS} from '../../lib/assets' const locationIconNeedsNudgeUp = (icon: IconProp) => icon === 'house' -const Location = ({icon, title}: {icon: IconProp; title?: string}) => { +const Location = ({ + icon, + title, + onPress, +}: { + icon: IconProp + title?: string + onPress?: (event: GestureResponderEvent) => void +}) => { const nudgeUp = locationIconNeedsNudgeUp(icon) return ( - + {title ? ( { const stores = useStores() const tabSelectorRef = useRef<{open: () => void}>() + const [isLocationMenuActive, setLocationMenuActive] = useState(false) const screenRenderDesc = constructScreenRenderDesc(stores.nav) + const onPressLocation = () => setLocationMenuActive(true) + const onNavigateLocationMenu = (url: string) => { + setLocationMenuActive(false) + stores.nav.navigate(url) + } + const onDismissLocationMenu = () => setLocationMenuActive(false) + const onPressBack = () => stores.nav.tab.goBack() const onPressForward = () => stores.nav.tab.goForward() const onPressHome = () => stores.nav.navigate('/') @@ -102,10 +119,11 @@ export const MobileShell: React.FC = observer(() => { return ( - + @@ -148,6 +166,13 @@ export const MobileShell: React.FC = observer(() => { onChangeTab={onChangeTab} onCloseTab={onCloseTab} /> + {isLocationMenuActive && ( + + )} ) }) diff --git a/src/view/shell/mobile/location-menu.tsx b/src/view/shell/mobile/location-menu.tsx new file mode 100644 index 0000000000..77d09a2261 --- /dev/null +++ b/src/view/shell/mobile/location-menu.tsx @@ -0,0 +1,183 @@ +import React, {useState, useRef} from 'react' +import { + SafeAreaView, + StyleSheet, + Text, + TextInput, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {s, colors} from '../../lib/styles' + +export function LocationMenu({ + url, + onNavigate, + onDismiss, +}: { + url: string + onNavigate: (url: string) => void + onDismiss: () => void +}) { + const [searchText, onChangeSearchText] = useState(url !== '/' ? url : '') + const inputRef = useRef(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, + color, + }: { + icon: IconProp + label: string + url: string + color: string + }) => ( + onNavigate(url)}> + + + + {label} + + ) + + const ThinMenuItem = ({label, url}: {label: string; url: string}) => ( + onNavigate(url)}> + {label} + + ) + + return ( + + + + + onDismiss()}> + Cancel + + + + + + + + + + + + + + + + + ) +} + +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, + }, + fatMenuItems: { + flexDirection: 'row', + marginBottom: 20, + }, + fatMenuItem: { + width: 90, + 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, + }, +})