@momo-kits/foundation 0.92.34 → 0.102.1

package/Input/TextTyping.tsx

@@ -0,0 +1,113 @@
+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/Input/index.tsx

@@ -187,6 +187,17 @@ export interface InputSearchProps extends TextInputProps {
    * Optional. Represents the style of the InputSearch component.
    */
   params?: any;
+
+  /**
+   * Optional. Represents the data for typing animation.
+   */
+  typingData?: string[];
+
+  /**
+   * Optional. Represents the callback function to be called when the search button is pressed.
+   * @param e
+   */
+  onPress?: (e: GestureResponderEvent) => void;
 }
 
 export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
@@ -265,4 +276,11 @@ export interface InputDropDownProps
   multiline?: boolean;
 }
 
+export type InputRef = {
+  clear: () => void;
+  focus: () => void | undefined;
+  blur: () => void | undefined;
+  setText: (text: string) => void;
+};
+
 export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Input/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '../Consts';
+import {Platform, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
 import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
@@ -133,20 +133,27 @@ export default StyleSheet.create({
     paddingVertical: Spacing.S,
     fontWeight: 'bold',
   },
-
+  inputStyle: {
+    color: Colors.black_12,
+    fontSize: scaleSize(12),
+    height: Platform.select({
+      android: 60,
+      ios: 36,
+    }),
+  },
   //OTP
   otpWrapper: {
     width: '100%',
     marginTop: Spacing.M,
   },
   otpInput: {
-    height: scaleSize(56),
+    height: 56,
     borderRadius: Radius.S,
     borderWidth: 1,
   },
   otpFloatingView: {
     position: 'absolute',
-    top: scaleSize(-Spacing.M + 2),
+    top: -Spacing.M + 2,
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },

package/Layout/Screen.tsx

@@ -3,6 +3,7 @@ import React, {
   forwardRef,
   Fragment,
   ReactNode,
+  Ref,
   useContext,
   useEffect,
   useRef,
@@ -27,10 +28,11 @@ 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 {InputRef, InputSearchProps} from '../Input';
+import {HeaderExtendHeader} from '../Application/Components';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -101,6 +103,13 @@ 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;
+
+  inputSearchRef?: Ref<InputRef>;
 }
 
 const Screen = forwardRef(
@@ -120,32 +129,133 @@ const Screen = forwardRef(
       floatingButtonProps,
       useGridLayout = true,
       keyboardVerticalOffset,
+      inputSearchProps,
+      inputSearchRef,
     }: ScreenProps,
     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';
 
-    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 || inputSearchProps) {
       keyboardOffset = -20;
     }
 
-    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} />,
+          };
+          if (inputSearchProps) {
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerTintColor: theme.colors.text.default,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                    extrapolate: 'clamp',
+                  }}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+            };
+          }
+          break;
+
+        case 'extended':
+          options = {
+            headerShown: true,
+            headerTransparent: true,
+            headerTintColor: Colors.black_01,
+            headerBackground: () => null,
+            headerTitle: (props: any) => <HeaderTitle {...props} />,
+          };
+          if (inputSearchProps) {
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                    extrapolate: 'clamp',
+                  }}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+            };
+          }
+          break;
+
+        default:
+          options = {
+            headerTransparent: false,
+            headerShown: true,
+            headerTintColor: Colors.black_01,
+            headerBackground: (props: any) => <HeaderBackground {...props} />,
+          };
+          if (inputSearchProps) {
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                    extrapolate: 'clamp',
+                  }}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+            };
+          }
+      }
+
+      /**
+       * override options for animated header
+       */
       if (animatedHeader) {
-        styleAnimatedHeader = {
+        options = {
           headerTransparent: true,
           headerBackground: (props: any) => (
             <HeaderBackground
@@ -158,8 +268,8 @@ const Screen = forwardRef(
           ),
         };
         if (animatedHeader.type === 'surface') {
-          styleAnimatedHeader = {
-            ...styleAnimatedHeader,
+          options = {
+            ...options,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
@@ -171,8 +281,8 @@ const Screen = forwardRef(
           };
         }
         if (animatedHeader.headerTitle) {
-          styleAnimatedHeader = {
-            ...styleAnimatedHeader,
+          options = {
+            ...options,
             headerTitle: (props: any) =>
               animatedHeader.headerTitle?.({
                 ...props,
@@ -180,55 +290,10 @@ const Screen = forwardRef(
               }),
           };
         }
-        navigation?.setOptions(styleAnimatedHeader);
       }
-    }, [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]);
+      navigation?.setOptions(options);
+    }, [headerType, animatedHeader, inputSearchProps]);
 
     /**
      * animated when use scroll && animated value
@@ -236,7 +301,7 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader || floatingButtonProps?.icon) {
+      if (animatedHeader || floatingButtonProps?.icon || inputSearchProps) {
         handleScroll = Animated.event(
           [
             {
@@ -268,19 +333,40 @@ 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 renderHeader = () => {
+    const renderAnimatedHeader = () => {
       if (typeof animatedHeader?.component === 'function') {
-        return animatedHeader?.component({
-          animatedValue: animatedValue.current,
-        });
+        return (
+          <View style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
+            {animatedHeader?.component({
+              animatedValue: animatedValue.current,
+            })}
+          </View>
+        );
       }
     };
 
     /**
-     * build content for screen
+     * build content for screen for grid rule
      */
     const renderContent = (children: any): any => {
       const results = validateChildren(children, [Section, Card, undefined]);
@@ -326,17 +412,15 @@ const Screen = forwardRef(
 
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
-        {!!headerBackground && (
-          <>
-            <Image
-              source={{
-                uri: headerBackground,
-              }}
-              style={styles.extendedHeader}
-            />
-            <View style={{height: heightHeader}} />
-          </>
-        )}
+        <HeaderExtendHeader
+          headerType={headerType}
+          heightHeader={heightHeader}
+          animatedValue={animatedValue.current}
+          inputSearchProps={inputSearchProps}
+          navigation={navigation}
+          inputSearchRef={inputSearchRef}
+        />
+
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
@@ -349,14 +433,14 @@ 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}]}>
-              {renderHeader()}
-            </View>
+            {renderAnimatedHeader()}
+
             {useGridLayout ? renderContent(children) : children}
           </Component>
 

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,4 @@
-export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
+export type HeaderType = 'default' | 'surface' | 'extended' | 'search' | 'none';
 
 export type GridContextProps = {
   /**

package/Pagination/PaginationScroll.tsx

@@ -42,7 +42,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
               },
             },
           ],
-          {useNativeDriver: true},
+          {useNativeDriver: true}
         )}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
@@ -80,7 +80,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   return (
     <View style={[style, styles.scrollContainer]}>
       {renderScrollView()}
-      {renderIndicator()}
+      {scrollContentWidth > scrollViewWidth && renderIndicator()}
     </View>
   );
 };

package/Pagination/styles.ts

@@ -29,7 +29,6 @@ export default StyleSheet.create({
     justifyContent: 'center',
   },
   scrollContainer: {
-    alignItems: 'center',
     width: '100%',
   },
   scrollView: {
@@ -42,6 +41,7 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
   },
   indicatorContainer: {
+    alignSelf: 'center',
     width: 72,
     height: 4,
     borderRadius: Radius.XS,

package/Popup/PopupNotify.tsx

@@ -195,7 +195,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'header_default_bold'} numberOfLines={1}>
+        <Text typography={'header_default_bold'} numberOfLines={3}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>

package/package.json

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

package/publish.sh

@@ -1,16 +1,16 @@
 #!/bin/bash
 
 if [ "$1" == "stable" ]; then
-  npm version $(npm view @momo-kits/foundation@stable version)
-  npm version patch
+  #npm version $(npm view @momo-kits/foundation@stable version)
+  #npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  npm version $(npm view @momo-kits/foundation@latest version)
-  npm version prerelease --preid=rc
+  #npm version $(npm view @momo-kits/foundation@latest version)
+  #npm version prerelease --preid=rc
   npm publish --tag latest --access=public
 else
-  npm version $(npm view @momo-kits/foundation@beta version)
-  npm version prerelease --preid=beta
+  #npm version $(npm view @momo-kits/foundation@beta version)
+  #npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi