@momo-kits/collapse 0.153.2 → 0.154.1-beta.1

package/index.tsx

@@ -1,4 +1,9 @@
-import React, {useContext, useImperativeHandle, useMemo, useState} from 'react';
+import React, {
+  useContext,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Animated,
   LayoutAnimation,
@@ -14,12 +19,12 @@ import {
   Icon,
   Image,
   MiniAppContext,
-  scaleSize,
+  useScaleSize,
   ScreenContext,
   Tag,
   Text,
 } from '@momo-kits/foundation';
-import {CollapseHandle, CollapseImageSize, CollapseProps} from './types';
+import { CollapseHandle, CollapseImageSize, CollapseProps } from './types';
 import styles from './styles';
 
 if (Platform.OS === 'android') {
@@ -52,11 +57,19 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
       backgroundColor,
       titleColor,
     },
-    ref
+    ref,
   ) => {
-    const {theme} = useContext(ApplicationContext);
+    const { theme } = useContext(ApplicationContext);
     const [expanded, setExpanded] = useState(expandDefault);
 
+    // Dynamic font sizes using useScaleSize
+    const fontSize14 = useScaleSize(14);
+    const lineHeight20 = useScaleSize(20);
+    const fontSize16 = useScaleSize(16);
+    const lineHeight22 = useScaleSize(22);
+    const fontSize18 = useScaleSize(18);
+    const lineHeight26 = useScaleSize(26);
+
     const app = useContext<any>(MiniAppContext);
     const screen = useContext<any>(ScreenContext);
     const componentName = 'Collapse';
@@ -77,26 +90,26 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
       switch (titleSize) {
         case 'small': {
           return {
-            fontSize: scaleSize(14),
-            lineHeight: scaleSize(20),
+            fontSize: fontSize14,
+            lineHeight: lineHeight20,
           };
         }
         case 'medium': {
           return {
-            fontSize: scaleSize(16),
-            lineHeight: scaleSize(22),
+            fontSize: fontSize16,
+            lineHeight: lineHeight22,
           };
         }
         case 'large': {
           return {
-            fontSize: scaleSize(18),
-            lineHeight: scaleSize(26),
+            fontSize: fontSize18,
+            lineHeight: lineHeight26,
           };
         }
         default: {
           return {
-            fontSize: scaleSize(14),
-            lineHeight: scaleSize(20),
+            fontSize: fontSize14,
+            lineHeight: lineHeight20,
           };
         }
       }
@@ -113,7 +126,8 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
           <Text
             numberOfLines={1}
             typography={'body_default_regular'}
-            accessibilityLabel={componentId + '|sub-title-text'}>
+            accessibilityLabel={componentId + '|sub-title-text'}
+          >
             {subTitle}
           </Text>
         );
@@ -140,7 +154,7 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
           type: LayoutAnimation.Types.easeInEaseOut,
           property: LayoutAnimation.Properties.opacity,
         },
-        update: {type: LayoutAnimation.Types.easeInEaseOut},
+        update: { type: LayoutAnimation.Types.easeInEaseOut },
       });
 
       setExpanded(!expanded);
@@ -155,7 +169,8 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
               {
                 backgroundColor: theme.colors.background.tonal,
               },
-            ]}>
+            ]}
+          >
             <Icon
               color={theme.colors.primary}
               source={iconSource}
@@ -185,11 +200,12 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
             },
           ]}
           accessibilityLabel={componentId + '|touch'}
-          accessibilityState={{checked: expanded}}>
+          accessibilityState={{ checked: expanded }}
+        >
           {!!image && (
             <Image
-              source={{uri: image}}
-              style={[styles.image, {width: imageSize, height: imageSize}]}
+              source={{ uri: image }}
+              style={[styles.image, { width: imageSize, height: imageSize }]}
               accessibilityLabel={componentId + '|img'}
             />
           )}
@@ -203,19 +219,22 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
                     color: titleColor ?? theme.colors.text.default,
                   },
                 ]}
-                accessibilityLabel={componentId + '|text'}>
+                allowFontScaling={false}
+                accessibilityLabel={componentId + '|text'}
+              >
                 {title}
               </RNText>
               {!!description && (
                 <Text
                   numberOfLines={2}
                   typography={'body_default_regular'}
-                  accessibilityLabel={componentId + '|description-text'}>
+                  accessibilityLabel={componentId + '|description-text'}
+                >
                   {description}
                 </Text>
               )}
             </View>
-            <View style={[styles.infoWrap, {justifyContent: headerAlign}]}>
+            <View style={[styles.infoWrap, { justifyContent: headerAlign }]}>
               {renderInfo()}
             </View>
           </View>
@@ -242,7 +261,8 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
                 borderTopWidth: borderWidth,
                 borderColor,
               },
-            ]}>
+            ]}
+          >
             {expanded && children}
           </ParentComponent>
         );
@@ -256,7 +276,8 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
               borderTopWidth: borderWidth,
               borderColor,
             },
-          ]}>
+          ]}
+        >
           {expanded && children}
         </ParentComponent>
       );
@@ -271,13 +292,14 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
             backgroundColor: backgroundColor ?? theme.colors.background.surface,
           },
         ]}
-        accessibilityLabel={componentId}>
+        accessibilityLabel={componentId}
+      >
         {renderHeader()}
         {renderContent()}
       </View>
     );
-  }
+  },
 );
 
-export {Collapse};
-export type {CollapseProps, CollapseImageSize};
+export { Collapse };
+export type { CollapseProps, CollapseImageSize };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/collapse",
-    "version": "0.153.2",
+    "version": "0.154.1-beta.1",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {