@wordpress/block-editor
Version:
60 lines (58 loc) • 1.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Toolbar button component that, upon a long press, opens a Picker
* to allow selecting from among multiple options.
*
* @param {Object} props Component props.
* @param {Object} props.options Options to pick from.
*/function ToolbarButtonWithOptions({
options
}) {
const picker = (0, _element.useRef)();
function presentPicker() {
if (picker.current) {
picker.current.presentPicker();
}
}
function onValueSelected(selectedValue) {
const selectedOption = options.find(op => op.value === selectedValue);
if (selectedOption) {
selectedOption.onClick();
}
}
if (!options || options.length === 0) {
return null;
}
const firstOption = options[0];
const enablePicker = options.length > 1;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
title: firstOption.title,
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: firstOption.icon
}),
onClick: firstOption.onClick,
onLongPress: enablePicker ? presentPicker : undefined
})
}), enablePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Picker, {
ref: picker,
options: options,
onChange: onValueSelected,
hideCancelButton: true
})]
});
}
var _default = exports.default = ToolbarButtonWithOptions;
//# sourceMappingURL=toolbar-button-with-options.native.js.map