@momo-kits/foundation 0.81.40 → 0.81.41-beta.10

package/Application/Components.tsx

@@ -173,53 +173,57 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBack,
+      goBackSafe,
     );
 
     return () => backHandler.remove();
   }, []);
 
-  const goBack = () => {
-    const canGoBack = navigator?.ref.current?.canGoBack();
-    if (!canGoBack && navigator?.trackingInfo) {
-      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,
-        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-        trigger_id: '111154000000000000',
-        icon_name: 'back',
-      });
-    }
-    if (canGoBack) {
-      if (preventBack) {
-        navigator?.showModal({
-          screen: () => (
-            <PopupNotify
-              {...preventBack}
-              primary={{
-                title: preventBack.primary.title,
-                onPress: () => {
-                  preventBack?.primary.onPress();
-                  navigator?.ref.current?.goBack();
-                },
-              }}
-            />
-          ),
+  const goBackSafe = () => {
+    const goBack = () => {
+      const canGoBack = navigator?.ref.current?.canGoBack();
+      if (!canGoBack && navigator?.trackingInfo) {
+        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,
+          screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+          trigger_id: '111154000000000000',
+          icon_name: 'back',
         });
-      } else {
+      }
+      if (canGoBack) {
         navigator?.ref.current?.goBack();
+      } else if (navigator?.maxApi) {
+        navigator?.maxApi?.dismiss(navigator.dismissData);
+      } else {
+        const currentTime = new Date().getTime();
+        const requestId = `navigationBackPress#${currentTime}`;
+        DeviceEventEmitter.emit('dismiss', {requestId});
       }
-    } else if (navigator?.maxApi) {
-      navigator?.maxApi?.dismiss(navigator.dismissData);
+      onPressLeftHeader?.();
+    };
+
+    if (preventBack) {
+      navigator?.showModal({
+        screen: () => (
+          <PopupNotify
+            {...preventBack}
+            primary={{
+              title: preventBack.primary.title,
+              onPress: () => {
+                preventBack?.primary.onPress();
+                goBack();
+              },
+            }}
+          />
+        ),
+      });
     } else {
-      const currentTime = new Date().getTime();
-      const requestId = `navigationBackPress#${currentTime}`;
-      DeviceEventEmitter.emit('dismiss', {requestId});
+      goBack();
     }
-    onPressLeftHeader?.();
     return true;
   };
 
@@ -228,7 +232,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       <NavigationButton
         icon="ic_back"
         tintColor={tintColor}
-        onPress={goBack}
+        onPress={goBackSafe}
         accessibilityLabel={`${accessibilityLabel}Back`}
         useBorder={useBorder}
       />
@@ -343,10 +347,14 @@ 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,
+  preventBack,
+}) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
-  const {appCode, hidden, type, onAction} = toolConfig ?? {};
+  const [toolConfig, setToolConfig] = useState<any>();
+  const {appCode, onAction} = toolConfig ?? {};
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
@@ -357,20 +365,21 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
     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);
-            },
-          );
-        }
+      navigator?.requestApi('getToolkitConfig', [undefined], (config: any) => {
+        navigator.toolkitConfig = {
+          configs: [
+            ...config?.miniappTools?.customTools,
+            ...config?.defaultTools,
+          ],
+          appCode: config?.appCode,
+        };
+        setToolConfig({
+          configs: [
+            ...config?.miniappTools?.customTools,
+            ...config?.defaultTools,
+          ],
+          appCode: config?.appCode,
+        });
       });
     }
   }, []);
@@ -413,39 +422,66 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
     };
   }, [appCode]);
 
-  const onUtilityTool = () => {
-    onAction?.('onUtilityTool');
-    navigator?.requestApi(type, undefined, undefined);
-  };
-
   const onMore = () => {
     onAction?.('onMore');
-    navigator?.requestApi('showToolkit', [toolConfig], undefined);
+    navigator?.requestApi(
+      'showTools',
+      [toolConfig],
+      (res: {item: {action?: string; key: string}}) => {
+        const {item} = res;
+        navigator?.toolkitCallback?.(item);
+      },
+    );
   };
 
   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?.requestApi('dismiss', undefined, undefined);
