@momo-kits/foundation 0.92.1-tracking.9 → 0.92.2-tracking.4

package/Image/index.tsx

@@ -1,27 +1,42 @@
-import React, {useContext, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import FastImage from 'react-native-fast-image';
+import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
+
+const {
+  ComponentContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 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
    */
@@ -42,11 +57,10 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
-  const accessibilityID = getAccessibilityID?.(`img|${source}`)
   return (
     <FastImage
       {...rest}
-      {...accessibilityID}
+      {...id}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {
@@ -78,8 +92,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

@@ -1,22 +1,23 @@
 import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
+  Platform,
   TextInput,
   TextInputFocusEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} 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} from '../Application/utils';
+import {formatComponentName} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
@@ -43,20 +44,19 @@ const Input = forwardRef(
       fontWeight = 'Regular',
       onPressIcon,
       secureTextEntry,
+      keyboardType,
       style,
       params,
-      componentId,
+      accessibilityLabel,
       ...props
     }: InputProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(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();
@@ -121,7 +121,13 @@ const Input = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
-        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
+
+      if (secureTextEntry) {
+        keyboardType = Platform.select({
+          ios: 'ascii-capable',
+          android: 'visible-password',
+        });
+      }
 
       return (
         <View
@@ -150,8 +156,8 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              {...accessibilityID}
-              editable={!disabled}
+              accessibilityLabel={accessibilityLabel}
+              editable={props.editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
@@ -171,6 +177,7 @@ const Input = forwardRef(
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
+              keyboardType={keyboardType}
             />
           </View>
           <View style={styles.iconView}>
@@ -204,22 +211,20 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
-
     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,16 +1,16 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} 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 {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {formatComponentName} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
@@ -32,13 +32,11 @@ const InputDropDown = ({
   leadingIconColor,
   style,
   params,
-  componentId,
+  accessibilityLabel,
   ...props
 }: InputDropDownProps) => {
-    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
-  const screenInfo = useContext<any>(ScreenContext);
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -60,7 +58,6 @@ const InputDropDown = ({
       placeholderColor = disabledColor;
       iconTintColor = disabledColor;
     }
-      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <View
@@ -90,7 +87,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -114,17 +111,14 @@ const InputDropDown = ({
     );
   };
 
-
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'InputOTP',
         params,
         state: 'enabled',
         componentLabel: formatComponentName(floatingValue || ''),
-        componentId,
+        componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
         onPress={onPress}
@@ -132,7 +126,7 @@ const InputDropDown = ({
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/Input/InputMoney.tsx

@@ -12,16 +12,16 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} 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 {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {formatComponentName} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
@@ -43,16 +43,14 @@ const InputMoney = forwardRef(
       style,
       params,
       defaultValue = '',
-      componentId,
+      accessibilityLabel,
       ...props
     }: InputMoneyProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(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, 'đ');
@@ -104,7 +102,6 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
-        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -124,7 +121,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -175,23 +172,20 @@ const InputMoney = forwardRef(
       inputState = 'disabled';
     }
 
-
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputMoney',
           params,
           componentLabel: formatComponentName(floatingValue || ''),
           state: inputState,
-          componentId,
+          componentId: accessibilityLabel,
         }}>
-        <View
-            style={[style, styles.wrapper]}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -19,17 +19,16 @@ import {CaretProps, InputOTPProps} from './index';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {formatComponentName} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
-    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -86,19 +85,16 @@ const InputOTP = forwardRef(
       dataType = 'number',
       params,
       style,
-      componentId,
+      accessibilityLabel,
       ...props
     }: InputOTPProps,
     ref,
   ) => {
     const MAX_LENGTH = 10;
-      const {appId} = useContext(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) => {
@@ -191,7 +187,6 @@ const InputOTP = forwardRef(
       );
     };
 
-      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}`)
     const renderInputView = () => {
       return (
         <View
@@ -217,7 +212,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -234,14 +229,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}
@@ -250,7 +244,7 @@ const InputOTP = forwardRef(
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </TouchableOpacity>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -7,15 +7,14 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} 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,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
@@ -33,19 +32,17 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      hasColorBG = true,
       params,
-      componentId,
+      hasColorBG = false,
+      accessibilityLabel,
       ...props
     }: InputSearchProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(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);
@@ -66,13 +63,12 @@ const InputSearch = forwardRef(
       checkTyping(text, haveValue, setHaveValue);
       onChangeText?.(text);
     };
-      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_search`)
 
     const renderInputView = () => {
       return (
         <TextInput
           {...props}
-          {...accessibilityID}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -143,13 +139,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
@@ -177,7 +172,7 @@ const InputSearch = forwardRef(
             </TouchableOpacity>
           )}
         </View>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -17,11 +17,10 @@ import {
 } from './common';
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
-import {ApplicationContext, MiniAppContext} from '../Application';
-import {getAccessibilityID} from "../Application/utils";
+import {ApplicationContext} from '../Application';
 
 const {
-    ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
@@ -43,13 +42,12 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
+      accessibilityLabel,
       ...props
     }: InputTextAreaProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-      const screenInfo = useContext<any>(ScreenContext);
-      const {appId} = useContext(MiniAppContext)
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -94,7 +92,6 @@ const InputTextArea = forwardRef(
         textColor = disabledColor;
         placeholderColor = disabledColor;
       }
-        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -117,7 +114,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                {...accessibilityID}
+                accessibilityLabel={ComponentContext}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -157,8 +154,7 @@ const InputTextArea = forwardRef(
     };
 
     return (
-      <View
-          style={[style, styles.wrapper]}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

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 {}
@@ -151,6 +148,8 @@ export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
    * 'number' - The OTP input will be treated as a number.
    */
   dataType?: 'string' | 'number';
+
+  floatingValue: string;
 }
 
 export type CaretProps = {
@@ -167,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.
@@ -262,11 +261,6 @@ export interface InputDropDownProps {
     [key: string]: any;
   };
 
-  /**
-   * component id for element tracking.
-   */
-  componentId?: string;
-
   /**
    * Optional. Represents the style of the InputDropDown component.
    */