@wordpress/block-editor/build/components/duotone-control/index.js

Generic block editor.

"use strict";

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

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

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

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _keycodes = require("@wordpress/keycodes");

var _duotonePickerPopover = _interopRequireDefault(require("./duotone-picker-popover"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function DuotoneControl({
  colorPalette,
  duotonePalette,
  value,
  onChange
}) {
  const [isOpen, setIsOpen] = (0, _element.useState)(false);

  const onToggle = () => {
    setIsOpen(prev => !prev);
  };

  const openOnArrowDown = event => {
    if (!isOpen && event.keyCode === _keycodes.DOWN) {
      event.preventDefault();
      event.stopPropagation();
      onToggle();
    }
  };

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToolbarButton, {
    showTooltip: true,
    onClick: onToggle,
    "aria-haspopup": "true",
    "aria-expanded": isOpen,
    onKeyDown: openOnArrowDown,
    label: (0, _i18n.__)('Apply duotone filter'),
    icon: (0, _element.createElement)(_components.DuotoneSwatch, {
      values: value
    })
  }), isOpen && (0, _element.createElement)(_duotonePickerPopover.default, {
    value: value,
    onChange: onChange,
    onToggle: onToggle,
    duotonePalette: duotonePalette,
    colorPalette: colorPalette
  }));
}

var _default = DuotoneControl;
exports.default = _default;
//# sourceMappingURL=index.js.map