@momo-kits/foundation 0.168.1-rn862.1 → 0.169.2

package/Application/BottomTab/DuoTabBar.tsx

@@ -1,438 +1,64 @@
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { CommonActions, Route } from '@react-navigation/native';
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import {
-  LayoutChangeEvent,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-import { Colors, Radius, Spacing } from '../../Consts';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-import { Icon } from '../../Icon';
-import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
-import { Text } from '../../Text';
-import { useDuoBarCompression } from './DuoBarCompression';
+import React from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import { useScreenLayout } from '../../Layout/utils';
 import { FloatingButtonProps } from '../types';
-import { TabBarIcon } from './TabBarIcon';
+import { getSystemIndicatorHeight, HorizontalTabBar } from './BottomTabBar';
+import { getHorizontalBarWidth, TabBarMetrics } from './metrics';
+import { getTabItems } from './tabItems';
+import { DuoRailTabBar } from './DuoRailTabBar';
+import { styles } from './DuoTabBar.styles';
 
-type Props = BottomTabBarProps & {
+type DuoTabBarProps = BottomTabBarProps & {
   activeTintColor: string;
   inactiveTintColor: string;
   floatingButton?: FloatingButtonProps;
 };
 
-const ITEM_SIZE = DuoMetrics.controlSize;
-const ICON_SIZE = 28;
-const QR_ICON_SIZE = 24;
-const RAIL_PADDING = 6;
-const RAIL_GAP = Spacing.XXS;
-const RAIL_PITCH = ITEM_SIZE + RAIL_GAP;
-// selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
-const RAIL_BUBBLE_WIDTH = 44;
-const RAIL_BUBBLE_HEIGHT = 58;
-const FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight;
-const FLOATING_PADDING = Spacing.XS;
-// the system bar sizes its pill to the tabs instead of stretching it across the display
-const FLOATING_ITEM_WIDTH = 80;
-// while pressed the selection bubble grows into a lens past the pill's edges, wider and taller (80x54 to about 96x70)
-const LENS_SCALE_X = 1.2;
-const LENS_SCALE_Y = 1.3;
-const FLOATING_BUBBLE_RADIUS = (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2;
-const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
-
 /**
- * distance from the screen bottom to the floating tab bar, overlapping the home
- * indicator inset like the system tab bar
- */
-const getFloatingTabBarBottom = (bottomInset: number) =>
-  Math.max(bottomInset - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S);
-
-/**
- * space tab content leaves under the Duo floating tab bar, 0 elsewhere
+ * space tab content leaves under the floating horizontal tab bar (phone and unfolded Duo);
+ * 0 when the Duo rail sits in the side bar
  */
 const useDuoTabBarInset = () => {
   const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
-  if (!isIPhoneDuo || sideBar) {
+  if (isIPhoneDuo && sideBar) {
     return 0;
   }
-  return FLOATING_HEIGHT + getFloatingTabBarBottom(insets.bottom);
-};
-
-const BarMaterial: React.FC<{ radius: number }> = ({ radius }) => {
-  const { theme } = useContext(ApplicationContext);
-  return (
-    <View
-      pointerEvents={'none'}
-      style={[
-        StyleSheet.absoluteFill,
-        styles.barMaterial,
-        {
-          borderRadius: radius,
-          backgroundColor: theme.colors.background.surface,
-          borderColor: theme.colors.border.default,
-        },
-      ]}
-    />
-  );
-};
-
-// Figma Home-2026 tab bar "Selection": brand pink at 8%
-const SELECTION_TINT_ALPHA = '14';
-
-/**
- * pink tinted capsule under the selected tab
- */
-const SelectionMaterial: React.FC<{ radius: number }> = ({ radius }) => {
-  const { theme } = useContext(ApplicationContext);
-  return (
-    <View
-      pointerEvents={'none'}
-      style={[
-        StyleSheet.absoluteFill,
-        {
-          borderRadius: radius,
-          backgroundColor: theme.colors.primary + SELECTION_TINT_ALPHA,
-        },
-      ]}
-    />
-  );
-};
-
-/**
- * tab label at its design size: like the system tab bar it doesn't grow with the wide
- * Duo displays, which Text otherwise scales up to 5pt
- */
-const TabLabel: React.FC<{
-  label: string;
-  color: string;
-  typography: 'label_xs_medium';
-}> = ({ label, color, typography }) => {
-  const context = useContext<any>(MiniAppContext);
-  return (
-    <MiniAppContext.Provider
-      value={{
-        ...context,
-        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
-      }}
-    >
-      <Text
-        numberOfLines={1}
-        typography={typography}
-        color={color}
-      >
-        {label}
-      </Text>
-    </MiniAppContext.Provider>
-  );
-};
-
-const getTabItems = ({
-  state,
-  descriptors,
-  navigation,
-  activeTintColor,
-  inactiveTintColor,
-}: Props) => {
-  return state.routes.map((route: Route<string>, index: number) => {
-    const { options } = descriptors[route.key];
-    const focused = index === state.index;
-    const label = options.title ?? route.name;
-
-    const onPress = () => {
-      const event = navigation.emit({
-        type: 'tabPress',
-        target: route.key,
-        canPreventDefault: true,
-      });
-      if (!focused && !event.defaultPrevented) {
-        navigation.dispatch({
-          ...CommonActions.navigate(route.name),
-          target: state.key,
-        });
-      }
-    };
-
-    const onLongPress = () => {
-      navigation.emit({ type: 'tabLongPress', target: route.key });
-    };
-
-    const icon = options.tabBarIcon && (
-      <TabBarIcon
-        route={route}
-        badge={options.tabBarBadge}
-        badgeStyle={options.tabBarBadgeStyle}
-        activeOpacity={focused ? 1 : 0}
-        inactiveOpacity={focused ? 0 : 1}
-        activeTintColor={activeTintColor}
-        inactiveTintColor={inactiveTintColor}
-        renderIcon={options.tabBarIcon}
-        style={styles.icon}
-      />
-    );
-
-    return { route, focused, label, onPress, onLongPress, icon };
-  });
-};
-
-const QrIcon: React.FC<{ icon: FloatingButtonProps['icon']; size: number }> = ({
-  icon,
-  size,
-}) => {
-  if (typeof icon === 'string') {
-    return <Icon source={icon} size={size} color={Colors.black_01} />;
-  }
-  return <>{icon}</>;
-};
-
-type TabItem = ReturnType<typeof getTabItems>[number];
-
-/**
- * column of icon-only tab items with the sliding selection bubble
- */
-const Rail: React.FC<{
-  items: TabItem[];
-  index: number;
-  onItemPress?: () => void;
-}> = ({ items, index, onItemPress }) => {
-  const bubbleOffset = useSharedValue(index * RAIL_PITCH);
-  const lens = useSharedValue(0);
-
-  useEffect(() => {
-    bubbleOffset.value = withSpring(index * RAIL_PITCH, SPRING);
-  }, [index, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateY: bubbleOffset.value },
-      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
-      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
-    ],
-  }));
-
-  return (
-    <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
-      <BarMaterial radius={ITEM_SIZE / 2} />
-      <Animated.View
-        pointerEvents={'none'}
-        style={[styles.railBubble, bubbleStyle]}
-      >
-        <SelectionMaterial radius={RAIL_BUBBLE_WIDTH / 2} />
-      </Animated.View>
-      {items.map((item, itemIndex) => (
-        <TouchableOpacity
-          key={item.route.key}
-          accessibilityRole={'tab'}
-          accessibilityLabel={item.label}
-          accessibilityState={{ selected: item.focused }}
-          activeOpacity={1}
-          onPressIn={() => {
-            bubbleOffset.value = withSpring(itemIndex * RAIL_PITCH, SPRING);
-            lens.value = withSpring(1, SPRING);
-          }}
-          onPressOut={() => {
-            bubbleOffset.value = withSpring(index * RAIL_PITCH, SPRING);
-            lens.value = withSpring(0, SPRING);
-          }}
-          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' ? styles.railColumnRight : styles.railColumnLeft,
-  ];
-
-  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={columnStyle}>
-      <TouchableOpacity
-        accessibilityRole={'button'}
-        accessibilityLabel={current?.label}
-        accessibilityHint={'bottom_tab_bar'}
-        onPress={expandTabBar}
-        style={styles.railCompact}
-      >
-        <BarMaterial radius={Radius.XL} />
-        {current?.icon}
-      </TouchableOpacity>
-      {qr}
-    </View>
-  );
+  return TabBarMetrics.height + getSystemIndicatorHeight(insets.bottom);
 };
 
 /**
- * floating labelled bar for the unfolded portrait display, QR pinned in its own
- * platter on the trailing side
+ * horizontal navigation bar of the unfolded display: 65% of the short side, centered
  */
-const DuoFloatingTabBar: React.FC<Props> = props => {
-  const { theme } = useContext(ApplicationContext);
+const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
-  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
-  const items = getTabItems(props);
-  const [rowWidth, setRowWidth] = useState(0);
-  const cellWidth = rowWidth / state.routes.length;
-
-  const bubbleOffset = useSharedValue(0);
-  const lens = useSharedValue(0);
-  const measured = useRef(false);
-
-  useEffect(() => {
-    const target = state.index * cellWidth;
-    // snap on first layout so the bubble doesn't slide in from the left edge
-    bubbleOffset.value = measured.current ? withSpring(target, SPRING) : target;
-    measured.current = cellWidth > 0;
-  }, [state.index, cellWidth, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: bubbleOffset.value },
-      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
-      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
-    ],
-  }));
-
-  const onRowLayout = (e: LayoutChangeEvent) =>
-    setRowWidth(e.nativeEvent.layout.width);
+  const { width, height } = useWindowDimensions();
+  const { floatingButton, activeTintColor, inactiveTintColor } = props;
 
   return (
     <View
       pointerEvents={'box-none'}
       style={[
         styles.floating,
-        {
-          left: insets.left + DuoMetrics.floatingTabBarMargin,
-          right: insets.right + DuoMetrics.floatingTabBarMargin,
-          bottom: getFloatingTabBarBottom(insets.bottom),
-        },
+        { bottom: getSystemIndicatorHeight(insets.bottom) },
       ]}
     >
-      <View
-        style={[
-          styles.floatingBar,
-          {
-            width:
-              state.routes.length * FLOATING_ITEM_WIDTH + 2 * FLOATING_PADDING,
-          },
-        ]}
-        accessibilityLabel={'bottom_tab_bar'}
-      >
-        <BarMaterial radius={FLOATING_HEIGHT / 2} />
-        <View style={styles.floatingRow} onLayout={onRowLayout}>
-          {rowWidth > 0 && (
-            <Animated.View
-              pointerEvents={'none'}
-              style={[styles.floatingBubble, { width: cellWidth }, bubbleStyle]}
-            >
-              <SelectionMaterial radius={FLOATING_BUBBLE_RADIUS} />
-            </Animated.View>
-          )}
-          {items.map((item, index) => (
-            <TouchableOpacity
-              key={item.route.key}
-              accessibilityRole={'tab'}
-              accessibilityLabel={item.label}
-              accessibilityState={{ selected: item.focused }}
-              activeOpacity={1}
-              onPressIn={() => {
-                // the lens jumps to the pressed tab, not only the selected one
-                bubbleOffset.value = withSpring(index * cellWidth, SPRING);
-                lens.value = withSpring(1, SPRING);
-              }}
-              onPressOut={() => {
-                // onPress follows synchronously, a tab switch re-targets the bubble
-                bubbleOffset.value = withSpring(state.index * cellWidth, SPRING);
-                lens.value = withSpring(0, SPRING);
-              }}
-              onPress={item.onPress}
-              onLongPress={item.onLongPress}
-              style={styles.floatingItem}
-            >
-              {item.icon}
-              <TabLabel
-                label={item.label}
-                typography={'label_xs_medium'}
-                color={item.focused ? activeTintColor : inactiveTintColor}
-              />
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
-      {floatingButton && (
-        <TouchableOpacity
-          accessibilityRole={'button'}
-          accessibilityLabel={floatingButton.label}
-          onPress={floatingButton.onPress}
-          style={[styles.floatingQr, { backgroundColor: theme.colors.primary }]}
-        >
-          <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
-        </TouchableOpacity>
-      )}
+      <HorizontalTabBar
+        fixedFontScale
+        items={getTabItems(props)}
+        width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
+        floatingButton={floatingButton}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+      />
     </View>
   );
 };
 
 /**
- * iPhone Duo tab bar: rail in the side bar, or a floating bar when unfolded portrait
+ * iPhone Duo tab bar: rail in the side bar, or the horizontal bar when unfolded portrait
  */
-const DuoTabBar: React.FC<Props> = props => {
+const DuoTabBar: React.FC<DuoTabBarProps> = props => {
   const { sideBar } = useScreenLayout();
   return sideBar ? (
     <DuoRailTabBar {...props} />
@@ -441,97 +67,5 @@ const DuoTabBar: React.FC<Props> = props => {
   );
 };
 
-const styles = StyleSheet.create({
-  barMaterial: {
-    borderWidth: 1,
-  },
-  icon: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-  },
-  railColumn: {
-    position: 'absolute',
-    gap: Spacing.M,
-  },
-  railColumnRight: {
-    alignItems: 'flex-start',
-    paddingLeft: Spacing.M,
-  },
-  railColumnLeft: {
-    alignItems: 'flex-end',
-    paddingRight: Spacing.M,
-  },
-  railCompact: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    borderRadius: ITEM_SIZE / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  rail: {
-    width: ITEM_SIZE,
-    paddingVertical: RAIL_PADDING,
-    gap: RAIL_GAP,
-  },
-  railBubble: {
-    position: 'absolute',
-    top: RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2,
-    left: (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
-    width: RAIL_BUBBLE_WIDTH,
-    height: RAIL_BUBBLE_HEIGHT,
-  },
-  railItem: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  railQr: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    borderRadius: ITEM_SIZE / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  floating: {
-    position: 'absolute',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: Spacing.S,
-  },
-  floatingBar: {
-    flexShrink: 1,
-    height: FLOATING_HEIGHT,
-    padding: FLOATING_PADDING,
-  },
-  floatingRow: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  floatingBubble: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-  },
-  floatingItem: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: Spacing.XXS,
-  },
-  // pink fills the whole pinned platter
-  floatingQr: {
-    width: FLOATING_HEIGHT,
-    height: FLOATING_HEIGHT,
-    borderRadius: FLOATING_HEIGHT / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: Colors.black_20,
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.16,
-    shadowRadius: 16,
-  },
-});
-
+export type { DuoTabBarProps };
 export { DuoTabBar, useDuoTabBarInset };