@wordpress/block-editor
Version:
86 lines (84 loc) • 2.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _keycodes = require("@wordpress/keycodes");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
function DuotoneControl({
id: idProp,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
onChange
}) {
let toolbarIcon;
if (value === 'unset') {
toolbarIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorIndicator, {
className: "block-editor-duotone-control__unset-indicator"
});
} else if (value) {
toolbarIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DuotoneSwatch, {
values: value
});
} else {
toolbarIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.filter
});
}
const actionLabel = (0, _i18n.__)('Apply duotone filter');
const id = (0, _compose.useInstanceId)(DuotoneControl, 'duotone-control', idProp);
const descriptionId = `${id}__description`;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: {
className: 'block-editor-duotone-control__popover',
headerTitle: (0, _i18n.__)('Duotone')
},
renderToggle: ({
isOpen,
onToggle
}) => {
const openOnArrowDown = event => {
if (!isOpen && event.keyCode === _keycodes.DOWN) {
event.preventDefault();
onToggle();
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
showTooltip: true,
onClick: onToggle,
"aria-haspopup": "true",
"aria-expanded": isOpen,
onKeyDown: openOnArrowDown,
label: actionLabel,
icon: toolbarIcon
});
},
renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
label: (0, _i18n.__)('Duotone'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
children: (0, _i18n.__)('Create a two-tone color effect without losing your original image.')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DuotonePicker, {
"aria-label": actionLabel,
"aria-describedby": descriptionId,
colorPalette: colorPalette,
duotonePalette: duotonePalette,
disableCustomColors: disableCustomColors,
disableCustomDuotone: disableCustomDuotone,
value: value,
onChange: onChange
})]
})
});
}
var _default = exports.default = DuotoneControl;
//# sourceMappingURL=index.js.map