@momo-kits/foundation 0.167.1-duo.2 → 0.167.1-duo.4

package/Popup/PopupNotify.tsx

@@ -1,11 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
@@ -14,6 +8,7 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -29,7 +24,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -172,18 +168,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     }
   };
 
-  return (
-    <View
-      accessibilityLabel={'popup_notify'}
-      style={[
-        styles.container,
-        {
-          backgroundColor: theme.colors.background.surface,
-          width: widthDevice - Spacing.XL * 2,
-        },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
+  const body = (
+    <>
       {!!image && <Image source={{ uri: image }} style={styles.image} />}
       <View style={styles.content}>
         <Text
@@ -225,6 +211,30 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           </View>
         )}
       </View>
+    </>
+  );
+
+  return (
+    <View
+      accessibilityLabel={'popup_notify'}
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+          width: popupWidth,
+          maxHeight,
+        },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      {maxHeight === undefined ? (
+        body
+      ) : (
+        // scrolls when iPhone Duo landscape is too short; actions stay visible
+        <ScrollView style={styles.body} bounces={false}>
+          {body}
+        </ScrollView>
+      )}
       <View style={styles.contentAction}>{buildAction()}</View>
       {buildCloseIcon()}
     </View>
@@ -242,6 +252,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
+  body: { flexShrink: 1 },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,

package/Popup/PopupPromotion.tsx

@@ -1,10 +1,16 @@
 import React, { useContext, useRef } from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { PopupPromotionProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
+
+const ASPECT_RATIO = 0.72;
+const ICON_CLOSE_SIZE = 20;
+// close button row under the image: marginTop + vertical padding + icon
+const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
@@ -14,7 +20,13 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
+  // fit the portrait image by height when iPhone Duo leaves too little room
+  const imageWidth =
+    maxHeight === undefined
+      ? popupWidth
+      : Math.min(popupWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO);
   const closeAction = useRef('touch_outside');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -69,7 +81,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   return (
     <View
       accessibilityLabel={'popup_promotion'}
-      style={showBaseLineDebug && styles.debugBaseLine}
+      style={[{ width: imageWidth }, showBaseLineDebug && styles.debugBaseLine]}
     >
       <TouchableOpacity onPress={() => onAction(onActionClick)}>
         <Image
@@ -80,7 +92,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           style={[
             styles.container,
             {
-              width: widthDevice - Spacing.XL * 2,
+              width: imageWidth,
             },
           ]}
         />
@@ -92,7 +104,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.72,
+    aspectRatio: ASPECT_RATIO,
     width: '100%',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
@@ -103,11 +115,11 @@ const styles = StyleSheet.create({
     marginTop: Spacing.S,
   },
   iconButton: {
-    padding: 8,
+    padding: Spacing.S,
   },
   iconClose: {
-    width: 20,
-    height: 20,
+    width: ICON_CLOSE_SIZE,
+    height: ICON_CLOSE_SIZE,
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: Radius.M,

package/Popup/utils.ts

@@ -0,0 +1,32 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+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 windowSize = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return Dimensions.get('window').width - Spacing.XL * 2;
+  }
+  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 (
+    height -
+    getDuoTopInset(insets, width, height) -
+    insets.bottom -
+    Spacing.XL * 2
+  );
+};
+
+export { usePopupWidth, usePopupMaxHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.1-duo.2",
+    "version": "0.167.1-duo.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},