@momo-kits/foundation 0.89.4-react-native.0.74.1 → 0.89.4-tracking.15

package/IconButton/index.tsx

@@ -9,6 +9,11 @@ import {ApplicationContext} 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 {
   /**
@@ -26,6 +31,10 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
+
+  params?: any;
+
+  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -33,9 +42,12 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -121,13 +133,24 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'IconButton',
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId,
+        componentValue: formatComponentName(icon),
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Image/index.tsx

@@ -1,13 +1,12 @@
 import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-
+import FastImage 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 FastImage from 'react-native-fast-image';
 
 type Status = 'success' | 'loading' | 'error';
 

package/Input/Input.tsx

@@ -13,6 +13,11 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
+import {formatComponentName} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
   (
@@ -39,6 +44,8 @@ const Input = forwardRef(
       onPressIcon,
       secureTextEntry,
       style,
+      params,
+      componentId,
       ...props
     }: InputProps,
     ref,
@@ -48,6 +55,7 @@ const Input = forwardRef(
     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();
@@ -180,11 +188,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,11 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
+import {formatComponentName} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
   value,
@@ -26,10 +31,13 @@ const InputDropDown = ({
   leadingIcon,
   leadingIconColor,
   style,
+  params,
+  componentId,
   ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
+  const screenInfo = useContext<any>(ScreenContext);
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -104,10 +112,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,11 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+import {formatComponentName} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
   (
@@ -36,7 +41,9 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
+      params,
       defaultValue = '',
+      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -44,6 +51,7 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     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, 'đ');
@@ -151,11 +159,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,11 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
+import {formatComponentName} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -78,7 +83,9 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
+      params,
       style,
+      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -88,6 +95,7 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
+    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -221,13 +229,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

@@ -13,6 +13,10 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const InputSearch = forwardRef(
   (
     {
@@ -28,7 +32,9 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-        hasColorBG = true,
+      hasColorBG = true,
+      params,
+      componentId,
       ...props
     }: InputSearchProps,
     ref,
@@ -37,6 +43,7 @@ const InputSearch = forwardRef(
     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);
@@ -117,33 +124,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,
-              borderColor: theme.colors.background.surface,
-            }
-          ]}>
-          <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/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 {}
@@ -245,7 +255,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};

package/Input/styles.ts

@@ -100,7 +100,6 @@ export default StyleSheet.create({
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
-    borderWidth: 1,
     paddingHorizontal: Spacing.S,
     alignItems: 'center',
     flex: 1,

package/Layout/Screen.tsx

@@ -8,7 +8,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {useHeaderHeight} from '@react-navigation/elements';
+import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import React, {
   forwardRef,

package/Layout/index.ts

@@ -7,7 +7,6 @@ import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
 import ItemSectionList from './ItemSectionList';
-import Screen from './Screen';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -25,5 +24,4 @@ export {
   Item,
   ItemList,
   ItemSectionList,
-  Screen,
 };

package/Loader/DotLoader.tsx

@@ -14,7 +14,7 @@ const DotLoader: FC<LoaderProps> = ({color}) => {
     color ?? theme.colors.primary,
   ];
 
-  let source: any = require('../Assets/DotAnimation.json');
+  let source: any = animation;
   source.assets[0].layers[0].shapes[0].it.forEach((item: any) => {
     if (item.ty === 'fl' && item.c) {
       item.c.k.forEach((fillItem: any, index: number) => {

package/Loader/Spinner.tsx

@@ -1,5 +1,6 @@
 import React, {FC, useContext} from 'react';
 import AnimatedLottieView from 'lottie-react-native';
+import animation from '../Assets/SpinnerAnimation.json';
 import {hexToRGBA} from './utils';
 import {ApplicationContext} from '../Application';
 import {LoaderProps} from './types';
@@ -7,7 +8,7 @@ import {LoaderProps} from './types';
 const Spinner: FC<LoaderProps> = ({color}) => {
   const {theme} = useContext(ApplicationContext);
 
-  let source: any = require('../Assets/DotAnimation.json');
+  let source: any = animation;
   source.assets[0].layers.forEach((layer: any) => {
     layer.shapes[0].it.forEach((item: any) => {
       if (item.ty === 'fl' && item.c) {

package/Radio/index.tsx

@@ -6,6 +6,11 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
+import {formatNameLength} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -14,8 +19,11 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
+  params,
+  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -38,26 +46,38 @@ const Radio: FC<RadioProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-      ]}>
-      <View
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId,
+        componentLabel: formatNameLength(label || ''),
+        componentValue: value,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        onPress={onChange}
+        disabled={disabled}
         style={[
-          styles.radio,
-          checkBoxStyle,
-          disabledStyle,
-          {marginRight: label ? Spacing.XS : 0},
-        ]}
-      />
-      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-    </TouchableOpacity>
+          style,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        ]}>
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            {marginRight: label ? Spacing.XS : 0},
+          ]}
+        />
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -35,4 +35,9 @@ export type RadioProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
+
+
+  params?: any
+
+  componentId?: string
 };