@momo-kits/foundation 0.92.21-beta.0 → 0.92.21-beta.1

package/Application/BottomTab/BottomTabBar.tsx

@@ -125,7 +125,7 @@ export default function BottomTabBar({
         );
       });
     },
-    [JSON.stringify(routes), state, descriptors, focusedTab]
+    [JSON.stringify(routes), state, descriptors, focusedTab],
   );
 
   /**
@@ -153,7 +153,7 @@ export default function BottomTabBar({
           </View>
           <View
             style={{
-              top: -4,
+              top: -6,
               backgroundColor: activeTintColor ?? theme.colors.primary,
               borderRadius: Radius.XL,
               paddingHorizontal: 6,

package/Application/BottomTab/index.tsx

@@ -101,7 +101,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             name={item.name}
             component={TabScreen}
             initialParams={{...item, nested}}
-            listeners={item.listeners ?? listeners}
+            listeners={listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (

package/Application/Components.tsx

@@ -1,8 +1,9 @@
 import React, {
-  Fragment,
+  FC,
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -83,11 +84,6 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 
 const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
-  const opacity = props.animatedValue?.interpolate({
-    inputRange: [0, 200],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
 
   return (
     <Animated.Text
@@ -95,7 +91,11 @@ const HeaderTitle: React.FC<any> = props => {
       accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
-        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+        {
+          fontFamily: `${theme.font}-Bold`,
+          color: props.tintColor,
+          opacity: props.titleOpacity,
+        },
       ]}
     />
   );
@@ -113,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe,
+      goBackSafe
     );
 
     return () => backHandler.remove();
@@ -263,35 +263,40 @@ 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.',
-      );
-    }
-    return child;
-  };
+const HeaderRight: FC<any> = ({type, ...props}) => {
+  let buttons = props?.buttons || [];
+  if (!type) {
+    return <View />;
+  }
 
-  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>
-        );
-      });
+  if (type === 'iconButton') {
+    if (buttons?.length > 3) {
+      buttons = buttons.slice(0, 3);
     }
-
     return (
-      <View style={styles.headerButton}>
-        {React.cloneElement(validateType(children), {...restProps})}
+      <View style={styles.headerRightButton}>
+        {buttons?.map?.(
+          ({icon, onPress}: NavigationButtonProps, index: number) => {
+            return (
+              <View
+                key={`HeaderRightAction ${index}`}
+                style={{
+                  marginLeft: index !== 0 ? Spacing.S : 0,
+                }}>
+                <NavigationButton
+                  icon={icon}
+                  onPress={onPress}
+                  tintColor={props?.tintColor}
+                />
+              </View>
+            );
+          }
+        )}
       </View>
     );
-  };
-  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+  }
+
+  return <HeaderToolkitAction {...props} />;
 };
 
 const HeaderToolkitAction: React.FC<any> = ({
@@ -327,7 +332,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      },
+      }
     );
   };
 
@@ -340,7 +345,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         const {item} = res;
         navigator?.toolkitCallback?.(item);
         getToolkitConfig();
-      },
+      }
     );
   };
 
@@ -357,7 +362,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined,
+                  undefined
                 );
               },
             }}
@@ -388,7 +393,7 @@ const HeaderToolkitAction: React.FC<any> = ({
               [pinTool?.key],
               () => {
                 getToolkitConfig();
-              },
+              }
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
@@ -405,6 +410,7 @@ const HeaderToolkitAction: React.FC<any> = ({
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
+              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
           <TouchableOpacity
@@ -470,6 +476,42 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
+const ExtendBackground: FC<{
+  headerBackground: string;
+  animatedValue: Animated.Value;
+  heightHeader: number;
+}> = ({headerBackground, animatedValue, heightHeader}) => {
+  const heightAnimated = useRef(new Animated.Value(0));
+  useEffect(() => {
+    const listener = animatedValue.addListener(({value}) => {
+      heightAnimated.current.setValue(value);
+    });
+    return () => {
+      animatedValue?.removeListener(listener);
+    };
+  }, []);
+
+  return (
+    <>
+      <Image
+        source={{
+          uri: headerBackground,
+        }}
+        style={styles.extendedHeader}
+      />
+      <Animated.View
+        style={{
+          height: heightAnimated.current.interpolate({
+            inputRange: [0, 100],
+            outputRange: [heightHeader, heightHeader - 52],
+            extrapolate: 'clamp',
+          }),
+        }}
+      />
+    </>
+  );
+};
+
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -509,7 +551,6 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
-    marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
     borderRadius: 14,
@@ -541,6 +582,12 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
 });
 
 export {
@@ -548,8 +595,9 @@ export {
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,
-  HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
+  HeaderRight,
+  ExtendBackground,
 };

package/Application/Navigation.ts

@@ -1,9 +1,6 @@
-import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions, Theme} from './types';
-import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
-import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
@@ -19,16 +16,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;

package/Application/types.ts

@@ -1,5 +1,4 @@
 import {StackNavigationOptions} from '@react-navigation/stack';
-import {EventArg} from '@react-navigation/core';
 import React from 'react';
 import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
@@ -145,19 +144,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 | Element;
 }
 
+export type HeaderRightToolkit = {
+  type?: 'toolkit';
+  pinnedTool?: PinnedToolType;
+  runtimeTools?: RuntimeToolType[];
+  preventClose?: PopupNotifyProps;
+  useMore?: boolean;
+};
+
+export type HeaderRightActions = {
+  type?: 'iconButton';
+  buttons: NavigationButtonProps[];
+};
+
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
@@ -199,11 +208,6 @@ export type BottomTabItemProps = {
   screen: Screen;
   options: NavigationOptions;
   initialParams?: any;
-  listeners?: {
-    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
-    focus?: (e: EventArg<'focus', false, unknown>) => void;
-    blur?: (e: EventArg<'blur', false, unknown>) => void;
-  };
 };
 
 export type BottomTabProps = {
@@ -212,9 +216,8 @@ export type BottomTabProps = {
   initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
-    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
-    focus?: (e: EventArg<'focus', false, unknown>) => void;
-    blur?: (e: EventArg<'blur', false, unknown>) => void;
+    tabPress?: any;
+    focus?: any;
   };
   floatingButton?: FloatingButtonProps;
 };

package/Application/utils.tsx

@@ -122,15 +122,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (params.toolkitParams) {
-    options = {
-      ...options,
-      headerRight: (props: any) => {
-        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
-      },
-    };
-  }
-
   return {
     ...params,
     ...options,

package/Button/index.tsx

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

package/Icon/types.ts

@@ -16,6 +16,7 @@ export type IconProps = {
 
   /**
    *  Optional. Represents the color of the icon.
+   * It can be any valid color in @momo-kits/foundation.
    */
   color?: string | null;
 

