@momo-kits/foundation 0.167.1-duo.1 → 0.167.1-duo.3

package/Application/BottomSheet.tsx

@@ -1,14 +1,24 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   BackHandler,
   Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
+  KeyboardEvent,
+  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
   StyleSheet,
   TouchableOpacity,
+  useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -22,22 +32,38 @@ import Animated, {
   Easing,
   Extrapolation,
   interpolate,
-  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
+import { getDuoTopInset, isIPhoneDuo } from './device';
+
+// iPhone Duo inner display: center the sheet instead of spanning the width
+const DUO_REGULAR_MIN_WIDTH = 600;
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const heightDevice = Dimensions.get('screen').height;
+  const windowSize = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  const isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
+  const isPortrait = windowSize.height > windowSize.width;
+  // 'screen' is the outer display on iPhone Duo, even when unfolded
+  const heightDevice = isDuo
+    ? windowSize.height
+    : Dimensions.get('screen').height;
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+  const topGap = Math.max(
+    getDuoTopInset(insets, windowSize.width, windowSize.height),
+    Spacing.XL,
+  );
+  const bottomInset =
+    Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -58,6 +84,43 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
+  const [keyboardLift, setKeyboardLift] = useState(0);
+
+  // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
+  // so lift it here and shrink maxHeight by the same amount instead
+  useEffect(() => {
+    if (!isDuo || !useKeyboardAvoidingView) {
+      return;
+    }
+    const onKeyboardChange = (e: KeyboardEvent) => {
+      const overlap = windowSize.height - e.endCoordinates.screenY;
+      const lift = Math.max(
+        overlap - bottomInset - (keyboardVerticalOffset ?? 0),
+        0,
+      );
+      if (e.duration) {
+        LayoutAnimation.configureNext({
+          duration: e.duration,
+          update: {
+            duration: e.duration,
+            type: LayoutAnimation.Types[e.easing] || 'keyboard',
+          },
+        });
+      }
+      setKeyboardLift(lift);
+    };
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
+      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
+    ];
+    return () => subscriptions.forEach(sub => sub.remove());
+  }, [
+    bottomInset,
+    isDuo,
+    keyboardVerticalOffset,
+    useKeyboardAvoidingView,
+    windowSize.height,
+  ]);
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -74,7 +137,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           duration: 200,
           easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
         },
-        () => runOnJS(callback)(),
+        () => scheduleOnRN(callback),
       );
     },
     [heightDevice, translateY],
@@ -137,9 +200,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }
       closeAnimation(() => {
         navigator?.pop();
-        runOnJS(() => {
+        scheduleOnRN(() => {
           callback?.();
-        })();
+        });
       });
     },
     [barrierDismissible, closeAnimation, navigator],
@@ -248,6 +311,23 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   });
 
+  // landscape side buttons span the full height, so inset the content; in
+  // portrait the side status bar only covers the top corner
+  const sideInsetStyle = isDuo &&
+    !isDuoCentered &&
+    !isPortrait && {
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+    };
+
+  const screen = (
+    <Screen
+      {...props}
+      {...props.route.params}
+      onRequestClose={onRequestClose}
+    />
+  );
+
   return (
     <Container
       transparent
@@ -264,7 +344,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           android: undefined,
         })}
         keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-        enabled={useKeyboardAvoidingView}
+        enabled={useKeyboardAvoidingView && !isDuo}
         contentContainerStyle={styles.container}
         style={styles.container}
       >
@@ -287,15 +367,34 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               borderTopRightRadius: Radius.M,
               overflow: 'hidden',
             },
+            isDuo && {
+              maxHeight: windowSize.height - topGap - keyboardLift,
+              marginBottom: keyboardLift,
+            },
+            isDuoCentered && {
+              // keeps the portrait width in landscape, like system sheets
+              width: Math.min(
+                Math.min(windowSize.width, windowSize.height) - Spacing.L * 2,
+                windowSize.width -
+                  Math.max(insets.left, insets.right, Spacing.L) * 2,
+              ),
+              alignSelf: 'center',
+            },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {renderHeader()}
-          <Screen
-            {...props}
-            {...props.route.params}
-            onRequestClose={onRequestClose}
-          />
+          {isDuo ? (
+            // content shrinks so a tall sheet keeps its header and footer
+            <View style={[styles.shrink, sideInsetStyle]}>
+              {renderHeader()}
+              <View style={styles.shrink}>{screen}</View>
+            </View>
+          ) : (
+            <>
+              {renderHeader()}
+              {screen}
+            </>
+          )}
           {footerComponent && (
             <View
               style={[
@@ -304,6 +403,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
+                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -353,6 +453,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
+  shrink: { flexShrink: 1 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/BottomTab/DuoTabBar.tsx

@@ -0,0 +1,410 @@
+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 { 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}</>;
+};
+
+/**
+ * vertical bar anchored to the bottom of the Duo side bar, QR button below it (Figma MT1-C/E)
+ */
+const DuoRailTabBar: React.FC<Props> = props => {
+  const { theme } = useContext(ApplicationContext);
+  const { sideBar } = useScreenLayout();
+  const { state, floatingButton } = props;
+  const items = getTabItems(props);
+  const bubbleOffset = useSharedValue(state.index * (ITEM_SIZE + RAIL_GAP));
+
+  useEffect(() => {
+    bubbleOffset.value = withSpring(
+      state.index * (ITEM_SIZE + RAIL_GAP),
+      SPRING,
+    );
+  }, [state.index, bubbleOffset]);
+
+  const bubbleStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: bubbleOffset.value }],
+  }));
+
+  if (!sideBar) {
+    return null;
+  }
+
+  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'}>
+        <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>
+      )}
+    </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',
+    bottom: Spacing.XL,
+    gap: Spacing.M,
+  },
+  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 };