@momo-kits/foundation 0.168.1-beta.14 → 0.168.1-beta.15

package/Application/BottomSheet.tsx

@@ -16,7 +16,6 @@ import {
   PanResponder,
   Platform,
   Pressable,
-  StatusBar,
   StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
@@ -40,37 +39,18 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
-import { DuoMetrics, InnerEdgeStyles, useScreenLayout } from '../Layout/utils';
 import { getDuoTopInset, isIPhoneDuo } from './device';
-import { SideBarButton } from './Components/SideBarButton';
 
 // iPhone Duo inner display: center the sheet instead of spanning the width
 const DUO_REGULAR_MIN_WIDTH = 600;
 
-const INDICATOR_HEIGHT = 16;
-const HEADER_HEIGHT = 56;
-const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-const SIDE_COLUMN_OFFSET =
-  INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
-
 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 &&
-    Math.min(windowSize.width, windowSize.height) >= DUO_REGULAR_MIN_WIDTH;
-  const isDuoFloating = isDuo && !isDuoCentered;
-  const { sideBar } = useScreenLayout();
-  const sideColumnWidth = (sideBar?.width ?? 0) - Spacing.M;
-  const sideColumn =
-    isDuoFloating &&
-    sideColumnWidth >= DuoMetrics.controlSize + Spacing.M &&
-    sideBar
-      ? sideBar
-      : undefined;
-  const hasSideColumn = !!sideColumn;
+  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;
@@ -78,9 +58,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
   const topGap = Math.max(
-    sideColumn
-      ? insets.top
-      : getDuoTopInset(insets, windowSize.width, windowSize.height),
+    getDuoTopInset(insets, windowSize.width, windowSize.height),
     Spacing.XL,
   );
   const isIOS = Platform.OS === 'ios';
@@ -105,10 +83,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
-  const onDismissRef = useRef(props.route.params?.onDismiss);
-  onDismissRef.current = props.route.params?.onDismiss;
   const [keyboardLift, setKeyboardLift] = useState(0);
-  const [sheetTop, setSheetTop] = useState(windowSize.height);
 
   // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
   // so lift it here and shrink maxHeight by the same amount instead
@@ -204,15 +179,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   /**
-   * emit dismiss event, once: folding or rotating iPhone Duo changes the
-   * window height while the sheet stays open
+   * emit dismiss event
    */
   useEffect(() => {
+    translateY.value = heightDevice;
     openAnimation();
     return () => {
-      onDismissRef.current?.(action.current);
+      props.route.params?.onDismiss?.(action.current);
     };
-  }, [openAnimation]);
+  }, [heightDevice, openAnimation, props.route.params, translateY]);
 
   /**
    * handler dismiss
@@ -253,42 +228,13 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     return () => backHandler.remove();
   }, [barrierDismissible, onDismiss]);
 
-  const onPressBack = useCallback(() => {
-    onDismiss(true, leftOptions?.onPressIconLeft);
-  }, [leftOptions, onDismiss]);
-
-  const onPressClose = useCallback(() => {
-    action.current = 'icon_close';
-    onDismiss(true);
-  }, [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(() => {
-    if (!coversStatusBar) {
-      return;
-    }
-    const entry = StatusBar.pushStackEntry({
-      barStyle: theme.dark ? 'light-content' : 'dark-content',
-      animated: true,
-    });
-    return () => StatusBar.popStackEntry(entry);
-  }, [coversStatusBar, theme.dark]);
-
   /**
    * render header
    */
   const renderHeader = useCallback(() => {
-    const showButtons = !hasSideColumn;
     return (
       <View {...panResponder.panHandlers}>
-        <View style={{ height: INDICATOR_HEIGHT }}>
+        <View style={{ height: 16 }}>
           <View style={styles.indicator} />
         </View>
         <View
@@ -300,9 +246,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
-          {showButtons && showBack ? (
-            <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
-              <Icon source={iconBack} />
+          {leftOptions?.onPressIconLeft ? (
+            <TouchableOpacity
+              style={styles.iconButton}
+              onPress={() => {
+                onDismiss(true, leftOptions.onPressIconLeft);
+              }}
+            >
+              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
             </TouchableOpacity>
           ) : null}
 
@@ -310,15 +261,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {showButtons && !leftOptions ? (
-                <View style={styles.iconButton} />
-              ) : null}
+              {!leftOptions ? <View style={styles.iconButton} /> : null}
               <Text
-                style={[
-                  Styles.flex,
-                  styles.title,
-                  !showButtons && styles.titleInset,
-                ]}
+                style={[Styles.flex, { textAlign: 'center' }]}
                 numberOfLines={1}
                 typography="header_default_bold"
               >
@@ -326,63 +271,28 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          {showButtons ? (
-            <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
-              <Icon source="navigation_close" />
-            </TouchableOpacity>
-          ) : null}
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={() => {
+              action.current = 'icon_close';
+              onDismiss(true);
+            }}
+          >
+            <Icon source="navigation_close" />
+          </TouchableOpacity>
         </View>
       </View>
     );
   }, [
-    hasSideColumn,
-    iconBack,
+    onDismiss,
     leftOptions,
-    onPressBack,
-    onPressClose,
     options.header,
     options.title,
     panResponder.panHandlers,
-    showBack,
     theme.colors.border.default,
     useDivider,
   ]);
 
-  /**
-   * iPhone Duo folded: back and close move to the side bar column, drawn on
-   * the part of the sheet under the side safe area. They line up with the
-   * header row, stay below the status bar cluster on a tall sheet and above a
-   * camera at the bottom end of the strip.
-   */
-  const renderSideColumn = () => {
-    if (!sideColumn) {
-      return null;
-    }
-    const lowestTop =
-      windowSize.height - sideColumn.bottom - sideColumnHeight - sheetTop;
-    const top = Math.min(
-      Math.max(sideColumn.top - sheetTop, SIDE_COLUMN_OFFSET),
-      lowestTop,
-    );
-
-    return (
-      <View
-        pointerEvents={'box-none'}
-        style={[
-          styles.sideColumn,
-          sideColumn.edge === 'right' ? styles.alignRight : styles.alignLeft,
-          InnerEdgeStyles[sideColumn.edge],
-          { top, width: sideColumnWidth },
-        ]}
-      >
-        {showBack ? (
-          <SideBarButton icon={iconBack} onPress={onPressBack} />
-        ) : null}
-        <SideBarButton icon="navigation_close" onPress={onPressClose} />
-      </View>
-    );
-  };
-
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
@@ -400,9 +310,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   });
 
