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

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

@@ -144,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;

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

@@ -61,6 +61,7 @@ const InputDropDown = ({
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size),
+          // 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;

package/Input/InputSearch.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  ForwardRefRenderFunction,
   useContext,
   useImperativeHandle,
   useRef,
@@ -15,177 +16,195 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
-import {InputSearchProps} from './index';
+import {InputSearchProps, InputSearchRef} from './index';
 import styles from './styles';
 import {checkTyping} from './utils';
+import TextTyping from './TextTyping';
 
-const InputSearch = forwardRef(
-  (
-    {
-      placeholder,
-      onFocus,
-      onBlur,
-      iconColor,
-      value,
-      onChangeText,
-      icon,
-      buttonText = 'Hủy',
-      showButtonText = true,
-      style,
-      defaultValue,
-      onPressButtonText,
-      params,
-      hasColorBG = false,
-      accessibilityLabel,
-      ...props
-    }: InputSearchProps,
-    ref,
-  ) => {
-    const {theme} = useContext(ApplicationContext);
-    const [focused, setFocused] = useState(false);
-    const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
-    const inputRef = useRef<TextInput | null>(null);
+const InputSearch: ForwardRefRenderFunction<
+  InputSearchRef,
+  InputSearchProps
+> = (
+  {
+    placeholder,
+    onFocus,
+    onBlur,
+    iconColor,
+    value,
+    onChangeText,
+    icon,
+    buttonText = 'Hủy',
+    showButtonText = true,
+    style,
+    defaultValue,
+    onPressButtonText,
+    params,
+    hasColorBG = false,
+    accessibilityLabel,
+    typingData = [],
+    onPress,
+    ...props
+  },
+  ref
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+  const inputRef = useRef<TextInput | null>(null);
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(true);
-      onFocus?.(e);
-    };
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(false);
-      onBlur?.(e);
-    };
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
 
-    const onClearText = () => {
-      inputRef?.current?.clear();
-      _onChangeText('');
-    };
+  const onClearText = () => {
+    inputRef?.current?.clear();
+    _onChangeText('');
+  };
 
-    const _onChangeText = (text: string) => {
-      checkTyping(text, haveValue, setHaveValue);
-      onChangeText?.(text);
-    };
+  const _onChangeText = (text: string) => {
+    checkTyping(text, haveValue, setHaveValue);
+    onChangeText?.(text);
+  };
 
-    useImperativeHandle(ref, () => {
-      return {
-        clear: onClearText,
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
-        setText: (text: string) => _onChangeText(text),
-      };
-    });
+  useImperativeHandle(ref, () => {
+    return {
+      clear: onClearText,
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      setText: (text: string) => _onChangeText(text),
+    };
+  });
 
-    const renderInputView = () => {
+  const renderInputView = () => {
+    if (typingData?.length > 0) {
       return (
-        <TextInput
-          {...props}
-          accessibilityLabel={accessibilityLabel}
-          textAlignVertical="center"
-          ref={inputRef}
+        <TouchableOpacity
           style={[
             styles.searchInput,
             {
-              color: theme.colors.text.default,
+              justifyContent: 'center',
             },
           ]}
-          value={value}
-          onChangeText={_onChangeText}
-          onFocus={_onFocus}
-          onBlur={_onBlur}
-          placeholder={placeholder}
-          selectionColor={theme.colors.primary}
-          placeholderTextColor={theme.colors.text.hint}
-        />
+          onPress={onPress}
+          activeOpacity={onPress ? 0.6 : 1}>
+          <TextTyping data={typingData} />
+        </TouchableOpacity>
       );
-    };
-
-    const renderIconView = () => {
-      return (
-        <View
-          style={{
-            flexDirection: 'row',
-          }}>
-          {focused && haveValue && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
-              />
-            </TouchableOpacity>
-          )}
-          {!!icon && (
-            <View style={{flexDirection: 'row'}}>
-              <View
-                style={[
-                  styles.divider,
-                  {
-                    backgroundColor: theme.colors.primary,
-                  },
-                ]}
-              />
-              <Icon
-                color={iconColor}
-                source={icon}
-                style={styles.iconSearchInput}
-              />
-            </View>
-          )}
-        </View>
-      );
-    };
-
-    let inputState = 'empty';
-
-    if (focused) {
-      inputState = 'focus';
-    }
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
     }
 
-    const backgroundColor = hasColorBG
-      ? theme.colors.background.default
-      : theme.colors.background.surface;
+    return (
+      <TextInput
+        {...props}
+        accessibilityLabel={accessibilityLabel}
+        textAlignVertical="center"
+        ref={inputRef}
+        style={[
+          styles.searchInput,
+          {
+            color: theme.colors.text.default,
+          },
+        ]}
+        value={value}
+        onChangeText={_onChangeText}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        placeholder={placeholder}
+        selectionColor={theme.colors.primary}
+        placeholderTextColor={theme.colors.text.hint}
+      />
+    );
+  };
 
+  const renderIconView = () => {
     return (
-      <ComponentContext.Provider
-        value={{
-          componentName: 'InputSearch',
-          params,
-          state: inputState,
-          componentId: accessibilityLabel,
+      <View
+        style={{
+          flexDirection: 'row',
         }}>
-        <View style={[style, styles.searchInputContainer]}>
-          <View
-            style={[
-              styles.searchInputWrapper,
-              {
-                backgroundColor,
-              },
-            ]}>
+        {focused && haveValue && (
+          <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
             <Icon
-              source={'navigation_search'}
-              size={24}
+              source="24_navigation_close_circle_full"
+              size={16}
               color={theme.colors.text.hint}
             />
-            {renderInputView()}
-            {renderIconView()}
+          </TouchableOpacity>
+        )}
+        {!!icon && (
+          <View style={{flexDirection: 'row'}}>
+            <View
+              style={[
+                styles.divider,
+                {
+                  backgroundColor: theme.colors.primary,
+                },
+              ]}
+            />
+            <Icon
+              color={iconColor}
+              source={icon}
+              style={styles.iconSearchInput}
+            />
           </View>
-          {showButtonText && (
-            <TouchableOpacity onPress={onPressButtonText}>
-              <Text
-                typography={'action_default_bold'}
-                style={styles.textButton}>
-                {buttonText}
-              </Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      </ComponentContext.Provider>
+        )}
+      </View>
     );
-  },
-);
+  };
+
+  let inputState = 'empty';
+
+  if (focused) {
+    inputState = 'focus';
+  }
+
+  if (value && value?.length > 0) {
+    inputState = 'filled';
+  }
+
+  const backgroundColor = hasColorBG
+    ? theme.colors.background.default
+    : theme.colors.background.surface;
+
+  return (
+    <ComponentContext.Provider
+      value={{
+        componentName: 'InputSearch',
+        params,
+        state: inputState,
+        componentId: accessibilityLabel,
+      }}>
+      <View style={[style, styles.searchInputContainer]}>
+        <View
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor,
+            },
+          ]}>
+          <Icon
+            source={'navigation_search'}
+            size={24}
+            color={theme.colors.text.hint}
+          />
+          {renderInputView()}
+          {renderIconView()}
+        </View>
+        {showButtonText && (
+          <TouchableOpacity onPress={onPressButtonText}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
+              {buttonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </ComponentContext.Provider>
+  );
+};
 
-export default InputSearch;
+export default forwardRef(InputSearch);

package/Input/TextTyping.tsx

@@ -0,0 +1,108 @@
+import React, {FC, memo, useEffect, useRef} from 'react';
+import {StyleSheet, TextInput, TextStyle} from 'react-native';
+import {Colors} from '../Consts';
+import {scaleSize} from '../Text';
+
+export interface TextTypingProps {
+  data: string[];
+  timeDelayEnd?: number;
+  timeDelayNextChar?: number;
+  inputStyle?: TextStyle;
+}
+
+const TextTyping: FC<TextTypingProps> = ({
+  data = [],
+  timeDelayEnd = 2000,
+  timeDelayNextChar = 20,
+  inputStyle = {},
+}) => {
+  const textRef = useRef<TextInput>(null);
+
+  const currentIndex = useRef<number>(0);
+  const currentCharIndex = useRef<number>(0);
+  const currentText = useRef('');
+
+  useEffect(() => {
+    setTimeout(() => {
+      playAnimation();
+    }, 1000);
+  }, []);
+
+  const playAnimation = () => {
+    const handleResetList = () => {
+      currentIndex.current = 0;
+      handleAnimation();
+    };
+
+    const handleAnimation = () => {
+      const listChar = data?.[currentIndex.current]?.split('') || [];
+      listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
+    };
+
+    currentIndex.current >= data?.length
+      ? handleResetList()
+      : handleAnimation();
+  };
+
+  const showChar = (char?: string) => {
+    const handleResetString = () => {
+      setTimeout(() => {
+        reset();
+      }, timeDelayEnd);
+    };
+
+    const handleShowChar = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current + char,
+        });
+        currentText.current += char;
+        currentCharIndex.current++;
+        playAnimation();
+      }, timeDelayNextChar);
+    };
+
+    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
+      ? handleResetString()
+      : handleShowChar();
+  };
+
+  const reset = () => {
+    const handleNextString = () => {
+      currentIndex.current++;
+      playAnimation();
+    };
+
+    const handleReset = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current.slice(0, -1),
+        });
+        currentText.current = currentText.current.slice(0, -1);
+        currentCharIndex.current--;
+        reset();
+      }, timeDelayNextChar);
+    };
+
+    currentCharIndex.current <= 0 ? handleNextString() : handleReset();
+  };
+
+  return (
+    <TextInput
+      style={[styles.inputStyle, inputStyle]}
+      ref={textRef}
+      editable={false}
+      autoCorrect={false}
+      pointerEvents={'none'}
+    />
+  );
+};
+
+export default memo(TextTyping);
+
+const styles = StyleSheet.create({
+  inputStyle: {
+    color: Colors.black_12,
+    fontSize: scaleSize(12),
+  },
+});

