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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useContext, forwardRef } from '@wordpress/element';
/**
 * Internal dependencies
 */

import Button from '../button';
import ToolbarItem from '../toolbar-item';
import ToolbarContext from '../toolbar-context';
import ToolbarButtonContainer from './toolbar-button-container';

function ToolbarButton({
  containerClassName,
  className,
  extraProps,
  children,
  title,
  isActive,
  isDisabled,
  ...props
}, ref) {
  const accessibleToolbarState = useContext(ToolbarContext);

  if (!accessibleToolbarState) {
    return createElement(ToolbarButtonContainer, {
      className: containerClassName
    }, createElement(Button, _extends({
      ref: ref,
      icon: props.icon,
      label: title,
      shortcut: props.shortcut,
      "data-subscript": props.subscript,
      onClick: event => {
        event.stopPropagation();

        if (props.onClick) {
          props.onClick(event);
        }
      },
      className: classnames('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 createElement(ToolbarItem, _extends({
    className: classnames('components-toolbar-button', className)
  }, extraProps, props, {
    ref: ref
  }), toolbarItemProps => createElement(Button, _extends({
    label: title,
    isPressed: isActive,
    disabled: isDisabled
  }, toolbarItemProps), children));
}

export default forwardRef(ToolbarButton);
//# sourceMappingURL=index.js.map