@momo-kits/foundation 0.76.1-beta.2 → 0.77.1-optimize.10

package/Application/ModalScreen.tsx

@@ -1,26 +1,26 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import {Modalize} from 'react-native-modalize';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
-import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
+
+import {ApplicationContext} from './index';
+import {Radius, Spacing, Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
 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} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
+  /**
+   * dismiss callback when modal | bottom sheet dismissed
+   */
   useEffect(() => {
     return () => {
       props.route.params?.onDismiss?.();
@@ -35,7 +35,7 @@ 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 = {
@@ -66,7 +66,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
@@ -85,107 +85,112 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, options}: BottomSheetParams = props.route.params;
-  const Component = useRef(screen).current;
+  const insets = useSafeAreaInsets();
+
+  const {
+    screen: Screen,
+    options,
+    footerComponent,
+    scrollViewProps,
+    surface,
+  }: BottomSheetParams = props.route.params;
+
   const navigation = new Navigation(props.navigation, theme);
+
   const params = {
     ...props.route.params,
     navigation,
   };
 
   delete params.screen;
-
-  const snapPoints = useMemo(() => ['50%', '90%'], []);
-  const {bottom} = useSafeAreaInsets();
-  const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
-  const mountedRef = useRef(true);
+  const modalRef = useRef<Modalize>(null);
 
   useEffect(() => {
-    bottomSheetRef.current?.present();
-    return () => {
-      mountedRef.current = false;
-    };
+    modalRef.current?.open();
   }, []);
 
-  const backdropComponent = (backdropProps: any) => (
-    <BottomSheetBackdrop
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      {...backdropProps}
-    />
-  );
+  const handleClose = () => {
+    modalRef?.current?.close();
+  };
 
-  let backgroundColor = theme.colors.background.default;
-  if (options?.surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
+  /**
+   * build header
+   * @param title
+   * @param onClose
+   */
+  const headerDefault = (title: string, onClose: () => void) => {
+    return (
+      <View
+        style={[
+          styles.header,
+          surface && {
+            borderBottomColor: theme.colors.border.default,
+            borderBottomWidth: 1,
+          },
+        ]}>
+        <View style={styles.iconButton} />
+        <Text
+          style={styles.textOption}
+          numberOfLines={1}
+          typography="header_default_bold">
+          {title ?? ''}
+        </Text>
+        <TouchableOpacity style={styles.iconButton} onPress={onClose}>
+          <Icon source="navigation_close" />
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  /**
+   * build footer
+   * @param footerComponent
+   */
+  const footerDefault = (footerComponent: React.ReactNode) => {
+    if (footerComponent) {
+      return (
+        <View
+          style={{
+            marginBottom: Math.min(insets.bottom, 21),
+            paddingHorizontal: Spacing.M,
+            paddingVertical: Spacing.S,
+          }}>
+          {footerComponent}
+        </View>
+      );
+    }
+  };
 
   return (
     <SafeAreaView style={Styles.flex}>
-      <BottomSheetModal
-        ref={bottomSheetRef}
-        snapPoints={snapPoints}
-        onDismiss={() => {
-          if (mountedRef.current) {
-            navigator?.pop();
-          }
+      <Modalize
+        keyboardAvoidingOffset={-20}
+        adjustToContentHeight
+        closeOnOverlayTap
+        closeSnapPointStraightEnabled
+        onClosed={() => {
+          navigator?.pop();
         }}
-        handleComponent={null}
-        backdropComponent={backdropComponent}>
-        <View
-          style={{paddingBottom: bottom}}
-          accessibilityLabel={'BottomSheet'}>
-          <View style={[styles.sheetContainer, {backgroundColor}]}>
-            <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"
-                        />
-                      );
-                    }
-                  },
-                  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}
-                    />
-                  </HeaderRightAction>
-                ),
-              }}
-            />
-          </View>
+        handlePosition="inside"
+        withHandle={true}
+        disableScrollIfPossible={true}
+        modalTopOffset={insets.top}
+        ref={modalRef}
+        scrollViewProps={scrollViewProps}
+        HeaderComponent={headerDefault(
+          options?.title ?? options?.customTitle?.title ?? '',
+          handleClose,
+        )}
+        modalStyle={{
+          backgroundColor: surface
+            ? theme.colors.background.surface
+            : theme.colors.background.default,
+        }}
+        FooterComponent={footerDefault(footerComponent)}>
+        <View style={styles.bottomSheetContainer}>
+          <Screen {...props} {...params} />
         </View>
-      </BottomSheetModal>
+      </Modalize>
     </SafeAreaView>
   );
 };
@@ -217,14 +222,46 @@ const styles = StyleSheet.create({
   indicatorContainer: {
     width: '100%',
     paddingTop: Spacing.S,
+    paddingBottom: Spacing.XS,
     alignItems: 'center',
     justifyContent: 'center',
   },
   indicator: {
-    width: 64,
+    width: 40,
     height: 4,
     borderRadius: Radius.S,
   },
+  bottomSheetContainer: {
+    width: '100%',
+  },
+  header: {
+    marginTop: 10,
+    height: 56,
+    width: '100%',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  textOption: {
+    fontSize: 16,
+    color: '#303233',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    paddingHorizontal: Spacing.L,
+    flex: 1,
+  },
+  iconButton: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.M,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    tintColor: '#303233',
+    backgroundColor: 'red',
+  },
 });
 
 export default ModalScreen;

package/Application/Navigation.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
@@ -5,38 +6,43 @@ 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;
   }
 
-  private verifyParams = (params: NavigationOptions) => {
+  /**
+   * navigation options filter by design system rule
+   * @param params
+   */
+  private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
-      const headerRight = params.headerRight?.();
-      if (
-        headerRight?.type !== HeaderRightAction &&
-        headerRight?.type !== HeaderToolkitAction
-      ) {
+      const headerRight = params.headerRight?.({}) as React.ReactElement;
+      const type = headerRight?.type;
+      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
         console.warn(
-          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
+          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
         );
       }
     }
-    return params;
-  };
 
-  private filterParams = (params: NavigationOptions) => {
+    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,19 +1,25 @@
-import React, {useRef} from 'react';
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+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 {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 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 {GridSystem} from '../Layout';
-import {GRIDVIEW} from '../Consts';
-import {NavigationContainerProps} from './types';
+import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
+import kitLocalization from '../Assets/language.json';
+
+/**
+ * link for deprecated
+ */
+
+console.log(typeof BottomSheetModalProvider);
 
 const Stack = createStackNavigator();
 
@@ -22,54 +28,99 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   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 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>
-      <BottomSheetModalProvider>
-        <ApplicationContext.Provider
-          value={{theme, navigator: navigator.current}}>
-          <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>
-      {GRIDVIEW && <GridSystem />}
+      <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>
   );
 };