@momo-kits/foundation 1.0.3 → 1.0.5

package/Layout/ScreenContainer.tsx

@@ -1,36 +1,23 @@
 import {KeyboardAvoidingView, Platform, ScrollView, View} from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import React, {useContext, useLayoutEffect} from 'react';
+import React from 'react';
 import {ScreenContainerProps} from '../Navigation/types';
-import {ApplicationContext} from '../Navigation';
 import {Spacing, Styles} from '../Consts';
 import {ScreenSection, validateChildren} from './index';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
   children,
-  navigation,
-  options,
   edges,
   enableKeyboardAvoidingView,
   scrollable,
 }) => {
   let Component: any = View;
-  const {theme} = useContext(ApplicationContext);
   const headerHeight = useHeaderHeight();
   if (scrollable) {
     Component = ScrollView;
   }
 
-  /**
-   * handle set options for navigation if have props options
-   */
-  useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
-  }, [navigation, options]);
-
   /**
    * build content for screen
    */
@@ -54,14 +41,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   };
 
   return (
-    <SafeAreaView
-      style={[
-        Styles.flex,
-        {
-          backgroundColor: theme.colors.background.default,
-        },
-      ]}
-      edges={edges}>
+    <SafeAreaView style={Styles.flex} edges={edges}>
       <KeyboardAvoidingView
         style={Styles.flex}
         keyboardVerticalOffset={headerHeight}

package/Navigation/Components.tsx

@@ -1,10 +1,11 @@
 import React, {useContext} from 'react';
-import {StatusBar, StyleSheet, View} from 'react-native';
+import {DeviceEventEmitter, StatusBar, StyleSheet, View} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Styles} from '../Consts';
+import {Colors, Styles} from '../Consts';
 import {Image} from '../Image';
 import {HeaderBackgroundProps, TitleCustomProps} from './types';
 import {useGridSystem} from '../Layout';
+import {Text} from '../Text';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -17,14 +18,36 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  avatar: {width: 36, height: 36, borderRadius: 18},
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+  },
 });
 
-const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  surface = false,
-  image,
-}) => {
+const HeaderLeft = (props: any) => {
+  const {navigator} = useContext(ApplicationContext);
+  const goBack = () => {
+    const canGoBack = navigator?.ref.current?.canGoBack();
+    if (canGoBack) {
+      navigator?.ref.current?.goBack();
+    } else {
+      const currentTime = new Date().getTime();
+      const requestId = `navigationBackPress#${currentTime}`;
+      DeviceEventEmitter.emit('dismiss', {requestId});
+    }
+  };
+  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
+};
+
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
   const {theme} = useContext(ApplicationContext);
-  const allowImage = !surface && theme.assets?.headerBackground;
   return (
     <View
       style={[
@@ -32,14 +55,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         {backgroundColor: theme.colors.background.surface, overflow: 'hidden'},
       ]}>
       <StatusBar
-        barStyle={allowImage || theme.dark ? 'light-content' : 'dark-content'}
+        barStyle={image || theme.dark ? 'light-content' : 'dark-content'}
       />
-      {allowImage && (
-        <Image
-          style={styles.headerBackground}
-          source={{uri: image ?? theme.assets?.headerBackground}}
-        />
-      )}
+      {image && <Image style={styles.headerBackground} source={{uri: image}} />}
     </View>
   );
 };
@@ -49,12 +67,32 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   subTitle,
   image,
   content,
+  tintColor,
+  dotColor,
 }) => {
   const {getSizeSpan} = useGridSystem();
 
+  const header = (
+    <View style={Styles.row}>
+      <View>
+        <Image source={{uri: image}} style={styles.avatar} />
+        {dotColor && (
+          <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
+        )}
+      </View>
+      <View style={[Styles.flex, Styles.paddingHorizontal8]}>
+        <Text typography="title_xs" color={tintColor}>
+          {title}
+        </Text>
+        <Text typography="description_s" color={tintColor}>
+          {subTitle}
+        </Text>
+      </View>
+    </View>
+  );
   return (
     <View style={[styles.headerTitleContainer, {width: getSizeSpan(10)}]}>
-      {content ?? <View />}
+      {content ?? header}
     </View>
   );
 };