package/Input/InputDropDown.tsx

@@ -4,7 +4,7 @@ import {ApplicationContext, ComponentContext} from '../Application';
 import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {ErrorView, FloatingView, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import styles from './styles';
 
@@ -61,7 +61,7 @@ const InputDropDown = ({
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size),
-          getBorderColor(theme, false, errorMessage, disabled),
+          // getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}

package/Input/InputMoney.tsx

@@ -44,7 +44,7 @@ const InputMoney = forwardRef(
       value: _value,
       ...props
     }: InputMoneyProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -63,7 +63,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : '',
+      defaultValue ? validateText(defaultValue) : ''
     );
 
     const onClearText = () => {
@@ -198,7 +198,7 @@ const InputMoney = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -41,7 +41,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           duration: DURATION,
           useNativeDriver: true,
         }),
-      ]),
+      ])
     ).start();
   }, []);
   const spacingStyle = !isNaN(Number(length)) &&
@@ -81,7 +81,7 @@ const InputOTP = forwardRef(
       hintText,
       ...props
     }: InputOTPProps,
-    ref,
+    ref
   ) => {
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
@@ -143,7 +143,7 @@ const InputOTP = forwardRef(
                 {value[i] || '-'}
               </Text>
             )}
-          </View>,
+          </View>
         );
       }
       return TextInputs;
@@ -248,7 +248,7 @@ const InputOTP = forwardRef(
         </TouchableOpacity>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputOTP;