@momo-kits/foundation 0.103.1-optimize.4 → 0.103.1-optimize.6

package/Application/Components.tsx

@@ -149,7 +149,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const goBackSafe = () => {
     const goBack = () => {
       const canGoBack = navigator?.ref?.current?.canGoBack?.();
-      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      const currentRoute: any = navigator?.ref?.current?.getCurrentRoute?.();
       const params = {
         appId: context.appId,
         code: context.code,
@@ -337,7 +337,6 @@ const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
-  runtimeTools = [],
   preventClose,
 }) => {
   const {navigator} = useContext(ApplicationContext);
@@ -374,13 +373,15 @@ const HeaderToolkitAction: React.FC<any> = ({
   const onMore = () => {
     onAction?.('onMore');
     navigator?.maxApi?.dispatchFunction?.(
-      'showTools',
-      {runtimeTools},
-      (res: {item: {action?: string; key: string}}) => {
-        const {item} = res;
-        navigator?.toolkitCallback?.(item.key);
-        getToolkitConfig();
-      }
+      'showToolkit',
+      {
+        tools: miniContext?.toolkitConfig?.oldTools ?? [
+          'addFavorite',
+          'addShortcut',
+          'share',
+        ],
+      },
+      () => {}
     );
   };
 

package/Application/Localize.ts

@@ -4,7 +4,7 @@ import defaultLanguage from '../Assets/language.json';
 
 class Localize {
   private assets: LocalizationObject;
-  private readonly currentLanguage: 'en' | 'vi';
+  private currentLanguage: 'en' | 'vi';
 
   constructor(assets: LocalizationObject) {
     this.assets = {
@@ -21,6 +21,10 @@ class Localize {
     return this.currentLanguage;
   }
 
+  get getAssets() {
+    return this.assets;
+  }
+
   translate(key: string) {
     return this.assets[this.currentLanguage]?.[key] || key;
   }

package/Application/Navigator.ts

@@ -1,95 +1,170 @@
-import {CommonActions, StackActions} from '@react-navigation/native';
+import {
+  CommonActions,
+  NavigationContainerRef,
+  StackActions,
+} from '@react-navigation/native';
 import {
   BottomSheetParams,
   HeaderToolkitProps,
   ModalParams,
+  NavigatorCallbackParamsType,
   ScreenParams,
 } from './types';
+import React from 'react';
+import {
+  NavigationActionCallbackErrorEnum,
+  NavigationActionCallbackStatusEnum,
+} from './constants';
 
 class Navigator {
-  ref?: any;
-  isReady?: any;
+  ref: React.RefObject<NavigationContainerRef>;
+  isReady: React.MutableRefObject<boolean>;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
-  dismissData?: any;
+  dismissData?: unknown;
   toolkitCallback?: (key: string) => void;
 
-  constructor(navigation: any, isReady: any) {
+  constructor(
+    navigation: React.RefObject<NavigationContainerRef>,
+    isReady: React.MutableRefObject<boolean>
+  ) {
     this.ref = navigation;
     this.isReady = isReady;
   }
 
+  private validateRefAndRunAction = (params: {
+    action: (navigationRef: NavigationContainerRef) => void;
+    callback?: (params: NavigatorCallbackParamsType) => void;
+  }) => {
+    try {
+      if (this.isReady.current && this.ref.current) {
+        params.action(this.ref.current);
+        params.callback?.({status: NavigationActionCallbackStatusEnum.Success});
+      } else {
+        params.callback?.({
+          status: NavigationActionCallbackStatusEnum.Failed,
+          type: NavigationActionCallbackErrorEnum.NotReady,
+        });
+      }
+    } catch (error) {
+      params.callback?.({
+        status: NavigationActionCallbackStatusEnum.Failed,
+        type: NavigationActionCallbackErrorEnum.Error,
+      });
+    }
+  };
+
   /**
    * push new stack screen
    * @param params
    */
-  push = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.push('Stack', params));
-    }
+  push = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.push('Stack', params));
+      },
+      callback,
+    });
   };
 
   /**
    * replace current screen with new screen
    * @param params
    */
-  replace = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
-    }
+  replace = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.replace('Stack', params));
+      },
+      callback,
+    });
   };
   /**
    * pop to dismiss a screen
    * @param count
    */
-  pop = (count?: number) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.pop(count ?? 1));
-    }
+  pop = (
+    count?: number,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.pop(count ?? 1));
+      },
+      callback,
+    });
   };
 
   /**
    * present a new screen, show from bottom iOS
    * @param params
    */
-  present = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.push('Dialog', params));
-    }
+  present = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.push('Dialog', params));
+      },
+      callback,
+    });
   };
 
   /**
    * show a modal popup
    * @param params
    */
-  showModal = (params: ModalParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.push('Modal', params));
-    }
+  showModal = (
+    params: ModalParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.push('Modal', params));
+      },
+      callback,
+    });
   };
 
   /**
    * show a bottom sheet
    * @param params
+   * @param callback
    */
-  showBottomSheet = (params: BottomSheetParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(
-        StackActions.push('Modal', {
-          ...params,
-          isBottomSheet: true,
-        })
-      );
-    }
+  showBottomSheet = (
+    params: BottomSheetParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(
+          StackActions.push('Modal', {
+            ...params,
+            isBottomSheet: true,
+          })
+        );
+      },
+      callback,
+    });
   };
 
   /**
    * pop all screen route
    */
-  popToTop = () => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.popToTop());
-    }
+  popToTop = (callback?: (params: NavigatorCallbackParamsType) => void) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.popToTop());
+      },
+      callback,
+    });
   };
 
   /**
@@ -97,43 +172,56 @@ class Navigator {
    * @param name
    * @param params
    */
-  navigate = (name: string, params: any) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(
-        CommonActions.navigate({
-          name,
-          params,
-        })
-      );
-    }
+  navigate = (
+    name: string,
+    params: any,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(
+          CommonActions.navigate({
+            name,
+            params,
+          })
+        );
+      },
+      callback,
+    });
   };
 
   /**
    * reset a navigation flow with new screen
    * @param params
    */
-  reset = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(
-        CommonActions.reset({
-          index: 0,
-          routes: [
-            {
-              name: 'Stack',
-              key: `Stack_${new Date().getTime()}`,
-              params,
-            },
-          ],
-        })
-      );
-    }
+  reset = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(
+          CommonActions.reset({
+            index: 0,
+            routes: [
+              {
+                name: 'Stack',
+                key: `Stack_${new Date().getTime()}`,
+                params,
+              },
+            ],
+          })
+        );
+      },
+      callback,
+    });
   };
 
   /**
    * dismiss a feature data
    * @param data
    */
-  setDismissData = (data: any) => {
+  setDismissData = (data: unknown) => {
     this.dismissData = data;
   };
 

package/Application/constants.ts

@@ -0,0 +1,9 @@
+export enum NavigationActionCallbackStatusEnum {
+  Success = 'success',
+  Failed = 'failed',
+}
+
+export enum NavigationActionCallbackErrorEnum {
+  NotReady = 'not_ready',
+  Error = 'error',
+}

package/Application/types.ts

@@ -6,6 +6,10 @@ import {PopupNotifyProps} from '../Popup/types';
 import Localize from './Localize';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
+import {
+  NavigationActionCallbackErrorEnum,
+  NavigationActionCallbackStatusEnum,
+} from './constants';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -243,3 +247,16 @@ export type AnimatedHeader = {
   component?: (props?: any) => React.ReactElement;
   headerTitle?: (props?: any) => React.ReactElement;
 };
+
+type NavigatorActionSuccessCallbackType = {
+  status: NavigationActionCallbackStatusEnum.Success;
+};
+
+type NavigatorActionFailCallbackType = {
+  status: NavigationActionCallbackStatusEnum.Failed;
+  type: NavigationActionCallbackErrorEnum;
+};
+
+export type NavigatorCallbackParamsType =
+  | NavigatorActionSuccessCallbackType
+  | NavigatorActionFailCallbackType;

package/Popup/PopupNotify.tsx

@@ -33,7 +33,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * tracking
    */
   useEffect(() => {
-    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routes: any = navigator?.ref.current?.getRootState()?.routes || [];
     const routesLength = routes.length;
     let screen_name = routes?.[0]?.params?.screen?.name;
     if (routesLength > 1) {

package/Popup/PopupPromotion.tsx

@@ -19,7 +19,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * tracking
    */
   useEffect(() => {
-    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routes: any = navigator?.ref.current?.getRootState()?.routes || [];
     const routesLength = routes.length;
     let screen_name = routes?.[0]?.params?.screen?.name;
     if (routesLength > 1) {

package/Tag/index.tsx

@@ -31,6 +31,8 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
+  accessibilityLabelContainer,
+  accessibilityLabelText,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -60,7 +62,9 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+    <View
+      style={[style, sizeStyle, {backgroundColor: tagColor}]}
+      accessibilityLabel={accessibilityLabelContainer}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -69,7 +73,10 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s_medium'}>
+      <Text
+        color={labelColor}
+        typography={'label_s_medium'}
+        accessibilityLabel={accessibilityLabelText}>
         {label}
       </Text>
     </View>

package/Tag/types.ts

@@ -33,4 +33,16 @@ export type TagProps = {
    * that can be applied to the Tag component.
    */
   customColor?: string;
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabelContainer?: string;
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabelText?: string;
 };

package/package.json

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