@momo-kits/foundation 0.75.1-beta.9 → 0.75.3-beta.0

package/Application/NavigationContainer.tsx

@@ -0,0 +1,121 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {
+  NavigationContainer as ReactNavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+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 kitLocalization from '../Assets/language.json';
+
+const Stack = createStackNavigator();
+
+const NavigationContainer: React.FC<NavigationContainerProps> = ({
+  screen,
+  theme,
+  options,
+  maxApi,
+  localization,
+  initialParams,
+}) => {
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
+  const [showGrid, setShowGrid] = useState(false);
+  const config = useRef<any>();
+
+  /**
+   * handle mini language & listen change
+   * engine only shake to enable grid view
+   */
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      'onChangeGrid',
+      enable => {
+        setShowGrid(!!enable);
+      },
+    );
+
+    return () => {
+      subscription?.remove?.();
+    };
+  }, []);
+
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
+
+  /**
+   * translate
+   * @param key
+   */
+  const translate = (key: string) => {
+    const language: 'vi' | 'en' = 'vi';
+    const mergedLocalization: LocalizationObject = {
+      vi: {...localization?.vi, ...kitLocalization.vi},
+      en: {...localization?.en, ...kitLocalization.en},
+    };
+    return mergedLocalization?.[language]?.[key] || key;
+  };
+
+  return (
+    <SafeAreaProvider>
+      <ApplicationContext.Provider
+        value={{
+          navigator: navigator.current,
+          config: config.current,
+          theme,
+          showGrid,
+          translate,
+        }}>
+        <ReactNavigationContainer
+          theme={{
+            ...theme,
+            colors: {
+              ...theme.colors,
+              background: theme.colors.background.default,
+              card: theme.colors.background.surface,
+              text: theme.colors.text.default,
+              border: theme.colors.border.default,
+              notification: theme.colors.error.primary,
+            },
+          }}
+          ref={navigator.current?.ref}
+          onReady={() => {
+            isReady.current = true;
+          }}
+          independent={true}>
+          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen, initialParams}}
+              options={{...getStackOptions(), ...options}}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={getDialogOptions()}
+              initialParams={{screen}}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{screen}}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </ApplicationContext.Provider>
+    </SafeAreaProvider>
+  );
+};
+
+export {ApplicationContext, NavigationContainer};

package/Application/Navigator.ts

@@ -0,0 +1,151 @@
+import {CommonActions, StackActions} from '@react-navigation/native';
+import {
+  BottomSheetParams,
+  HeaderToolkitProps,
+  ModalParams,
+  ScreenParams,
+} from './types';
+
+class Navigator {
+  ref?: any;
+  isReady?: any;
+  toolkitConfig?: HeaderToolkitProps;
+  maxApi?: any;
+  dismissData?: any;
+  toolkitCallback?: (item: any) => void;
+
+  constructor(navigation: any, isReady: any) {
+    this.ref = navigation;
+    this.isReady = isReady;
+  }
+
+  /**
+   * push new stack screen
+   * @param params
+   */
+  push = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Stack', params));
+    }
+  };
+
+  /**
+   * replace current screen with new screen
+   * @param params
+   */
+  replace = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.replace('Stack', params));
+    }
+  };
+  /**
+   * pop to dismiss a screen
+   * @param count
+   */
+  pop = (count?: number) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    }
+  };
+
+  /**
+   * present a new screen, show from bottom iOS
+   * @param params
+   */
+  present = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Dialog', params));
+    }
+  };
+
+  /**
+   * show a modal popup
+   * @param params
+   */
+  showModal = (params: ModalParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Modal', params));
+    }
+  };
+
+  /**
+   * show a bottom sheet
+   * @param params
+   */
+  showBottomSheet = (params: BottomSheetParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        StackActions.push('Modal', {
+          ...params,
+          isBottomSheet: true,
+        }),
+      );
+    }
+  };
+
+  /**
+   * pop all screen route
+   */
+  popToTop = () => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.popToTop());
+    }
+  };
+
+  /**
+   * navigate
+   * @param name
+   * @param params
+   */
+  navigate = (name: string, params: any) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.navigate({
+          name,
+          params,
+        }),
+      );
+    }
+  };
+
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
+  reset = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            {
+              name: 'Stack',
+              key: `Stack_${new Date().getTime()}`,
+              params,
+            },
+          ],
+        }),
+      );
+    }
+  };
+
+  /**
+   * 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,
+  ) => {
+    this.toolkitCallback = callback;
+  };
+}
+
+export default Navigator;

package/Application/StackScreen.tsx

@@ -0,0 +1,148 @@
+import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
+import {ScreenParams} from './types';
+import Navigation from './Navigation';
+import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
+import {GridSystem} from '../Layout';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager} from 'react-native';
+
+const StackScreen: React.FC<ScreenParams> = props => {
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const startTime = useRef(Date.now());
+  const endTime = useRef(Date.now());
+  const timeLoad = useRef(0);
+  const timeInteraction = useRef(0);
+  const timeoutLoad = useRef<any>();
+  const tracked = useRef<any>({
+    releaseLoad: undefined,
+    releaseInteraction: undefined,
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+  });
+  const interaction = useRef<any>();
+  const context = useContext<any>(MiniAppContext);
+
+  const {screen: Component, options, initialParams} = props.route.params;
+  const navigation = new Navigation(props.navigation, theme);
+  const heightHeader = useHeaderHeight();
+
+  const data = {
+    ...initialParams,
+    ...props.route.params,
+    navigation,
+  };
+
+  delete data.screen;
+  delete data.initialParams;
+
+  const screenName = Component?.name || Component?.type?.name || 'Invalid';
+
+  /**
+   * set options for screen
+   */
+  useLayoutEffect(() => {
+    if (options) {
+      navigation.setOptions(options);
+    }
+  }, [options]);
+
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    }
+
+    navigator?.maxApi?.of?.({screenName});
+
+    tracked.current.timeoutLoad = setTimeout(() => {
+      onScreenLoad();
+    }, 5000);
+    tracked.current.timeoutInteraction = setTimeout(() => {
+      onScreenInteraction();
+    }, 5000);
+
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
+    };
+  }, []);
+
+  /**
+   * tracking for screen load
+   */
+  const onScreenLoad = () => {
+    clearTimeout(tracked.current.timeoutLoad);
+    if (!tracked.current?.releaseLoad) {
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'load',
+        duration: timeLoad.current,
+      });
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_load_time ${timeLoad.current}`,
+      });
+      tracked.current.releaseLoad = true;
+    }
+  };
+
+  /**
+   * tracking for screen load
+   */
+  const onScreenInteraction = () => {
+    clearTimeout(tracked.current.timeoutInteraction);
+    if (!tracked.current?.releaseInteraction) {
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        duration: timeInteraction.current - timeLoad.current,
+      });
+
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
+      });
+      tracked.current.releaseInteraction = true;
+    }
+  };
+
+  return (
+    <ScreenContext.Provider
+      value={{
+        screenName,
+        onElementLoad: () => {
+          endTime.current = Date.now();
+          interaction.current?.cancel?.();
+          interaction.current = InteractionManager.runAfterInteractions(() => {
+            timeInteraction.current = Date.now() - startTime.current;
+          });
+          clearTimeout(timeoutLoad.current);
+          timeoutLoad.current = setTimeout(() => {
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+            }
+          }, 2000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
+      />
+      {showGrid && <GridSystem />}
+    </ScreenContext.Provider>
+  );
+};
+
+export default StackScreen;

package/Application/index.ts

@@ -0,0 +1,37 @@
+import {Platform} from 'react-native';
+import {NavigationContainer} from './NavigationContainer';
+import Screen from '../Layout/Screen';
+import {
+  HeaderAnimated,
+  HeaderBackground,
+  HeaderCustom,
+  HeaderRightAction,
+  HeaderTitle,
+  NavigationButton,
+} from './Components';
+import BottomTab from './BottomTab';
+import {createContext} from 'react';
+import {defaultContext} from '../Consts';
+
+const Context = createContext({});
+const ApplicationContext = createContext(defaultContext);
+
+const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
+const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
+
+export {
+  ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+  ComponentContext,
+  NavigationContainer,
+  Screen,
+  BottomTab,
+  NavigationButton,
+  HeaderTitle,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderCustom,
+  HeaderAnimated,
+};

package/{Navigation → Application}/types.ts

@@ -1,7 +1,11 @@
-import {Animated, ScrollViewProps, ViewProps} from 'react-native';
+import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
+import Navigation from './Navigation';
+import Navigator from './Navigator';
+
+type Screen = React.ComponentType<NavigationScreenProps>;
 
 export type Theme = {
   dark: boolean;
@@ -59,71 +63,109 @@ export type Theme = {
 };
 
 export type Context = {
+  [key: string]: any;
   theme: Theme;
   navigator?: Navigator;
+  showGrid?: boolean;
+  translate?: (key: string) => string;
+};
+
+export type LocalizationObject = {
+  vi: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
 };
 
 export type NavigationContainerProps = {
-  screen: React.ElementType;
+  screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
+  localization?: LocalizationObject;
+  initialParams?: any;
 };
 
-export interface ScreenContainerProps extends ViewProps {
-  enableKeyboardAvoidingView?: boolean;
-  headerBackground?: string;
-  scrollable?: boolean;
-  scrollY?: Animated.Value;
-  scrollViewProps?: ScrollViewProps;
-  footerComponent?: React.ElementType;
-}
+export type NavigationScreenProps = {
+  [key: string]: any;
+  options?: NavigationOptions;
+  navigation: Navigation;
+};
 
 export type ScreenParams = {
   [key: string]: any;
-  screen: React.ElementType;
+  screen: Screen;
   options?: NavigationOptions;
 };
 
-export interface ModalParams extends ScreenParams {
+export type ModalParams = {
   [key: string]: any;
-  screen: React.ElementType;
-  onDismiss?: (mounted?: boolean) => void;
+  screen: Screen;
+  onDismiss?: () => void;
   barrierDismissible?: boolean;
-}
+};
 
-export interface BottomSheetParams extends ScreenParams {
+export type BottomSheetParams = {
   [key: string]: any;
-  onDismiss?: () => void;
-}
+  screen: Screen;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
+  surface?: boolean;
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  dragOnContent?: boolean;
+};
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
-  backgroundColor?: string;
   useBorder?: boolean;
   onPress: () => void;
+  badgeType?: 'dot' | 'number';
+  badgeValue?: number;
   accessibilityLabel?: string;
 };
 
-export type NavigationOptions = {
+export type PinnedToolType = {
+  key: string;
+  badgeValue?: number;
+  badgeType?: 'number' | 'dot';
+};
+
+export type RuntimeToolType = {
+  title: {vi: string; en: string};
+  icon: string;
+  key: string;
+};
+
+export interface NavigationOptions extends StackNavigationOptions {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
   surface?: boolean;
-  title?: string;
-  headerTitleAlign?: 'left' | 'center';
+  hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  headerRight?: (props?: any) => React.ReactElement;
-  animatedValue?: Animated.Value;
-};
+  toolkitParams?: {
+    pinnedTool?: PinnedToolType;
+    runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
+  };
+}
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
 }
 
 export type HeaderBackgroundProps = {
   image?: string | null;
-  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
+  useSurface?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -139,19 +181,45 @@ export type TitleCustomProps = {
 export type HeaderToolkitProps = {
   [key: string]: any;
   appCode: string;
-  hidden: boolean;
-  type: string;
-  onAction?: (action: string) => void;
+  configs: any[];
 };
 
+export interface HeaderAnimatedProps extends ViewProps {
+  animatedValue: Animated.Value;
+  image: string;
+}
+
 export type BottomTabItemProps = {
+  name: string;
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
-  screen: React.ComponentType<any>;
+  badgeLabel?: string | number;
+  screen: Screen;
+  options: NavigationOptions;
 };
 
 export type BottomTabProps = {
+  nested?: boolean;
   tabs: BottomTabItemProps[];
+  initialRouteName?: string;
+  navigation: Navigation;
+  listeners?: {
+    tabPress?: any;
+    focus?: any;
+  };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
+};
+
+export type AnimatedHeader = {
+  type: 'default' | 'surface';
+  component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
 };