package/Input/index.tsx

@@ -1,4 +1,4 @@
-import {TextInputProps, ViewStyle} from 'react-native';
+import {GestureResponderEvent, TextInputProps, ViewStyle} from 'react-native';
 import Input from './Input';
 import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
@@ -143,6 +143,9 @@ export interface InputSearchProps extends TextInputProps {
    * Optional. Represents the style of the InputSearch component.
    */
   params?: any;
+
+  typingData?: string[];
+  onPress?: (e: GestureResponderEvent) => void;
 }
 
 export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
@@ -282,4 +285,11 @@ export interface InputDropDownProps extends InputProps {
   style?: ViewStyle | ViewStyle[];
 }
 
+export type InputSearchRef = {
+  clear: () => void;
+  focus: () => void | undefined;
+  blur: () => void | undefined;
+  setText: (text: string) => void;
+};
+
 export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Layout/AnimatedInputSearch.tsx

@@ -0,0 +1,58 @@
+import React, {FC, useEffect, useRef} from 'react';
+import {InputSearch} from '../Input';
+import {Animated, Dimensions} from 'react-native';
+import {AnimatedInputSearchProps} from './types';
+import {Spacing} from '../Consts';
+import {scaleSize} from '../Text';
+
+const {width: screenWidth} = Dimensions.get('window');
+const SCREEN_PADDING = 12;
+const BACK_WIDTH = scaleSize(28);
+
+const AnimatedInputSearch: FC<AnimatedInputSearchProps> = ({
+  animatedValue,
+  headerRightWidth,
+  inputSearchProps,
+  inputRef,
+}) => {
+  const widthAnimated = useRef(new Animated.Value(0));
+
+  useEffect(() => {
+    const listener = animatedValue.addListener(({value}) => {
+      widthAnimated.current.setValue(value);
+    });
+    return () => {
+      animatedValue?.removeListener(listener);
+    };
+  }, []);
+
+  const translateX = widthAnimated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [SCREEN_PADDING, BACK_WIDTH + SCREEN_PADDING * 2],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={{
+        transform: [{translateX}],
+        marginVertical: Spacing.S,
+        width: widthAnimated.current.interpolate({
+          inputRange: [0, 100],
+          outputRange: [
+            screenWidth - SCREEN_PADDING * 2,
+            screenWidth - SCREEN_PADDING * 3 - BACK_WIDTH - headerRightWidth,
+          ],
+          extrapolate: 'clamp',
+        }),
+      }}>
+      <InputSearch
+        ref={inputRef}
+        {...inputSearchProps}
+        showButtonText={false}
+      />
+    </Animated.View>
+  );
+};
+
+export default AnimatedInputSearch;