+              },
+            }}
+          />
+        ),
+      });
+    } else {
+      navigator?.requestApi('dismiss', undefined, undefined);
+    }
   };
 
-  const renderUtilityTool = () => {
-    if (hidden === false) {
+  const renderPinnedTool = () => {
+    const pinTool = toolConfig?.configs?.find(
+      (i: any) => i.key === pinnedTool.key,
+    );
+    const {badgeValue, showBadge} = pinnedTool;
+    const badgeType = showBadge && badgeValue ? 'number' : 'dot';
+    const validatedBadgeValue = isNaN(Number(badgeValue)) ? badgeValue : null;
+    const {icon} = pinTool || '';
+    if (pinTool && pinnedTool)
       return (
         <NavigationButton
           accessibilityLabel={'UtilityTool'}
-          icon={type as string}
+          icon={icon as string}
           tintColor={tintColor}
-          onPress={onUtilityTool}
+          badgeValue={validatedBadgeValue}
+          badgeType={badgeType}
+          onPress={() => {
+            navigator?.toolkitCallback?.(pinnedTool.key);
+          }}
         />
       );
-    }
-    return null;
   };
 
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
-        {renderUtilityTool()}
+        {renderPinnedTool()}
         <View
           style={[
             styles.toolkitContainer,

package/Application/Navigator.ts

@@ -13,6 +13,7 @@ class Navigator {
   maxApi?: any;
   trackingInfo?: TrackingInfo;
   dismissData?: any;
+  toolkitCallback?: (item: any) => void;
 
   constructor(navigation: any) {
     this.ref = navigation;
@@ -77,6 +78,20 @@ class Navigator {
     this.ref.current.dispatch(StackActions.popToTop());
   };
 
+  /**
+   * navigate
+   * @param name
+   * @param params
+   */
+  navigate = (name: string, params: any) => {
+    this.ref.current.dispatch(
+      CommonActions.navigate({
+        name,
+        params,
+      }),
+    );
+  };
+
   /**
    * reset a navigation flow with new screen
    * @param params
@@ -107,6 +122,12 @@ class Navigator {
       this.maxApi[func]?.(...args, callback);
     }
   };
+
+  setToolkitCallback = (
+    callback: (item: {key: string; action: string}) => void,
+  ) => {
+    this.toolkitCallback = callback;
+  };
 }
 
 export default Navigator;

package/Application/types.ts

@@ -132,12 +132,19 @@ export type NavigationButtonProps = {
   badgeValue?: number | string;
 };
 
+export type PinnedToolType = {
+  key: string;
+  badgeValue?: number;
+  showBadge?: boolean;
+};
+
 export interface NavigationOptions extends StackNavigationOptions {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
+  pinnedTool?: PinnedToolType;
 }
 
 export interface HeaderBackProps extends NavigationButtonProps {
@@ -166,9 +173,7 @@ export type TitleCustomProps = {
 export type HeaderToolkitProps = {
   [key: string]: any;
   appCode: string;
-  hidden: boolean;
-  type: string;
-  onAction?: (action: string) => void;
+  configs: any[];
 };
 
 export type HeaderAnimatedProps = {

package/Application/utils.tsx

@@ -126,6 +126,21 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  if (params.pinnedTool) {
+    options = {
+      ...options,
+      headerRight: (props: any) => {
+        return (
+          <HeaderToolkitAction
+            preventBack={params.preventBack}
+            pinnedTool={params.pinnedTool}
+            {...props}
+          />
+        );
+      },
+    };
+  }
+
   return {
     ...params,
     ...options,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.40",
+    "version": "0.81.41-beta.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}