Replace tabs selector with better solution, also fix some bugs with the modal state

src/state/models/shell.ts

@@ -1,6 +1,14 @@
-import {makeAutoObservable} from 'mobx'
+import {makeAutoObservable, runInAction} from 'mobx'
 import {ProfileViewModel} from './profile-view'
 
+export class TabsSelectorModel {
+  name = 'tabs-selector'
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+}
+
 export class LinkActionsModel {
   name = 'link-actions'
 
@@ -36,6 +44,7 @@ export class EditProfileModel {
 export class ShellModel {
   isModalActive = false
   activeModal:
+    | TabsSelectorModel
     | LinkActionsModel
     | SharePostModel
     | ComposePostModel
@@ -48,6 +57,7 @@ export class ShellModel {
 
   openModal(
     modal:
+      | TabsSelectorModel
       | LinkActionsModel
       | SharePostModel
       | ComposePostModel

src/view/com/modals/Modal.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import React, {useRef, useEffect} from 'react'
 import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import BottomSheet from '@gorhom/bottom-sheet'
@@ -7,11 +7,14 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 
 import * as models from '../../../state/models/shell'
 
+import * as TabsSelectorModal from './TabsSelector'
 import * as LinkActionsModal from './LinkActions'
 import * as SharePostModal from './SharePost.native'
 import * as ComposePostModal from './ComposePost'
 import * as EditProfile from './EditProfile'
 
+const CLOSED_SNAPPOINTS = ['10%']
+
 export const Modal = observer(function Modal() {
   const store = useStores()
   const bottomSheetRef = useRef<BottomSheet>(null)
@@ -25,12 +28,24 @@ export const Modal = observer(function Modal() {
     bottomSheetRef.current?.close()
   }
 
-  if (!store.shell.isModalActive) {
+  useEffect(() => {
-    return <View />
+    if (store.shell.isModalActive) {
+      bottomSheetRef.current?.expand()
+    } else {
+      bottomSheetRef.current?.close()
     }
+  }, [store.shell.isModalActive, bottomSheetRef])
 
-  let snapPoints, element
+  let snapPoints: (string | number)[] = CLOSED_SNAPPOINTS
-  if (store.shell.activeModal?.name === 'link-actions') {
+  let element
+  if (store.shell.activeModal?.name === 'tabs-selector') {
+    snapPoints = TabsSelectorModal.snapPoints
+    element = (
+      <TabsSelectorModal.Component
+        {...(store.shell.activeModal as models.TabsSelectorModel)}
+      />
+    )
+  } else if (store.shell.activeModal?.name === 'link-actions') {
     snapPoints = LinkActionsModal.snapPoints
     element = (
       <LinkActionsModal.Component
@@ -59,16 +74,19 @@ export const Modal = observer(function Modal() {
       />
     )
   } else {
-    return <View />
+    element = <View />
   }
 
   return (
     <BottomSheet
       ref={bottomSheetRef}
       snapPoints={snapPoints}
+      index={store.shell.isModalActive ? 0 : -1}
       enablePanDownToClose
       keyboardBehavior="fillParent"
-      backdropComponent={createCustomBackdrop(onClose)}
+      backdropComponent={
+        store.shell.isModalActive ? createCustomBackdrop(onClose) : undefined
+      }
       onChange={onShareBottomSheetChange}>
       {element}
     </BottomSheet>

src/view/com/modals/TabsSelector.tsx

@@ -0,0 +1,307 @@
+import React, {createRef, useRef, useMemo} from 'react'
+import {observer} from 'mobx-react-lite'
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+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 {match} from '../../routes'
+
+export const snapPoints = [500]
+
+export const Component = observer(() => {
+  const store = useStores()
+  const tabsRef = useRef<ScrollView>(null)
+  const tabRefs = useMemo(
+    () =>
+      Array.from({length: store.nav.tabs.length}).map(() => createRef<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()
+    // TODO
+  }
+  const onPressChangeTab = (tabIndex: number) => {
+    store.nav.setActiveTab(tabIndex)
+    onClose()
+  }
+  const onCloseTab = (tabIndex: number) => store.nav.closeTab(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}
+      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 renderSwipeActions = () => {
+    return <View style={[s.p2]} />
+  }
+
+  const currentTabIndex = store.nav.tabIndex
+  return (
+    <View onLayout={onLayout}>
+      <View style={[s.p10, 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={['far', 'user']}
+            label="My Profile"
+            url="/"
+            gradient="blue"
+          />
+          <FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
+        </View>
+      </View>
+      <View style={[s.p10, styles.section]}>
+        <View style={styles.btns}>
+          <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>
+          <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={onPressShareTab}>
+            <View style={[styles.btn]}>
+              <View style={styles.btnIcon}>
+                <FontAwesomeIcon size={16} icon="share" />
+              </View>
+              <Text style={styles.btnText}>Share</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
+            return (
+              <Swipeable
+                key={tab.id}
+                renderLeftActions={renderSwipeActions}
+                renderRightActions={renderSwipeActions}
+                leftThreshold={100}
+                rightThreshold={100}
+                onSwipeableWillOpen={() => onCloseTab(tabIndex)}>
+                <View
+                  ref={tabRefs[tabIndex]}
+                  style={[
+                    styles.tab,
+                    styles.existing,
+                    isActive && styles.active,
+                  ]}>
+                  <TouchableWithoutFeedback
+                    onPress={() => onPressChangeTab(tabIndex)}>
+                    <View style={styles.tabIcon}>
+                      <FontAwesomeIcon size={20} icon={icon} />
+                    </View>
+                  </TouchableWithoutFeedback>
+                  <TouchableWithoutFeedback
+                    onPress={() => onPressChangeTab(tabIndex)}>
+                    <Text
+                      ellipsizeMode="tail"
+                      numberOfLines={1}
+                      suppressHighlighting={true}
+                      style={[
+                        styles.tabText,
+                        isActive && styles.tabTextActive,
+                      ]}>
+                      {tab.current.title || tab.current.url}
+                    </Text>
+                  </TouchableWithoutFeedback>
+                  <TouchableWithoutFeedback
+                    onPress={() => onCloseTab(tabIndex)}>
+                    <View style={styles.tabClose}>
+                      <FontAwesomeIcon
+                        size={14}
+                        icon="x"
+                        style={styles.tabCloseIcon}
+                      />
+                    </View>
+                  </TouchableWithoutFeedback>
+                </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: 90,
+    alignItems: 'center',
+    marginRight: 6,
+  },
+  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,
+  },
+  fatMenuItemLabel: {
+    fontSize: 13,
+  },
+  tabs: {
+    height: 240,
+  },
+  tab: {
+    flexDirection: 'row',
+    backgroundColor: colors.gray1,
+    alignItems: 'center',
+    borderRadius: 4,
+    paddingLeft: 12,
+    paddingRight: 16,
+    marginBottom: 4,
+  },
+  existing: {
+    borderColor: colors.gray4,
+    borderWidth: 1,
+  },
+  active: {
+    backgroundColor: colors.white,
+    borderColor: colors.black,
+    borderWidth: 1,
+  },
+  tabIcon: {},
+  tabText: {
+    flex: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 12,
+    fontSize: 16,
+  },
+  tabTextActive: {
+    fontWeight: '500',
+  },
+  tabClose: {
+    padding: 2,
+  },
+  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,
+  },
+})

src/view/shell/mobile/index.tsx

@@ -23,9 +23,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {useStores} from '../../../state'
 import {NavigationModel} from '../../../state/models/navigation'
+import {TabsSelectorModel} from '../../../state/models/shell'
 import {match, MatchResult} from '../../routes'
 import {Modal} from '../../com/modals/Modal'
-import {TabsSelectorModal} from './tabs-selector'
 import {LocationNavigator} from './location-navigator'
 import {createBackMenu, createForwardMenu} from './history-menu'
 import {createAccountsMenu} from './accounts-menu'
@@ -106,7 +106,6 @@ const Btn = ({
 
 export const MobileShell: React.FC = observer(() => {
   const store = useStores()
-  const tabSelectorRef = useRef<{open: () => void}>()
   const [isLocationMenuActive, setLocationMenuActive] = useState(false)
   const winDim = useWindowDimensions()
   const swipeGestureInterp = useSharedValue<number>(0)
@@ -129,15 +128,11 @@ export const MobileShell: React.FC = observer(() => {
   const onPressForward = () => store.nav.tab.goForward()
   const onPressHome = () => store.nav.navigate('/')
   const onPressNotifications = () => store.nav.navigate('/notifications')
-  const onPressTabs = () => tabSelectorRef.current?.open()
+  const onPressTabs = () => store.shell.openModal(new TabsSelectorModel())
 
   const onLongPressBack = () => createBackMenu(store.nav.tab)
   const onLongPressForward = () => createForwardMenu(store.nav.tab)
 
-  const onNewTab = () => store.nav.newTab('/')
-  const onChangeTab = (tabIndex: number) => store.nav.setActiveTab(tabIndex)
-  const onCloseTab = (tabIndex: number) => store.nav.closeTab(tabIndex)
-
   const goBack = () => store.nav.tab.goBack()
   const swipeGesture = Gesture.Pan()
     .onUpdate(e => {
@@ -231,14 +226,6 @@ export const MobileShell: React.FC = observer(() => {
         <Btn icon={['far', 'bell']} onPress={onPressNotifications} />
         <Btn icon={['far', 'clone']} onPress={onPressTabs} />
       </View>
-      <TabsSelectorModal
-        ref={tabSelectorRef}
-        tabs={store.nav.tabs}
-        currentTabIndex={store.nav.tabIndex}
-        onNewTab={onNewTab}
-        onChangeTab={onChangeTab}
-        onCloseTab={onCloseTab}
-      />
       <Modal />
       {isLocationMenuActive && (
         <LocationNavigator

src/view/shell/mobile/tabs-selector.tsx

@@ -1,158 +0,0 @@
-import React, {forwardRef, useState, useImperativeHandle, useRef} from 'react'
-import {StyleSheet, Text, TouchableWithoutFeedback, View} from 'react-native'
-import BottomSheet from '@gorhom/bottom-sheet'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {s} from '../../lib/styles'
-import {NavigationTabModel} from '../../../state/models/navigation'
-import {createCustomBackdrop} from '../../com/util/BottomSheetCustomBackdrop'
-import {match} from '../../routes'
-
-const TAB_HEIGHT = 38
-const TAB_SPACING = 5
-const BOTTOM_MARGIN = 70
-
-export const TabsSelectorModal = forwardRef(function TabsSelectorModal(
-  {
-    onNewTab,
-    onChangeTab,
-    onCloseTab,
-    tabs,
-    currentTabIndex,
-  }: {
-    onNewTab: () => void
-    onChangeTab: (tabIndex: number) => void
-    onCloseTab: (tabIndex: number) => void
-    tabs: NavigationTabModel[]
-    currentTabIndex: number
-  },
-  ref,
-) {
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-  const [snapPoints, setSnapPoints] = useState<number[]>([100])
-  const bottomSheetRef = useRef<BottomSheet>(null)
-
-  useImperativeHandle(ref, () => ({
-    open() {
-      setIsOpen(true)
-      setSnapPoints([
-        (tabs.length + 1) * (TAB_HEIGHT + TAB_SPACING) + BOTTOM_MARGIN,
-      ])
-      bottomSheetRef.current?.expand()
-    },
-  }))
-
-  const onShareBottomSheetChange = (snapPoint: number) => {
-    if (snapPoint === -1) {
-      setIsOpen(false)
-    }
-  }
-  const onPressNewTab = () => {
-    onNewTab()
-    onClose()
-  }
-  const onPressChangeTab = (tabIndex: number) => {
-    onChangeTab(tabIndex)
-    onClose()
-  }
-  const onClose = () => {
-    setIsOpen(false)
-    bottomSheetRef.current?.close()
-  }
-  return (
-    <BottomSheet
-      ref={bottomSheetRef}
-      index={-1}
-      snapPoints={snapPoints}
-      enablePanDownToClose
-      backdropComponent={isOpen ? createCustomBackdrop(onClose) : undefined}
-      onChange={onShareBottomSheetChange}>
-      <View style={s.p10}>
-        {tabs.map((tab, tabIndex) => {
-          const {icon} = match(tab.current.url)
-          const isActive = tabIndex === currentTabIndex
-          return (
-            <View
-              key={tabIndex}
-              style={[styles.tab, styles.existing, isActive && styles.active]}>
-              <TouchableWithoutFeedback
-                onPress={() => onPressChangeTab(tabIndex)}>
-                <View style={styles.tabIcon}>
-                  <FontAwesomeIcon size={16} icon={icon} />
-                </View>
-              </TouchableWithoutFeedback>
-              <TouchableWithoutFeedback
-                onPress={() => onPressChangeTab(tabIndex)}>
-                <Text
-                  style={[styles.tabText, isActive && styles.tabTextActive]}>
-                  {tab.current.title || tab.current.url}
-                </Text>
-              </TouchableWithoutFeedback>
-              <TouchableWithoutFeedback onPress={() => onCloseTab(tabIndex)}>
-                <View style={styles.tabClose}>
-                  <FontAwesomeIcon
-                    size={16}
-                    icon="x"
-                    style={styles.tabCloseIcon}
-                  />
-                </View>
-              </TouchableWithoutFeedback>
-            </View>
-          )
-        })}
-        <TouchableWithoutFeedback onPress={onPressNewTab}>
-          <View style={[styles.tab, styles.create]}>
-            <View style={styles.tabIcon}>
-              <FontAwesomeIcon size={16} icon="plus" />
-            </View>
-            <Text style={styles.tabText}>New tab</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </View>
-    </BottomSheet>
-  )
-})
-
-const styles = StyleSheet.create({
-  tab: {
-    flexDirection: 'row',
-    width: '100%',
-    borderRadius: 4,
-    height: TAB_HEIGHT,
-    marginBottom: TAB_SPACING,
-  },
-  existing: {
-    borderColor: '#000',
-    borderWidth: 1,
-  },
-  create: {
-    backgroundColor: '#F8F3F3',
-  },
-  active: {
-    backgroundColor: '#faf0f0',
-    borderColor: '#f00',
-    borderWidth: 1,
-  },
-  tabIcon: {
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 15,
-    paddingRight: 10,
-  },
-  tabText: {
-    flex: 1,
-    paddingTop: 10,
-    paddingBottom: 10,
-  },
-  tabTextActive: {
-    fontWeight: 'bold',
-  },
-  tabClose: {
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 10,
-    paddingRight: 15,
-  },
-  tabCloseIcon: {
-    color: '#655',
-  },
-})

todos.txt

@@ -2,6 +2,7 @@ Paul's todo list
 
 - General
   - Update to RN 0.70
+  - Add close animation to tabs selector
 - Composer
   - Update the view after creating a post
 - Profile