@momo-kits/foundation 0.81.52 → 0.81.53-beta.0

package/Application/Components.tsx

@@ -37,10 +37,11 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
+  accessibilityLabel = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
-  if (tintColor != Colors.black_01) {
+  if (tintColor !== Colors.black_01) {
     buttonStyle = {
       backgroundColor: 'transparent',
       borderColor: '#00000066',
@@ -64,8 +65,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View style={{width: 28}}>
       <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
         <Icon
@@ -90,6 +92,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
+      accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -104,13 +107,13 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   onPressLeftHeader,
   useBorder,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe,
+      goBackSafe
     );
 
     return () => backHandler.remove();
@@ -118,20 +121,25 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBackSafe = () => {
     const goBack = () => {
-      const canGoBack = navigator?.ref.current?.canGoBack();
-      if (!canGoBack) {
-        const currentRoute = navigator?.ref?.current.getCurrentRoute();
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
-          ...context,
-          screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-          trigger_id: '111154000000000000',
-          icon_name: 'back',
-        });
-      }
+      const canGoBack = navigator?.ref?.current?.canGoBack?.();
+      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      const params = {
+        appId: context.appId,
+        code: context.code,
+        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      };
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: 'service_icon_clicked',
+        params,
+      });
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       if (canGoBack) {
-        navigator?.ref.current?.goBack();
+        navigator?.ref?.current?.goBack?.();
       } else if (navigator?.maxApi) {
-        navigator?.maxApi?.dismiss(navigator.dismissData);
+        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
       } else {
         const currentTime = new Date().getTime();
         const requestId = `navigationBackPress#${currentTime}`;
@@ -160,10 +168,10 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
+        accessibilityLabel="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -175,15 +183,18 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
-  backgroundColor,
   animatedValue,
-  useBorder = false,
+  useSurface = false,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
+  let backgroundColor;
   if (image === null) {
     headerImage = undefined;
   }
+  if (useSurface) {
+    backgroundColor = theme.colors.background.surface;
+  }
   const opacity = animatedValue?.interpolate({
     inputRange: [0, 114],
     outputRange: [0, 1],
@@ -195,9 +206,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       style={[
         Styles.flex,
         {
-          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          backgroundColor,
           overflow: 'hidden',
-          borderBottomWidth: useBorder ? 1 : 0,
+          borderBottomWidth: useSurface ? 1 : 0,
           borderColor: theme.colors.border.default,
           opacity,
         },
@@ -227,7 +238,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   tintColor,
   dotColor,
 }) => {
-  const avatarStyle = imageShape == 'circle' ? styles.circle : styles.square;
+  const avatarStyle = imageShape === 'circle' ? styles.circle : styles.square;
   const header = (
     <View style={Styles.row}>
       <View>
@@ -237,7 +248,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="header_default_bold" color={tintColor}>
+        <Text
+          accessibilityLabel={'title_navigation_header'}
+          typography="header_default_bold"
+          color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -251,10 +265,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validateType = (child: React.ReactElement) => {
-    const valid = child?.type === NavigationButton || child?.type == Fragment;
+    const valid = child?.type === NavigationButton || child?.type === Fragment;
     if (__DEV__ && !valid) {
       console.warn(
-        'HeaderRightAction contains element type of NavigationButton, Please check again.',
+        'HeaderRightAction contains element type of NavigationButton, Please check again.'
       );
     }
     return child;
@@ -284,16 +298,16 @@ const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
   runtimeTools = [],
-  preventBack,
+  preventClose,
 }) => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const miniContext = useContext(MiniAppContext);
+  const {navigator} = useContext(ApplicationContext);
+  const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
   let backgroundColor;
-  if (tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
+  if (tintColor !== Colors.black_01) {
+    backgroundColor = 'transparent';
   }
 
   useEffect(() => {
@@ -313,7 +327,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      },
+      }
     );
   };
 
@@ -324,26 +338,26 @@ const HeaderToolkitAction: React.FC<any> = ({
       {runtimeTools},
       (res: {item: {action?: string; key: string}}) => {
         const {item} = res;
-        navigator?.toolkitCallback?.(item);
+        navigator?.toolkitCallback?.(item.key);
         getToolkitConfig();
-      },
+      }
     );
   };
 
   const onClose = () => {
-    if (preventBack) {
+    if (preventClose) {
       navigator?.showModal({
         screen: () => (
           <PopupNotify
-            {...preventBack}
+            {...preventClose}
             primary={{
-              title: preventBack.primary.title,
+              title: preventClose.primary.title,
               onPress: () => {
-                preventBack?.primary.onPress();
+                preventClose?.primary.onPress();
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined,
+                  undefined
                 );
               },
             }}
@@ -363,6 +377,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
+          accessibilityLabel="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -373,14 +388,13 @@ const HeaderToolkitAction: React.FC<any> = ({
               [pinTool?.key],
               () => {
                 getToolkitConfig();
-              },
+              }
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
         />
       );
   };
-
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
@@ -393,11 +407,15 @@ const HeaderToolkitAction: React.FC<any> = ({
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity onPress={onMore}>
+          <TouchableOpacity
+            accessibilityLabel={'btn_navigation_more'}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity onPress={onClose}>
+          <TouchableOpacity
+            accessibilityLabel={'btn_navigation_close'}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
@@ -415,7 +433,7 @@ const HeaderToolkitAction: React.FC<any> = ({
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
-  onPress,
+  children,
 }) => {
   const scale = animatedValue.interpolate({
     inputRange: [-300, 0, 300],
@@ -434,21 +452,21 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   });
 
   return (
-    <TouchableOpacity onPress={onPress}>
-      <Animated.View
-        style={{
-          height: 210,
-          opacity: opacity,
-          transform: [{scale}, {translateY}],
-        }}>
+    <Animated.View
+      style={{
+        height: 210,
+        opacity: opacity,
+        transform: [{scale}, {translateY}],
+      }}>
+      {children ?? (
         <Image
           source={{
             uri: image,
           }}
           style={{width: '100%', height: '100%'}}
         />
-      </Animated.View>
-    </TouchableOpacity>
+      )}
+    </Animated.View>
   );
 };
 
@@ -488,7 +506,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: Spacing.S,
+    paddingRight: Spacing.M,
   },
   toolkitContainer: {
     marginLeft: Spacing.S,

package/Application/ModalScreen.tsx

@@ -1,40 +1,19 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
-  Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
   View,
 } from 'react-native';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {
-  BottomSheetBackdrop,
-  BottomSheetModal,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+
+import {ApplicationContext} from './index';
+import {Styles} from '../Consts';
 import Navigation from './Navigation';
-import {BottomSheetParams, ModalParams} from './types';
-import {Radius, Spacing, Styles} from '../Consts';
-import {
-  ApplicationContext,
-  HeaderRightAction,
-  NavigationButton,
-  NavigationContainer,
-} from './index';
-import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
+import {ModalParams} from './types';
+import BottomSheet from './BottomSheet';
 
 const ModalScreen: React.FC<any> = props => {
-  /**
-   * dismiss callback when modal | bottom sheet dismissed
-   */
-  useEffect(() => {
-    return () => {
-      props.route.params?.onDismiss?.();
-    };
-  }, []);
-
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
   }
@@ -50,9 +29,14 @@ const Modal: React.FC<ModalParams> = props => {
     ...props.route.params,
     navigation,
   };
-
   delete params.screen;
 
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -91,142 +75,6 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
-const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const insets = useSafeAreaInsets();
-  const {theme, navigator} = useContext(ApplicationContext);
-  const [keyboardSnap, setKeyboardSnap] = useState(0);
-  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
-    props.route.params;
-  const Component = useRef(screen).current;
-  const navigation = new Navigation(props.navigation, theme);
-  const params = {
-    ...props.route.params,
-    navigation,
-  };
-
-  delete params.screen;
-
-  const snapPoints = useMemo(() => {
-    if (snapPoint) {
-      const current = parseInt(snapPoint) + keyboardSnap * 100;
-      return [`${current}%`];
-    }
-    return ['50%', '70%', '90%'];
-  }, [keyboardSnap]);
-
-  const bottomSheetRef = useRef<any>(null);
-  const mountedRef = useRef(true);
-
-  let backgroundColor = theme.colors.background.default;
-  let bottomInset = keyboardSnap * Dimensions.get('window').height;
-  if (bottomInset > 16) {
-    bottomInset -= 16;
-  }
-  if (options?.surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
-  useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
-      setKeyboardSnap(
-        e.endCoordinates.height / Dimensions.get('window').height,
-      );
-      bottomSheetRef.current?.expand();
-    });
-
-    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardSnap(0);
-    });
-
-    bottomSheetRef.current?.present();
-    return () => {
-      mountedRef.current = false;
-      keyboardDidShow.remove();
-      keyboardDidHide.remove();
-    };
-  }, []);
-
-  const backdropComponent = (backdropProps: any) => (
-    <BottomSheetBackdrop
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      {...backdropProps}
-    />
-  );
-
-  return (
-    <SafeAreaView style={Styles.flex}>
-      <BottomSheetModal
-        ref={bottomSheetRef}
-        snapPoints={snapPoints}
-        onDismiss={() => {
-          if (mountedRef.current) {
-            navigator?.pop();
-          }
-        }}
-        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
-        handleComponent={null}
-        backdropComponent={backdropComponent}>
-        <BottomSheetView>
-          <View style={[styles.sheetContainer, {backgroundColor}]}>
-            <View style={styles.indicatorContainer}>
-              <View
-                style={[
-                  styles.indicator,
-                  {backgroundColor: theme.colors.text.disable},
-                ]}
-              />
-            </View>
-            <NavigationContainer
-              maxApi={navigator?.maxApi}
-              theme={{
-                ...theme,
-                assets: {...theme.assets, headerBackground: undefined},
-              }}
-              screen={props => <Component {...props} {...params} />}
-              options={{
-                ...options,
-                ...{
-                  headerLeft: (props: any) => {
-                    if (props.canGoBack) {
-                      return <HeaderLeft {...props} useBorder={false} />;
-                    }
-                  },
-                  headerTitle: (props: any) => {
-                    return <HeaderTitle {...props} />;
-                  },
-                  headerTintColor: theme.colors.text.default,
-                  headerBackground: () => (
-                    <HeaderBackground backgroundColor={backgroundColor} />
-                  ),
-                  headerTransparent: false,
-                },
-                headerTitleAlign: 'center',
-                headerRight: props => (
-                  <HeaderRightAction>
-                    <NavigationButton
-                      {...props}
-                      icon="24_navigation_close"
-                      useBorder={false}
-                      onPress={() => bottomSheetRef.current?.dismiss()}
-                    />
-                  </HeaderRightAction>
-                ),
-              }}
-            />
-            <View
-              style={{
-                height: Math.min(insets.bottom, 20),
-                backgroundColor: indicatorColor ?? backgroundColor,
-              }}
-            />
-          </View>
-        </BottomSheetView>
-      </BottomSheetModal>
-    </SafeAreaView>
-  );
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -244,25 +92,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: '10%',
   },
-  sheetContainer: {
-    height: '100%',
-    width: '100%',
-    borderTopLeftRadius: Radius.M,
-    borderTopRightRadius: Radius.M,
-    overflow: 'hidden',
-  },
-  indicatorContainer: {
-    width: '100%',
-    paddingTop: Spacing.S,
-    paddingBottom: Spacing.XS,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  indicator: {
-    width: 40,
-    height: 4,
-    borderRadius: Radius.S,
-  },
 });
 
 export default ModalScreen;

package/Application/Navigation.ts

@@ -6,8 +6,8 @@ import {getOptions} from './utils';
 import {HeaderToolkitAction} from './Components';
 
 class Navigation {
-  private instance: NavigationProp<any>;
-  private readonly theme: Theme;
+  instance: NavigationProp<any>;
+  readonly theme: Theme;
 
   constructor(instance: any, theme: Theme) {
     this.instance = instance;