@momo-kits/foundation 0.92.1-tracking.6 → 0.92.1-tracking.8

package/Application/BottomTab.tsx

@@ -58,7 +58,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, []);
 
-  const accessibilityID = getAccessibilityID("tbr_main_bottom")
+  const accessibilityID = getAccessibilityID?.("tbr_main_bottom")
 
   return (
     <Tab.Navigator
@@ -75,7 +75,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
       }}>
       {tabs.map(item => {
-          const itemAccessibilityID = getAccessibilityID(`btn_tabbar_${item.name}`)
+          const itemAccessibilityID = getAccessibilityID?.(`btn_tabbar_${item.name}`)
         return (
           <Tab.Screen
               {...itemAccessibilityID}

package/Application/Components.tsx

@@ -30,6 +30,7 @@ import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
 import {getAccessibilityID} from './utils';
+const accessibilityID = getAccessibilityID("title_navigation_header")
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -65,7 +66,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     }
   }, [badgeType, badgeValue]);
 
-  const ID = getAccessibilityID(accessibilityID);
+  const ID = getAccessibilityID?.(accessibilityID);
   return (
     <View {...ID} style={{width: scaleSize(28)}}>
       <TouchableOpacity
@@ -90,9 +91,11 @@ const HeaderTitle: React.FC<any> = props => {
     extrapolate: 'clamp',
   });
 
+
   return (
     <Animated.Text
       {...props}
+      {...accessibilityID}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -246,7 +249,9 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="header_default_bold" color={tintColor}>
+        <Text
+            {...accessibilityID}
+            typography="header_default_bold" color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -403,13 +408,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             },
           ]}>
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_more')}
+            {...getAccessibilityID?.('btn_navigation_more')}
             onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_close')}
+            {...getAccessibilityID?.('btn_navigation_close')}
             onPress={onClose}>
             <Icon
               color={tintColor}

package/Application/StackScreen.tsx

@@ -40,7 +40,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * set options for screen
    */
   useLayoutEffect(() => {
-    startTime.current = Date.now();
     InteractionManager.runAfterInteractions(() => {
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
@@ -119,15 +118,21 @@ const StackScreen: React.FC<ScreenParams> = props => {
           endTime.current = Date.now();
           clearTimeout(timeout.current);
           timeout.current = setTimeout(() => {
-            timeLoad.current = endTime.current - startTime.current;
-            navigator?.maxApi?.showToastDebug?.({
-              appId: context.appId,
-              message: `${Component.name} screen_load_time ${timeLoad.current}`,
-            });
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+              navigator?.maxApi?.showToastDebug?.({
+                appId: context.appId,
+                message: `${Component.name} screen_load_time ${timeLoad.current}`,
+              });
+            }
           }, 1000);
         },
       }}>
-      <Component heightHeader={heightHeader} {...data} />
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={() => {}}
+      />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>
   );

package/Application/utils.tsx

@@ -155,7 +155,7 @@ const getAccessibilityID = (key = '') => {
   }
 };
 
