@momo-kits/foundation 0.77.4 → 0.77.5

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,12 @@ 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, backgroundImage}) => {
   const {showGrid} = useContext(ApplicationContext);
@@ -32,7 +33,17 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
    * render overlay only dev mode
    */
   const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGrid} />;
+    return (
+      <>
+        <GridSystem
+          width={widthSection}
+          gutterSize={Spacing.S}
+          screenGrid={false}
+          gridColor={Colors.red_01}
+        />
+        <View pointerEvents={'none'} style={styles.boxGridCard} />
+      </>
+    );
   };
 
   /**

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

@@ -39,7 +39,7 @@ const Section: React.FC<SectionProps> = ({
    * render overlay only dev mode
    */
   const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGrid} />;
+    return <View pointerEvents={'none'} style={styles.boxGridSection} />;
   };
 
   /**

package/Layout/styles.ts

@@ -9,6 +9,27 @@ export default StyleSheet.create({
     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',

package/package.json

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