@momo-kits/foundation 0.80.8 → 0.81.1-beta.0

package/Layout/Screen.tsx

@@ -1,20 +1,52 @@
+import {useHeaderHeight} from '@react-navigation/stack';
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   Animated,
   KeyboardAvoidingView,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   Platform,
   ScrollViewProps,
   View,
   ViewProps,
 } from 'react-native';
-import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {ReactNode, useContext, useEffect, useRef} from 'react';
-import {Spacing, Styles} from '../Consts';
-import {Card, Section, validateChildren} from './index';
-import {ApplicationContext, HeaderTitle} from '../Application';
+import {
+  ApplicationContext,
+  HeaderBackground,
+  HeaderTitle,
+} from '../Application';
 import Navigation from '../Application/Navigation';
+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} from '../Input';
+import {HeaderRight} from '../Application/Components';
 
 export interface ScreenProps extends ViewProps {
+  /**
+   * ReactNode representing the content of the screen.
+   */
+  children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
    */
@@ -25,25 +57,20 @@ export interface ScreenProps extends ViewProps {
    */
   enableKeyboardAvoidingView?: boolean;
 
-  /**
-   * Optional. Background color of the header.
-   */
-  headerBackground?: string;
-
   /**
    * Optional. If `true`, the screen content is scrollable.
    */
   scrollable?: boolean;
 
   /**
-   * Optional. If `true`, use an animated header for the screen.
+   * Optional. Set type of header.
    */
-  useAnimatedHeader?: boolean;
+  headerType?: HeaderType;
 
   /**
-   * Optional. If `true`, use an extended header for the screen.
+   * Optional. Props for the animated component or bool used top navigation animated.
    */
-  useExtendedHeader?: boolean;
+  animatedHeader?: AnimatedHeader;
 
   /**
    * Optional. Props for the underlying ScrollView component when `scrollable` is `true`.
@@ -51,206 +78,402 @@ export interface ScreenProps extends ViewProps {
   scrollViewProps?: ScrollViewProps;
 
   /**
-   * Optional. ReactNode representing the footer component of the screen.
+   * Optional. ReactNode representing the header component of the screen.
    */
-  footerComponent?: ReactNode;
+  headerComponent?: ReactNode;
 
   /**
-   * Optional. Margin for the header component.
+   * Optional. ReactNode representing the footer component of the screen.
    */
-  marginHeader?: number;
+  footerComponent?: ReactNode;
 
   /**
    * Optional. Background color of the screen.
    */
   backgroundColor?: string;
-}
 
-const Screen: React.FC<ScreenProps> = ({
-  children,
-  enableKeyboardAvoidingView = false,
-  scrollable = false,
-  navigation,
-  marginHeader,
-  useAnimatedHeader,
-  useExtendedHeader,
-  headerBackground,
-  scrollViewProps,
-  footerComponent: Footer,
-  backgroundColor,
-}) => {
-  const animatedValue = useRef<Animated.Value | undefined>(undefined);
-  const {theme} = useContext(ApplicationContext);
-  const insets = useSafeAreaInsets();
-  const headerTransparent = useAnimatedHeader || useExtendedHeader;
-
-  let handleScroll;
-  let imageAnimatedStyle = {};
-  let opacity;
-  let Component: any = View;
-  animatedValue.current = undefined;
+  /**
+   * Optional. layout card offset overlap header banner.
+   */
+  layoutOffset?: -8 | -24 | -56;
+
+  /**
+   * Optional. Props for the floating action button.
+   */
+  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
 
   /**
-   * automatic margin content if use header transparent
+   * Optional. Keyboard vertical offset.
    */
-  if (headerTransparent) {
-    animatedValue.current = new Animated.Value(0);
-    marginHeader = marginHeader ?? useHeaderHeight();
-    if (useExtendedHeader) {
+  keyboardVerticalOffset?: number;
+
+  /**
+   * Optional. If `true`, the screen content is using grid layout by span.
+   */
+  useGridLayout?: boolean;
+
+  useSearchInput?: boolean;
+
+  inputSearchProps?: InputSearchProps;
+
+  headerRight?: HeaderRightActions | HeaderRightToolkit | CustomHeaderRight;
+}
+
+type CustomHeaderRight = (props: any) => Element;
+
+const Screen = forwardRef(
+  (
+    {
+      children,
+      enableKeyboardAvoidingView = false,
+      scrollable = false,
+      navigation,
+      animatedHeader,
+      scrollViewProps,
+      headerComponent: Header,
+      footerComponent: Footer,
+      layoutOffset = -56,
+      backgroundColor,
+      headerType = 'default',
+      floatingButtonProps,
+      useGridLayout = true,
+      keyboardVerticalOffset,
+      useSearchInput = true,
+      inputSearchProps,
+      headerRight,
+    }: ScreenProps,
+    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';
+    let [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) {
+      keyboardOffset = -20;
+    }
+
+    if (headerType === 'extended') {
       headerBackground = theme.assets?.headerBackground;
     }
-  }
 
-  useEffect(() => {
-    if (useAnimatedHeader != undefined || useExtendedHeader != undefined) {
-      let title = {};
-      if (useExtendedHeader) {
-        title = {headerTitle: HeaderTitle};
+    useEffect(() => {
+      if (animatedHeader) {
+        styleAnimatedHeader = {
+          headerTransparent: true,
+          headerBackground: (props: any) => (
+            <HeaderBackground
+              {...props}
+              animatedValue={animatedValue.current}
+            />
+          ),
+          headerTitle: (props: any) => (
+            <HeaderTitle {...props} animatedValue={animatedValue.current} />
+          ),
+        };
+        if (animatedHeader.type === 'surface') {
+          styleAnimatedHeader = {
+            ...styleAnimatedHeader,
+            headerBackground: (props: any) => (
+              <HeaderBackground
+                {...props}
+                image={null}
+                useSurface={true}
+                animatedValue={animatedValue.current}
+              />
+            ),
+          };
+        }
+        if (animatedHeader.headerTitle) {
+          styleAnimatedHeader = {
+            ...styleAnimatedHeader,
+            headerTitle: (props: any) =>
+              animatedHeader.headerTitle?.({
+                ...props,
+                animatedValue: animatedValue.current,
+              }),
+          };
+        }
+
+        navigation?.setOptions(styleAnimatedHeader);
       }
-      navigation?.setOptions({
-        animatedValue: animatedValue.current,
-        headerTransparent: headerTransparent,
-        ...title,
-      });
-    }
-  }, [useExtendedHeader, useAnimatedHeader]);
+    }, [animatedHeader]);
 
-  /**
-   * animated for header stack when used bottom tab
-   */
-  useEffect(() => {
-    const current: any = navigation;
-    if (headerTransparent) {
-      return current?.addListener?.('focus', () => {
-        const stackNavigation = new Navigation(current?.getParent(), theme);
-        stackNavigation?.setOptions({
-          animatedValue: animatedValue.current,
+    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}
+                  useSearchInput={useSearchInput}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+            };
+            break;
+
+          default:
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: (props: any) => <HeaderBackground {...props} />,
+            };
+        }
+        navigation?.setOptions(headerOptions);
+      }
+    }, [headerType]);
+
+    useEffect(() => {
+      if (headerRight) {
+        navigation?.setOptions({
+          headerRight: (props: any) => (
+            <View
+              style={{backgroundColor: 'red'}}
+              onLayout={onHeaderRightLayout}>
+              {typeof headerRight === 'function' ? (
+                headerRight(props)
+              ) : (
+                <HeaderRight {...props} {...headerRight} />
+              )}
+            </View>
+          ),
         });
-      });
-    }
-  }, [useAnimatedHeader, useExtendedHeader, navigation]);
+      }
+    }, [headerRight]);
 
