@momo-kits/foundation 0.81.43 → 0.81.48

package/Application/BottomTab.tsx

@@ -3,29 +3,45 @@ import {Platform} from 'react-native';
 import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createStackNavigator} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {NavigationContainer} from '@react-navigation/native';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
 import {getStackOptions} from './utils';
 import StackScreen from './StackScreen';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  if (route.params?.nested) {
+    return (
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    );
+  }
   return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="Stack"
-        component={StackScreen}
-        initialParams={{screen: route.params?.screen}}
-        options={{...getStackOptions(), ...route.params?.options}}
-      />
-    </Stack.Navigator>
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 };
 const BottomTab: React.FC<BottomTabProps> = ({
+  nested,
   tabs,
   listeners,
   navigation,
@@ -61,14 +77,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={item.name}
             name={item.name}
             component={TabScreen}
-            initialParams={item}
+            initialParams={{...item, nested}}
             listeners={listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (
                   <Text
                     numberOfLines={1}
-                    typography={focused ? 'label_xs' : 'description_xs'}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
                     color={color}>
                     {item.label}
                   </Text>
@@ -86,7 +104,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 left: item?.showDot ? 8 : 4,
                 top: item?.showDot ? -2 : -6,
               },
-
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />
               ),

package/Application/Components.tsx

@@ -15,14 +15,13 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
   HeaderAnimatedProps,
   HeaderBackgroundProps,
   HeaderBackProps,
-  HeaderToolkitProps,
   NavigationButtonProps,
   TitleCustomProps,
 } from './types';
@@ -31,80 +30,11 @@ import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
 
-const styles = StyleSheet.create({
-  navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  headerBackground: {
-    width: '100%',
-    height: undefined,
-    position: 'absolute',
-    aspectRatio: 375 / 154,
-  },
-  headerTitleContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-  },
-  circle: {width: 36, height: 36, borderRadius: 18},
-  square: {width: 36, height: 36, borderRadius: Radius.XS},
-  dotAvatar: {
-    position: 'absolute',
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    bottom: 0,
-    right: 0,
-    borderWidth: 1,
-    borderColor: Colors.black_01,
-  },
-  headerButton: {paddingHorizontal: 4},
-  headerRightButton: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingRight: Spacing.S,
-  },
-  toolkitContainer: {
-    marginLeft: Spacing.S,
-    padding: Spacing.XS,
-    height: 28,
-    borderRadius: 14,
-    borderColor: '#00000066',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  divider: {
-    width: 1,
-    height: 12,
-    marginHorizontal: 4,
-  },
-  headerLeft: {
-    marginLeft: 12,
-  },
-  title: {
-    fontSize: scaleSize(15),
-    lineHeight: scaleSize(22),
-    fontWeight: 'bold',
-  },
-  badge: {
-    position: 'absolute',
-    top: -8,
-    right: -8,
-  },
-});
-
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
   useBorder = true,
-  accessibilityLabel,
   badgeType,
   badgeValue,
 }) => {
@@ -118,30 +48,38 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     };
   }
 
+  const isNumber = (label: any) => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
   const renderBadge = useCallback(() => {
-    if (!badgeValue && !badgeType) return null;
     if (badgeType === 'dot') {
-      return <BadgeDot size="small" style={styles.badge} />;
+      return <BadgeDot size="small" style={styles.badgeDot} />;
+    }
+
+    if (isNumber(badgeValue)) {
+      return <Badge label={badgeValue} style={styles.badge} />;
     }
-    return <Badge label={badgeValue} style={styles.badge} />;
   }, [badgeType, badgeValue]);
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
-      style={[styles.navigationButton, buttonStyle]}
-      onPress={onPress}>
-      <Icon
-        source={icon}
-        color={tintColor ?? theme.colors.text.default}
-        size={20}
-      />
+    <View style={{width: scaleSize(28)}}>
+      <TouchableOpacity
+        style={[styles.navigationButton, buttonStyle]}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={20}
+        />
+      </TouchableOpacity>
       {renderBadge()}
-    </TouchableOpacity>
+    </View>
   );
 };
 
-const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
+const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
     inputRange: [0, 200],
