@momo-kits/foundation 0.77.8 → 0.78.1

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,14 +1,14 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
+  Dimensions,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   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 +85,12 @@ 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 {height} = Dimensions.get('window');
+  const {
+    screen,
+    options,
+    snapPoints = [height * 0.5, height * 0.9],
+  }: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -95,11 +100,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   delete params.screen;
 
-  const snapPoints = useMemo(() => ['50%', '90%'], []);
-  const {bottom} = useSafeAreaInsets();
-  const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
+  const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
   useEffect(() => {
     bottomSheetRef.current?.present();
     return () => {
@@ -115,16 +123,11 @@ 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
         ref={bottomSheetRef}
-        snapPoints={snapPoints}
+        snapPoints={snapPoints?.map(item => item + 68)}
         onDismiss={() => {
           if (mountedRef.current) {
             navigator?.pop();
@@ -132,9 +135,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View
-          style={{paddingBottom: bottom}}
-          accessibilityLabel={'BottomSheet'}>
+        <View 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;
+  snapPoints?: ReadonlyArray<number>;
 }
 
 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,

package/Assets/DotAnimation.json

@@ -0,0 +1,256 @@
+{
+  "v": "4.8.0",
+  "meta": {"g": "LottieFiles AE 3.2.2", "a": "", "k": "", "d": "", "tc": ""},
+  "fr": 60,
+  "ip": 10,
+  "op": 54,
+  "w": 52,
+  "h": 20,
+  "nm": "Dot 10",
+  "ddd": 0,
+  "assets": [
+    {
+      "id": "comp_0",
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 4,
+          "nm": "1",
+          "sr": 1,
+          "ks": {
+            "o": {"a": 0, "k": 100, "ix": 11},
+            "r": {"a": 0, "k": 0, "ix": 10},
+            "p": {
+              "a": 1,
+              "k": [
+                {
+                  "i": {"x": 0.711, "y": 1},
+                  "o": {"x": 0.26, "y": 0.24},
+                  "t": 0,
+                  "s": [-14, 11, 0],
+                  "to": [0, -1.172, 0],
+                  "ti": [0, -0.21, 0]
+                },
+                {
+                  "i": {"x": 0.667, "y": 1},
+                  "o": {"x": 0.333, "y": 0},
+                  "t": 17,
+                  "s": [-14, 5, 0],
+                  "to": [0, 0.333, 0],
+                  "ti": [0, -1, 0]
+                },
+                {
+                  "i": {"x": 0.833, "y": 0.542},
+                  "o": {"x": 0.333, "y": 0},
+                  "t": 30,
+                  "s": [-14, 13, 0],
+                  "to": [0, 1, 0],
+                  "ti": [0, 0.333, 0]
+                },
+                {"t": 45, "s": [-14, 11, 0]}
+              ],
+              "ix": 2
+            },
+            "a": {"a": 0, "k": [-40, 0, 0], "ix": 1},
+            "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "d": 1,
+                  "ty": "el",
+                  "s": {"a": 0, "k": [12, 12], "ix": 2},
+                  "p": {"a": 0, "k": [0, 0], "ix": 3},
+                  "nm": "Ellipse Path 1",
+                  "mn": "ADBE Vector Shape - Ellipse",
+                  "hd": false
+                },
+                {
+                  "ty": "st",
+                  "c": {"a": 0, "k": [1, 1, 1, 1], "ix": 3},
+                  "o": {"a": 0, "k": 100, "ix": 4},
+                  "w": {"a": 0, "k": 0, "ix": 5},
+                  "lc": 1,
+                  "lj": 1,
+                  "ml": 4,
+                  "bm": 0,
+                  "nm": "Stroke 1",
+                  "mn": "ADBE Vector Graphic - Stroke",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "i": {"x": [0.833], "y": [0.833]},
+                        "o": {"x": [0.167], "y": [0.167]},
+                        "t": 0,
+                        "s": [0.968627510819, 0.674509803922, 0.835294177485, 1]
+                      },
+                      {
+                        "i": {"x": [0.833], "y": [0.833]},
+                        "o": {"x": [0.167], "y": [0.167]},
+                        "t": 17,
+                        "s": [0.921568632126, 0.184313729405, 0.588235318661, 1]
+                      },
+                      {
+                        "t": 35,
+                        "s": [0.968627510819, 0.674509803922, 0.835294177485, 1]
+                      }
+                    ],
+                    "ix": 4
+                  },
+                  "o": {"a": 0, "k": 100, "ix": 5},
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fill 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": {"a": 0, "k": [-20, 1], "ix": 2},
+                  "a": {"a": 0, "k": [0, 0], "ix": 1},
+                  "s": {"a": 0, "k": [100, 100], "ix": 3},
+                  "r": {"a": 0, "k": 0, "ix": 6},
+                  "o": {"a": 0, "k": 100, "ix": 7},
+                  "sk": {"a": 0, "k": 0, "ix": 4},
+                  "sa": {"a": 0, "k": 0, "ix": 5},
+                  "nm": "Transform"
+                }
+              ],
+              "nm": "Ellipse 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 45,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    }
+  ],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 0,
+      "nm": "Dot 0",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [6, 10, 0], "ix": 2},
+        "a": {"a": 0, "k": [-34, 10, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "tm": {
+        "a": 1,
+        "k": [
+          {
+            "i": {"x": [0.833], "y": [0.833]},
+            "o": {"x": [0.167], "y": [0.167]},
+            "t": 10,
+            "s": [0]
+          },
+          {"t": 54, "s": [0.733]}
+        ],
+        "ix": 2,
+        "x": "var $bm_rt;\n$bm_rt = loopOut('cycle', 0);"
+      },
+      "w": 12,
+      "h": 20,
+      "ip": 10,
+      "op": 90,
+      "st": 10,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 0,
+      "nm": "Dot 0",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [6, 10, 0], "ix": 2},
+        "a": {"a": 0, "k": [-14, 10, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "tm": {
+        "a": 1,
+        "k": [
+          {
+            "i": {"x": [0.833], "y": [0.833]},
+            "o": {"x": [0.167], "y": [0.167]},
+            "t": 5,
+            "s": [0]
+          },
+          {"t": 49, "s": [0.733]}
+        ],
+        "ix": 2,
+        "x": "var $bm_rt;\n$bm_rt = loopOut('cycle', 0);"
+      },
+      "w": 12,
+      "h": 20,
+      "ip": 5,
+      "op": 85,
+      "st": 5,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 0,
+      "nm": "Dot 0",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [6, 10, 0], "ix": 2},
+        "a": {"a": 0, "k": [6, 10, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "tm": {
+        "a": 1,
+        "k": [
+          {
+            "i": {"x": [0.833], "y": [0.833]},
+            "o": {"x": [0.167], "y": [0.167]},
+            "t": 0,
+            "s": [0]
+          },
+          {"t": 44, "s": [0.733]}
+        ],
+        "ix": 2,
+        "x": "var $bm_rt;\n$bm_rt = loopOut('cycle', 0);"
+      },
+      "w": 12,
+      "h": 20,
+      "ip": 0,
+      "op": 80,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}