@momo-kits/foundation 0.89.3-beta.1 → 0.89.3-beta.4

package/Button/index.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
+
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -15,10 +16,6 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -73,10 +70,6 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
-
-  params?: any;
-
-  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -89,8 +82,6 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
-  params,
-  componentId,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -103,8 +94,6 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
-
-  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -302,29 +291,20 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: loading ? "loading" :  type === 'disabled' ? 'disabled' : 'enabled',
-        componentId,
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        {renderLeading()}
-        {renderTitle()}
-        {renderTrailing()}
-        {gradientPros && (
-          <AnimationLinear {...gradientPros} style={styles.gradientView} />
-        )}
-        {gradientPros && <View style={styles.strokeView} />}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      accessibilityLabel={`Button/${title}`}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      {renderLeading()}
+      {renderTitle()}
+      {renderTrailing()}
+      {gradientPros && (
+        <AnimationLinear {...gradientPros} style={styles.gradientView} />
+      )}
+      {gradientPros && <View style={styles.strokeView} />}
+    </TouchableOpacity>
   );
 };
 

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,
@@ -17,11 +13,8 @@ const CheckBox: FC<CheckBoxProps> = ({
   style,
   label,
   indeterminate,
-  params, componentId,
-
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -42,16 +35,6 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-      <ScreenContext.Provider
-          value={{
-            ...screenInfo,
-            componentName: 'Button',
-            params,
-            state: disabled ? 'disabled' : 'filled',
-            componentId,
-              componentValue: indeterminate ? "indetermine" : value,
-            action: 'click',
-          }}>
     <TouchableOpacity
       accessibilityLabel={`CheckBox/${label}/${value}`}
       activeOpacity={0.8}
@@ -73,7 +56,6 @@ const CheckBox: FC<CheckBoxProps> = ({
       </View>
       {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
     </TouchableOpacity>
-      </ScreenContext.Provider>
   );
 };
 

package/CheckBox/types.ts

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

package/Icon/index.tsx

@@ -1,5 +1,6 @@
 import React, {useContext} from 'react';
 import IconSources from '../Assets/icon.json';
+import IconBankSources from '../Assets/icon_bank.json';
 import {IconProps} from './types';
 import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
@@ -37,4 +38,4 @@ Icon.defaultProps = {
   size: 24,
 };
 
-export {Icon, IconSources};
+export {Icon, IconSources, IconBankSources};

package/IconButton/index.tsx

@@ -10,10 +10,6 @@ import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
    * Represents the name or key of the icon to be displayed on the IconButton.
@@ -30,10 +26,6 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
-
-  params?: any;
-
-  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -41,12 +33,9 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
-  params,
-  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -132,23 +121,14 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'IconButton',
-        params,
-        state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentId,
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        <Icon size={iconSize} source={icon} color={getIconColor()} />
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      accessibilityLabel={`IconButton/${icon}`}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
+    </TouchableOpacity>
   );
 };
 

package/Input/Input.tsx

@@ -14,10 +14,6 @@ import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const Input = forwardRef(
   (
     {
@@ -42,8 +38,6 @@ const Input = forwardRef(
       fontWeight = 'Regular',
       onPressIcon,
       style,
-      params,
-      componentId,
       ...props
     }: InputProps,
     ref,
@@ -53,7 +47,6 @@ const Input = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
-    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -166,35 +159,13 @@ 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 (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'Input',
-          params,
-          state: inputState,
-          componentId,
-        }}>
-        <View
-          style={[style, styles.wrapper]}
-          accessibilityLabel={accessibilityLabel}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <View
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
   },
 );

package/Input/InputMoney.tsx

@@ -19,10 +19,6 @@ import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const InputMoney = forwardRef(
   (
     {
@@ -40,9 +36,7 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
-      params,
       defaultValue = '',
-      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -51,7 +45,6 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${floatingValue}`;
-    const screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -104,7 +97,6 @@ const InputMoney = forwardRef(
         iconTintColor = disabledColor;
       }
 
-
       return (
         <View
           style={[
@@ -161,34 +153,13 @@ 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 (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputMoney',
-          params,
-          state: inputState,
-          componentId,
-        }}>
-        <View
-          style={[style, styles.wrapper]}
-          accessibilityLabel={accessibilityLabel}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <View
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -22,10 +22,6 @@ import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
   const {theme} = useContext(ApplicationContext);
@@ -82,9 +78,7 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
-      params,
       style,
-      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -95,7 +89,6 @@ const InputOTP = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
     const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
-    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -230,23 +223,14 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputOTP',
-          params,
-          state: 'enabled',
-          componentId,
-        }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onFocusInput}
-          style={[style, styles.otpWrapper]}
-          accessibilityLabel={accessibilityLabel}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </TouchableOpacity>
-      </ScreenContext.Provider>
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}
+        accessibilityLabel={accessibilityLabel}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -13,10 +13,6 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const InputSearch = forwardRef(
   (
     {
@@ -33,8 +29,6 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      params,
-      componentId,
       ...props
     }: InputSearchProps,
     ref,
@@ -44,7 +38,6 @@ const InputSearch = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${placeholder}`;
-    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -125,58 +118,36 @@ const InputSearch = forwardRef(
         </View>
       );
     };
-
-      let inputState = "empty"
-
-      if (focused) {
-          inputState = 'focus'
-      }
-
-      if (value && value?.length > 0 ) {
-          inputState = 'filled'
-      }
-
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputSearch',
-          params,
-          state: inputState,
-          componentId,
-        }}>
+      <View
+        style={[style, styles.searchInputContainer]}
+        accessibilityLabel={accessibilityLabel}>
         <View
-          style={[style, styles.searchInputContainer]}
-          accessibilityLabel={accessibilityLabel}>
-          <View
-            style={[
-              styles.searchInputWrapper,
-              {
-                backgroundColor: theme.colors.background.surface,
-                borderColor: theme.colors.background.surface,
-              },
-              showBorder && {borderColor: theme.colors.border.default},
-              focused && {borderColor: theme.colors.primary},
-            ]}>
-            <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>
-          )}
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor: theme.colors.background.surface,
+              borderColor: theme.colors.background.surface,
+            },
+            showBorder && {borderColor: theme.colors.border.default},
+            focused && {borderColor: theme.colors.primary},
+          ]}>
+          <Icon
+            source={'navigation_search'}
+            size={24}
+            color={theme.colors.text.hint}
+          />
+          {renderInputView()}
+          {renderIconView()}
         </View>
