@momo-kits/foundation 0.81.43-tracking.7 → 0.81.43-tracking.9

package/Button/index.tsx

@@ -74,9 +74,9 @@ export interface ButtonProps extends TouchableOpacityProps {
    */
   onPress: () => void;
 
-  trackingParams?: any;
+  params?: any;
 
-  component_id?: string;
+  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -89,8 +89,8 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
-  trackingParams,
-  component_id,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -306,9 +306,10 @@ const Button: FC<ButtonProps> = ({
       value={{
         ...screenInfo,
         componentName: 'Button',
-        params: trackingParams,
+        params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
-        component_id,
+        componentId,
+        action: 'click',
       }}>
       <TouchableOpacity
         {...rest}

package/CheckBox/index.tsx

@@ -6,10 +6,6 @@ import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const CheckBox: FC<CheckBoxProps> = ({
   value,
   disabled,
@@ -23,7 +19,6 @@ const CheckBox: FC<CheckBoxProps> = ({
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
   let backgroundColor = theme.colors.background.surface;
-  const screenInfo = useContext<any>(ScreenContext);
 
   if (haveValue) {
     borderColor = theme.colors.primary;
@@ -40,35 +35,27 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'CheckBox',
-        params: {
-          value,
-        },
-      }}>
-      <TouchableOpacity
-        activeOpacity={0.8}
-        onPress={() => onChange?.(!value)}
-        disabled={disabled}
-        style={[style, styles.container]}>
-        <View
-          style={[
-            {borderColor, backgroundColor, borderWidth: 1},
-            styles.checkbox,
-          ]}>
-          {haveValue && (
-            <Icon
-              color={theme.colors.background.surface}
-              size={20}
-              source={iconSource}
-            />
-          )}
-        </View>
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      accessibilityLabel={`CheckBox/${label}/${value}`}
+      activeOpacity={0.8}
+      onPress={() => onChange?.(!value)}
+      disabled={disabled}
+      style={[style, styles.container]}>
+      <View
+        style={[
+          {borderColor, backgroundColor, borderWidth: 1},
+          styles.checkbox,
+        ]}>
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
+      </View>
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 

package/IconButton/index.tsx

@@ -30,6 +30,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> = ({
@@ -37,6 +41,8 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -130,9 +136,10 @@ const IconButton: React.FC<IconButtonProps> = ({
       value={{
         ...screenInfo,
         componentName: 'IconButton',
-        params: {
-          icon,
-        },
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId,
+        action: 'click',
       }}>
       <TouchableOpacity
         {...rest}

package/Input/Input.tsx

@@ -42,8 +42,8 @@ const Input = forwardRef(
       fontWeight = 'Regular',
       onPressIcon,
       style,
-      trackingParams,
-      component_id,
+      params,
+      componentId,
       ...props
     }: InputProps,
     ref,
@@ -171,9 +171,10 @@ const Input = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'Input',
-          params: trackingParams,
+          params,
           state: disabled ? 'disabled' : 'enabled',
-          component_id,
+          componentId,
+          action: 'focus',
         }}>
         <View
           style={[style, styles.wrapper]}

package/Input/InputMoney.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -34,9 +40,9 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
-      trackingParams,
+      params,
       defaultValue = '',
-      component_id,
+      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -70,6 +76,12 @@ const InputMoney = forwardRef(
       onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        setText: _onChangeText,
+      };
+    });
+
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
@@ -153,9 +165,10 @@ const InputMoney = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'InputMoney',
-          params: trackingParams,
+          params,
           state: 'enable',
-          component_id,
+          componentId,
+          action: 'focus',
         }}>
         <View
           style={[style, styles.wrapper]}

package/Input/InputOTP.tsx

@@ -82,9 +82,9 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
-      trackingParams,
+      params,
       style,
-      component_id,
+      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -234,9 +234,10 @@ const InputOTP = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'InputOTP',
-          params: trackingParams,
+          params,
           state: 'enable',
-          component_id,
+          componentId,
+          action: 'focus',
         }}>
         <TouchableOpacity
           activeOpacity={1}

package/Input/InputSearch.tsx

@@ -33,9 +33,8 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      trackingParams,
-      component_id,
-
+      params,
+      componentId,
       ...props
     }: InputSearchProps,
     ref,
@@ -131,9 +130,10 @@ const InputSearch = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'InputSearch',
-          params: trackingParams,
+          params,
           state: 'enabled',
-          component_id,
+          componentId,
+          action: 'focus',
         }}>
         <View
           style={[style, styles.searchInputContainer]}

package/Input/index.tsx

@@ -81,8 +81,8 @@ export interface InputProps extends TextInputProps {
 
   onPressIcon?: () => void;
 
-  trackingParams?: any;
-  component_id?: string;
+  params?: any;
+  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -130,9 +130,9 @@ export interface InputSearchProps extends TextInputProps {
    */
   icon?: string;
 
-  trackingParams?: any;
+  params?: any;
 
-  component_id?: string;
+  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Radio/index.tsx

@@ -7,10 +7,6 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const Radio: FC<RadioProps> = ({
   value,
   groupValue,
@@ -41,38 +37,28 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
-  const screenInfo = useContext<any>(ScreenContext);
-
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Radio',
-        params: {
-          value,
+    <TouchableOpacity
+      accessibilityLabel={`Radio/${label}/${value}`}
+      onPress={onChange}
+      disabled={disabled}
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
         },
-      }}>
-      <TouchableOpacity
-        onPress={onChange}
-        disabled={disabled}
+      ]}>
+      <View
         style={[
-          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>
+          styles.radio,
+          checkBoxStyle,
+          disabledStyle,
+          {marginRight: label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 

package/Switch/index.tsx

@@ -1,18 +1,13 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const Switch: FC<SwitchProps> = props => {
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
-  const screenInfo = useContext<any>(ScreenContext);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -20,27 +15,19 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Switch',
-        params: {
-          value,
-        },
-      }}>
-      <TouchableOpacity
-        disabled={disabled}
-        onPress={() => onChange?.(!value)}
-        style={[
-          style,
-          styles.container,
-          {backgroundColor, alignItems: circleAlign},
-        ]}>
-        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-          <View style={[styles.circleSmall, {backgroundColor}]} />
-        </View>
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      accessibilityLabel={'Switch'}
+      disabled={disabled}
+      onPress={() => onChange?.(!value)}
+      style={[
+        style,
+        styles.container,
+        {backgroundColor, alignItems: circleAlign},
+      ]}>
+      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+        <View style={[styles.circleSmall, {backgroundColor}]} />
+      </View>
+    </TouchableOpacity>
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.43-tracking.7",
+    "version": "0.81.43-tracking.9",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {