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

var styles = {
  flow: {
    flexFlow: function flexFlow(props) {
      var direction = 'row';

      if (props.column) {
        direction = 'column';
      }

      if (props.reverse) {
        direction += '-reverse';
      }

      return "".concat(direction, " ").concat(props.wrap ? 'wrap' : 'nowrap');
    }
  },
  justify: {
    justifyContent: function justifyContent(props) {
      return props.justify;
    }
  },
  items: {
    alignItems: function alignItems(props) {
      return props.items;
    }
  },
  content: {
    alignContent: function alignContent(props) {
      return props.content;
    }
  }
};
exports.styles = styles;

function Flex(props) {
  var _cn;

  var column = props.column,
      reverse = props.reverse,
      wrap = props.wrap,
      justify = props.justify,
      items = props.items,
      content = props.content,
      classes = props.classes,
      classNameProps = props.className,
      children = props.children,
      otherProps = (0, _objectWithoutProperties2.default)(props, ["column", "reverse", "wrap", "justify", "items", "content", "classes", "className", "children"]);
  return React.createElement(_box.default, (0, _extends2.default)({
    display: "flex",
    className: (0, _classnames.default)(classes.flow, (_cn = {}, (0, _defineProperty2.default)(_cn, classes.justify, justify), (0, _defineProperty2.default)(_cn, classes.items, items), (0, _defineProperty2.default)(_cn, classes.content, content), _cn), classNameProps)
  }, otherProps), children);
}

Flex.Item = _flexItem.default;

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

exports.default = _default;