'use strict';

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

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _FlowItem = require('./FlowItem');

var _FlowItem2 = _interopRequireDefault(_FlowItem);

var _Label = require('../../components/Label');

var _Label2 = _interopRequireDefault(_Label);

var _constants = require('./constants');

var _FlowRowStyles = require('./styles/FlowRowStyles');

var _FlowRowStyles2 = _interopRequireDefault(_FlowRowStyles);

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

/**
 * @deprecated
 * See /layouts/Fields for new layout mechanisms for form fields
 *
 * A Flow.Row defines a horizontal row of FlowItems. FlowRows belong within a Flow component.
 * Flow will manage their vertical spacing. A Flow.Row manages the horizontal spacing of its children.
 *
 * Flow.Row has several advanced layout options which make it the most versatile part of the Flow toolkit. Be sure to
 * check out the prop documentation and the Flow component documentation for more information on how to use the Flow
 * system.
 *
 * @class FlowRow
 * @extends {React.Component}
 */
var FlowRow = function (_React$Component) {
  (0, _inherits3.default)(FlowRow, _React$Component);

  function FlowRow() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, FlowRow);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = FlowRow.__proto__ || (0, _getPrototypeOf2.default)(FlowRow)).call.apply(_ref, [this].concat(args))), _this), _this.shouldSuppressLabels = function () {
      var atLeastOneChildHasLabel = _react2.default.Children.toArray(_this.props.children).reduce(function (hasLabel, child) {
        return hasLabel || !!child.props.label;
      }, false);
      return !atLeastOneChildHasLabel;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  /**
   * Triggers suppressing labels when all child components have no label.
   * When labels are suppressed, the label section at the top of this row is collapsed.
   *
   * @memberof FlowRow
   */


  (0, _createClass3.default)(FlowRow, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          sizes = _props.sizes,
          alignment = _props.alignment,
          Styles = _props.Styles;

      var suppressLabel = this.shouldSuppressLabels();

      return _react2.default.createElement(
        Styles,
        {
          suppressLabels: suppressLabel,
          sizes: sizes,
          alignment: alignment
        },
        children
      );
    }
  }]);
  return FlowRow;
}(_react2.default.Component);

FlowRow.propTypes = {
  /**
   * FlowRow children should be either FlowItems or other FlowRows. You can use nested FlowRows to achieve more
   * powerful layout options.
   */
  children: _propTypes2.default.node.isRequired,
  /**
   * Sizes is an array of numbers which defines the *proportional* size of each child element. By default, FlowRow
   * makes all children the same size, but this prop will let you customize that sizing.
   */
  sizes: _propTypes2.default.array,
  /**
   * Alignment changes the way the row aligns its children. Alignment forces children into automatic sizing and
   * aligns them in whatever direction you specify. Alignment is incompatible with `sizes`.
   */
  alignment: function alignment(props, propName, componentName) {
    if (props.sizes.length > 0 && props[propName] !== 'stretch') {
      return new Error('Using ' + propName + ' with sizes is invalid in ' + componentName + '.\n        ' + propName + ' is ' + (0, _stringify2.default)(props[propName]) + ', sizes is ' + (0, _stringify2.default)(props.sizes));
    }

    if (!['left', 'right', 'stretch', 'center'].includes(props[propName])) {
      return new Error('Invalid prop ' + propName + ' supplied to ' + componentName + ': must be one of [left, right, center, stretch].');
    }
  },

  /**
   * A component to render the row itself
   */
  Styles: _propTypes2.default.func
};
FlowRow.defaultProps = {
  sizes: [],
  alignment: 'stretch',
  Styles: _FlowRowStyles2.default
};


FlowRow.Item = _FlowItem2.default;

exports.default = FlowRow;