-      </ScreenContext.Provider>
+        {showButtonText && (
+          <TouchableOpacity onPress={onPressButtonText}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
+              {buttonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
     );
   },
 );

package/Input/index.tsx

@@ -80,9 +80,6 @@ export interface InputProps extends TextInputProps {
   fontWeight?: 'Regular' | 'Bold';
 
   onPressIcon?: () => void;
-
-  params?: any;
-  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -129,10 +126,6 @@ export interface InputSearchProps extends TextInputProps {
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
   icon?: string;
-
-  params?: any;
-
-  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Radio/index.tsx

@@ -6,9 +6,6 @@ import {Text} from '../Text';
 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,
@@ -16,10 +13,9 @@ const Radio: FC<RadioProps> = ({
   disabled,
   onChange,
   label,
-  style,  params, componentId,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -42,16 +38,6 @@ const Radio: FC<RadioProps> = ({
   }
 
   return (
-      <ScreenContext.Provider
-          value={{
-              ...screenInfo,
-              componentName: 'Button',
-              params,
-              state: disabled ? 'disabled' : 'enabled',
-              componentId,
-              componentValue: value,
-              action: 'click',
-          }}>
     <TouchableOpacity
       accessibilityLabel={`Radio/${label}/${value}`}
       onPress={onChange}
@@ -73,7 +59,6 @@ const Radio: FC<RadioProps> = ({
       />
       {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
     </TouchableOpacity>
-      </ScreenContext.Provider>
   );
 };
 

package/Radio/types.ts

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

package/Switch/index.tsx

@@ -1,19 +1,11 @@
-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,
-      params, componentId,
-  } = props;
-    const screenInfo = useContext<any>(ScreenContext);
-
+  const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -23,16 +15,6 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-      <ScreenContext.Provider
-          value={{
-              ...screenInfo,
-              componentName: 'Button',
-              params,
-              state: disabled ? 'disabled' : 'enabled',
-              componentId,
-              componentValue: value,
-              action: 'click',
-          }}>
     <TouchableOpacity
       accessibilityLabel={'Switch'}
       disabled={disabled}
@@ -46,7 +28,6 @@ const Switch: FC<SwitchProps> = props => {
         <View style={[styles.circleSmall, {backgroundColor}]} />
       </View>
     </TouchableOpacity>
-      </ScreenContext.Provider>
   );
 };
 

package/Switch/types.ts

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