@momo-kits/foundation 0.92.7-rc.21 → 0.92.7-rc.22

package/Application/ModalScreen.tsx

@@ -4,29 +4,16 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  TouchableOpacity,
   View,
 } from 'react-native';
-import {Modalize} from 'react-native-modalize';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {ApplicationContext} from './index';
-import {Radius, Spacing, Styles} from '../Consts';
-import {Icon} from '../Icon';
-import {Text} from '../Text';
+import {Styles} from '../Consts';
 import Navigation from './Navigation';
-import {BottomSheetParams, ModalParams} from './types';
+import {ModalParams} from './types';
+import BottomSheet from './BottomSheet';
 
 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} />;
   }
@@ -34,17 +21,22 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const params = {
     ...props.route.params,
     navigation,
   };
-
   delete params.screen;
 
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -83,118 +75,6 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
-const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  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 modalRef = useRef<Modalize>(null);
-
-  useEffect(() => {
-    modalRef.current?.open();
-  }, []);
-
-  const handleClose = () => {
-    modalRef?.current?.close();
-  };
-
-  /**
-   * 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}>
-      <Modalize
-        keyboardAvoidingOffset={-20}
-        adjustToContentHeight
-        closeOnOverlayTap
-        closeSnapPointStraightEnabled
-        onClosed={() => {
-          navigator?.pop();
-        }}
-        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>
-      </Modalize>
-    </SafeAreaView>
-  );
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -212,56 +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,
-  },
-  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,17 +1,13 @@
-import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions, Theme} from './types';
-import {HeaderRightAction} from './index';
+import {NavigationOptions} from './types';
 import {getOptions} from './utils';
-import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
-  readonly theme: Theme;
+  onHeaderRightChange?: (width: number) => void;
 
-  constructor(instance: any, theme: Theme) {
+  constructor(instance: any) {
     this.instance = instance;
-    this.theme = theme;
   }
 
   /**
@@ -19,16 +15,6 @@ 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;
@@ -42,7 +28,7 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    params = getOptions(this.filterParams(params), this.theme);
+    params = getOptions(this.filterParams(params), this);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -4,22 +4,15 @@ 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 {LocalizationObject, NavigationContainerProps} from './types';
+import {NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
-import kitLocalization from '../Assets/language.json';
-
-/**
- * link for deprecated
- */
-
-console.log(typeof BottomSheetModalProvider);
+import Localize from './Localize';
 
 const Stack = createStackNavigator();
 
@@ -28,15 +21,18 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
   maxApi,
-  localization,
   initialParams,
+  localize = new Localize({vi: {}, en: {}}),
 }) => {
   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>();
-
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
@@ -46,7 +42,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       'onChangeGrid',
       enable => {
         setShowGrid(!!enable);
-      },
+      }
     );
 
     return () => {
@@ -54,22 +50,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
-  /**
-   * 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 localize?.translate(key);
   };
 
   return (
@@ -94,7 +76,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               notification: theme.colors.error.primary,
             },
           }}
-          ref={navigator.current?.ref}
+          ref={navigationRef}
           onReady={() => {
             isReady.current = true;
           }}

package/Application/Navigator.ts

@@ -12,7 +12,7 @@ class Navigator {
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
-  toolkitCallback?: (item: any) => void;
+  toolkitCallback?: (key: string) => void;
 
   constructor(navigation: any, isReady: any) {
     this.ref = navigation;
@@ -25,7 +25,7 @@ class Navigator {
    */
   push = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Stack', params));
+      this.ref.current?.dispatch?.(StackActions.push('Stack', params));
     }
   };
 
@@ -35,7 +35,7 @@ class Navigator {
    */
   replace = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.replace('Stack', params));
+      this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
     }
   };
   /**
@@ -44,7 +44,7 @@ class Navigator {
    */
   pop = (count?: number) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+      this.ref.current?.dispatch?.(StackActions.pop(count ?? 1));
     }
   };
 
@@ -54,7 +54,7 @@ class Navigator {
    */
   present = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Dialog', params));
+      this.ref.current?.dispatch?.(StackActions.push('Dialog', params));
     }
   };
 
@@ -64,7 +64,7 @@ class Navigator {
    */
   showModal = (params: ModalParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Modal', params));
+      this.ref.current?.dispatch?.(StackActions.push('Modal', params));
     }
   };
 
@@ -74,11 +74,11 @@ class Navigator {
    */
   showBottomSheet = (params: BottomSheetParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(
+      this.ref.current?.dispatch?.(
         StackActions.push('Modal', {
           ...params,
           isBottomSheet: true,
-        }),
+        })
       );
     }
   };
@@ -88,7 +88,7 @@ class Navigator {
    */
   popToTop = () => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.popToTop());
+      this.ref.current?.dispatch?.(StackActions.popToTop());
     }
   };
 
@@ -99,11 +99,11 @@ class Navigator {
    */
   navigate = (name: string, params: any) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(
+      this.ref.current?.dispatch?.(
         CommonActions.navigate({
           name,
           params,
-        }),
+        })
       );
     }
   };
@@ -114,7 +114,7 @@ class Navigator {
    */
   reset = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(
+      this.ref.current?.dispatch?.(
         CommonActions.reset({
           index: 0,
           routes: [
@@ -124,7 +124,7 @@ class Navigator {
               params,
             },
           ],
-        }),
+        })
       );
     }
   };
@@ -141,9 +141,7 @@ class Navigator {
    * set callback function for toolkit
    * @param callback
    */
-  setToolkitCallback = (
-    callback: (item: {key: string; action: string}) => void,
-  ) => {
+  setToolkitCallback = (callback: (key: string) => void) => {
     this.toolkitCallback = callback;
   };
 }