@momo-kits/foundation 0.167.1 → 0.168.1-beta.1

package/Application/BottomTab/DuoTabBar.tsx

@@ -0,0 +1,537 @@
+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 { FloatingButtonProps } from '../types';
+import { TabBarIcon } from './TabBarIcon';
+
+type Props = 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
+ */
+const useDuoTabBarInset = () => {
+  const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
+  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>
+  );
+};
+
+/**
+ * floating labelled bar for the unfolded portrait display, QR pinned in its own
+ * platter on the trailing side
+ */
+const DuoFloatingTabBar: React.FC<Props> = props => {
+  const { theme } = useContext(ApplicationContext);
+  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);
+
+  return (
+    <View
+      pointerEvents={'box-none'}
+      style={[
+        styles.floating,
+        {
+          left: insets.left + DuoMetrics.floatingTabBarMargin,
+          right: insets.right + DuoMetrics.floatingTabBarMargin,
+          bottom: getFloatingTabBarBottom(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>
+      )}
+    </View>
+  );
+};
+
+/**
+ * iPhone Duo tab bar: rail in the side bar, or a floating bar when unfolded portrait
+ */
+const DuoTabBar: React.FC<Props> = props => {
+  const { sideBar } = useScreenLayout();
+  return sideBar ? (
+    <DuoRailTabBar {...props} />
+  ) : (
+    <DuoFloatingTabBar {...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 { DuoTabBar, useDuoTabBarInset };