@momo-kits/foundation 0.77.1-optimize.2 → 0.77.1-optimzie.4

package/Application/BottomTab/BottomTabBar.tsx

@@ -46,8 +46,6 @@ type Options = {
 };
 
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
-const DEFAULT_TABBAR_HEIGHT = 49;
-const COMPACT_TABBAR_HEIGHT = 32;
 
 const shouldUseHorizontalLabels = ({
   state,
@@ -87,38 +85,6 @@ const shouldUseHorizontalLabels = ({
 const getPaddingBottom = (insets: EdgeInsets) =>
   Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
 
-export const getTabBarHeight = ({
-  dimensions,
-  insets,
-  style,
-  ...rest
-}: Options & {
-  insets: EdgeInsets;
-  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-}) => {
-  // @ts-ignore
-  const customHeight = StyleSheet.flatten(style)?.height;
-
-  if (typeof customHeight === 'number') {
-    return customHeight;
-  }
-
-  const isLandscape = dimensions.width > dimensions.height;
-  const horizontalLabels = shouldUseHorizontalLabels({dimensions, ...rest});
-  const paddingBottom = getPaddingBottom(insets);
-
-  if (
-    Platform.OS === 'ios' &&
-    !Platform.isPad &&
-    isLandscape &&
-    horizontalLabels
-  ) {
-    return COMPACT_TABBAR_HEIGHT + paddingBottom;
-  }
-
-  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
-};
-
 export default function BottomTabBar({
   state,
   navigation,
@@ -409,7 +375,7 @@ export default function BottomTabBar({
           position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
-          paddingBottom: paddingBottom - 0,
+          paddingBottom: paddingBottom,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
@@ -464,7 +430,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 48,
     width: 48,
-
     borderRadius: 100,
     top: -12,
   },

package/Application/BottomTab/index.tsx

@@ -75,7 +75,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       )}
       tabBarOptions={{
         style: {
-          height: 68 + Math.min(insets.bottom, 21),
+          height: 64 + Math.min(insets.bottom, 21),
         },
         tabStyle: {
           height: 68,

package/Application/StackScreen.tsx

@@ -62,6 +62,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
     tracked.current.timeoutInteraction = setTimeout(() => {
       onScreenInteraction();
     }, 5000);
+
     return () => {
       onScreenLoad();
       onScreenInteraction();
@@ -74,13 +75,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const onScreenLoad = () => {
     clearTimeout(tracked.current.timeoutLoad);
     if (!tracked.current?.releaseLoad) {
-      navigator?.maxApi?.dispatchFunction?.('autoTracking', {
+      context.autoTracking?.({
         appId: context.appId,
         code: context.code,
+        buildNumber: context.buildNumber,
         screenName,
         componentName: 'Screen',
         state: 'load',
-        time: timeLoad.current,
+        duration: timeLoad.current,
       });
       navigator?.maxApi?.showToastDebug?.({
         appId: `auto - ${context.appId}`,
@@ -96,13 +98,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const onScreenInteraction = () => {
     clearTimeout(tracked.current.timeoutInteraction);
     if (!tracked.current?.releaseInteraction) {
-      navigator?.maxApi?.dispatchFunction?.('autoTracking', {
+      context.autoTracking?.({
         appId: context.appId,
         code: context.code,
+        buildNumber: context.buildNumber,
         screenName,
         componentName: 'Screen',
         state: 'interaction',
-        time: timeInteraction.current,
+        duration: timeInteraction.current - timeLoad.current,
       });
 
       navigator?.maxApi?.showToastDebug?.({

package/Application/utils.tsx

@@ -12,8 +12,7 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import {Platform} from 'react-native';
-const isIOS = Platform.OS === 'ios';
+
 /**
  * default options for stack screen
  */
@@ -142,22 +141,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-const getAccessibilityID = (
-  key = '',
-  override: string | undefined = undefined,
-) => {
-  if (isIOS) {
-    return {
-      accessible: true,
-      testID: override || key,
-    };
-  } else {
-    return {
-      accessibilityLabel: override || key,
-    };
-  }
-};
-
 const formatNameLength = (name = '') => {
   let formattedName = name;
   if (formattedName.length > 100) {
@@ -171,5 +154,4 @@ export {
   getModalOptions,
   getOptions,
   formatNameLength,
-  getAccessibilityID,
 };

package/Icon/index.tsx

@@ -33,6 +33,7 @@ const Icon: React.FC<IconProps> = ({
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
+      resizeMode='contain'
       {...tintColorProps}
     />
   );

package/Image/index.tsx

@@ -2,7 +2,11 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext, ComponentContext, MiniAppContext} from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -30,9 +34,9 @@ const Image: React.FC<ImageProps> = ({
   };
 
   useEffect(() => {
-    if(app.enableAutoId){
+    if (app.enableAutoId) {
       component?.addChildren?.(test.accessibilityLabel, 'add');
-      return () => component?.addChildren(test.accessibilityLabel, 'remove');
+      return () => component?.addChildren?.(test.accessibilityLabel, 'remove');
     }
   }, []);
 
@@ -57,37 +61,37 @@ const Image: React.FC<ImageProps> = ({
   };
 
   return (
-      <FastImage
-          {...rest}
-          {...test}
-          source={source}
-          style={[styles.container, style]}
-          onProgress={() => {
-            error.current = false;
-            if (status !== 'loading' && loading) {
-              setStatus('loading');
-            }
-          }}
-          onLoadStart={() => {
-            error.current = false;
-          }}
-          onLoad={() => {
-            error.current = false;
-          }}
-          onLoadEnd={() => {
-            let current: Status = 'success';
-            if (error.current) {
-              current = 'error';
-            }
-            if (status !== current) {
-              setStatus(current);
-            }
-          }}
-          onError={() => {
-            error.current = true;
-          }}>
-        {renderContent()}
-      </FastImage>
+    <FastImage
+      {...rest}
+      {...test}
+      source={source}
+      style={[styles.container, style]}
+      onProgress={() => {
+        error.current = false;
+        if (status !== 'loading' && loading) {
+          setStatus('loading');
+        }
+      }}
+      onLoadStart={() => {
+        error.current = false;
+      }}
+      onLoad={() => {
+        error.current = false;
+      }}
+      onLoadEnd={() => {
+        let current: Status = 'success';
+        if (error.current) {
+          current = 'error';
+        }
+        if (status !== current) {
+          setStatus(current);
+        }
+      }}
+      onError={() => {
+        error.current = true;
+      }}>
+      {renderContent()}
+    </FastImage>
   );
 };
 

package/Layout/FloatingButton.tsx

@@ -4,6 +4,7 @@ import {
   LayoutChangeEvent,
   StyleSheet,
   TouchableOpacity,
+  View,
 } from 'react-native';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
@@ -18,9 +19,11 @@ export interface FloatingButtonProps {
   size?: 'small' | 'large';
   animatedValue?: Animated.Value;
   bottom?: number;
+  renderComponent?: () => React.ReactNode;
 }
 
 export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  renderComponent,
   label = '',
   onPress = () => {},
   position = 'right',
@@ -35,31 +38,33 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const minWidth = size == 'small' ? 36 : 48;
   const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
   const lastOffset = useRef(0);
-  const debounce = useRef<any>();
+  const lastDirection = useRef<string>();
   const [showText, setShowText] = React.useState(true);
 
   useEffect(() => {
     if (!label) return;
 
     const listener = animatedValue?.addListener(({value}) => {
-      clearTimeout(debounce.current);
-      debounce.current = setTimeout(() => {
-        const down = value > lastOffset.current;
+      if (value !== lastOffset.current) {
+        const direction = value > lastOffset.current ? 'down' : 'up';
         lastOffset.current = value;
-        if (down) {
-          Animated.timing(widthAnimated!, {
-            toValue: minWidth,
-            duration: 300,
-            useNativeDriver: false,
-          }).start(() => setShowText(false));
-        } else {
-          Animated.timing(widthAnimated!, {
-            toValue: maxWidth.current,
-            duration: 300,
-            useNativeDriver: false,
-          }).start(() => setShowText(true));
+        if (lastDirection.current !== direction) {
+          lastDirection.current = direction;
+          if (direction === 'down') {
+            Animated.timing(widthAnimated!, {
+              toValue: minWidth,
+              duration: 200,
+              useNativeDriver: false,
+            }).start(() => setShowText(false));
+          } else {
+            Animated.timing(widthAnimated!, {
+              toValue: maxWidth.current,
+              duration: 200,
+              useNativeDriver: false,
+            }).start(() => setShowText(true));
+          }
         }
-      }, 500);
+      }
     });
 
     return () => {
@@ -76,6 +81,23 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     setWidthAnimated(new Animated.Value(layout.width));
   };
 
+  if (renderComponent) {
+    return (
+      <View
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            right: position === 'right' ? 12 : undefined,
+            alignSelf: position === 'center' ? 'center' : 'flex-end',
+            bottom,
+          },
+        ]}>
+        {renderComponent()}
+      </View>
+    );
+  }
+
   return (
     <Animated.View
       onLayout={handleLayout}
@@ -102,6 +124,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           <Text
             style={styles.label}
             color="white"
+            numberOfLines={1}
             typography="action_default_bold">
             {label}
           </Text>

package/Layout/Screen.tsx

@@ -114,7 +114,7 @@ const Screen = forwardRef(
     }: ScreenProps,
     ref,
   ) => {
-    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -190,12 +190,9 @@ const Screen = forwardRef(
                   image={null}
                   backgroundColor={theme.colors.background.surface}
                   useBorder={true}
-                  animatedValue={animatedValue.current}
                 />
               ),
-              headerTitle: (props: any) => (
-                <HeaderTitle {...props} animatedValue={animatedValue.current} />
-              ),
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             break;
 
@@ -228,8 +225,6 @@ const Screen = forwardRef(
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
       if (animatedHeader || floatingButtonProps) {
-        animatedValue.current = new Animated.Value(0);
-
         handleScroll = Animated.event(
           [
             {
@@ -239,8 +234,9 @@ const Screen = forwardRef(
             },
           ],
           {
-            useNativeDriver: false,
+            useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+              scrollViewProps?.onScroll?.(e);
               if (animatedHeader?.type == 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;

package/Popup/PopupNotify.tsx

@@ -199,16 +199,20 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
-          <Text
-            typography={'body_default_regular'}
-            onTextLayout={({nativeEvent: {lines}}) => {
-              const enableScroll = lines.length > 3;
-              if (enableScroll != scrollContent) {
-                setScrollContent(enableScroll);
-              }
-            }}>
-            {description}
-          </Text>
+          {typeof description === 'string' ? (
+            <Text
+              typography={'body_default_regular'}
+              onTextLayout={({nativeEvent: {lines}}) => {
+                const enableScroll = lines.length > 3;
+                if (enableScroll != scrollContent) {
+                  setScrollContent(enableScroll);
+                }
+              }}>
+              {description}
+            </Text>
+          ) : (
+            description
+          )}
         </Description>
         {!!error && (
           <View style={styles.information}>

package/index.ts

@@ -4,12 +4,11 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
-import {getAccessibilityID} from "./Application/utils";
 
 /**
  * native export
  */
-export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient, getAccessibilityID};
+export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
 
 /**
  * foundation component

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.1-optimize.2",
+    "version": "0.77.1-optimzie.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},