@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

package/Application/ModalScreen.tsx

@@ -1,19 +1,40 @@
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
+  Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
   View,
 } from 'react-native';
-
-import {ApplicationContext} from './index';
-import {Styles} from '../Consts';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
 import Navigation from './Navigation';
-import {ModalParams} from './types';
-import BottomSheet from './BottomSheet';
+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} />;
   }
@@ -21,21 +42,16 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {navigator} = useContext(ApplicationContext);
+  const {theme, navigator} = useContext(ApplicationContext);
   const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const navigation = new Navigation(props.navigation);
+  const navigation = new Navigation(props.navigation, theme);
   const params = {
     ...props.route.params,
     navigation,
   };
-  delete params.screen;
 
-  useEffect(() => {
-    return () => {
-      props.route.params?.onDismiss?.();
-    };
-  }, []);
+  delete params.screen;
 
   const onDismiss = () => {
     if (barrierDismissible) {
@@ -75,6 +91,142 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
+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: {
@@ -92,6 +244,25 @@ 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,13 +1,17 @@
+import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions} from './types';
+import {NavigationOptions, Theme} from './types';
+import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
+import {HeaderToolkitAction} from './Components';
 
 class Navigation {
-  instance: NavigationProp<any>;
-  onHeaderRightChange?: (width: number) => void;
+  private instance: NavigationProp<any>;
+  private readonly theme: Theme;
 
-  constructor(instance: any) {
+  constructor(instance: any, theme: Theme) {
     this.instance = instance;
+    this.theme = theme;
   }
 
   /**
@@ -15,6 +19,16 @@ class Navigation {
    * @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;
@@ -28,7 +42,7 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    params = getOptions(this.filterParams(params), this);
+    params = getOptions(this.filterParams(params), this.theme);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -1,4 +1,5 @@
-import React, {useEffect, useRef, useState} from 'react';
+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,
@@ -10,9 +11,9 @@ import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
-import {NavigationContainerProps} from './types';
-import {ApplicationContext} from './index';
-import Localize from './Localize';
+import {LocalizationObject, NavigationContainerProps} from './types';
+import {ApplicationContext, MiniAppContext} from './index';
+import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
 
@@ -21,18 +22,14 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
   maxApi,
-  initialParams,
-  localize = new Localize({vi: {}, en: {}}),
+  localization,
 }) => {
-  const navigationRef = useRef<NavigationContainerRef>(null);
-  const isReady = useRef(false);
-  const navigator = useRef(new Navigator(navigationRef, isReady));
+  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>();
-  /**
-   * inject data for navigator
-   */
-  navigator.current.maxApi = maxApi;
+
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
@@ -42,7 +39,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       'onChangeGrid',
       enable => {
         setShowGrid(!!enable);
-      }
+      },
     );
 
     return () => {
@@ -50,59 +47,72 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
+
+  /**
+   * translate
+   * @param key
+   */
   const translate = (key: string) => {
-    return localize?.translate(key);
+    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>
-      <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={navigationRef}
-          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>
+      <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>
   );
 };