@zenkit/layout/grid-item.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 _styles = require("@zenkit/styles");

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

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

var styles = {
  column: function column(props) {
    var columnStart = props.columnStart ? props.columnStart : Array.isArray(props.column) ? props.column[1] : props.column;
    var columnEnd = props.columnEnd ? props.columnEnd : Array.isArray(props.column) ? props.column[1] : props.column;

    if (columnStart && columnEnd) {
      return {
        gridColumn: "".concat(columnStart, " ").concat(columnEnd)
      };
    }

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

    if (rowStart && rowEnd) {
      return {
        gridRow: "".concat(rowStart, " ").concat(rowEnd)
      };
    }

    return {
      gridRowStart: rowStart,
      gridRowEnd: rowEnd
    };
  },
  area: {
    gridArea: function gridArea(props) {
      return props.area;
    }
  },
  justify: {
    justifySelf: function justifySelf(props) {
      return props.justify;
    }
  },
  align: {
    alignSelf: function alignSelf(props) {
      return props.align;
    }
  }
};
exports.styles = styles;

function GridItem(props) {
  var _cn;

  var columnStart = props.columnStart,
      columnEnd = props.columnEnd,
      column = props.column,
      rowStart = props.rowStart,
      rowEnd = props.rowEnd,
      row = props.row,
      area = props.area,
      justify = props.justify,
      align = props.align,
      classes = props.classes,
      classNameProps = props.className,
      children = props.children,
      otherProps = (0, _objectWithoutProperties2.default)(props, ["columnStart", "columnEnd", "column", "rowStart", "rowEnd", "row", "area", "justify", "align", "classes", "className", "children"]);
  return React.createElement(_box.default, (0, _extends2.default)({
    className: (0, _classnames.default)((_cn = {}, (0, _defineProperty2.default)(_cn, classes.column, columnStart || columnEnd || column), (0, _defineProperty2.default)(_cn, classes.row, rowStart || rowEnd || row), (0, _defineProperty2.default)(_cn, classes.area, area), (0, _defineProperty2.default)(_cn, classes.justify, justify), (0, _defineProperty2.default)(_cn, classes.align, align), _cn), classNameProps)
  }, otherProps), children);
}

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

exports.default = _default;