@momo-kits/foundation 0.156.1-beta.9 → 0.156.1-test.20

package/Application/BottomTab/BottomTabBar.tsx

@@ -298,7 +298,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     left: 0,
     right: 0,
-    bottom: Platform.OS === 'ios' ? -6 : 4,
+    top: -2,
+    bottom: Platform.OS === 'ios' ? -6 : 4
   },
   floatingContent: {
     alignItems: 'center',

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import { TouchableOpacity, StyleSheet } from 'react-native';
 import {
   BottomTabBarButtonProps,
   BottomTabNavigationOptions,
@@ -143,7 +143,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: 8,
-    bottom: Platform.OS === 'ios' ? 8 : -2,
+    bottom: -2,
   },
   label: {
     fontSize: 12,

package/Application/BottomTab/index.tsx

@@ -389,7 +389,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
               title: item.label,
               tabBarStyle: [
                 {
-                  height: 64 + Math.min(insets.bottom, 21),
+                  height: 64,
                 },
                 styles.tabStyle,
               ],

package/Application/ModalScreen.tsx

@@ -19,18 +19,6 @@ import BottomSheet from './BottomSheet';
 import { runOnJS } from 'react-native-reanimated';
 
 const ModalScreen: React.FC<any> = props => {
-  const context: any = useContext(MiniAppContext);
-  const { navigator } = useContext(ApplicationContext);
-
-  useEffect(
-    () => {
-      if (context?.enableHapticDialog) {
-        navigator?.maxApi?.triggerEventVibration?.('light');
-      }
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
   }
@@ -39,6 +27,8 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const { navigator } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const modalParams = useRef<any>(undefined);
   const {
     screen,
     barrierDismissible,
@@ -60,6 +50,26 @@ const Modal: React.FC<ModalParams> = props => {
     Container = ModalRN;
   }
 
+  if (screen != null) {
+    const screenProps = screen?.()?.props || {};
+    modalParams.current = {
+      title: screenProps?.title || '',
+      description: screenProps?.description || '',
+    };
+  }
+
+  useEffect(() => {
+    const item: any = {
+      screenName: params.screen,
+      componentName: 'Modal',
+      ...modalParams.current,
+    };
+    context?.autoTracking?.({
+      ...context,
+      ...item,
+    });
+  }, [context, params.screen]);
+
   useEffect(() => {
     Animated.parallel([
       Animated.timing(opacity, {
@@ -80,27 +90,30 @@ const Modal: React.FC<ModalParams> = props => {
     };
   }, [opacity, props.route.params, scale]);
 
-  const onDismiss = useCallback((callback = () => {}, preventClose = false) => {
-    if (preventClose) {
-      return;
-    }
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-      Animated.timing(scale, {
-        toValue: 0.8,
-        duration: 200,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      navigator?.pop();
-      runOnJS(callback)();
-    });
-  }, [navigator, opacity, scale]);
+  const onDismiss = useCallback(
+    (callback = () => {}, preventClose = false) => {
+      if (preventClose) {
+        return;
+      }
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          toValue: 0.8,
+          duration: 200,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        navigator?.pop();
+        runOnJS(callback)();
+      });
+    },
+    [navigator, opacity, scale],
+  );
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(

package/Badge/Badge.tsx

@@ -6,6 +6,7 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { BadgeProps } from './types';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Text, useScaleSize } from '../Text';
+import { useScreenRegistry } from '../Layout/utils';
 
 const Badge: FC<BadgeProps> = ({
   label = '',
@@ -13,6 +14,7 @@ const Badge: FC<BadgeProps> = ({
   backgroundColor,
   accessibilityLabel,
 }) => {
+  useScreenRegistry('Badge');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { componentId } = useComponentId('Badge', accessibilityLabel);

package/Badge/BadgeDot.tsx

@@ -3,8 +3,10 @@ import { View } from 'react-native';
 import { BadgeDotProps } from './types';
 import styles from './styles';
 import { MiniAppContext } from '../Context';
+import { useScreenRegistry } from '../Layout/utils';
 
 const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
+  useScreenRegistry('BadgeDot');
   const context = useContext<any>(MiniAppContext);
   let dotStyle;
   let dotContainerStyle;

package/Badge/BadgeDotAnimation.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, View } from 'react-native';
 import { BadgeDotProps } from './types';
 import styles from './styles';
+import { useScreenRegistry } from '../Layout/utils';
 
 const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
+  useScreenRegistry('BadgeDotAnimation');
   // Refs for animated values
   const scaleAnim = useRef(new Animated.Value(1)).current;
   const waveScaleAnim = useRef(new Animated.Value(1)).current;

package/Badge/BadgeRibbon.tsx

@@ -7,6 +7,7 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';
+import { useScreenRegistry } from '../Layout/utils';
 
 const BadgeRibbon: FC<BadgeRibbonProps> = ({
   position = 'top_right',
@@ -14,6 +15,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   isRound = false,
   style = {},
 }) => {
+  useScreenRegistry('BadgeRibbon');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const isRight = position === 'top_right' || position === 'bottom_right';

package/Button/index.tsx

@@ -28,6 +28,7 @@ import Reanimated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { useScreenRegistry } from '../Layout';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -73,6 +74,7 @@ const Button: FC<ButtonProps> = ({
 }) => {
   const { theme, config } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
+  useScreenRegistry('Button');
   const skeleton = useContext(SkeletonContext);
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);

package/CheckBox/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '../Context';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
+import { useScreenRegistry } from '../Layout';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -24,6 +25,7 @@ const CheckBox: FC<CheckBoxProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
+  useScreenRegistry('CheckBox');
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;

package/Context/index.ts

@@ -2,8 +2,17 @@ import { Platform } from 'react-native';
 import { createContext } from 'react';
 import { defaultContext } from '../Consts';
 
+export type ScreenRegistryContextType = {
+  register: (id: string, name: string) => void;
+  unregister: (id: string) => void;
+};
+
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
+const ScreenRegistryContext = createContext<ScreenRegistryContextType>({
+  register: () => {},
+  unregister: () => {},
+});
 
 const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
@@ -20,6 +29,7 @@ export {
   ApplicationContext,
   MiniAppContext,
   ScreenContext,
+  ScreenRegistryContext,
   ComponentContext,
   SkeletonContext,
   TrackingScopeContext,

package/Divider/DashDivider.tsx

@@ -3,6 +3,7 @@ import { View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import Svg, { Line } from 'react-native-svg';
+import { useScreenRegistry } from '../Layout/utils';
 
 export interface DashDividerProps {
   /**
@@ -12,6 +13,7 @@ export interface DashDividerProps {
 }
 
 const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
+  useScreenRegistry('DashDivider');
   const { theme } = useContext(ApplicationContext);
   const borderColor = theme.colors.border.default;
 

package/Divider/index.tsx

@@ -3,6 +3,7 @@ import { View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import { DashDivider } from './DashDivider';
+import { useScreenRegistry } from '../Layout';
 
 export interface DividerProps {
   /**
@@ -25,8 +26,9 @@ const Divider: React.FC<DividerProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
 
-  if (type === 'dash') return <DashDivider style={style} />;
+  useScreenRegistry('Divider');
 
+  if (type === 'dash') return <DashDivider style={style} />;
   return (
     <View
       style={[

package/Icon/index.tsx

@@ -6,6 +6,7 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../Consts';
+import { useScreenRegistry } from '../Layout';
 
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
@@ -16,6 +17,7 @@ const Icon: React.FC<IconProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
+  useScreenRegistry('Icon');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 

package/IconButton/index.tsx

@@ -12,6 +12,7 @@ import {
 import { Colors } from '../Consts';
 import { Icon } from '../Icon';
 import styles from './styles';
+import { useScreenRegistry } from '../Layout';
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -43,6 +44,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   params,
   ...rest
 }) => {
+  useScreenRegistry('IconButton');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 

package/Image/index.tsx

@@ -12,6 +12,7 @@ import { Skeleton } from '../Skeleton';
 import { Icon } from '../Icon';
 import { Styles } from '../Consts';
 import { ImageProps } from './types';
+import { useScreenRegistry } from '../Layout';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -36,6 +37,7 @@ const Image: React.FC<ImageProps> = ({
   const skeleton = useContext(SkeletonContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
+  useScreenRegistry('Image');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 

package/Input/Input.tsx

@@ -31,6 +31,7 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
+import { useScreenRegistry } from '../Layout/utils';
 
 /**
  * Input default component
@@ -72,6 +73,7 @@ const Input = forwardRef(
     }: InputProps,
     ref,
   ) => {
+    useScreenRegistry('Input');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaledFontSize = useScaleSize(14);

package/Input/InputDropDown.tsx

@@ -17,6 +17,7 @@ import { InputDropDownProps } from './index';
 import { Text, useScaleSize } from '../Text';
 import styles from './styles';
 import { Spacing } from '../Consts';
+import { useScreenRegistry } from '../Layout/utils';
 
 const InputDropDown = ({
   value,
@@ -38,6 +39,7 @@ const InputDropDown = ({
   multiline,
   ...props
 }: InputDropDownProps) => {
+  useScreenRegistry('InputDropDown');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputMoney.tsx

@@ -34,6 +34,7 @@ import { InputMoneyProps } from './index';
 import styles from './styles';
 import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
+import { useScreenRegistry } from '../Layout/utils';
 
 const InputMoney = forwardRef(
   (
@@ -65,6 +66,7 @@ const InputMoney = forwardRef(
     }: InputMoneyProps,
     ref,
   ) => {
+    useScreenRegistry('InputMoney');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputOTP.tsx

@@ -28,6 +28,7 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
+import { useScreenRegistry } from '../Layout/utils';
 
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
@@ -90,6 +91,7 @@ const InputOTP = forwardRef(
     }: InputOTPProps,
     ref,
   ) => {
+    useScreenRegistry('InputOTP');
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);

package/Input/InputPhoneNumber.tsx

@@ -33,6 +33,7 @@ import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { Image } from '../Image';
 import { Typography } from '../Text/types';
+import { useScreenRegistry } from '../Layout/utils';
 
 /**
  * Input default component
@@ -65,6 +66,7 @@ const InputPhoneNumber = forwardRef(
     }: InputPhoneNumberProps,
     ref,
   ) => {
+    useScreenRegistry('InputPhoneNumber');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputSearch.tsx

@@ -28,6 +28,7 @@ import { InputRef, InputSearchProps } from './index';
 import styles from './styles';
 import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
+import { useScreenRegistry } from '../Layout/utils';
 
 const TextTyping: FC<any> = ({
   data = [],
@@ -141,6 +142,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   },
   ref,
 ) => {
+  useScreenRegistry('InputSearch');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
@@ -348,4 +350,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   );
 };
 
-export default forwardRef(InputSearch);
+const ForwardedInputSearch = forwardRef(InputSearch);
+ForwardedInputSearch.displayName = 'InputSearch';
+export default ForwardedInputSearch;

package/Input/InputTextArea.tsx

@@ -22,6 +22,7 @@ import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { useComponentId } from '../Application';
+import { useScreenRegistry } from '../Layout/utils';
 
 const InputTextArea = forwardRef(
   (
@@ -47,6 +48,7 @@ const InputTextArea = forwardRef(
     }: InputTextAreaProps,
     ref,
   ) => {
+    useScreenRegistry('InputTextArea');
     const componentName = 'InputTextArea';
 
     const { componentId } = useComponentId(

package/Layout/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import { useGridSystem, useScreenRegistry } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
@@ -27,6 +27,7 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
+  useScreenRegistry('Card');
   const { showGrid, theme } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
 

package/Layout/FloatingButton.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
+import { useScreenRegistry } from './utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -38,6 +39,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   animatedValue,
   bottom = 12,
 }: FloatingButtonProps) => {
+  useScreenRegistry('FloatingButton');
   const { theme } = useContext(ApplicationContext);
   const maxWidth = useRef(0);
   const minWidth = size === 'small' ? 36 : 48;

package/Layout/Item.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
+import { useScreenRegistry } from './utils';
 import styles from './styles';
 import { SpanNumber } from './types';
 
@@ -23,6 +24,7 @@ const Item: React.FC<ItemProps> = ({
   children,
   style,
 }) => {
+  useScreenRegistry('Item');
   const { showGrid } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);

package/Layout/ItemList.tsx

@@ -4,6 +4,7 @@ import Item from './Item';
 import { GridContext } from './index';
 import styles from './styles';
 import { SpanNumber } from './types';
+import { useScreenRegistry } from './utils';
 
 export interface ItemListProps extends FlatListProps<any> {
   /**
@@ -24,6 +25,7 @@ const ItemList = forwardRef(
     }: ItemListProps,
     ref,
   ) => {
+    useScreenRegistry('ItemList');
     const { gutterSize, numberOfColumns } = useContext(GridContext);
     const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
     const numColumns = Math.floor(numberOfColumns / widthItem);

package/Layout/ItemSectionList.tsx

@@ -4,6 +4,7 @@ import Item from './Item';
 import { GridContext } from './index';
 import styles from './styles';
 import { SpanNumber } from './types';
+import { useScreenRegistry } from './utils';
 
 export interface ItemSectionListProps extends SectionListProps<any> {
   /**
@@ -19,6 +20,7 @@ const ItemSectionList: FC<ItemSectionListProps> = ({
   contentContainerStyle,
   ...props
 }) => {
+  useScreenRegistry('ItemSectionList');
   const { gutterSize, numberOfColumns } = useContext(GridContext);
   const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
   const _renderItem = (item: any) => {