package/Layout/Screen.tsx

@@ -2,14 +2,17 @@ import {useHeaderHeight} from '@react-navigation/stack';
 import React, {
   forwardRef,
   Fragment,
+  LegacyRef,
   ReactNode,
   useContext,
   useEffect,
   useRef,
+  useState,
 } from 'react';
 import {
   Animated,
   KeyboardAvoidingView,
+  LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
@@ -24,13 +27,20 @@ import {
   HeaderTitle,
 } from '../Application';
 import Navigation from '../Application/Navigation';
-import {AnimatedHeader, NavigationOptions} from '../Application/types';
+import {
+  AnimatedHeader,
+  HeaderRightActions,
+  HeaderRightToolkit,
+  NavigationOptions,
+} from '../Application/types';
 import {Colors, Spacing, Styles} from '../Consts';
 import {FloatingButton, FloatingButtonProps} from './FloatingButton';
-import {Image} from '../Image';
 import {Card, Section, validateChildren} from './index';
 import styles from './styles';
 import {HeaderType} from './types';
+import AnimatedInputSearch from './AnimatedInputSearch';
+import {InputSearchProps, InputSearchRef} from '../Input';
+import {ExtendBackground, HeaderRight} from '../Application/Components';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -101,8 +111,15 @@ export interface ScreenProps extends ViewProps {
    * Optional. If `true`, the screen content is using grid layout by span.
    */
   useGridLayout?: boolean;
+
+  inputSearchProps?: InputSearchProps;
+
+  headerRight?: HeaderRightActions | HeaderRightToolkit | CustomHeaderRight;
+  inputSearchRef?: LegacyRef<InputSearchRef>;
 }
 
+type CustomHeaderRight = (props: any) => Element;
+
 const Screen = forwardRef(
   (
     {
@@ -120,26 +137,31 @@ const Screen = forwardRef(
       floatingButtonProps,
       useGridLayout = true,
       keyboardVerticalOffset,
+      inputSearchProps,
+      headerRight,
+      inputSearchRef,
     }: ScreenProps,
-    ref,
+    ref
   ) => {
     const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
+    const scrollViewRef = useRef<any>(ref);
     const currentTint = useRef(Colors.black_01);
-    const isTab = navigation?.instance?.getState?.()?.type == 'tab';
+    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
+    const [headerRightWidth, setHeaderRightWidth] = useState(0);
 
     let styleAnimatedHeader: NavigationOptions;
     let handleScroll;
     let headerBackground: string | undefined = undefined;
     let Component: any = View;
     let keyboardOffset = heightHeader - 20;
-    if (headerType == 'extended' || animatedHeader) {
+    if (headerType === 'extended' || animatedHeader) {
       keyboardOffset = -20;
     }
 
-    if (headerType == 'extended') {
+    if (headerType === 'extended') {
       headerBackground = theme.assets?.headerBackground;
     }
 
@@ -157,7 +179,7 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type == 'surface') {
+        if (animatedHeader.type === 'surface') {
           styleAnimatedHeader = {
             ...styleAnimatedHeader,
             headerBackground: (props: any) => (
@@ -180,6 +202,7 @@ const Screen = forwardRef(
               }),
           };
         }
+
         navigation?.setOptions(styleAnimatedHeader);
       }
     }, [animatedHeader]);
@@ -187,6 +210,22 @@ const Screen = forwardRef(
     useEffect(() => {
       if (!animatedHeader) {
         let headerOptions: NavigationOptions;
+
+        const interpolateConfig: Animated.InterpolationConfigType =
+          inputSearchProps
+            ? {
+                inputRange: [0, 100],
+                outputRange: [1, 0],
+                extrapolate: 'clamp',
+              }
+            : {
+                inputRange: [0, 200],
+                outputRange: [0, 1],
+                extrapolate: 'clamp',
+              };
+        const titleOpacity =
+          animatedValue.current.interpolate(interpolateConfig);
+
         switch (headerType) {
           case 'none':
             headerOptions = {
@@ -214,7 +253,9 @@ const Screen = forwardRef(
               headerTransparent: true,
               headerTintColor: Colors.black_01,
               headerBackground: () => null,
-              headerTitle: (props: any) => <HeaderTitle {...props} />,
+              headerTitle: (props: any) => (
+                <HeaderTitle {...props} titleOpacity={titleOpacity} />
+              ),
             };
             break;
 
@@ -230,13 +271,33 @@ const Screen = forwardRef(
       }
     }, [headerType]);
 
+    useEffect(() => {
+      if (headerRight) {
+        navigation?.setOptions({
+          headerRight: (props: any) => (
+            <View onLayout={onHeaderRightLayout}>
+              {typeof headerRight === 'function' ? (
+                headerRight(props)
+              ) : (
+                <HeaderRight {...props} {...headerRight} />
+              )}
+            </View>
+          ),
+        });
+      }
+    }, [headerRight]);
+
+    const onHeaderRightLayout = (e: LayoutChangeEvent) => {
+      setHeaderRightWidth(e.nativeEvent.layout.width);
+    };
+
     /**
      * animated when use scroll && animated value
      */
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader || floatingButtonProps?.icon) {
+      if (animatedHeader || floatingButtonProps?.icon || inputSearchProps) {
         handleScroll = Animated.event(
           [
             {
@@ -249,13 +310,13 @@ const Screen = forwardRef(
             useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
               scrollViewProps?.onScroll?.(e);
-              if (animatedHeader?.type == 'surface') {
+              if (animatedHeader?.type === 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;
                 if (offsetY > 50) {
                   color = theme.colors.text.default;
                 }
-                if (color != currentTint.current) {
+                if (color !== currentTint.current) {
                   currentTint.current = color;
                   navigation?.setOptions({
                     headerTintColor: color,
@@ -263,11 +324,26 @@ const Screen = forwardRef(
                 }
               }
             },
-          },
+          }
         );
       }
     }
 
+    const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetY = e.nativeEvent.contentOffset.y;
+
+      if (inputSearchProps && offsetY < 100 && offsetY > 0) {
+        Animated.timing(animatedValue.current, {
+          toValue: 0,
+          useNativeDriver: true,
+          duration: 300,
+        }).start();
+        scrollViewRef.current?.scrollTo({y: 0, animated: true});
+      }
+
+      scrollViewProps?.onScrollEndDrag?.(e);
+    };
+
     /**
      * render top navigation banner
      */
@@ -287,7 +363,7 @@ const Screen = forwardRef(
       if (Array.isArray(results)) {
         return results.map((item, index) => {
           const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-          if (item?.type == Fragment) {
+          if (item?.type === Fragment) {
             return renderContent(item?.props?.children);
           }
           if (item) {
@@ -307,7 +383,7 @@ const Screen = forwardRef(
       } else {
         const item: any = children;
         const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-        if (item?.type == Fragment) {
+        if (item?.type === Fragment) {
           return renderContent(item?.props?.children);
         }
         return (
@@ -327,15 +403,21 @@ const Screen = forwardRef(
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
-          <>
-            <Image
-              source={{
-                uri: headerBackground,
-              }}
-              style={styles.extendedHeader}
-            />
-            <View style={{height: heightHeader}} />
-          </>
+          <ExtendBackground
+            headerBackground={headerBackground}
+            heightHeader={heightHeader}
+            animatedValue={animatedValue.current}
+          />
+        )}
+        {inputSearchProps && (
+          <AnimatedInputSearch
+            animatedValue={animatedValue.current}
+            headerRightWidth={headerRightWidth}
+            headerType={headerType}
+            heightHeader={heightHeader}
+            inputSearchProps={inputSearchProps}
+            inputRef={inputSearchRef}
+          />
         )}
         <KeyboardAvoidingView
           style={Styles.flex}
@@ -349,9 +431,11 @@ const Screen = forwardRef(
 
           <Component
             {...scrollViewProps}
-            ref={ref}
+            ref={scrollViewRef}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
+            onScrollEndDrag={handleScrollEnd}
+            scrollEventThrottle={16}
             style={Styles.flex}>
             <View
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
@@ -387,7 +471,7 @@ const Screen = forwardRef(
         </KeyboardAvoidingView>
       </View>
     );
-  },
+  }
 );
 
 export default Screen;

package/Layout/styles.ts

@@ -2,12 +2,6 @@ import {Platform, StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
-  extendedHeader: {
-    aspectRatio: 1.75,
-    position: 'absolute',
-    width: '100%',
-    height: 210,
-  },
   screenBanner: {
     width: '100%',
   },

package/Layout/types.ts

@@ -1,4 +1,8 @@
-export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
+import {Animated} from 'react-native';
+import {InputSearchProps, InputSearchRef} from '../Input';
+import {LegacyRef} from 'react';
+
+export type HeaderType = 'default' | 'surface' | 'extended' | 'search' | 'none';
 
 export type GridContextProps = {
   /**
@@ -21,3 +25,18 @@ export type GridContextProps = {
    */
   getSizeSpan: (span: number) => number;
 };
+
+export type AnimatedInputSearchProps = {
+  animatedValue: Animated.Value;
+  headerRightWidth: number;
+  heightHeader: number;
+  headerType: HeaderType;
+  inputSearchProps?: InputSearchProps;
+  inputRef?: LegacyRef<InputSearchRef>;
+};
+
+export type ExtendHeaderProps = {
+  headerBackground: string;
+  animatedValue: Animated.Value;
+  heightHeader: number;
+};

package/Title/index.tsx

@@ -1,13 +1,16 @@
 import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
-import {Icon} from '../Icon';
-import {scaleSize, Text} from '../Text';
-import {ApplicationContext} from '../Application';
-import {Badge} from '../Badge';
-import {Colors} from '../Consts';
+import {
+  Typography,
+  Colors,
+  Icon,
+  Badge,
+  ApplicationContext,
+  scaleSize,
+  Text,
+} from '@momo-kits/foundation';
 import styles from './styles';
 import {TitleProps} from './types';
-import {Typography} from '../Text/types';
 
 const Title: FC<TitleProps> = ({
   title = 'Title',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.20",
+    "version": "0.92.21-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},