@momo-kits/foundation 0.75.1-beta.9 → 0.75.2-beta.0

package/Layout/Screen.tsx

@@ -0,0 +1,378 @@
+import {useHeaderHeight} from '@react-navigation/stack';
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {
+  Animated,
+  KeyboardAvoidingView,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  ScrollViewProps,
+  View,
+  ViewProps,
+} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  ApplicationContext,
+  HeaderBackground,
+  HeaderTitle,
+} from '../Application';
+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';
+
+export interface ScreenProps extends ViewProps {
+  children: React.ReactNode;
+  /**
+   * Optional. Navigation object for handling navigation actions.
+   */
+  navigation?: Navigation;
+
+  /**
+   * Optional. If `true`, enable keyboard avoiding view for the screen.
+   */
+  enableKeyboardAvoidingView?: boolean;
+
+  /**
+   * Optional. If `true`, the screen content is scrollable.
+   */
+  scrollable?: boolean;
+
+  /**
+   * Optional. Set type of header.
+   */
+  headerType?: HeaderType;
+
+  /**
+   * Optional. Props for the animated component or bool used top navigation animated.
+   */
+  animatedHeader?: AnimatedHeader;
+
+  /**
+   * Optional. Props for the underlying ScrollView component when `scrollable` is `true`.
+   */
+  scrollViewProps?: ScrollViewProps;
+
+  /**
+   * Optional. ReactNode representing the header component of the screen.
+   */
+  headerComponent?: ReactNode;
+
+  /**
+   * Optional. ReactNode representing the footer component of the screen.
+   */
+  footerComponent?: ReactNode;
+
+  /**
+   * Optional. Background color of the screen.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. layout card offset overlap header banner.
+   */
+  layoutOffset?: -8 | -24 | -56;
+
+  /**
+   * Optional. Props for the floating action button.
+   */
+  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
+
+  /**
+   * Optional. If `true`, the screen content is using grid layout by span.
+   */
+  useGridLayout?: boolean;
+}
+
+const Screen = forwardRef(
+  (
+    {
+      children,
+      enableKeyboardAvoidingView = false,
+      scrollable = false,
+      navigation,
+      animatedHeader,
+      scrollViewProps,
+      headerComponent: Header,
+      footerComponent: Footer,
+      layoutOffset = -56,
+      backgroundColor,
+      headerType = 'default',
+      floatingButtonProps,
+      useGridLayout = true,
+    }: ScreenProps,
+    ref,
+  ) => {
+    const animatedValue = useRef<Animated.Value>(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;
+    let keyboardVerticalOffset = heightHeader - 20;
+
+    if (headerType == 'extended' || animatedHeader) {
+      keyboardVerticalOffset = -20;
+    }
+
+    if (headerType == 'extended') {
+      headerBackground = theme.assets?.headerBackground;
+    }
+
+    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);
+      }
+    }, [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}
+                  backgroundColor={theme.colors.background.surface}
+                  useBorder={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 || floatingButtonProps) {
+        handleScroll = Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {y: animatedValue.current as Animated.Value},
+              },
+            },
+          ],
+          {
+            useNativeDriver: false,
+            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,
+                  });
+                }
+              }
+            },
+          },
+        );
+      }
+    }
+
+    /**
+     * 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,
+                }}>
+                {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`}
+            style={{
+              marginTop: space,
+              flex: item?.props?.expanded ? 1 : undefined,
+            }}>
+            {children}
+          </View>
+        );
+      }
+    };
+
+    return (
+      <View style={[Styles.flex, {backgroundColor}]}>
+        {!!headerBackground && (
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <View style={{height: heightHeader}} />
+          </>
+        )}
+        <KeyboardAvoidingView
+          style={Styles.flex}
+          enabled={enableKeyboardAvoidingView}
+          keyboardVerticalOffset={keyboardVerticalOffset}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}>
+          {Header}
+
+          <Component
+            {...scrollViewProps}
+            ref={ref}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            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>
+    );
+  },
+);
+
+export default Screen;

package/Layout/Section.tsx

@@ -1,13 +1,43 @@
-import React from 'react';
-import {Dimensions, View} from 'react-native';
-import {validateChildren} from './utils';
-import {GridContextProps, SectionProps} from './types';
+import React, {Fragment, useContext} from 'react';
+import {Dimensions, View, ViewProps} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
+import {GridContextProps} from './types';
 import {GridContext} from './index';
-import {GRIDVIEW} from '../Consts';
 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 {
+  /**
+   * Optional. If `true`, the Section component will be displayed in an expanded state.
+   * Defaults to `false` if not provided.
+   */
+  expanded?: boolean;
+
+  /**
+   * Optional. If `true`, margin will be applied to the Section component.
+   * Defaults to `false` if not provided.
+   */
+  useMargin?: boolean;
+
+  /**
+   * Optional. Background image for the Section component.
+   */
+  backgroundImage?: string;
+}
+
+const Section: React.FC<SectionProps> = ({
+  children,
+  useMargin = true,
+  backgroundImage,
+  style,
+  ...props
+}) => {
+  const {showGrid} = useContext(ApplicationContext);
+  const {numberOfColumns} = useGridSystem();
 
-const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
-  const numberOfColumns = 12;
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
@@ -21,7 +51,6 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -32,20 +61,7 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
    * render overlay only dev mode
    */
   const renderOverlay = () => {
-    return (
-      <View
-        pointerEvents={'none'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: 'red',
-          borderWidth: 1,
-        }}
-      />
-    );
+    return <View pointerEvents={'none'} style={styles.boxGridSection} />;
   };
 
   /**
@@ -91,8 +107,9 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
     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)
@@ -108,29 +125,50 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
+      if (children?.type == Fragment) {
+        return renderView(children?.props.children);
+      }
     }
     return element;
   };
 
   return (
-    <GridContext.Provider value={gridContext}>
+    <GridContext.Provider
+      value={{
+        numberOfColumns,
+        gutterSize,
+        sizePerSpan,
+        getSizeSpan: span => {
+          return span * sizePerSpan + (span - 1) * gutterSize;
+        },
+      }}>
       <View
-        accessibilityLabel={`Section`}
-        style={{
-          width: widthSection,
-          marginHorizontal: gridContext.margin,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        }}>
-        {renderView(validateChildren(children, [Item]))}
-        {GRIDVIEW && renderOverlay()}
+        {...props}
+        style={[
+          style,
+          styles.protectedStyle,
+          {
+            width: widthSection,
+            marginHorizontal: margin,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
+        {!!backgroundImage && (
+          <Image
+            source={{uri: backgroundImage}}
+            style={styles.imageBackground}
+          />
+        )}
+        {renderView(validateChildren(children, [Item, ItemList]))}
+        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/index.ts

@@ -5,13 +5,23 @@ import {validateChildren} from './utils';
 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: span => 0,
+  getSizeSpan: () => 0,
 });
 
-export {GridContext, Card, Section, GridSystem, validateChildren, Item};
+export {
+  GridContext,
+  Card,
+  Section,
+  GridSystem,
+  validateChildren,
+  Item,
+  ItemList,
+  ItemSectionList,
+};

package/Layout/styles.ts

@@ -0,0 +1,101 @@
+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%',
+  },
+  boxGrid: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'red',
+    borderWidth: 1,
+    zIndex: 99,
+  },
+  boxGridSection: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'blue',
+    borderWidth: 2,
+    zIndex: 100,
+  },
+  boxGridCard: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'green',
+    borderWidth: 2,
+    zIndex: 100,
+  },
+  card: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    borderRadius: Radius.M,
+    padding: 12,
+  },
+  item: {
+    overflow: 'hidden',
+    margin: undefined,
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    marginVertical: undefined,
+    marginHorizontal: undefined,
+  },
+  imageBackground: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  protectedStyle: {
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    padding: undefined,
+    margin: undefined,
+    marginHorizontal: undefined,
+    marginVertical: undefined,
+    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,6 +1,4 @@
-import {ViewProps} from 'react-native';
-
-type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
 
 export type GridContextProps = {
   /**
@@ -13,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.
    */
@@ -28,32 +21,3 @@ export type GridContextProps = {
    */
   getSizeSpan: (span: number) => number;
 };
-export interface SectionProps extends ViewProps {
-  /**
-   * Optional. If `true`, the Section component will be displayed in an expanded state.
-   * Defaults to `false` if not provided.
-   */
-  expanded?: boolean;
-
-  /**
-   * Optional. If `true`, margin will be applied to the Section component.
-   * Defaults to `false` if not provided.
-   */
-  useMargin?: boolean;
-}
-
-export interface ItemProps extends ViewProps {
-  /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
-   */
-  widthSpan: SpanNumber;
-
-  /**
-   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
-   */
-  heightSpan?: SpanNumber;
-}
-
-export interface CardProps extends ViewProps {
-  background?: string;
-}