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

Generic block editor.

"use strict";

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 _icons = require("@wordpress/icons");

/**
 * WordPress dependencies
 */
function DuotoneControl({
  colorPalette,
  duotonePalette,
  disableCustomColors,
  disableCustomDuotone,
  value,
  onChange
}) {
  let toolbarIcon;

  if (value === 'unset') {
    toolbarIcon = (0, _element.createElement)(_components.ColorIndicator, {
      className: "block-editor-duotone-control__unset-indicator"
    });
  } else if (value) {
    toolbarIcon = (0, _element.createElement)(_components.DuotoneSwatch, {
      values: value
    });
  } else {
    toolbarIcon = (0, _element.createElement)(_icons.Icon, {
      icon: _icons.filter
    });
  }

  return (0, _element.createElement)(_components.Dropdown, {
    popoverProps: {
      className: 'block-editor-duotone-control__popover',
      headerTitle: (0, _i18n.__)('Duotone'),
      variant: 'toolbar'
    },
    renderToggle: ({
      isOpen,
      onToggle
    }) => {
      const openOnArrowDown = event => {
        if (!isOpen && event.keyCode === _keycodes.DOWN) {
          event.preventDefault();
          onToggle();
        }
      };

      return (0, _element.createElement)(_components.ToolbarButton, {
        showTooltip: true,
        onClick: onToggle,
        "aria-haspopup": "true",
        "aria-expanded": isOpen,
        onKeyDown: openOnArrowDown,
        label: (0, _i18n.__)('Apply duotone filter'),
        icon: toolbarIcon
      });
    },
    renderContent: () => (0, _element.createElement)(_components.MenuGroup, {
      label: (0, _i18n.__)('Duotone')
    }, (0, _element.createElement)("div", {
      className: "block-editor-duotone-control__description"
    }, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _element.createElement)(_components.DuotonePicker, {
      colorPalette: colorPalette,
      duotonePalette: duotonePalette,
      disableCustomColors: disableCustomColors,
      disableCustomDuotone: disableCustomDuotone,
      value: value,
      onChange: onChange
    }))
  });
}

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