@@ -85,4 +123,4 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={Styles.headerRightButton}>{renderAction()}</View>;
 };
 
-export {HeaderBackground, HeaderRightAction, HeaderCustom};
+export {HeaderLeft, HeaderBackground, HeaderRightAction, HeaderCustom};

package/Navigation/ModalScreen.tsx

@@ -26,11 +26,12 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
     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;
 
@@ -54,6 +55,7 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
    */
   if (isBottomSheet) {
     const bgColor = backgroundColor ?? theme.colors.background.surface;
+    const sheetTheme = {...theme, assets: undefined};
     return (
       <BottomSheet {...rest} onDismiss={onDismiss}>
         <View style={[styles.sheetContainer, {backgroundColor: bgColor}]}>
@@ -66,26 +68,22 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
             />
           </View>
           <NavigationContainer
-            theme={{...theme, assets: undefined}}
-            screen={props => <Component {...params} {...props} />}
-            onDismiss={() => {
-              navigation.pop();
-            }}
-            screenOptions={{
+            theme={sheetTheme}
+            screen={props => <Component {...props} {...params} />}
+            options={{
+              ...options,
+              hiddenBack: true,
+              headerTitleAlign: 'center',
               headerRight: (props: any) => (
                 <HeaderRightAction>
                   <NavigationButton
                     icon="24_navigation_close"
                     {...props}
-                    onPress={onDismiss}
+                    onPress={() => navigation.pop()}
                   />
                 </HeaderRightAction>
               ),
-              headerBackground: () => (
-                <View style={[Styles.flex, {backgroundColor: bgColor}]} />
-              ),
             }}
-            hideBackFirst={true}
           />
         </View>
       </BottomSheet>

package/Navigation/Navigation.ts

@@ -1,13 +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) => {
@@ -17,9 +19,9 @@ class Navigation {
         console.warn(
           'headerRight not return element type of HeaderRightAction, Please migrate to use HeaderRightAction of kits.',
         );
-        return;
       }
     }
+    return params;
   };
 
   filterParams = (params: NavigationOptions) => {
@@ -27,9 +29,8 @@ class Navigation {
   };
 
   setOptions = (params: NavigationOptions) => {
-    this.verifyParams(params);
-    params = this.filterParams(params);
-    params = getOptions(params);
+    params = this.verifyParams(params);
+    params = getOptions(params, this.theme);
     this.instance.setOptions(params);
   };
 }

package/Navigation/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-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 {
@@ -11,7 +11,7 @@ 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';
 
 const Stack = createStackNavigator();
@@ -20,23 +20,17 @@ const ApplicationContext = createContext(defaultContext);
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,
-  onDismiss,
-  screenOptions,
-  hideBackFirst,
+  options,
 }) => {
   const grid = useGridSystem();
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
-  const themed: any = theme;
 
-  const goBack = () => {
-    const canGoBack = navigationRef?.current?.canGoBack();
-    if (canGoBack) {
-      navigationRef?.current?.goBack();
-    } else {
-      onDismiss?.();
+  useEffect(() => {
+    if (options) {
+      navigationRef.current?.setParams({options: options});
     }
-  };
+  }, []);
 
   return (
     <SafeAreaProvider>
@@ -44,20 +38,31 @@ 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, hideBackFirst}}
-                options={{...getStackOptions(theme, goBack), ...screenOptions}}
+                initialParams={{screen}}
+                options={getStackOptions(theme)}
               />
               <Stack.Screen
                 name="Dialog"
                 component={StackScreen}
-                options={getDialogOptions(theme, goBack)}
+                options={getDialogOptions(theme)}
                 initialParams={{screen}}
               />
               <Stack.Screen

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, hideBackFirst}: 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 (hideBackFirst && !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,8 +1,6 @@
 import {ViewProps} from 'react-native';
 import React from 'react';
 import Navigator from './Navigator';
-import Navigation from './Navigation';
-import {StackNavigationOptions} from '@react-navigation/stack';
 
 export type Theme = {
   dark: boolean;
@@ -66,15 +64,11 @@ export type Context = {
 
 export type NavigationContainerProps = {
   screen: React.ElementType;
-  screenOptions?: StackNavigationOptions;
-  hideBackFirst?: boolean;
+  options?: NavigationOptions;
   theme: Theme;
-  onDismiss?: () => void;
 };
 
 export interface ScreenContainerProps extends ViewProps {
-  navigation: Navigation;
-  options?: NavigationOptions;
   edges?: any[];
   enableKeyboardAvoidingView?: boolean;
   scrollable: boolean;
@@ -102,6 +96,7 @@ export type NavigationButtonProps = {
 
 export type NavigationOptions = {
   surface?: boolean;
+  hiddenBack?: boolean;
   title?: string;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
@@ -109,7 +104,6 @@ export type NavigationOptions = {
 };
 
 export type HeaderBackgroundProps = {
-  surface?: boolean;
   image?: string;
 };
 
@@ -117,5 +111,7 @@ export type TitleCustomProps = {
   title?: string;
   subTitle?: string;
   image?: string;
+  dotColor?: string;
+  tintColor?: string;
   content?: React.ReactNode;
 };

package/Navigation/utils.tsx

@@ -3,13 +3,12 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {HeaderBackground, HeaderCustom} from './Components';
+import {HeaderBackground, HeaderCustom, HeaderLeft} from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 import {Text} from '../Text';
-import {NavigationButton} from './index';
 
-const renderTitle = (props: any) => {
+const HeaderTitle = (props: any) => {
   return (
     <Text
       {...props}
@@ -31,32 +30,26 @@ const getTintColor = (theme: Theme): any => {
   };
 };
 
-const getStackOptions = (
-  theme: Theme,
-  goBack: () => void,
-): StackNavigationOptions => {
+const getStackOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
-    headerTitle: renderTitle,
-    headerBackground: HeaderBackground,
-    headerLeft: (props: any) => (
-      <NavigationButton icon="ic_back" {...props} onPress={goBack} />
+    headerTitle: HeaderTitle,
+    headerBackground: () => (
+      <HeaderBackground image={theme.assets?.headerBackground} />
     ),
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
     ...getTintColor(theme),
   };
 };
 
-const getDialogOptions = (
-  theme: Theme,
-  goBack: () => void,
-): StackNavigationOptions => {
+const getDialogOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
-    headerTitle: renderTitle,
-    headerLeft: (props: any) => (
-      <NavigationButton icon="ic_back" {...props} onPress={goBack} />
+    headerTitle: HeaderTitle,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerBackground: () => (
+      <HeaderBackground image={theme.assets?.headerBackground} />
     ),
-    headerBackground: HeaderBackground,
     ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
   };
@@ -87,21 +80,52 @@ const getModalOptions = (): StackNavigationOptions => {
   };
 };
 
-const getOptions = (params: NavigationOptions) => {
-  let surfaceTheme = {};
-  let titleTheme = {};
-  if (params.surface) {
+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 surface={true} />,
-      headerTintColor: undefined,
+      headerBackground: () => (
+        <HeaderBackground image={theme.assets?.headerBackground} />
+      ),
+      ...getTintColor(theme),
     };
   }
+
   if (params.customTitle) {
     titleTheme = {
-      headerTitle: () => <HeaderCustom {...params.customTitle} />,
+      headerTitleAlign: 'left',
+      headerTitle: (props: any) => {
+        return <HeaderCustom {...params.customTitle} {...props} />;
+      },
+    };
+  } else {
+    titleTheme = {
+      headerTitle: HeaderTitle,
     };
   }
-  return {...params, ...surfaceTheme, ...titleTheme};
+
+  return {...params, ...backTheme, ...surfaceTheme, ...titleTheme};
 };
 
 export {getStackOptions, getDialogOptions, getModalOptions, getOptions};