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

package/Image/index.tsx

@@ -1,8 +1,8 @@
-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';
@@ -14,14 +14,25 @@ type Status = 'success' | 'loading' | 'error';
 const Image: React.FC<ImageProps> = ({
   style,
   source,
-  loading,
+  loading = true,
   children,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
+  const id = getAccessibilityID(
+    `img|${(source as Source).uri}`,
+    accessibilityLabel,
+  );
+
+  useEffect(() => {
+    component?.addChild?.(id.testID || id.accessibilityLabel);
+  }, []);
+
   /**
    * render content loading | fail | rendered
    */
@@ -45,7 +56,7 @@ const Image: React.FC<ImageProps> = ({
   return (
     <FastImage
       {...rest}
-      {...getAccessibilityID(`img|${(source as Source).uri}`)}
+      {...id}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {
@@ -77,8 +88,4 @@ const Image: React.FC<ImageProps> = ({
   );
 };
 
-Image.defaultProps = {
-  loading: true,
-};
-
 export {Image};

package/Image/types.ts

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

package/Input/Input.tsx

@@ -7,23 +7,14 @@ 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');
+import {formatComponentName} from '../Application/utils';
 
 const Input = forwardRef(
   (
@@ -52,18 +43,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 +111,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 +152,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               editable={props.editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -234,20 +208,19 @@ const Input = forwardRef(
     }
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'Input',
           params,
           componentLabel: formatComponentName(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,13 @@
 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');
+import {formatComponentName} from '../Application/utils';
 
 const InputDropDown = ({
   value,
@@ -37,13 +28,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 +48,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,7 +83,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -132,14 +108,13 @@ const InputDropDown = ({
   };
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'InputOTP',
         params,
         state: 'enabled',
         componentLabel: formatComponentName(floatingValue || ''),
-        componentId,
+        componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
         onPress={onPress}
@@ -147,7 +122,7 @@ const InputDropDown = ({
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/Input/InputMoney.tsx

@@ -12,22 +12,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 {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');
+import {formatComponentName} from '../Application/utils';
 
 const InputMoney = forwardRef(
   (
@@ -48,16 +39,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 +92,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,7 +117,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -191,20 +169,19 @@ const InputMoney = forwardRef(
     }
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputMoney',
           params,
           componentLabel: formatComponentName(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,9 @@ 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');
+import {formatComponentName} from '../Application/utils';
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -90,19 +81,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 +183,6 @@ const InputOTP = forwardRef(
       );
     };
 
-    const accessibilityID = getAccessibilityID(
-      `${appId}/${code}/${screenInfo.screenName}/input_${cleanNameForTracking(
-        floatingValue,
-      )}`,
-    );
-
     const renderInputView = () => {
       return (
         <View
@@ -226,7 +208,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -243,14 +225,13 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputOTP',
           params,
           componentLabel: formatComponentName(floatingValue || ''),
           state: 'enabled',
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <TouchableOpacity
           activeOpacity={1}
@@ -259,7 +240,7 @@ const InputOTP = forwardRef(
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </TouchableOpacity>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -7,17 +7,11 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
   (
@@ -35,18 +29,16 @@ const InputSearch = forwardRef(
       defaultValue,
       onPressButtonText,
       params,
-      componentId,
       hasColorBG = false,
+      accessibilityLabel,
       ...props
     }: InputSearchProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -72,9 +64,7 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          {...getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_search`,
-          )}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -145,13 +135,12 @@ const InputSearch = forwardRef(
       : theme.colors.background.surface;
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputSearch',
           params,
           state: inputState,
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.searchInputContainer]}>
           <View
@@ -179,7 +168,7 @@ const InputSearch = forwardRef(
             </TouchableOpacity>
           )}
         </View>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -18,12 +18,6 @@ import {
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
-import {cleanNameForTracking, getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
   (
@@ -44,13 +38,12 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
+      accessibilityLabel,
       ...props
     }: InputTextAreaProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
-    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -96,20 +89,6 @@ const InputTextArea = forwardRef(
         placeholderColor = disabledColor;
       }
 
-      const accessibilityID = disabled
-        ? getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(
-              floatingValue ?? placeholder,
-            )}_disabled`,
-          )
-        : getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
-          );
-
       return (
         <View
           style={[
@@ -131,7 +110,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"

package/Input/index.tsx

@@ -82,7 +82,6 @@ export interface InputProps extends TextInputProps {
   onPressIcon?: () => void;
 
   params?: any;
-  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -130,8 +129,6 @@ export interface InputSearchProps extends TextInputProps {
   hasColorBG?: boolean;
 
   params?: any;
-
-  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -169,7 +166,7 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps {
+export interface InputDropDownProps extends InputProps {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -264,11 +261,6 @@ export interface InputDropDownProps {
     [key: string]: any;
   };
 
-  /**
-   * component id for element tracking.
-   */
-  componentId?: string;
-
   /**
    * Optional. Represents the style of the InputDropDown component.
    */

package/Popup/PopupNotify.tsx

@@ -4,15 +4,11 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {getAccessibilityID} from '../Application/utils';
 
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
   image,
@@ -47,7 +43,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,

package/Popup/PopupPromotion.tsx

@@ -1,16 +1,12 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 import {getAccessibilityID} from '../Application/utils';
 
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
   image,
@@ -31,7 +27,8 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -120,8 +117,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupPromotion.defaultProps = {
-  image: 'https://google.com',
-};
-
 export default PopupPromotion;