@momo-kits/foundation 0.151.1-test.5 → 0.151.1-test.7

package/Application/BottomTab/Badge.tsx

@@ -77,6 +77,18 @@ export function Badge({
   const borderRadius = size / 2;
   const fontSize = Math.floor((size * 3) / 4);
 
+  const isNumber = () => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(children));
+  };
+
+  const formatTitle = () => {
+    if (isNumber() && Number(children) > 99) {
+      return '99+';
+    }
+    return children;
+  };
+
   return (
     <Animated.Text
       numberOfLines={1}
@@ -103,8 +115,9 @@ export function Badge({
         styles.container,
         restStyle,
       ]}
-      {...rest}>
-      {children}
+      {...rest}
+    >
+      {formatTitle()}
     </Animated.Text>
   );
 }

package/Application/BottomTab/index.tsx

@@ -5,13 +5,7 @@ import {
   useFocusEffect,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   Animated,
@@ -27,7 +21,7 @@ import { exportFontFamily, Text } from '../../Text';
 import { ApplicationContext, MiniAppContext } from '../index';
 import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
-import { getOptions, getStackOptions } from '../utils';
+import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
@@ -44,9 +38,10 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const opacity = useRef(new Animated.Value(opacityValue)).current;
   const scale = useRef(new Animated.Value(scaleValue)).current;
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
+  const { isBackgroundToForeground } = useAppState();
 
-  const onScreenNavigated = useCallback(
-    (pre: string, current: string) => {
+  const onScreenNavigated = (pre: string, current: string) => {
+    if (!isBackgroundToForeground) {
       const data: any = {
         preScreenName: pre,
         screenName: current,
@@ -68,9 +63,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         message: `${screenName} screen_navigated`,
         type: 'ERROR',
       });
-    },
-    [context, navigator?.maxApi, screenName],
-  );
+    }
+  };
 
   useFocusEffect(
     React.useCallback(

package/Application/StackScreen.tsx

@@ -6,6 +6,7 @@ import Navigation from './Navigation';
 import { ApplicationContext, MiniAppContext, ScreenContext } from './index';
 import { GridSystem } from '../Layout';
 import { version } from '../package.json';
+import { useAppState } from './utils';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -48,6 +49,7 @@ const StackScreen: React.FC<any> = props => {
   } = props.route.params;
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
+  const { isBackgroundToForeground } = useAppState();
 
   const data = {
     ...initialParams,
@@ -140,29 +142,31 @@ const StackScreen: React.FC<any> = props => {
   }, []);
 
   const onScreenNavigated = (pre: string, current: string) => {
-    const item: any = {
-      preScreenName: pre,
-      screenName: current,
-      componentName: 'Screen',
-      state: 'navigated',
-      action: tracking.current?.mounted ? 'back' : 'push',
-    };
+    if (!isBackgroundToForeground) {
+      const item: any = {
+        preScreenName: pre,
+        screenName: current,
+        componentName: 'Screen',
+        state: 'navigated',
+        action: tracking.current?.mounted ? 'back' : 'push',
+      };
+
+      context?.autoTracking?.({
+        ...context,
+        ...item,
+      });
 
-    context?.autoTracking?.({
-      ...context,
-      ...item,
-    });
-
-    tracking.current.mounted = true;
-
-    /**
-     * debug toast
-     */
-    navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${screenName} screen_navigated`,
-      type: 'ERROR',
-    });
+      tracking.current.mounted = true;
+
+      /**
+       * debug toast
+       */
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${screenName} screen_navigated`,
+        type: 'ERROR',
+      });
+    }
   };
 
   /**

package/Application/utils.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import {
   StackNavigationOptions,
   TransitionPresets,
@@ -12,7 +12,7 @@ import {
 } from './Components';
 import { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { Animated, Platform } from 'react-native';
+import { Animated, AppState, Platform } from 'react-native';
 import { MiniAppContext, ScreenContext, TrackingScopeContext } from './index';
 
 /**
@@ -205,6 +205,36 @@ export const getImageName = (source: any): string => {
   return '';
 };
 
+const useAppState = () => {
+  const isBackgroundToForeground = useRef(false);
+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      isBackgroundToForeground.current = !!(
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      );
+      appState.current = nextAppState;
+
+      if (isBackgroundToForeground.current) {
+        setTimeout(() => {
+          isBackgroundToForeground.current = false;
+        }, 100);
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return {
+    isBackgroundToForeground: isBackgroundToForeground.current,
+    appState: appState.current,
+  };
+};
+
 export {
   getStackOptions,
   getModalOptions,
@@ -212,4 +242,5 @@ export {
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
+  useAppState,
 };

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext, useRef } from 'react';
 import {
   Animated,
   StyleSheet,
@@ -18,8 +18,8 @@ import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
-import {Loader} from '../Loader';
 import {Skeleton} from '../Skeleton';
+import LottieView from 'lottie-react-native';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -98,6 +98,7 @@ const Button: FC<ButtonProps> = ({
   const {theme, config} = useContext(ApplicationContext);
   const skeleton = useContext(SkeletonContext);
   const componentName = 'Button';
+  const animationRef = useRef<LottieView>(null);
 
   const {componentId} = useComponentId(
     `${componentName}/${title}`,
@@ -105,6 +106,7 @@ const Button: FC<ButtonProps> = ({
   );
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
+  const isDisabled = type === 'disabled' || loading;
 
   if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
@@ -247,7 +249,16 @@ const Button: FC<ButtonProps> = ({
 
     if (loading) {
       return (
-        <View
+        <LottieView
+          ref={animationRef}
+          source={require('./lottie_circle_loader.json')}
+          autoPlay
+          loop
+          colorFilters={[
+            { keypath: 'loading 2.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'loading 3.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'base pink 2.Ellipse 1.Stroke 1', color: textColor },
+          ]}
           style={[
             styles.trailing,
             {
@@ -256,9 +267,8 @@ const Button: FC<ButtonProps> = ({
               marginRight,
               borderRadius: Spacing.M,
             },
-          ]}>
-          <Loader type="spinner" color={getTextColor()} />
-        </View>
+          ]}
+        />
       );
     }
     if (iconLeft) {
@@ -299,6 +309,7 @@ const Button: FC<ButtonProps> = ({
     getSizeStyle(),
     getTypeStyle(),
     full && {width: '100%'},
+    loading && {opacity: 0.75}
   ]);
 
   if (skeleton?.loading) {
@@ -318,11 +329,11 @@ const Button: FC<ButtonProps> = ({
         accessibilityLabel={componentId}
         accessibilityRole="button"
         accessibilityState={{
-          disabled: type === 'disabled',
+          disabled: isDisabled,
           busy: loading,
           ...accessibilityState,
         }}
-        disabled={type === 'disabled'}
+        disabled={isDisabled}
         activeOpacity={0.5}
         style={buttonStyle}>
         {renderLeading()}

package/Button/lottie_circle_loader.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":30,"ip":0,"op":20,"w":100,"h":100,"nm":"Spinner3.1_Refine","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":12,"ty":4,"nm":"loading 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"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":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"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},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"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":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"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},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"base pink 2","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"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":[0.996078431373,0.972549019608,0.988235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"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":20,"st":0,"ct":1,"bm":0}],"markers":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.151.1-test.5",
+    "version": "0.151.1-test.7",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},