@momo-kits/foundation 0.92.21-beta.9 → 0.92.21-rc.1

package/Application/BottomTab/index.tsx

@@ -17,9 +17,10 @@ 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);
+    options = getOptions(route.params?.options, theme);
   }
 
   if (route.params?.nested) {

package/Application/Components.tsx

@@ -1,8 +1,8 @@
 import React, {
+  Fragment,
   useCallback,
   useContext,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 import {
@@ -29,14 +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 {InputSearchProps} from '../Input';
-import AnimatedInputSearch from '../Layout/AnimatedInputSearch';
 
-/**
- * default navigation button used header nav
- */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -88,18 +81,13 @@ 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
@@ -113,9 +101,6 @@ const HeaderTitle: React.FC<any> = props => {
   );
 };
 
-/**
- * default header left used for nav
- */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
@@ -128,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe
+      goBackSafe,
     );
 
     return () => backHandler.remove();
@@ -183,7 +168,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
@@ -197,9 +181,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   );
 };
 
-/**
- * header background for default
- */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   animatedValue,
@@ -248,10 +229,6 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   );
 };
 
-/**
- * Header custom with image, title, subtitle
- * @constructor
- */
 const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
@@ -286,42 +263,37 @@ 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,
@@ -355,7 +327,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      }
+      },
     );
   };
 
@@ -368,7 +340,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         const {item} = res;
         navigator?.toolkitCallback?.(item);
         getToolkitConfig();
-      }
+      },
     );
   };
 
@@ -385,7 +357,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined
+                  undefined,
                 );
               },
             }}
