@momo-kits/foundation 0.77.7 → 0.77.8-beta.2

package/Application/BottomTab.tsx

@@ -41,8 +41,8 @@ const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners}) => {
                 alignSelf: 'center',
                 fontFamily: `${theme.font}-Bold`,
               },
-              tabBarIcon: ({color, size}) => (
-                <Icon source={item.icon} color={color} size={size} />
+              tabBarIcon: ({color}) => (
+                <Icon source={item.icon} color={color} size={28} />
               ),
             }}
           />

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 (
@@ -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

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} 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';
@@ -97,7 +96,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
-  const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
+  const bottomSheetRef = useRef(null);
   const mountedRef = useRef(true);
 
   useEffect(() => {

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';
@@ -13,26 +14,23 @@ class Navigation {
     this.theme = theme;
   }
 
-  private verifyParams = (params: NavigationOptions) => {
+  private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.();
-      if (
-        headerRight?.type !== HeaderRightAction &&
-        headerRight?.type !== HeaderToolkitAction
-      ) {
-        console.warn(
-          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
+      const type = headerRight?.type;
+      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
+        Alert.alert(
+          'Rule',
+          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
         );
+        delete params.headerRight;
       }
     }
     return params;
   };
 
-  private filterParams = (params: NavigationOptions) => {
-    return params;
-  };
-
   setOptions = (params: NavigationOptions) => {
+    console.log(params);
     if (__DEV__) {
       params = this.filterParams(params);
     }

package/Application/index.ts

@@ -1,7 +1,6 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
-import NavigationButton from './NavigationButton';
-import {HeaderRightAction} from './Components';
+import {HeaderRightAction, NavigationButton} from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';

package/Application/types.ts

@@ -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;
 }
 

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": []
+}