@momo-kits/foundation 0.89.6-rc.2 → 0.89.6-rc.3

package/Application/Components.tsx

@@ -1,17 +1,14 @@
 import React, {
-  Ref,
+  Fragment,
   useCallback,
   useContext,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 import {
-  Alert,
   Animated,
   BackHandler,
   DeviceEventEmitter,
-  Dimensions,
   StatusBar,
   StyleSheet,
   TouchableOpacity,
@@ -32,18 +29,7 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
-import {HeaderType} from '../Layout/types';
-import Navigation from './Navigation';
-import {InputRef, InputSearch, InputSearchProps} from '../Input';
-import {BadgeDotAnimation} from '../Badge';
-
-const SCREEN_PADDING = 12;
-const BACK_WIDTH = 28;
-const {width: screenWidth} = Dimensions.get('window');
-
-/**
- * default navigation button used header nav
- */
+
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -51,11 +37,10 @@ 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',
@@ -72,11 +57,6 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     if (badgeType === 'dot') {
       return <BadgeDot size="small" style={styles.badgeDot} />;
     }
-    if (badgeType === 'dot-animation') {
-      return (
-        <BadgeDotAnimation size="small" style={styles.badgeDotAnimation} />
-      );
-    }
 
     if (isNumber(badgeValue)) {
       return <Badge label={badgeValue} style={styles.badge} />;
@@ -84,9 +64,8 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: 28}}>
+    <View style={{width: scaleSize(28)}}>
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
         <Icon
@@ -100,23 +79,17 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   );
 };
 
-/**
- * default header title used for nav
- */
 const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
-  const opacity = props.animatedValue?.interpolate(
-    props.interpolate ?? {
-      inputRange: [0, 200],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }
-  );
+  const opacity = props.animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
 
   return (
     <Animated.Text
       {...props}
-      accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -125,22 +98,19 @@ const HeaderTitle: React.FC<any> = props => {
   );
 };
 