-  /**
-   * animated when use scroll && animated value
-   */
-  if (scrollable) {
-    Component = Animated.ScrollView;
-    if (useAnimatedHeader) {
-      opacity = animatedValue.current?.interpolate({
-        inputRange: [0, 100],
-        outputRange: [1, 0],
-        extrapolate: 'clamp',
-      });
-      imageAnimatedStyle = {
-        transform: [
-          {
-            scale: animatedValue.current?.interpolate?.({
-              inputRange: [-300, 0, 1],
-              outputRange: [1.75, 1, 1],
-              extrapolate: 'clamp',
-            }),
-          },
-        ],
-      };
-      handleScroll = Animated.event(
-        [
+    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 || useSearchInput) {
+        handleScroll = Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {y: animatedValue.current as Animated.Value},
+              },
+            },
+          ],
           {
-            nativeEvent: {
-              contentOffset: {y: animatedValue.current as Animated.Value},
+            useNativeDriver: false,
+            listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+              scrollViewProps?.onScroll?.(e);
+              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) {
+                  currentTint.current = color;
+                  navigation?.setOptions({
+                    headerTintColor: color,
+                  });
+                }
+              }
             },
-          },
-        ],
-        {useNativeDriver: true},
-      );
+          }
+        );
+      }
     }
-  }
 
-  /**
-   * build content for screen
-   */
-  const renderContent = () => {
-    const results = validateChildren(children, [Section, Card]);
-    if (Array.isArray(results)) {
-      return results.map((item, index) => {
-        const space = item.props?.useMargin === false ? 0 : Spacing.M;
+    const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetY = e.nativeEvent.contentOffset.y;
+
+      if (useSearchInput && offsetY < 100 && offsetY > 0) {
+        Animated.timing(animatedValue.current, {
+          toValue: 0,
+          useNativeDriver: false,
+          duration: 300,
+        }).start();
+        scrollViewRef.current?.scrollTo({y: 0, animated: true});
+      }
+
+      scrollViewProps?.onScrollEndDrag?.(e);
+    };
+
+    /**
+     * render top navigation banner
+     */
+    const renderHeader = () => {
+      if (typeof animatedHeader?.component === 'function') {
+        return animatedHeader?.component({
+          animatedValue: animatedValue.current,
+        });
+      }
+    };
+
+    /**
+     * 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) {
+            return renderContent(item?.props?.children);
+          }
+          if (item) {
+            return (
+              <View
+                key={`ScreenItem${index}`}
+                style={{
+                  marginTop: space,
+                  flex: item.props?.expanded ? 1 : undefined,
+                }}
+                onLayout={item.props?.onLayout}>
+                {item}
+              </View>
+            );
+          }
+        });
+      } else {
+        const item: any = children;
+        const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+        if (item?.type === Fragment) {
+          return renderContent(item?.props?.children);
+        }
         return (
           <View
-            key={`ScreenItem${index}`}
+            key={`ScreenItem`}
             style={{
               marginTop: space,
-              flex: item.props?.expanded ? 1 : undefined,
-            }}>
-            {item}
+              flex: item?.props?.expanded ? 1 : undefined,
+            }}
+            onLayout={item?.props?.onLayout}>
+            {children}
           </View>
         );
-      });
-    } else {
-      const item: any = children;
-      const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-      return (
-        <View
-          key={`ScreenItem`}
-          style={{
-            marginTop: space,
-            flex: item?.props?.expanded ? 1 : undefined,
-          }}>
-          {children}
-        </View>
-      );
-    }
-  };
-
-  return (
-    <View
-      style={[Styles.flex, {backgroundColor}]}
-      accessibilityLabel={`ScreenContainer`}>
-      <View
-        style={{
-          position: 'absolute',
-          maxHeight: 215,
-          width: '100%',
-          overflow: 'hidden',
-        }}>
+      }
+    };
+
+    return (
+      <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
-          <Animated.Image
-            source={{
-              uri: headerBackground,
-            }}
-            style={{
-              opacity: opacity ?? 1,
-              aspectRatio: 1.75,
-              ...imageAnimatedStyle,
-            }}
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <Animated.View
+              style={{
+                height: animatedValue.current.interpolate({
+                  inputRange: [0, 100],
+                  outputRange: [heightHeader, heightHeader - 52],
+                  extrapolate: 'clamp',
+                }),
+              }}
+            />
+          </>
+        )}
+        {useSearchInput && (
+          <AnimatedInputSearch
+            animatedValue={animatedValue.current}
+            headerRightWidth={headerRightWidth}
+            headerType={headerType}
+            heightHeader={heightHeader}
+            inputSearchProps={inputSearchProps}
           />
         )}
+        <KeyboardAvoidingView
+          style={Styles.flex}
+          enabled={enableKeyboardAvoidingView}
+          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}>
+          {Header}
+
+          <Component
+            {...scrollViewProps}
+            ref={scrollViewRef}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            onScrollEndDrag={handleScrollEnd}
+            scrollEventThrottle={16}
+            style={Styles.flex}>
+            <View
+              style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
+              {renderHeader()}
+            </View>
+            {useGridLayout ? renderContent(children) : children}
+          </Component>
+
+          {floatingButtonProps && (
+            <View>
+              <FloatingButton
+                {...floatingButtonProps}
+                animatedValue={animatedValue.current}
+                bottom={
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                }
+              />
+            </View>
+          )}
+
+          {Footer && (
+            <View
+              style={[
+                styles.shadow,
+                {
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}>
+              <Section>{Footer}</Section>
+            </View>
+          )}
+        </KeyboardAvoidingView>
       </View>
-      <KeyboardAvoidingView
-        style={Styles.flex}
-        enabled={enableKeyboardAvoidingView}
-        behavior={Platform.select({
-          ios: 'padding',
-          android: undefined,
-        })}>
-        <Component
-          {...scrollViewProps}
-          showsVerticalScrollIndicator={false}
-          onScroll={handleScroll}
-          style={[Styles.flex, {marginTop: marginHeader}]}>
-          {renderContent()}
-        </Component>
-        {Footer && (
-          <View
-            style={{
-              paddingTop: Spacing.S,
-              paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-              backgroundColor: theme.colors.background.surface,
-            }}>
-            <Section>{Footer}</Section>
-          </View>
-        )}
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
+    );
+  }
+);
 
 export default Screen;