@wordpress/block-library
Version:
Block library for the WordPress editor.
153 lines (150 loc) • 6.21 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _htmlEntities = require("@wordpress/html-entities");
var _element = require("@wordpress/element");
var _coreData = require("@wordpress/core-data");
var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu"));
var _useNavigationEntities = _interopRequireDefault(require("../use-navigation-entities"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function buildMenuLabel(title, id, status) {
if (!title) {
/* translators: %s: the index of the menu in the list of menus. */
return (0, _i18n.sprintf)((0, _i18n.__)('(no title %s)'), id);
}
if (status === 'publish') {
return (0, _htmlEntities.decodeEntities)(title);
}
return (0, _i18n.sprintf)(
// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
(0, _i18n.__)('%1$s (%2$s)'), (0, _htmlEntities.decodeEntities)(title), status);
}
function NavigationMenuSelector({
currentMenuId,
onSelectNavigationMenu,
onSelectClassicMenu,
onCreateNew,
actionLabel,
createNavigationMenuIsSuccess,
createNavigationMenuIsError
}) {
/* translators: %s: The name of a menu. */
const createActionLabel = (0, _i18n.__)("Create from '%s'");
const [isUpdatingMenuRef, setIsUpdatingMenuRef] = (0, _element.useState)(false);
actionLabel = actionLabel || createActionLabel;
const {
menus: classicMenus
} = (0, _useNavigationEntities.default)();
const {
navigationMenus,
isResolvingNavigationMenus,
hasResolvedNavigationMenus,
canUserCreateNavigationMenus,
canSwitchNavigationMenu,
isNavigationMenuMissing
} = (0, _useNavigationMenu.default)(currentMenuId);
const [currentTitle] = (0, _coreData.useEntityProp)('postType', 'wp_navigation', 'title');
const menuChoices = (0, _element.useMemo)(() => {
return navigationMenus?.map(({
id,
title,
status
}, index) => {
const label = buildMenuLabel(title?.rendered, index + 1, status);
return {
value: id,
label,
ariaLabel: (0, _i18n.sprintf)(actionLabel, label),
disabled: isUpdatingMenuRef || isResolvingNavigationMenus || !hasResolvedNavigationMenus
};
}) || [];
}, [navigationMenus, actionLabel, isResolvingNavigationMenus, hasResolvedNavigationMenus, isUpdatingMenuRef]);
const hasNavigationMenus = !!navigationMenus?.length;
const hasClassicMenus = !!classicMenus?.length;
const showNavigationMenus = !!canSwitchNavigationMenu;
const showClassicMenus = !!canUserCreateNavigationMenus;
const noMenuSelected = hasNavigationMenus && !currentMenuId;
const noBlockMenus = !hasNavigationMenus && hasResolvedNavigationMenus;
const menuUnavailable = hasResolvedNavigationMenus && currentMenuId === null;
const navMenuHasBeenDeleted = currentMenuId && isNavigationMenuMissing;
let selectorLabel = '';
if (isResolvingNavigationMenus) {
selectorLabel = (0, _i18n.__)('Loading…');
} else if (noMenuSelected || noBlockMenus || menuUnavailable || navMenuHasBeenDeleted) {
// Note: classic Menus may be available.
selectorLabel = (0, _i18n.__)('Choose or create a Navigation Menu');
} else {
// Current Menu's title.
selectorLabel = currentTitle;
}
(0, _element.useEffect)(() => {
if (isUpdatingMenuRef && (createNavigationMenuIsSuccess || createNavigationMenuIsError)) {
setIsUpdatingMenuRef(false);
}
}, [hasResolvedNavigationMenus, createNavigationMenuIsSuccess, canUserCreateNavigationMenus, createNavigationMenuIsError, isUpdatingMenuRef, menuUnavailable, noBlockMenus, noMenuSelected]);
const NavigationMenuSelectorDropdown = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
label: selectorLabel,
icon: _icons.moreVertical,
toggleProps: {
size: 'small'
},
children: ({
onClose
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [showNavigationMenus && hasNavigationMenus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
label: (0, _i18n.__)('Menus'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItemsChoice, {
value: currentMenuId,
onSelect: menuId => {
onSelectNavigationMenu(menuId);
onClose();
},
choices: menuChoices
})
}), showClassicMenus && hasClassicMenus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
label: (0, _i18n.__)('Import Classic Menus'),
children: classicMenus?.map(menu => {
const label = (0, _htmlEntities.decodeEntities)(menu.name);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
onClick: async () => {
setIsUpdatingMenuRef(true);
await onSelectClassicMenu(menu);
setIsUpdatingMenuRef(false);
onClose();
},
"aria-label": (0, _i18n.sprintf)(createActionLabel, label),
disabled: isUpdatingMenuRef || isResolvingNavigationMenus || !hasResolvedNavigationMenus,
children: label
}, menu.id);
})
}), canUserCreateNavigationMenus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
label: (0, _i18n.__)('Tools'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
onClick: async () => {
setIsUpdatingMenuRef(true);
await onCreateNew();
setIsUpdatingMenuRef(false);
onClose();
},
disabled: isUpdatingMenuRef || isResolvingNavigationMenus || !hasResolvedNavigationMenus,
children: (0, _i18n.__)('Create new Menu')
})
})]
})
});
return NavigationMenuSelectorDropdown;
}
var _default = exports.default = NavigationMenuSelector;
//# sourceMappingURL=navigation-menu-selector.js.map