@momo-kits/foundation 0.151.2-beta.1 → 0.152.1-beta.1

package/Application/StackScreen.tsx

@@ -3,9 +3,10 @@ import { Alert, InteractionManager } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
-import { ApplicationContext, MiniAppContext, ScreenContext } from './index';
+import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
 import { GridSystem } from '../Layout';
 import { version } from '../package.json';
+import { useAppState } from './utils';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -48,6 +49,7 @@ const StackScreen: React.FC<any> = props => {
   } = props.route.params;
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
+  const { isBackgroundToForeground } = useAppState();
 
   const data = {
     ...initialParams,
@@ -140,29 +142,31 @@ const StackScreen: React.FC<any> = props => {
   }, []);
 
   const onScreenNavigated = (pre: string, current: string) => {
-    const item: any = {
-      preScreenName: pre,
-      screenName: current,
-      componentName: 'Screen',
-      state: 'navigated',
-      action: tracking.current?.mounted ? 'back' : 'push',
-    };
+    if (!isBackgroundToForeground) {
+      const item: any = {
+        preScreenName: pre,
+        screenName: current,
+        componentName: 'Screen',
+        state: 'navigated',
+        action: tracking.current?.mounted ? 'back' : 'push',
+      };
+
+      context?.autoTracking?.({
+        ...context,
+        ...item,
+      });
 
-    context?.autoTracking?.({
-      ...context,
-      ...item,
-    });
-
-    tracking.current.mounted = true;
-
-    /**
-     * debug toast
-     */
-    navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${screenName} screen_navigated`,
-      type: 'ERROR',
-    });
+      tracking.current.mounted = true;
+
+      /**
+       * debug toast
+       */
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${screenName} screen_navigated`,
+        type: 'ERROR',
+      });
+    }
   };
 
   /**

package/Application/WidgetContainer.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
-import { ApplicationContext, MiniAppContext } from './index';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {

package/Application/index.ts

@@ -1,48 +1,29 @@
-import { Platform } from 'react-native';
-import { createContext } from 'react';
 import { NavigationContainer } from './NavigationContainer';
 import { WidgetContainer } from './WidgetContainer';
 import Localize from './Localize';
 import BottomTab from './BottomTab';
-import { defaultContext } from '../Consts';
-import {
-  HeaderAnimated,
-  HeaderBackground,
-  HeaderTitle,
-  NavigationButton,
-} from './Components';
-import { setAutomationID, useComponentId, exportHeaderTitle } from './utils';
-import Navigation from './Navigation';
-import Navigator from './Navigator';
 
-const Context = createContext({});
-const ApplicationContext = createContext(defaultContext);
+export * from './Components/BackgroundImageView';
+export * from './Components/HeaderAnimated';
+export * from './Components/HeaderBackground';
+export * from './Components/HeaderExtendHeader';
+export * from './Components/HeaderLeft';
+export * from './Components/HeaderRight';
+export * from './Components/HeaderTitle';
+export * from './Components/NavigationButton';
+export * from './Components/SearchHeader';
 
-const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
-const ScreenContext = (Platform as any).ScreenContext ?? Context;
-const ComponentContext = (Platform as any).ComponentContext ?? Context;
-const SkeletonContext = createContext({ loading: false });
-const TrackingScopeContext = createContext<{ scopeName?: string }>({
-  scopeName: undefined,
-});
+import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
+import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 export {
-  ApplicationContext,
-  MiniAppContext,
-  ScreenContext,
-  ComponentContext,
-  SkeletonContext,
   NavigationContainer,
   WidgetContainer,
   Localize,
-  HeaderTitle,
-  HeaderBackground,
-  NavigationButton,
   BottomTab,
-  HeaderAnimated,
   setAutomationID,
   useComponentId,
-  TrackingScopeContext,
   Navigation,
   Navigator,
   exportHeaderTitle,

package/Application/types.ts

@@ -8,11 +8,48 @@ import {
   ViewStyle,
 } from 'react-native';
 import { PopupNotifyProps } from '../Popup/types';
-import Localize from './Localize';
-import Navigation from './Navigation';
-import Navigator from './Navigator';
 import { InputRef, InputSearchProps } from '../Input';
 
+export type NavigationProps = {
+  context: any;
+  setOptions: (params: NavigationOptions) => void;
+};
+
+export type NavigatorProps = {
+  ref?: any;
+  isReady?: any;
+  isWidget?: any;
+  maxApi?: any;
+  dismissData?: any;
+  push: (params: ScreenParams) => void;
+  replace: (params: ScreenParams) => void;
+  pop: (count?: number) => void;
+  present: (params: ScreenParams) => void;
+  showModal: (params: ModalParams, onError?: (error: string) => void) => void;
+  showBottomSheet: (
+    params: BottomSheetParams,
+    onError?: (error: string) => void,
+  ) => void;
+  popToTop: () => void;
+  navigate: (name: string) => void;
+  reset: (params: ScreenParams) => void;
+  setDismissData: (data: any) => void;
+  setCurrentContext: (context: {
+    code?: string;
+    name?: { vi: string; en: string };
+    description?: { vi: string; en: string };
+    icon?: string;
+  }) => void;
+};
+
+export type LocalizeProps = {
+  getCurrentLanguage: 'en' | 'vi';
+  getAssets: LocalizationObject;
+  translate: (key: string) => string;
+  translateData: (data: { vi: string; en: string }) => string;
+  addTranslations: (translations: LocalizationObject) => void;
+};
+
 export type Theme = {
   dark: boolean;
   colors: {
@@ -72,7 +109,7 @@ export type Theme = {
 export type Context = {
   [key: string]: any;
   theme: Theme;
-  navigator?: Navigator;
+  navigator?: NavigatorProps;
   showGrid?: boolean;
   translate?: (data: string | { vi: string; en: string }) => string;
 };
@@ -113,7 +150,7 @@ export type NavigationContainerProps = {
   theme?: Theme;
   maxApi: any;
   initialParams?: any;
-  localize: Localize;
+  localize: LocalizeProps;
   features: FeaturesFlag;
 };
 
@@ -121,13 +158,13 @@ export type WidgetContainerProps = {
   widget: React.ComponentType<any>;
   theme?: Theme;
   maxApi: any;
-  localize: Localize;
+  localize: LocalizeProps;
 };
 
 export type NavigationScreenProps = {
   [key: string]: any;
   options?: NavigationOptions;
-  navigation: Navigation;
+  navigation: NavigationProps;
 };
 
 export type ScreenParams = {
@@ -274,7 +311,7 @@ export type BottomTabProps = {
   nested?: boolean;
   tabs: BottomTabItemProps[];
   initialRouteName?: string;
-  navigation: Navigation;
+  navigation: NavigationProps;
   listeners?: {
     tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
     focus?: (e: EventArg<'focus', false, unknown>) => void;

package/Application/utils.tsx

@@ -1,19 +1,20 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {
-  HeaderBackground,
-  HeaderLeft,
-  HeaderRight,
-  HeaderTitle,
-  TitleCustom,
-} from './Components';
-import { HeaderTitleProps, NavigationOptions } from './types';
+import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { Animated, Platform } from 'react-native';
-import { MiniAppContext, ScreenContext, TrackingScopeContext } from './index';
+import { Animated, AppState, Platform } from 'react-native';
+import {
+  MiniAppContext,
+  ScreenContext,
+  TrackingScopeContext,
+} from '../Context';
+import { HeaderTitle, TitleCustom } from './Components/HeaderTitle';
+import { HeaderBackground } from './Components/HeaderBackground';
+import { HeaderLeft } from './Components/HeaderLeft';
+import { HeaderRight } from './Components/HeaderRight';
 
 /**
  * default options for stack screen
@@ -197,12 +198,34 @@ const useComponentId = (componentName: string, accessibilityLabel?: string) => {
   return { componentId };
 };
 
-export const getImageName = (source: any): string => {
-  const parts = source?.uri?.split?.('/');
-  if (parts?.length > 0) {
-    return parts?.[parts.length - 1];
-  }
-  return '';
+const useAppState = () => {
+  const isBackgroundToForeground = useRef(false);
+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      isBackgroundToForeground.current = !!(
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      );
+      appState.current = nextAppState;
+
+      if (isBackgroundToForeground.current) {
+        setTimeout(() => {
+          isBackgroundToForeground.current = false;
+        }, 100);
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return {
+    isBackgroundToForeground: isBackgroundToForeground.current,
+    appState: appState.current,
+  };
 };
 
 export {
@@ -212,4 +235,5 @@ export {
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
+  useAppState,
 };

package/Badge/Badge.tsx

@@ -1,11 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
 
-import {ApplicationContext, useComponentId} from '../Application';
-import {BadgeProps} from './types';
+import { useComponentId } from '../Application';
+import { ApplicationContext } from '../Context';
+import { BadgeProps } from './types';
 import styles from './styles';
-import {Colors} from '../Consts';
-import {Text} from '../Text';
+import { Colors } from '../Consts';
+import { Text } from '../Text';
 
 const Badge: FC<BadgeProps> = ({
   label = 'Label',
@@ -13,8 +14,8 @@ const Badge: FC<BadgeProps> = ({
   backgroundColor,
   accessibilityLabel,
 }) => {
-  const {theme} = useContext(ApplicationContext);
-  const {componentId} = useComponentId('Badge', accessibilityLabel);
+  const { theme } = useContext(ApplicationContext);
+  const { componentId } = useComponentId('Badge', accessibilityLabel);
 
   const isValidatedColor = () => {
     const colorKeys = Object.keys(Colors);
@@ -53,12 +54,14 @@ const Badge: FC<BadgeProps> = ({
   return (
     <View style={[style, styles.badgeContainer]}>
       <View
-        style={[styles.badge, {backgroundColor: badgeColor}]}
-        accessibilityLabel={componentId}>
+        style={[styles.badge, { backgroundColor: badgeColor }]}
+        accessibilityLabel={componentId}
+      >
         <Text
           color={Colors.black_01}
           typography={'action_xxs_bold'}
-          accessibilityLabel={`${componentId}|text`}>
+          accessibilityLabel={`${componentId}|text`}
+        >
           {formatTitle()}
         </Text>
       </View>

package/Badge/BadgeRibbon.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { DownTail, UpTail } from './Shape';
 import styles from './styles';
 import { BadgeRibbonProps } from './types';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext } from 'react';
 import {
   Animated,
   StyleSheet,
@@ -7,19 +7,19 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import { useComponentId } from '../Application';
 import {
   ApplicationContext,
   ComponentContext,
   SkeletonContext,
-  useComponentId,
-} from '../Application';
-import {Text} from '../Text';
-import {Typography} from '../Text/types';
-import {Colors, Spacing} from '../Consts';
+} from '../Context';
+import { Text } from '../Text';
+import { Typography } from '../Text/types';
+import { Colors, Spacing } from '../Consts';
 import styles from './styles';
-import {Icon} from '../Icon';
-import {Loader} from '../Loader';
-import {Skeleton} from '../Skeleton';
+import { Icon } from '../Icon';
+import { Loader } from '../Loader';
+import { Skeleton } from '../Skeleton';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -95,27 +95,27 @@ const Button: FC<ButtonProps> = ({
   accessibilityState,
   ...rest
 }) => {
-  const {theme, config} = useContext(ApplicationContext);
+  const { theme, config } = useContext(ApplicationContext);
   const skeleton = useContext(SkeletonContext);
   const componentName = 'Button';
 
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}/${title}`,
     rest.accessibilityLabel,
   );
-  const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
+  const { gradient, color } = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
 
   if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
-      start: {x: 1, y: 0.5},
-      end: {x: 0, y: 0.5},
+      start: { x: 1, y: 0.5 },
+      end: { x: 0, y: 0.5 },
     };
   }
 
   const getSizeStyle = () => {
-    const styleSheet: {[key: string]: any} = styles;
+    const styleSheet: { [key: string]: any } = styles;
     return styleSheet[size ?? 'small'];
   };
 
@@ -126,7 +126,7 @@ const Button: FC<ButtonProps> = ({
           backgroundColor: theme.colors.background.disable,
         };
       case 'primary':
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
       case 'secondary':
         return {
           backgroundColor: theme.colors.background.surface,
@@ -150,7 +150,7 @@ const Button: FC<ButtonProps> = ({
       case 'text':
         return {};
       default:
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
     }
   };
 
@@ -256,7 +256,8 @@ const Button: FC<ButtonProps> = ({
               marginRight,
               borderRadius: Spacing.M,
             },
-          ]}>
+          ]}
+        >
           <Loader type="spinner" color={getTextColor()} />
         </View>
       );
@@ -266,8 +267,9 @@ const Button: FC<ButtonProps> = ({
         <View
           style={[
             styles.leading,
-            {width: iconSize, height: iconSize, marginRight},
-          ]}>
+            { width: iconSize, height: iconSize, marginRight },
+          ]}
+        >
           <Icon color={textColor} source={iconLeft} size={iconSize} />
         </View>
       );
@@ -287,8 +289,9 @@ const Button: FC<ButtonProps> = ({
         <View
           style={[
             styles.trailing,
-            {width: iconSize, height: iconSize, marginLeft},
-          ]}>
+            { width: iconSize, height: iconSize, marginLeft },
+          ]}
+        >
           <Icon color={textColor} source={iconRight} size={iconSize} />
         </View>
       );
@@ -298,11 +301,11 @@ const Button: FC<ButtonProps> = ({
   const buttonStyle = StyleSheet.flatten([
     getSizeStyle(),
     getTypeStyle(),
-    full && {width: '100%'},
+    full && { width: '100%' },
   ]);
 
   if (skeleton?.loading) {
-    return <Skeleton style={[buttonStyle, {paddingHorizontal: 0}]} />;
+    return <Skeleton style={[buttonStyle, { paddingHorizontal: 0 }]} />;
   }
 
   return (
@@ -312,7 +315,8 @@ const Button: FC<ButtonProps> = ({
         componentId,
         params,
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...rest}
         accessibilityLabel={componentId}
@@ -324,7 +328,8 @@ const Button: FC<ButtonProps> = ({
         }}
         disabled={type === 'disabled'}
         activeOpacity={0.5}
-        style={buttonStyle}>
+        style={buttonStyle}
+      >
         {renderLeading()}
         {renderTitle()}
         {renderTrailing()}
@@ -337,4 +342,4 @@ const Button: FC<ButtonProps> = ({
   );
 };
 
-export {Button};
+export { Button };

package/CheckBox/index.tsx

@@ -1,14 +1,11 @@
-import React, {FC, useContext} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {CheckBoxProps} from './types';
+import React, { FC, useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { CheckBoxProps } from './types';
 import styles from './styles';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
-import {Text} from '../Text';
-import {Icon} from '../Icon';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -21,15 +18,15 @@ const CheckBox: FC<CheckBoxProps> = ({
   accessibilityState,
   ...props
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
   let backgroundColor = 'transparent';
   const componentName = 'CheckBox';
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}${label ? `/${label}` : ''}`,
-    props.accessibilityLabel
+    props.accessibilityLabel,
   );
 
   if (haveValue) {
@@ -54,7 +51,8 @@ const CheckBox: FC<CheckBoxProps> = ({
         params,
         state: disabled ? 'disabled' : 'filled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         accessibilityLabel={componentId}
@@ -66,12 +64,14 @@ const CheckBox: FC<CheckBoxProps> = ({
           disabled,
           ...accessibilityState,
         }}
-        style={[style, styles.container]}>
+        style={[style, styles.container]}
+      >
         <View
           style={[
-            {borderColor, backgroundColor, borderWidth: 1},
+            { borderColor, backgroundColor, borderWidth: 1 },
             styles.checkbox,
-          ]}>
+          ]}
+        >
           {haveValue && (
             <Icon
               color={theme.colors.background.surface}
@@ -80,10 +80,14 @@ const CheckBox: FC<CheckBoxProps> = ({
             />
           )}
         </View>
-        {!!label && <Text typography={'body_default_regular'} style={styles.label}>{label}</Text>}
+        {!!label && (
+          <Text typography={'body_default_regular'} style={styles.label}>
+            {label}
+          </Text>
+        )}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };
 
-export {CheckBox};
+export { CheckBox };

package/Context/index.ts

@@ -0,0 +1,23 @@
+import { Platform } from 'react-native';
+import { createContext } from 'react';
+import { defaultContext } from '../Consts';
+
+const Context = createContext({});
+const ApplicationContext = createContext(defaultContext);
+
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
+const SkeletonContext = createContext({ loading: false });
+const TrackingScopeContext = createContext<{ scopeName?: string }>({
+  scopeName: undefined,
+});
+
+export {
+  ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+  ComponentContext,
+  SkeletonContext,
+  TrackingScopeContext,
+};

package/Divider/DashDivider.tsx

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Spacing} from '../Consts';
-import Svg, {Line} from 'react-native-svg';
+import React, { useContext } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Spacing } from '../Consts';
+import Svg, { Line } from 'react-native-svg';
 
 export interface DashDividerProps {
   /**
@@ -11,8 +11,8 @@ export interface DashDividerProps {
   style?: ViewStyle;
 }
 
-const DashDivider: React.FC<DashDividerProps> = ({style}) => {
-  const {theme} = useContext(ApplicationContext);
+const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
+  const { theme } = useContext(ApplicationContext);
   const borderColor = theme.colors.border.default;
 
   return (
@@ -24,7 +24,8 @@ const DashDivider: React.FC<DashDividerProps> = ({style}) => {
           marginVertical: Spacing.XS,
         },
         style,
-      ]}>
+      ]}
+    >
       <Svg height="1" width="100%">
         <Line
           x1="0"
@@ -42,4 +43,4 @@ const DashDivider: React.FC<DashDividerProps> = ({style}) => {
   );
 };
 
-export {DashDivider};
+export { DashDivider };