@wordpress/block-editor
Version:
68 lines (62 loc) • 2.04 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = HeadingLevelDropdown;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _headingLevelIcon = _interopRequireDefault(require("./heading-level-icon"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
/** @typedef {import('react').ComponentType} ComponentType */
/**
* HeadingLevelDropdown props.
*
* @typedef WPHeadingLevelDropdownProps
*
* @property {number} value The chosen heading level.
* @property {number[]} options An array of supported heading levels.
* @property {()=>number} onChange Function called with
* the selected value changes.
*/
/**
* Dropdown for selecting a heading level (1 through 6).
*
* @param {WPHeadingLevelDropdownProps} props Component props.
*
* @return {ComponentType} The toolbar.
*/
function HeadingLevelDropdown({
options = HEADING_LEVELS,
value,
onChange
}) {
const createLevelControl = (targetLevel, currentLevel, onChangeCallback) => {
const isActive = targetLevel === currentLevel;
return {
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_headingLevelIcon.default, {
level: targetLevel,
isPressed: isActive
}),
// translators: %d: heading level e.g: "1", "2", "3"
title: (0, _i18n.sprintf)((0, _i18n.__)('Heading %d'), targetLevel),
isActive,
onClick: () => onChangeCallback(targetLevel)
};
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_headingLevelIcon.default, {
level: value
}),
controls: options.map(index => createLevelControl(index, value, onChange)),
label: (0, _i18n.__)('Change level')
});
}
//# sourceMappingURL=index.native.js.map