@momo-kits/foundation 1.0.1 → 1.0.4

package/Navigation/ModalScreen.tsx

@@ -12,16 +12,26 @@ import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types
 import Navigation from './Navigation';
 import {ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
-import {ApplicationContext, NavigationContainer} from './index';
+import {
+  ApplicationContext,
+  HeaderRightAction,
+  NavigationButton,
+  NavigationContainer,
+} from './index';
 
-const ModalScreen: React.FC<any> = props => {
-  const {navigation, route} = props;
+const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   const {theme} = useContext(ApplicationContext);
-  const {isBottomSheet, screen, onRequestClose}: ModalParams = route.params;
+  const {
+    isBottomSheet,
+    backgroundColor,
+    screen,
+    barrierDismissible,
+    options,
+  }: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
     ...route.params,
-    navigation: new Navigation(navigation),
+    navigation: new Navigation(navigation, theme),
   };
   delete params.screen;
 
@@ -33,11 +43,7 @@ const ModalScreen: React.FC<any> = props => {
     if (!pop) {
       action = () => {};
     }
-    if (typeof onRequestClose === 'function' && !isBottomSheet) {
-      onRequestClose(() => {
-        params?.onDismiss?.();
-        action();
-      });
+    if (barrierDismissible && !isBottomSheet) {
       return;
     }
     params?.onDismiss?.();
@@ -48,16 +54,36 @@ const ModalScreen: React.FC<any> = props => {
    * build bottom sheet
    */
   if (isBottomSheet) {
+    const bgColor = backgroundColor ?? theme.colors.background.surface;
+    const sheetTheme = {...theme, assets: undefined};
     return (
-      <BottomSheet {...props} onDismiss={onDismiss}>
-        <View style={{height: '100%'}}>
+      <BottomSheet {...rest} onDismiss={onDismiss}>
+        <View style={[styles.sheetContainer, {backgroundColor: bgColor}]}>
+          <View style={styles.indicatorContainer}>
+            <View
+              style={[
+                styles.indicator,
+                {backgroundColor: theme.colors.text.disable},
+              ]}
+            />
+          </View>
           <NavigationContainer
-            theme={{...theme, assets: undefined}}
-            screen={props => <Component {...params} {...props} />}
-            onDismiss={() => {
-              navigation.pop();
+            theme={sheetTheme}
+            screen={props => <Component {...props} {...params} />}
+            options={{
+              ...options,
+              hiddenBack: true,
+              headerTitleAlign: 'center',
+              headerRight: (props: any) => (
+                <HeaderRightAction>
+                  <NavigationButton
+                    icon="24_navigation_close"
+                    {...props}
+                    onPress={() => navigation.pop()}
+                  />
+                </HeaderRightAction>
+              ),
             }}
-            isBottomSheet={isBottomSheet}
           />
         </View>
       </BottomSheet>
@@ -96,7 +122,6 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
-  const {theme} = useContext(ApplicationContext);
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
@@ -109,17 +134,6 @@ const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
     };
   }, []);
 
-  const handleComponent = () => (
-    <View
-      style={[
-        styles.indicatorContainer,
-        {backgroundColor: theme.colors.background.surface},
-      ]}>
-      <View
-        style={[styles.indicator, {backgroundColor: theme.colors.text.disable}]}
-      />
-    </View>
-  );
   const backdropComponent = (backdropProps: any) => (
     <BottomSheetBackdrop
       disappearsOnIndex={-1}
@@ -133,27 +147,22 @@ const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        handleHeight={24}
         onDismiss={() => onDismiss?.(mountedRef.current)}
-        handleComponent={handleComponent}
+        handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View
-          style={{
-            paddingBottom: bottom,
-            backgroundColor: theme.colors.background.default,
-          }}>
-          {children}
-        </View>
+        <View style={{paddingBottom: bottom}}>{children}</View>
       </BottomSheetModal>
     </SafeAreaView>
   );
 };
 
+ModalScreen.defaultProps = {
+  barrierDismissible: false,
+};
+
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
-    borderRadius: Radius.M,
-    overflow: 'hidden',
     maxWidth: '100%',
     maxHeight: '80%',
   },
@@ -168,14 +177,18 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: '10%',
   },
-  indicatorContainer: {
+  sheetContainer: {
+    height: '100%',
     width: '100%',
-    paddingTop: Spacing.S,
     borderTopLeftRadius: Radius.M,
     borderTopRightRadius: Radius.M,
     overflow: 'hidden',
-    justifyContent: 'center',
+  },
+  indicatorContainer: {
+    width: '100%',
+    paddingTop: Spacing.S,
     alignItems: 'center',
+    justifyContent: 'center',
   },
   indicator: {
     width: 64,

package/Navigation/Navigation.ts

@@ -1,12 +1,15 @@
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions} from './types';
+import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
+import {getOptions} from './utils';
 
 class Navigation {
   instance: NavigationProp<any>;
+  theme: Theme;
 
-  constructor(instance: any) {
+  constructor(instance: any, theme: Theme) {
     this.instance = instance;
+    this.theme = theme;
   }
 
   verifyParams = (params: NavigationOptions) => {
@@ -18,6 +21,7 @@ class Navigation {
         );
       }
     }
+    return params;
   };
 
   filterParams = (params: NavigationOptions) => {
@@ -25,8 +29,8 @@ class Navigation {
   };
 
   setOptions = (params: NavigationOptions) => {
-    this.verifyParams(params);
-    params = this.filterParams(params);
+    params = this.verifyParams(params);
+    params = getOptions(params, this.theme);
     this.instance.setOptions(params);
   };
 }

package/Navigation/NavigationButton.tsx

@@ -4,8 +4,11 @@ import {NavigationButtonProps} from './types';
 import {ApplicationContext} from './index';
 import {Icon} from '../Icon';
 
-const NavigationButton: React.FC<NavigationButtonProps> = props => {
-  const {icon, tintColor, onPress} = props;
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+}) => {
   const {theme} = useContext(ApplicationContext);
   return (
     <TouchableOpacity style={styles.container} onPress={onPress}>

package/Navigation/NavigationContainer.tsx

@@ -1,22 +1,18 @@
-import React, {createContext, useRef} from 'react';
+import React, {createContext, useEffect, useRef} 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,
-  StackNavigationOptions,
-} from '@react-navigation/stack';
+import {createStackNavigator} from '@react-navigation/stack';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {GridSystem, useGridSystem} from '../Layout';
-import {defaultContext, defaultTheme} from '../Consts';
+import {defaultContext} from '../Consts';
 import {NavigationContainerProps} from './types';
-import {HeaderRightAction, NavigationButton} from './index';
 
 const Stack = createStackNavigator();
 
@@ -24,35 +20,17 @@ const ApplicationContext = createContext(defaultContext);
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,
-  onDismiss,
-  isBottomSheet,
+  options,
 }) => {
   const grid = useGridSystem();
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
-  const themed: any = theme;
-  let options: StackNavigationOptions = {};
-  if (isBottomSheet) {
-    options = {
-      headerRight: (props: any) => (
-        <HeaderRightAction {...props}>
-          <NavigationButton
-            icon="24_navigation_close"
-            {...props}
-            onPress={onDismiss}
-          />
-        </HeaderRightAction>
-      ),
-    };
-  }
-  const goBack = () => {
-    const canGoBack = navigationRef?.current?.canGoBack();
-    if (canGoBack) {
-      navigationRef?.current?.goBack();
-    } else {
-      onDismiss?.();
+
+  useEffect(() => {
+    if (options) {
+      navigationRef.current?.setParams({options: options});
     }
-  };
+  }, []);
 
   return (
     <SafeAreaProvider>
@@ -60,38 +38,32 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         <ApplicationContext.Provider
           value={{theme, navigator: navigator.current}}>
           <ReactNavigationContainer
-            theme={themed}
+            theme={{
+              ...theme,
+              dark: false,
+              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, isBottomSheet}}
-                options={getStackOptions(theme, {
-                  headerLeft: (props: any) => (
-                    <NavigationButton
-                      icon="ic_back"
-                      {...props}
-                      onPress={goBack}
-                    />
-                  ),
-                  ...options,
-                })}
+                initialParams={{screen}}
+                options={getStackOptions(theme)}
               />
               <Stack.Screen
                 name="Dialog"
                 component={StackScreen}
-                options={getDialogOptions(theme, {
-                  headerLeft: props => (
-                    <NavigationButton
-                      icon="ic_back"
-                      {...props}
-                      onPress={goBack}
-                    />
-                  ),
-                })}
-                initialParams={{screen, isBottomSheet}}
+                options={getDialogOptions(theme)}
+                initialParams={{screen}}
               />
               <Stack.Screen
                 name="Modal"
@@ -108,9 +80,4 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   );
 };
 
-NavigationContainer.defaultProps = {
-  theme: defaultTheme,
-  isBottomSheet: false,
-};
-
 export {ApplicationContext, NavigationContainer};

package/Navigation/StackScreen.tsx

@@ -1,23 +1,28 @@
-import React, {useLayoutEffect} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
+import {ApplicationContext} from './NavigationContainer';
 
 const StackScreen: React.FC<any> = props => {
   const {route, navigation} = props;
-  const {screen: Component, isBottomSheet}: ScreenParams = route.params;
+  const {screen: Component, options}: ScreenParams = route.params;
+  const {theme} = useContext(ApplicationContext);
 
   const params = {
     ...route.params,
-    navigation: new Navigation(navigation),
+    navigation: new Navigation(navigation, theme),
   };
 
   delete params.screen;
 
-  useLayoutEffect(() => {
-    if (isBottomSheet && !navigation?.canGoBack()) {
-      navigation?.setOptions({headerLeft: null});
+  /**
+   * handle set options for navigation if have props options
+   */
+  useEffect(() => {
+    if (options) {
+      params.navigation.setOptions(options);
     }
-  }, []);
+  }, [navigation, options]);
 
   return <Component {...params} />;
 };

package/Navigation/types.ts

@@ -1,7 +1,6 @@
 import {ViewProps} from 'react-native';
 import React from 'react';
 import Navigator from './Navigator';
-import Navigation from './Navigation';
 
 export type Theme = {
   dark: boolean;
@@ -65,14 +64,11 @@ export type Context = {
 
 export type NavigationContainerProps = {
   screen: React.ElementType;
-  isBottomSheet?: boolean;
+  options?: NavigationOptions;
   theme: Theme;
-  onDismiss?: () => void;
 };
 
 export interface ScreenContainerProps extends ViewProps {
-  navigation: Navigation;
-  options?: NavigationOptions;
   edges?: any[];
   enableKeyboardAvoidingView?: boolean;
   scrollable: boolean;
@@ -88,7 +84,8 @@ export interface ModalParams extends ScreenParams {
   [key: string]: any;
   screen: React.ElementType;
   onDismiss?: (mounted?: boolean) => void;
-  onRequestClose?: (onClose: () => void) => void;
+  barrierDismissible?: boolean;
+  backgroundColor?: string;
 }
 
 export type NavigationButtonProps = {
@@ -98,7 +95,23 @@ export type NavigationButtonProps = {
 };
 
 export type NavigationOptions = {
+  surface?: boolean;
+  hiddenBack?: boolean;
   title?: string;
-  headerBackground?: string;
+  headerTitleAlign?: 'left' | 'center';
+  customTitle?: TitleCustomProps;
   headerRight?: (props?: any) => React.ReactElement;
 };
+
+export type HeaderBackgroundProps = {
+  image?: string;
+};
+
+export type TitleCustomProps = {
+  title?: string;
+  subTitle?: string;
+  image?: string;
+  dotColor?: string;
+  tintColor?: string;
+  content?: React.ReactNode;
+};

package/Navigation/utils.tsx

@@ -1,25 +1,36 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {HeaderBackground} from './Components';
-import {Theme} from './types';
+import {HeaderBackground, HeaderCustom} from './Components';
+import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import {NavigationButton} from './index';
 import {Text} from '../Text';
+import {ApplicationContext, NavigationButton} from './index';
 
-const renderTitle = (props: any) => {
+const HeaderTitle = (props: any) => {
   return (
     <Text
       {...props}
-      typography="headerText_default"
+      typography="header_default"
       weight="bold"
       color={props.tintColor}
     />
   );
 };
 
+const HeaderLeft = (props: any) => {
+  const {navigator} = useContext(ApplicationContext);
+  const goBack = () => {
+    const canGoBack = navigator?.ref.current?.canGoBack();
+    if (canGoBack) {
+      navigator?.ref.current?.goBack();
+    }
+  };
+  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
+};
+
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
     return {
@@ -31,30 +42,28 @@ const getTintColor = (theme: Theme): any => {
   };
 };
 
-const getStackOptions = (
-  theme: Theme,
-  options: StackNavigationOptions,
-): StackNavigationOptions => {
+const getStackOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
-    headerTitle: renderTitle,
-    headerBackground: HeaderBackground,
+    headerTitle: HeaderTitle,
+    headerBackground: () => (
+      <HeaderBackground image={theme.assets?.headerBackground} />
+    ),
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
     ...getTintColor(theme),
-    ...options,
   };
 };
 
-const getDialogOptions = (
-  theme: Theme,
-  options: StackNavigationOptions,
-): StackNavigationOptions => {
+const getDialogOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
-    headerTitle: renderTitle,
-    headerBackground: HeaderBackground,
+    headerTitle: HeaderTitle,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerBackground: () => (
+      <HeaderBackground image={theme.assets?.headerBackground} />
+    ),
     ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
-    ...options,
   };
 };
 
@@ -83,4 +92,51 @@ const getModalOptions = (): StackNavigationOptions => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions};
+const getOptions = (params: NavigationOptions, theme: Theme) => {
+  let backTheme = {};
+  let surfaceTheme = {};
+  let titleTheme = {};
+
+  if (params.hiddenBack == true) {
+    backTheme = {
+      headerLeft: null,
+    };
+  } else {
+    backTheme = {
+      headerLeft: (props: any) => <HeaderLeft {...props} />,
+    };
+  }
+
+  if (params.surface == true) {
+    surfaceTheme = {
+      headerBackground: () => <HeaderBackground />,
+      ...getTintColor({
+        ...theme,
+        assets: {...theme.assets, headerBackground: undefined},
+      }),
+    };
+  } else {
+    surfaceTheme = {
+      headerBackground: () => (
+        <HeaderBackground image={theme.assets?.headerBackground} />
+      ),
+      ...getTintColor(theme),
+    };
+  }
+
+  if (params.customTitle) {
+    titleTheme = {
+      headerTitle: (props: any) => {
+        return <HeaderCustom {...params.customTitle} {...props} />;
+      },
+    };
+  } else {
+    titleTheme = {
+      headerTitle: HeaderTitle,
+    };
+  }
+
+  return {...params, ...backTheme, ...surfaceTheme, ...titleTheme};
+};
+
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};