@@ -416,7 +388,7 @@ const HeaderToolkitAction: React.FC<any> = ({
               [pinTool?.key],
               () => {
                 getToolkitConfig();
-              }
+              },
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
@@ -425,7 +397,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
   if (toolConfig) {
     return (
-      <View style={Styles.row}>
+      <View style={styles.headerRightButton}>
         {renderPinnedTool()}
         <View
           style={[
@@ -433,7 +405,6 @@ const HeaderToolkitAction: React.FC<any> = ({
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
-              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
           <TouchableOpacity
@@ -459,9 +430,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   return <View />;
 };
 
-/**
- * default header banner for header animated
- */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
@@ -502,152 +470,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;
-  navigation?: Navigation;
-}> = ({
-  headerType = 'default',
-  animatedValue,
-  heightHeader,
-  inputSearchProps,
-  navigation,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-
-  const heightAnimated = useRef(new Animated.Value(0));
-
-  useEffect(() => {
-    const listener = animatedValue.addListener(({value}) => {
-      heightAnimated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, []);
-
-  if (inputSearchProps) {
-    if (headerType === 'surface') {
-      return (
-        <View
-          style={{
-            backgroundColor: theme.colors.background.surface,
-            borderBottomWidth: 1,
-            borderColor: theme.colors.border.default,
-          }}>
-          <Animated.View
-            style={{
-              justifyContent: 'flex-end',
-              height: heightAnimated.current.interpolate({
-                inputRange: [0, 100],
-                outputRange: [heightHeader + 52, heightHeader],
-                extrapolate: 'clamp',
-              }),
-            }}>
-            <AnimatedInputSearch
-              animatedValue={animatedValue}
-              navigation={navigation}
-              {...inputSearchProps}
-              hasColorBG={true}
-            />
-          </Animated.View>
-        </View>
-      );
-    }
-
-    if (headerType === 'extended') {
-      return (
-        <>
-          <Animated.View
-            style={[
-              styles.headerBox,
-              {
-                height: heightAnimated.current.interpolate({
-                  inputRange: [0, 100],
-                  outputRange: [heightHeader + 52, heightHeader],
-                  extrapolate: 'clamp',
-                }),
-              },
-            ]}>
-            <Image
-              source={{
-                uri: theme.assets?.headerBackground,
-              }}
-              style={styles.headerBackground}
-            />
-          </Animated.View>
-
-          <Animated.View
-            style={{
-              justifyContent: 'flex-end',
-              height: heightAnimated.current.interpolate({
-                inputRange: [0, 100],
-                outputRange: [heightHeader + 52, heightHeader],
-                extrapolate: 'clamp',
-              }),
-            }}>
-            <AnimatedInputSearch
-              animatedValue={animatedValue}
-              navigation={navigation}
-              {...inputSearchProps}
-            />
-          </Animated.View>
-        </>
-      );
-    }
-
-    return (
-      <>
-        <View style={[styles.headerBox, {height: heightHeader}]}>
-          <Image
-            source={{
-              uri: theme.assets?.headerBackground,
-            }}
-            style={styles.headerBackground}
-          />
-        </View>
-
-        <Animated.View
-          style={{
-            justifyContent: 'flex-end',
-            height: heightAnimated.current.interpolate({
-              inputRange: [0, 100],
-              outputRange: [heightHeader + 52, heightHeader],
-              extrapolate: 'clamp',
-            }),
-          }}>
-          <AnimatedInputSearch
-            animatedValue={animatedValue}
-            navigation={navigation}
-            {...inputSearchProps}
-          />
-        </Animated.View>
-      </>
-    );
-  }
-
-  if (headerType === 'extended') {
-    return (
-      <View style={{minHeight: heightHeader}}>
-        <Image
-          source={{
-            uri: theme.assets?.headerBackground,
-          }}
-          style={styles.extendedHeader}
-        />
-      </View>
-    );
-  }
-
-  return <View />;
-};
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -687,6 +509,7 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
+    marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
     borderRadius: 14,
@@ -718,17 +541,6 @@ 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 {
@@ -736,9 +548,8 @@ export {
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,
+  HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
-  HeaderRight,
-  HeaderExtendHeader,
 };

package/Application/ModalScreen.tsx

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

package/Application/Navigation.ts

@@ -1,13 +1,17 @@
+import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions} from './types';
+import {NavigationOptions, Theme} from './types';
+import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
+import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
-  rightHeaderWidth?: number;
+  readonly theme: Theme;
 
-  constructor(instance: any) {
+  constructor(instance: any, theme: Theme) {
     this.instance = instance;
+    this.theme = theme;
   }
 
   /**
@@ -15,6 +19,16 @@ 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;
@@ -28,7 +42,7 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    params = getOptions(this.filterParams(params), this);
+    params = getOptions(this.filterParams(params), this.theme);
     this.instance.setOptions(params);
   };
 }

package/Application/StackScreen.tsx

@@ -88,7 +88,7 @@ const EmptyScreen: React.FC = () => {
  * @constructor
  */
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {showGrid, navigator} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
   const endTime = useRef(Date.now());
   const timeLoad = useRef(0);
@@ -104,7 +104,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const {screen: Component, options, initialParams} = props.route.params;
-  const navigation = new Navigation(props.navigation);
+  const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
   const data = {

package/Application/index.ts

@@ -5,6 +5,7 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
+  HeaderRightAction,
   HeaderTitle,
   NavigationButton,
 } from './Components';
@@ -30,6 +31,7 @@ export {
   NavigationButton,
   HeaderTitle,
   HeaderBackground,
+  HeaderRightAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

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

package/Application/utils.tsx

@@ -7,13 +7,11 @@ import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
-  HeaderRight,
   HeaderTitle,
+  HeaderToolkitAction,
 } from './Components';
-import {NavigationOptions} from './types';
+import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import Navigation from './Navigation';
-import {LayoutChangeEvent} from 'react-native';
 
 /**
  * default options for stack screen
@@ -24,7 +22,7 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderRight {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     headerTintColor: Colors.black_01,
   };
 };
@@ -74,42 +72,33 @@ const getModalOptions = (): StackNavigationOptions => {
 /**
  * build react-navigation options
  */
-const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
+const getOptions = (params: NavigationOptions, theme: Theme) => {
   let options = {};
 
-  /**
-   * left header factory
-   */
   if (
     typeof params.onPressLeftHeader === 'function' ||
     params.preventBack !== undefined ||
     typeof params.hiddenBack === 'boolean'
   ) {
-    let headerLeft: any = (props: any) => (
-      <HeaderLeft
-        {...props}
-        preventBack={params.preventBack}
-        onPressLeftHeader={params.onPressLeftHeader}
-      />
-    );
-    if (params.hiddenBack) {
-      headerLeft = null;
-    }
     options = {
       ...options,
-      headerLeft,
+      headerLeft: params.hiddenBack
+        ? null
+        : (props: any) => (
+            <HeaderLeft
+              {...props}
+              preventBack={params.preventBack}
+              onPressLeftHeader={params.onPressLeftHeader}
+            />
+          ),
     };
   }
 
-  /**
-   * surface header style
-   */
   if (typeof params.surface === 'boolean') {
-    console.warn('surface options is deprecated, headerType instead in screen');
     if (params.surface) {
       options = {
         ...options,
-        headerTintColor: Colors.black_17,
+        headerTintColor: theme.colors.text.default,
         headerBackground: () => (
           <HeaderBackground image={null} useSurface={true} />
         ),
@@ -123,13 +112,7 @@ const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
     }
   }
 
-  /**
-   * custom title
-   */
   if (params.customTitle) {
-    console.warn(
-      'customTitle options is deprecated, please used headerTitle instead'
-    );
     options = {
       ...options,
       headerTitleAlign: 'left',
@@ -139,41 +122,12 @@ const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
     };
   }
 
-  /**
-   *  header right
-   */
-  if (params.headerRight) {
-    let headerRight: any = (props: any) => {
-      return (
-        <HeaderRight
-          {...props}
-          {...params.headerRight}
-          onLayout={(e: LayoutChangeEvent) => {
-            if (navigation) {
-              navigation.rightHeaderWidth = e.nativeEvent.layout.width;
-            }
-          }}
-        />
-      );
-    };
-    if (typeof params.headerRight === 'function') {
-      headerRight = (props: any) => {
-        return (
-          <HeaderRight
-            {...props}
-            onLayout={(e: LayoutChangeEvent) => {
-              if (navigation) {
-                navigation.rightHeaderWidth = e.nativeEvent.layout.width;
-              }
-            }}>
-            {params.headerRight(props)}
-          </HeaderRight>
-        );
-      };
-    }
+  if (params.toolkitParams) {
     options = {
       ...options,
-      headerRight,
+      headerRight: (props: any) => {
+        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
+      },
     };
   }
 

package/Button/index.tsx

@@ -297,6 +297,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+
   return (
     <ComponentContext.Provider
       value={{