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

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

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

var styles = {
  flex: {
    flex: function flex(props) {
      var flex = "".concat(props.grow);

      if (props.shrink !== 1) {
        flex += " ".concat(props.shrink);
      }

      if (props.basis !== 'auto') {
        flex += " ".concat(props.basis);
      }

      return flex;
    }
  },
  align: {
    alignSelf: function alignSelf(props) {
      return props.align;
    }
  },
  order: {
    order: function order(props) {
      return props.order;
    }
  }
};
exports.styles = styles;

function FlexItem(props) {
  var _cn;

  var align = props.align,
      order = props.order,
      grow = props.grow,
      shrink = props.shrink,
      basis = props.basis,
      classes = props.classes,
      classNameProps = props.className,
      children = props.children,
      otherProps = (0, _objectWithoutProperties2.default)(props, ["align", "order", "grow", "shrink", "basis", "classes", "className", "children"]);
  return React.createElement(_box.default, (0, _extends2.default)({
    className: (0, _classnames.default)((_cn = {}, (0, _defineProperty2.default)(_cn, classes.flex, grow !== 0 || shrink !== 1 || basis !== 'auto'), (0, _defineProperty2.default)(_cn, classes.align, align), (0, _defineProperty2.default)(_cn, classes.order, order), _cn), classNameProps)
  }, otherProps), children);
}

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

exports.default = _default;