UNPKG

@wordpress/block-library

Version:
182 lines (163 loc) 6.81 kB
"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 _components = require("@wordpress/components"); var _coreData = require("@wordpress/core-data"); var _icons = require("@wordpress/icons"); var _i18n = require("@wordpress/i18n"); var _htmlEntities = require("@wordpress/html-entities"); var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu")); var _useNavigationEntities = _interopRequireDefault(require("../use-navigation-entities")); /** * WordPress dependencies */ /** * Internal dependencies */ function NavigationMenuSelector(_ref) { let { currentMenuId, onSelectNavigationMenu, onSelectClassicMenu, onCreateNew, actionLabel, createNavigationMenuIsSuccess, createNavigationMenuIsError, toggleProps = {} } = _ref; /* translators: %s: The name of a menu. */ const createActionLabel = (0, _i18n.__)("Create from '%s'"); const [selectorLabel, setSelectorLabel] = (0, _element.useState)(''); const [isPressed, setIsPressed] = (0, _element.useState)(false); const [enableOptions, setEnableOptions] = (0, _element.useState)(false); const [isCreatingMenu, setIsCreatingMenu] = (0, _element.useState)(false); actionLabel = actionLabel || createActionLabel; const { menus: classicMenus } = (0, _useNavigationEntities.default)(); const { navigationMenus, hasResolvedNavigationMenus, isNavigationMenuResolved, canUserCreateNavigationMenu, canSwitchNavigationMenu } = (0, _useNavigationMenu.default)(); const [currentTitle] = (0, _coreData.useEntityProp)('postType', 'wp_navigation', 'title'); const shouldEnableMenuSelector = (canSwitchNavigationMenu || canUserCreateNavigationMenu) && hasResolvedNavigationMenus && !isCreatingMenu; const menuChoices = (0, _element.useMemo)(() => { return (navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus.map(_ref2 => { let { id, title } = _ref2; const label = (0, _htmlEntities.decodeEntities)(title.rendered); if (id === currentMenuId && !isCreatingMenu) { setSelectorLabel(currentTitle); setEnableOptions(shouldEnableMenuSelector); } return { value: id, label, ariaLabel: (0, _i18n.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; (0, _element.useEffect)(() => { if (!hasResolvedNavigationMenus) { setSelectorLabel((0, _i18n.__)('Loading …')); } else if (noMenuSelected || noBlockMenus || menuUnavailable) { setSelectorLabel((0, _i18n.__)('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: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.VisuallyHidden, { as: "span" }, (0, _i18n.__)('Select Menu')), (0, _element.createElement)(_icons.Icon, { icon: isPressed ? _icons.chevronUp : _icons.chevronDown, className: "wp-block-navigation__navigation-selector-button__icon" })), isBusy: !enableOptions, disabled: !enableOptions, __experimentalIsFocusable: true, onClick: () => { setIsPressed(!isPressed); } }; if (!hasNavigationMenus && !hasClassicMenus) { return (0, _element.createElement)(_components.Button, { className: "wp-block-navigation__navigation-selector-button--createnew", isBusy: !enableOptions, disabled: !enableOptions, __experimentalIsFocusable: true, onClick: () => { onCreateNew(); setIsCreatingMenu(true); setSelectorLabel((0, _i18n.__)('Loading …')); setEnableOptions(false); } }, (0, _i18n.__)('Create new menu')); } return (0, _element.createElement)(_components.DropdownMenu, { className: "wp-block-navigation__navigation-selector", label: selectorLabel, text: selectorLabel, icon: null, toggleProps: toggleProps }, _ref3 => { let { onClose } = _ref3; return (0, _element.createElement)(_element.Fragment, null, showNavigationMenus && hasNavigationMenus && (0, _element.createElement)(_components.MenuGroup, { label: (0, _i18n.__)('Menus') }, (0, _element.createElement)(_components.MenuItemsChoice, { value: currentMenuId, onSelect: menuId => { onSelectNavigationMenu(menuId); }, choices: menuChoices })), showClassicMenus && hasClassicMenus && (0, _element.createElement)(_components.MenuGroup, { label: (0, _i18n.__)('Import Classic Menus') }, classicMenus === null || classicMenus === void 0 ? void 0 : classicMenus.map(menu => { const label = (0, _htmlEntities.decodeEntities)(menu.name); return (0, _element.createElement)(_components.MenuItem, { onClick: () => { setSelectorLabel((0, _i18n.__)('Loading …')); setEnableOptions(false); onSelectClassicMenu(menu); onClose(); }, key: menu.id, "aria-label": (0, _i18n.sprintf)(createActionLabel, label) }, label); })), canUserCreateNavigationMenu && (0, _element.createElement)(_components.MenuGroup, { label: (0, _i18n.__)('Tools') }, (0, _element.createElement)(_components.MenuItem, { onClick: () => { onClose(); onCreateNew(); setIsCreatingMenu(true); setSelectorLabel((0, _i18n.__)('Loading …')); setEnableOptions(false); } }, (0, _i18n.__)('Create new menu')))); }); } var _default = NavigationMenuSelector; exports.default = _default; //# sourceMappingURL=navigation-menu-selector.js.map