@momo-kits/foundation 0.74.2-react-native.1

package/Application/ModalScreen.tsx

@@ -0,0 +1,268 @@
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  Dimensions,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import Navigation from './Navigation';
+import {BottomSheetParams, ModalParams} from './types';
+import {Radius, Spacing, Styles} from '../Consts';
+import {
+  ApplicationContext,
+  HeaderRightAction,
+  NavigationButton,
+  NavigationContainer,
+} from './index';
+import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
+
+const ModalScreen: React.FC<any> = props => {
+  /**
+   * dismiss callback when modal | bottom sheet dismissed
+   */
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = props => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {screen, barrierDismissible} = props.route.params;
+  const Component = useRef(screen).current;
+  const navigation = new Navigation(props.navigation, theme);
+  const params = {
+    ...props.route.params,
+    navigation,
+  };
+
+  delete params.screen;
+
+  const onDismiss = () => {
+    if (barrierDismissible) {
+      return;
+    }
+    navigator?.pop();
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={Styles.flex}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <View style={styles.container}>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+        <View style={styles.modalCenterStage}>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+          <View style={styles.modalContent}>
+            <Component {...params} />
+          </View>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+        </View>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+
+const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const insets = useSafeAreaInsets();
+  const {theme, navigator} = useContext(ApplicationContext);
+  const [keyboardSnap, setKeyboardSnap] = useState(0);
+  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
+    props.route.params;
+  const Component = useRef(screen).current;
+  const navigation = new Navigation(props.navigation, theme);
+  const params = {
+    ...props.route.params,
+    navigation,
+  };
+
+  delete params.screen;
+
+  const snapPoints = useMemo(() => {
+    if (snapPoint) {
+      const current = parseInt(snapPoint) + keyboardSnap * 100;
+      return [`${current}%`];
+    }
+    return ['50%', '70%', '90%'];
+  }, [keyboardSnap]);
+
+  const bottomSheetRef = useRef<any>(null);
+  const mountedRef = useRef(true);
+
+  let backgroundColor = theme.colors.background.default;
+  let bottomInset = keyboardSnap * Dimensions.get('window').height;
+  if (bottomInset > 16) {
+    bottomInset -= 16;
+  }
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  useEffect(() => {
+    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
+      setKeyboardSnap(
+        e.endCoordinates.height / Dimensions.get('window').height,
+      );
+      bottomSheetRef.current?.expand();
+    });
+
+    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardSnap(0);
+    });
+
+    bottomSheetRef.current?.present();
+    return () => {
+      mountedRef.current = false;
+      keyboardDidShow.remove();
+      keyboardDidHide.remove();
+    };
+  }, []);
+
+  const backdropComponent = (backdropProps: any) => (
+    <BottomSheetBackdrop
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      {...backdropProps}
+    />
+  );
+
+  return (
+    <SafeAreaView style={Styles.flex}>
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        onDismiss={() => {
+          if (mountedRef.current) {
+            navigator?.pop();
+          }
+        }}
+        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
+        handleComponent={null}
+        backdropComponent={backdropComponent}>
+        <BottomSheetView>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
+            <View style={styles.indicatorContainer}>
+              <View
+                style={[
+                  styles.indicator,
+                  {backgroundColor: theme.colors.text.disable},
+                ]}
+              />
+            </View>
+            <NavigationContainer
+              maxApi={navigator?.maxApi}
+              theme={{
+                ...theme,
+                assets: {...theme.assets, headerBackground: undefined},
+              }}
+              screen={props => <Component {...props} {...params} />}
+              options={{
+                ...options,
+                ...{
+                  headerLeft: (props: any) => {
+                    if (props.canGoBack) {
+                      return <HeaderLeft {...props} useBorder={false} />;
+                    }
+                  },
+                  headerTitle: (props: any) => {
+                    return <HeaderTitle {...props} />;
+                  },
+                  headerTintColor: theme.colors.text.default,
+                  headerBackground: () => (
+                    <HeaderBackground backgroundColor={backgroundColor} />
+                  ),
+                  headerTransparent: false,
+                },
+                headerTitleAlign: 'center',
+                headerRight: props => (
+                  <HeaderRightAction>
+                    <NavigationButton
+                      {...props}
+                      icon="24_navigation_close"
+                      useBorder={false}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
+                    />
+                  </HeaderRightAction>
+                ),
+              }}
+            />
+            <View
+              style={{
+                height: Math.min(insets.bottom, 20),
+                backgroundColor: indicatorColor ?? backgroundColor,
+              }}
+            />
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {flex: 1, flexDirection: 'row'},
+  modalContent: {
+    maxWidth: '100%',
+    maxHeight: '80%',
+  },
+  modalCenterStage: {
+    maxWidth: '90%',
+  },
+  modalSpaceHorizontal: {
+    flex: 1,
+    minWidth: '5%',
+  },
+  modalSpaceVertical: {
+    flex: 1,
+    minHeight: '10%',
+  },
+  sheetContainer: {
+    height: '100%',
+    width: '100%',
+    borderTopLeftRadius: Radius.M,
+    borderTopRightRadius: Radius.M,
+    overflow: 'hidden',
+  },
+  indicatorContainer: {
+    width: '100%',
+    paddingTop: Spacing.S,
+    paddingBottom: Spacing.XS,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {
+    width: 40,
+    height: 4,
+    borderRadius: Radius.S,
+  },
+});
+
+export default ModalScreen;

package/Application/Navigation.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import {NavigationProp} from '@react-navigation/native';
+import {NavigationOptions, Theme} from './types';
+import {HeaderRightAction} from './index';
+import {getOptions} from './utils';
+import {HeaderToolkitAction} from './Components';
+
+class Navigation {
+  private instance: NavigationProp<any>;
+  private readonly theme: Theme;
+
+  constructor(instance: any, theme: Theme) {
+    this.instance = instance;
+    this.theme = theme;
+  }
+
+  /**
+   * navigation options filter by design system rule
+   * @param params
+   */
+  private filterParams = (params: NavigationOptions) => {
+    if (params.headerRight) {
+      const headerRight = params.headerRight?.({}) as React.ReactElement;
+      const type = headerRight?.type;
+      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
+        console.warn(
+          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
+        );
+      }
+    }
+
+    if (params.headerLeft) {
+      console.warn('headerLeft not allow override render by design system!');
+      delete params.headerLeft;
+    }
+
+    return params;
+  };
+
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
+  setOptions = (params: NavigationOptions) => {
+    params = getOptions(this.filterParams(params), this.theme);
+    this.instance.setOptions(params);
+  };
+}
+
+export default Navigation;

package/Application/NavigationContainer.tsx

@@ -0,0 +1,120 @@
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+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, MiniAppContext} from './index';
+import kitLocalization from '../Assets/language.json';
+
+const Stack = createStackNavigator();
+
+const NavigationContainer: React.FC<NavigationContainerProps> = ({
+  screen,
+  theme,
+  options,
+  maxApi,
+  localization,
+}) => {
+  const context = useContext(MiniAppContext);
+  const navigationRef = React.useRef<NavigationContainerRef>(null);
+  const navigator = useRef(new Navigator(navigationRef));
+  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' = context?.language ?? 'vi';
+    const mergedLocalization: LocalizationObject = {
+      vi: {...localization?.vi, ...kitLocalization.vi},
+      en: {...localization?.en, ...kitLocalization.en},
+    };
+    return mergedLocalization?.[language]?.[key] || key;
+  };
+
+  return (
+    <SafeAreaProvider>
+      <BottomSheetModalProvider>
+        <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}
+            independent={true}>
+            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+              <Stack.Screen
+                name="Stack"
+                component={StackScreen}
+                initialParams={{screen}}
+                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>
+      </BottomSheetModalProvider>
+    </SafeAreaProvider>
+  );
+};
+
+export {ApplicationContext, NavigationContainer};

package/Application/Navigator.ts

