@wordpress/block-library/build/heading/heading-level-dropdown.js

Block library for the WordPress editor.

"use strict";

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

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

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

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

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

var _headingLevelIcon = _interopRequireDefault(require("./heading-level-icon"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
const POPOVER_PROPS = {
  className: 'block-library-heading-level-dropdown'
};
/** @typedef {import('@wordpress/element').WPComponent} WPComponent */

/**
 * HeadingLevelDropdown props.
 *
 * @typedef WPHeadingLevelDropdownProps
 *
 * @property {number}                 selectedLevel The chosen heading level.
 * @property {(newValue:number)=>any} onChange      Callback to run when
 *                                                  toolbar value is changed.
 */

/**
 * Dropdown for selecting a heading level (1 through 6).
 *
 * @param {WPHeadingLevelDropdownProps} props Component props.
 *
 * @return {WPComponent} The toolbar.
 */

function HeadingLevelDropdown(_ref) {
  let {
    selectedLevel,
    onChange
  } = _ref;
  return (0, _element.createElement)(_components.ToolbarDropdownMenu, {
    popoverProps: POPOVER_PROPS,
    icon: (0, _element.createElement)(_headingLevelIcon.default, {
      level: selectedLevel
    }),
    label: (0, _i18n.__)('Change heading level'),
    controls: HEADING_LEVELS.map(targetLevel => {
      {
        const isActive = targetLevel === selectedLevel;
        return {
          icon: (0, _element.createElement)(_headingLevelIcon.default, {
            level: targetLevel,
            isPressed: isActive
          }),
          label: (0, _i18n.sprintf)( // translators: %s: heading level e.g: "1", "2", "3"
          (0, _i18n.__)('Heading %d'), targetLevel),
          isActive,

          onClick() {
            onChange(targetLevel);
          },

          role: 'menuitemradio'
        };
      }
    })
  });
}
//# sourceMappingURL=heading-level-dropdown.js.map