@momo-kits/foundation 0.75.1-beta.19 → 0.75.1-beta.21

package/Layout/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Dimensions, View} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
@@ -7,12 +7,12 @@ import {GRIDVIEW} from '../Consts';
 import Item from './Item';
 
 const Card: React.FC<CardProps> = ({children, style}) => {
-  const {numberOfColumns, window} = useGridSystem();
+  const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
   const margin = 12;
 
-  const widthSection = window.width - margin * 2;
+  const widthSection = Dimensions.get('window').width - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize - 24) / numberOfColumns;
 

package/Layout/GridSystem.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {StyleSheet, View} from 'react-native';
+import {Dimensions, StyleSheet, View} from 'react-native';
 import {ApplicationContext} from '../Navigation';
 import {Colors, Spacing} from '../Consts';
 import {GridContextProps} from './types';
@@ -8,11 +8,11 @@ import {useGridSystem} from './utils';
 
 const GridSystem: React.FC = () => {
   const {theme} = useContext(ApplicationContext);
-  const {numberOfColumns, window} = useGridSystem();
+  const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 12;
   const margin = 12;
-  const widthSection = window.width - margin * 2;
+  const widthSection = Dimensions.get('window').width - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
 

package/Layout/Section.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Dimensions, View} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
 import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
@@ -11,14 +11,14 @@ const Section: React.FC<SectionProps> = ({
   useMargin = true,
   backgroundColor,
 }) => {
-  const {numberOfColumns, window} = useGridSystem();
+  const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
     margin = 12;
   }
-  let widthSection = window.width;
+  let widthSection = Dimensions.get('window').width;
   if (useMargin) widthSection = widthSection - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;

package/Layout/utils.ts

@@ -62,22 +62,19 @@ const useGridSystem = () => {
   );
 
   useEffect(() => {
-    if (numberOfColumns == 24) {
-      alert('CCCC');
-    }
-    // const subscription: any = Dimensions.addEventListener(
-    //   'change',
-    //   ({window}: any) => {
-    //     const newColumns = window.width > 600 ? 24 : 12;
-    //     if (numberOfColumns !== newColumns) {
-    //       setNumberOfColumns(newColumns);
-    //     }
-    //   },
-    // );
-    // return () => subscription?.remove();
+    const subscription: any = Dimensions.addEventListener(
+      'change',
+      ({window}: any) => {
+        const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+        if (newColumns != numberOfColumns){
+          setNumberOfColumns(newColumns);
+        }
+      },
+    );
+    return () => subscription?.remove();
   }, []);
 
-  return {numberOfColumns, window: Dimensions.get('window')};
+  return {numberOfColumns};
 };
 
 export {validateChildren, useGridSystem};

package/Navigation/Components.tsx

@@ -16,7 +16,7 @@ import {
   HeaderToolkitProps,
   TitleCustomProps,
 } from './types';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
@@ -70,7 +70,11 @@ const styles = StyleSheet.create({
   headerLeft: {
     marginLeft: 12,
   },
-  title: {fontSize: 15, lineHeight: 22, fontWeight: 'bold'},
+  title: {
+    fontSize: scaleSize(15),
+    lineHeight: scaleSize(22),
+    fontWeight: 'bold',
+  },
 });
 
 const HeaderTitle: React.FC<any> = props => {
@@ -80,6 +84,7 @@ const HeaderTitle: React.FC<any> = props => {
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
+
   return (
     <Animated.Text
       {...props}
@@ -314,7 +319,7 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   };
 
   const renderUtilityTool = () => {
-    if (toolConfig?.hidden === false) {
+    if (hidden === false) {
       return (
         <NavigationButton
           icon={type as string}

package/Text/index.tsx

@@ -4,6 +4,7 @@ import styles from './styles';
 import {Typography, TypographyWeight} from './types';
 import {ApplicationContext} from '../Navigation';
 import {GridContext} from '../Layout';
+import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -93,8 +94,8 @@ const Text: React.FC<TextProps> = ({
 
     return {
       fontFamily,
-      fontSize,
-      lineHeight,
+      fontSize: scaleSize(fontSize),
+      lineHeight: scaleSize(lineHeight),
       fontStyle,
     };
   };
@@ -120,4 +121,4 @@ Text.defaultProps = {
   typography: 'paragraph_default',
 };
 
-export {Text};
+export {Text, scaleSize};

package/Text/utils.ts

@@ -0,0 +1,14 @@
+import {Dimensions} from 'react-native';
+
+const deviceWidth = Dimensions.get('window').width;
+const DEFAULT_SCREEN_SIZE = 375;
+const scaleSize = (size: number) => {
+  const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
+
+  if (scaleRate > 1) {
+    return Math.min(Math.round(size * scaleRate), size + 5);
+  }
+
+  return size;
+};
+export {scaleSize};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.75.1-beta.19",
+    "version": "0.75.1-beta.21",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {