@momo-kits/foundation 0.92.23 → 0.92.25

package/Layout/Screen.tsx

@@ -27,12 +27,10 @@ import Navigation from '../Application/Navigation';
 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} from '../Input';
-import {HeaderExtendBackground} from '../Application/Components';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -103,11 +101,6 @@ export interface ScreenProps extends ViewProps {
    * Optional. If `true`, the screen content is using grid layout by span.
    */
   useGridLayout?: boolean;
-
-  /**
-   * Optional. specs for input search.
-   */
-  inputSearchProps?: InputSearchProps;
 }
 
 const Screen = forwardRef(
@@ -127,79 +120,32 @@ const Screen = forwardRef(
       floatingButtonProps,
       useGridLayout = true,
       keyboardVerticalOffset,
-      inputSearchProps,
     }: ScreenProps,
-    ref
+    ref,
   ) => {
+    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
-    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
-    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';
 
+    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;
     }
 
     useEffect(() => {
-      let options: NavigationOptions;
-      /**
-       * handle for basic header type
-       */
-      switch (headerType) {
-        case 'none':
-          options = {
-            headerTransparent: true,
-            headerBackground: () => null,
-            headerShown: false,
-          };
-          break;
-
-        case 'surface':
-          options = {
-            headerTransparent: false,
-            headerShown: true,
-            headerTintColor: theme.colors.text.default,
-            headerBackground: (props: any) => (
-              <HeaderBackground {...props} image={null} useSurface={true} />
-            ),
-            headerTitle: (props: any) => <HeaderTitle {...props} />,
-          };
-          break;
-
-        case 'extended':
-          options = {
-            headerShown: true,
-            headerTransparent: true,
-            headerTintColor: Colors.black_01,
-            headerBackground: () => null,
-            headerTitle: (props: any) => <HeaderTitle {...props} />,
-          };
-          break;
-
-        default:
-          options = {
-            headerTransparent: false,
-            headerShown: true,
-            headerTintColor: Colors.black_01,
-            headerBackground: (props: any) => <HeaderBackground {...props} />,
-          };
-      }
-
-      /**
-       * override options for animated header
-       */
       if (animatedHeader) {
-        options = {
+        styleAnimatedHeader = {
           headerTransparent: true,
           headerBackground: (props: any) => (
             <HeaderBackground
@@ -211,9 +157,9 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type === 'surface') {
-          options = {
-            ...options,
+        if (animatedHeader.type == 'surface') {
+          styleAnimatedHeader = {
+            ...styleAnimatedHeader,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
@@ -225,8 +171,8 @@ const Screen = forwardRef(
           };
         }
         if (animatedHeader.headerTitle) {
-          options = {
-            ...options,
+          styleAnimatedHeader = {
+            ...styleAnimatedHeader,
             headerTitle: (props: any) =>
               animatedHeader.headerTitle?.({
                 ...props,
@@ -234,10 +180,55 @@ const Screen = forwardRef(
               }),
           };
         }
+        navigation?.setOptions(styleAnimatedHeader);
       }
+    }, [animatedHeader]);
 
-      navigation?.setOptions(options);
-    }, [headerType, animatedHeader]);
+    useEffect(() => {
+      if (!animatedHeader) {
+        let headerOptions: NavigationOptions;
+        switch (headerType) {
+          case 'none':
+            headerOptions = {
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerShown: false,
+            };
+            break;
+
+          case 'surface':
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: theme.colors.text.default,
+              headerBackground: (props: any) => (
+                <HeaderBackground {...props} image={null} useSurface={true} />
+              ),
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
+            };
+            break;
+
+          case 'extended':
+            headerOptions = {
+              headerShown: true,
+              headerTransparent: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: () => null,
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
+            };
+            break;
+
+          default:
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: (props: any) => <HeaderBackground {...props} />,
+            };
+        }
+        navigation?.setOptions(headerOptions);
+      }
+    }, [headerType]);
 
     /**
      * animated when use scroll && animated value
@@ -245,7 +236,7 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader || floatingButtonProps?.icon || inputSearchProps) {
+      if (animatedHeader || floatingButtonProps?.icon) {
         handleScroll = Animated.event(
           [
             {
@@ -258,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,
@@ -272,52 +263,31 @@ const Screen = forwardRef(
                 }
               }
             },
-          }
+          },
         );
       }
     }
 
-    /**
-     * handle scroll end
-     * @param e
-     */
-    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
      */
-    const renderAnimatedHeader = () => {
+    const renderHeader = () => {
       if (typeof animatedHeader?.component === 'function') {
-        return (
-          <View style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
-            {animatedHeader?.component({
-              animatedValue: animatedValue.current,
-            })}
-          </View>
-        );
+        return animatedHeader?.component({
+          animatedValue: animatedValue.current,
+        });
       }
     };
 
     /**
-     * build content for screen for grid rule
+     * build content for screen
      */
     const renderContent = (children: any): any => {
       const results = validateChildren(children, [Section, Card, undefined]);
       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) {
@@ -337,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 (
@@ -357,21 +327,16 @@ const Screen = forwardRef(
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
-          <HeaderExtendBackground
-            headerBackground={headerBackground}
-            heightHeader={heightHeader}
-            animatedValue={animatedValue.current}
-          />
-        )}
-
-        {inputSearchProps && (
-          <AnimatedInputSearch
-            animatedValue={animatedValue.current}
-            navigation={navigation}
-            {...inputSearchProps}
-          />
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <View style={{height: heightHeader}} />
+          </>
         )}
-
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
@@ -384,14 +349,14 @@ const Screen = forwardRef(
 
           <Component
             {...scrollViewProps}
-            ref={scrollViewRef}
+            ref={ref}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
-            onScrollEndDrag={handleScrollEnd}
-            scrollEventThrottle={16}
             style={Styles.flex}>
-            {renderAnimatedHeader()}
-
+            <View
+              style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
+              {renderHeader()}
+            </View>
             {useGridLayout ? renderContent(children) : children}
           </Component>
 
@@ -422,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%',
   },

package/Layout/types.ts

@@ -1,8 +1,4 @@
-import {Animated} from 'react-native';
-import {InputSearchProps, InputSearchRef} from '../Input';
-import {LegacyRef} from 'react';
-
-export type HeaderType = 'default' | 'surface' | 'extended' | 'search' | 'none';
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
 
 export type GridContextProps = {
   /**
@@ -25,18 +21,3 @@ 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,16 +1,13 @@
 import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
-import {
-  Typography,
-  Colors,
-  Icon,
-  Badge,
-  ApplicationContext,
-  scaleSize,
-  Text,
-} from '@momo-kits/foundation';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {Badge} from '../Badge';
+import {Colors} from '../Consts';
 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.23",
+    "version": "0.92.25",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Input/TextTyping.tsx

@@ -1,113 +0,0 @@
-import React, {FC, memo, useEffect, useRef} from 'react';
-import {Platform, 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'}
-      numberOfLines={1}
-    />
-  );
-};
-
-export default memo(TextTyping);
-
-const styles = StyleSheet.create({
-  inputStyle: {
-    color: Colors.black_12,
-    fontSize: scaleSize(12),
-    height: Platform.select({
-      android: 60,
-      ios: 36,
-    }),
-  },
-});

package/Layout/AnimatedInputSearch.tsx

@@ -1,66 +0,0 @@
-import React, {FC, useEffect, useRef, useState} from 'react';
-import {InputSearch, InputSearchProps} from '../Input';
-import {Animated, Dimensions} from 'react-native';
-import {Spacing} from '../Consts';
-import {scaleSize} from '../Text';
-import Navigation from '../Application/Navigation';
-
-export interface AnimatedInputSearchProps extends InputSearchProps {
-  animatedValue: Animated.Value;
-  navigation?: Navigation;
-}
-
-const SCREEN_PADDING = 12;
-const BACK_WIDTH = scaleSize(28);
-
-const AnimatedInputSearch: FC<AnimatedInputSearchProps> = ({
-  animatedValue,
-  navigation,
-  ...props
-}) => {
-  const {width: screenWidth} = Dimensions.get('window');
-  const widthAnimated = useRef(new Animated.Value(0));
-  const [rightSpace, setRightSpace] = useState(
-    navigation?.rightHeaderWidth ?? 0
-  );
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (rightSpace != navigation?.rightHeaderWidth) {
-        setRightSpace(navigation?.rightHeaderWidth ?? 0);
-      }
-    }, 500);
-    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 - rightSpace,
-          ],
-          extrapolate: 'clamp',
-        }),
-      }}>
-      <InputSearch {...props} showButtonText={false} />
-    </Animated.View>
-  );
-};
-
-export default AnimatedInputSearch;