@momo-kits/foundation 0.80.8 → 0.81.1-beta.0

package/Application/ModalScreen.tsx

@@ -1,36 +1,19 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
   View,
-  Keyboard,
 } 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,16 +22,21 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible}: ModalParams = props.route.params;
+  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;
 
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -70,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
@@ -87,139 +75,6 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
-const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const insets = useSafeAreaInsets();
-  const {theme, navigator} = useContext(ApplicationContext);
-  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) {
-      return [snapPoint];
-    }
-    return ['50%', '70%', '90%'];
-  }, []);
-
-  const bottomSheetRef = useRef<any>(null);
-  const mountedRef = useRef(true);
-
-  let backgroundColor = theme.colors.background.default;
-  if (options?.surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
-  useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', () =>
-      bottomSheetRef.current?.expand(),
-    );
-
-    bottomSheetRef.current?.present();
-    return () => {
-      mountedRef.current = false;
-      keyboardDidShow.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();
-          }
-        }}
-        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
-              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/'}
-                      />
-                    );
-                  },
-                  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: {
@@ -237,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

@@ -1,39 +1,35 @@
 import {NavigationProp} from '@react-navigation/native';
-import {Alert} from 'react-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;
+  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?.();
-      const type = headerRight?.type;
-      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        Alert.alert(
-          'Rule',
-          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
-        );
-        delete params.headerRight;
-      }
+    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,12 +22,18 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  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',
@@ -36,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},
@@ -65,52 +67,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <BottomSheetModalProvider>
-        <ApplicationContext.Provider
-          value={{
-            theme,
-            navigator: navigator.current,
-            showGrid,
-            language,
-            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(theme), ...options}}
-              />
-              <Stack.Screen
-                name="Dialog"
-                component={StackScreen}
-                options={getDialogOptions(theme)}
-                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>
   );
 };

package/Application/Navigator.ts

@@ -8,90 +8,143 @@ import {
 
 class Navigator {
   ref?: any;
+  isReady?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
+  dismissData?: any;
+  toolkitCallback?: (item: any) => void;
 
-  constructor(navigation: any) {
+  constructor(navigation: any, isReady: any) {
     this.ref = navigation;
+    this.isReady = isReady;
   }
 
+  /**
+   * push new stack screen
+   * @param params
+   */
   push = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Stack', params));
+    if (this.isReady.current) {
+      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));
+    if (this.isReady.current) {
+      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));
+    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) => {
-    this.ref.current.dispatch(StackActions.push('Dialog', params));
+    if (this.isReady.current) {
+      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));
+    if (this.isReady.current) {
+      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,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        StackActions.push('Modal', {
+          ...params,
+          isBottomSheet: true,
+        }),
+      );
+    }
   };
 
+  /**
+   * pop all screen route
+   */
   popToTop = () => {
-    this.ref.current.dispatch(StackActions.popToTop());
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.popToTop());
+    }
   };
 
-  reset = (params: ScreenParams) => {
-    this.ref.current.dispatch(
-      CommonActions.reset({
-        index: 0,
-        routes: [
-          {
-            name: 'Stack',
-            key: `Stack_${new Date().getTime()}`,
-            params,
-          },
-        ],
-      }),
-    );
+  /**
+   * navigate
+   * @param name
+   * @param params
+   */
+  navigate = (name: string, params: any) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.navigate({
+          name,
+          params,
+        }),
+      );
+    }
   };
 
-  requestApi = (func: any, args: any = [], callback: any) => {
-    if (this.maxApi) {
-      this.maxApi[func]?.(...args, callback);
-    } else {
-      const instance: any = global;
-      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
+  /**
+   * 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,
+            },
+          ],
+        }),
+      );
     }
   };
 
-  getToolkit = async (): Promise<HeaderToolkitProps | undefined> => {
-    return new Promise(resolve => {
-      if (this.toolkitConfig) {
-        resolve(this.toolkitConfig);
-        return;
-      }
-      this.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          this.requestApi('getToolkitConfig', [undefined], (config: any) => {
-            this.toolkitConfig = {
-              ...config?.utilityToolConfig,
-              appCode: config?.appCode,
-            };
-            resolve(this.toolkitConfig);
-          });
-        } else {
-          resolve(undefined);
-        }
-      });
-    });
+  /**
+   * 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;
   };
 }