-  const sideInsetStyle = isDuoFloating && {
-    paddingLeft: Math.max(insets.left - Spacing.M, 0),
-    paddingRight: Math.max(insets.right - Spacing.M, 0),
+  // 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 screen = (
@@ -422,7 +335,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
-      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -445,26 +357,18 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
-          onLayout={
-            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
-          }
           style={[
             animatedStyle,
             {
               backgroundColor,
-              borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
-              borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
+              borderTopLeftRadius: Radius.M,
+              borderTopRightRadius: Radius.M,
               overflow: 'hidden',
             },
             isDuo && {
               maxHeight: windowSize.height - topGap - keyboardLift,
               marginBottom: keyboardLift,
             },
-            isDuoFloating && { marginHorizontal: Spacing.M },
-            sideColumn && {
-              minHeight:
-                SIDE_COLUMN_OFFSET + sideColumnHeight + sideColumn.bottom,
-            },
             isDuoCentered && {
               // keeps the portrait width in landscape, like system sheets
               width: Math.min(
@@ -511,7 +415,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
-          {renderSideColumn()}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
@@ -537,12 +440,10 @@ const styles = StyleSheet.create({
     top: Spacing.S,
   },
   header: {
-    height: HEADER_HEIGHT,
+    height: 56,
     flexDirection: 'row',
     alignItems: 'center',
   },
-  title: { textAlign: 'center' },
-  titleInset: { paddingHorizontal: Spacing.M },
   iconButton: {
     width: 24,
     height: 24,
@@ -551,12 +452,6 @@ const styles = StyleSheet.create({
     marginHorizontal: Spacing.M,
   },
   shrink: { flexShrink: 1 },
-  sideColumn: {
-    position: 'absolute',
-    gap: Spacing.M,
-  },
-  alignRight: { right: 0 },
-  alignLeft: { left: 0 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/ModalScreen.tsx

@@ -18,7 +18,7 @@ import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { getDuoModalBounds, isIPhoneDuo } from './device';
+import { getDuoTopInset, isIPhoneDuo } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -42,7 +42,6 @@ const Modal: React.FC<ModalParams> = props => {
   const Component = useRef(screen).current;
   const insets = useSafeAreaInsets();
   const windowSize = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -136,7 +135,6 @@ const Modal: React.FC<ModalParams> = props => {
       onRequestClose={onDismiss}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
-      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         style={Styles.flexCenter}
@@ -154,13 +152,14 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
-            isDuo && styles.shrink,
-            isDuo && {
-              marginTop: insets.top,
+            // center below the side status bar and above the home indicator
+            isIPhoneDuo() && {
+              marginTop: getDuoTopInset(
+                insets,
+                windowSize.width,
+                windowSize.height,
+              ),
               marginBottom: insets.bottom,
-              marginLeft: insets.left,
-              marginRight: insets.right,
-              ...getDuoModalBounds(insets, windowSize.width, windowSize.height),
             },
             modalStyle,
           ]}
@@ -172,14 +171,11 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
-const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-
 const styles = StyleSheet.create({
   overlayContent: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
   },
-  shrink: { flexShrink: 1 },
 });
 
 export default ModalScreen;

package/Application/device.ts

@@ -1,13 +1,9 @@
 import { Dimensions, Platform, ScaledSize } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
-import { Spacing } from '../Consts';
 
 // widest short side of any single-display iPhone
 const IPHONE_MAX_SHORT_SIDE = 440;
 
-const DUO_MODAL_MAX_WIDTH = 440;
-const DUO_MODAL_MAX_HEIGHT = 640;
-
 // iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
 // still matches when Split View narrows the window
 const isIPhoneDuo = () => {
@@ -30,23 +26,4 @@ const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
     height > width ? Math.max(insets.left, insets.right) * 2 : 0,
   );
 
-/**
- * Max modal size on iPhone Duo: inside the safe area, so clear of the side
- * toolbar strip, and capped so it stays a dialog on the inner display.
- */
-const getDuoModalBounds = (
-  insets: EdgeInsets,
-  width: number,
-  height: number,
-) => ({
-  maxWidth: Math.min(
-    width - insets.left - insets.right - Spacing.XL * 2,
-    DUO_MODAL_MAX_WIDTH,
-  ),
-  maxHeight: Math.min(
-    height - insets.top - insets.bottom - Spacing.XL * 2,
-    DUO_MODAL_MAX_HEIGHT,
-  ),
-});
-
-export { isIPhoneDuo, getDuoTopInset, getDuoModalBounds };
+export { isIPhoneDuo, getDuoTopInset };

package/Layout/utils.ts

@@ -510,7 +510,6 @@ const useGridSystem = () => {
 export {
   DuoMetrics,
   HeaderMetrics,
-  InnerEdgeStyles,
   getHeaderMargin,
   getHeaderRowOptions,
   useGridSystem,

package/Popup/PopupNotify.tsx

@@ -8,7 +8,7 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
-import { getPopupRadius, usePopupMaxHeight, usePopupWidth } from './utils';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -26,7 +26,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const [scrollContent, setScrollContent] = useState(false);
   const popupWidth = usePopupWidth();
   const maxHeight = usePopupMaxHeight();
-  const radius = getPopupRadius();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -171,15 +170,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   const body = (
     <>
-      {!!image && (
-        <Image
-          source={{ uri: image }}
-          style={[
-            styles.image,
-            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
-          ]}
-        />
-      )}
+      {!!image && <Image source={{ uri: image }} style={styles.image} />}
       <View style={styles.content}>
         <Text
           typography={'header_default_bold'}
@@ -227,9 +218,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     <View
       accessibilityLabel={'popup_notify'}
       style={[
+        styles.container,
         {
           backgroundColor: theme.colors.background.surface,
-          borderRadius: radius,
           width: popupWidth,
           maxHeight,
         },
@@ -240,13 +231,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         body
       ) : (
         // scrolls when iPhone Duo landscape is too short; actions stay visible
-        <ScrollView
-          style={[
-            styles.body,
-            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
-          ]}
-          bounces={false}
-        >
+        <ScrollView style={styles.body} bounces={false}>
           {body}
         </ScrollView>
       )}
@@ -257,12 +242,17 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 };
 
 const styles = StyleSheet.create({
+  container: {
+    borderRadius: Radius.L,
+  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   image: {
+    borderTopLeftRadius: Radius.L,
+    borderTopRightRadius: Radius.L,
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
-  body: { flexShrink: 1, overflow: 'hidden' },
+  body: { flexShrink: 1 },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,

package/Popup/utils.ts

@@ -1,26 +1,32 @@
 import { Dimensions, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Radius, Spacing } from '../Consts';
-import { getDuoModalBounds, isIPhoneDuo } from '../Application/device';
+import { Spacing } from '../Consts';
+import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
+
+// width of a system alert on the iPhone Duo inner display, in both orientations
+const DUO_POPUP_MAX_WIDTH = 440;
 
 const usePopupWidth = () => {
-  const insets = useSafeAreaInsets();
-  const { width, height } = useWindowDimensions();
+  const windowSize = useWindowDimensions();
   if (!isIPhoneDuo()) {
     return Dimensions.get('window').width - Spacing.XL * 2;
   }
-  return getDuoModalBounds(insets, width, height).maxWidth;
+  return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
 };
 
+// room left for a popup on iPhone Duo, where landscape is too short for it
 const usePopupMaxHeight = () => {
   const insets = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
   if (!isIPhoneDuo()) {
     return undefined;
   }
-  return getDuoModalBounds(insets, width, height).maxHeight;
+  return (
+    height -
+    getDuoTopInset(insets, width, height) -
+    insets.bottom -
+    Spacing.XL * 2
+  );
 };
 
-const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
-
-export { usePopupWidth, usePopupMaxHeight, getPopupRadius };
+export { usePopupWidth, usePopupMaxHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.14",
+    "version": "0.168.1-beta.15",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},