@wordpress/components/build/toolbar/toolbar-button/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ToolbarButton = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _button = _interopRequireDefault(require("../../button"));

var _toolbarItem = _interopRequireDefault(require("../toolbar-item"));

var _toolbarContext = _interopRequireDefault(require("../toolbar-context"));

var _toolbarButtonContainer = _interopRequireDefault(require("./toolbar-button-container"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function UnforwardedToolbarButton(_ref, ref) {
  let {
    children,
    className,
    containerClassName,
    extraProps,
    isActive,
    isDisabled,
    title,
    ...props
  } = _ref;
  const accessibleToolbarState = (0, _element.useContext)(_toolbarContext.default);

  if (!accessibleToolbarState) {
    return (0, _element.createElement)(_toolbarButtonContainer.default, {
      className: containerClassName
    }, (0, _element.createElement)(_button.default, (0, _extends2.default)({
      ref: ref,
      icon: props.icon,
      label: title,
      shortcut: props.shortcut,
      "data-subscript": props.subscript,
      onClick: event => {
        event.stopPropagation(); // TODO: Possible bug; maybe use onClick instead of props.onClick.

        if (props.onClick) {
          props.onClick(event);
        }
      },
      className: (0, _classnames.default)('components-toolbar__control', className),
      isPressed: isActive,
      disabled: isDisabled,
      "data-toolbar-item": true
    }, extraProps, props), children));
  } // ToobarItem will pass all props to the render prop child, which will pass
  // all props to Button. This means that ToolbarButton has the same API as
  // Button.


  return (0, _element.createElement)(_toolbarItem.default, (0, _extends2.default)({
    className: (0, _classnames.default)('components-toolbar-button', className)
  }, extraProps, props, {
    ref: ref
  }), toolbarItemProps => (0, _element.createElement)(_button.default, (0, _extends2.default)({
    label: title,
    isPressed: isActive,
    disabled: isDisabled
  }, toolbarItemProps), children));
}
/**
 * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar
 * or ToolbarGroup when used to create general interfaces.
 *
 * ```jsx
 * import { Toolbar, ToolbarButton } from '@wordpress/components';
 * import { edit } from '@wordpress/icons';
 *
 * function MyToolbar() {
 *   return (
 *		<Toolbar label="Options">
 *			<ToolbarButton
 *				icon={ edit }
 *				label="Edit"
 *				onClick={ () => alert( 'Editing' ) }
 *			/>
 *		</Toolbar>
 *   );
 * }
 * ```
 */


const ToolbarButton = (0, _element.forwardRef)(UnforwardedToolbarButton);
exports.ToolbarButton = ToolbarButton;
var _default = ToolbarButton;
exports.default = _default;
//# sourceMappingURL=index.js.map