-const formatComponentName = (word: string) => {
+const formatComponentName = (word = '') => {
   const accentsMap = {
     a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
     A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
@@ -183,7 +183,7 @@ const formatComponentName = (word: string) => {
   return word;
 };
 
-const formatNameLength = (name: string) => {
+const formatNameLength = (name = '') => {
   let formattedName = name;
   if (formattedName.length > 100) {
     formattedName = formattedName.substring(0, 100);

package/Button/index.tsx

@@ -78,6 +78,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   params?: any;
 
   componentId?: string;
+
+  accessibilityID?: object
 }
 
 const Button: FC<ButtonProps> = ({
@@ -93,6 +95,7 @@ const Button: FC<ButtonProps> = ({
   params,
   componentId,
   accessibilityLabel,
+                                   accessibilityID,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -303,7 +306,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|btn_${title}`)
+  const selfAccessibilityID = accessibilityID ? accessibilityID : getAccessibilityID?.(`${appId}/${code}/${screenInfo.screenName}/btn_${title}`)
   return (
     <ScreenContext.Provider
       value={{
@@ -321,7 +324,7 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
-        {...accessibilityID}
+        {...selfAccessibilityID}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -42,7 +42,7 @@ const CheckBox: FC<CheckBoxProps> = ({
       backgroundColor = theme.colors.background.tonal;
     }
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|cbx_${label}_${value}`)
+    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/cbx_${label}_${value}`)
 
   return (
     <ScreenContext.Provider

package/Image/index.tsx

@@ -42,7 +42,7 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
-  const accessibilityID = getAccessibilityID(`img|${source}`)
+  const accessibilityID = getAccessibilityID?.(`img|${source}`)
   return (
     <FastImage
       {...rest}

package/Input/Input.tsx

@@ -121,6 +121,7 @@ const Input = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -149,6 +150,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -202,7 +204,6 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -214,7 +215,7 @@ const Input = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View {...accessibilityID} style={[style, styles.wrapper]}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputDropDown.tsx

@@ -60,6 +60,7 @@ const InputDropDown = ({
       placeholderColor = disabledColor;
       iconTintColor = disabledColor;
     }
+      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <View
@@ -89,6 +90,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
+              {...accessibilityID}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -112,7 +114,6 @@ const InputDropDown = ({
     );
   };
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
 
   return (
@@ -126,7 +127,6 @@ const InputDropDown = ({
         componentId,
       }}>
       <TouchableOpacity
-          {...accessibilityID}
         onPress={onPress}
         style={[style, full && styles.wrapper]}>
         {renderInputView()}

package/Input/InputMoney.tsx

@@ -104,6 +104,7 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -123,6 +124,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -173,7 +175,6 @@ const InputMoney = forwardRef(
       inputState = 'disabled';
     }
 
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -186,7 +187,6 @@ const InputMoney = forwardRef(
           componentId,
         }}>
         <View
-            {...accessibilityID}
             style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />

package/Input/InputOTP.tsx

@@ -191,6 +191,7 @@ const InputOTP = forwardRef(
       );
     };
 
+      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}`)
     const renderInputView = () => {
       return (
         <View
@@ -216,6 +217,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -230,7 +232,6 @@ const InputOTP = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -243,7 +244,6 @@ const InputOTP = forwardRef(
           componentId,
         }}>
         <TouchableOpacity
-            {...accessibilityID}
           activeOpacity={1}
           onPress={onFocusInput}
           style={[style, styles.otpWrapper]}>

package/Input/InputSearch.tsx

@@ -66,11 +66,13 @@ const InputSearch = forwardRef(
       checkTyping(text, haveValue, setHaveValue);
       onChangeText?.(text);
     };
+      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_search`)
 
     const renderInputView = () => {
       return (
         <TextInput
           {...props}
+          {...accessibilityID}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -139,11 +141,9 @@ const InputSearch = forwardRef(
     const backgroundColor = hasColorBG
       ? theme.colors.background.default
       : theme.colors.background.surface;
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_search`)
 
     return (
       <ScreenContext.Provider
-          {...accessibilityID}
         value={{
           ...screenInfo,
           componentName: 'InputSearch',

package/Input/InputTextArea.tsx

@@ -94,6 +94,7 @@ const InputTextArea = forwardRef(
         textColor = disabledColor;
         placeholderColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -116,6 +117,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
+                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -153,11 +155,9 @@ const InputTextArea = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <View
-          {...accessibilityID}
           style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />

package/Input/styles.ts

@@ -7,7 +7,7 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   wrapper: {
     width: '100%',
@@ -75,7 +75,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -108,7 +108,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {

package/Popup/PopupNotify.tsx

@@ -109,13 +109,13 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
     const renderColumn = () => {
-      const accessibilityPrimaryID = getAccessibilityID('btn_popup_allow')
-      const accessibilitySecondID = getAccessibilityID('btn_popup_cancel')
+      const accessibilityPrimaryID = getAccessibilityID?.('btn_popup_allow')
+      const accessibilitySecondID = getAccessibilityID?.('btn_popup_cancel')
 
       return (
         <View style={Styles.columnCenter}>
           <Button
-              {...accessibilityPrimaryID}
+            accessibilityID={accessibilityPrimaryID}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -127,7 +127,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
-                  {...accessibilitySecondID}
+                  accessibilityID={accessibilitySecondID}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -161,7 +161,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
 
     return (
       <TouchableOpacity
@@ -189,7 +189,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
-  const accessibilityID = getAccessibilityID(`pu_${context.code}_notify`)
+  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_notify`)
 
   return (
     <View

package/Popup/PopupPromotion.tsx

@@ -49,7 +49,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
 
     return (
       <View {...accessibilityCloseID} style={styles.iconCloseContainer}>
@@ -78,7 +78,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       </View>
     );
   };
-  const accessibilityID = getAccessibilityID(`pu_${context.code}_promotion`)
+  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_promotion`)
 
   return (
     <View

package/Radio/index.tsx

@@ -45,7 +45,7 @@ const Radio: FC<RadioProps> = ({
         : theme.colors.text.disable,
     };
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|rdo_${label}_${value}`)
+    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/rdo_${label}_${value}`)
 
   return (
     <ScreenContext.Provider

package/Switch/index.tsx

@@ -22,7 +22,7 @@ const Switch: FC<SwitchProps> = props => {
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|swt_${value}`)
+    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/swt_${value}`)
 
   return (
     <ScreenContext.Provider

package/Text/index.tsx

@@ -50,9 +50,11 @@ export interface TextProps extends RNTextProps {
    * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
    */
   color?: string;
+
+  children?: any
 }
 const Text: React.FC<TextProps> = ({
-  typography,
+  typography='body_default_regular',
   color,
   children,
   style,
@@ -103,8 +105,4 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
-Text.defaultProps = {
-  typography: 'body_default_regular',
-};
-
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,9 +1,9 @@
 export default {
-  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
-  header_m_bold: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
+  headline_default_bold: {fontSize: 24, lineHeight: 34, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 26, fontWeight: '700'},
   header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  header_xs_semibold: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
+  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
   body_regularstrikethrought: {
     fontSize: 14,
@@ -13,28 +13,28 @@ export default {
   },
   description_default_regular: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
   },
   description_default_regularstrikethrought: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
-  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
-  description_xs_regularstrikethrought: {
+  description_s_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_s_regularstrikethrought: {
     fontSize: 10,
     lineHeight: 14,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
   label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_s_medium: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 18, fontWeight: '500'},
   label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
   action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
-  action_xs_bold: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
   action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
   /**non-support**/
   headline_default: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-tracking.6",
+    "version": "0.92.1-tracking.8",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {