@momo-kits/foundation 0.89.6 → 0.92.1-beta.16

package/Input/Input.tsx

@@ -1,6 +1,7 @@
 import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
+  Platform,
   TextInput,
   TextInputFocusEventData,
   TouchableOpacity,
@@ -13,6 +14,16 @@ 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(
   (
@@ -38,16 +49,21 @@ const Input = forwardRef(
       fontWeight = 'Regular',
       onPressIcon,
       secureTextEntry,
+      keyboardType,
       style,
+      params,
+      componentId,
       ...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();
@@ -106,6 +122,21 @@ 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;
@@ -113,6 +144,13 @@ const Input = forwardRef(
         iconTintColor = disabledColor;
       }
 
+      if (secureTextEntry) {
+        keyboardType = Platform.select({
+          ios: 'ascii-capable',
+          android: 'visible-password',
+        });
+      }
+
       return (
         <View
           style={[
@@ -140,7 +178,8 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              editable={!disabled}
+              {...accessibilityID}
+              editable={props.editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
@@ -160,6 +199,7 @@ const Input = forwardRef(
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
+              keyboardType={keyboardType}
             />
           </View>
           <View style={styles.iconView}>
@@ -180,11 +220,34 @@ const Input = forwardRef(
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
     return (
-      <View style={[style, styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'Input',
+          params,
+          componentLabel: formatComponentName(floatingValue || ''),
+          state: inputState,
+          componentId,
+        }}>
+        <View style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputDropDown.tsx

@@ -7,6 +7,16 @@ 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,
@@ -26,10 +36,14 @@ const InputDropDown = ({
   leadingIcon,
   leadingIconColor,
   style,
+  params,
+  componentId,
   ...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) {
@@ -45,6 +59,19 @@ 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;
@@ -80,9 +107,9 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
+              {...accessibilityID}
               onPressIn={onPress}
               editable={false}
-              textAlignVertical="top"
               style={[
                 styles.input,
                 {
@@ -104,10 +131,22 @@ const InputDropDown = ({
   };
 
   return (
-    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'InputOTP',
+        params,
+        state: 'enabled',
+        componentLabel: formatComponentName(floatingValue || ''),
+        componentId,
+      }}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={[style, full && styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Input/InputMoney.tsx

@@ -18,6 +18,16 @@ 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(
   (
@@ -36,14 +46,18 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
+      params,
       defaultValue = '',
+      componentId,
       ...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, 'đ');
@@ -89,6 +103,17 @@ 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;
@@ -114,8 +139,8 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
-              textAlignVertical="top"
               ref={inputRef}
               keyboardType={'number-pad'}
               style={[
@@ -151,11 +176,34 @@ const InputMoney = forwardRef(
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
     return (
-      <View style={[style, styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputMoney',
+          params,
+          componentLabel: formatComponentName(floatingValue || ''),
+          state: inputState,
+          componentId,
+        }}>
+        <View style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -21,6 +21,16 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} 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;
@@ -78,16 +88,21 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
+      params,
       style,
+      componentId,
       ...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) => {
@@ -180,6 +195,12 @@ const InputOTP = forwardRef(
       );
     };
 
+    const accessibilityID = getAccessibilityID(
+      `${appId}/${code}/${screenInfo.screenName}/input_${cleanNameForTracking(
+        floatingValue,
+      )}`,
+    );
+
     const renderInputView = () => {
       return (
         <View
@@ -205,6 +226,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -221,13 +243,23 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={onFocusInput}
-        style={[style, styles.otpWrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputOTP',
+          params,
+          componentLabel: formatComponentName(floatingValue || ''),
+          state: 'enabled',
+          componentId,
+        }}>
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={onFocusInput}
+          style={[style, styles.otpWrapper]}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </TouchableOpacity>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -12,6 +12,12 @@ 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(
   (
@@ -28,15 +34,19 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-        hasColorBG = true,
+      params,
+      componentId,
+      hasColorBG = false,
       ...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);
@@ -62,6 +72,9 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
+          {...getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_search`,
+          )}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -117,33 +130,56 @@ const InputSearch = forwardRef(
       );
     };
 
-    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
+    let inputState = 'empty';
+
+    if (focused) {
+      inputState = 'focus';
+    }
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+
+    const backgroundColor = hasColorBG
+      ? theme.colors.background.default
+      : theme.colors.background.surface;
 
     return (
-      <View style={[style, styles.searchInputContainer]}>
-        <View
-          style={[
-            styles.searchInputWrapper,
-            {
-              backgroundColor,
-            }
-          ]}>
-          <Icon
-            source={'navigation_search'}
-            size={24}
-            color={theme.colors.text.hint}
-          />
-          {renderInputView()}
-          {renderIconView()}
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputSearch',
+          params,
+          state: inputState,
+          componentId,
+        }}>
+        <View style={[style, styles.searchInputContainer]}>
+          <View
+            style={[
+              styles.searchInputWrapper,
+              {
+                backgroundColor,
+              },
+            ]}>
+            <Icon
+              source={'navigation_search'}
+              size={24}
+              color={theme.colors.text.hint}
+            />
+            {renderInputView()}
+            {renderIconView()}
+          </View>
+          {showButtonText && (
+            <TouchableOpacity onPress={onPressButtonText}>
+              <Text
+                typography={'action_default_bold'}
+                style={styles.textButton}>
+                {buttonText}
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
-        {showButtonText && (
-          <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default_bold'} style={styles.textButton}>
-              {buttonText}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -18,6 +18,12 @@ 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(
   (
@@ -43,6 +49,8 @@ const InputTextArea = forwardRef(
     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>();
@@ -88,6 +96,20 @@ 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={[
@@ -109,6 +131,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
+                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"

package/Input/index.tsx

@@ -80,6 +80,9 @@ export interface InputProps extends TextInputProps {
   fontWeight?: 'Regular' | 'Bold';
 
   onPressIcon?: () => void;
+
+  params?: any;
+  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -121,7 +124,14 @@ export interface InputSearchProps extends TextInputProps {
    */
   icon?: string;
 
-  hasColorBG?: boolean
+  /**
+   *
+   */
+  hasColorBG?: boolean;
+
+  params?: any;
+
+  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -141,6 +151,8 @@ export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
    * 'number' - The OTP input will be treated as a number.
    */
   dataType?: 'string' | 'number';
+
+  floatingValue: string;
 }
 
 export type CaretProps = {
@@ -245,7 +257,22 @@ export interface InputDropDownProps {
    */
   leadingIconColor?: string;
 
-  style: ViewStyle | ViewStyle[];
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: {
+    [key: string]: any;
+  };
+
+  /**
+   * component id for element tracking.
+   */
+  componentId?: string;
+
+  /**
+   * Optional. Represents the style of the InputDropDown component.
+   */
+  style?: ViewStyle | ViewStyle[];
 }
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};