@momo-kits/foundation 0.81.1-beta.5 → 0.81.1-optimize.10

package/Application/ModalScreen.tsx

@@ -1,37 +1,19 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef} 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 {ApplicationContext} from './index';
+import {Styles} from '../Consts';
 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';
+import {ModalParams} from './types';
+import BottomSheet from './BottomSheet';
 
 const ModalScreen: React.FC<any> = props => {
-  useEffect(() => {
-    return () => {
-      props.route.params?.onDismiss?.();
-    };
-  }, []);
-
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
   }
@@ -39,47 +21,19 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const TRIGGER_ID = '111012100000000000';
-  const {theme, navigator, appInfo} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalName}: ModalParams =
-    props.route.params;
+  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 navigationRoutes = props.navigation.getState()?.routes || [];
-  const routesLength = navigationRoutes.length;
-  let screen_name = navigationRoutes?.[0]?.params?.screen?.name;
-  if (routesLength > 1) {
-    screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
-  }
-  const error_code = (screen as Function)?.()?.props?.information;
-
   useEffect(() => {
-    navigator?.maxApi?.trackEvent('service_component_displayed', {
-      ...appInfo,
-      screen_name,
-      trigger_id: TRIGGER_ID,
-      component_type: 'popup',
-      component_name: modalName,
-      error_code,
-    });
-
     return () => {
-      navigator?.maxApi?.trackEvent('service_icon_clicked', {
-        ...appInfo,
-        screen_name,
-        trigger_id: '111154100000000001',
-        component_type: 'popup',
-        component_name: modalName,
-        error_code,
-        icon_name: 'close',
-      });
+      props.route.params?.onDismiss?.();
     };
   }, []);
 
@@ -104,7 +58,7 @@ const Modal: React.FC<ModalParams> = props => {
             style={styles.modalSpaceVertical}
             onPress={() => onDismiss()}
           />
-          <View style={styles.modalContent} accessibilityLabel={'Modal'}>
+          <View style={styles.modalContent}>
             <Component {...params} />
           </View>
           <Pressable
@@ -121,157 +75,6 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
-const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const insets = useSafeAreaInsets();
-  const {theme, navigator, appInfo} = useContext(ApplicationContext);
-  const [keyboardSnap, setKeyboardSnap] = useState(0);
-  const {screen, options, snapPoint}: 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 accessibilityLabel={'BottomSheet'}>
-          <View
-            style={[
-              styles.sheetContainer,
-              {
-                backgroundColor,
-                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-              },
-            ]}>
-            <View style={styles.indicatorContainer}>
-              <View
-                style={[
-                  styles.indicator,
-                  {backgroundColor: theme.colors.text.disable},
-                ]}
-              />
-            </View>
-            <NavigationContainer
-              appInfo={appInfo}
-              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}
-                          backgroundColor="transparent"
-                          accessibilityLabel={'BottomSheet/'}
-                        />
-                      );
-                    }
-                  },
-                  headerTitle: (props: any) => {
-                    return (
-                      <HeaderTitle
-                        {...props}
-                        accessibilityLabel={'BottomSheet/'}
-                      />
-                    );
-                  },
-                  headerTintColor: theme.colors.text.default,
-                  headerBackground: () => (
-                    <HeaderBackground backgroundColor={backgroundColor} />
-                  ),
-                  headerTransparent: false,
-                },
-                headerTitleAlign: 'center',
-                headerRight: props => (
-                  <HeaderRightAction>
-                    <NavigationButton
-                      {...props}
-                      icon="24_navigation_close"
-                      backgroundColor="transparent"
-                      useBorder={false}
-                      onPress={bottomSheetRef.current?.dismiss}
-                      accessibilityLabel={'BottomSheet/Close'}
-                    />
-                  </HeaderRightAction>
-                ),
-              }}
-            />
-          </View>
-        </BottomSheetView>
-      </BottomSheetModal>
-    </SafeAreaView>
-  );
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -289,25 +92,6 @@ const styles = StyleSheet.create({
     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

@@ -6,14 +6,18 @@ import {getOptions} from './utils';
 import {HeaderToolkitAction} from './Components';
 
 class Navigation {
-  private instance: NavigationProp<any>;
-  private readonly theme: Theme;
+  instance: NavigationProp<any>;
+  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;
@@ -24,14 +28,21 @@ class Navigation {
         );
       }
     }
+
+    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) => {
-    if (__DEV__) {
-      params = this.filterParams(params);
-    }
-    params = getOptions(params, this.theme);
+    params = getOptions(this.filterParams(params), this.theme);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -1,18 +1,17 @@
 import React, {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} from './index';
-import {DeviceEventEmitter} from 'react-native';
 import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
@@ -23,13 +22,18 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
-  appInfo,
+  initialParams,
 }) => {
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
-  const navigator = useRef(new Navigator(navigationRef));
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
-  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
+  const config = useRef<any>();
 
+  /**
+   * handle mini language & listen change
+   * engine only shake to enable grid view
+   */
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
       'onChangeGrid',
@@ -37,26 +41,23 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         setShowGrid(!!enable);
       },
     );
-    return () => {
-      subscription.remove();
-    };
-  }, []);
 
-  useEffect(() => {
-    maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
-      setLanguage(lang);
-    });
-    const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
-      setLanguage(lang);
-    });
     return () => {
-      listener?.();
+      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},
@@ -66,53 +67,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <BottomSheetModalProvider>
-        <ApplicationContext.Provider
-          value={{
-            theme,
-            navigator: navigator.current,
-            showGrid,
-            language,
-            translate,
-            appInfo,
-          }}>
-          <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>
+      <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>
   );
 };