@momo-kits/foundation 0.77.3 → 0.77.5-beta.1

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/Application/utils.tsx

@@ -84,6 +84,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
       ),
     };
   }
+
   if (params.surface == true) {
     options = {
       ...options,
@@ -125,6 +126,13 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  if (params?.headerRight == undefined) {
+    options = {
+      ...options,
+      headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    };
+  }
+
   return {
     ...params,
     ...options,

package/Layout/Card.tsx

@@ -2,11 +2,14 @@ import React, {useContext} from 'react';
 import {Dimensions, View} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
-import {GridContext} from './index';
+import {GridContext, GridSystem} from './index';
 import Item from './Item';
+import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {Colors, Spacing} from '../Consts';
 
-const Card: React.FC<CardProps> = ({children, style}) => {
+const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
@@ -31,18 +34,15 @@ const Card: React.FC<CardProps> = ({children, style}) => {
    */
   const renderOverlay = () => {
     return (
-      <View
-        pointerEvents={'none'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: 'red',
-          borderWidth: 1,
-        }}
-      />
+      <>
+        <GridSystem
+          width={widthSection}
+          gutterSize={Spacing.S}
+          screenGrid={false}
+          gridColor={Colors.red_01}
+        />
+        <View pointerEvents={'none'} style={styles.boxGridCard} />
+      </>
     );
   };
 
@@ -123,14 +123,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/GridSystem.tsx

@@ -6,13 +6,18 @@ import {Colors, Spacing} from '../Consts';
 import {GridContextProps} from './types';
 import {useGridSystem} from './utils';
 
-const GridSystem: React.FC = () => {
+const GridSystem: React.FC<any> = ({
+  width = Dimensions.get('window').width,
+  useMargin = true,
+  gutterSize = Spacing.M,
+  screenGrid = true,
+  gridColor = Colors.blue_07,
+}) => {
   const {theme} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
-  const gutterSize = 12;
-  const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const margin = useMargin ? Spacing.M : 0;
+  const widthSection = width - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
 
@@ -38,11 +43,12 @@ const GridSystem: React.FC = () => {
         pointerEvents="none"
         style={[
           styles.gridContainer,
-          insets,
+          screenGrid && insets,
           {
             borderColor: theme.colors.error.primary,
             marginHorizontal: grid.margin,
             top: Spacing.M,
+            bottom: Spacing.M,
           },
         ]}>
         {list.map((i, index) => {
@@ -50,12 +56,13 @@ const GridSystem: React.FC = () => {
             <View style={{flexDirection: 'row'}} key={index.toString()}>
               {index != -0 && <View style={{width: grid.gutterSize}} />}
               <View
-                key={index.toString()}
+                key={`Grid${index.toString()}`}
                 pointerEvents="none"
                 style={[
                   styles.gridColumn,
                   {
                     width: grid.sizePerSpan,
+                    backgroundColor: gridColor,
                   },
                 ]}
               />
@@ -63,16 +70,20 @@ const GridSystem: React.FC = () => {
           );
         })}
       </View>
-      <View pointerEvents="none" style={styles.dangerLeftContainer} />
-      <View pointerEvents="none" style={styles.dangerRightContainer} />
-      <View
-        pointerEvents="none"
-        style={[styles.dangerTopContainer, {height: Spacing.M}]}
-      />
-      <View
-        pointerEvents="none"
-        style={[styles.dangerBottomContainer, {height: insets.bottom}]}
-      />
+      {screenGrid && (
+        <>
+          <View pointerEvents="none" style={styles.dangerLeftContainer} />
+          <View pointerEvents="none" style={styles.dangerRightContainer} />
+          <View
+            pointerEvents="none"
+            style={[styles.dangerTopContainer, {height: Spacing.M}]}
+          />
+          <View
+            pointerEvents="none"
+            style={[styles.dangerBottomContainer, {height: insets.bottom}]}
+          />
+        </>
+      )}
     </>
   );
 };
@@ -90,7 +101,6 @@ const styles = StyleSheet.create({
   gridColumn: {
     height: '100%',
     opacity: 0.2,
-    backgroundColor: Colors.blue_07,
   },
   dangerTopContainer: {
     opacity: 0.2,

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/Screen.tsx

@@ -15,8 +15,8 @@ const Screen: React.FC<ScreenProps> = ({
   scrollable = false,
   navigation,
   marginHeader,
-  useAnimatedHeader = false,
-  useExtendedHeader = false,
+  useAnimatedHeader,
+  useExtendedHeader,
   headerBackground,
   scrollViewProps,
   footerComponent: Footer,
@@ -44,15 +44,19 @@ const Screen: React.FC<ScreenProps> = ({
   }
 
   useEffect(() => {
-    let title = {};
-    if (useExtendedHeader) {
-      title = {headerTitle: HeaderTitle};
+    if (useAnimatedHeader != undefined || useExtendedHeader != undefined) {
+      let title = {};
+      if (useExtendedHeader) {
+        title = {headerTitle: HeaderTitle};
+      }
+      setImmediate(() => {
+        navigation?.setOptions({
+          animatedValue: animatedValue.current,
+          headerTransparent: headerTransparent,
+          ...title,
+        });
+      });
     }
-    navigation?.setOptions({
-      animatedValue: animatedValue.current,
-      headerTransparent,
-      ...title,
-    });
   }, [useExtendedHeader, useAnimatedHeader]);
 
   /**

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.boxGridSection} />;
   };
 
   /**

package/Layout/styles.ts

@@ -0,0 +1,68 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  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',
+    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.5-beta.01",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {