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

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.21-beta.0",
+    "version": "0.92.21-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/publish.sh

@@ -7,16 +7,16 @@ rsync -r --exclude=/dist ./* dist
 cd dist
 
 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