@momo-kits/foundation 0.92.21-beta.2 → 0.92.21-beta.3

package/Input/InputSearch.tsx

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

package/Input/index.tsx

@@ -1,4 +1,4 @@
-import {GestureResponderEvent, TextInputProps, ViewStyle} from 'react-native';
+import {TextInputProps, ViewStyle} from 'react-native';
 import Input from './Input';
 import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
@@ -143,9 +143,6 @@ 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'> {}
@@ -285,11 +282,4 @@ 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/Screen.tsx

@@ -2,17 +2,14 @@ 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,
@@ -27,20 +24,13 @@ import {
   HeaderTitle,
 } from '../Application';
 import Navigation from '../Application/Navigation';
-import {
-  AnimatedHeader,
-  HeaderRightActions,
-  HeaderRightToolkit,
-  NavigationOptions,
-} from '../Application/types';
+import {AnimatedHeader, 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 {
   /**
@@ -111,15 +101,8 @@ 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(
   (
     {
@@ -137,31 +120,26 @@ 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 [headerRightWidth, setHeaderRightWidth] = useState(0);
+    const isTab = navigation?.instance?.getState?.()?.type == 'tab';
 
     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;
     }
 
@@ -179,7 +157,7 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type === 'surface') {
+        if (animatedHeader.type == 'surface') {
           styleAnimatedHeader = {
             ...styleAnimatedHeader,
             headerBackground: (props: any) => (
@@ -202,7 +180,6 @@ const Screen = forwardRef(
               }),
           };
         }
-
         navigation?.setOptions(styleAnimatedHeader);
       }
     }, [animatedHeader]);
@@ -210,22 +187,6 @@ 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 = {
@@ -253,9 +214,7 @@ const Screen = forwardRef(
               headerTransparent: true,
               headerTintColor: Colors.black_01,
               headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle {...props} titleOpacity={titleOpacity} />
-              ),
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             break;
 
@@ -271,33 +230,13 @@ 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 || inputSearchProps) {
+      if (animatedHeader || floatingButtonProps?.icon) {
         handleScroll = Animated.event(
           [
             {
@@ -310,13 +249,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,
@@ -324,26 +263,11 @@ 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
      */
@@ -363,7 +287,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) {
@@ -383,7 +307,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 (
@@ -403,21 +327,15 @@ const Screen = forwardRef(
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
-          <ExtendBackground
-            headerBackground={headerBackground}
-            heightHeader={heightHeader}
-            animatedValue={animatedValue.current}
-          />
-        )}
-        {inputSearchProps && (
-          <AnimatedInputSearch
-            animatedValue={animatedValue.current}
-            headerRightWidth={headerRightWidth}
-            headerType={headerType}
-            heightHeader={heightHeader}
-            inputSearchProps={inputSearchProps}
-            inputRef={inputSearchRef}
-          />
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <View style={{height: heightHeader}} />
+          </>
         )}
         <KeyboardAvoidingView
           style={Styles.flex}
@@ -431,11 +349,9 @@ const Screen = forwardRef(
 
           <Component
             {...scrollViewProps}
-            ref={scrollViewRef}
+            ref={ref}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
-            onScrollEndDrag={handleScrollEnd}
-            scrollEventThrottle={16}
             style={Styles.flex}>
             <View
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
@@ -471,7 +387,7 @@ const Screen = forwardRef(
         </KeyboardAvoidingView>
       </View>
     );
-  }
+  },
 );
 
 export default Screen;

package/Layout/styles.ts

@@ -2,6 +2,12 @@ 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%',
   },