@momo-kits/foundation 0.167.1-duo.5 → 0.167.1-duotest.1

package/Application/BottomTab/DuoBarCompression.tsx

@@ -0,0 +1,135 @@
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { Spacing } from '../../Consts';
+import { useScreenLayout } from '../../Layout';
+import { DuoMetrics } from '../../Layout/utils';
+
+export type DuoBarCompressionBehavior = 'toolbar' | 'tabBar';
+
+type DuoBarCompression = {
+  toolbarCompressed: boolean;
+  tabBarCompressed: boolean;
+  // the open rail needs the toolbar button slot too: only Back stays
+  toolbarHidden?: boolean;
+  // tapping the compressed bar expands it and compresses the other one
+  expandToolbar?: () => void;
+  expandTabBar?: () => void;
+  // a rail opened from the compressed state closes once a tab is picked
+  onTabSelected?: () => void;
+  // header buttons report their full height so the tab bar knows what is left
+  setToolbarHeight?: (height: number) => void;
+};
+
+const RAIL_PADDING = 6;
+const RAIL_GAP = Spacing.XXS;
+// space kept between the top and the bottom groups (HIG Vertical controls)
+const GROUP_GAP = Spacing.M;
+// Back, then the right toolkit: help + home capsule
+const DEFAULT_TOOLBAR_HEIGHT =
+  DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch;
+// Back, then the single button the toolbar folds into
+const COMPRESSED_TOOLBAR_HEIGHT = 2 * DuoMetrics.controlSize + Spacing.M;
+// Back alone, while a rail opened from the compressed state takes the toolbar slot
+const BACK_ONLY_HEIGHT = DuoMetrics.controlSize;
+
+const NO_COMPRESSION: DuoBarCompression = {
+  toolbarCompressed: false,
+  tabBarCompressed: false,
+};
+
+const DuoBarCompressionContext =
+  createContext<DuoBarCompression>(NO_COMPRESSION);
+
+/**
+ * height of the vertical tab rail, plus the QR button under it
+ */
+const getRailHeight = (tabCount: number, hasQr: boolean) =>
+  2 * RAIL_PADDING +
+  tabCount * DuoMetrics.controlSize +
+  Math.max(tabCount - 1, 0) * RAIL_GAP +
+  (hasQr ? Spacing.M + DuoMetrics.controlSize : 0);
+
+/**
+ * keeps the side bar's toolbar and tab bar clear of each other (HIG, Designing for
+ * iPhone Duo: Vertical controls):
+ * - both fit: both stay whole
+ * - one fits whole beside the other compressed: one is compressed, tapping it swaps them
+ * - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
+ *   again once a tab is picked)
+ */
+const DuoBarCompressionProvider: React.FC<{
+  behavior?: DuoBarCompressionBehavior;
+  tabCount: number;
+  hasQr: boolean;
+  children: ReactNode;
+}> = ({ behavior = 'toolbar', tabCount, hasQr, children }) => {
+  const { height, sideBar } = useScreenLayout();
+  const [toolbarHeight, setToolbarHeight] = useState(DEFAULT_TOOLBAR_HEIGHT);
+  // 'toolbar' compression keeps the tab bar whole until the toolbar is tapped
+  const [expanded, setExpanded] = useState<'toolbar' | 'tabBar'>(
+    behavior === 'toolbar' ? 'tabBar' : 'toolbar',
+  );
+  // bar opened for a moment while both rest compressed
+  const [opened, setOpened] = useState<'toolbar' | 'tabBar'>();
+
+  const value = useMemo(() => {
+    if (!sideBar) {
+      return NO_COMPRESSION;
+    }
+    const room = height - sideBar.bottom - sideBar.top - GROUP_GAP;
+    const tabBar = getRailHeight(tabCount, hasQr);
+    const compressedTabBar = getRailHeight(1, hasQr) - 2 * RAIL_PADDING;
+    const fits = (toolbar: number, tabs: number) => toolbar + tabs <= room;
+
+    if (fits(toolbarHeight, tabBar)) {
+      return { ...NO_COMPRESSION, setToolbarHeight };
+    }
+    const canSwap =
+      fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) &&
+      fits(toolbarHeight, compressedTabBar);
+    if (canSwap) {
+      return {
+        toolbarCompressed: expanded === 'tabBar',
+        tabBarCompressed: expanded === 'toolbar',
+        expandToolbar: () => setExpanded('toolbar'),
+        expandTabBar: () => setExpanded('tabBar'),
+        setToolbarHeight,
+      };
+    }
+
+    const open = {
+      expandToolbar: () => setOpened('toolbar'),
+      expandTabBar: () => setOpened('tabBar'),
+      setToolbarHeight,
+    };
+    if (opened === 'tabBar' && fits(BACK_ONLY_HEIGHT, tabBar)) {
+      return {
+        ...open,
+        toolbarCompressed: true,
+        toolbarHidden: true,
+        tabBarCompressed: false,
+        onTabSelected: () => setOpened(undefined),
+      };
+    }
+    return {
+      ...open,
+      toolbarCompressed: opened !== 'toolbar',
+      tabBarCompressed: true,
+    };
+  }, [expanded, opened, hasQr, height, sideBar, tabCount, toolbarHeight]);
+
+  return (
+    <DuoBarCompressionContext.Provider value={value}>
+      {children}
+    </DuoBarCompressionContext.Provider>
+  );
+};
+
+const useDuoBarCompression = () => useContext(DuoBarCompressionContext);
+
+export { DuoBarCompressionProvider, useDuoBarCompression };

package/Application/BottomTab/DuoTabBar.tsx

@@ -18,6 +18,7 @@ import { Icon } from '../../Icon';
 import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
 import { Text } from '../../Text';
 import { GlassView } from '../Components/OptionalGlassView';
+import { useDuoBarCompression } from './DuoBarCompression';
 import { FloatingButtonProps } from '../types';
 import { TabBarIcon } from './TabBarIcon';
 
@@ -146,76 +147,121 @@ const QrIcon: React.FC<{ icon: FloatingButtonProps['icon']; size: number }> = ({
   return <>{icon}</>;
 };
 
+type TabItem = ReturnType<typeof getTabItems>[number];
+
 /**
- * vertical bar anchored to the bottom of the Duo side bar, QR button below it (Figma MT1-C/E)
+ * glass column of tab items with the sliding selection bubble
  */
-const DuoRailTabBar: React.FC<Props> = props => {
+const Rail: React.FC<{
+  items: TabItem[];
+  index: number;
+  onItemPress?: () => void;
+}> = ({ items, index, onItemPress }) => {
   const { theme } = useContext(ApplicationContext);
-  const { sideBar } = useScreenLayout();
-  const { state, floatingButton } = props;
-  const items = getTabItems(props);
-  const bubbleOffset = useSharedValue(state.index * (ITEM_SIZE + RAIL_GAP));
+  const bubbleOffset = useSharedValue(index * (ITEM_SIZE + RAIL_GAP));
 
   useEffect(() => {
-    bubbleOffset.value = withSpring(
-      state.index * (ITEM_SIZE + RAIL_GAP),
-      SPRING,
-    );
-  }, [state.index, bubbleOffset]);
+    bubbleOffset.value = withSpring(index * (ITEM_SIZE + RAIL_GAP), SPRING);
+  }, [index, bubbleOffset]);
 
   const bubbleStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: bubbleOffset.value }],
   }));
 
