doly/lib/flex/index.js

doly ui components

"use strict";

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

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

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

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

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

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

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

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

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

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

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

var _common = require("../_style/common");

var _createTag = _interopRequireDefault(require("../_utils/createTag"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    box-sizing: border-box;\n    flex-shrink: 1;\n\n    ", "\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n\n    ", "\n    ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var FlexTag = (0, _createTag.default)({
  tag: 'div',
  propsToOmit: ['gutter', 'justify', 'align']
});
var FlexItemTag = (0, _createTag.default)({
  tag: 'div',
  propsToOmit: ['gutter', 'order', 'span', 'width', 'align']
});
var justifyMap = {
  start: 'flex-start',
  end: 'flex-end'
};
var alignMap = {
  top: 'flex-start',
  bottom: 'flex-end'
};
var StyledFlex = (0, _styledComponents.default)(FlexTag)(_templateObject(), function (props) {
  return props.align ? 'align-items:' + (alignMap[props.align] || props.align) + ';' : '';
}, function (props) {
  return props.justify ? 'justify-content:' + (justifyMap[props.justify] || props.justify) + ';' : '';
});
var StyledFlexItem = (0, _styledComponents.default)(FlexItemTag)(_templateObject2(), function (props) {
  var _st = '';
  var basis = '0%',
      grow = props.span || 1;

  if (props.width) {
    if (typeof props.width === 'number') {
      basis = props.width + 'px';
      grow = 0;
    } else if (typeof props.width === 'string' && (props.width.indexOf('px') > -1 || props.width.indexOf('%') > -1)) {
      basis = props.width;
      grow = 0;
    }
  }

  _st += "flex-basis:".concat(basis, ";flex-grow:").concat(grow, ";");

  if (props.order) {
    _st += "order:".concat(props.order, ";");
  }

  if (props.align) {
    _st += "align-self:".concat(alignMap[props.align] || props.align, ";");
  }

  if (props.gutter) {
    if (typeof props.gutter === 'number') {
      _st += "\n                    margin-left:".concat(props.gutter, "px;\n                    &:first-child{ margin-left: 0; }\n                ");
    } else if (typeof props.gutter === 'string' && (props.gutter.indexOf('px') > -1 || props.gutter.indexOf('%') > -1)) {
      _st += "\n                    margin-left:".concat(props.gutter, ";\n                    &:first-child{ margin-left: 0; }\n                ");
    }
  }

  return _st;
});

var GutterContext = _react.default.createContext(0);

var Provider = GutterContext.Provider,
    Consumer = GutterContext.Consumer;

var FlexItem =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(FlexItem, _React$Component);

  function FlexItem() {
    (0, _classCallCheck2.default)(this, FlexItem);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FlexItem).apply(this, arguments));
  }

  (0, _createClass2.default)(FlexItem, [{
    key: "render",
    value: function render() {
      var _this = this;

      return _react.default.createElement(Consumer, null, function (gutter) {
        return _react.default.createElement(StyledFlexItem, (0, _extends2.default)({
          gutter: gutter
        }, _this.props));
      });
    }
  }]);
  return FlexItem;
}(_react.default.Component);

exports.FlexItem = FlexItem;
(0, _defineProperty2.default)(FlexItem, "propTypes", {
  gutter: _propTypes.default.number,
  order: _propTypes.default.number,
  span: _propTypes.default.number,
  width: _propTypes.default.string,
  align: _propTypes.default.oneOf(['top', 'center', 'bottom'])
});
(0, _defineProperty2.default)(FlexItem, "defaultProps", {
  span: 1
});

var Flex =
/*#__PURE__*/
function (_React$Component2) {
  (0, _inherits2.default)(Flex, _React$Component2);

  function Flex() {
    (0, _classCallCheck2.default)(this, Flex);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Flex).apply(this, arguments));
  }

  (0, _createClass2.default)(Flex, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          gutter = _this$props.gutter,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["gutter"]);
      return _react.default.createElement(Provider, {
        value: gutter || 0
      }, _react.default.createElement(_common.GlobalStyle, null), _react.default.createElement(StyledFlex, rest));
    }
  }]);
  return Flex;
}(_react.default.Component);

exports.Flex = Flex;
(0, _defineProperty2.default)(Flex, "propTypes", {
  gutter: _propTypes.default.number,
  justify: _propTypes.default.oneOf(['start', 'center', 'end', 'space-between', 'space-around']),
  align: _propTypes.default.oneOf(['top', 'center', 'bottom'])
});