@zenkit/layout/esm/grid.js

ZenKit components for impliments layout

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import * as React from 'react';
import cn from 'classnames';
import { withStyles } from '@zenkit/styles';
import Box from './box';
import GridItem from './grid-item';
export const styles = {
  columns: {
    gridTemplateColumns: props => Number.isInteger(props.columns) ? `repeat(${props.columns}, 1fr)` : props.columns
  },
  rows: {
    gridTemplateRows: props => Number.isInteger(props.rows) ? `repeat(${props.rows}, 1fr)` : props.rows
  },
  areas: {
    gridTemplateAreas: props => props.areas
  },
  gap: props => {
    const rowGap = props.rowGap || Array.isArray(props.gap) ? props.gap[0] : props.gap;
    const columnGap = props.columnGap || Array.isArray(props.gap) ? props.gap[1] : props.gap;

    if (rowGap && columnGap) {
      return {
        gridGap: `${rowGap} ${columnGap}`
      };
    }

    return {
      gridRowGap: rowGap,
      gridColumnGap: columnGap
    };
  },
  justifyItems: {
    justifyItems: props => props.justifyItems
  },
  alignItems: {
    alignItems: props => props.alignItems
  },
  justifyContent: {
    justifyContent: props => props.justifyContent
  },
  alignContent: {
    alignContent: props => props.alignContent
  },
  flow: {
    gridAutoFlow: props => props.flow
  }
};

function Grid(props) {
  const {
    columns,
    rows,
    areas,
    rowGap,
    columnGap,
    gap,
    justifyItems,
    alignItems,
    justifyContent,
    alignContent,
    flow,
    classes,
    className: classNameProps,
    children
  } = props,
        otherProps = _objectWithoutPropertiesLoose(props, ["columns", "rows", "areas", "rowGap", "columnGap", "gap", "justifyItems", "alignItems", "justifyContent", "alignContent", "flow", "classes", "className", "children"]);

  return React.createElement(Box, _extends({
    display: "grid",
    className: cn({
      [classes.columns]: columns,
      [classes.rows]: rows,
      [classes.areas]: areas,
      [classes.gap]: rowGap || columnGap || gap,
      [classes.justifyItems]: justifyItems,
      [classes.alignItems]: alignItems,
      [classes.justifyContent]: justifyContent,
      [classes.alignContent]: alignContent,
      [classes.flow]: flow
    }, classNameProps)
  }, otherProps), children);
}

Grid.defaultProps = {
  columns: 12,
  rows: 'auto',
  gap: '1ch'
};
Grid.Item = GridItem;
export default withStyles(styles)(Grid);