@wordpress/block-library/build/navigation/edit/placeholder/index.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = NavigationPlaceholder;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _a11y = require("@wordpress/a11y");
var _element = require("@wordpress/element");
var _useNavigationEntities = _interopRequireDefault(require("../../use-navigation-entities"));
var _placeholderPreview = _interopRequireDefault(require("./placeholder-preview"));
var _navigationMenuSelector = _interopRequireDefault(require("../navigation-menu-selector"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function NavigationPlaceholder({
  isSelected,
  currentMenuId,
  clientId,
  canUserCreateNavigationMenus = false,
  isResolvingCanUserCreateNavigationMenus,
  onSelectNavigationMenu,
  onSelectClassicMenu,
  onCreateEmpty
}) {
  const {
    isResolvingMenus,
    hasResolvedMenus
  } = (0, _useNavigationEntities.default)();
  (0, _element.useEffect)(() => {
    if (!isSelected) {
      return;
    }
    if (isResolvingMenus) {
      (0, _a11y.speak)((0, _i18n.__)('Loading navigation block setup options…'));
    }
    if (hasResolvedMenus) {
      (0, _a11y.speak)((0, _i18n.__)('Navigation block setup options ready.'));
    }
  }, [hasResolvedMenus, isResolvingMenus, isSelected]);
  const isResolvingActions = isResolvingMenus && isResolvingCanUserCreateNavigationMenus;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Placeholder, {
      className: "wp-block-navigation-placeholder",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_placeholderPreview.default, {
        isVisible: !isSelected
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "aria-hidden": !isSelected ? true : undefined,
        className: "wp-block-navigation-placeholder__controls",
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "wp-block-navigation-placeholder__actions",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "wp-block-navigation-placeholder__actions__indicator",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
              icon: _icons.navigation
            }), " ", (0, _i18n.__)('Navigation')]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {}), isResolvingActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationMenuSelector.default, {
            currentMenuId: currentMenuId,
            clientId: clientId,
            onSelectNavigationMenu: onSelectNavigationMenu,
            onSelectClassicMenu: onSelectClassicMenu
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {}), canUserCreateNavigationMenus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "tertiary",
            onClick: onCreateEmpty,
            children: (0, _i18n.__)('Start empty')
          })]
        })
      })]
    })
  });
}
//# sourceMappingURL=index.js.map