@momo-kits/foundation 0.77.8 → 0.78.2

package/Application/BottomTab.tsx

@@ -8,17 +8,27 @@ import {ApplicationContext} from './index';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners}) => {
+const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
   const {theme} = useContext(ApplicationContext);
+
+  const defaultListener = {
+    focus: (item: any) => {
+      const focusItem = tabs.find(i => item.target.includes(i.name));
+      if (focusItem?.options) {
+        navigation?.setOptions?.(focusItem.options);
+      }
+    },
+  };
+
   return (
-    <Tab.Navigator>
+    <Tab.Navigator backBehavior={'firstRoute'}>
       {tabs.map(item => {
         return (
           <Tab.Screen
             key={item.name}
             name={item.name}
             component={item.screen}
-            listeners={listeners}
+            listeners={listeners ?? defaultListener}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (

package/Application/Components.tsx

@@ -1,5 +1,6 @@
 import React, {useContext, useEffect, useState} from 'react';
 import {
+  Alert,
   Animated,
   DeviceEventEmitter,
   StatusBar,
@@ -7,13 +8,14 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, NavigationButton} from './index';
+import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
   HeaderBackgroundProps,
   HeaderBackProps,
   HeaderToolkitProps,
+  NavigationButtonProps,
   TitleCustomProps,
 } from './types';
 import {scaleSize, Text} from '../Text';
@@ -21,6 +23,14 @@ import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
 const styles = StyleSheet.create({
+  navigationButton: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   headerBackground: {
     width: '100%',
     height: undefined,
@@ -77,6 +87,39 @@ const styles = StyleSheet.create({
   },
 });
 
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+  backgroundColor,
+  useBorder = true,
+  accessibilityLabel,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  if (!backgroundColor && tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
+      style={[
+        styles.navigationButton,
+        {
+          backgroundColor: backgroundColor ?? '#00000066',
+          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
+        },
+      ]}
+      onPress={onPress}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={20}
+      />
+    </TouchableOpacity>
+  );
+};
+
 const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
   const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
@@ -100,6 +143,7 @@ const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
+  onPressLeftHeader,
   useBorder,
   backgroundColor,
   accessibilityLabel = '',
@@ -131,6 +175,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       const requestId = `navigationBackPress#${currentTime}`;
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
+    onPressLeftHeader?.();
   };
 
   return (
@@ -204,7 +249,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
           <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
         )}
       </View>
-      <View style={[Styles.flex, Styles.paddingHorizontal8]}>
+      <View style={[Styles.flex, {paddingHorizontal: 8}]}>
         <Text typography="title_xs" color={tintColor}>
           {title}
         </Text>
@@ -220,8 +265,9 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validType = (item: any) => {
     if (__DEV__ && item.type !== NavigationButton) {
-      console.warn(
-        'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
+      Alert.alert(
+        'Rule',
+        'HeaderRightAction contains element type of NavigationButton, Please check again.',
       );
       return <View />;
     }
@@ -366,6 +412,7 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
 };
 
 export {
+  NavigationButton,
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,

package/Application/ModalScreen.tsx

@@ -1,4 +1,11 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -6,9 +13,8 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
-import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -85,7 +91,11 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, options}: BottomSheetParams = props.route.params;
+  const {
+    screen,
+    options,
+    useSnap = true,
+  }: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -95,11 +105,36 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   delete params.screen;
 
-  const snapPoints = useMemo(() => ['50%', '90%'], []);
-  const {bottom} = useSafeAreaInsets();
-  const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
+  const [contentHeight, setContentHeight] = useState(undefined);
+  const snapPoints = useMemo(() => {
+    if (useSnap) {
+      return ['50%', '90%'];
+    }
+    return [contentHeight ?? '50%'];
+  }, [contentHeight]);
+
+  const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
+  let handleOnLayout;
+  if (useSnap) {
+    handleOnLayout = useCallback(
+      ({
+        nativeEvent: {
+          layout: {height},
+        },
+      }) => {
+        setContentHeight(height);
+      },
+      [],
+    );
+  }
+
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
   useEffect(() => {
     bottomSheetRef.current?.present();
     return () => {
@@ -115,11 +150,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     />
   );
 
-  let backgroundColor = theme.colors.background.default;
-  if (options?.surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
   return (
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
@@ -132,9 +162,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View
-          style={{paddingBottom: bottom}}
-          accessibilityLabel={'BottomSheet'}>
+        <View onLayout={handleOnLayout} accessibilityLabel={'BottomSheet'}>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View

package/Application/Navigation.ts

@@ -1,4 +1,5 @@
 import {NavigationProp} from '@react-navigation/native';
+import {Alert} from 'react-native';
 import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
@@ -18,8 +19,9 @@ class Navigation {
       const headerRight = params.headerRight?.();
       const type = headerRight?.type;
       if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        console.warn(
-          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
+        Alert.alert(
+          'Rule',
+          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
         );
         delete params.headerRight;
       }

package/Application/NavigationContainer.tsx

@@ -21,10 +21,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
   maxApi,
+  localization,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
+  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
 
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
@@ -38,13 +40,32 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
+      setLanguage(lang);
+    });
+    return () => {
+      listener?.();
+    };
+  }, []);
+
   navigator.current.maxApi = maxApi;
 
+  const translate = (key: string) => {
+    return localization?.[language]?.[key] || key;
+  };
+
   return (
     <SafeAreaProvider>
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
-          value={{theme, navigator: navigator.current, showGrid}}>
+          value={{
+            theme,
+            navigator: navigator.current,
+            showGrid,
+            language,
+            translate,
+          }}>
           <ReactNavigationContainer
             theme={{
               ...theme,

package/Application/index.ts

@@ -1,7 +1,11 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
-import NavigationButton from './NavigationButton';
-import {HeaderRightAction} from './Components';
+import {
+  HeaderRightAction,
+  NavigationButton,
+  HeaderToolkitAction,
+  HeaderTitle,
+} from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
@@ -14,5 +18,7 @@ export {
   Screen,
   NavigationButton,
   HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderTitle,
   BottomTab,
 };

package/Application/types.ts

@@ -1,5 +1,5 @@
-import {Animated, ScrollViewProps, ViewProps} from 'react-native';
-import React, {ReactNode} from 'react';
+import {Animated} from 'react-native';
+import React from 'react';
 import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
@@ -65,6 +65,17 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
+  language: 'vi' | 'en';
+  translate: (key: string) => string;
+};
+
+export type LocalizationObject = {
+  vi: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
 };
 
 export type NavigationContainerProps = {
@@ -72,6 +83,7 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi?: any;
+  localization?: LocalizationObject;
 };
 
 export type NavigationScreenProps = {
@@ -80,19 +92,6 @@ export type NavigationScreenProps = {
   navigation: Navigation;
 };
 
-export interface ScreenProps extends ViewProps {
-  navigation?: Navigation;
-  enableKeyboardAvoidingView?: boolean;
-  headerBackground?: string;
-  scrollable?: boolean;
-  useAnimatedHeader?: boolean;
-  useExtendedHeader?: boolean;
-  scrollViewProps?: ScrollViewProps;
-  footerComponent?: ReactNode;
-  marginHeader?: number;
-  backgroundColor?: string;
-}
-
 export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
@@ -108,6 +107,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
+  useSnap?: boolean;
 }
 
 export type NavigationButtonProps = {
@@ -121,6 +121,7 @@ export type NavigationButtonProps = {
 
 export type NavigationOptions = {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
   surface?: boolean;
   headerTransparent?: boolean;
   hiddenBack?: boolean;
@@ -134,6 +135,7 @@ export type NavigationOptions = {
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
   accessibilityLabel?: string;
 }
 
@@ -169,10 +171,12 @@ export type BottomTabItemProps = {
   showDot?: boolean;
   badgeLabel?: string;
   screen: Screen;
+  options: NavigationOptions;
 };
 
 export type BottomTabProps = {
   tabs: BottomTabItemProps[];
+  navigation: Navigation;
   listeners?: {
     tabPress?: any;
     focus?: any;

package/Application/utils.tsx

@@ -76,6 +76,19 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   let titleProps = {};
   let options = {};
 
+  if (typeof params.onPressLeftHeader === 'function') {
+    options = {
+      ...options,
+      headerLeft: (props: any) => (
+        <HeaderLeft
+          {...props}
+          preventBack={params.preventBack}
+          onPressLeftHeader={params.onPressLeftHeader}
+        />
+      ),
+    };
+  }
+
   if (params.preventBack) {
     options = {
       ...options,