@wordpress/block-editor/build/components/block-navigation/dropdown.js

Generic block editor.

"use strict";

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

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

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

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

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

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

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

var _data = require("@wordpress/data");

var _icons = require("@wordpress/icons");

var _listView = _interopRequireDefault(require("../list-view"));

var _store = require("../../store");

/**
 * WordPress dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BlockNavigationDropdownToggle({
  isEnabled,
  onToggle,
  isOpen,
  innerRef,
  ...props
}) {
  return (0, _element.createElement)(_components.Button, (0, _extends2.default)({}, props, {
    ref: innerRef,
    icon: _icons.listView,
    "aria-expanded": isOpen,
    "aria-haspopup": "true",
    onClick: isEnabled ? onToggle : undefined
    /* translators: button label text should, if possible, be under 16 characters. */
    ,
    label: (0, _i18n.__)('List view'),
    className: "block-editor-block-navigation",
    "aria-disabled": !isEnabled
  }));
}

function BlockNavigationDropdown({
  isDisabled,
  ...props
}, ref) {
  (0, _deprecated.default)('wp.blockEditor.BlockNavigationDropdown', {
    since: '6.1',
    alternative: 'wp.components.Dropdown and wp.blockEditor.ListView'
  });
  const hasBlocks = (0, _data.useSelect)(select => !!select(_store.store).getBlockCount(), []);
  const isEnabled = hasBlocks && !isDisabled;
  return (0, _element.createElement)(_components.Dropdown, {
    contentClassName: "block-editor-block-navigation__popover",
    popoverProps: {
      placement: 'bottom-start'
    },
    renderToggle: ({
      isOpen,
      onToggle
    }) => (0, _element.createElement)(BlockNavigationDropdownToggle, (0, _extends2.default)({}, props, {
      innerRef: ref,
      isOpen: isOpen,
      onToggle: onToggle,
      isEnabled: isEnabled
    })),
    renderContent: () => (0, _element.createElement)("div", {
      className: "block-editor-block-navigation__container"
    }, (0, _element.createElement)("p", {
      className: "block-editor-block-navigation__label"
    }, (0, _i18n.__)('List view')), (0, _element.createElement)(_listView.default, null))
  });
}

var _default = (0, _element.forwardRef)(BlockNavigationDropdown);

exports.default = _default;
//# sourceMappingURL=dropdown.js.map