wix-style-react/dist/src/TableToolbar/Toolbar.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Divider = exports.Label = exports.Item = exports.ItemGroup = exports.Toolbar = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Toolbar = require('./Toolbar.scss');

var _Toolbar2 = _interopRequireDefault(_Toolbar);

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

var _Label2 = _interopRequireDefault(_Label);

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; }

var Toolbar = exports.Toolbar = function Toolbar(props) {
  return _react2.default.createElement(
    'div',
    { className: _Toolbar2.default.toolbar },
    props.children
  );
};
Toolbar.displayName = 'Toolbar';
Toolbar.propTypes = {
  children: _propTypes.any // TODO: validate children are of type <ItemGroup>
};

var ItemGroup = exports.ItemGroup = function ItemGroup(props) {
  var classes = (0, _classnames2.default)([_Toolbar2.default.itemGroup, {
    positionStart: props.position === 'start',
    positionEnd: props.position === 'end'
  }]);

  return _react2.default.createElement(
    'div',
    { className: classes },
    props.children
  );
};
ItemGroup.displayName = 'Toolbar.ItemGroup';
ItemGroup.propTypes = {
  children: _propTypes.any, // TODO: validate children are either <Item> od <Divider>
  position: (0, _propTypes.oneOf)(['start', 'end'])
};
ItemGroup.defaultProps = {
  position: 'start'
};

var Item = exports.Item = function Item(props) {
  var classes = (0, _classnames2.default)([_Toolbar2.default.item, _defineProperty({}, _Toolbar2.default.layoutButton, props.layout === 'button')]);

  return _react2.default.createElement(
    'span',
    { className: classes },
    props.children
  );
};
Item.displayName = 'Toolbar.Item';
Item.propTypes = {
  children: _propTypes.any,
  layout: (0, _propTypes.oneOf)(['button'])
};

/**
 * Similar to the original WSR Label, but the label is displayed on the same line as the target element (and not above it).
 * TODO:; we might want to simply add this ability to the existing Label.
 */
var Label = exports.Label = function Label(props) {
  return _react2.default.createElement(
    _Label2.default,
    _extends({}, props, { className: _Toolbar2.default.itemLabel }),
    _react2.default.Children.toArray(props.children).map(function (c, index) {
      return typeof c === 'string' ? _react2.default.createElement(
        'span',
        { key: index },
        c
      ) : c;
    })
  );
};
Label.displayName = 'Toolbar.Label';
Label.propTypes = {
  children: _propTypes.any
};

var Divider = exports.Divider = function Divider() {
  return _react2.default.createElement('span', { className: _Toolbar2.default.divider });
};
Divider.displayName = 'Toolbar.Divider';

// Aliases for convenience
Toolbar.ItemGroup = ItemGroup;
Toolbar.Item = Item;
Toolbar.Label = Label;
Toolbar.Divider = Divider;