@momo-kits/foundation 0.81.1-beta.5 → 0.81.1-optimize.10

package/Layout/ItemList.tsx

@@ -1,56 +1,55 @@
-import React, {FC, useContext} from 'react';
+import React, {forwardRef, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
 import styles from './styles';
 
 export interface ItemListProps extends FlatListProps<any> {
-  /**
-   * Require key support number columns change grid system
-   */
-
-  key: string;
   /**
    * Represents the width of the Card component in terms of span numbers (1-12).
    */
   widthSpan?: SpanNumber;
 }
 
-const ItemList: FC<ItemListProps> = ({
-  key,
-  renderItem,
-  widthSpan,
-  style,
-  contentContainerStyle,
-  ...props
-}) => {
-  const {gutterSize, numberOfColumns} = useContext(GridContext);
-  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
-  const numColumns = Math.floor(numberOfColumns / widthItem);
-  const indexBegin = props?.data?.map((_i, index) => index * numColumns);
-  const _renderItem = (item: any) => {
-    if (indexBegin?.includes(item?.index)) {
-      return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
-    }
+const ItemList = forwardRef(
+  (
+    {
+      renderItem,
+      widthSpan,
+      style,
+      contentContainerStyle,
+      ...props
+    }: ItemListProps,
+    ref,
+  ) => {
+    const {gutterSize, numberOfColumns} = useContext(GridContext);
+    const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+    const numColumns = Math.floor(numberOfColumns / widthItem);
+    const indexBegin = props?.data?.map((_i, index) => index * numColumns);
+    const _renderItem = (item: any) => {
+      if (indexBegin?.includes(item?.index)) {
+        return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+      }
+      return (
+        <View style={{paddingLeft: gutterSize}}>
+          <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
+        </View>
+      );
+    };
+
     return (
-      <View style={{paddingLeft: gutterSize}}>
-        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
-      </View>
+      <FlatList
+        ref={ref as React.RefObject<FlatList>}
+        {...props}
+        numColumns={numColumns}
+        renderItem={_renderItem}
+        horizontal={false}
+        ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+        style={[style, styles.protectedStyle]}
+        contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+      />
     );
-  };
-
-  return (
-    <FlatList
-      {...props}
-      key={`${key ?? 'ItemList'}${numColumns}}`}
-      numColumns={numColumns}
-      renderItem={_renderItem}
-      horizontal={false}
-      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
-      style={[style, styles.protectedStyle]}
-      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
-    />
-  );
-};
+  },
+);
 
 export default ItemList;

package/Layout/ItemSectionList.tsx

@@ -0,0 +1,39 @@
+import React, {FC, useContext} from 'react';
+import {SectionList, SectionListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemSectionListProps extends SectionListProps<any> {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemSectionList: FC<ItemSectionListProps> = ({
+  renderItem,
+  widthSpan,
+  style,
+  contentContainerStyle,
+  ...props
+}) => {
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const _renderItem = (item: any) => {
+    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+  };
+
+  return (
+    <SectionList
+      {...props}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+    />
+  );
+};
+
+export default ItemSectionList;

package/Layout/Screen.tsx

@@ -1,3 +1,12 @@
+import {useHeaderHeight} from '@react-navigation/stack';
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import {
   Animated,
   KeyboardAvoidingView,
@@ -8,26 +17,20 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {
-  forwardRef,
-  ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react';
-import {Colors, Spacing, Styles} from '../Consts';
-import {Card, Section, validateChildren} from './index';
 import {
   ApplicationContext,
   HeaderBackground,
   HeaderTitle,
 } from '../Application';
 import Navigation from '../Application/Navigation';
-import styles from './styles';
 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';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -47,9 +50,9 @@ export interface ScreenProps extends ViewProps {
   scrollable?: boolean;
 
   /**
-   * Optional. If `true`, use an extended header for the screen.
+   * Optional. Set type of header.
    */
-  useExtendedHeader?: boolean;
+  headerType?: HeaderType;
 
   /**
    * Optional. Props for the animated component or bool used top navigation animated.
@@ -80,6 +83,20 @@ export interface ScreenProps extends ViewProps {
    * Optional. layout card offset overlap header banner.
    */
   layoutOffset?: -8 | -24 | -56;
+
+  /**
+   * Optional. Props for the floating action button.
+   */
+  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
+
+  /**
+   * optional animated value
+   */
+  animatedValue?: Animated.Value;
+  /**
+   * Optional. If `true`, the screen content is using grid layout by span.
+   */
+  useGridLayout?: boolean;
 }
 
 const Screen = forwardRef(
@@ -89,39 +106,41 @@ const Screen = forwardRef(
       enableKeyboardAvoidingView = false,
       scrollable = false,
       navigation,
-      useExtendedHeader,
       animatedHeader,
       scrollViewProps,
       headerComponent: Header,
       footerComponent: Footer,
       layoutOffset = -56,
       backgroundColor,
+      headerType = 'default',
+      floatingButtonProps,
+      useGridLayout = true,
+      animatedValue: animated,
     }: ScreenProps,
     ref,
   ) => {
-    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const animatedValue = useRef<Animated.Value>(
+      animated ?? new Animated.Value(0),
+    );
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     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;
-    animatedValue.current = undefined;
+    let keyboardVerticalOffset = heightHeader - 20;
 
-    if (useExtendedHeader) {
-      headerBackground = theme.assets?.headerBackground;
+    if (headerType == 'extended' || animatedHeader) {
+      keyboardVerticalOffset = -20;
     }
 
-    useEffect(() => {
-      if (useExtendedHeader) {
-        navigation?.setOptions({
-          headerTransparent: true,
-          headerBackground: () => null,
-        });
-      }
-    }, [useExtendedHeader]);
+    if (headerType == 'extended') {
+      headerBackground = theme.assets?.headerBackground;
+    }
 
     useEffect(() => {
       if (animatedHeader) {
@@ -139,38 +158,84 @@ const Screen = forwardRef(
         };
         if (animatedHeader.type == 'surface') {
           styleAnimatedHeader = {
-            headerTransparent: true,
+            ...styleAnimatedHeader,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
                 image={null}
-                backgroundColor={theme.colors.background.surface}
-                useBorder={true}
+                useSurface={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);
-          });
+        if (animatedHeader.headerTitle) {
+          styleAnimatedHeader = {
+            ...styleAnimatedHeader,
+            headerTitle: (props: any) =>
+              animatedHeader.headerTitle?.({
+                ...props,
+                animatedValue: animatedValue.current,
+              }),
+          };
         }
+        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]);
+
     /**
      * animated when use scroll && animated value
      */
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader) {
-        animatedValue.current = new Animated.Value(0);
+      if (animatedHeader || floatingButtonProps) {
         handleScroll = Animated.event(
           [
             {
@@ -182,7 +247,8 @@ const Screen = forwardRef(
           {
             useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-              if (animatedHeader.type == 'surface') {
+              scrollViewProps?.onScroll?.(e);
+              if (animatedHeader?.type == 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;
                 if (offsetY > 50) {
@@ -195,7 +261,6 @@ const Screen = forwardRef(
                   });
                 }
               }
-              scrollViewProps?.onScroll?.(e);
             },
           },
         );
@@ -216,25 +281,33 @@ const Screen = forwardRef(
     /**
      * build content for screen
      */
-    const renderContent = () => {
-      const results = validateChildren(children, [Section, Card]);
+    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;
-          return (
-            <View
-              key={`ScreenItem${index}`}
-              style={{
-                marginTop: space,
-                flex: item.props?.expanded ? 1 : undefined,
-              }}>
-              {item}
-            </View>
-          );
+          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,
+                }}>
+                {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`}
@@ -249,9 +322,7 @@ const Screen = forwardRef(
     };
 
     return (
-      <View
-        style={[Styles.flex, {backgroundColor}]}
-        accessibilityLabel={`ScreenContainer`}>
+      <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
           <>
             <Image
@@ -259,7 +330,6 @@ const Screen = forwardRef(
                 uri: headerBackground,
               }}
               style={styles.extendedHeader}
-              loading={false}
             />
             <View style={{height: heightHeader}} />
           </>
@@ -267,15 +337,16 @@ const Screen = forwardRef(
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
+          keyboardVerticalOffset={keyboardVerticalOffset}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,
           })}>
           {Header}
+
           <Component
             {...scrollViewProps}
             ref={ref}
-            heightHeader={heightHeader}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             style={Styles.flex}>
@@ -283,15 +354,30 @@ const Screen = forwardRef(
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
               {renderHeader()}
             </View>
-            {renderContent()}
+            {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={{
-                paddingTop: Spacing.S,
-                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-                backgroundColor: theme.colors.background.surface,
-              }}>
+              style={[
+                styles.shadow,
+                {
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}>
               <Section>{Footer}</Section>
             </View>
           )}

package/Layout/Section.tsx

@@ -22,11 +22,6 @@ export interface SectionProps extends ViewProps {
    */
   useMargin?: boolean;
 
-  /**
-   * Optional. Background color for the Section component.
-   */
-  backgroundColor?: string;
-
   /**
    * Optional. Background image for the Section component.
    */
@@ -36,8 +31,9 @@ export interface SectionProps extends ViewProps {
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
-  backgroundColor,
   backgroundImage,
+  style,
+  ...props
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -55,7 +51,6 @@ const Section: React.FC<SectionProps> = ({
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -112,8 +107,9 @@ const Section: React.FC<SectionProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -129,7 +125,7 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
@@ -148,21 +144,23 @@ const Section: React.FC<SectionProps> = ({
       value={{
         numberOfColumns,
         gutterSize,
-        margin,
         sizePerSpan,
         getSizeSpan: span => {
           return span * sizePerSpan + (span - 1) * gutterSize;
         },
       }}>
       <View
-        accessibilityLabel={`Section`}
-        style={{
-          width: widthSection,
-          marginHorizontal: gridContext.margin,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          backgroundColor: backgroundColor,
-        }}>
+        {...props}
+        style={[
+          style,
+          styles.protectedStyle,
+          {
+            width: widthSection,
+            marginHorizontal: margin,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}

package/Layout/index.ts

@@ -6,11 +6,11 @@ import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
+import ItemSectionList from './ItemSectionList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
   gutterSize: 12,
-  margin: 12,
   sizePerSpan: 0,
   getSizeSpan: () => 0,
 });
@@ -23,4 +23,5 @@ export {
   validateChildren,
   Item,
   ItemList,
+  ItemSectionList,
 };

package/Layout/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';
 
 export default StyleSheet.create({
   extendedHeader: {
@@ -45,19 +45,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
-    paddingTop: undefined,
-    paddingBottom: undefined,
-    paddingLeft: undefined,
-    paddingRight: undefined,
-    paddingVertical: undefined,
-    paddingHorizontal: undefined,
     padding: 12,
-    margin: undefined,
-    marginTop: undefined,
-    marginBottom: undefined,
-    marginLeft: undefined,
-    marginRight: undefined,
-    marginVertical: undefined,
   },
   item: {
     overflow: 'hidden',
@@ -75,7 +63,6 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    borderRadius: Spacing.M,
   },
   protectedStyle: {
     marginTop: undefined,
@@ -93,4 +80,22 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
+  shadow: {
+    paddingTop: Spacing.S,
+    ...Platform.select({
+      ios: {
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 2,
+          height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 10,
+      },
+      android: {
+        shadowColor: Colors.black_20,
+        elevation: 24,
+      },
+    }),
+  },
 });

package/Layout/types.ts

@@ -1,3 +1,5 @@
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
+
 export type GridContextProps = {
   /**
    * Represents the number of columns in the grid.
@@ -9,11 +11,6 @@ export type GridContextProps = {
    */
   gutterSize: number;
 
-  /**
-   * Optional. Represents the margin around the grid.
-   */
-  margin?: number;
-
   /**
    * Represents the size (width or height) per span number.
    */

package/Layout/utils.ts

@@ -1,5 +1,5 @@
-import {Dimensions} from 'react-native';
 import React, {Fragment, ReactElement, useEffect, useState} from 'react';
+import {Dimensions} from 'react-native';
 
 /**
  * validate children type
@@ -52,4 +52,4 @@ const useGridSystem = () => {
   return {numberOfColumns};
 };
 
-export {validateChildren, useGridSystem};
+export {useGridSystem, validateChildren};