@@ -0,0 +1,131 @@
+import {CommonActions, StackActions} from '@react-navigation/native';
+import {
+  BottomSheetParams,
+  HeaderToolkitProps,
+  ModalParams,
+  ScreenParams,
+} from './types';
+
+class Navigator {
+  ref?: any;
+  toolkitConfig?: HeaderToolkitProps;
+  maxApi?: any;
+  dismissData?: any;
+  toolkitCallback?: (item: any) => void;
+
+  constructor(navigation: any) {
+    this.ref = navigation;
+  }
+
+  /**
+   * push new stack screen
+   * @param params
+   */
+  push = (params: ScreenParams) => {
+    this.ref.current.dispatch(StackActions.push('Stack', params));
+  };
+
+  /**
+   * replace current screen with new screen
+   * @param params
+   */
+  replace = (params: ScreenParams) => {
+    this.ref.current.dispatch(StackActions.replace('Stack', params));
+  };
+  /**
+   * pop to dismiss a screen
+   * @param count
+   */
+  pop = (count?: number) => {
+    this.ref.current.dispatch(StackActions.pop(count ?? 1));
+  };
+
+  /**
+   * present a new screen, show from bottom iOS
+   * @param params
+   */
+  present = (params: ScreenParams) => {
+    this.ref.current.dispatch(StackActions.push('Dialog', params));
+  };
+
+  /**
+   * show a modal popup
+   * @param params
+   */
+  showModal = (params: ModalParams) => {
+    this.ref.current.dispatch(StackActions.push('Modal', params));
+  };
+
+  /**
+   * show a bottom sheet
+   * @param params
+   */
+  showBottomSheet = (params: BottomSheetParams) => {
+    this.ref.current.dispatch(
+      StackActions.push('Modal', {
+        ...params,
+        isBottomSheet: true,
+      }),
+    );
+  };
+
+  /**
+   * pop all screen route
+   */
+  popToTop = () => {
+    this.ref.current.dispatch(StackActions.popToTop());
+  };
+
+  /**
+   * navigate
+   * @param name
+   * @param params
+   */
+  navigate = (name: string, params: any) => {
+    this.ref.current.dispatch(
+      CommonActions.navigate({
+        name,
+        params,
+      }),
+    );
+  };
+
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
+  reset = (params: ScreenParams) => {
+    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,71 @@
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
+import {ScreenParams} from './types';
+import Navigation from './Navigation';
+import {ApplicationContext, MiniAppContext} from './index';
+import {GridSystem} from '../Layout';
+import {useHeaderHeight} from '@react-navigation/elements';
+
+const StackScreen: React.FC<ScreenParams> = props => {
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const context = useContext(MiniAppContext);
+
+  const {screen: Component, options}: ScreenParams = props.route.params;
+  const navigation = new Navigation(props.navigation, theme);
+  const heightHeader = useHeaderHeight();
+
+  const params = {
+    ...props.route.params,
+    navigation,
+  };
+
+  delete params.screen;
+
+  /**
+   * set options for screen
+   */
+  useLayoutEffect(() => {
+    if (options) {
+      navigation.setOptions(options);
+    }
+  }, [options]);
+
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    const tracking = {
+      ...context,
+      screen_name: Component.name,
+    };
+
+    const routes = props.navigation.getState()?.routes || [];
+    const routesLength = routes.length;
+    let pre_screen_name = '';
+    if (routesLength > 1) {
+      pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+      ...tracking,
+      pre_screen_name,
+      trigger_id: '111378000000000000',
+    });
+
+    return props.navigation.addListener('beforeRemove', () => {
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+        ...tracking,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      });
+    });
+  }, []);
+
+  return (
+    <>
+      <Component heightHeader={heightHeader} {...params} />
+      {showGrid && <GridSystem />}
+    </>
+  );
+};
+
+export default StackScreen;

package/Application/index.ts

@@ -0,0 +1,41 @@
+import {NavigationContainer} from './NavigationContainer';
+import Screen from '../Layout/Screen';
+import {
+  HeaderAnimated,
+  HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
+  HeaderRightAction,
+  HeaderTitle,
+  HeaderToolkitAction,
+  NavigationButton,
+} from './Components';
+import BottomTab from './BottomTab';
+import {createContext} from 'react';
+import {defaultContext} from '../Consts';
+import {MiniAppInfo} from './types';
+
+const ApplicationContext = createContext(defaultContext);
+const MiniAppContext = createContext<MiniAppInfo>({
+  appId: '',
+  buildNumber: 0,
+  code: '',
+  toolkitConfig: {},
+  fromCode: '',
+});
+
+export {
+  ApplicationContext,
+  MiniAppContext,
+  NavigationContainer,
+  Screen,
+  BottomTab,
+  NavigationButton,
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+  HeaderAnimated,
+};