@zenkit/layout/grid.js

ZenKit components for impliments layout

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _styles = require("@zenkit/styles");

var _box = _interopRequireDefault(require("./box"));

var _gridItem = _interopRequireDefault(require("./grid-item"));

var styles = {
  columns: {
    gridTemplateColumns: function gridTemplateColumns(props) {
      return Number.isInteger(props.columns) ? "repeat(".concat(props.columns, ", 1fr)") : props.columns;
    }
  },
  rows: {
    gridTemplateRows: function gridTemplateRows(props) {
      return Number.isInteger(props.rows) ? "repeat(".concat(props.rows, ", 1fr)") : props.rows;
    }
  },
  areas: {
    gridTemplateAreas: function gridTemplateAreas(props) {
      return props.areas;
    }
  },
  gap: function gap(props) {
    var rowGap = props.rowGap || Array.isArray(props.gap) ? props.gap[0] : props.gap;
    var columnGap = props.columnGap || Array.isArray(props.gap) ? props.gap[1] : props.gap;

    if (rowGap && columnGap) {
      return {
        gridGap: "".concat(rowGap, " ").concat(columnGap)
      };
    }

    return {
      gridRowGap: rowGap,
      gridColumnGap: columnGap
    };
  },
  justifyItems: {
    justifyItems: function justifyItems(props) {
      return props.justifyItems;
    }
  },
  alignItems: {
    alignItems: function alignItems(props) {
      return props.alignItems;
    }
  },
  justifyContent: {
    justifyContent: function justifyContent(props) {
      return props.justifyContent;
    }
  },
  alignContent: {
    alignContent: function alignContent(props) {
      return props.alignContent;
    }
  },
  flow: {
    gridAutoFlow: function gridAutoFlow(props) {
      return props.flow;
    }
  }
};
exports.styles = styles;

function Grid(props) {
  var _cn;

  var columns = props.columns,
      rows = props.rows,
      areas = props.areas,
      rowGap = props.rowGap,
      columnGap = props.columnGap,
      gap = props.gap,
      justifyItems = props.justifyItems,
      alignItems = props.alignItems,
      justifyContent = props.justifyContent,
      alignContent = props.alignContent,
      flow = props.flow,
      classes = props.classes,
      classNameProps = props.className,
      children = props.children,
      otherProps = (0, _objectWithoutProperties2.default)(props, ["columns", "rows", "areas", "rowGap", "columnGap", "gap", "justifyItems", "alignItems", "justifyContent", "alignContent", "flow", "classes", "className", "children"]);
  return React.createElement(_box.default, (0, _extends2.default)({
    display: "grid",
    className: (0, _classnames.default)((_cn = {}, (0, _defineProperty2.default)(_cn, classes.columns, columns), (0, _defineProperty2.default)(_cn, classes.rows, rows), (0, _defineProperty2.default)(_cn, classes.areas, areas), (0, _defineProperty2.default)(_cn, classes.gap, rowGap || columnGap || gap), (0, _defineProperty2.default)(_cn, classes.justifyItems, justifyItems), (0, _defineProperty2.default)(_cn, classes.alignItems, alignItems), (0, _defineProperty2.default)(_cn, classes.justifyContent, justifyContent), (0, _defineProperty2.default)(_cn, classes.alignContent, alignContent), (0, _defineProperty2.default)(_cn, classes.flow, flow), _cn), classNameProps)
  }, otherProps), children);
}

Grid.defaultProps = {
  columns: 12,
  rows: 'auto',
  gap: '1ch'
};
Grid.Item = _gridItem.default;

var _default = (0, _styles.withStyles)(styles)(Grid);

exports.default = _default;