nishant-design-system/lib/components/Grid/Grid.js.flow

Sense UI components library

// @flow strict
import * as React from 'react';

import {classify} from '../../utils/classify';

import css from './Grid.module.css';


export type RowProps = {
  className?: string,
  children?: React.Node,
  span?: number,
  offset?: number,
  gridType?: 'small' | 'medium' | 'large',
};

const GRID_SYSTEM_MAP = {
  small: 24,
  medium: 12,
  large: 6,
};

export const Row = ({
  className,
  children,
  span = 1,
  gridType = 'medium',
}: RowProps): React.Node => {
  const GRID_COLUMN_COUNT = GRID_SYSTEM_MAP[gridType];
  let columnSpanCount = 0;
  let lastChildColCount = 0;
  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      const {span = 1, offset = 0} = child.props;
      if (span < 1) {
        console.error(`span can not be less than one`);
        return;
      }
      if (offset < 0) {
        console.error(`offset can not be negative`);
        return;
      }
      lastChildColCount = columnSpanCount;
      columnSpanCount = lastChildColCount + offset + span;
      if (columnSpanCount <= GRID_COLUMN_COUNT) {
        return React.cloneElement(child, {
          gridColumnStart: lastChildColCount + offset + 1,
          gridColumnEnd: `span ${span}`,
        });
      } else {
        console.error(`number of column exceed ${GRID_COLUMN_COUNT}`);
      }
    }
  });

  return (
    <div
      data-testid="Grid"
      className={classify(css.gridRow, css[`gridRowSpan${span}`], className)}
      style={{gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`}}
    >
      {childrenWithProps}
    </div>
  );
};

export type ColProps = {
  className?: string,
  children?: React.Node,
  span?: number,
  offset?: number,
  gridColumnStart?: number,
  gridColumnEnd?: number,
};

export const Col = ({
  className,
  children,
  gridColumnStart,
  gridColumnEnd,
}: ColProps): React.Node => (
  <div
    className={classify(css.gridColumn, className)}
    style={{gridColumnStart, gridColumnEnd}}
  >
    {children}
  </div>
);