@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 _element = require("@wordpress/element");

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

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

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

var _a11y = require("@wordpress/a11y");

var _useNavigationEntities = _interopRequireDefault(require("../../use-navigation-entities"));

var _placeholderPreview = _interopRequireDefault(require("./placeholder-preview"));

var _navigationMenuSelector = _interopRequireDefault(require("../navigation-menu-selector"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function NavigationPlaceholder(_ref) {
  let {
    isSelected,
    currentMenuId,
    clientId,
    canUserCreateNavigationMenu = false,
    isResolvingCanUserCreateNavigationMenu,
    onSelectNavigationMenu,
    onSelectClassicMenu,
    onCreateEmpty
  } = _ref;
  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.'));
    }
  }, [isResolvingMenus, isSelected]);
  const isResolvingActions = isResolvingMenus && isResolvingCanUserCreateNavigationMenu;
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Placeholder, {
    className: "wp-block-navigation-placeholder"
  }, (0, _element.createElement)(_placeholderPreview.default, {
    isVisible: !isSelected
  }), (0, _element.createElement)("div", {
    "aria-hidden": !isSelected ? true : undefined,
    className: "wp-block-navigation-placeholder__controls"
  }, (0, _element.createElement)("div", {
    className: "wp-block-navigation-placeholder__actions"
  }, (0, _element.createElement)("div", {
    className: "wp-block-navigation-placeholder__actions__indicator"
  }, (0, _element.createElement)(_icons.Icon, {
    icon: _icons.navigation
  }), " ", (0, _i18n.__)('Navigation')), (0, _element.createElement)("hr", null), isResolvingActions && (0, _element.createElement)(_components.Spinner, null), (0, _element.createElement)(_navigationMenuSelector.default, {
    currentMenuId: currentMenuId,
    clientId: clientId,
    onSelectNavigationMenu: onSelectNavigationMenu,
    onSelectClassicMenu: onSelectClassicMenu,
    toggleProps: {
      variant: 'tertiary',
      iconPosition: 'right',
      className: 'wp-block-navigation-placeholder__actions__dropdown'
    }
  }), (0, _element.createElement)("hr", null), canUserCreateNavigationMenu && (0, _element.createElement)(_components.Button, {
    variant: "tertiary",
    onClick: onCreateEmpty
  }, (0, _i18n.__)('Start empty'))))));
}
//# sourceMappingURL=index.js.map