@zenkit/layout/esm/grid-item.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 { withStyles } from '@zenkit/styles';
import cn from 'classnames';
import Box from './box';
export const styles = {
  column: props => {
    const columnStart = props.columnStart ? props.columnStart : Array.isArray(props.column) ? props.column[1] : props.column;
    const columnEnd = props.columnEnd ? props.columnEnd : Array.isArray(props.column) ? props.column[1] : props.column;

    if (columnStart && columnEnd) {
      return {
        gridColumn: `${columnStart} ${columnEnd}`
      };
    }

    return {
      gridColumnStart: columnStart,
      gridColumnEnd: columnEnd
    };
  },
  row: props => {
    const rowStart = props.rowStart ? props.rowStart : Array.isArray(props.row) ? props.row[1] : props.row;
    const rowEnd = props.rowEnd ? props.rowEnd : Array.isArray(props.row) ? props.row[1] : props.row;

    if (rowStart && rowEnd) {
      return {
        gridRow: `${rowStart} ${rowEnd}`
      };
    }

    return {
      gridRowStart: rowStart,
      gridRowEnd: rowEnd
    };
  },
  area: {
    gridArea: props => props.area
  },
  justify: {
    justifySelf: props => props.justify
  },
  align: {
    alignSelf: props => props.align
  }
};

function GridItem(props) {
  const {
    columnStart,
    columnEnd,
    column,
    rowStart,
    rowEnd,
    row,
    area,
    justify,
    align,
    classes,
    className: classNameProps,
    children
  } = props,
        otherProps = _objectWithoutPropertiesLoose(props, ["columnStart", "columnEnd", "column", "rowStart", "rowEnd", "row", "area", "justify", "align", "classes", "className", "children"]);

  return React.createElement(Box, _extends({
    className: cn({
      [classes.column]: columnStart || columnEnd || column,
      [classes.row]: rowStart || rowEnd || row,
      [classes.area]: area,
      [classes.justify]: justify,
      [classes.align]: align
    }, classNameProps)
  }, otherProps), children);
}

export default withStyles(styles)(GridItem);