+  return (
+    <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
+      <BarMaterial radius={Radius.XL} />
+      <Animated.View
+        pointerEvents={'none'}
+        style={[
+          styles.railBubble,
+          { backgroundColor: theme.colors.background.selected },
+          bubbleStyle,
+        ]}
+      />
+      {items.map(item => (
+        <TouchableOpacity
+          key={item.route.key}
+          accessibilityRole={'tab'}
+          accessibilityLabel={item.label}
+          accessibilityState={{ selected: item.focused }}
+          onPress={() => {
+            item.onPress();
+            onItemPress?.();
+          }}
+          onLongPress={item.onLongPress}
+          style={styles.railItem}
+        >
+          {item.icon}
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+/**
+ * vertical bar anchored to the bottom of the Duo side bar, QR button below it (Figma MT1-C/E).
+ * When the side bar is short, it can shrink to one button showing the current tab
+ * (HIG "Tab bar compressed"); tapping it expands the rail and compresses the toolbar
+ */
+const DuoRailTabBar: React.FC<Props> = props => {
+  const { theme } = useContext(ApplicationContext);
+  const { sideBar } = useScreenLayout();
+  const { tabBarCompressed, expandTabBar, onTabSelected } =
+    useDuoBarCompression();
+  const { state, floatingButton } = props;
+  const items = getTabItems(props);
+  const current = items[state.index];
+
+  const columnStyle = sideBar && [
+    styles.railColumn,
+    {
+      [sideBar.edge]: 0,
+      width: sideBar.width,
+      bottom: sideBar.bottom,
+    },
+    sideBar.edge === 'right'
+      ? { alignItems: 'flex-start' as const, paddingLeft: Spacing.M }
+      : { alignItems: 'flex-end' as const, paddingRight: Spacing.M },
+  ];
+
+  const qr = floatingButton && (
+    <TouchableOpacity
+      accessibilityRole={'button'}
+      accessibilityLabel={floatingButton.label}
+      onPress={floatingButton.onPress}
+      style={[styles.railQr, { backgroundColor: theme.colors.primary }]}
+    >
+      <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
+    </TouchableOpacity>
+  );
+
   if (!sideBar) {
     return null;
   }
 
+  if (!tabBarCompressed) {
+    return (
+      <View pointerEvents={'box-none'} style={columnStyle}>
+        <Rail items={items} index={state.index} onItemPress={onTabSelected} />
+        {qr}
+      </View>
+    );
+  }
+
   return (
-    <View
-      pointerEvents={'box-none'}
-      style={[
-        styles.railColumn,
-        { [sideBar.edge]: 0, width: sideBar.width },
-        sideBar.edge === 'right'
-          ? { alignItems: 'flex-start', paddingLeft: Spacing.M }
-          : { alignItems: 'flex-end', paddingRight: Spacing.M },
-      ]}
-    >
-      <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
+    <View pointerEvents={'box-none'} style={columnStyle}>
+      <TouchableOpacity
+        accessibilityRole={'button'}
+        accessibilityLabel={current?.label}
+        accessibilityHint={'bottom_tab_bar'}
+        onPress={expandTabBar}
+        style={styles.railCompact}
+      >
         <BarMaterial radius={Radius.XL} />
-        <Animated.View
-          pointerEvents={'none'}
-          style={[
-            styles.railBubble,
-            { backgroundColor: theme.colors.background.selected },
-            bubbleStyle,
-          ]}
-        />
-        {items.map(item => (
-          <TouchableOpacity
-            key={item.route.key}
-            accessibilityRole={'tab'}
-            accessibilityLabel={item.label}
-            accessibilityState={{ selected: item.focused }}
-            onPress={item.onPress}
-            onLongPress={item.onLongPress}
-            style={styles.railItem}
-          >
-            {item.icon}
-          </TouchableOpacity>
-        ))}
-      </View>
-      {floatingButton && (
-        <TouchableOpacity
-          accessibilityRole={'button'}
-          accessibilityLabel={floatingButton.label}
-          onPress={floatingButton.onPress}
-          style={[styles.railQr, { backgroundColor: theme.colors.primary }]}
-        >
-          <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
-        </TouchableOpacity>
-      )}
+        {current?.icon}
+      </TouchableOpacity>
+      {qr}
     </View>
   );
 };
@@ -347,9 +393,15 @@ const styles = StyleSheet.create({
   },
   railColumn: {
     position: 'absolute',
-    bottom: Spacing.XL,
     gap: Spacing.M,
   },
+  railCompact: {
+    width: ITEM_SIZE,
+    height: ITEM_SIZE,
+    borderRadius: ITEM_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   rail: {
     width: ITEM_SIZE,
     paddingVertical: RAIL_PADDING,

package/Application/BottomTab/index.tsx

@@ -28,8 +28,10 @@ import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
 import { DuoTabBar } from './DuoTabBar';
+import { DuoBarCompressionProvider } from './DuoBarCompression';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
+import { getHeaderRowOptions } from '../../Layout/utils';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -38,13 +40,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
-  const headerStyleOptions = {
-    headerStyle: {
-      height: headerHeight,
-    },
-    headerStatusBarHeight,
-  };
+  const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
@@ -205,6 +201,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   navigation,
   initialRouteName,
   floatingButton,
+  compressionBehavior,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
   const { isIPhoneDuo } = useScreenLayout();
@@ -281,147 +278,156 @@ const BottomTab: React.FC<BottomTabProps> = ({
   };
 
   return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        headerTransparent: true,
-        headerBackground: undefined,
-        tabBarLabelPosition: 'below-icon',
-        tabBarBackground: () => (
-          <View
-            style={[
-              styles.container,
-              {
-                backgroundColor: theme.colors.background.surface,
-              },
-            ]}
-          >
-            <Animated.View style={[styles.indicatorContainer, indicatorStyle]}>
-              <View
-                style={[
-                  styles.indicator,
-                  { backgroundColor: theme.colors.primary },
-                ]}
-              />
-            </Animated.View>
-          </View>
-        ),
-      }}
-      tabBar={props =>
-        isIPhoneDuo ? (
-          <DuoTabBar
-            {...props}
-            floatingButton={floatingButton}
-            inactiveTintColor={theme.colors.text.default}
-            activeTintColor={theme.colors.primary}
-          />
-        ) : (
-          <BottomTabBar
-            {...props}
-            floatingButton={floatingButton}
-            inactiveTintColor={theme.colors.text.hint}
-            activeTintColor={theme.colors.primary}
-            style={[
-              {
-                height:
-                  64 +
-                  (Platform.OS === 'ios'
-                    ? Math.min(insets.bottom, 21)
-                    : insets.bottom),
-              },
-            ]}
-          />
-        )
-      }
-      initialRouteName={initialRouteName}
+    <DuoBarCompressionProvider
+      behavior={compressionBehavior}
+      tabCount={tabs.length}
+      hasQr={!!floatingButton}
     >
-      {tabs.map((item, index) => {
-        const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
-        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
-        const isNumZero = isNum && Number(item.badgeLabel) === 0;
-
-        let badgeLabel = item?.badgeLabel;
-        if (isNumZero) {
-          badgeLabel = undefined;
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false,
+          headerTransparent: true,
+          headerBackground: undefined,
+          tabBarLabelPosition: 'below-icon',
+          tabBarBackground: () => (
+            <View
+              style={[
+                styles.container,
+                {
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}
+            >
+              <Animated.View
+                style={[styles.indicatorContainer, indicatorStyle]}
+              >
+                <View
+                  style={[
+                    styles.indicator,
+                    { backgroundColor: theme.colors.primary },
+                  ]}
+                />
+              </Animated.View>
+            </View>
+          ),
+        }}
+        tabBar={props =>
+          isIPhoneDuo ? (
+            <DuoTabBar
+              {...props}
+              floatingButton={floatingButton}
+              inactiveTintColor={theme.colors.text.default}
+              activeTintColor={theme.colors.primary}
+            />
+          ) : (
+            <BottomTabBar
+              {...props}
+              floatingButton={floatingButton}
+              inactiveTintColor={theme.colors.text.hint}
+              activeTintColor={theme.colors.primary}
+              style={[
+                {
+                  height:
+                    64 +
+                    (Platform.OS === 'ios'
+                      ? Math.min(insets.bottom, 21)
+                      : insets.bottom),
+                },
+              ]}
+            />
+          )
         }
+        initialRouteName={initialRouteName}
+      >
+        {tabs.map((item, index) => {
+          const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
+          const isDot =
+            typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
+          const isNumZero = isNum && Number(item.badgeLabel) === 0;
 
-        let badgeStyle: {
-          marginRight: number;
-          top: number;
-          backgroundColor: string;
-          width?: number;
-        } = {
-          marginRight: -8,
-          top: -4,
-          backgroundColor: Colors.orange_03,
-        };
+          let badgeLabel = item?.badgeLabel;
+          if (isNumZero) {
+            badgeLabel = undefined;
+          }
 
-        if (isNum) {
-          badgeStyle = {
-            marginRight: -4,
+          let badgeStyle: {
+            marginRight: number;
+            top: number;
+            backgroundColor: string;
+            width?: number;
+          } = {
+            marginRight: -8,
             top: -4,
-            backgroundColor: Colors.red_03,
-          };
-        }
-        if (isDot) {
-          badgeStyle = {
-            marginRight: -2,
-            top: -2,
             backgroundColor: Colors.orange_03,
-            width: 12,
           };
-        }
 
-        return (
-          <Tab.Screen
-            key={`BottomTab-${item.name}`}
-            name={item.name}
-            component={TabScreen}
-            initialParams={{ ...item, nested, index }}
-            listeners={handler}
-            options={{
-              tabBarLabel: ({ focused, color }) => {
-                return (
-                  <Text
-                    numberOfLines={1}
-                    typography={
-                      focused ? 'label_xs_medium' : 'description_xs_regular'
-                    }
-                    color={color}
-                  >
-                    {item.label}
-                  </Text>
-                );
-              },
-              title: item.label,
-              tabBarStyle: [
-                {
-                  height: 64,
-                },
-                styles.tabStyle,
-              ],
-              tabBarBadge: badgeLabel,
-              tabBarBadgeStyle: [
-                {
-                  borderColor: 'white',
-                  borderWidth: 2,
-                  fontSize: 10,
-                  lineHeight: 14,
-                  fontWeight: 'bold',
-                  alignSelf: 'center',
-                  fontFamily: exportFontFamily('bold'),
+          if (isNum) {
+            badgeStyle = {
+              marginRight: -4,
+              top: -4,
+              backgroundColor: Colors.red_03,
+            };
+          }
+          if (isDot) {
+            badgeStyle = {
+              marginRight: -2,
+              top: -2,
+              backgroundColor: Colors.orange_03,
+              width: 12,
+            };
+          }
+
+          return (
+            <Tab.Screen
+              key={`BottomTab-${item.name}`}
+              name={item.name}
+              component={TabScreen}
+              initialParams={{ ...item, nested, index }}
+              listeners={handler}
+              options={{
+                tabBarLabel: ({ focused, color }) => {
+                  return (
+                    <Text
+                      numberOfLines={1}
+                      typography={
+                        focused ? 'label_xs_medium' : 'description_xs_regular'
+                      }
+                      color={color}
+                    >
+                      {item.label}
+                    </Text>
+                  );
                 },
-                badgeStyle,
-              ],
-              tabBarIcon: ({ color }) => (
-                <Icon source={item.icon} color={color} size={28} />
-              ),
-              ...item,
-            }}
-          />
-        );
-      })}
-    </Tab.Navigator>
+                title: item.label,
+                tabBarStyle: [
+                  {
+                    height: 64,
+                  },
+                  styles.tabStyle,
+                ],
+                tabBarBadge: badgeLabel,
+                tabBarBadgeStyle: [
+                  {
+                    borderColor: 'white',
+                    borderWidth: 2,
+                    fontSize: 10,
+                    lineHeight: 14,
+                    fontWeight: 'bold',
+                    alignSelf: 'center',
+                    fontFamily: exportFontFamily('bold'),
+                  },
+                  badgeStyle,
+                ],
+                tabBarIcon: ({ color }) => (
+                  <Icon source={item.icon} color={color} size={28} />
+                ),
+                ...item,
+              }}
+            />
+          );
+        })}
+      </Tab.Navigator>
+    </DuoBarCompressionProvider>
   );
 };