@momo-kits/foundation 0.92.2 → 0.92.3-tracking.10

package/CheckBox/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type CheckBoxProps = {
+export interface CheckBoxProps extends TouchableOpacityProps {
   /**
    * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
    */
@@ -36,7 +36,5 @@ export type CheckBoxProps = {
    */
   style?: ViewStyle;
 
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Icon/index.tsx

@@ -5,7 +5,12 @@ import {IconProps} from './types';
 import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
+const Icon: React.FC<IconProps> = ({
+  source = 'ic_back',
+  size = 24,
+  color,
+  style = {},
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -20,8 +25,8 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   };
 
   const tintColorProps = color !== null && {
-    tintColor: color ?? theme.colors.text.default
-  }
+    tintColor: color ?? theme.colors.text.default,
+  };
 
   return (
     <Image
@@ -33,9 +38,4 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   );
 };
 
-Icon.defaultProps = {
-  source: 'ic_back',
-  size: 24,
-};
-
 export {Icon, IconSources, IconBankSources};

package/IconButton/index.tsx

@@ -5,15 +5,10 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -33,21 +28,18 @@ export interface IconButtonProps extends TouchableOpacityProps {
   size?: 'large' | 'small';
 
   params?: any;
-
-  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
-  type,
+  type = 'primary',
   icon,
   size,
   onPress,
   params,
-  componentId,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -133,30 +125,25 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'IconButton',
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentId,
-        componentValue: formatComponentName(icon),
+        componentId: accessibilityLabel,
+        componentValue: icon,
         action: 'click',
       }}>
       <TouchableOpacity
         {...rest}
+        accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-IconButton.defaultProps = {
-  type: 'primary',
-  disabled: false,
-};
-
 export {IconButton};

package/Image/index.tsx

@@ -1,27 +1,38 @@
-import React, {useContext, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
-import {getAccessibilityID} from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
 const Image: React.FC<ImageProps> = ({
   style,
   source,
-  loading,
+  loading = true,
   children,
+  params,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
+  const test: any = {
+    accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
+  };
+
+  useEffect(() => {
+    component?.addChildren?.(test.accessibilityLabel, 'add');
+    return () => component?.addChildren(test.accessibilityLabel, 'remove');
+  }, []);
+
   /**
    * render content loading | fail | rendered
    */
@@ -43,42 +54,46 @@ const Image: React.FC<ImageProps> = ({
   };
 
   return (
-    <FastImage
-      {...rest}
-      {...getAccessibilityID(`img|${(source as Source).uri}`)}
-      source={source}
-      style={[styles.container, style]}
-      onProgress={() => {
-        error.current = false;
-        if (status !== 'loading' && loading) {
-          setStatus('loading');
-        }
-      }}
-      onLoadStart={() => {
-        error.current = false;
-      }}
-      onLoad={() => {
-        error.current = false;
-      }}
-      onLoadEnd={() => {
-        let current: Status = 'success';
-        if (error.current) {
-          current = 'error';
-        }
-        if (status !== current) {
-          setStatus(current);
-        }
-      }}
-      onError={() => {
-        error.current = true;
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Image',
+        params,
+        state: loading ? 'loading' : 'loaded',
+        componentId: test.accessibilityLabel,
       }}>
-      {renderContent()}
-    </FastImage>
+      <FastImage
+        {...rest}
+        {...test}
+        source={source}
+        style={[styles.container, style]}
+        onProgress={() => {
+          error.current = false;
+          if (status !== 'loading' && loading) {
+            setStatus('loading');
+          }
+        }}
+        onLoadStart={() => {
+          error.current = false;
+        }}
+        onLoad={() => {
+          error.current = false;
+        }}
+        onLoadEnd={() => {
+          let current: Status = 'success';
+          if (error.current) {
+            current = 'error';
+          }
+          if (status !== current) {
+            setStatus(current);
+          }
+        }}
+        onError={() => {
+          error.current = true;
+        }}>
+        {renderContent()}
+      </FastImage>
+    </ComponentContext.Provider>
   );
 };
 
-Image.defaultProps = {
-  loading: true,
-};
-
 export {Image};

package/Image/types.ts

@@ -2,4 +2,6 @@ import {FastImageProps} from 'react-native-fast-image';
 
 export interface ImageProps extends FastImageProps {
   loading?: boolean;
+  accessibilityLabel?: string;
+  params?: any;
 }

package/Input/Input.tsx

@@ -7,23 +7,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {
-  formatComponentName,
-  getAccessibilityID,
-  cleanNameForTracking,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
   (
@@ -52,18 +42,16 @@ const Input = forwardRef(
       keyboardType,
       style,
       params,
-      componentId,
+      accessibilityLabel,
       ...props
     }: InputProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -122,21 +110,6 @@ const Input = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
-      const accessibilityID = disabled
-        ? getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(
-              floatingValue ?? placeholder,
-            )}_disabled`,
-          )
-        : getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(
-              floatingValue ?? placeholder ?? value,
-            )}`,
-          );
 
       if (disabled) {
         textColor = disabledColor;
@@ -178,7 +151,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               editable={props.editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -234,20 +207,19 @@ const Input = forwardRef(
     }
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'Input',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: inputState,
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputDropDown.tsx

@@ -1,22 +1,12 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {
-  cleanNameForTracking,
-  formatComponentName,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
   value,
@@ -37,13 +27,11 @@ const InputDropDown = ({
   leadingIconColor,
   style,
   params,
-  componentId,
+  accessibilityLabel,
   ...props
 }: InputDropDownProps) => {
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
-  const screenInfo = useContext<any>(ScreenContext);
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -59,19 +47,6 @@ const InputDropDown = ({
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
     let iconTintColor = iconColor;
-    const accessibilityID = disabled
-      ? getAccessibilityID(
-          `${appId}/${code}/${
-            screenInfo.screenName
-          }/input_${cleanNameForTracking(
-            floatingValue ?? placeholder,
-          )}_disabled`,
-        )
-      : getAccessibilityID(
-          `${appId}/${code}/${
-            screenInfo.screenName
-          }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
-        );
 
     if (disabled) {
       textColor = disabledColor;
@@ -107,10 +82,9 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               onPressIn={onPress}
               editable={false}
-              textAlignVertical="top"
               style={[
                 styles.input,
                 {
@@ -132,14 +106,13 @@ const InputDropDown = ({
   };
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
-        componentName: 'InputOTP',
+        componentName: 'InputDropDown',
         params,
         state: 'enabled',
-        componentLabel: formatComponentName(floatingValue || ''),
-        componentId,
+        componentLabel: floatingValue,
+        componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
         onPress={onPress}
@@ -147,7 +120,7 @@ const InputDropDown = ({
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/Input/InputMoney.tsx

@@ -12,22 +12,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {
-  cleanNameForTracking,
-  formatComponentName,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
   (
@@ -48,16 +38,14 @@ const InputMoney = forwardRef(
       style,
       params,
       defaultValue = '',
-      componentId,
+      accessibilityLabel,
       ...props
     }: InputMoneyProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -103,17 +91,6 @@ const InputMoney = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
-      const accessibilityID = disabled
-        ? getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(floatingValue)}_disabled`,
-          )
-        : getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(floatingValue)}`,
-          );
 
       if (disabled) {
         textColor = disabledColor;
@@ -139,9 +116,8 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
-              textAlignVertical="top"
               ref={inputRef}
               keyboardType={'number-pad'}
               style={[
@@ -191,20 +167,19 @@ const InputMoney = forwardRef(
     }
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputMoney',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: inputState,
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -19,18 +19,8 @@ import {CaretProps, InputOTPProps} from './index';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {
-  cleanNameForTracking,
-  formatComponentName,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -90,19 +80,16 @@ const InputOTP = forwardRef(
       dataType = 'number',
       params,
       style,
-      componentId,
+      accessibilityLabel,
       ...props
     }: InputOTPProps,
     ref,
   ) => {
     const MAX_LENGTH = 10;
-    const {appId, code} = useContext<any>(MiniAppContext);
-
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -195,12 +182,6 @@ const InputOTP = forwardRef(
       );
     };
 
-    const accessibilityID = getAccessibilityID(
-      `${appId}/${code}/${screenInfo.screenName}/input_${cleanNameForTracking(
-        floatingValue,
-      )}`,
-    );
-
     const renderInputView = () => {
       return (
         <View
@@ -226,7 +207,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -243,14 +224,13 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputOTP',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: 'enabled',
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <TouchableOpacity
           activeOpacity={1}
@@ -259,7 +239,7 @@ const InputOTP = forwardRef(
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </TouchableOpacity>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );