@momo-kits/foundation 0.75.1-beta.8 → 0.75.1-beta.9

package/Layout/Card.tsx

@@ -1,21 +1,31 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-
+import React from 'react';
+import {Dimensions, View} from 'react-native';
+import {validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
+import Item from './Item';
+
+const Card: React.FC<CardProps> = ({children, style}) => {
+  const numberOfColumns = 12;
+  const gutterSize = 8;
+  const margin = 12;
 
-const Card: React.FC<CardProps> = ({
-  widthSpan = 12,
-  heightSpan,
-  usePadding,
-  children,
-  style,
-}) => {
-  const grid = useContext(GridContext);
+  const widthSection = Dimensions.get('window').width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize - 24) / numberOfColumns;
 
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
   /**
-   * render overlay view only dev mode
+   * render overlay only dev mode
    */
   const renderOverlay = () => {
     return (
@@ -34,55 +44,98 @@ const Card: React.FC<CardProps> = ({
     );
   };
 
-  const styles: any = style ?? {};
+  /**
+   * build a row view in side session
+   * @param rows
+   * @param cursor
+   * @param endRow
+   */
+  const addRowView = (
+    rows: any[],
+    cursor: number = 0,
+    endRow: boolean = false,
+  ) => {
+    return (
+      <View
+        key={`Item${cursor}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : gridContext.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
+              {index != 0 && (
+                <View style={{width: gridContext.gutterSize}}></View>
+              )}
+              {i}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
 
-  const numberOfColumns = 12;
-  const gutterSize = 8;
-  let margin = 0;
-  if (usePadding) {
-    margin = 12;
-  }
-  const widthSection = grid.getSizeSpan(widthSpan) - margin * 2;
-  const totalGutterSize = gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
-  const gridContext: GridContextProps = {
-    numberOfColumns,
-    gutterSize,
-    margin,
-    sizePerSpan,
-    getSizeSpan: span => {
-      return span * sizePerSpan + (span - 1) * gutterSize;
-    },
+  /**
+   * render children content for card
+   * @param children
+   */
+  const renderView = (
+    children: any,
+  ): React.ReactElement | React.ReactElement[] => {
+    const element: React.ReactElement | React.ReactElement[] = [];
+    if (Array.isArray(children)) {
+      let cursor = 0;
+      let rows: any[] = [];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
+        const totalSpan = rows
+          .concat([item])
+          .map(i => i.props?.widthSpan)
+          .reduce((previousValue, currentValue) => {
+            return previousValue + currentValue;
+          });
+
+        if (totalSpan <= gridContext.numberOfColumns) {
+          rows.push(item);
+        } else {
+          cursor += 1;
+          element.push(addRowView(rows, cursor));
+          rows = [item];
+        }
+
+        if (i == children.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+    }
+    return element;
   };
 
+  const styles: any = style ?? {};
+
   return (
-    <View
-      accessibilityLabel={`Card`}
-      style={{
-        ...styles,
-        width: grid.getSizeSpan(widthSpan),
-        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-        paddingHorizontal: margin,
-        overflow: 'hidden',
-        margin: undefined,
-        marginTop: undefined,
-        marginBottom: undefined,
-        marginLeft: undefined,
-        marginRight: undefined,
-      }}>
-      <GridContext.Provider value={gridContext}>
-        {children}
-      </GridContext.Provider>
-      {GRIDVIEW && renderOverlay()}
-    </View>
+    <GridContext.Provider value={gridContext}>
+      <View
+        accessibilityLabel={`Card`}
+        style={{
+          ...styles,
+          width: widthSection,
+          marginHorizontal: gridContext.margin,
+          padding: 12,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}>
+        {renderView(validateChildren(children, [Item]))}
+        {GRIDVIEW && renderOverlay()}
+      </View>
+    </GridContext.Provider>
   );
 };
 
-Card.defaultProps = {
-  widthSpan: 12,
-  usePadding: false,
-};
-
 Card.displayName = 'Card';
 
 export default Card;

package/Layout/Item.tsx

@@ -0,0 +1,60 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+
+import {ItemProps} from './types';
+import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
+
+const Item: React.FC<ItemProps> = ({
+  widthSpan = 12,
+  heightSpan,
+  children,
+  style,
+}) => {
+  const grid = useContext(GridContext);
+
+  /**
+   * render overlay view only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  const styles: any = style ?? {};
+
+  return (
+    <View
+      accessibilityLabel={`Item`}
+      style={{
+        ...styles,
+        width: grid.getSizeSpan(widthSpan),
+        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+        overflow: 'hidden',
+        margin: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        marginLeft: undefined,
+        marginRight: undefined,
+      }}>
+      {children}
+      {GRIDVIEW && renderOverlay()}
+    </View>
+  );
+};
+
+Item.displayName = 'Item';
+
+export default Item;

package/Layout/ScreenContainer.tsx

@@ -4,8 +4,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import React, {useContext} from 'react';
 import {ScreenContainerProps} from '../Navigation/types';
 import {Spacing, Styles} from '../Consts';
-import {Section, validateChildren} from './index';
-
+import {Section, Card, validateChildren} from './index';
 import {ApplicationContext} from '../Navigation';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
@@ -49,14 +48,14 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
    * build content for screen
    */
   const renderContent = () => {
-    const results = validateChildren(children, Section);
+    const results = validateChildren(children, [Section, Card]);
     if (Array.isArray(results)) {
       return results.map((item, index) => {
         return (
           <View
-            key={`Section${index}`}
+            key={`ScreenItem${index}`}
             style={{
-              marginTop: item.props?.useMargin ? Spacing.M : 0,
+              marginTop: Spacing.M,
               flex: item.props?.expanded ? 1 : undefined,
             }}>
             {item}

package/Layout/Section.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {Dimensions, View} from 'react-native';
 import {validateChildren} from './utils';
-import Card from './Card';
 import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
+import Item from './Item';
 
 const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
   const numberOfColumns = 12;
@@ -124,12 +124,12 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
       <View
         accessibilityLabel={`Section`}
         style={{
-          width: gridContext.getSizeSpan(12),
+          width: widthSection,
           marginHorizontal: gridContext.margin,
           flexDirection: 'row',
           flexWrap: 'wrap',
         }}>
-        {renderView(validateChildren(children, Card))}
+        {renderView(validateChildren(children, [Item]))}
         {GRIDVIEW && renderOverlay()}
       </View>
     </GridContext.Provider>
@@ -138,7 +138,4 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
 
 Section.displayName = 'Section';
 
-Section.defaultProps = {
-  useMargin: true,
-};
 export default Section;

package/Layout/index.ts

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

package/Layout/types.ts

@@ -42,7 +42,7 @@ export interface SectionProps extends ViewProps {
   useMargin?: boolean;
 }
 
-export interface CardProps extends ViewProps {
+export interface ItemProps extends ViewProps {
   /**
    * Represents the width of the Card component in terms of span numbers (1-12).
    */
@@ -52,10 +52,8 @@ export interface CardProps extends ViewProps {
    * Optional. Represents the height of the Card component in terms of span numbers (1-12).
    */
   heightSpan?: SpanNumber;
+}
 
-  /**
-   * Optional. If `true`, padding will be applied to the Card component.
-   * Defaults to `false` if not provided.
-   */
-  usePadding?: boolean;
+export interface CardProps extends ViewProps {
+  background?: string;
 }

package/Layout/utils.ts

@@ -1,10 +1,11 @@
 import {Alert} from 'react-native';
 import React, {ReactElement} from 'react';
+import {SectionProps} from './types';
 
 /**
  * validate children type
  * @param children
- * @param childrenType
+ * @param childrenTypes
  */
 const validateChildren = (
   children:
@@ -17,30 +18,39 @@ const validateChildren = (
     | null
     | undefined
     | boolean,
-  childrenType: React.FC<any>,
+  childrenTypes: Array<React.FC<any>>,
 ) => {
   if (!__DEV__) return children;
+
   let results: React.ReactElement[] = [];
+  const validateType = (child: React.ReactElement) => {
+    return childrenTypes.some(childrenType => child?.type === childrenType);
+  };
+
+  const alertWrongType = () => {
+    Alert.alert(
+      'Component Kits',
+      `Wrong children type for this component, expected are ${childrenTypes
+        .map(type => type.displayName)
+        .join(', ')}.`,
+    );
+  };
+
   if (Array.isArray(children)) {
-    results = children?.filter((child: ReactElement) => {
-      if (child?.type === childrenType) {
+    const flattenChildren = children.flat();
+    results = flattenChildren.filter((child: React.ReactElement) => {
+      if (validateType(child)) {
         return child;
       } else {
-        Alert.alert(
-          'Component Kits',
-          `Wrong children type for this component, expected is ${childrenType.displayName}.`,
-        );
+        alertWrongType();
       }
     });
   } else {
     const singleChild: any = children;
-    if (singleChild?.type === childrenType) {
+    if (validateType(singleChild)) {
       results = [singleChild];
     } else {
-      Alert.alert(
-        'Component Kits',
-        `Wrong children type for this component, expected is ${childrenType.displayName}.`,
-      );
+      alertWrongType();
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.75.1-beta.8",
+  "version": "0.75.1-beta.9",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {