reflay/es/components/Layout.js

React Flexbox Layout.

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _breakpoints = require('../helpers/breakpoints');

var _breakpoints2 = _interopRequireDefault(_breakpoints);

var _createProps = require('../helpers/createProps');

var _createProps2 = _interopRequireDefault(_createProps);

var _direction = require('../helpers/Layout/direction');

var _align = require('../helpers/Layout/align');

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// Helpers.


// Layout Direction.


// Layout Align.


/**
 * Prepare Layout propTypes.
 * @returns {Object}
 */
var getPropTypes = function getPropTypes() {
  var propTypes = {};

  // Dynamically generated propTypes.
  var dynamicPropTypes = {};
  var breakpointsSpecificProps = {
    direction: _react.PropTypes.oneOf((0, _direction.getLayoutDirections)()),
    align: _react.PropTypes.oneOf((0, _align.getLayoutAligns)())
  };

  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    var _loop = function _loop() {
      var k = _step.value;

      var v = breakpointsSpecificProps[k];
      propTypes['' + k] = v;
      _breakpoints2.default.map(function (breakpoint) {
        propTypes[k + '-' + breakpoint] = v;
      });
    };

    for (var _iterator = Object.keys(breakpointsSpecificProps)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      _loop();
    }

    // Other propTypes.
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  var otherPropTypes = {
    margin: _react.PropTypes.bool,
    padding: _react.PropTypes.bool,
    fill: _react.PropTypes.bool,
    wrap: _react.PropTypes.bool,
    // Other props.
    className: _react.PropTypes.string,
    tagName: _react.PropTypes.string,
    children: _react.PropTypes.node
  };

  return Object.assign(propTypes, dynamicPropTypes, otherPropTypes);
};

var propTypes = getPropTypes();

/**
 * Prepare Layout defaultProps.
 * @returns {Object}
 */
var getDefaultProps = function getDefaultProps() {
  return {
    // Note that 'row' is the default Layout direction if you do not specify a value.
    direction: '' + _direction.LAYOUT_DIRECTION_ROW,
    align: _align.LAYOUT_ALIGN_START + ' ' + _align.LAYOUT_ALIGN_STRETCH,
    margin: false,
    padding: false,
    fill: false,
    wrap: false,
    tagName: 'div'
  };
};

var defaultProps = getDefaultProps();

/**
 * Layout component.
 */
var Layout = function Layout(props) {
  var classes = [];

  classes.push(_defineProperty({}, 'layout-' + props['direction'], props['direction']));
  classes.push(_defineProperty({}, '' + (0, _align.getLayoutAlignClassName)(props), props['align']));
  _breakpoints2.default.map(function (breakpoint) {
    classes.push(_defineProperty({}, 'layout-' + breakpoint + '-' + props['direction-' + breakpoint], props['direction-' + breakpoint]));
    classes.push(_defineProperty({}, '' + (0, _align.getLayoutAlignClassName)(props, breakpoint), props['align-' + breakpoint]));
  });

  classes.push({ 'layout-margin': props.margin });
  classes.push({ 'layout-padding': props.padding });
  classes.push({ 'layout-fill': props.fill });
  classes.push({ 'layout-wrap': props.wrap });

  var className = (0, _classnames2.default)(props.className, classes);

  return _react2.default.createElement(props.tagName, (0, _createProps2.default)(propTypes, props, className));
};

Layout.propTypes = propTypes;
Layout.defaultProps = defaultProps;

exports.default = Layout;