@momo-kits/foundation 0.80.9 → 0.81.1-beta.0

package/Application/Components.tsx

@@ -1,144 +1,112 @@
-import React, {Fragment, useContext, useEffect, useState} from 'react';
+import React, {
+  FC,
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 import {
-  Alert,
   Animated,
+  BackHandler,
   DeviceEventEmitter,
-  Platform,
   StatusBar,
   StyleSheet,
-  TouchableOpacity as TouchableRN,
+  TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native';
-import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
-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,
+  IconButton,
   NavigationButtonProps,
   TitleCustomProps,
 } from './types';
 import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
-
-const Touchable = Platform.OS === 'android' ? TouchableGesture : TouchableRN;
-
-const styles = StyleSheet.create({
-  navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
-    borderColor: '#00000066',
-    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',
-    overflow: 'hidden',
-    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',
-  },
-});
+import {Badge, BadgeDot} from '../Badge';
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
-  backgroundColor,
   useBorder = true,
-  accessibilityLabel,
+  badgeType,
+  badgeValue,
+  accessibilityLabel = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
-  if (!backgroundColor && tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
+  let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
+  if (tintColor !== Colors.black_01) {
+    buttonStyle = {
+      backgroundColor: 'transparent',
+      borderColor: '#00000066',
+      borderWidth: useBorder ? 0.5 : 0,
+    };
   }
 
+  const isNumber = (label: any) => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
+  const renderBadge = useCallback(() => {
+    if (badgeType === 'dot') {
+      return <BadgeDot size="small" style={styles.badgeDot} />;
+    }
+
+    if (isNumber(badgeValue)) {
+      return <Badge label={badgeValue} style={styles.badge} />;
+    }
+  }, [badgeType, badgeValue]);
+
   return (
-    <Touchable
-      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
-      style={[
-        styles.navigationButton,
-        {
-          backgroundColor: backgroundColor ?? '#00000066',
-          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
-        },
-      ]}
-      onPress={onPress}>
-      <Icon
-        source={icon}
-        color={tintColor ?? theme.colors.text.default}
-        size={20}
-      />
-    </Touchable>
+    <View style={{width: scaleSize(28)}}>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        style={[styles.navigationButton, buttonStyle]}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={20}
+        />
+      </TouchableOpacity>
+      {renderBadge()}
+    </View>
   );
 };
 
-const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
+const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
-  const opacity = props.animatedValue?.interpolate({
+  const opacityDefault = props.animatedValue?.interpolate({
     inputRange: [0, 200],
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
+  const opacitySearch = props.animatedValue?.interpolate({
+    inputRange: [0, 100],
+    outputRange: [1, 0],
+    extrapolate: 'clamp',
+  });
 
   return (
     <Animated.Text
       {...props}
-      accessibilityLabel={`HeaderTitle/${accessibilityLabel}${props.children}`}
+      accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
-        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+        {
+          fontFamily: `${theme.font}-Bold`,
+          opacity: props.useSearchInput ? opacitySearch : opacityDefault,
+          color: props.tintColor,
+        },
       ]}
     />
   );
@@ -149,48 +117,76 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   useBorder,
-  backgroundColor,
-  accessibilityLabel = '',
 }) => {
+  const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
-  const goBack = () => {
-    const canGoBack = navigator?.ref.current?.canGoBack();
-    if (canGoBack) {
-      if (preventBack) {
-        navigator?.showModal({
-          screen: () => (
-            <PopupNotify
-              {...preventBack}
-              primary={{
-                title: preventBack.primary.title,
-                onPress: () => {
-                  preventBack?.primary.onPress();
-                  navigator?.ref.current?.goBack();
-                },
-              }}
-            />
-          ),
-        });
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBackSafe
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  const goBackSafe = () => {
+    const goBack = () => {
+      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?.();
+      } else if (navigator?.maxApi) {
+        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
       } else {
-        navigator?.ref.current?.goBack();
+        const currentTime = new Date().getTime();
+        const requestId = `navigationBackPress#${currentTime}`;
+        DeviceEventEmitter.emit('dismiss', {requestId});
       }
+      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;
   };
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
+        accessibilityLabel="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
-        onPress={goBack}
-        accessibilityLabel={`${accessibilityLabel}Back`}
+        onPress={goBackSafe}
         useBorder={useBorder}
-        backgroundColor={backgroundColor}
       />
     </View>
   );
@@ -198,17 +194,20 @@ 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, 200],
+    inputRange: [0, 114],
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
@@ -218,15 +217,17 @@ 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,
         },
       ]}>
       <StatusBar
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
+        translucent={true}
+        backgroundColor={'transparent'}
       />
       {!!headerImage && (
         <Image
@@ -248,7 +249,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>
@@ -258,10 +259,13 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="title_xs" color={tintColor}>
+        <Text
+          accessibilityLabel={'title_navigation_header'}
+          typography="header_default_bold"
+          color={tintColor}>
           {title}
         </Text>
-        <Text typography="description_s" color={tintColor}>
+        <Text typography="description_default_regular" color={tintColor}>
           {subTitle}
         </Text>
       </View>
@@ -272,11 +276,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) {
-      Alert.alert(
-        'Rule',
-        'HeaderRightAction contains element type of NavigationButton, Please check again.',
+      console.warn(
+        'HeaderRightAction contains element type of NavigationButton, Please check again.'
       );
     }
     return child;
@@ -286,7 +289,11 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
     if (Array.isArray(children)) {
       return children.map((child, index) => {
         return (
-          <View key={`HeaderRightAction ${index}`} style={styles.headerButton}>
+          <View
+            key={`HeaderRightAction ${index}`}
+            style={{
+              marginLeft: index !== 0 ? Spacing.S : 0,
+            }}>
             {React.cloneElement(validateType(child), {...restProps})}
           </View>
         );
@@ -294,120 +301,169 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
     }
 
     return (
-      <View style={styles.headerButton}>
-        {React.cloneElement(validateType(children), {...restProps})}
-      </View>
+      <View>{React.cloneElement(validateType(children), {...restProps})}</View>
     );
   };
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
-  const {appCode, hidden, type, onAction} = toolConfig ?? {};
+const HeaderRight: FC<any> = ({type, ...props}) => {
+  let buttons = props?.buttons || [];
+  if (!type) {
+    return <View />;
+  }
 
-  let backgroundColor;
-  if (tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
+  if (type === 'iconButton') {
+    if (buttons?.length > 3) {
+      buttons = buttons.slice(0, 3);
+    }
+    return (
+      <HeaderRightAction>
+        {buttons?.map?.(({icon, onPress}: IconButton) => {
+          return (
+            <NavigationButton
+              icon={icon}
+              onPress={onPress}
+              tintColor={props?.tintColor}
+            />
+          );
+        })}
+      </HeaderRightAction>
+    );
   }
 
-  useEffect(() => {
-    navigator?.getToolkit().then((toolConfig: any) => {
-      setToolConfig(toolConfig);
-    });
-  }, []);
+  return <HeaderToolkitAction {...props} />;
+};
+
+const HeaderToolkitAction: React.FC<any> = ({
+  tintColor,
+  pinnedTool,
+  runtimeTools = [],
+  preventClose,
+}) => {
+  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 = 'transparent';
+  }
 
   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,
-            });
-          }
-        },
-      );
+    if (miniContext?.toolkitConfig?.hidden === false) {
+      if (navigator?.toolkitConfig) {
+        setToolConfig(navigator?.toolkitConfig);
+      } else {
+        getToolkitConfig();
+      }
     }
+  }, []);
 
-    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 (preventClose) {
+      navigator?.showModal({
+        screen: () => (
+          <PopupNotify
+            {...preventClose}
+            primary={{
+              title: preventClose.primary.title,
+              onPress: () => {
+                preventClose?.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}
+          accessibilityLabel="btn_navigation_pin"
+          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,
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
+              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
-          <Touchable accessibilityLabel={'Toolkit/More'} onPress={onMore}>
+          <TouchableOpacity
+            accessibilityLabel={'btn_navigation_more'}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-          </Touchable>
+          </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <Touchable accessibilityLabel={`Toolkit/Close`} onPress={onClose}>
+          <TouchableOpacity
+            accessibilityLabel={'btn_navigation_close'}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
               size={20}
             />
-          </Touchable>
+          </TouchableOpacity>
         </View>
       </View>
     );
@@ -416,6 +472,118 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   return <View />;
 };
 
+const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
+  animatedValue,
+  image,
+  children,
+}) => {
+  const scale = animatedValue.interpolate({
+    inputRange: [-300, 0, 300],
+    outputRange: [4, 1, 1],
+    extrapolate: 'clamp',
+  });
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 150, 300],
+    outputRange: [1, 0.5, 0],
+    extrapolate: 'clamp',
+  });
+  const translateY = animatedValue.interpolate({
+    inputRange: [-300, 0],
+    outputRange: [-80, -2],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={{
+        height: 210,
+        opacity: opacity,
+        transform: [{scale}, {translateY}],
+      }}>
+      {children ?? (
+        <Image
+          source={{
+            uri: image,
+          }}
+          style={{width: '100%', height: '100%'}}
+        />
+      )}
+    </Animated.View>
+  );
+};
+
+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.M,
+  },
+  toolkitContainer: {
+    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,
@@ -424,4 +592,6 @@ export {
   HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
+  HeaderAnimated,
+  HeaderRight,
 };