@momo-kits/foundation 0.75.1-beta.9 → 0.76.1-beta.2

package/{Navigation → Application}/BottomTab.tsx

@@ -1,21 +1,33 @@
-import React, {FC} from 'react';
+import React, {FC, useContext} from 'react';
 import {BottomTabProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {Icon} from '../Icon';
+import {Text} from '../Text';
+import {ApplicationContext} from './index';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: FC<BottomTabProps> = ({tabs}) => {
+const BottomTab: FC<BottomTabProps> = ({tabs, listeners}) => {
+  const {theme} = useContext(ApplicationContext);
   return (
     <Tab.Navigator>
-      {tabs.map((item, index) => {
+      {tabs.map(item => {
         return (
           <Tab.Screen
-            key={`${item.label}-${index}`}
-            name={item.label}
+            key={item.name}
+            name={item.name}
             component={item.screen}
+            listeners={listeners}
             options={{
-              tabBarLabel: item.label,
+              tabBarLabel: ({color, focused}) => {
+                return (
+                  <Text
+                    typography={focused ? 'label_xs' : 'description_xs'}
+                    color={color}>
+                    {item.label}
+                  </Text>
+                );
+              },
               tabBarBadge: item?.badgeLabel,
               tabBarBadgeStyle: {
                 borderColor: 'white',
@@ -24,6 +36,7 @@ const BottomTab: FC<BottomTabProps> = ({tabs}) => {
                 lineHeight: 14,
                 fontWeight: 'bold',
                 alignSelf: 'center',
+                fontFamily: `${theme.font}-Bold`,
               },
               tabBarIcon: ({color, size}) => (
                 <Icon source={item.icon} color={color} size={size} />

package/{Navigation → Application}/Components.tsx

@@ -16,9 +16,8 @@ import {
   HeaderToolkitProps,
   TitleCustomProps,
 } from './types';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
-import Observer from './Observer';
 import {PopupNotify} from '../Popup';
 
 const styles = StyleSheet.create({
@@ -45,12 +44,13 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.black_01,
   },
+  headerButton: {paddingHorizontal: 4},
   headerRightButton: {
     flexDirection: 'row',
     overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: Spacing.M,
+    paddingRight: Spacing.S,
   },
   toolkitContainer: {
     marginLeft: Spacing.S,
@@ -70,7 +70,11 @@ const styles = StyleSheet.create({
   headerLeft: {
     marginLeft: 12,
   },
-  title: {fontSize: 15, lineHeight: 22, fontWeight: 'bold'},
+  title: {
+    fontSize: scaleSize(15),
+    lineHeight: scaleSize(22),
+    fontWeight: 'bold',
+  },
 });
 
 const HeaderTitle: React.FC<any> = props => {
@@ -80,6 +84,7 @@ const HeaderTitle: React.FC<any> = props => {
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
+
   return (
     <Animated.Text
       {...props}
@@ -145,6 +150,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   backgroundColor,
   animatedValue,
+  useBorder = false,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
@@ -164,7 +170,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         {
           backgroundColor: backgroundColor ?? theme.colors.background.default,
           overflow: 'hidden',
-          borderBottomWidth: headerImage ? 0 : 1,
+          borderBottomWidth: useBorder ? 1 : 0,
           borderColor: theme.colors.border.default,
           opacity,
         },
@@ -212,7 +218,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validType = (item: any) => {
-    if (item.type !== NavigationButton) {
+    if (__DEV__ && item.type !== NavigationButton) {
       console.warn(
         'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
       );
@@ -222,19 +228,21 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const renderAction = () => {
     if (Array.isArray(children)) {
       return children.map((child, index) => {
-        if (__DEV__) {
-          validType(child);
-        }
+        validType(child);
         return (
-          <React.Fragment key={index}>
+          <View key={index} style={styles.headerButton}>
             {React.cloneElement(child, {...restProps})}
-          </React.Fragment>
+          </View>
         );
       });
     }
 
     validType(children);
-    return React.cloneElement(children, {...restProps});
+    return (
+      <View style={styles.headerButton}>
+        {React.cloneElement(children, {...restProps})}
+      </View>
+    );
   };
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
@@ -250,7 +258,7 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   }
 
   useEffect(() => {
-    navigator?.getToolkit().then(toolConfig => {
+    navigator?.getToolkit().then((toolConfig: any) => {
       setToolConfig(toolConfig);
     });
   }, []);
@@ -309,9 +317,10 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   };
 
   const renderUtilityTool = () => {
-    if (toolConfig?.hidden === false) {
+    if (hidden === false) {
       return (
         <NavigationButton
+          accessibilityLabel={'UtilityTool'}
           icon={type as string}
           tintColor={tintColor}
           onPress={onUtilityTool}
@@ -339,7 +348,7 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-            accessibilityLabel={'Toolkit/Close'}
+            accessibilityLabel={`Toolkit/Close`}
             onPress={onClose}>
             <Icon
               color={tintColor}

package/{Navigation → Application}/ModalScreen.tsx

@@ -33,21 +33,23 @@ const ModalScreen: React.FC<any> = props => {
   return <Modal {...props} />;
 };
 
-const Modal: React.FC<ModalParams> = ({navigation, route}) => {
-  const {theme} = useContext(ApplicationContext);
-  const {screen, barrierDismissible}: ModalParams = route.params;
+const Modal: React.FC<ModalParams> = props => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {screen, barrierDismissible}: ModalParams = props.route.params;
   const Component = useRef(screen).current;
+  const navigation = new Navigation(props.navigation, theme);
   const params = {
-    ...route.params,
-    navigation: new Navigation(navigation, theme),
+    ...props.route.params,
+    navigation,
   };
+
   delete params.screen;
 
-  const onDismiss = (pop = true) => {
+  const onDismiss = () => {
     if (barrierDismissible) {
       return;
     }
-    navigation.pop();
+    navigator?.pop();
   };
 
   return (
@@ -81,14 +83,16 @@ const Modal: React.FC<ModalParams> = ({navigation, route}) => {
   );
 };
 
-const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
-  const {theme} = useContext(ApplicationContext);
-  const {screen, options}: BottomSheetParams = route.params;
+const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {screen, options}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
+  const navigation = new Navigation(props.navigation, theme);
   const params = {
-    ...route.params,
-    navigation: new Navigation(navigation, theme),
+    ...props.route.params,
+    navigation,
   };
+
   delete params.screen;
 
   const snapPoints = useMemo(() => ['50%', '90%'], []);
@@ -123,7 +127,7 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
         snapPoints={snapPoints}
         onDismiss={() => {
           if (mountedRef.current) {
-            navigation.pop();
+            navigator?.pop();
           }
         }}
         handleComponent={null}

package/{Navigation → Application}/Navigation.ts

@@ -5,15 +5,15 @@ import {getOptions} from './utils';
 import {HeaderToolkitAction} from './Components';
 
 class Navigation {
-  instance: NavigationProp<any>;
-  theme: Theme;
+  private instance: NavigationProp<any>;
+  private readonly theme: Theme;
 
   constructor(instance: any, theme: Theme) {
     this.instance = instance;
     this.theme = theme;
   }
 
-  verifyParams = (params: NavigationOptions) => {
+  private verifyParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.();
       if (
@@ -28,13 +28,13 @@ class Navigation {
     return params;
   };
 
-  filterParams = (params: NavigationOptions) => {
+  private filterParams = (params: NavigationOptions) => {
     return params;
   };
 
   setOptions = (params: NavigationOptions) => {
     if (__DEV__) {
-      params = this.verifyParams(params);
+      params = this.filterParams(params);
     }
     params = getOptions(params, this.theme);
     this.instance.setOptions(params);

package/{Navigation → Application}/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, useEffect, useRef} from 'react';
+import React, {useRef} from 'react';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
@@ -11,12 +11,12 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {GridSystem} from '../Layout';
-import {defaultContext, GRIDVIEW} from '../Consts';
+import {GRIDVIEW} from '../Consts';
 import {NavigationContainerProps} from './types';
+import {ApplicationContext} from './index';
 
 const Stack = createStackNavigator();
 
-const ApplicationContext = createContext(defaultContext);
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,

package/{Navigation → Application}/StackScreen.tsx

@@ -1,23 +1,23 @@
 import React, {useContext, useEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext} from './NavigationContainer';
+import {ApplicationContext} from './index';
 
-const StackScreen: React.FC<any> = props => {
-  const {route, navigation} = props;
-  const {screen: Component, options}: ScreenParams = route.params;
+const StackScreen: React.FC<ScreenParams> = props => {
+  const {screen: Component, options}: ScreenParams = props.route.params;
   const {theme, navigator} = useContext(ApplicationContext);
+  const navigation = new Navigation(props.navigation, theme);
 
   const params = {
-    ...route.params,
-    navigation: new Navigation(navigation, theme),
+    ...props.route.params,
+    navigation,
   };
 
   delete params.screen;
 
   useEffect(() => {
     if (options) {
-      params.navigation.setOptions(options);
+      navigation.setOptions(options);
     }
   }, [options]);
 

package/{Navigation → Application}/index.ts

@@ -1,13 +1,17 @@
-import {NavigationContainer, ApplicationContext} from './NavigationContainer';
-import ScreenContainer from '../Layout/ScreenContainer';
+import {NavigationContainer} from './NavigationContainer';
+import Screen from '../Layout/Screen';
 import NavigationButton from './NavigationButton';
 import {HeaderRightAction} from './Components';
 import BottomTab from './BottomTab';
+import {createContext} from 'react';
+import {defaultContext} from '../Consts';
+
+const ApplicationContext = createContext(defaultContext);
 
 export {
   NavigationContainer,
   ApplicationContext,
-  ScreenContainer,
+  Screen,
   NavigationButton,
   HeaderRightAction,
   BottomTab,

package/{Navigation → Application}/types.ts

@@ -1,7 +1,8 @@
 import {Animated, ScrollViewProps, ViewProps} from 'react-native';
-import React from 'react';
+import React, {ReactNode} from 'react';
 import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
+import Navigation from './Navigation';
 
 export type Theme = {
   dark: boolean;
@@ -70,13 +71,22 @@ export type NavigationContainerProps = {
   maxApi?: any;
 };
 
-export interface ScreenContainerProps extends ViewProps {
+export type NavigationScreenProps = {
+  [key: string]: any;
+  options?: NavigationOptions;
+  navigation: Navigation;
+};
+
+export interface ScreenProps extends ViewProps {
+  navigation?: Navigation;
   enableKeyboardAvoidingView?: boolean;
   headerBackground?: string;
   scrollable?: boolean;
-  scrollY?: Animated.Value;
+  useAnimatedHeader?: boolean;
+  useExtendedHeader?: boolean;
   scrollViewProps?: ScrollViewProps;
-  footerComponent?: React.ElementType;
+  footerComponent?: ReactNode;
+  marginHeader?: number;
 }
 
 export type ScreenParams = {
@@ -88,7 +98,7 @@ export type ScreenParams = {
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
   screen: React.ElementType;
-  onDismiss?: (mounted?: boolean) => void;
+  onDismiss?: () => void;
   barrierDismissible?: boolean;
 }
 
@@ -109,7 +119,9 @@ export type NavigationButtonProps = {
 export type NavigationOptions = {
   preventBack?: PopupNotifyProps;
   surface?: boolean;
+  headerTransparent?: boolean;
   title?: string;
+  headerTitle?: (props?: any) => React.ReactElement;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
   headerRight?: (props?: any) => React.ReactElement;
@@ -124,6 +136,7 @@ export type HeaderBackgroundProps = {
   image?: string | null;
   backgroundColor?: string | null;
   animatedValue?: Animated.Value;
+  useBorder?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -145,6 +158,7 @@ export type HeaderToolkitProps = {
 };
 
 export type BottomTabItemProps = {
+  name: string;
   label: string;
   icon: string;
   showDot?: boolean;
@@ -154,4 +168,8 @@ export type BottomTabItemProps = {
 
 export type BottomTabProps = {
   tabs: BottomTabItemProps[];
+  listeners?: {
+    tabPress?: any;
+    focus?: any;
+  };
 };

package/{Navigation → Application}/utils.tsx

@@ -26,7 +26,7 @@ const getTintColor = (theme: Theme): any => {
 
 const getStackOptions = (theme: Theme): StackNavigationOptions => {
   return {
-    headerTitleAlign: 'center',
+    headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
     headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
@@ -37,7 +37,7 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
 
 const getDialogOptions = (theme: Theme): StackNavigationOptions => {
   return {
-    headerTitleAlign: 'center',
+    headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerBackground: HeaderBackground,
@@ -96,6 +96,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
       ...backgroundProps,
       image: null,
       backgroundColor: theme.colors.background.surface,
+      useBorder: true,
     };
   } else {
     backgroundProps = {};
@@ -105,9 +106,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   if (params.animatedValue) {
     backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
     titleProps = {...titleProps, animatedValue: params.animatedValue};
-    options = {...options, headerTransparent: true};
-  } else {
-    options = {...options, headerTransparent: false};
   }
 
   if (params.customTitle) {
@@ -118,7 +116,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
         return <HeaderCustom {...params.customTitle} {...props} />;
       },
     };
-  } else {
+  } else if (!params.headerTitle) {
     options = {
       ...options,
       headerTitle: (props: any) => {

package/Assets/icon.json

@@ -3943,5 +3943,11 @@
   },
   "ic_minus": {
     "uri": "https://img.mservice.com.vn/app/img/kits/minus.png"
+  },
+  "ic_navigation": {
+    "uri": "https://static.momocdn.net/app/img/kits/ic_navigation.png"
+  },
+  "ic_money_bag": {
+    "uri": "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
   }
 }

package/Button/index.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors} from '../Consts';

package/CheckBox/index.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 

package/Consts/theme.ts

@@ -1,4 +1,4 @@
-import {Context, Theme} from '../Navigation/types';
+import {Context, Theme} from '../Application/types';
 import {Colors} from './colors+spacing+radius';
 
 const defaultTheme: Theme = {

package/Divider/index.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const Divider = () => {
   const {theme} = useContext(ApplicationContext);

package/Icon/index.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import IconSources from '../Assets/icon.json';
 import {IconProps} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 
 const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
@@ -20,7 +20,7 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
 
   return (
     <Image
-      accessibilityLabel={`Icon/${getIconSource()}`}
+      accessibilityLabel={`Icon/${getIconSource()?.uri}`}
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}

package/IconButton/index.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';

package/Image/index.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useState} from 'react';
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -56,7 +56,9 @@ const Image: React.FC<ImageProps> = ({
   return (
     <View
       style={[styles.container, style]}
-      accessibilityLabel={`Image/${accessibilityLabel ?? source}`}>
+      accessibilityLabel={`Image/${
+        accessibilityLabel ?? (typeof source === 'number' ? source : source.uri)
+      }`}>
       <FastImage
         {...rest}
         source={source}

package/Input/Input.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
@@ -86,6 +86,7 @@ const Input: FC<InputProps> = ({
         <View style={styles.inputView}>
           <TextInput
             {...props}
+            accessibilityLabel={`TextInput`}
             editable={!disabled}
             textAlignVertical="top"
             ref={inputRef}

package/Input/InputMoney.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
@@ -86,6 +86,7 @@ const InputMoney: FC<InputMoneyProps> = ({
         <View style={styles.inputView}>
           <TextInput
             {...props}
+            accessibilityLabel={`TextInput`}
             editable={!disabled}
             textAlignVertical="top"
             ref={inputRef}

package/Input/InputSearch.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
@@ -26,6 +26,7 @@ const InputSearch: FC<InputSearchProps> = ({
   showBorder = true,
   style,
   defaultValue,
+  onPressButtonText,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -73,6 +74,7 @@ const InputSearch: FC<InputSearchProps> = ({
     return (
       <TextInput
         {...props}
+        accessibilityLabel={`TextInput`}
         textAlignVertical="top"
         ref={inputRef}
         style={[
@@ -148,7 +150,7 @@ const InputSearch: FC<InputSearchProps> = ({
         {renderIconView()}
       </View>
       {showButtonText && (
-        <TouchableOpacity>
+        <TouchableOpacity onPress={onPressButtonText}>
           <Text typography={'action_default'} style={styles.textButton}>
             {buttonText}
           </Text>