@momo-kits/foundation 0.80.9 → 0.81.2

package/Layout/Screen.tsx

@@ -1,6 +1,9 @@
 import {
   Animated,
+  Image,
   KeyboardAvoidingView,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   Platform,
   ScrollViewProps,
   View,
@@ -8,13 +11,26 @@ import {
 } 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 React, {
+  forwardRef,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {Colors, 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 styles from './styles';
+import {AnimatedHeader, NavigationOptions} from '../Application/types';
 
 export interface ScreenProps extends ViewProps {
+  children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
    */
@@ -25,25 +41,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. If `true`, use an extended header for the screen.
    */
-  useAnimatedHeader?: boolean;
+  useExtendedHeader?: boolean;
 
   /**
-   * 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 +62,242 @@ 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;
 
   /**
-   * automatic margin content if use header transparent
+   * Optional. layout card offset overlap header banner.
    */
-  if (headerTransparent) {
-    animatedValue.current = new Animated.Value(0);
-    marginHeader = marginHeader ?? useHeaderHeight();
+  layoutOffset?: -8 | -24 | -56;
+}
+
+const Screen = forwardRef(
+  (
+    {
+      children,
+      enableKeyboardAvoidingView = false,
+      scrollable = false,
+      navigation,
+      useExtendedHeader,
+      animatedHeader,
+      scrollViewProps,
+      headerComponent: Header,
+      footerComponent: Footer,
+      layoutOffset = -56,
+      backgroundColor,
+    }: ScreenProps,
+    ref,
+  ) => {
+    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const {theme} = useContext(ApplicationContext);
+    const insets = useSafeAreaInsets();
+    const heightHeader = useHeaderHeight();
+    const currentTint = useRef(Colors.black_01);
+    let styleAnimatedHeader: NavigationOptions;
+    let handleScroll;
+    let headerBackground: string | undefined = undefined;
+    let Component: any = View;
+    animatedValue.current = undefined;
+
     if (useExtendedHeader) {
       headerBackground = theme.assets?.headerBackground;
     }
-  }
 
-  useEffect(() => {
-    if (useAnimatedHeader != undefined || useExtendedHeader != undefined) {
-      let title = {};
+    useEffect(() => {
       if (useExtendedHeader) {
-        title = {headerTitle: HeaderTitle};
+        navigation?.setOptions({
+          headerTransparent: true,
+          headerBackground: () => null,
+        });
       }
-      navigation?.setOptions({
-        animatedValue: animatedValue.current,
-        headerTransparent: headerTransparent,
-        ...title,
-      });
-    }
-  }, [useExtendedHeader, useAnimatedHeader]);
+    }, [useExtendedHeader]);
 
-  /**
-   * 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,
-        });
-      });
-    }
-  }, [useAnimatedHeader, useExtendedHeader, navigation]);
+    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 = {
+            headerTransparent: true,
+            headerBackground: (props: any) => (
+              <HeaderBackground
+                {...props}
+                image={null}
+                backgroundColor={theme.colors.background.surface}
+                useBorder={true}
+                animatedValue={animatedValue.current}
+              />
+            ),
+          };
+        }
+        navigation?.setOptions(styleAnimatedHeader);
+        const current: any = navigation;
+        const parent = current?.getParent?.();
+        if (parent) {
+          return current?.addListener?.('focus', () => {
+            const stackNavigation = new Navigation(parent, theme);
+            stackNavigation?.setOptions(styleAnimatedHeader);
+          });
+        }
+      }
+    }, [animatedHeader]);
 
-  /**
-   * 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(
-        [
+    /**
+     * animated when use scroll && animated value
+     */
+    if (scrollable) {
+      Component = Animated.ScrollView;
+      handleScroll = scrollViewProps?.onScroll;
+      if (animatedHeader) {
+        animatedValue.current = new Animated.Value(0);
+        handleScroll = Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {y: animatedValue.current as Animated.Value},
+              },
+            },
+          ],
           {
-            nativeEvent: {
-              contentOffset: {y: animatedValue.current as Animated.Value},
+            useNativeDriver: true,
+            listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+              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,
+                  });
+                }
+              }
+              scrollViewProps?.onScroll?.(e);
             },
           },
-        ],
-        {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;
+    /**
+     * render top navigation banner
+     */
+    const renderHeader = () => {
+      if (typeof animatedHeader?.component === 'function') {
+        return animatedHeader?.component({
+          animatedValue: animatedValue.current,
+        });
+      }
+    };
+
+    /**
+     * 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;
+          return (
+            <View
+              key={`ScreenItem${index}`}
+              style={{
+                marginTop: space,
+                flex: item.props?.expanded ? 1 : undefined,
+              }}>
+              {item}
+            </View>
+          );
+        });
+      } else {
+        const item: any = children;
+        const space = item?.props?.useMargin === false ? 0 : Spacing.M;
         return (
           <View
-            key={`ScreenItem${index}`}
+            key={`ScreenItem`}
             style={{
               marginTop: space,
-              flex: item.props?.expanded ? 1 : undefined,
+              flex: item?.props?.expanded ? 1 : undefined,
             }}>
-            {item}
+            {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`}>
+    return (
       <View
-        style={{
-          position: 'absolute',
-          maxHeight: 215,
-          width: '100%',
-          overflow: 'hidden',
-        }}>
+        style={[Styles.flex, {backgroundColor}]}
+        accessibilityLabel={`ScreenContainer`}>
         {!!headerBackground && (
-          <Animated.Image
-            source={{
-              uri: headerBackground,
-            }}
-            style={{
-              opacity: opacity ?? 1,
-              aspectRatio: 1.75,
-              ...imageAnimatedStyle,
-            }}
-          />
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <View style={{height: heightHeader}} />
+          </>
         )}
+        <KeyboardAvoidingView
+          style={Styles.flex}
+          enabled={enableKeyboardAvoidingView}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}>
+          {Header}
+          <Component
+            {...scrollViewProps}
+            ref={ref}
+            heightHeader={heightHeader}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            style={Styles.flex}>
+            <View
+              style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
+              {renderHeader()}
+            </View>
+            {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>
-      <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;

package/Layout/Section.tsx

@@ -7,6 +7,7 @@ import Item from './Item';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Image} from '../Image';
+import ItemList from './ItemList';
 
 export interface SectionProps extends ViewProps {
   /**
@@ -168,7 +169,7 @@ const Section: React.FC<SectionProps> = ({
             style={styles.imageBackground}
           />
         )}
-        {renderView(validateChildren(children, [Item]))}
+        {renderView(validateChildren(children, [Item, ItemList]))}
         {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>

package/Layout/index.ts

@@ -5,6 +5,7 @@ import {validateChildren} from './utils';
 import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
+import ItemList from './ItemList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -14,4 +15,12 @@ const GridContext = createContext<GridContextProps>({
   getSizeSpan: () => 0,
 });
 
-export {GridContext, Card, Section, GridSystem, validateChildren, Item};
+export {
+  GridContext,
+  Card,
+  Section,
+  GridSystem,
+  validateChildren,
+  Item,
+  ItemList,
+};

package/Layout/styles.ts

@@ -1,6 +1,16 @@
 import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
+  screenBanner: {
+    width: '100%',
+  },
   boxGrid: {
     position: 'absolute',
     top: 0,
@@ -34,6 +44,7 @@ export default StyleSheet.create({
   card: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    borderRadius: Radius.M,
     paddingTop: undefined,
     paddingBottom: undefined,
     paddingLeft: undefined,
@@ -64,5 +75,6 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
+    borderRadius: Spacing.M,
   },
 });

package/Layout/types.ts

@@ -1,3 +1,5 @@
+import {FlatListProps} from 'react-native';
+
 export type GridContextProps = {
   /**
    * Represents the number of columns in the grid.

package/Layout/utils.ts

@@ -1,4 +1,4 @@
-import {Alert, Dimensions} from 'react-native';
+import {Dimensions} from 'react-native';
 import React, {Fragment, ReactElement, useEffect, useState} from 'react';
 
 /**
@@ -10,23 +10,18 @@ const validateChildren = (
   children: React.ReactNode | React.ReactNode[],
   childrenTypes: Array<React.FC>,
 ) => {
-  if (!__DEV__) return children;
-
   const validateType = (child: React.ReactElement) => {
     const valid = childrenTypes.some(
       childrenType => child?.type === childrenType || child?.type == Fragment,
     );
     if (!valid) {
-      Alert.alert(
-        'Component Kits',
+      console.warn(
         `Wrong children type for this component, expected are ${childrenTypes
           .map(type => type.displayName)
           .join(', ')}.`,
       );
     }
-    return valid;
   };
-
   if (Array.isArray(children)) {
     const flattenChildren: React.ReactElement[] = children.flat();
     for (const child of flattenChildren) {

package/Pagination/PaginationDot.tsx

@@ -9,6 +9,7 @@ import {ApplicationContext} from '../Application';
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
@@ -27,7 +28,11 @@ const PaginationDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={styles.paginationPinkContainer}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationPinkContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -8,12 +8,15 @@ import {Colors} from '../Consts';
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
+  style,
 }) => {
   return (
-    <View style={[styles.paginationNumberContainer]}>
-      <Text color={Colors.black_01} typography={'label_default'}>{`${
-        activeIndex + 1
-      }/${dataLength}`}</Text>
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationNumberContainer}>
+        <Text color={Colors.black_01} typography={'label_default'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
+      </View>
     </View>
   );
 };

package/Pagination/PaginationWhiteDot.tsx

@@ -8,6 +8,7 @@ import {Colors, Spacing} from '../Consts';
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const renderDots = () => {
     const dots: React.ReactElement[] = [];
@@ -24,7 +25,11 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={[styles.paginationWhiteContainer]}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationWhiteDot;

package/Pagination/styles.ts

@@ -25,6 +25,8 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.L,
     backgroundColor: Colors.black_20 + '33',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   scrollContainer: {
     alignItems: 'center',
@@ -44,4 +46,5 @@ export default StyleSheet.create({
     height: 4,
     borderRadius: Radius.XS,
   },
+  row: {flexDirection: 'row'},
 });

package/Pagination/types.ts

@@ -20,6 +20,8 @@ export type PaginationProps = {
    * Represents the total number of items (pages) in the Pagination component.
    */
   dataLength: number;
+
+  style?: ViewStyle | ViewStyle[];
 };
 
 export type DotProps = {