@zenkit/layout/gapped.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 _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 _gappedItem = _interopRequireDefault(require("./gapped-item"));

var styles = {};
exports.styles = styles;

function Gapped(props) {
  var gap = props.gap,
      classes = props.classes,
      classNameProps = props.className,
      children = props.children,
      otherProps = (0, _objectWithoutProperties2.default)(props, ["gap", "classes", "className", "children"]);
  return React.createElement(_box.default, (0, _extends2.default)({
    position: "realative",
    display: "inline-block",
    className: (0, _classnames.default)(classes.root, classNameProps)
  }, otherProps), React.Children.map(children, function (child, index) {
    if (!child) {
      return;
    }

    var key = child.key || "gapped-".concat(index);
    var isFirst = index === 0;
    var isLast = React.Children.count(children) - 1 === index;

    if (child.type !== _gappedItem.default) {
      return React.createElement(_gappedItem.default, {
        key: key,
        gap: gap,
        isFirst: isFirst,
        isLast: isLast
      }, child);
    }

    return React.cloneElement(child, {
      key: key,
      isFirst: isFirst,
      isLast: isLast,
      gap: child.props.gap || gap
    });
  }));
}

Gapped.defaultProps = {
  gap: '1ch'
};
Gapped.Item = _gappedItem.default;

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

exports.default = _default;