@momo-kits/foundation 0.169.7-beta.10 → 0.169.7-beta.11

package/Layout/Card.tsx

@@ -1,13 +1,12 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
-import { GRID_GUTTER, GRID_MARGIN } from './constants';
-import { useGridSystem } from './useGridSystem';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { Image } from '../Image';
 import { ApplicationContext } from '../Context';
 import styles from './styles';
-import { Radius, Shadow } from '../Consts';
+import { Radius, Shadow, Spacing } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -29,11 +28,12 @@ const Card: React.FC<CardProps> = ({
   ...props
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
+  const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
-  const gutterSize = GRID_GUTTER;
-  const margin = GRID_MARGIN;
-  const widthSection = gridWidth - margin * 2;
+  const gutterSize = 8;
+  const margin = 12;
+  const widthSection = contentWidth - margin * 2;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -41,7 +41,7 @@ const Card: React.FC<CardProps> = ({
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: GRID_GUTTER,
+    gutterSize: Spacing.S,
     sizePerSpan,
     getSizeSpan: span => {
       return sizePerSpan * span + gutterSize * (span - 1);
@@ -60,7 +60,7 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: gridOffset + margin,
+            marginHorizontal: margin,
             gap: gutterSize,
           },
           !!backgroundImage && { backgroundColor: undefined },

package/Layout/Item.tsx

@@ -7,12 +7,12 @@ import { SpanNumber } from './types';
 
 export interface ItemProps extends ViewProps {
   /**
-   * Represents the width of the Card component in terms of span numbers (1-36, out of the grid's 12, 24 or 36 columns).
+   * Represents the width of the Card component in terms of span numbers (1-12).
    */
   widthSpan?: SpanNumber;
 
   /**
-   * Optional. Represents the height of the Card component in terms of span numbers (1-36, out of the grid's 12, 24 or 36 columns).
+   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
    */
   heightSpan?: SpanNumber;
 }

package/Layout/Section.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
-import { GRID_GUTTER, GRID_MARGIN } from './constants';
-import { useGridSystem } from './useGridSystem';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import styles from './styles';
 import { Image } from '../Image';
+import { Spacing } from '../Consts';
 
 export interface SectionProps extends ViewProps {
   /**
@@ -33,14 +33,15 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
+  const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
-  const gutterSize = GRID_GUTTER;
+  const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
-    margin = GRID_MARGIN;
+    margin = 12;
   }
-  const widthSection = gridWidth - margin * 2;
+  const widthSection = contentWidth - margin * 2;
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -48,7 +49,7 @@ const Section: React.FC<SectionProps> = ({
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: GRID_GUTTER,
+    gutterSize: Spacing.M,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + gutterSize * (span - 1);
@@ -66,7 +67,7 @@ const Section: React.FC<SectionProps> = ({
           styles.rowWrap,
           {
             width: widthSection,
-            marginHorizontal: gridOffset + margin,
+            marginHorizontal: margin,
             gap: gutterSize,
           },
         ]}

package/Layout/types.ts

@@ -15,43 +15,7 @@ export type ScreenRef = {
    */
   setSearchHeader: (params: SearchHeaderProps) => void;
 };
-export type SpanNumber =
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17
-  | 18
-  | 19
-  | 20
-  | 21
-  | 22
-  | 23
-  | 24
-  | 25
-  | 26
-  | 27
-  | 28
-  | 29
-  | 30
-  | 31
-  | 32
-  | 33
-  | 34
-  | 35
-  | 36;
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export type GridContextProps = {
   /**

package/Layout/utils.ts

@@ -364,6 +364,12 @@ const useSideBarItemStyle = (
   };
 };
 
+const useGridSystem = () => {
+  const { contentWidth } = useScreenLayout();
+  const numberOfColumns = contentWidth > 600 ? 24 : 12;
+  return { numberOfColumns };
+};
+
 export type { ScreenLayout, SideBarEdge, SideBarLayout, StatusBarClearance };
 
 export {
@@ -372,6 +378,7 @@ export {
   InnerEdgeStyles,
   getHeaderMargin,
   getHeaderRowOptions,
+  useGridSystem,
   useScreenLayout,
   useSideBarItemStyle,
   validateChildren,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.7-beta.10",
+    "version": "0.169.7-beta.11",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Layout/constants.ts

@@ -1,19 +0,0 @@
-const GRID_MARGIN = 12;
-const GRID_GUTTER = 12;
-const GRID_PHONE_MAX_WIDTH = 600;
-const GRID_TABLET_MIN_WIDTH = 800;
-const GRID_DESKTOP_MIN_WIDTH = 1100;
-const GRID_PHONE_COLUMNS = 12;
-const GRID_TABLET_COLUMNS = 24;
-const GRID_DESKTOP_COLUMNS = 36;
-
-export {
-  GRID_DESKTOP_COLUMNS,
-  GRID_DESKTOP_MIN_WIDTH,
-  GRID_GUTTER,
-  GRID_MARGIN,
-  GRID_PHONE_COLUMNS,
-  GRID_PHONE_MAX_WIDTH,
-  GRID_TABLET_COLUMNS,
-  GRID_TABLET_MIN_WIDTH,
-};

package/Layout/useGridSystem.ts

@@ -1,49 +0,0 @@
-import {
-  GRID_DESKTOP_COLUMNS,
-  GRID_DESKTOP_MIN_WIDTH,
-  GRID_PHONE_COLUMNS,
-  GRID_PHONE_MAX_WIDTH,
-  GRID_TABLET_COLUMNS,
-  GRID_TABLET_MIN_WIDTH,
-} from './constants';
-import { useScreenLayout } from './utils';
-
-/**
- * Column count for a content width: 12 below 800pt, 24 below 1100pt, 36 from there
- */
-const getGridColumns = (width: number) => {
-  if (width >= GRID_DESKTOP_MIN_WIDTH) {
-    return GRID_DESKTOP_COLUMNS;
-  }
-  if (width >= GRID_TABLET_MIN_WIDTH) {
-    return GRID_TABLET_COLUMNS;
-  }
-  return GRID_PHONE_COLUMNS;
-};
-
-/**
- * Grid width for a content width: the 12-column grid stops at 600pt and is centered,
- * the wider grids fill the content
- */
-const getGridWidth = (width: number) => {
-  if (width < GRID_TABLET_MIN_WIDTH) {
-    return Math.min(width, GRID_PHONE_MAX_WIDTH);
-  }
-  return width;
-};
-
-/**
- * Grid for the current content width: column count, grid width and the horizontal
- * offset that centers a grid narrower than the content
- */
-const useGridSystem = () => {
-  const { contentWidth } = useScreenLayout();
-  const gridWidth = getGridWidth(contentWidth);
-  return {
-    numberOfColumns: getGridColumns(contentWidth),
-    gridWidth,
-    gridOffset: (contentWidth - gridWidth) / 2,
-  };
-};
-
-export { useGridSystem };