@momo-kits/foundation 0.167.1-beta.13 → 0.167.1-beta.14

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,14 @@ 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
+  let imageWidth = popupWidth;
+  if (maxHeight !== undefined) {
+    const heightFitWidth = (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO;
+    imageWidth = Math.min(popupWidth, heightFitWidth);
+  }
   const closeAction = useRef('touch_outside');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -69,7 +82,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 +93,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           style={[
             styles.container,
             {
-              width: widthDevice - Spacing.XL * 2,
+              width: imageWidth,
             },
           ]}
         />
@@ -92,7 +105,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 +116,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,26 @@
+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';
+
+const usePopupWidth = () => {
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return Dimensions.get('window').width - Spacing.XL * 2;
+  }
+  return getDuoModalBounds(insets, width, height).maxWidth;
+};
+
+const usePopupMaxHeight = () => {
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return undefined;
+  }
+  return getDuoModalBounds(insets, width, height).maxHeight;
+};
+
+const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
+
+export { usePopupWidth, usePopupMaxHeight, getPopupRadius };

package/Radio/index.tsx

@@ -47,10 +47,9 @@ const Radio: FC<RadioProps> = ({
     };
   }
   if (disabled) {
+    const { background, text } = theme.colors;
     disabledStyle = {
-      borderColor: selected
-        ? theme.colors.background.tonal
-        : theme.colors.text.disable,
+      borderColor: selected ? background.tonal : text.disable,
     };
   }
 

package/Text/index.tsx

@@ -153,6 +153,10 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
     fontSize: useScaleSize(fontSize),
     lineHeight: useScaleSize(lineHeight),
     fontStyle,
+    // fontFamily da mang san weight. Tren Android, ReactFontManager doi
+    // `fonts/<family>_bold.ttf` khi fontWeight >= 700; file do khong ton tai nen
+    // font se roi ve font he thong. Bo fontWeight de Android dung dung file.
+    fontWeight: undefined,
   };
 };
 

package/Text/utils.ts

@@ -2,18 +2,17 @@ import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
 import { MiniAppContext } from '../Context';
 
-const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
 const useScaleSize = (size: number, scaleRate?: number) => {
+  const { width } = useWindowDimensions();
   const context = useContext<any>(MiniAppContext);
   if (context?.fontScale?.useOSScaleRate === false) {
     return size * (context.fontScale.userScaleRate ?? 1);
   }
   const fontScale = PixelRatio.getFontScale();
-  const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
   const maxScaleRate = scaleRate ?? MAX_FONT_SCALE;
@@ -40,7 +39,7 @@ const useScaleSize = (size: number, scaleRate?: number) => {
 
 const scaleSize = (size: number) => {
   const fontScale = PixelRatio.getFontScale();
-  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+  const deviceScale = Dimensions.get('window').width / DEFAULT_SCREEN_SIZE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;

package/Title/index.tsx

@@ -78,8 +78,10 @@ const Title: FC<TitleProps> = ({
   const titleFontFamily = exportFontFamily('bold');
   const isSection = type === 'section';
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
-  const buttonTypo: Typography =
-    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  let buttonTypo: Typography = 'action_s_bold';
+  if (buttonSize === 'small') {
+    buttonTypo = 'action_xs_bold';
+  }
   const flexStyle: ViewStyle = showTrailingAction ? { maxWidth: '95%' } : {};
   const componentName = 'Title';
 
@@ -114,6 +116,7 @@ const Title: FC<TitleProps> = ({
   };
 
   const renderContent = () => {
+    const maxWidth = contentWidth > 0 ? contentWidth - badgeWidth : undefined;
     return (
       <View style={styles.contentView}>
         <View
@@ -132,10 +135,7 @@ const Title: FC<TitleProps> = ({
               styleSheet[typography],
               { fontFamily: titleFontFamily },
               styles.title,
-              {
-                maxWidth:
-                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
-              },
+              { maxWidth },
             ]}
           >
             {title}
@@ -175,6 +175,7 @@ const Title: FC<TitleProps> = ({
   };
 
   const renderActionLeft = () => {
+    const iconAlpha = isSection ? '99' : '4D';
     return (
       <TouchableOpacity
         accessibilityLabel={componentId + '|trailing-touch'}
@@ -186,11 +187,7 @@ const Title: FC<TitleProps> = ({
           <View
             style={[
               styles.iconLeft,
-              {
-                backgroundColor: isSection
-                  ? Colors.black_06 + '99'
-                  : Colors.black_06 + '4D',
-              },
+              { backgroundColor: Colors.black_06 + iconAlpha },
             ]}
           >
             <Icon

package/Title/styles.ts

@@ -42,7 +42,6 @@ export default StyleSheet.create({
   },
   contentView: { marginRight: Spacing.S, flex: 1 },
   title: {
-    fontWeight: 'bold',
     color: Colors.black_17,
   },
   badge: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.1-beta.13",
+    "version": "0.167.1-beta.14",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -8,22 +8,25 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
+        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
         "@react-navigation/bottom-tabs": "7.4.2",
         "@react-navigation/core": "7.12.1",
         "@react-navigation/elements": "2.5.2",
         "@react-navigation/native": "7.1.14",
         "@react-navigation/routers": "7.4.1",
         "@react-navigation/stack": "7.4.2",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4",
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
         "react-native-gesture-handler": "2.27.1",
         "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
         "react-native-reanimated": "4.2.2",
-        "react-native-safe-area-context": "5.5.2"
+        "react-native-worklets": "0.6.1",
+        "react-native-safe-area-context": "5.5.2",
+        "react-native-reserved-regions": "0.2.0",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
     },
     "peerDependencies": {
-        "react-native": "*"
+        "react-native": "*",
+        "react-native-worklets": "0.6.1"
     },
     "devDependencies": {
         "@types/color": "3.0.6"
@@ -32,4 +35,4 @@
         "registry": "https://registry.npmjs.org/"
     },
     "license": "MoMo"
-}
+}

package/Layout/GridSystem.tsx

@@ -1,137 +0,0 @@
-import React, { useContext } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Dimensions, StyleSheet, View } from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Colors, Spacing } from '../Consts';
-import { GridContextProps } from './types';
-import { useGridSystem } from './utils';
-
-const GridSystem: React.FC<any> = ({
-  width = Dimensions.get('window').width,
-  useMargin = true,
-  gutterSize = Spacing.M,
-  screenGrid = true,
-  gridColor = Colors.blue_07,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const { numberOfColumns } = useGridSystem();
-
-  const margin = useMargin ? Spacing.M : 0;
-  const widthSection = width - margin * 2;
-  const totalGutterSize = gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
-
-  const grid: GridContextProps = {
-    numberOfColumns,
-    gutterSize,
-    sizePerSpan,
-    getSizeSpan: span => {
-      return span * sizePerSpan + (span - 1) * gutterSize;
-    },
-  };
-  const insets = useSafeAreaInsets();
-
-  const list: number[] = [];
-  for (let i = 1; i <= grid.numberOfColumns; i++) {
-    list.push(i);
-  }
-
-  return (
-    <>
-      <View
-        pointerEvents="none"
-        style={[
-          styles.gridContainer,
-          screenGrid && insets,
-          {
-            borderColor: theme.colors.error.primary,
-            marginHorizontal: margin,
-            top: Spacing.M,
-            bottom: Spacing.M,
-          },
-        ]}
-      >
-        {list.map((_, index) => {
-          return (
-            <View style={{ flexDirection: 'row' }} key={index.toString()}>
-              {index !== 0 && <View style={{ width: grid.gutterSize }} />}
-              <View
-                key={`Grid${index.toString()}`}
-                pointerEvents="none"
-                style={[
-                  styles.gridColumn,
-                  {
-                    width: grid.sizePerSpan,
-                    backgroundColor: gridColor,
-                  },
-                ]}
-              />
-            </View>
-          );
-        })}
-      </View>
-      {screenGrid && (
-        <>
-          <View pointerEvents="none" style={styles.dangerLeftContainer} />
-          <View pointerEvents="none" style={styles.dangerRightContainer} />
-          <View
-            pointerEvents="none"
-            style={[styles.dangerTopContainer, { height: Spacing.M }]}
-          />
-          <View
-            pointerEvents="none"
-            style={[styles.dangerBottomContainer, { height: insets.bottom }]}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  gridContainer: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    borderWidth: 1,
-  },
-  gridColumn: {
-    height: '100%',
-    opacity: 0.2,
-  },
-  dangerTopContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: '100%',
-    top: 0,
-    position: 'absolute',
-  },
-  dangerBottomContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: '100%',
-    bottom: 0,
-    position: 'absolute',
-  },
-  dangerLeftContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: Spacing.M,
-    height: '100%',
-    left: 0,
-    position: 'absolute',
-  },
-  dangerRightContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: Spacing.M,
-    height: '100%',
-    right: 0,
-    position: 'absolute',
-  },
-});
-
-export default GridSystem;