@momo-kits/foundation 0.92.34 → 0.102.1

package/Application/BottomTab/index.tsx

@@ -17,10 +17,9 @@ const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
-  const {theme} = useContext(ApplicationContext);
   let options = {};
   if (route.params?.options) {
-    options = getOptions(route.params?.options, theme);
+    options = getOptions(route.params?.options);
   }
 
   if (route.params?.nested) {

package/Application/Components.tsx

@@ -1,14 +1,17 @@
 import React, {
-  Fragment,
+  Ref,
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
+  Alert,
   Animated,
   BackHandler,
   DeviceEventEmitter,
+  Dimensions,
   StatusBar,
   StyleSheet,
   TouchableOpacity,
@@ -29,7 +32,17 @@ 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';
 
+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,
@@ -81,13 +94,18 @@ 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({
-    inputRange: [0, 200],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
+  const opacity = props.animatedValue?.interpolate(
+    props.interpolate ?? {
+      inputRange: [0, 200],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    }
+  );
 
   return (
     <Animated.Text
@@ -101,6 +119,9 @@ const HeaderTitle: React.FC<any> = props => {
   );
 };
 
+/**
+ * default header left used for nav
+ */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
@@ -168,6 +189,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
@@ -181,6 +203,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   );
 };
 
+/**
+ * header background for default
+ */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   animatedValue,
@@ -229,6 +254,10 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   );
 };
 
+/**
+ * Header custom with image, title, subtitle
+ * @constructor
+ */
 const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
@@ -263,37 +292,42 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
 };
 
-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.'
-      );
+/**
+ * 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);
     }
-    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 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>
     );
-  };
-  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+  }
+
+  return (
+    <View style={styles.headerRightButton} onLayout={onLayout}>
+      {children ?? <HeaderToolkitAction {...props} />}
+    </View>
+  );
 };
 
+/**
+ * Header toolkit action
+ */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
@@ -385,7 +419,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           onPress={() => {
             navigator?.maxApi?.dispatchFunction?.(
               'onToolAction',
-              [pinTool?.key],
+              {item: pinTool},
               () => {
                 getToolkitConfig();
               }
@@ -397,7 +431,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
   if (toolConfig) {
     return (
-      <View style={styles.headerRightButton}>
+      <View style={Styles.row}>
         {renderPinnedTool()}
         <View
           style={[
@@ -405,6 +439,7 @@ const HeaderToolkitAction: React.FC<any> = ({
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
+              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
           <TouchableOpacity
@@ -430,6 +465,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   return <View />;
 };
 
+/**
+ * default header banner for header animated
+ */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
@@ -470,6 +508,191 @@ 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, please use HeaderRight 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,
@@ -509,7 +732,6 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
-    marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
     borderRadius: 14,
@@ -541,6 +763,17 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
+  headerBox: {
+    width: '100%',
+    position: 'absolute',
+    overflow: 'hidden',
+  },
 });
 
 export {
@@ -548,8 +781,10 @@ export {
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,
-  HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
+  HeaderRight,
+  HeaderExtendHeader,
+  HeaderRightAction,
 };

package/Application/ModalScreen.tsx

@@ -21,10 +21,10 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const params = {
     ...props.route.params,
     navigation,

package/Application/Navigation.ts

@@ -1,17 +1,13 @@
-import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions, Theme} from './types';
-import {HeaderRightAction} from './index';
+import {NavigationOptions} from './types';
 import {getOptions} from './utils';
-import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
-  readonly theme: Theme;
+  onHeaderRightChange?: (width: number) => void;
 
-  constructor(instance: any, theme: Theme) {
+  constructor(instance: any) {
     this.instance = instance;
-    this.theme = theme;
   }
 
   /**
@@ -19,16 +15,6 @@ class Navigation {
    * @param params
    */
   private filterParams = (params: NavigationOptions) => {
-    if (params.headerRight) {
-      const headerRight = params.headerRight?.({}) as React.ReactElement;
-      const type = headerRight?.type;
-      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        console.warn(
-          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
-        );
-      }
-    }
-
     if (params.headerLeft) {
       console.warn('headerLeft not allow override render by design system!');
       delete params.headerLeft;
@@ -42,7 +28,7 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    params = getOptions(this.filterParams(params), this.theme);
+    params = getOptions(this.filterParams(params), this);
     this.instance.setOptions(params);
   };
 }

package/Application/StackScreen.tsx

@@ -88,7 +88,7 @@ const EmptyScreen: React.FC = () => {
  * @constructor
  */
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const {showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
   const endTime = useRef(Date.now());
   const timeLoad = useRef(0);
@@ -104,9 +104,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
   });
   const interaction = useRef<any>();
   const context = useContext<any>(MiniAppContext);
-
   const {screen: Component, options, initialParams} = props.route.params;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const heightHeader = useHeaderHeight();
 
   const data = {
@@ -124,9 +123,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * set options for screen
    */
   useLayoutEffect(() => {
+    let defaultOptions = {
+      headerRight: {
+        type: 'toolkit',
+      },
+    };
     if (options) {
-      navigation.setOptions(options);
+      defaultOptions = {
+        ...defaultOptions,
+        ...options,
+      };
     }
+    navigation.setOptions(defaultOptions);
     navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
       tracked.current.traceIdLoad = data?.traceId;
     });
@@ -147,7 +155,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
         navigator?.showModal({screen: EmptyScreen});
       }, 300);
     }
-
     navigator?.maxApi?.of?.({screenName});
     tracked.current.timeoutLoad = setTimeout(() => {
       onScreenLoad();
@@ -172,11 +179,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
       if (timeLoad.current === 0) {
         timeLoad.current = endTime.current - startTime.current;
       }
+
       context.autoTracking?.({
         appId: context.appId,
         code: context.code,
         buildNumber: context.buildNumber,
         screenName,
+        action: 'push',
         componentName: 'Screen',
         state: 'load',
         duration: timeLoad.current,
@@ -186,14 +195,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
         {value: timeLoad.current / 1000},
         null
       );
+      tracked.current.releaseLoad = true;
+
+      /**
+       * debug
+       */
       navigator?.maxApi?.showToastDebug?.({
         appId: `auto - ${context.appId}`,
         message: `${screenName} screen_load_time ${timeLoad.current}`,
       });
-      if (timeLoad.current === 0 && context.enableAutoId) {
+      if (timeLoad.current <= 0 && context.enableAutoId) {
         Alert.alert(screenName, "Can't get screen load time");
       }
-      tracked.current.releaseLoad = true;
     }
   };
 
@@ -205,10 +218,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       if (timeLoad.current === 0) {
         timeLoad.current = endTime.current - startTime.current;
       }
-      if (timeInteraction.current === 0 && context.enableAutoId) {
-        if (context.enableAutoId) {
-          Alert.alert(screenName, "Can't get screen interaction time");
-        }
+      if (timeInteraction.current === 0) {
         timeInteraction.current = timeLoad.current;
       }
 
@@ -226,11 +236,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
         {value: timeInteraction.current / 1000},
         null
       );
+      tracked.current.releaseInteraction = true;
+
+      /**
+       * debug toast
+       */
       navigator?.maxApi?.showToastDebug?.({
         appId: `auto - ${context.appId}`,
         message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
       });
-      tracked.current.releaseInteraction = true;
+      if (timeInteraction.current <= 0 && context.enableAutoId) {
+        Alert.alert(screenName, "Can't get screen interaction time");
+      }
     }
   };
 

package/Application/index.ts

@@ -5,9 +5,9 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderRightAction,
   HeaderTitle,
   NavigationButton,
+  HeaderRightAction,
 } from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
@@ -29,9 +29,9 @@ export {
   Screen,
   BottomTab,
   NavigationButton,
+  HeaderRightAction,
   HeaderTitle,
   HeaderBackground,
-  HeaderRightAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -146,19 +146,29 @@ export type RuntimeToolType = {
   key: string;
 };
 
-export interface NavigationOptions extends StackNavigationOptions {
+export interface NavigationOptions
+  extends Omit<StackNavigationOptions, 'headerRight'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  toolkitParams?: {
-    pinnedTool?: PinnedToolType;
-    runtimeTools?: RuntimeToolType[];
-    preventClose?: PopupNotifyProps;
-  };
+  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
 }
 
+export type HeaderRightToolkit = {
+  type?: 'toolkit';
+  pinnedTool?: PinnedToolType;
+  runtimeTools?: RuntimeToolType[];
+  preventClose?: PopupNotifyProps;
+  useMore?: boolean;
+};
+
+export type HeaderRightActions = {
+  type?: 'icon';
+  buttons: NavigationButtonProps[];
+};
+
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;