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

package/index.tsx

@@ -1,5 +1,10 @@
 import React, { FC, useContext, useMemo, useState } from 'react';
-import { Text as RNText, TouchableOpacity, View, ViewStyle } from 'react-native';
+import {
+  Text as RNText,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {
   ApplicationContext,
   Badge,
@@ -10,6 +15,7 @@ import {
   setAutomationID,
   Text,
   Typography,
+  useScaleSize,
 } from '@momo-kits/foundation';
 import styles from './styles';
 import { TitleProps } from './types';
@@ -33,19 +39,48 @@ const Title: FC<TitleProps> = ({
   textOnly = false,
   style,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
+
+  // Dynamic styles using useScaleSize hook
+  const dynamicStyles = {
+    card_small: {
+      fontSize: useScaleSize(14),
+      lineHeight: useScaleSize(20),
+    },
+    card_medium: {
+      fontSize: useScaleSize(16),
+      lineHeight: useScaleSize(22),
+    },
+    card_large: {
+      fontSize: useScaleSize(18),
+      lineHeight: useScaleSize(26),
+    },
+    section_medium: {
+      fontSize: useScaleSize(20),
+      lineHeight: useScaleSize(28),
+    },
+    section_small: {
+      fontSize: useScaleSize(16),
+      lineHeight: useScaleSize(22),
+    },
+    section_large: {
+      fontSize: useScaleSize(24),
+      lineHeight: useScaleSize(34),
+    },
+  };
+
   const styleSheet: {
     [key: string]: any;
-  } = styles;
+  } = { ...styles, ...dynamicStyles };
   const typography = `${type}_${size}`;
   const isSection = type === 'section';
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
   const flexStyle: ViewStyle | undefined = showTrailingAction
-    ? {width: '70%'}
+    ? { width: '70%' }
     : undefined;
   const componentName = 'Title';
 
@@ -68,17 +103,18 @@ const Title: FC<TitleProps> = ({
     };
 
     if (iconAlign === 'middle') {
-      iconStyle = {justifyContent: 'center'};
+      iconStyle = { justifyContent: 'center' };
     }
 
     if (iconAlign === 'bottom') {
-      iconStyle = {justifyContent: 'flex-end'};
+      iconStyle = { justifyContent: 'flex-end' };
     }
 
     return (
       <View
         accessibilityLabel={componentId + '|icon'}
-        style={[styles.iconView, iconStyle]}>
+        style={[styles.iconView, iconStyle]}
+      >
         <Icon color={iconColor} source={icon} />
       </View>
     );
@@ -93,9 +129,11 @@ const Title: FC<TitleProps> = ({
               setContentWidth(e.nativeEvent.layout.width);
             }
           }}
-          style={[styles.iconLeftView, flexStyle]}>
+          style={[styles.iconLeftView, flexStyle]}
+        >
           <RNText
             {...setAutomationID(componentId + '|title-text')}
+            allowFontScaling={false}
             numberOfLines={numberOfLines}
             style={[
               styleSheet[typography],
@@ -104,7 +142,8 @@ const Title: FC<TitleProps> = ({
                 maxWidth:
                   contentWidth > 0 ? contentWidth - badgeWidth : undefined,
               },
-            ]}>
+            ]}
+          >
             {title}
           </RNText>
           {badgeLabel && (
@@ -116,7 +155,8 @@ const Title: FC<TitleProps> = ({
               }}
               style={{
                 alignItems: 'center',
-              }}>
+              }}
+            >
               <Badge
                 style={styles.badge}
                 label={badgeLabel}
@@ -131,7 +171,8 @@ const Title: FC<TitleProps> = ({
             accessibilityLabel={componentId + '|description-text'}
             style={styles.description}
             color={theme.colors.text.secondary}
-            typography={'description_default_regular'}>
+            typography={'description_default_regular'}
+          >
             {description}
           </Text>
         )}
@@ -145,7 +186,8 @@ const Title: FC<TitleProps> = ({
         accessibilityLabel={componentId + '|trailing-touch'}
         onPress={onPressTrailingAction}
         style={styles.iconLeftView}
-        hitSlop={{top: 10, bottom: 10, left: 50, right: 10}}>
+        hitSlop={{ top: 10, bottom: 10, left: 50, right: 10 }}
+      >
         {showTrailingAction && !showRightAction && (
           <View
             style={[
@@ -155,7 +197,8 @@ const Title: FC<TitleProps> = ({
                   ? Colors.black_06 + '99'
                   : Colors.black_06 + '4D',
               },
-            ]}>
+            ]}
+          >
             <Icon
               source={'arrow_chevron_right_small'}
               size={18}
@@ -177,7 +220,8 @@ const Title: FC<TitleProps> = ({
         style={{
           height: lineHeight,
           justifyContent: 'center',
-        }}>
+        }}
+      >
         {!buttonTitle ? (
           <TouchableOpacity
             onPress={onPressRightAction}
@@ -187,7 +231,8 @@ const Title: FC<TitleProps> = ({
                 backgroundColor: theme.colors.primary + '0F',
               },
             ]}
-            accessibilityLabel={componentId + '|label-right-action-touch'}>
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
             <Icon
               source={'arrow_chevron_right_small'}
               size={22}
@@ -197,7 +242,8 @@ const Title: FC<TitleProps> = ({
         ) : (
           <TouchableOpacity
             onPress={onPressRightAction}
-            accessibilityLabel={componentId + '|label-right-action-touch'}>
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
             <Text color={theme.colors.primary} typography={buttonTypo}>
               {buttonTitle}
             </Text>
@@ -212,8 +258,10 @@ const Title: FC<TitleProps> = ({
       <View style={isSection && styles.margin}>
         <RNText
           {...setAutomationID(componentId + '|title-text')}
+          allowFontScaling={false}
           numberOfLines={numberOfLines}
-          style={[styleSheet[typography], styles.title]}>
+          style={[styleSheet[typography], styles.title]}
+        >
           {title}
         </RNText>
       </View>
@@ -223,7 +271,8 @@ const Title: FC<TitleProps> = ({
   return (
     <View
       style={[style, styles.wrapper, isSection && styles.margin]}
-      accessibilityLabel={componentId}>
+      accessibilityLabel={componentId}
+    >
       {renderIcon()}
       {renderContent()}
       {renderActionRight()}
@@ -231,5 +280,5 @@ const Title: FC<TitleProps> = ({
   );
 };
 
-export {Title};
-export type {TitleProps};
+export { Title };
+export type { TitleProps };

package/package.json

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

package/styles.ts

@@ -1,31 +1,7 @@
 import {StyleSheet} from 'react-native';
-import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
-  card_small: {
-    fontSize: scaleSize(14),
-    lineHeight: scaleSize(20),
-  },
-  card_medium: {
-    fontSize: scaleSize(16),
-    lineHeight: scaleSize(22),
-  },
-  card_large: {
-    fontSize: scaleSize(18),
-    lineHeight: scaleSize(26),
-  },
-  section_medium: {
-    fontSize: scaleSize(20),
-    lineHeight: scaleSize(28),
-  },
-  section_small: {
-    fontSize: scaleSize(16),
-    lineHeight: scaleSize(22),
-  },
-  section_large: {
-    fontSize: scaleSize(24),
-    lineHeight: scaleSize(34),
-  },
   actionIcon: {
     borderRadius: Radius.M,
     alignItems: 'center',