@momo-kits/foundation 0.167.2-beta.1 → 0.168.1-beta.2

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/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/utils.ts

@@ -2,7 +2,6 @@ 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;
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.2-beta.1",
+    "version": "0.168.1-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -18,12 +18,15 @@
         "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-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"

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;