@momo-kits/foundation 0.92.1-tracking.12 → 0.92.1-tracking.13

package/Application/ModalScreen.tsx

@@ -1,29 +1,21 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
-  Dimensions,
-  Keyboard,
   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,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+
+import {ApplicationContext} from '.';
+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, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
   /**
@@ -92,141 +84,88 @@ 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 {
+    screen: Screen,
+    options,
+    footerComponent,
+    flatListProps,
+  }: BottomSheetParams = props.route.params;
+
   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;
-  }
+  const modalizeRef = useRef<Modalize>(null);
 
   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();
-    };
+    modalizeRef.current?.open();
   }, []);
 
-  const backdropComponent = (backdropProps: any) => (
-    <BottomSheetBackdrop
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      {...backdropProps}
-    />
-  );
+  const handleClose = () => {
+    modalizeRef?.current?.close();
+  };
 
   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();
         }}
-        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>
+        ref={modalizeRef}
+        withHandle={false}
+        flatListProps={flatListProps}
+        HeaderComponent={headerDefault(
+          options?.title ?? options?.customTitle?.title ?? '',
+          handleClose,
+        )}
+        FooterComponent={footerDefault(footerComponent)}>
+        <View style={styles.bottomSheetContainer}>
+          <Screen {...props} {...params} />
+        </View>
+      </Modalize>
     </SafeAreaView>
   );
 };
 
+const headerDefault = (title: string, onClose: () => void) => {
+  return (
+    <View style={styles.header}>
+      <Text
+        style={styles.textOption}
+        numberOfLines={2}
+        typography="header_default_bold">
+        {title ?? ''}
+      </Text>
+      <TouchableOpacity style={styles.buttonClose} onPress={onClose}>
+        <Icon source="navigation_close" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const footerDefault = (footerComponent: React.ReactNode) => {
+  const insets = useSafeAreaInsets();
+  if (!footerComponent) return;
+  return (
+    <View
+      style={{
+        marginBottom: Math.min(insets.bottom, 21) + Spacing.S,
+        paddingHorizontal: 12,
+      }}>
+      {footerComponent}
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -263,6 +202,43 @@ const styles = StyleSheet.create({
     height: 4,
     borderRadius: Radius.S,
   },
+  bottomSheetContainer: {
+    width: '100%',
+    backgroundColor: 'white',
+    borderTopRightRadius: 16,
+    borderTopLeftRadius: 16,
+  },
+  header: {
+    height: 50,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textOption: {
+    fontSize: 16,
+    color: '#303233',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    paddingHorizontal: 60,
+  },
+  imageOption: {
+    height: 1,
+    backgroundColor: '#ebebeb',
+    width: '100%',
+    position: 'absolute',
+    bottom: 1,
+  },
+  buttonClose: {
+    padding: 12,
+    position: 'absolute',
+    right: 0,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    tintColor: '#303233',
+    backgroundColor: 'red',
+  },
 });
 
 export default ModalScreen;

package/Application/NavigationContainer.tsx

@@ -1,5 +1,4 @@
 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,
@@ -69,55 +68,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   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}
-            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}
+          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/types.ts

@@ -1,4 +1,4 @@
-import {Animated, ViewProps} from 'react-native';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import Navigator from './Navigator';
@@ -119,8 +119,8 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
+  footerComponent?: React.ReactNode;
+  flatListProps: FlatListProps<any>;
 }
 
 export type NavigationButtonProps = {

package/Text/styles.ts

@@ -22,8 +22,8 @@ export default {
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
-  description_s_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
-  description_s_regularstrikethrought: {
+  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regularstrikethrought: {
     fontSize: 10,
     lineHeight: 14,
     fontWeight: '400',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-tracking.12",
+    "version": "0.92.1-tracking.13",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,10 +10,10 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
+        "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
         "@react-navigation/bottom-tabs": "git+https://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
         "@react-navigation/core": "5.16.1",