@momo-kits/foundation 0.89.2 → 0.89.3-tracking.1

package/Application/BottomTab.tsx

@@ -104,7 +104,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 left: item?.showDot ? 8 : 4,
                 top: item?.showDot ? -2 : -6,
               },
-
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />
               ),

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
@@ -6,13 +6,13 @@ import {
   NavigationContainerRef,
 } from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import {DeviceEventEmitter, NativeModules} from 'react-native';
+import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
@@ -24,41 +24,25 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   maxApi,
   localization,
 }) => {
+  const context = useContext(MiniAppContext);
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
-  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
-  const [config, setConfig] = useState<any>(undefined);
-  let assets = theme.assets;
-  if (config && theme.assets?.headerBackground) {
-    assets = {...assets, headerBackground: config.navigationBar?.headerBar};
-  }
+  const config = useRef<any>();
 
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
    */
   useEffect(() => {
-    maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
-      setLanguage(lang);
-    });
-    const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
-      setLanguage(lang);
-    });
     const subscription = DeviceEventEmitter.addListener(
       'onChangeGrid',
       enable => {
         setShowGrid(!!enable);
       },
     );
-    try {
-      const result = JSON.parse(
-        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM'),
-      );
-      setConfig(result);
-    } catch (e) {}
+
     return () => {
-      listener?.remove?.();
       subscription?.remove?.();
     };
   }, []);
@@ -73,6 +57,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param key
    */
   const translate = (key: string) => {
+    const language: 'vi' | 'en' = context?.language ?? 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},
@@ -85,14 +70,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
           value={{
-            theme: {
-              ...theme,
-              assets: assets,
-            },
             navigator: navigator.current,
+            config: config.current,
+            theme,
             showGrid,
-            language,
-            config,
             translate,
           }}>
           <ReactNavigationContainer

package/Application/Navigator.ts

@@ -109,6 +109,18 @@ class Navigator {
     );
   };
 
+  /**
+   * dismiss a feature data
+   * @param data
+   */
+  setDismissData = (data: any) => {
+    this.dismissData = data;
+  };
+
+  /**
+   * set callback function for toolkit
+   * @param callback
+   */
   setToolkitCallback = (
     callback: (item: {key: string; action: string}) => void,
   ) => {

package/Application/StackScreen.tsx

@@ -5,6 +5,10 @@ import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const context = useContext(MiniAppContext);
@@ -61,10 +65,17 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <>
+    <ScreenContext.Provider
+      value={{
+        ...context,
+        screenName: Component.name,
+        autoTracking: (data: any) => {
+          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
+        },
+      }}>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/types.ts

@@ -67,7 +67,6 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
-  language?: 'vi' | 'en';
   translate?: (key: string) => string;
 };
 

package/Button/index.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -16,6 +15,10 @@ 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 {
@@ -70,6 +73,10 @@ 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> = ({
@@ -82,6 +89,8 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -94,6 +103,8 @@ 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'];
@@ -291,20 +302,29 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <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>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: 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>
   );
 };
 

package/IconButton/index.tsx

@@ -10,6 +10,10 @@ 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.
@@ -26,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> = ({
@@ -33,9 +41,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,14 +132,23 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`IconButton/${icon}`}
-      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,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Input/Input.tsx

@@ -14,6 +14,10 @@ import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const Input = forwardRef(
   (
     {
@@ -38,6 +42,8 @@ const Input = forwardRef(
       fontWeight = 'Regular',
       onPressIcon,
       style,
+      params,
+      componentId,
       ...props
     }: InputProps,
     ref,
@@ -47,6 +53,7 @@ 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();
@@ -160,12 +167,21 @@ const Input = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'Input',
+          params,
+          state: disabled ? 'disabled' : 'enabled',
+          componentId,
+        }}>
+        <View
+          style={[style, styles.wrapper]}
+          accessibilityLabel={accessibilityLabel}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputMoney.tsx

@@ -19,6 +19,10 @@ import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const InputMoney = forwardRef(
   (
     {
@@ -36,7 +40,9 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
+      params,
       defaultValue = '',
+      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -45,6 +51,7 @@ 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, 'đ');
@@ -154,12 +161,21 @@ const InputMoney = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputMoney',
+          params,
+          state: disabled ? 'disabled' : 'enabled',
+          componentId,
+        }}>
+        <View
+          style={[style, styles.wrapper]}
+          accessibilityLabel={accessibilityLabel}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -22,6 +22,10 @@ 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);
@@ -78,7 +82,9 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
+      params,
       style,
+      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -89,6 +95,7 @@ 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) => {
@@ -223,14 +230,23 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={onFocusInput}
-        style={[style, styles.otpWrapper]}
-        accessibilityLabel={accessibilityLabel}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
+      <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>
     );
   },
 );

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(
   (
     {
@@ -29,6 +33,8 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
+      params,
+      componentId,
       ...props
     }: InputSearchProps,
     ref,
@@ -38,6 +44,7 @@ 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);
@@ -119,35 +126,46 @@ const InputSearch = forwardRef(
       );
     };
     return (
-      <View
-        style={[style, styles.searchInputContainer]}
-        accessibilityLabel={accessibilityLabel}>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputSearch',
+          params,
+          state: 'enabled',
+          componentId,
+        }}>
         <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()}
+          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>
+          )}
         </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<
@@ -126,6 +129,10 @@ 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/package.json

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