-/**
- * default header left used for nav
- */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
   onPressLeftHeader,
   useBorder,
 }) => {
-  const context = useContext<any>(MiniAppContext);
+  const context = useContext(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe
+      goBackSafe,
     );
 
     return () => backHandler.remove();
@@ -148,25 +118,26 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   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);
+      const canGoBack = navigator?.ref.current?.canGoBack();
+      if (!canGoBack) {
+        const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+        const params = {
+          ...context,
+          screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+          trigger_id: '111154000000000000',
+          icon_name: 'back',
+        };
+        navigator?.maxApi?.showToastDebug?.({
+          appId: 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}`;
@@ -199,7 +170,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
-        accessibilityLabel="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -209,23 +179,17 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   );
 };
 
-/**
- * header background for default
- */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
+  backgroundColor,
   animatedValue,
-  useSurface = false,
+  useBorder = 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],
@@ -237,9 +201,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       style={[
         Styles.flex,
         {
-          backgroundColor,
+          backgroundColor: backgroundColor ?? theme.colors.background.default,
           overflow: 'hidden',
-          borderBottomWidth: useSurface ? 1 : 0,
+          borderBottomWidth: useBorder ? 1 : 0,
           borderColor: theme.colors.border.default,
           opacity,
         },
@@ -260,10 +224,6 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   );
 };
 
-/**
- * Header custom with image, title, subtitle
- * @constructor
- */
 const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
@@ -273,7 +233,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>
@@ -283,10 +243,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text
-          accessibilityLabel={'title_navigation_header'}
-          typography="header_default_bold"
-          color={tintColor}>
+        <Text typography="header_default_bold" color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -298,56 +255,51 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
 };
 
-/**
- * main component for header right
- */
-const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
-  if (type === 'icon') {
-    let buttons = props?.buttons || [];
-    if (buttons?.length > 3) {
-      buttons = buttons.slice(0, 3);
+const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
+  const validateType = (child: React.ReactElement) => {
+    const valid = child?.type === NavigationButton || child?.type == Fragment;
+    if (__DEV__ && !valid) {
+      console.warn(
+        'HeaderRightAction contains element type of NavigationButton, Please check again.',
+      );
     }
+    return child;
+  };
+
+  const renderAction = () => {
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        return (
+          <View key={`HeaderRightAction ${index}`} style={styles.headerButton}>
+            {React.cloneElement(validateType(child), {...restProps})}
+          </View>
+        );
+      });
+    }
+
     return (
-      <View style={styles.headerRightButton} onLayout={onLayout}>
-        {buttons?.map?.((item: NavigationButtonProps, index: number) => {
-          return (
-            <View
-              key={`HeaderRightAction ${index}`}
-              style={{
-                marginLeft: index !== 0 ? Spacing.S : 0,
-              }}>
-              <NavigationButton {...item} tintColor={props?.tintColor} />
-            </View>
-          );
-        })}
+      <View style={styles.headerButton}>
+        {React.cloneElement(validateType(children), {...restProps})}
       </View>
     );
-  }
-
-  return (
-    <View style={styles.headerRightButton} onLayout={onLayout}>
-      {children ?? <HeaderToolkitAction {...props} />}
-    </View>
-  );
+  };
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-/**
- * Header toolkit action
- */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
   runtimeTools = [],
   preventClose,
 }) => {
-  const {navigator} = useContext(ApplicationContext);
-  const miniContext = useContext<any>(MiniAppContext);
+  const {theme, navigator} = useContext(ApplicationContext);
+  const miniContext = useContext(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
   let backgroundColor;
-  if (tintColor !== Colors.black_01) {
-    backgroundColor = 'transparent';
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
   }
 
   useEffect(() => {
@@ -367,7 +319,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      }
+      },
     );
   };
 
@@ -378,9 +330,9 @@ const HeaderToolkitAction: React.FC<any> = ({
       {runtimeTools},
       (res: {item: {action?: string; key: string}}) => {
         const {item} = res;
-        navigator?.toolkitCallback?.(item.key);
+        navigator?.toolkitCallback?.(item);
         getToolkitConfig();
-      }
+      },
     );
   };
 
@@ -397,7 +349,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined
+                  undefined,
                 );
               },
             }}
@@ -417,7 +369,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
-          accessibilityLabel="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -425,19 +376,20 @@ const HeaderToolkitAction: React.FC<any> = ({
           onPress={() => {
             navigator?.maxApi?.dispatchFunction?.(
               'onToolAction',
-              {item: pinTool},
+              [pinTool?.key],
               () => {
                 getToolkitConfig();
-              }
+              },
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
         />
       );
   };
+
   if (toolConfig) {
     return (
-      <View style={Styles.row}>
+      <View style={styles.headerRightButton}>
         {renderPinnedTool()}
         <View
           style={[
@@ -445,18 +397,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
-              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
-          <TouchableOpacity
-            accessibilityLabel={'btn_navigation_more'}
-            onPress={onMore}>
+          <TouchableOpacity onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity
-            accessibilityLabel={'btn_navigation_close'}
-            onPress={onClose}>
+          <TouchableOpacity onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
@@ -471,9 +418,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   return <View />;
 };
 
-/**
- * default header banner for header animated
- */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
@@ -514,191 +458,6 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
-/**
- * Header extended with background image
- * @constructor
- */
-const HeaderExtendHeader: React.FC<{
-  headerType?: HeaderType;
-  animatedValue: Animated.Value;
-  heightHeader: number;
-  inputSearchProps?: InputSearchProps;
-  inputSearchRef?: Ref<InputRef>;
-  navigation?: Navigation;
-}> = ({
-  headerType = 'default',
-  animatedValue,
-  heightHeader,
-  inputSearchProps,
-  inputSearchRef,
-  navigation,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [rightSpace, setRightSpace] = useState(0);
-  const animated = useRef(new Animated.Value(0));
-
-  useEffect(() => {
-    const listener = animatedValue.addListener(({value}) => {
-      animated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, []);
-
-  const height = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [heightHeader + 52, heightHeader],
-    extrapolate: 'clamp',
-  });
-
-  const translateX = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [SCREEN_PADDING, BACK_WIDTH + SCREEN_PADDING * 2],
-    extrapolate: 'clamp',
-  });
-
-  if (navigation) {
-    navigation.onHeaderRightChange = (width: number) => {
-      setRightSpace(width);
-    };
-  }
-
-  const renderInputView = (hasColorBG: boolean = false) => {
-    return (
-      <Animated.View
-        style={{
-          justifyContent: 'flex-end',
-          height,
-        }}>
-        <Animated.View
-          style={{
-            transform: [{translateX}],
-            marginVertical: Spacing.S,
-            width: animated.current.interpolate({
-              inputRange: [0, 100],
-              outputRange: [
-                screenWidth - SCREEN_PADDING * 2,
-                screenWidth - SCREEN_PADDING * 3 - BACK_WIDTH - rightSpace,
-              ],
-              extrapolate: 'clamp',
-            }),
-          }}>
-          <InputSearch
-            {...inputSearchProps}
-            ref={inputSearchRef}
-            hasColorBG={hasColorBG}
-            showButtonText={false}
-          />
-        </Animated.View>
-      </Animated.View>
-    );
-  };
-
-  if (inputSearchProps) {
-    if (headerType === 'surface') {
-      return (
-        <>
-          <Animated.View
-            style={[
-              styles.headerBox,
-              {
-                backgroundColor: theme.colors.background.surface,
-                borderBottomWidth: 1,
-                borderColor: theme.colors.border.default,
-                height,
-              },
-            ]}
-          />
-          {renderInputView(true)}
-        </>
-      );
-    }
-
-    if (headerType === 'extended') {
-      return (
-        <>
-          <Animated.View
-            style={[
-              styles.headerBox,
-              {
-                height,
-              },
-            ]}>
-            <Image
-              source={{
-                uri: theme.assets?.headerBackground,
-              }}
-              style={styles.headerBackground}
-            />
-          </Animated.View>
-          {renderInputView()}
-        </>
-      );
-    }
-
-    return (
-      <>
-        <View style={[styles.headerBox, {height: heightHeader}]}>
-          <Image
-            source={{
-              uri: theme.assets?.headerBackground,
-            }}
-            style={styles.headerBackground}
-          />
-        </View>
-        {renderInputView()}
-      </>
-    );
-  }
-
-  if (headerType === 'extended') {
-    return (
-      <View style={{minHeight: heightHeader}}>
-        <Image
-          source={{
-            uri: theme.assets?.headerBackground,
-          }}
-          style={styles.extendedHeader}
-        />
-      </View>
-    );
-  }
-
-  return <View />;
-};
-
-const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
-  if (__DEV__) {
-    Alert.alert(
-      'HeaderRightAction',
-      'This component is deprecated and will removed 10/2024, please use new type headerRight specs instead v0.92.34'
-    );
-  }
-  const validateType = (child: React.ReactElement) => {
-    return child;
-  };
-
-  const renderAction = () => {
-    if (Array.isArray(children)) {
-      return children.map((child, index) => {
-        return (
-          <View key={`HeaderRightAction ${index}`} style={styles.headerButton}>
-            {React.cloneElement(validateType(child), {...restProps})}
-          </View>
-        );
-      });
-    }
-
-    return (
-      <View style={styles.headerButton}>
-        {React.cloneElement(validateType(children), {...restProps})}
-      </View>
-    );
-  };
-  return <View style={styles.headerRightButton}>{renderAction()}</View>;
-};
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -735,9 +494,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: Spacing.M,
+    paddingRight: Spacing.S,
   },
   toolkitContainer: {
+    marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
     borderRadius: 14,
@@ -769,22 +529,6 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
-  badgeDotAnimation: {
-    position: 'absolute',
-    top: -Spacing.XS,
-    right: -Spacing.XS,
-  },
-  extendedHeader: {
-    aspectRatio: 1.75,
-    position: 'absolute',
-    width: '100%',
-    height: 210,
-  },
-  headerBox: {
-    width: '100%',
-    position: 'absolute',
-    overflow: 'hidden',
-  },
 });
 
 export {
@@ -792,10 +536,8 @@ export {
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,
+  HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
-  HeaderRight,
-  HeaderExtendHeader,
-  HeaderRightAction,
 };