terra-toolbar/lib/Toolbar.js

The terra-toolbar component is used to display bar containing items such as buttons, button groups, and links.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _ToolbarModule = _interopRequireDefault(require("./Toolbar.module.scss"));
var _excluded = ["align", "ariaControls", "ariaLabel", "ariaLabelledBy", "children"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
var cx = _bind.default.bind(_ToolbarModule.default);
var propTypes = {
  /**
   * Content alignment. Align to start, end, or center.
   */
  align: _propTypes.default.oneOf(['start', 'end', 'center']),
  /**
   * String that labels the content that the toolbar controls. Should reference
   * the id of the content area that the toolbar controls.
   */
  ariaControls: _propTypes.default.string,
  /**
   * String that labels the content that the toolbar controls. `ariaLabel` only be used
   * when no visible label for the toolbar is present. `ariaLabelledBy` should be
   * used over `ariaLabel` when possible.
   */
  ariaLabel: _propTypes.default.string,
  /**
   * String that labels the content that the toolbar controls. Should reference
   * the visible text label that describes the toolbar's function. If no
   * visible text label is present, `ariaLabel` should be used instead. If both
   * `ariaLabel` and `ariaLabelledBy` are present, `ariaLabelledBy` will be used.
   */
  ariaLabelledBy: _propTypes.default.string,
  /**
   * Items to be displayed in toolbar such as buttons, button groups, and links.
   */
  children: _propTypes.default.node
};
var defaultProps = {
  align: 'start'
};
var Toolbar = function Toolbar(_ref) {
  var align = _ref.align,
    ariaControls = _ref.ariaControls,
    ariaLabel = _ref.ariaLabel,
    ariaLabelledBy = _ref.ariaLabelledBy,
    children = _ref.children,
    customProps = _objectWithoutProperties(_ref, _excluded);
  var theme = _react.default.useContext(_terraThemeContext.default);
  var toolbarClassNames = (0, _classnames.default)(cx('toolbar', "".concat(align, "-align"), theme.className), customProps.className);
  var items = _react.default.Children.map(children, function (item) {
    return item ? /*#__PURE__*/_react.default.createElement("div", {
      className: cx('item')
    }, item) : item;
  });
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, customProps, {
    "aria-controls": ariaControls,
    "aria-label": !ariaLabelledBy ? ariaLabel : undefined,
    "aria-labelledby": ariaLabelledBy,
    className: toolbarClassNames,
    role: "toolbar"
  }), items);
};
Toolbar.propTypes = propTypes;
Toolbar.defaultProps = defaultProps;
var _default = exports.default = Toolbar;