@@ -152,7 +90,6 @@ const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
   return (
     <Animated.Text
       {...props}
-      accessibilityLabel={`HeaderTitle/${accessibilityLabel}${props.children}`}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -166,8 +103,8 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   useBorder,
-  accessibilityLabel = '',
 }) => {
+  const context = useContext(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
@@ -182,13 +119,10 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const goBackSafe = () => {
     const goBack = () => {
       const canGoBack = navigator?.ref.current?.canGoBack();
-      if (!canGoBack && navigator?.trackingInfo) {
+      if (!canGoBack) {
         const currentRoute = navigator?.ref?.current.getCurrentRoute();
         navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
-          feature_code: navigator.trackingInfo.code,
-          app_id: navigator.trackingInfo.appId,
-          miniapp_version: navigator.trackingInfo.buildNumber,
-          flow_partner_id: navigator.trackingInfo.flowPartnerId,
+          ...context,
           screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
           trigger_id: '111154000000000000',
           icon_name: 'back',
@@ -233,7 +167,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
-        accessibilityLabel={`${accessibilityLabel}Back`}
         useBorder={useBorder}
       />
     </View>
@@ -304,10 +237,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="title_xs" color={tintColor}>
+        <Text typography="header_default_bold" color={tintColor}>
           {title}
         </Text>
-        <Text typography="description_s" color={tintColor}>
+        <Text typography="description_default_regular" color={tintColor}>
           {subTitle}
         </Text>
       </View>
@@ -347,10 +280,16 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+const HeaderToolkitAction: React.FC<any> = ({
+  tintColor,
+  pinnedTool,
+  runtimeTools = [],
+  preventBack,
+}) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
-  const {appCode, hidden, type, onAction} = toolConfig ?? {};
+  const miniContext = useContext(MiniAppContext);
+  const [toolConfig, setToolConfig] = useState<any>();
+  const {onAction} = toolConfig ?? {};
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
@@ -358,98 +297,94 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   }
 
   useEffect(() => {
-    if (navigator?.toolkitConfig) {
-      setToolConfig(navigator?.toolkitConfig);
-    } else {
-      navigator?.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          navigator?.requestApi(
-            'getToolkitConfig',
-            [undefined],
-            (config: any) => {
-              navigator.toolkitConfig = {
-                ...config?.utilityToolConfig,
-                appCode: config?.appCode,
-              };
-              setToolConfig(navigator?.toolkitConfig);
-            },
-          );
-        }
-      });
+    if (miniContext?.toolkitConfig?.hidden === false) {
+      if (navigator?.toolkitConfig) {
+        setToolConfig(navigator?.toolkitConfig);
+      } else {
+        getToolkitConfig();
+      }
     }
   }, []);
 
-  useEffect(() => {
-    let addFavorite: any;
-    let removeFavorite: any;
-    if (appCode) {
-      const addSchema = `observerToolkit_addFavorite_${appCode}`;
-      const removeSchema = `observerToolkit_removeFavorite_${appCode}`;
-      addFavorite = navigator?.requestApi(
-        'observer',
-        [addSchema],
-        (data: any) => {
-          if (data?.status) {
-            setToolConfig({
-              ...(toolConfig as HeaderToolkitProps),
-              hidden: true,
-            });
-          }
-        },
-      );
-      addFavorite = navigator?.requestApi(
-        'observer',
-        [removeSchema],
-        (data: any) => {
-          if (data?.status) {
-            setToolConfig({
-              ...(toolConfig as HeaderToolkitProps),
-              hidden: false,
-            });
-          }
-        },
-      );
-    }
-
-    return () => {
-      addFavorite?.();
-      removeFavorite?.();
-    };
-  }, [appCode]);
-
-  const onUtilityTool = () => {
-    onAction?.('onUtilityTool');
-    navigator?.requestApi(type, undefined, undefined);
+  const getToolkitConfig = () => {
+    navigator?.maxApi?.dispatchFunction?.(
+      'getToolsConfig',
+      [undefined],
+      (config: any) => {
+        navigator.toolkitConfig = config;
+        setToolConfig(navigator?.toolkitConfig);
+      },
+    );
   };
 
   const onMore = () => {
     onAction?.('onMore');
-    navigator?.requestApi('showToolkit', [toolConfig], undefined);
+    navigator?.maxApi?.dispatchFunction?.(
+      'showTools',
+      {runtimeTools},
+      (res: {item: {action?: string; key: string}}) => {
+        const {item} = res;
+        navigator?.toolkitCallback?.(item);
+        getToolkitConfig();
+      },
+    );
   };
 
   const onClose = () => {
-    onAction?.('onClose');
-    navigator?.requestApi('dismiss', undefined, undefined);
+    if (preventBack) {
+      navigator?.showModal({
+        screen: () => (
+          <PopupNotify
+            {...preventBack}
+            primary={{
+              title: preventBack.primary.title,
+              onPress: () => {
+                preventBack?.primary.onPress();
+                navigator?.maxApi?.dispatchFunction?.(
+                  'dismiss',
+                  undefined,
+                  undefined,
+                );
+              },
+            }}
+          />
+        ),
+      });
+    } else {
+      navigator?.maxApi?.dispatchFunction?.('dismiss', undefined, undefined);
+    }
   };
 
-  const renderUtilityTool = () => {
-    if (hidden === false) {
+  const renderPinnedTool = () => {
+    const pinKey = pinnedTool?.key || toolConfig?.pinnedTool?.key;
+    const pinTool = toolConfig?.tools?.find((i: any) => i.key === pinKey);
+    const {badgeValue, badgeType} = pinnedTool ?? {};
+
+    if (pinTool)
       return (
         <NavigationButton
-          accessibilityLabel={'UtilityTool'}
-          icon={type as string}
+          icon={pinTool.icon as string}
           tintColor={tintColor}
-          onPress={onUtilityTool}
+          badgeValue={badgeValue}
+          badgeType={badgeType}
+          onPress={() => {
+            navigator?.maxApi?.dispatchFunction?.(
+              'onToolAction',
+              [pinTool?.key],
+              () => {
+                getToolkitConfig();
+              },
+            );
+            navigator?.toolkitCallback?.(pinTool.key);
+          }}
         />
       );
-    }
-    return null;
   };
 
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
-        {renderUtilityTool()}
+        {renderPinnedTool()}
         <View
           style={[
             styles.toolkitContainer,
@@ -458,15 +393,11 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity
-            accessibilityLabel={'Toolkit/More'}
-            onPress={onMore}>
+          <TouchableOpacity onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity
-            accessibilityLabel={`Toolkit/Close`}
-            onPress={onClose}>
+          <TouchableOpacity onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
@@ -521,6 +452,79 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  navigationButton: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerBackground: {
+    width: '100%',
+    height: undefined,
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  circle: {width: 36, height: 36, borderRadius: 18},
+  square: {width: 36, height: 36, borderRadius: Radius.XS},
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+  },
+  headerButton: {paddingHorizontal: 4},
+  headerRightButton: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.S,
+  },
+  toolkitContainer: {
+    marginLeft: Spacing.S,
+    padding: Spacing.XS,
+    height: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  divider: {
+    width: 1,
+    height: 12,
+    marginHorizontal: 4,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
+  title: {
+    fontSize: scaleSize(15),
+    lineHeight: scaleSize(22),
+    fontWeight: 'bold',
+  },
+  badge: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -6,
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -Spacing.XS,
+    right: -Spacing.XS,
+  },
+});
+
 export {
   NavigationButton,
   HeaderTitle,

package/Application/ModalScreen.tsx

@@ -74,7 +74,7 @@ const Modal: React.FC<ModalParams> = props => {
             style={styles.modalSpaceVertical}
             onPress={() => onDismiss()}
           />
-          <View style={styles.modalContent} accessibilityLabel={'Modal'}>
+          <View style={styles.modalContent}>
             <Component {...params} />
           </View>
           <Pressable
@@ -167,7 +167,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <BottomSheetView accessibilityLabel={'BottomSheet'}>
+        <BottomSheetView>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View
@@ -178,7 +178,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
-              trackingInfo={navigator?.trackingInfo}
               maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
@@ -190,22 +189,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                 ...{
                   headerLeft: (props: any) => {
                     if (props.canGoBack) {
-                      return (
-                        <HeaderLeft
-                          {...props}
-                          useBorder={false}
-                          accessibilityLabel={'BottomSheet/'}
-                        />
-                      );
+                      return <HeaderLeft {...props} useBorder={false} />;
                     }
                   },
                   headerTitle: (props: any) => {
-                    return (
-                      <HeaderTitle
-                        {...props}
-                        accessibilityLabel={'BottomSheet/'}
-                      />
-                    );
+                    return <HeaderTitle {...props} />;
                   },
                   headerTintColor: theme.colors.text.default,
                   headerBackground: () => (
@@ -221,7 +209,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       icon="24_navigation_close"
                       useBorder={false}
                       onPress={() => bottomSheetRef.current?.dismiss()}
-                      accessibilityLabel={'BottomSheet/Close'}
                     />
                   </HeaderRightAction>
                 ),