@momo-kits/foundation 0.77.3 → 0.77.4

package/Application/BottomTab.tsx

@@ -1,14 +1,14 @@
-import React, {FC, useContext} from 'react';
+import React, {useContext} from 'react';
+import {View} from 'react-native';
 import {BottomTabProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
-import {View} from 'react-native';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: FC<BottomTabProps> = ({tabs, listeners}) => {
+const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners}) => {
   const {theme} = useContext(ApplicationContext);
   return (
     <Tab.Navigator>

package/Application/types.ts

@@ -166,7 +166,7 @@ export type BottomTabItemProps = {
   icon: string;
   showDot?: boolean;
   badgeLabel?: string;
-  screen: React.ComponentType;
+  screen: Screen;
 };
 
 export type BottomTabProps = {

package/Layout/Card.tsx

@@ -4,9 +4,11 @@ import {useGridSystem, validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
 import Item from './Item';
+import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
+import styles from './styles';
 
-const Card: React.FC<CardProps> = ({children, style}) => {
+const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
@@ -30,20 +32,7 @@ const Card: React.FC<CardProps> = ({children, style}) => {
    * 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.boxGrid} />;
   };
 
   /**
@@ -123,14 +112,18 @@ const Card: React.FC<CardProps> = ({children, style}) => {
         accessibilityLabel={`Card`}
         style={[
           style,
+          styles.card,
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
-            padding: 12,
-            flexDirection: 'row',
-            flexWrap: 'wrap',
           },
         ]}>
+        {!!backgroundImage && (
+          <Image
+            source={{uri: backgroundImage}}
+            style={[style, styles.cardImage]}
+          />
+        )}
         {renderView(validateChildren(children, [Item]))}
         {showGrid && renderOverlay()}
       </View>

package/Layout/Item.tsx

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import {ItemProps} from './types';
 import {GridContext} from './index';
 import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const Item: React.FC<ItemProps> = ({
   widthSpan,
@@ -18,20 +19,7 @@ const Item: React.FC<ItemProps> = ({
    * 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,
-        }}
-      />
-    );
+    return <View pointerEvents={'none'} style={styles.boxGrid} />;
   };
 
   return (
@@ -39,15 +27,10 @@ const Item: React.FC<ItemProps> = ({
       accessibilityLabel={`Item`}
       style={[
         style,
+        styles.item,
         {
           width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
           height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-          overflow: 'hidden',
-          margin: undefined,
-          marginTop: undefined,
-          marginBottom: undefined,
-          marginLeft: undefined,
-          marginRight: undefined,
         },
       ]}>
       {children}

package/Layout/Section.tsx

@@ -5,6 +5,7 @@ import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
 import Item from './Item';
 import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const Section: React.FC<SectionProps> = ({
   children,
@@ -38,20 +39,7 @@ const Section: React.FC<SectionProps> = ({
    * 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.boxGrid} />;
   };
 
   /**

package/Layout/styles.ts

@@ -0,0 +1,47 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  boxGrid: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'red',
+    borderWidth: 1,
+  },
+  card: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    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',
+    margin: undefined,
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    marginVertical: undefined,
+    marginHorizontal: undefined,
+  },
+  cardImage: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/Layout/types.ts

@@ -57,5 +57,5 @@ export interface ItemProps extends ViewProps {
 }
 
 export interface CardProps extends ViewProps {
-  background?: string;
+  backgroundImage?: string;
 }

package/package.json

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