grid-styletr/dist/withBox.js

Responsive React grid system built with styletron-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledSystem = require('styled-system');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _tagHoc = require('./tag-hoc');

var _tagHoc2 = _interopRequireDefault(_tagHoc);

var _propTypes3 = require('./propTypes');

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _removeProps = require('./remove-props');

var _removeProps2 = _interopRequireDefault(_removeProps);

var _styled = require('./styled');

var _styled2 = _interopRequireDefault(_styled);

var _ThemeProvider = require('./ThemeProvider');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var flex = (0, _styledSystem.responsiveStyle)('flex');
var order = (0, _styledSystem.responsiveStyle)('order');

var cache = {};
var Tag = (0, _tagHoc2.default)(_removeProps2.default);

var responsivePropType = (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string, _propTypes.array]);

var propTypes = Object.assign({}, _propTypes4.default, {
  flex: responsivePropType,
  order: responsivePropType
});
var contextTypes = {
  theme: _propTypes2.default.shape(_ThemeProvider.themeShape),
  styletron: _propTypes2.default.object
};

exports.default = function (base) {
  if (cache[base]) return cache[base];

  var Base = Tag(base);
  Base.contextTypes = Object.assign({}, base.contextTypes, contextTypes);

  var Box = (0, _styled2.default)(Base, { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space, flex, order);
  Box.displayName = 'Box';
  Box.propTypes = propTypes;
  Box.contextTypes = Base.contextTypes;

  if (typeof base === 'string') cache[base] = Box;

  return Box;
};