@momo-kits/foundation 0.81.1 → 0.81.2

package/Application/Components.tsx

@@ -441,7 +441,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
     <TouchableOpacity onPress={onPress}>
       <Animated.View
         style={{
-          aspectRatio: 1.75,
+          height: 210,
           opacity: opacity,
           transform: [{scale}, {translateY}],
         }}>

package/Consts/colors+spacing+radius.ts

@@ -152,6 +152,10 @@ const Spacing = {
   M: 12,
   L: 16,
   XL: 24,
+  XXL: 32,
+  Size48: 48,
+  Size56: 56,
+  Size64: 64,
 };
 
 const Radius = {

package/Layout/Card.tsx

@@ -8,6 +8,7 @@ import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Colors, Shadow, Spacing} from '../Consts';
+import ItemList from './ItemList';
 
 export interface CardProps extends ViewProps {
   /**
@@ -15,6 +16,9 @@ export interface CardProps extends ViewProps {
    */
   backgroundImage?: string;
 
+  /**
+   * Optional. Use shadow for the card.
+   */
   useShadow?: boolean;
 }
 
@@ -155,7 +159,7 @@ const Card: React.FC<CardProps> = ({
             style={styles.imageBackground}
           />
         )}
-        {renderView(validateChildren(children, [Item]))}
+        {renderView(validateChildren(children, [Item, ItemList]))}
         {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>

package/Layout/ItemList.tsx

@@ -0,0 +1,63 @@
+import React, {FC, ReactElement, useContext} from 'react';
+import {FlatList, FlatListProps, View} from 'react-native';
+import Item from './Item';
+import {GridContext} from './index';
+
+const ItemList: FC<FlatListProps<any>> = ({
+  renderItem,
+  numColumns = 1,
+  style,
+  ...props
+}) => {
+  const {gutterSize} = useContext(GridContext);
+
+  const _renderItem = (info: any) => {
+    const {item, index, separators} = info;
+
+    const children = renderItem?.({
+      item,
+      index,
+      separators,
+    }) as ReactElement;
+
+    if (children?.type !== Item) {
+      console.warn('Wrong children type for this component, expected are Item');
+    }
+
+    const spacingStyle =
+      numColumns > 1
+        ? {
+            marginRight: gutterSize,
+          }
+        : {};
+
+    return <View style={spacingStyle}>{children}</View>;
+  };
+
+  return (
+    <FlatList
+      {...props}
+      numColumns={numColumns}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[
+        style,
+        {
+          marginTop: undefined,
+          marginBottom: undefined,
+          marginLeft: undefined,
+          marginRight: undefined,
+          paddingTop: undefined,
+          paddingBottom: undefined,
+          paddingLeft: undefined,
+          paddingRight: undefined,
+          padding: undefined,
+          margin: undefined,
+        },
+      ]}
+    />
+  );
+};
+
+export default ItemList;

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/types.ts

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

package/package.json

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