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

package/Application/BottomTab/DuoTabBar.tsx

@@ -0,0 +1,462 @@
+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 } from '../../Context';
+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';
+
+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;
+// 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 = 62;
+const FLOATING_PADDING = Spacing.XS;
+const FLOATING_QR_SIZE = 44;
+// floating bar spans 6 of the 8 portrait grid columns, like the content
+const GRID_COLUMNS = 8;
+const GRID_SPAN = 6;
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+
+/**
+ * space tab content leaves under the Duo floating tab bar, 0 elsewhere
+ */
+const useDuoTabBarInset = () => {
+  const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
+  return isIPhoneDuo && !sideBar
+    ? FLOATING_HEIGHT + Spacing.M + insets.bottom
+    : 0;
+};
+
+const gridSpanWidth = (width: number) => {
+  const columnWidth =
+    (width - 2 * Spacing.M - (GRID_COLUMNS - 1) * Spacing.M) / GRID_COLUMNS;
+  return columnWidth * GRID_SPAN + (GRID_SPAN - 1) * Spacing.M;
+};
+
+const BarMaterial: React.FC<{ radius: number }> = ({ radius }) => {
+  const { theme } = useContext(ApplicationContext);
+  if (GlassView) {
+    return (
+      <GlassView
+        pointerEvents={'none'}
+        effect={'glass'}
+        cornerRadius={radius}
+        useShadow
+        style={StyleSheet.absoluteFill}
+      />
+    );
+  }
+  return (
+    <View
+      pointerEvents={'none'}
+      style={[
+        StyleSheet.absoluteFill,
+        styles.fallbackMaterial,
+        {
+          borderRadius: radius,
+          backgroundColor: theme.colors.background.surface,
+          borderColor: theme.colors.border.default,
+        },
+      ]}
+    />
+  );
+};
+
+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];
+
+/**
+ * glass column of tab items with the sliding selection bubble
+ */
+const Rail: React.FC<{
+  items: TabItem[];
+  index: number;
+  onItemPress?: () => void;
+}> = ({ items, index, onItemPress }) => {
+  const { theme } = useContext(ApplicationContext);
+  const bubbleOffset = useSharedValue(index * (ITEM_SIZE + RAIL_GAP));
+
+  useEffect(() => {
+    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={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 in the middle cell (Figma MT1-M)
+ */
+const DuoFloatingTabBar: React.FC<Props> = props => {
+  const { theme } = useContext(ApplicationContext);
+  const { width, insets } = useScreenLayout();
+  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
+  const items = getTabItems(props);
+  const [rowWidth, setRowWidth] = useState(0);
+  const barWidth = gridSpanWidth(width);
+
+  const useQr = !!floatingButton && state.routes.length % 2 === 0;
+  const middle = state.routes.length / 2;
+  const cellWidth = rowWidth / (state.routes.length + (useQr ? 1 : 0));
+  const visualIndex =
+    useQr && state.index >= middle ? state.index + 1 : state.index;
+
+  const bubbleOffset = useSharedValue(0);
+  const measured = useRef(false);
+
+  useEffect(() => {
+    const target = visualIndex * 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;
+  }, [visualIndex, cellWidth, bubbleOffset]);
+
+  const bubbleStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: bubbleOffset.value }],
+  }));
+
+  const onRowLayout = (e: LayoutChangeEvent) =>
+    setRowWidth(e.nativeEvent.layout.width);
+
+  const cells = 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.floatingItem}
+    >
+      {item.icon}
+      <Text
+        numberOfLines={1}
+        typography={'label_xs_medium'}
+        color={item.focused ? activeTintColor : inactiveTintColor}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  ));
+
+  if (useQr && floatingButton) {
+    cells.splice(
+      middle,
+      0,
+      <View key={'duo_tab_qr'} style={styles.floatingItem}>
+        <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>,
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.floating,
+        {
+          width: barWidth,
+          left: (width - barWidth) / 2,
+          bottom: insets.bottom + Spacing.M,
+        },
+      ]}
+      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,
+                backgroundColor: theme.colors.background.selected,
+              },
+              bubbleStyle,
+            ]}
+          />
+        )}
+        {cells}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * iPhone Duo tab bar: glass rail in the side bar, or a floating glass bar when unfolded portrait
+ */
+const DuoTabBar: React.FC<Props> = props => {
+  const { sideBar } = useScreenLayout();
+  return sideBar ? (
+    <DuoRailTabBar {...props} />
+  ) : (
+    <DuoFloatingTabBar {...props} />
+  );
+};
+
+const styles = StyleSheet.create({
+  fallbackMaterial: {
+    borderWidth: 1,
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+  railColumn: {
+    position: 'absolute',
+    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,
+    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,
+    borderRadius: RAIL_BUBBLE_WIDTH / 2,
+  },
+  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',
+    height: FLOATING_HEIGHT,
+    padding: FLOATING_PADDING,
+  },
+  floatingRow: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  floatingBubble: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2,
+  },
+  floatingItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: Spacing.XXS,
+  },
+  floatingQr: {
+    width: FLOATING_QR_SIZE,
+    height: FLOATING_QR_SIZE,
+    borderRadius: FLOATING_QR_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export { DuoTabBar, useDuoTabBarInset };