@momo-kits/foundation 0.112.1-optimize.6 → 0.112.1-optimize.6-beta.8

package/Application/BottomTab/index.tsx

@@ -127,6 +127,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
     state?: (e: any) => void;
   } = {
     tabPress: e => {
+      navigator?.maxApi?.triggerEventVibration?.('light');
       listeners?.tabPress?.(e);
     },
     focus: e => {

package/Application/StackScreen.tsx

@@ -28,6 +28,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
     timeLoad: 0,
     timeInteraction: 0,
     widgets: [],
+    params: undefined,
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
@@ -117,6 +118,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'load',
         duration: timeLoad,
         widgets: tracking.current.widgets,
+        params: tracking.current.params,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdLoad,
@@ -165,6 +167,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'interaction',
         duration: tracking.current.timeInteraction - timeLoad,
         totalDuration: tracking.current.timeInteraction,
+        params: tracking.current.params,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdInteraction,
@@ -254,6 +257,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
             onScreenInteraction();
           }, 2000);
         },
+        onSetParams: (data: any) => {
+          tracking.current.params = data;
+        },
       }}>
       <Component heightHeader={heightHeader} {...data} />
       {showGrid && <GridSystem />}

package/Application/index.ts

@@ -16,15 +16,17 @@ import {setAutomationID} from './utils';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
-const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
+const SkeletonContext = createContext({loading: false});
 
 export {
   ApplicationContext,
   MiniAppContext,
   ScreenContext,
   ComponentContext,
+  SkeletonContext,
   NavigationContainer,
   Localize,
   HeaderTitle,

package/Image/index.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, SkeletonContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -19,6 +19,7 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const skeleton = useContext(SkeletonContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
@@ -43,6 +44,15 @@ const Image: React.FC<ImageProps> = ({
         </View>
       );
     }
+
+    if (skeleton.loading) {
+      return (
+        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
+          <Skeleton />
+        </View>
+      );
+    }
+
     return children;
   };
 

package/Layout/Screen.tsx

@@ -23,7 +23,7 @@ import {
   ViewProps,
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ScreenContext} from '../Application';
 import Navigation from '../Application/Navigation';
 import {
   AnimatedHeader,
@@ -148,6 +148,11 @@ export interface ScreenProps extends ViewProps {
    * Optional. Custom headerBackground Image
    */
   headerBackground?: string;
+
+  /**
+   * Optional. Custom tracking params
+   */
+  trackingParams?: object;
 }
 
 const Screen = forwardRef(
@@ -174,11 +179,13 @@ const Screen = forwardRef(
       animatedValue: customAnimatedValue,
       headerBackground,
       gradientColor,
+      trackingParams,
     }: ScreenProps,
     ref: any
   ) => {
     const screenRef = useRef<View | ScrollView>();
     const {theme} = useContext(ApplicationContext);
+    const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const animatedValue = useRef<Animated.Value>(
@@ -195,6 +202,11 @@ const Screen = forwardRef(
       keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
+    /**
+     * inject params for screen tracking
+     */
+    screen?.onSetParams?.(trackingParams);
+
     /**
      * export options for screen
      * @param headerType

package/Skeleton/index.tsx

@@ -1,9 +1,18 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
-import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
+import {
+  Animated,
+  Easing,
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  UIManager,
+  View,
+} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
 import {Colors, Styles} from '../Consts';
 import styles from './styles';
+import {SkeletonContext} from '../Application';
 
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const [width, setWidth] = useState(0);
@@ -24,7 +33,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
         duration: 1000,
         easing: Easing.linear,
         useNativeDriver: Platform.OS !== 'web',
-      }),
+      })
     );
   }, [beginShimmerPosition]);
 
@@ -69,4 +78,35 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   );
 };
 
-export {Skeleton};
+const SkeletonProvider: React.FC<{loading: boolean}> = ({
+  loading = true,
+  children,
+}) => {
+  const [previous, setPrevious] = useState(loading);
+
+  useEffect(() => {
+    if (previous !== loading) {
+      if (Platform.OS === 'android') {
+        if (UIManager.setLayoutAnimationEnabledExperimental) {
+          UIManager.setLayoutAnimationEnabledExperimental(true);
+        }
+      }
+      LayoutAnimation.configureNext({
+        duration: 600,
+        create: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+          property: LayoutAnimation.Properties.opacity,
+        },
+      });
+      setPrevious(loading);
+    }
+  }, [loading]);
+
+  return (
+    <SkeletonContext.Provider value={{loading: previous}}>
+      {children}
+    </SkeletonContext.Provider>
+  );
+};
+
+export {Skeleton, SkeletonProvider};

package/Text/index.tsx

@@ -1,9 +1,14 @@
 import React, {useContext} from 'react';
-import {Text as RNText, TextProps as RNTextProps} from 'react-native';
+import {Text as RNText, TextProps as RNTextProps, View} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {ApplicationContext, setAutomationID} from '../Application';
+import {
+  ApplicationContext,
+  setAutomationID,
+  SkeletonContext,
+} from '../Application';
 import {scaleSize} from './utils';
+import {Skeleton} from '../Skeleton';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -125,7 +130,7 @@ const Text: React.FC<TextProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-
+  const skeleton = useContext(SkeletonContext);
   const textStyle = getTypoStyle(typography, fontFamily);
 
   if (deprecatedValues.includes(typography)) {
@@ -134,6 +139,20 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
+  if (skeleton.loading) {
+    return (
+      <View>
+        <Skeleton
+          style={[
+            style,
+            textStyle,
+            {height: textStyle?.lineHeight * 0.7 * (rest.numberOfLines ?? 1)},
+          ]}
+        />
+      </View>
+    );
+  }
+
   return (
     <RNText
       {...rest}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.112.1-optimize.6",
+  "version": "0.112.1-optimize.6-beta.8",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},