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

package/Application/BottomSheet.tsx

@@ -6,64 +6,61 @@ import React, {
   useState,
 } from 'react';
 import {
-  BackHandler,
-  Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
-  KeyboardEvent,
-  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
+  StatusBar,
   StyleSheet,
-  TouchableOpacity,
-  useWindowDimensions,
   View,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { BottomSheetParams } from './types';
-import { Colors, Radius, Spacing, Styles } from '../Consts';
-import { Text } from '../Text';
-import { Icon } from '../Icon';
-import { useHeaderHeight } from '@react-navigation/elements';
+import { Spacing } from '../Consts';
 import Animated, {
   Easing,
-  Extrapolation,
-  interpolate,
-  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;
+import { DuoMetrics } from '../Layout/utils';
+import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
+import {
+  useBottomSheetLayout,
+  useDuoKeyboardLift,
+  useSheetDismiss,
+  useSheetAnimatedStyles,
+} from './BottomSheet.hooks';
+import {
+  getSheetStyle,
+  renderSheetFooter,
+  renderSheetHeader,
+  renderSheetSideColumn,
+} from './BottomSheet.parts';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  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 screenHeight = Dimensions.get('screen').height;
-  const heightDevice = isDuo ? windowSize.height : screenHeight;
+  const {
+    windowSize,
+    isDuo,
+    isDuoCentered,
+    isDuoFloating,
+    sideColumn,
+    sideColumnWidth,
+    hasSideColumn,
+    heightDevice,
+    insets,
+    topGap,
+    sideInsetLeft,
+    sideInsetRight,
+    indicatorShift,
+    bottomInset,
+    keyboardOffset,
+  } = useBottomSheetLayout();
   const action = useRef<undefined | string>(undefined);
-  const insets = useSafeAreaInsets();
-  const heightHeader = useHeaderHeight();
-  const topGap = Math.max(
-    getDuoTopInset(insets, windowSize.width, windowSize.height),
-    Spacing.XL,
-  );
-  const isIOS = Platform.OS === 'ios';
-  const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
-  const keyboardOffset = heightHeader - bottomInset;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -83,43 +80,16 @@ 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,
+  const onDismissRef = useRef(props.route.params?.onDismiss);
+  onDismissRef.current = props.route.params?.onDismiss;
+  const [sheetTop, setSheetTop] = useState(windowSize.height);
+  const keyboardLift = useDuoKeyboardLift(
     isDuo,
-    keyboardVerticalOffset,
     useKeyboardAvoidingView,
     windowSize.height,
-  ]);
+    bottomInset,
+    keyboardVerticalOffset,
+  );
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -179,143 +149,71 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   /**
-   * emit dismiss event
+   * emit dismiss event, once: folding or rotating iPhone Duo changes the
+   * window height while the sheet stays open
    */
   useEffect(() => {
-    translateY.value = heightDevice;
     openAnimation();
     return () => {
-      props.route.params?.onDismiss?.(action.current);
+      onDismissRef.current?.(action.current);
     };
-  }, [heightDevice, openAnimation, props.route.params, translateY]);
+  }, [openAnimation]);
 
-  /**
-   * handler dismiss
-   */
-  const onDismiss = useCallback(
-    (force = false, callback?: () => void) => {
-      if (barrierDismissible && !force) {
-        return;
-      }
-      closeAnimation(() => {
-        navigator?.pop();
-        scheduleOnRN(() => {
-          callback?.();
-        });
-      });
-    },
-    [barrierDismissible, closeAnimation, navigator],
-  );
+  const { onDismiss, onRequestClose, onPressBack, onPressClose } =
+    useSheetDismiss({
+      barrierDismissible,
+      closeAnimation,
+      navigator,
+      leftOptions,
+      action,
+    });
 
-  /**
-   * on request close
-   */
-  const onRequestClose = useCallback(
-    (callback?: () => void) => {
-      onDismiss(true, callback);
-    },
-    [onDismiss],
-  );
+  const showBack = !!leftOptions?.onPressIconLeft;
+  const iconBack = leftOptions?.iconLeft ?? 'ic_back';
+  const sideColumnCount = showBack ? 2 : 1;
+  const sideColumnHeight =
+    sideColumnCount * DuoMetrics.controlSize +
+    (sideColumnCount - 1) * Spacing.M;
+  const coversStatusBar = !!sideColumn && sheetTop < sideColumn.top;
 
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        onDismiss();
-        return true;
-      },
-    );
-    return () => backHandler.remove();
-  }, [barrierDismissible, onDismiss]);
-
-  /**
-   * render header
-   */
-  const renderHeader = useCallback(() => {
-    return (
-      <View {...panResponder.panHandlers}>
-        <View style={{ height: 16 }}>
-          <View style={styles.indicator} />
-        </View>
-        <View
-          style={[
-            styles.header,
-            useDivider && {
-              borderBottomColor: theme.colors.border.default,
-              borderBottomWidth: 1,
-            },
-          ]}
-        >
-          {leftOptions?.onPressIconLeft ? (
-            <TouchableOpacity
-              style={styles.iconButton}
-              onPress={() => {
-                onDismiss(true, leftOptions.onPressIconLeft);
-              }}
-            >
-              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
-            </TouchableOpacity>
-          ) : null}
+    if (!coversStatusBar) {
+      return;
+    }
+    const entry = StatusBar.pushStackEntry({
+      barStyle: theme.dark ? 'light-content' : 'dark-content',
+      animated: true,
+    });
+    return () => StatusBar.popStackEntry(entry);
+  }, [coversStatusBar, theme.dark]);
 
-          {options.header ? (
-            <View style={Styles.flex}>{options.header}</View>
-          ) : (
-            <>
-              {!leftOptions ? <View style={styles.iconButton} /> : null}
-              <Text
-                style={[Styles.flex, { textAlign: 'center' }]}
-                numberOfLines={1}
-                typography="header_default_bold"
-              >
-                {options.title ?? ''}
-              </Text>
-            </>
-          )}
-          <TouchableOpacity
-            style={styles.iconButton}
-            onPress={() => {
-              action.current = 'icon_close';
-              onDismiss(true);
-            }}
-          >
-            <Icon source="navigation_close" />
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
-  }, [
-    onDismiss,
-    leftOptions,
-    options.header,
-    options.title,
-    panResponder.panHandlers,
-    theme.colors.border.default,
+  const partsParams = {
+    panHandlers: panResponder.panHandlers,
+    indicatorShift,
     useDivider,
-  ]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }],
-    };
-  });
+    theme,
+    hasSideColumn,
+    showBack,
+    onPressBack,
+    onPressClose,
+    iconBack,
+    options,
+    leftOptions,
+    sideColumn,
+    windowHeight: windowSize.height,
+    sheetTop,
+    sideColumnHeight,
+    sideColumnWidth,
+  };
 
-  const animatedOverlayStyle = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(
-        translateY.value,
-        [0, heightDevice],
-        [1, 0],
-        Extrapolation.CLAMP,
-      ),
-    };
-  });
+  const { animatedStyle, animatedOverlayStyle } = useSheetAnimatedStyles(
+    translateY,
+    heightDevice,
+  );
 
-  // landscape side buttons span the full height, so inset the content; in
-  // portrait the side status bar only covers the top corner
-  const needsSideInset = isDuo && !isDuoCentered && !isPortrait;
-  const sideInsetStyle = needsSideInset && {
-    paddingLeft: insets.left,
-    paddingRight: insets.right,
+  const sideInsetStyle = isDuoFloating && {
+    paddingLeft: sideInsetLeft,
+    paddingRight: sideInsetRight,
   };
 
   const screen = (
@@ -333,8 +231,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFill}
+      style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -347,7 +246,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         style={styles.container}
       >
         <Pressable
-          style={StyleSheet.absoluteFill}
+          style={StyleSheet.absoluteFillObject}
           onPress={() => {
             action.current = 'touch';
             onDismiss();
@@ -357,56 +256,39 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
+          onLayout={
+            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
+          }
           style={[
             animatedStyle,
-            {
+            getSheetStyle({
               backgroundColor,
-              borderTopLeftRadius: Radius.M,
-              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,
+              isDuo,
+              isDuoFloating,
+              isDuoCentered,
+              windowSize,
+              topGap,
+              keyboardLift,
+              sideColumn,
+              sideColumnHeight,
+              insets,
+              showBaseLineDebug,
+            }),
           ]}
         >
           {isDuo ? (
             // content shrinks so a tall sheet keeps its header and footer
             <View style={[styles.shrink, sideInsetStyle]}>
-              {renderHeader()}
+              {renderSheetHeader(partsParams)}
               <View style={styles.shrink}>{screen}</View>
             </View>
           ) : (
             <>
-              {renderHeader()}
+              {renderSheetHeader(partsParams)}
               {screen}
             </>
           )}
-          {footerComponent && (
-            <View
-              style={[
-                layoutStyles.shadow,
-                {
-                  paddingBottom: Spacing.S,
-                  backgroundColor: theme.colors.background.surface,
-                },
-                sideInsetStyle,
-              ]}
-            >
-              {footerComponent}
-            </View>
-          )}
+          {renderSheetFooter({ footerComponent, theme, sideInsetStyle })}
           {useBottomInset && (
             <View
               style={{
@@ -415,44 +297,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
+          {renderSheetSideColumn(partsParams)}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-  },
-  indicator: {
-    width: 40,
-    height: 4,
-    borderRadius: Radius.S,
-    backgroundColor: Colors.black_06,
-    position: 'absolute',
-    alignSelf: 'center',
-    top: Spacing.S,
-  },
-  header: {
-    height: 56,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconButton: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.M,
-  },
-  shrink: { flexShrink: 1 },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
 export default BottomSheet;

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -0,0 +1,60 @@
+import { Platform, StyleSheet } from 'react-native';
+import { Colors, Radius } from '../../Consts';
+
+export const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tabBar: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    elevation: 8,
+  },
+  tabBarFloatingButton: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1,
+    shadowColor: Colors.black_20,
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 8,
+  },
+  floatingContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    left: 0,
+    right: 0,
+    top: -2,
+    bottom: Platform.OS === 'ios' ? -6 : 4,
+  },
+  floatingContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 48,
+    width: 48,
+    borderRadius: 24,
+    top: -10,
+  },
+  indicator: {
+    height: 2,
+    width: 44,
+    alignSelf: 'center',
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  floatingLabel: {
+    top: -4,
+    borderRadius: Radius.XL,
+    paddingHorizontal: 6,
+  },
+  indicatorContainer: {
+    position: 'absolute',
+    top: 0,
+  },
+});

package/Application/BottomTab/BottomTabBar.tsx

@@ -3,7 +3,6 @@ import { CommonActions, Route } from '@react-navigation/native';
 import React, { useCallback, useContext } from 'react';
 import {
   Platform,
-  StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
   View,
@@ -14,12 +13,13 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Colors, Radius, Styles } from '../../Consts';
+import { Styles } from '../../Consts';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import { FloatingButtonProps } from '../types';
 import CustomBottomTabItem from './CustomBottomTabItem';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -175,12 +175,10 @@ export default function BottomTabBar({
             {renderFloatingIcon()}
           </View>
           <View
-            style={{
-              top: -4,
-              backgroundColor: activeTintColor ?? theme.colors.primary,
-              borderRadius: Radius.XL,
-              paddingHorizontal: 6,
-            }}
+            style={[
+              styles.floatingLabel,
+              { backgroundColor: activeTintColor ?? theme.colors.primary },
+            ]}
           >
             <Text
               numberOfLines={1}
@@ -257,9 +255,7 @@ export default function BottomTabBar({
     >
       <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
         {useFloating && floatingButton?.container}
-        <Animated.View
-          style={[{ position: 'absolute', top: 0 }, indicatorStyle]}
-        >
+        <Animated.View style={[styles.indicatorContainer, indicatorStyle]}>
           <View
             style={[
               styles.indicator,
@@ -272,52 +268,3 @@ export default function BottomTabBar({
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  tabBar: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    elevation: 8,
-  },
-  tabBarFloatingButton: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-    shadowColor: Colors.black_20,
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 8,
-  },
-  floatingContainer: {
-    position: 'absolute',
-    alignItems: 'center',
-    left: 0,
-    right: 0,
-    top: -2,
-    bottom: Platform.OS === 'ios' ? -6 : 4
-  },
-  floatingContent: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 48,
-    width: 48,
-    borderRadius: 24,
-    top: -10,
-  },
-  indicator: {
-    height: 2,
-    width: 44,
-    alignSelf: 'center',
-    borderBottomLeftRadius: 1,
-    borderBottomRightRadius: 1,
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -87,20 +87,20 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
     );
   };
 
-  const renderLabel = ({ focused }: { focused: boolean }) => {
+  const renderLabel = ({ focused: isFocused }: { focused: boolean }) => {
     if (showLabel === false) {
       return null;
     }
 
-    const color = focused ? activeTintColor : inactiveTintColor;
+    const color = isFocused ? activeTintColor : inactiveTintColor;
 
     if (typeof label === 'string') {
       return (
         <Text
           numberOfLines={1}
           style={[styles.label, labelStyle]}
-          color={focused ? activeTintColor : inactiveTintColor}
-          typography={focused ? 'label_xs_medium' : 'description_xs_regular'}
+          color={isFocused ? activeTintColor : inactiveTintColor}
+          typography={isFocused ? 'label_xs_medium' : 'description_xs_regular'}
           allowFontScaling={allowFontScaling}
         >
           {label}
@@ -109,7 +109,7 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
     }
 
     return label({
-      focused,
+      focused: isFocused,
       color,
       children: route.name,
       position: 'below-icon',