@momo-kits/foundation 0.75.1-beta.6 → 0.75.1-beta.7

package/Navigation/Components.tsx

@@ -13,11 +13,11 @@ import {Image} from '../Image';
 import {
   HeaderBackgroundProps,
   HeaderBackProps,
+  HeaderToolkitProps,
   TitleCustomProps,
 } from './types';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {requestApi} from './utils';
 import Observer from './Observer';
 import {PopupNotify} from '../Popup';
 
@@ -216,12 +216,15 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
       console.warn(
         'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
       );
+      return <View />;
     }
   };
   const renderAction = () => {
     if (Array.isArray(children)) {
       return children.map((child, index) => {
-        validType(child);
+        if (__DEV__) {
+          validType(child);
+        }
         return (
           <React.Fragment key={index}>
             {React.cloneElement(child, {...restProps})}
@@ -236,62 +239,80 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-const HeaderToolkitAction: React.FC<any> = ({tintColor, utilityToolConfig}) => {
-  const {appCode, hidden, type, onAction} = utilityToolConfig ?? {};
-  const {theme} = useContext(ApplicationContext);
-  const [showUtility, setShowUtility] = useState(hidden === false);
+const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
+  const {appCode, hidden, type, onAction} = toolConfig ?? {};
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
     backgroundColor = theme.colors.background.surface;
   }
 
+  useEffect(() => {
+    navigator?.getToolkit().then(toolConfig => {
+      setToolConfig(toolConfig);
+    });
+  }, []);
+
   useEffect(() => {
     let addFavorite: any;
     let removeFavorite: any;
-    if (appCode && type === 'addFavorite') {
+    if (appCode) {
       const addSchema = `observerToolkit_addFavorite_${appCode}`;
       const removeSchema = `observerToolkit_removeFavorite_${appCode}`;
-      addFavorite = Observer?.getInstance(addSchema);
-      removeFavorite = Observer?.getInstance(removeSchema);
-
-      addFavorite?.attach((data: any) => {
-        if (data?.status) {
-          setShowUtility(false);
-        }
-      });
-      removeFavorite?.attach((data: any) => {
-        if (data?.status) {
-          setShowUtility(true);
-        }
-      });
+      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');
-    requestApi(type, [undefined], undefined);
+    navigator?.requestApi(type, undefined, undefined);
   };
 
   const onMore = () => {
     onAction?.('onMore');
-    requestApi('showToolkit', [utilityToolConfig], undefined);
+    navigator?.requestApi('showToolkit', [toolConfig], undefined);
   };
 
   const onClose = () => {
     onAction?.('onClose');
-    requestApi('dismiss', [], undefined);
+    navigator?.requestApi('dismiss', undefined, undefined);
   };
 
   const renderUtilityTool = () => {
-    if (showUtility) {
+    if (toolConfig?.hidden === false) {
       return (
         <NavigationButton
-          icon={type}
+          icon={type as string}
           tintColor={tintColor}
           onPress={onUtilityTool}
         />
@@ -299,33 +320,39 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor, utilityToolConfig}) => {
     }
   };
 
-  return (
-    <View style={styles.headerRightButton}>
-      {renderUtilityTool()}
-      <View
-        style={[
-          styles.toolkitContainer,
-          {
-            backgroundColor: backgroundColor ?? '#00000066',
-            borderWidth: backgroundColor ? 0.5 : 0,
-          },
-        ]}>
-        <TouchableOpacity accessibilityLabel={'Toolkit/More'} onPress={onMore}>
-          <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-        </TouchableOpacity>
-        <View style={[styles.divider, {backgroundColor: tintColor}]} />
-        <TouchableOpacity
-          accessibilityLabel={'Toolkit/Close'}
-          onPress={onClose}>
-          <Icon
-            color={tintColor}
-            source="16_navigation_close_circle"
-            size={20}
-          />
-        </TouchableOpacity>
+  if (toolConfig) {
+    return (
+      <View style={styles.headerRightButton}>
+        {renderUtilityTool()}
+        <View
+          style={[
+            styles.toolkitContainer,
+            {
+              backgroundColor: backgroundColor ?? '#00000066',
+              borderWidth: backgroundColor ? 0.5 : 0,
+            },
+          ]}>
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/More'}
+            onPress={onMore}>
+            <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+          </TouchableOpacity>
+          <View style={[styles.divider, {backgroundColor: tintColor}]} />
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/Close'}
+            onPress={onClose}>
+            <Icon
+              color={tintColor}
+              source="16_navigation_close_circle"
+              size={20}
+            />
+          </TouchableOpacity>
+        </View>
       </View>
-    </View>
-  );
+    );
+  }
+
+  return <View />;
 };
 
 export {

package/Navigation/Navigation.ts

@@ -2,6 +2,7 @@ import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
+import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
@@ -15,9 +16,12 @@ class Navigation {
   verifyParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.();
-      if (headerRight.type !== HeaderRightAction) {
+      if (
+        headerRight?.type !== HeaderRightAction &&
+        headerRight?.type !== HeaderToolkitAction
+      ) {
         console.warn(
-          'headerRight not return element type of HeaderRightAction, Please migrate to use HeaderRightAction of kits.',
+          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
         );
       }
     }
@@ -29,7 +33,9 @@ class Navigation {
   };
 
   setOptions = (params: NavigationOptions) => {
-    params = this.verifyParams(params);
+    if (__DEV__) {
+      params = this.verifyParams(params);
+    }
     params = getOptions(params, this.theme);
     this.instance.setOptions(params);
   };

package/Navigation/NavigationContainer.tsx

@@ -21,9 +21,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,
   options,
+  maxApi,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
+  navigator.current.maxApi = maxApi;
 
   return (
     <SafeAreaProvider>

package/Navigation/Navigator.ts

@@ -1,10 +1,15 @@
 import {StackActions} from '@react-navigation/native';
-import {BottomSheetParams, ModalParams, ScreenParams} from './types';
-import {requestApi} from './utils';
+import {
+  BottomSheetParams,
+  HeaderToolkitProps,
+  ModalParams,
+  ScreenParams,
+} from './types';
 
 class Navigator {
   ref?: any;
-  utilityToolConfig: any;
+  toolkitConfig?: HeaderToolkitProps;
+  maxApi?: any;
 
   constructor(navigation: any) {
     this.ref = navigation;
@@ -43,17 +48,28 @@ class Navigator {
     this.ref.current.dispatch(StackActions.popToTop());
   };
 
-  getToolkit = async () => {
-    if (this.utilityToolConfig) return this.utilityToolConfig;
+  requestApi = (func: any, args: any = [], callback: any) => {
+    if (this.maxApi) {
+      this.maxApi[func]?.(...args, callback);
+    } else {
+      const instance: any = global;
+      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
+    }
+  };
+  getToolkit = async (): Promise<HeaderToolkitProps | undefined> => {
     return new Promise(resolve => {
-      requestApi('getToolkit', [null], (result: any) => {
-        if (result === true) {
-          requestApi('getToolkitConfig', [null], (config: any) => {
-            this.utilityToolConfig = {
+      if (this.toolkitConfig) {
+        resolve(this.toolkitConfig);
+        return;
+      }
+      this.requestApi('getToolkit', [undefined], (result: boolean) => {
+        if (result) {
+          this.requestApi('getToolkitConfig', [undefined], (config: any) => {
+            this.toolkitConfig = {
               ...config?.utilityToolConfig,
               appCode: config?.appCode,
             };
-            resolve(this.utilityToolConfig);
+            resolve(this.toolkitConfig);
           });
         } else {
           resolve(undefined);

package/Navigation/StackScreen.tsx

@@ -2,7 +2,6 @@ import React, {useContext, useEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './NavigationContainer';
-import {HeaderToolkitAction} from './Components';
 
 const StackScreen: React.FC<any> = props => {
   const {route, navigation} = props;
@@ -17,18 +16,6 @@ const StackScreen: React.FC<any> = props => {
   delete params.screen;
 
   useEffect(() => {
-    navigator?.getToolkit().then(utilityToolConfig => {
-      if (utilityToolConfig) {
-        params.navigation.setOptions({
-          headerRight: (props: any) => (
-            <HeaderToolkitAction
-              {...props}
-              utilityToolConfig={utilityToolConfig}
-            />
-          ),
-        });
-      }
-    });
     if (options) {
       params.navigation.setOptions(options);
     }

package/Navigation/types.ts

@@ -67,6 +67,7 @@ export type NavigationContainerProps = {
   screen: React.ElementType;
   options?: NavigationOptions;
   theme: Theme;
+  maxApi?: any;
 };
 
 export interface ScreenContainerProps extends ViewProps {
@@ -135,6 +136,14 @@ export type TitleCustomProps = {
   content?: React.ReactNode;
 };
 
+export type HeaderToolkitProps = {
+  [key: string]: any;
+  appCode: string;
+  hidden: boolean;
+  type: string;
+  onAction?: (action: string) => void;
+};
+
 export type BottomTabItemProps = {
   label: string;
   icon: string;

package/Navigation/utils.tsx

@@ -3,41 +3,16 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {DeviceEventEmitter} from 'react-native';
 import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
   HeaderTitle,
+  HeaderToolkitAction,
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
-const requestApi = (func: any, args: any = [], callback: any) => {
-  const instance: any = global;
-  if (instance?.miniAppApi?.dispatch) {
-    instance?.miniAppApi?.dispatch?.(func, ...args, callback);
-  } else {
-    let listener: any;
-    const responseId = new Date().getTime();
-    const responseListener = `KIT_RESPONSE_MESSAGE_${responseId}`;
-    const TIME_OUT = 5000;
-    const timeout = setTimeout(() => {
-      listener?.remove?.();
-    }, TIME_OUT);
-    listener = DeviceEventEmitter.addListener(responseListener, result => {
-      listener?.remove?.();
-      clearTimeout(timeout);
-      callback?.(result);
-    });
-    DeviceEventEmitter.emit('KITS_REQUEST_MESSAGE', {
-      func,
-      args,
-      responseListener,
-    });
-  }
-};
-
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
     return {
@@ -55,6 +30,7 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     ...getTintColor(theme),
   };
 };
@@ -158,10 +134,4 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {
-  requestApi,
-  getStackOptions,
-  getDialogOptions,
-  getModalOptions,
-  getOptions,
-};
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/package.json

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