@wordpress/block-library/build-module/navigation/edit/navigation-menu-selector.js

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { MenuGroup, MenuItem, MenuItemsChoice, DropdownMenu, Button, VisuallyHidden } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
import { useEffect, useMemo, useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import useNavigationMenu from '../use-navigation-menu';
import useNavigationEntities from '../use-navigation-entities';

function NavigationMenuSelector(_ref) {
  let {
    currentMenuId,
    onSelectNavigationMenu,
    onSelectClassicMenu,
    onCreateNew,
    actionLabel,
    createNavigationMenuIsSuccess,
    createNavigationMenuIsError,
    toggleProps = {}
  } = _ref;

  /* translators: %s: The name of a menu. */
  const createActionLabel = __("Create from '%s'");

  const [selectorLabel, setSelectorLabel] = useState('');
  const [isPressed, setIsPressed] = useState(false);
  const [enableOptions, setEnableOptions] = useState(false);
  const [isCreatingMenu, setIsCreatingMenu] = useState(false);
  actionLabel = actionLabel || createActionLabel;
  const {
    menus: classicMenus
  } = useNavigationEntities();
  const {
    navigationMenus,
    hasResolvedNavigationMenus,
    isNavigationMenuResolved,
    canUserCreateNavigationMenu,
    canSwitchNavigationMenu
  } = useNavigationMenu();
  const [currentTitle] = useEntityProp('postType', 'wp_navigation', 'title');
  const shouldEnableMenuSelector = (canSwitchNavigationMenu || canUserCreateNavigationMenu) && hasResolvedNavigationMenus && !isCreatingMenu;
  const menuChoices = useMemo(() => {
    return (navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus.map(_ref2 => {
      let {
        id,
        title
      } = _ref2;
      const label = decodeEntities(title.rendered);

      if (id === currentMenuId && !isCreatingMenu) {
        setSelectorLabel(currentTitle);
        setEnableOptions(shouldEnableMenuSelector);
      }

      return {
        value: id,
        label,
        ariaLabel: sprintf(actionLabel, label)
      };
    })) || [];
  }, [currentTitle, currentMenuId, navigationMenus, createNavigationMenuIsSuccess, isNavigationMenuResolved, hasResolvedNavigationMenus]);
  const hasNavigationMenus = !!(navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length);
  const hasClassicMenus = !!(classicMenus !== null && classicMenus !== void 0 && classicMenus.length);
  const showNavigationMenus = !!canSwitchNavigationMenu;
  const showClassicMenus = !!canUserCreateNavigationMenu;
  const noMenuSelected = hasNavigationMenus && !currentMenuId;
  const noBlockMenus = !hasNavigationMenus && hasResolvedNavigationMenus;
  const menuUnavailable = hasResolvedNavigationMenus && currentMenuId === null;
  useEffect(() => {
    if (!hasResolvedNavigationMenus) {
      setSelectorLabel(__('Loading …'));
    } else if (noMenuSelected || noBlockMenus || menuUnavailable) {
      setSelectorLabel(__('Select menu'));
      setEnableOptions(shouldEnableMenuSelector);
    }

    if (isCreatingMenu && (createNavigationMenuIsSuccess || createNavigationMenuIsError)) {
      setIsCreatingMenu(false);
    }
  }, [currentMenuId, hasNavigationMenus, hasResolvedNavigationMenus, createNavigationMenuIsSuccess, isNavigationMenuResolved]);
  toggleProps = { ...toggleProps,
    className: 'wp-block-navigation__navigation-selector-button',
    children: createElement(Fragment, null, createElement(VisuallyHidden, {
      as: "span"
    }, __('Select Menu')), createElement(Icon, {
      icon: isPressed ? chevronUp : chevronDown,
      className: "wp-block-navigation__navigation-selector-button__icon"
    })),
    isBusy: !enableOptions,
    disabled: !enableOptions,
    __experimentalIsFocusable: true,
    onClick: () => {
      setIsPressed(!isPressed);
    }
  };

  if (!hasNavigationMenus && !hasClassicMenus) {
    return createElement(Button, {
      className: "wp-block-navigation__navigation-selector-button--createnew",
      isBusy: !enableOptions,
      disabled: !enableOptions,
      __experimentalIsFocusable: true,
      onClick: () => {
        onCreateNew();
        setIsCreatingMenu(true);
        setSelectorLabel(__('Loading …'));
        setEnableOptions(false);
      }
    }, __('Create new menu'));
  }

  return createElement(DropdownMenu, {
    className: "wp-block-navigation__navigation-selector",
    label: selectorLabel,
    text: selectorLabel,
    icon: null,
    toggleProps: toggleProps
  }, _ref3 => {
    let {
      onClose
    } = _ref3;
    return createElement(Fragment, null, showNavigationMenus && hasNavigationMenus && createElement(MenuGroup, {
      label: __('Menus')
    }, createElement(MenuItemsChoice, {
      value: currentMenuId,
      onSelect: menuId => {
        onSelectNavigationMenu(menuId);
      },
      choices: menuChoices
    })), showClassicMenus && hasClassicMenus && createElement(MenuGroup, {
      label: __('Import Classic Menus')
    }, classicMenus === null || classicMenus === void 0 ? void 0 : classicMenus.map(menu => {
      const label = decodeEntities(menu.name);
      return createElement(MenuItem, {
        onClick: () => {
          setSelectorLabel(__('Loading …'));
          setEnableOptions(false);
          onSelectClassicMenu(menu);
          onClose();
        },
        key: menu.id,
        "aria-label": sprintf(createActionLabel, label)
      }, label);
    })), canUserCreateNavigationMenu && createElement(MenuGroup, {
      label: __('Tools')
    }, createElement(MenuItem, {
      onClick: () => {
        onClose();
        onCreateNew();
        setIsCreatingMenu(true);
        setSelectorLabel(__('Loading …'));
        setEnableOptions(false);
      }
    }, __('Create new menu'))));
  });
}

export default NavigationMenuSelector;
//# sourceMappingURL=navigation-menu-selector.js.map