173 lines
6.3 KiB
JavaScript
173 lines
6.3 KiB
JavaScript
'use strict';
|
|
|
|
var jsxRuntime = require('react/jsx-runtime');
|
|
var React = require('react');
|
|
var strapiAdmin = require('@strapi/admin/strapi-admin');
|
|
var designSystem = require('@strapi/design-system');
|
|
var qs = require('qs');
|
|
var reactIntl = require('react-intl');
|
|
var reactRouterDom = require('react-router-dom');
|
|
var styledComponents = require('styled-components');
|
|
var useContentTypeSchema = require('../hooks/useContentTypeSchema.js');
|
|
var hooks = require('../modules/hooks.js');
|
|
var translations = require('../utils/translations.js');
|
|
|
|
function _interopNamespaceDefault(e) {
|
|
var n = Object.create(null);
|
|
if (e) {
|
|
Object.keys(e).forEach(function (k) {
|
|
if (k !== 'default') {
|
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
Object.defineProperty(n, k, d.get ? d : {
|
|
enumerable: true,
|
|
get: function () { return e[k]; }
|
|
});
|
|
}
|
|
});
|
|
}
|
|
n.default = e;
|
|
return Object.freeze(n);
|
|
}
|
|
|
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
|
|
const SubNavLinkCustom = styledComponents.styled(designSystem.SubNavLink)`
|
|
div {
|
|
width: inherit;
|
|
span:nth-child(2) {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: inherit;
|
|
}
|
|
}
|
|
`;
|
|
const LeftMenu = ()=>{
|
|
const [search, setSearch] = React__namespace.useState('');
|
|
const [{ query }] = strapiAdmin.useQueryParams();
|
|
const { formatMessage, locale } = reactIntl.useIntl();
|
|
const collectionTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
|
|
const singleTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
|
|
const { schemas } = useContentTypeSchema.useContentTypeSchema();
|
|
const { startsWith } = designSystem.useFilter(locale, {
|
|
sensitivity: 'base'
|
|
});
|
|
const formatter = designSystem.useCollator(locale, {
|
|
sensitivity: 'base'
|
|
});
|
|
const menu = React__namespace.useMemo(()=>[
|
|
{
|
|
id: 'collectionTypes',
|
|
title: formatMessage({
|
|
id: translations.getTranslation('components.LeftMenu.collection-types'),
|
|
defaultMessage: 'Collection Types'
|
|
}),
|
|
searchable: true,
|
|
links: collectionTypeLinks
|
|
},
|
|
{
|
|
id: 'singleTypes',
|
|
title: formatMessage({
|
|
id: translations.getTranslation('components.LeftMenu.single-types'),
|
|
defaultMessage: 'Single Types'
|
|
}),
|
|
searchable: true,
|
|
links: singleTypeLinks
|
|
}
|
|
].map((section)=>({
|
|
...section,
|
|
links: section.links/**
|
|
* Filter by the search value
|
|
*/ .filter((link)=>startsWith(link.title, search))/**
|
|
* Sort correctly using the language
|
|
*/ .sort((a, b)=>formatter.compare(a.title, b.title))/**
|
|
* Apply the formated strings to the links from react-intl
|
|
*/ .map((link)=>{
|
|
return {
|
|
...link,
|
|
title: formatMessage({
|
|
id: link.title,
|
|
defaultMessage: link.title
|
|
})
|
|
};
|
|
})
|
|
})), [
|
|
collectionTypeLinks,
|
|
search,
|
|
singleTypeLinks,
|
|
startsWith,
|
|
formatMessage,
|
|
formatter
|
|
]);
|
|
const handleClear = ()=>{
|
|
setSearch('');
|
|
};
|
|
const handleChangeSearch = ({ target: { value } })=>{
|
|
setSearch(value);
|
|
};
|
|
const label = formatMessage({
|
|
id: translations.getTranslation('header.name'),
|
|
defaultMessage: 'Content Manager'
|
|
});
|
|
const getPluginsParamsForLink = (link)=>{
|
|
const schema = schemas.find((schema)=>schema.uid === link.uid);
|
|
const isI18nEnabled = Boolean(schema?.pluginOptions?.i18n?.localized);
|
|
// The search params have the i18n plugin
|
|
if (query.plugins && 'i18n' in query.plugins) {
|
|
// Prepare removal of i18n from the plugins search params
|
|
const { i18n, ...restPlugins } = query.plugins;
|
|
// i18n is not enabled, remove it from the plugins search params
|
|
if (!isI18nEnabled) {
|
|
return restPlugins;
|
|
}
|
|
// i18n is enabled, put the plugins search params back together
|
|
return {
|
|
i18n,
|
|
...restPlugins
|
|
};
|
|
}
|
|
return query.plugins;
|
|
};
|
|
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SubNav, {
|
|
"aria-label": label,
|
|
children: [
|
|
/*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavHeader, {
|
|
label: label,
|
|
searchable: true,
|
|
value: search,
|
|
onChange: handleChangeSearch,
|
|
onClear: handleClear,
|
|
searchLabel: formatMessage({
|
|
id: 'content-manager.components.LeftMenu.Search.label',
|
|
defaultMessage: 'Search for a content type'
|
|
})
|
|
}),
|
|
/*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavSections, {
|
|
children: menu.map((section)=>{
|
|
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavSection, {
|
|
label: section.title,
|
|
badgeLabel: section.links.length.toString(),
|
|
children: section.links.map((link)=>{
|
|
return /*#__PURE__*/ jsxRuntime.jsx(SubNavLinkCustom, {
|
|
tag: reactRouterDom.NavLink,
|
|
to: {
|
|
pathname: link.to,
|
|
search: qs.stringify({
|
|
...qs.parse(link.search ?? ''),
|
|
plugins: getPluginsParamsForLink(link)
|
|
})
|
|
},
|
|
width: "100%",
|
|
children: link.title
|
|
}, link.uid);
|
|
})
|
|
}, section.id);
|
|
})
|
|
})
|
|
]
|
|
});
|
|
};
|
|
|
|
exports.LeftMenu = LeftMenu;
|
|
//# sourceMappingURL=LeftMenu.js.map
|