@strapi/content-manager 5.34.0 → 5.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admin/components/ActionsDrawer.js +208 -0
- package/dist/admin/components/ActionsDrawer.js.map +1 -0
- package/dist/admin/components/ActionsDrawer.mjs +186 -0
- package/dist/admin/components/ActionsDrawer.mjs.map +1 -0
- package/dist/admin/components/LeftMenu.js +1 -28
- package/dist/admin/components/LeftMenu.js.map +1 -1
- package/dist/admin/components/LeftMenu.mjs +2 -29
- package/dist/admin/components/LeftMenu.mjs.map +1 -1
- package/dist/admin/history/components/VersionContent.js +96 -68
- package/dist/admin/history/components/VersionContent.js.map +1 -1
- package/dist/admin/history/components/VersionContent.mjs +98 -70
- package/dist/admin/history/components/VersionContent.mjs.map +1 -1
- package/dist/admin/history/components/VersionsList.js +139 -54
- package/dist/admin/history/components/VersionsList.js.map +1 -1
- package/dist/admin/history/components/VersionsList.mjs +141 -56
- package/dist/admin/history/components/VersionsList.mjs.map +1 -1
- package/dist/admin/history/pages/History.js +27 -9
- package/dist/admin/history/pages/History.js.map +1 -1
- package/dist/admin/history/pages/History.mjs +28 -10
- package/dist/admin/history/pages/History.mjs.map +1 -1
- package/dist/admin/hooks/useDocument.js +1 -1
- package/dist/admin/hooks/useDocument.js.map +1 -1
- package/dist/admin/hooks/useDocument.mjs +1 -1
- package/dist/admin/hooks/useDocument.mjs.map +1 -1
- package/dist/admin/hooks/usePersistentQueryParams.js +56 -0
- package/dist/admin/hooks/usePersistentQueryParams.js.map +1 -0
- package/dist/admin/hooks/usePersistentQueryParams.mjs +54 -0
- package/dist/admin/hooks/usePersistentQueryParams.mjs.map +1 -0
- package/dist/admin/pages/EditView/EditViewPage.js +107 -71
- package/dist/admin/pages/EditView/EditViewPage.js.map +1 -1
- package/dist/admin/pages/EditView/EditViewPage.mjs +109 -73
- package/dist/admin/pages/EditView/EditViewPage.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/DocumentActions.js +48 -40
- package/dist/admin/pages/EditView/components/DocumentActions.js.map +1 -1
- package/dist/admin/pages/EditView/components/DocumentActions.mjs +50 -42
- package/dist/admin/pages/EditView/components/DocumentActions.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/EditorToolbarObserver.js +63 -31
- package/dist/admin/pages/EditView/components/EditorToolbarObserver.js.map +1 -1
- package/dist/admin/pages/EditView/components/EditorToolbarObserver.mjs +64 -32
- package/dist/admin/pages/EditView/components/EditorToolbarObserver.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Link.js +20 -5
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Link.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Link.mjs +20 -5
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Link.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.js +22 -12
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.mjs +22 -12
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.js +6 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs +7 -2
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.js +151 -10
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.mjs +152 -11
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Modifiers.js +52 -5
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Modifiers.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Modifiers.mjs +53 -6
- package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Modifiers.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js +10 -6
- package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.mjs +11 -7
- package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.js +8 -2
- package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.mjs +8 -2
- package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.js +9 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.mjs +9 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js +7 -2
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs +7 -2
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.js +30 -11
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.mjs +31 -12
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.js +4 -4
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs +4 -4
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/Field.js +4 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/Field.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/Field.mjs +4 -1
- package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/Field.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Editor.js +6 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Editor.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Editor.mjs +6 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Editor.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.js +1 -0
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs +1 -0
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Field.js +21 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Field.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Field.mjs +24 -4
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Field.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.js +2 -2
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.mjs +2 -2
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygFooter.js +4 -0
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygFooter.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygFooter.mjs +4 -0
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygFooter.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygNav.js +30 -13
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygNav.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygNav.mjs +32 -16
- package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygNav.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/FormLayout.js +6 -9
- package/dist/admin/pages/EditView/components/FormLayout.js.map +1 -1
- package/dist/admin/pages/EditView/components/FormLayout.mjs +6 -9
- package/dist/admin/pages/EditView/components/FormLayout.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/Header.js +2 -0
- package/dist/admin/pages/EditView/components/Header.js.map +1 -1
- package/dist/admin/pages/EditView/components/Header.mjs +2 -0
- package/dist/admin/pages/EditView/components/Header.mjs.map +1 -1
- package/dist/admin/pages/EditView/components/Panels.js +67 -15
- package/dist/admin/pages/EditView/components/Panels.js.map +1 -1
- package/dist/admin/pages/EditView/components/Panels.mjs +67 -18
- package/dist/admin/pages/EditView/components/Panels.mjs.map +1 -1
- package/dist/admin/pages/ListView/ListViewPage.js +52 -20
- package/dist/admin/pages/ListView/ListViewPage.js.map +1 -1
- package/dist/admin/pages/ListView/ListViewPage.mjs +53 -21
- package/dist/admin/pages/ListView/ListViewPage.mjs.map +1 -1
- package/dist/admin/preview/index.js +9 -3
- package/dist/admin/preview/index.js.map +1 -1
- package/dist/admin/preview/index.mjs +9 -3
- package/dist/admin/preview/index.mjs.map +1 -1
- package/dist/admin/src/components/ActionsDrawer.d.ts +35 -0
- package/dist/admin/src/hooks/usePersistentQueryParams.d.ts +5 -0
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygNav.d.ts +7 -2
- package/dist/admin/src/pages/EditView/components/Panels.d.ts +14 -2
- package/dist/admin/translations/en.json.js +5 -1
- package/dist/admin/translations/en.json.js.map +1 -1
- package/dist/admin/translations/en.json.mjs +5 -1
- package/dist/admin/translations/en.json.mjs.map +1 -1
- package/dist/admin/translations/es.json.js +3 -1
- package/dist/admin/translations/es.json.js.map +1 -1
- package/dist/admin/translations/es.json.mjs +3 -1
- package/dist/admin/translations/es.json.mjs.map +1 -1
- package/dist/admin/translations/fr.json.js +3 -1
- package/dist/admin/translations/fr.json.js.map +1 -1
- package/dist/admin/translations/fr.json.mjs +3 -1
- package/dist/admin/translations/fr.json.mjs.map +1 -1
- package/dist/server/preview/services/preview.js +1 -1
- package/dist/server/preview/services/preview.js.map +1 -1
- package/dist/server/preview/services/preview.mjs +1 -1
- package/dist/server/preview/services/preview.mjs.map +1 -1
- package/dist/server/src/preview/services/index.d.ts +1 -1
- package/dist/server/src/preview/utils.d.ts +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var strapiAdmin = require('@strapi/admin/strapi-admin');
|
|
6
|
+
var designSystem = require('@strapi/design-system');
|
|
7
|
+
var Icons = require('@strapi/icons');
|
|
8
|
+
var reactIntl = require('react-intl');
|
|
9
|
+
var styledComponents = require('styled-components');
|
|
10
|
+
|
|
11
|
+
function _interopNamespaceDefault(e) {
|
|
12
|
+
var n = Object.create(null);
|
|
13
|
+
if (e) {
|
|
14
|
+
Object.keys(e).forEach(function (k) {
|
|
15
|
+
if (k !== 'default') {
|
|
16
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
17
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return e[k]; }
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
n.default = e;
|
|
25
|
+
return Object.freeze(n);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
29
|
+
|
|
30
|
+
const [ActionsDrawerProvider, useActionsDrawer] = strapiAdmin.createContext('ActionsDrawer', null);
|
|
31
|
+
/* -------------------------------------------------------------------------------------------------
|
|
32
|
+
* Styled Components
|
|
33
|
+
* -----------------------------------------------------------------------------------------------*/ const DrawerContainer = styledComponents.styled(designSystem.Portal)`
|
|
34
|
+
position: fixed;
|
|
35
|
+
left: 0;
|
|
36
|
+
right: 0;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
z-index: ${({ $isOpen })=>$isOpen ? 4 : 2};
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
align-items: stretch;
|
|
42
|
+
justify-content: flex-end;
|
|
43
|
+
|
|
44
|
+
${({ theme })=>theme.breakpoints.medium} {
|
|
45
|
+
z-index: 2;
|
|
46
|
+
left: ${({ $hasSideNav })=>$hasSideNav ? strapiAdmin.WIDTH_SIDE_NAVIGATION : 0};
|
|
47
|
+
}
|
|
48
|
+
`;
|
|
49
|
+
const DrawerOverlay = styledComponents.styled(designSystem.Box)`
|
|
50
|
+
position: fixed;
|
|
51
|
+
left: 0;
|
|
52
|
+
top: 0;
|
|
53
|
+
right: 0;
|
|
54
|
+
bottom: 0;
|
|
55
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
56
|
+
transition: opacity ${(props)=>props.theme.motion.timings['200']}
|
|
57
|
+
${(props)=>props.theme.motion.easings.easeInOutQuad};
|
|
58
|
+
opacity: ${({ $isOpen })=>$isOpen ? 1 : 0};
|
|
59
|
+
pointer-events: ${({ $isOpen })=>$isOpen ? 'auto' : 'none'};
|
|
60
|
+
|
|
61
|
+
${({ theme })=>theme.breakpoints.medium} {
|
|
62
|
+
left: ${({ $hasSideNav })=>$hasSideNav ? strapiAdmin.WIDTH_SIDE_NAVIGATION : 0};
|
|
63
|
+
}
|
|
64
|
+
`;
|
|
65
|
+
const ToggleButton = styledComponents.styled(designSystem.IconButton)`
|
|
66
|
+
padding: 0;
|
|
67
|
+
border: none;
|
|
68
|
+
background: ${({ theme })=>theme.colors.neutral200};
|
|
69
|
+
width: 3.2rem;
|
|
70
|
+
height: 3.2rem;
|
|
71
|
+
border-radius: 1.6rem;
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
`;
|
|
76
|
+
const DrawerContent = styledComponents.styled(designSystem.Flex)`
|
|
77
|
+
flex-direction: column;
|
|
78
|
+
align-items: stretch;
|
|
79
|
+
position: relative;
|
|
80
|
+
z-index: 1;
|
|
81
|
+
pointer-events: auto;
|
|
82
|
+
`;
|
|
83
|
+
const DrawerContentInner = styledComponents.styled(designSystem.ScrollArea)`
|
|
84
|
+
max-height: ${({ $isOpen })=>$isOpen ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)
|
|
85
|
+
: '0'};
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
transition: max-height ${(props)=>props.theme.motion.timings['200']}
|
|
88
|
+
${(props)=>props.theme.motion.easings.easeInOutQuad};
|
|
89
|
+
z-index: 1;
|
|
90
|
+
pointer-events: auto;
|
|
91
|
+
`;
|
|
92
|
+
const Root = ({ children, hasContent = false, hasSideNav = false })=>{
|
|
93
|
+
const [isOpen, setIsOpen] = React__namespace.useState(false);
|
|
94
|
+
// Close drawer when there's no content
|
|
95
|
+
React__namespace.useEffect(()=>{
|
|
96
|
+
if (!hasContent) {
|
|
97
|
+
setIsOpen(false);
|
|
98
|
+
}
|
|
99
|
+
}, [
|
|
100
|
+
hasContent
|
|
101
|
+
]);
|
|
102
|
+
return /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawerProvider, {
|
|
103
|
+
isOpen: isOpen,
|
|
104
|
+
setIsOpen: setIsOpen,
|
|
105
|
+
hasContent: hasContent,
|
|
106
|
+
hasSideNav: hasSideNav,
|
|
107
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContainer, {
|
|
108
|
+
$hasSideNav: hasSideNav,
|
|
109
|
+
$isOpen: isOpen,
|
|
110
|
+
children: children
|
|
111
|
+
})
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
/* -------------------------------------------------------------------------------------------------
|
|
115
|
+
* Overlay
|
|
116
|
+
* -----------------------------------------------------------------------------------------------*/ const Overlay = ()=>{
|
|
117
|
+
const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s)=>s, false);
|
|
118
|
+
const isOpen = ctx?.isOpen ?? false;
|
|
119
|
+
const hasContent = ctx?.hasContent ?? false;
|
|
120
|
+
const hasSideNav = ctx?.hasSideNav ?? false;
|
|
121
|
+
const setIsOpen = ctx?.setIsOpen;
|
|
122
|
+
if (!hasContent) {
|
|
123
|
+
return null;
|
|
124
|
+
}
|
|
125
|
+
return /*#__PURE__*/ jsxRuntime.jsx(DrawerOverlay, {
|
|
126
|
+
$isOpen: isOpen,
|
|
127
|
+
$hasSideNav: hasSideNav,
|
|
128
|
+
onClick: ()=>setIsOpen?.(false),
|
|
129
|
+
"data-testid": "actions-drawer-overlay"
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
const Header = ({ children })=>{
|
|
133
|
+
const ctx = useActionsDrawer('ActionsDrawer.Header', (s)=>s, false);
|
|
134
|
+
const isOpen = ctx?.isOpen ?? false;
|
|
135
|
+
const hasContent = ctx?.hasContent ?? false;
|
|
136
|
+
const setIsOpen = ctx?.setIsOpen;
|
|
137
|
+
const { formatMessage } = reactIntl.useIntl();
|
|
138
|
+
const toggleOpen = ()=>{
|
|
139
|
+
setIsOpen?.((prev)=>!prev);
|
|
140
|
+
};
|
|
141
|
+
return /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
|
|
142
|
+
background: "neutral0",
|
|
143
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
|
|
144
|
+
paddingTop: 3,
|
|
145
|
+
paddingBottom: 3,
|
|
146
|
+
paddingLeft: 4,
|
|
147
|
+
paddingRight: 4,
|
|
148
|
+
gap: 3,
|
|
149
|
+
borderStyle: "solid",
|
|
150
|
+
borderWidth: isOpen ? '1px 0' : '1px 0 0 0',
|
|
151
|
+
borderColor: "neutral150",
|
|
152
|
+
children: [
|
|
153
|
+
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
|
|
154
|
+
flex: 1,
|
|
155
|
+
gap: 2,
|
|
156
|
+
alignItems: "center",
|
|
157
|
+
overflow: "hidden",
|
|
158
|
+
children: children
|
|
159
|
+
}),
|
|
160
|
+
hasContent && /*#__PURE__*/ jsxRuntime.jsx(ToggleButton, {
|
|
161
|
+
onClick: toggleOpen,
|
|
162
|
+
label: isOpen ? formatMessage({
|
|
163
|
+
id: 'content-manager.actions-drawer.close',
|
|
164
|
+
defaultMessage: 'Close more actions'
|
|
165
|
+
}) : formatMessage({
|
|
166
|
+
id: 'content-manager.actions-drawer.open',
|
|
167
|
+
defaultMessage: 'Open more actions'
|
|
168
|
+
}),
|
|
169
|
+
children: isOpen ? /*#__PURE__*/ jsxRuntime.jsx(Icons.CaretUp, {
|
|
170
|
+
fill: "neutral600"
|
|
171
|
+
}) : /*#__PURE__*/ jsxRuntime.jsx(Icons.CaretDown, {
|
|
172
|
+
fill: "neutral600"
|
|
173
|
+
})
|
|
174
|
+
})
|
|
175
|
+
]
|
|
176
|
+
})
|
|
177
|
+
});
|
|
178
|
+
};
|
|
179
|
+
const Content = ({ children })=>{
|
|
180
|
+
const ctx = useActionsDrawer('ActionsDrawer.Content', (s)=>s, false);
|
|
181
|
+
const isOpen = ctx?.isOpen ?? false;
|
|
182
|
+
return /*#__PURE__*/ jsxRuntime.jsx(DrawerContentInner, {
|
|
183
|
+
$isOpen: isOpen,
|
|
184
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
|
|
185
|
+
direction: "column",
|
|
186
|
+
alignItems: "stretch",
|
|
187
|
+
justifyContent: "flex-start",
|
|
188
|
+
padding: {
|
|
189
|
+
initial: 4,
|
|
190
|
+
large: 0
|
|
191
|
+
},
|
|
192
|
+
background: "neutral0",
|
|
193
|
+
children: children
|
|
194
|
+
})
|
|
195
|
+
});
|
|
196
|
+
};
|
|
197
|
+
/* -------------------------------------------------------------------------------------------------
|
|
198
|
+
* ActionsDrawer
|
|
199
|
+
* -----------------------------------------------------------------------------------------------*/ const ActionsDrawer = {
|
|
200
|
+
Root,
|
|
201
|
+
Overlay,
|
|
202
|
+
Header,
|
|
203
|
+
Content
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
exports.ActionsDrawer = ActionsDrawer;
|
|
207
|
+
exports.useActionsDrawer = useActionsDrawer;
|
|
208
|
+
//# sourceMappingURL=ActionsDrawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActionsDrawer.js","sources":["../../../admin/src/components/ActionsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { WIDTH_SIDE_NAVIGATION, createContext } from '@strapi/admin/strapi-admin';\nimport { Portal, Flex, Box, ScrollArea, IconButton } from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/**\n * ActionsDrawer is a component used in the content manager edit view page and content history page.\n * It's a sticky banner that can expand to reveal more actions. It's used only in mobile and tablet.\n *\n * A similar component is currently in development in the design-system but it's not ready yet.\n * Using the Panels for the edit view page brought some complexity and for the moment, we decided to go with this custom implementation.\n *\n * @TODO: Replace this component with the one in the design-system when it's ready.\n */\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ActionsDrawerContextValue {\n isOpen: boolean;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n hasContent: boolean;\n hasSideNav: boolean;\n}\n\nconst [ActionsDrawerProvider, useActionsDrawer] = createContext<ActionsDrawerContextValue | null>(\n 'ActionsDrawer',\n null\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Styled Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DrawerContainer = styled(Portal)<{ $hasSideNav: boolean; $isOpen: boolean }>`\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${({ $isOpen }) => ($isOpen ? 4 : 2)};\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-end;\n\n ${({ theme }) => theme.breakpoints.medium} {\n z-index: 2;\n left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n }\n`;\n\nconst DrawerOverlay = styled(Box)<{ $isOpen: boolean; $hasSideNav: boolean }>`\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n transition: opacity ${(props) => props.theme.motion.timings['200']}\n ${(props) => props.theme.motion.easings.easeInOutQuad};\n opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n\n ${({ theme }) => theme.breakpoints.medium} {\n left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n }\n`;\n\nconst ToggleButton = styled(IconButton)`\n padding: 0;\n border: none;\n background: ${({ theme }) => theme.colors.neutral200};\n width: 3.2rem;\n height: 3.2rem;\n border-radius: 1.6rem;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst DrawerContent = styled(Flex)`\n flex-direction: column;\n align-items: stretch;\n position: relative;\n z-index: 1;\n pointer-events: auto;\n`;\n\nconst DrawerContentInner = styled(ScrollArea)<{ $isOpen: boolean }>`\n max-height: ${({ $isOpen }) =>\n $isOpen\n ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)\n : '0'};\n overflow: hidden;\n transition: max-height ${(props) => props.theme.motion.timings['200']}\n ${(props) => props.theme.motion.easings.easeInOutQuad};\n z-index: 1;\n pointer-events: auto;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n children: React.ReactNode;\n hasContent?: boolean;\n hasSideNav?: boolean;\n}\n\nconst Root = ({ children, hasContent = false, hasSideNav = false }: RootProps) => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n // Close drawer when there's no content\n React.useEffect(() => {\n if (!hasContent) {\n setIsOpen(false);\n }\n }, [hasContent]);\n\n return (\n <ActionsDrawerProvider\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n hasContent={hasContent}\n hasSideNav={hasSideNav}\n >\n <DrawerContainer $hasSideNav={hasSideNav} $isOpen={isOpen}>\n {children}\n </DrawerContainer>\n </ActionsDrawerProvider>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst Overlay = () => {\n const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s) => s, false);\n const isOpen = ctx?.isOpen ?? false;\n const hasContent = ctx?.hasContent ?? false;\n const hasSideNav = ctx?.hasSideNav ?? false;\n const setIsOpen = ctx?.setIsOpen;\n\n if (!hasContent) {\n return null;\n }\n\n return (\n <DrawerOverlay\n $isOpen={isOpen}\n $hasSideNav={hasSideNav}\n onClick={() => setIsOpen?.(false)}\n data-testid=\"actions-drawer-overlay\"\n />\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n children: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n const ctx = useActionsDrawer('ActionsDrawer.Header', (s) => s, false);\n const isOpen = ctx?.isOpen ?? false;\n const hasContent = ctx?.hasContent ?? false;\n const setIsOpen = ctx?.setIsOpen;\n const { formatMessage } = useIntl();\n\n const toggleOpen = () => {\n setIsOpen?.((prev: boolean) => !prev);\n };\n\n return (\n <DrawerContent background=\"neutral0\">\n <Flex\n paddingTop={3}\n paddingBottom={3}\n paddingLeft={4}\n paddingRight={4}\n gap={3}\n borderStyle=\"solid\"\n borderWidth={isOpen ? '1px 0' : '1px 0 0 0'}\n borderColor=\"neutral150\"\n >\n <Flex flex={1} gap={2} alignItems=\"center\" overflow=\"hidden\">\n {children}\n </Flex>\n {hasContent && (\n <ToggleButton\n onClick={toggleOpen}\n label={\n isOpen\n ? formatMessage({\n id: 'content-manager.actions-drawer.close',\n defaultMessage: 'Close more actions',\n })\n : formatMessage({\n id: 'content-manager.actions-drawer.open',\n defaultMessage: 'Open more actions',\n })\n }\n >\n {isOpen ? <CaretUp fill=\"neutral600\" /> : <CaretDown fill=\"neutral600\" />}\n </ToggleButton>\n )}\n </Flex>\n </DrawerContent>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n children: React.ReactNode;\n}\n\nconst Content = ({ children }: ContentProps) => {\n const ctx = useActionsDrawer('ActionsDrawer.Content', (s) => s, false);\n const isOpen = ctx?.isOpen ?? false;\n\n return (\n <DrawerContentInner $isOpen={isOpen}>\n <Flex\n direction=\"column\"\n alignItems=\"stretch\"\n justifyContent=\"flex-start\"\n padding={{ initial: 4, large: 0 }}\n background=\"neutral0\"\n >\n {children}\n </Flex>\n </DrawerContentInner>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionsDrawer = {\n Root,\n Overlay,\n Header,\n Content,\n};\n\nexport { ActionsDrawer, useActionsDrawer };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","$isOpen","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","ToggleButton","IconButton","colors","neutral200","DrawerContent","Flex","DrawerContentInner","ScrollArea","Root","children","hasContent","hasSideNav","isOpen","setIsOpen","React","useState","useEffect","_jsx","Overlay","ctx","s","onClick","data-testid","Header","formatMessage","useIntl","toggleOpen","prev","background","_jsxs","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","borderStyle","borderWidth","borderColor","flex","alignItems","overflow","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":"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"}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { createContext, WIDTH_SIDE_NAVIGATION } from '@strapi/admin/strapi-admin';
|
|
4
|
+
import { Portal, Box, IconButton, Flex, ScrollArea } from '@strapi/design-system';
|
|
5
|
+
import { CaretUp, CaretDown } from '@strapi/icons';
|
|
6
|
+
import { useIntl } from 'react-intl';
|
|
7
|
+
import { styled } from 'styled-components';
|
|
8
|
+
|
|
9
|
+
const [ActionsDrawerProvider, useActionsDrawer] = createContext('ActionsDrawer', null);
|
|
10
|
+
/* -------------------------------------------------------------------------------------------------
|
|
11
|
+
* Styled Components
|
|
12
|
+
* -----------------------------------------------------------------------------------------------*/ const DrawerContainer = styled(Portal)`
|
|
13
|
+
position: fixed;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
bottom: 0;
|
|
17
|
+
z-index: ${({ $isOpen })=>$isOpen ? 4 : 2};
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
align-items: stretch;
|
|
21
|
+
justify-content: flex-end;
|
|
22
|
+
|
|
23
|
+
${({ theme })=>theme.breakpoints.medium} {
|
|
24
|
+
z-index: 2;
|
|
25
|
+
left: ${({ $hasSideNav })=>$hasSideNav ? WIDTH_SIDE_NAVIGATION : 0};
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
const DrawerOverlay = styled(Box)`
|
|
29
|
+
position: fixed;
|
|
30
|
+
left: 0;
|
|
31
|
+
top: 0;
|
|
32
|
+
right: 0;
|
|
33
|
+
bottom: 0;
|
|
34
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
35
|
+
transition: opacity ${(props)=>props.theme.motion.timings['200']}
|
|
36
|
+
${(props)=>props.theme.motion.easings.easeInOutQuad};
|
|
37
|
+
opacity: ${({ $isOpen })=>$isOpen ? 1 : 0};
|
|
38
|
+
pointer-events: ${({ $isOpen })=>$isOpen ? 'auto' : 'none'};
|
|
39
|
+
|
|
40
|
+
${({ theme })=>theme.breakpoints.medium} {
|
|
41
|
+
left: ${({ $hasSideNav })=>$hasSideNav ? WIDTH_SIDE_NAVIGATION : 0};
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
44
|
+
const ToggleButton = styled(IconButton)`
|
|
45
|
+
padding: 0;
|
|
46
|
+
border: none;
|
|
47
|
+
background: ${({ theme })=>theme.colors.neutral200};
|
|
48
|
+
width: 3.2rem;
|
|
49
|
+
height: 3.2rem;
|
|
50
|
+
border-radius: 1.6rem;
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
`;
|
|
55
|
+
const DrawerContent = styled(Flex)`
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
align-items: stretch;
|
|
58
|
+
position: relative;
|
|
59
|
+
z-index: 1;
|
|
60
|
+
pointer-events: auto;
|
|
61
|
+
`;
|
|
62
|
+
const DrawerContentInner = styled(ScrollArea)`
|
|
63
|
+
max-height: ${({ $isOpen })=>$isOpen ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)
|
|
64
|
+
: '0'};
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
transition: max-height ${(props)=>props.theme.motion.timings['200']}
|
|
67
|
+
${(props)=>props.theme.motion.easings.easeInOutQuad};
|
|
68
|
+
z-index: 1;
|
|
69
|
+
pointer-events: auto;
|
|
70
|
+
`;
|
|
71
|
+
const Root = ({ children, hasContent = false, hasSideNav = false })=>{
|
|
72
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
73
|
+
// Close drawer when there's no content
|
|
74
|
+
React.useEffect(()=>{
|
|
75
|
+
if (!hasContent) {
|
|
76
|
+
setIsOpen(false);
|
|
77
|
+
}
|
|
78
|
+
}, [
|
|
79
|
+
hasContent
|
|
80
|
+
]);
|
|
81
|
+
return /*#__PURE__*/ jsx(ActionsDrawerProvider, {
|
|
82
|
+
isOpen: isOpen,
|
|
83
|
+
setIsOpen: setIsOpen,
|
|
84
|
+
hasContent: hasContent,
|
|
85
|
+
hasSideNav: hasSideNav,
|
|
86
|
+
children: /*#__PURE__*/ jsx(DrawerContainer, {
|
|
87
|
+
$hasSideNav: hasSideNav,
|
|
88
|
+
$isOpen: isOpen,
|
|
89
|
+
children: children
|
|
90
|
+
})
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
/* -------------------------------------------------------------------------------------------------
|
|
94
|
+
* Overlay
|
|
95
|
+
* -----------------------------------------------------------------------------------------------*/ const Overlay = ()=>{
|
|
96
|
+
const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s)=>s, false);
|
|
97
|
+
const isOpen = ctx?.isOpen ?? false;
|
|
98
|
+
const hasContent = ctx?.hasContent ?? false;
|
|
99
|
+
const hasSideNav = ctx?.hasSideNav ?? false;
|
|
100
|
+
const setIsOpen = ctx?.setIsOpen;
|
|
101
|
+
if (!hasContent) {
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
return /*#__PURE__*/ jsx(DrawerOverlay, {
|
|
105
|
+
$isOpen: isOpen,
|
|
106
|
+
$hasSideNav: hasSideNav,
|
|
107
|
+
onClick: ()=>setIsOpen?.(false),
|
|
108
|
+
"data-testid": "actions-drawer-overlay"
|
|
109
|
+
});
|
|
110
|
+
};
|
|
111
|
+
const Header = ({ children })=>{
|
|
112
|
+
const ctx = useActionsDrawer('ActionsDrawer.Header', (s)=>s, false);
|
|
113
|
+
const isOpen = ctx?.isOpen ?? false;
|
|
114
|
+
const hasContent = ctx?.hasContent ?? false;
|
|
115
|
+
const setIsOpen = ctx?.setIsOpen;
|
|
116
|
+
const { formatMessage } = useIntl();
|
|
117
|
+
const toggleOpen = ()=>{
|
|
118
|
+
setIsOpen?.((prev)=>!prev);
|
|
119
|
+
};
|
|
120
|
+
return /*#__PURE__*/ jsx(DrawerContent, {
|
|
121
|
+
background: "neutral0",
|
|
122
|
+
children: /*#__PURE__*/ jsxs(Flex, {
|
|
123
|
+
paddingTop: 3,
|
|
124
|
+
paddingBottom: 3,
|
|
125
|
+
paddingLeft: 4,
|
|
126
|
+
paddingRight: 4,
|
|
127
|
+
gap: 3,
|
|
128
|
+
borderStyle: "solid",
|
|
129
|
+
borderWidth: isOpen ? '1px 0' : '1px 0 0 0',
|
|
130
|
+
borderColor: "neutral150",
|
|
131
|
+
children: [
|
|
132
|
+
/*#__PURE__*/ jsx(Flex, {
|
|
133
|
+
flex: 1,
|
|
134
|
+
gap: 2,
|
|
135
|
+
alignItems: "center",
|
|
136
|
+
overflow: "hidden",
|
|
137
|
+
children: children
|
|
138
|
+
}),
|
|
139
|
+
hasContent && /*#__PURE__*/ jsx(ToggleButton, {
|
|
140
|
+
onClick: toggleOpen,
|
|
141
|
+
label: isOpen ? formatMessage({
|
|
142
|
+
id: 'content-manager.actions-drawer.close',
|
|
143
|
+
defaultMessage: 'Close more actions'
|
|
144
|
+
}) : formatMessage({
|
|
145
|
+
id: 'content-manager.actions-drawer.open',
|
|
146
|
+
defaultMessage: 'Open more actions'
|
|
147
|
+
}),
|
|
148
|
+
children: isOpen ? /*#__PURE__*/ jsx(CaretUp, {
|
|
149
|
+
fill: "neutral600"
|
|
150
|
+
}) : /*#__PURE__*/ jsx(CaretDown, {
|
|
151
|
+
fill: "neutral600"
|
|
152
|
+
})
|
|
153
|
+
})
|
|
154
|
+
]
|
|
155
|
+
})
|
|
156
|
+
});
|
|
157
|
+
};
|
|
158
|
+
const Content = ({ children })=>{
|
|
159
|
+
const ctx = useActionsDrawer('ActionsDrawer.Content', (s)=>s, false);
|
|
160
|
+
const isOpen = ctx?.isOpen ?? false;
|
|
161
|
+
return /*#__PURE__*/ jsx(DrawerContentInner, {
|
|
162
|
+
$isOpen: isOpen,
|
|
163
|
+
children: /*#__PURE__*/ jsx(Flex, {
|
|
164
|
+
direction: "column",
|
|
165
|
+
alignItems: "stretch",
|
|
166
|
+
justifyContent: "flex-start",
|
|
167
|
+
padding: {
|
|
168
|
+
initial: 4,
|
|
169
|
+
large: 0
|
|
170
|
+
},
|
|
171
|
+
background: "neutral0",
|
|
172
|
+
children: children
|
|
173
|
+
})
|
|
174
|
+
});
|
|
175
|
+
};
|
|
176
|
+
/* -------------------------------------------------------------------------------------------------
|
|
177
|
+
* ActionsDrawer
|
|
178
|
+
* -----------------------------------------------------------------------------------------------*/ const ActionsDrawer = {
|
|
179
|
+
Root,
|
|
180
|
+
Overlay,
|
|
181
|
+
Header,
|
|
182
|
+
Content
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
export { ActionsDrawer, useActionsDrawer };
|
|
186
|
+
//# sourceMappingURL=ActionsDrawer.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActionsDrawer.mjs","sources":["../../../admin/src/components/ActionsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { WIDTH_SIDE_NAVIGATION, createContext } from '@strapi/admin/strapi-admin';\nimport { Portal, Flex, Box, ScrollArea, IconButton } from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/**\n * ActionsDrawer is a component used in the content manager edit view page and content history page.\n * It's a sticky banner that can expand to reveal more actions. It's used only in mobile and tablet.\n *\n * A similar component is currently in development in the design-system but it's not ready yet.\n * Using the Panels for the edit view page brought some complexity and for the moment, we decided to go with this custom implementation.\n *\n * @TODO: Replace this component with the one in the design-system when it's ready.\n */\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ActionsDrawerContextValue {\n isOpen: boolean;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n hasContent: boolean;\n hasSideNav: boolean;\n}\n\nconst [ActionsDrawerProvider, useActionsDrawer] = createContext<ActionsDrawerContextValue | null>(\n 'ActionsDrawer',\n null\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Styled Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DrawerContainer = styled(Portal)<{ $hasSideNav: boolean; $isOpen: boolean }>`\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${({ $isOpen }) => ($isOpen ? 4 : 2)};\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-end;\n\n ${({ theme }) => theme.breakpoints.medium} {\n z-index: 2;\n left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n }\n`;\n\nconst DrawerOverlay = styled(Box)<{ $isOpen: boolean; $hasSideNav: boolean }>`\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n transition: opacity ${(props) => props.theme.motion.timings['200']}\n ${(props) => props.theme.motion.easings.easeInOutQuad};\n opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n\n ${({ theme }) => theme.breakpoints.medium} {\n left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n }\n`;\n\nconst ToggleButton = styled(IconButton)`\n padding: 0;\n border: none;\n background: ${({ theme }) => theme.colors.neutral200};\n width: 3.2rem;\n height: 3.2rem;\n border-radius: 1.6rem;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst DrawerContent = styled(Flex)`\n flex-direction: column;\n align-items: stretch;\n position: relative;\n z-index: 1;\n pointer-events: auto;\n`;\n\nconst DrawerContentInner = styled(ScrollArea)<{ $isOpen: boolean }>`\n max-height: ${({ $isOpen }) =>\n $isOpen\n ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)\n : '0'};\n overflow: hidden;\n transition: max-height ${(props) => props.theme.motion.timings['200']}\n ${(props) => props.theme.motion.easings.easeInOutQuad};\n z-index: 1;\n pointer-events: auto;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n children: React.ReactNode;\n hasContent?: boolean;\n hasSideNav?: boolean;\n}\n\nconst Root = ({ children, hasContent = false, hasSideNav = false }: RootProps) => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n // Close drawer when there's no content\n React.useEffect(() => {\n if (!hasContent) {\n setIsOpen(false);\n }\n }, [hasContent]);\n\n return (\n <ActionsDrawerProvider\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n hasContent={hasContent}\n hasSideNav={hasSideNav}\n >\n <DrawerContainer $hasSideNav={hasSideNav} $isOpen={isOpen}>\n {children}\n </DrawerContainer>\n </ActionsDrawerProvider>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst Overlay = () => {\n const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s) => s, false);\n const isOpen = ctx?.isOpen ?? false;\n const hasContent = ctx?.hasContent ?? false;\n const hasSideNav = ctx?.hasSideNav ?? false;\n const setIsOpen = ctx?.setIsOpen;\n\n if (!hasContent) {\n return null;\n }\n\n return (\n <DrawerOverlay\n $isOpen={isOpen}\n $hasSideNav={hasSideNav}\n onClick={() => setIsOpen?.(false)}\n data-testid=\"actions-drawer-overlay\"\n />\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n children: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n const ctx = useActionsDrawer('ActionsDrawer.Header', (s) => s, false);\n const isOpen = ctx?.isOpen ?? false;\n const hasContent = ctx?.hasContent ?? false;\n const setIsOpen = ctx?.setIsOpen;\n const { formatMessage } = useIntl();\n\n const toggleOpen = () => {\n setIsOpen?.((prev: boolean) => !prev);\n };\n\n return (\n <DrawerContent background=\"neutral0\">\n <Flex\n paddingTop={3}\n paddingBottom={3}\n paddingLeft={4}\n paddingRight={4}\n gap={3}\n borderStyle=\"solid\"\n borderWidth={isOpen ? '1px 0' : '1px 0 0 0'}\n borderColor=\"neutral150\"\n >\n <Flex flex={1} gap={2} alignItems=\"center\" overflow=\"hidden\">\n {children}\n </Flex>\n {hasContent && (\n <ToggleButton\n onClick={toggleOpen}\n label={\n isOpen\n ? formatMessage({\n id: 'content-manager.actions-drawer.close',\n defaultMessage: 'Close more actions',\n })\n : formatMessage({\n id: 'content-manager.actions-drawer.open',\n defaultMessage: 'Open more actions',\n })\n }\n >\n {isOpen ? <CaretUp fill=\"neutral600\" /> : <CaretDown fill=\"neutral600\" />}\n </ToggleButton>\n )}\n </Flex>\n </DrawerContent>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n children: React.ReactNode;\n}\n\nconst Content = ({ children }: ContentProps) => {\n const ctx = useActionsDrawer('ActionsDrawer.Content', (s) => s, false);\n const isOpen = ctx?.isOpen ?? false;\n\n return (\n <DrawerContentInner $isOpen={isOpen}>\n <Flex\n direction=\"column\"\n alignItems=\"stretch\"\n justifyContent=\"flex-start\"\n padding={{ initial: 4, large: 0 }}\n background=\"neutral0\"\n >\n {children}\n </Flex>\n </DrawerContentInner>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionsDrawer = {\n Root,\n Overlay,\n Header,\n Content,\n};\n\nexport { ActionsDrawer, useActionsDrawer };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","$isOpen","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","ToggleButton","IconButton","colors","neutral200","DrawerContent","Flex","DrawerContentInner","ScrollArea","Root","children","hasContent","hasSideNav","isOpen","setIsOpen","React","useState","useEffect","_jsx","Overlay","ctx","s","onClick","data-testid","Header","formatMessage","useIntl","toggleOpen","prev","background","_jsxs","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","borderStyle","borderWidth","borderColor","flex","alignItems","overflow","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":"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"}
|
|
@@ -4,10 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var strapiAdmin = require('@strapi/admin/strapi-admin');
|
|
6
6
|
var designSystem = require('@strapi/design-system');
|
|
7
|
-
var qs = require('qs');
|
|
8
7
|
var reactIntl = require('react-intl');
|
|
9
8
|
var useContentManagerInitData = require('../hooks/useContentManagerInitData.js');
|
|
10
|
-
var useContentTypeSchema = require('../hooks/useContentTypeSchema.js');
|
|
11
9
|
var hooks = require('../modules/hooks.js');
|
|
12
10
|
var translations = require('../utils/translations.js');
|
|
13
11
|
|
|
@@ -32,13 +30,11 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
|
32
30
|
|
|
33
31
|
const LeftMenu = ({ isFullPage = false })=>{
|
|
34
32
|
const [search, setSearch] = React__namespace.useState('');
|
|
35
|
-
const [{ query }] = strapiAdmin.useQueryParams();
|
|
36
33
|
const { formatMessage, locale } = reactIntl.useIntl();
|
|
37
34
|
// Initialize Content Manager data to ensure links are available
|
|
38
35
|
const { isLoading } = useContentManagerInitData.useContentManagerInitData();
|
|
39
36
|
const collectionTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
|
|
40
37
|
const singleTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
|
|
41
|
-
const { schemas } = useContentTypeSchema.useContentTypeSchema();
|
|
42
38
|
const { contains } = designSystem.useFilter(locale, {
|
|
43
39
|
sensitivity: 'base'
|
|
44
40
|
});
|
|
@@ -99,25 +95,6 @@ const LeftMenu = ({ isFullPage = false })=>{
|
|
|
99
95
|
id: translations.getTranslation('header.name'),
|
|
100
96
|
defaultMessage: 'Content Manager'
|
|
101
97
|
});
|
|
102
|
-
const getPluginsParamsForLink = (link)=>{
|
|
103
|
-
const schema = schemas.find((schema)=>schema.uid === link.uid);
|
|
104
|
-
const isI18nEnabled = Boolean(schema?.pluginOptions?.i18n?.localized);
|
|
105
|
-
// The search params have the i18n plugin
|
|
106
|
-
if (query.plugins && 'i18n' in query.plugins) {
|
|
107
|
-
// Prepare removal of i18n from the plugins search params
|
|
108
|
-
const { i18n, ...restPlugins } = query.plugins;
|
|
109
|
-
// i18n is not enabled, remove it from the plugins search params
|
|
110
|
-
if (!isI18nEnabled) {
|
|
111
|
-
return restPlugins;
|
|
112
|
-
}
|
|
113
|
-
// i18n is enabled, put the plugins search params back together
|
|
114
|
-
return {
|
|
115
|
-
i18n,
|
|
116
|
-
...restPlugins
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
return query.plugins;
|
|
120
|
-
};
|
|
121
98
|
// Show loading state while data is being fetched
|
|
122
99
|
if (isLoading) {
|
|
123
100
|
return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.SubNav.Main, {
|
|
@@ -199,11 +176,7 @@ const LeftMenu = ({ isFullPage = false })=>{
|
|
|
199
176
|
children: section.links.map((link)=>{
|
|
200
177
|
return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Link, {
|
|
201
178
|
to: {
|
|
202
|
-
pathname: link.to
|
|
203
|
-
search: qs.stringify({
|
|
204
|
-
...qs.parse(link.search ?? ''),
|
|
205
|
-
plugins: getPluginsParamsForLink(link)
|
|
206
|
-
})
|
|
179
|
+
pathname: link.to
|
|
207
180
|
},
|
|
208
181
|
label: link.title
|
|
209
182
|
}, link.uid);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LeftMenu.js","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';\nimport { Flex, Searchbar, useCollator, useFilter, Divider, Loader } from '@strapi/design-system';\nimport { parse, stringify } from 'qs';\nimport { useIntl } from 'react-intl';\n\nimport { useContentManagerInitData } from '../hooks/useContentManagerInitData';\nimport { useContentTypeSchema } from '../hooks/useContentTypeSchema';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\nconst LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {\n const [search, setSearch] = React.useState('');\n const [{ query }] = useQueryParams<{ plugins?: object }>();\n const { formatMessage, locale } = useIntl();\n\n // Initialize Content Manager data to ensure links are available\n const { isLoading } = useContentManagerInitData();\n\n const collectionTypeLinks = useTypedSelector(\n (state) => state['content-manager'].app.collectionTypeLinks\n );\n\n const singleTypeLinks = useTypedSelector((state) => state['content-manager'].app.singleTypeLinks);\n const { schemas } = useContentTypeSchema();\n\n const { contains } = useFilter(locale, {\n sensitivity: 'base',\n });\n\n const formatter = useCollator(locale, {\n sensitivity: 'base',\n });\n\n const menu = React.useMemo(\n () =>\n [\n {\n id: 'collectionTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.collection-types'),\n defaultMessage: 'Collection Types',\n }),\n searchable: true,\n links: collectionTypeLinks,\n },\n {\n id: 'singleTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.single-types'),\n defaultMessage: 'Single Types',\n }),\n searchable: true,\n links: singleTypeLinks,\n },\n ].map((section) => ({\n ...section,\n links: section.links\n /**\n * Filter by the search value\n */\n .filter((link) => contains(link.title, search.trim()))\n /**\n * Sort correctly using the language\n */\n .sort((a, b) => formatter.compare(a.title, b.title))\n /**\n * Apply the formated strings to the links from react-intl\n */\n .map((link) => {\n return {\n ...link,\n title: formatMessage({ id: link.title, defaultMessage: link.title }),\n };\n }),\n })),\n [collectionTypeLinks, search, singleTypeLinks, contains, formatMessage, formatter]\n );\n\n const handleClear = () => {\n setSearch('');\n };\n\n const handleChangeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n setSearch(event.target.value);\n };\n\n const label = formatMessage({\n id: getTranslation('header.name'),\n defaultMessage: 'Content Manager',\n });\n\n const getPluginsParamsForLink = (link: ContentManagerLink) => {\n const schema = schemas.find((schema) => schema.uid === link.uid);\n const isI18nEnabled = Boolean((schema?.pluginOptions?.i18n as any)?.localized);\n\n // The search params have the i18n plugin\n if (query.plugins && 'i18n' in query.plugins) {\n // Prepare removal of i18n from the plugins search params\n const { i18n, ...restPlugins } = query.plugins;\n\n // i18n is not enabled, remove it from the plugins search params\n if (!isI18nEnabled) {\n return restPlugins;\n }\n\n // i18n is enabled, put the plugins search params back together\n return { i18n, ...restPlugins };\n }\n\n return query.plugins;\n };\n\n // Show loading state while data is being fetched\n if (isLoading) {\n return (\n <SubNav.Main aria-label={label}>\n <SubNav.Header label={label} />\n <Divider />\n <Flex padding={4} justifyContent=\"center\">\n <Loader />\n </Flex>\n </SubNav.Main>\n );\n }\n\n return (\n <SubNav.Main aria-label={label}>\n {!isFullPage && (\n <>\n <SubNav.Header label={label} />\n <Divider />\n </>\n )}\n <SubNav.Content>\n {isFullPage && (\n <>\n <SubNav.Header label={label} />\n <Divider />\n </>\n )}\n <Flex\n paddingLeft={{\n initial: 3,\n large: 5,\n }}\n paddingRight={{\n initial: 3,\n large: 5,\n }}\n paddingTop={5}\n paddingBottom={{ initial: 1, large: 0 }}\n gap={3}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <Searchbar\n value={search}\n onChange={handleChangeSearch}\n onClear={handleClear}\n placeholder={formatMessage({\n id: 'search.placeholder',\n defaultMessage: 'Search',\n })}\n size=\"S\"\n // eslint-disable-next-line react/no-children-prop\n children={undefined}\n name={'search_contentType'}\n clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n />\n </Flex>\n <SubNav.Sections>\n {menu.map((section) => {\n return (\n <SubNav.Section\n key={section.id}\n label={section.title}\n badgeLabel={section.links.length.toString()}\n >\n {section.links.map((link) => {\n return (\n <SubNav.Link\n key={link.uid}\n to={{\n pathname: link.to,\n search: stringify({\n ...parse(link.search ?? ''),\n plugins: getPluginsParamsForLink(link),\n }),\n }}\n label={link.title}\n />\n );\n })}\n </SubNav.Section>\n );\n })}\n </SubNav.Sections>\n </SubNav.Content>\n </SubNav.Main>\n );\n};\n\nexport { LeftMenu };\n"],"names":["LeftMenu","isFullPage","search","setSearch","React","useState","query","useQueryParams","formatMessage","locale","useIntl","isLoading","useContentManagerInitData","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","schemas","useContentTypeSchema","contains","useFilter","sensitivity","formatter","useCollator","menu","useMemo","id","title","getTranslation","defaultMessage","searchable","links","map","section","filter","link","trim","sort","a","b","compare","handleClear","handleChangeSearch","event","target","value","label","getPluginsParamsForLink","schema","find","uid","isI18nEnabled","Boolean","pluginOptions","i18n","localized","plugins","restPlugins","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","Flex","padding","justifyContent","Loader","_Fragment","Content","paddingLeft","initial","large","paddingRight","paddingTop","paddingBottom","gap","direction","alignItems","Searchbar","onChange","onClear","placeholder","size","children","undefined","name","clearLabel","Sections","Section","badgeLabel","length","toString","Link","to","pathname","stringify","parse"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LeftMenu.js","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { SubNav } from '@strapi/admin/strapi-admin';\nimport { Flex, Searchbar, useCollator, useFilter, Divider, Loader } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useContentManagerInitData } from '../hooks/useContentManagerInitData';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nconst LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {\n const [search, setSearch] = React.useState('');\n const { formatMessage, locale } = useIntl();\n\n // Initialize Content Manager data to ensure links are available\n const { isLoading } = useContentManagerInitData();\n\n const collectionTypeLinks = useTypedSelector(\n (state) => state['content-manager'].app.collectionTypeLinks\n );\n\n const singleTypeLinks = useTypedSelector((state) => state['content-manager'].app.singleTypeLinks);\n\n const { contains } = useFilter(locale, {\n sensitivity: 'base',\n });\n\n const formatter = useCollator(locale, {\n sensitivity: 'base',\n });\n\n const menu = React.useMemo(\n () =>\n [\n {\n id: 'collectionTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.collection-types'),\n defaultMessage: 'Collection Types',\n }),\n searchable: true,\n links: collectionTypeLinks,\n },\n {\n id: 'singleTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.single-types'),\n defaultMessage: 'Single Types',\n }),\n searchable: true,\n links: singleTypeLinks,\n },\n ].map((section) => ({\n ...section,\n links: section.links\n /**\n * Filter by the search value\n */\n .filter((link) => contains(link.title, search.trim()))\n /**\n * Sort correctly using the language\n */\n .sort((a, b) => formatter.compare(a.title, b.title))\n /**\n * Apply the formated strings to the links from react-intl\n */\n .map((link) => {\n return {\n ...link,\n title: formatMessage({ id: link.title, defaultMessage: link.title }),\n };\n }),\n })),\n [collectionTypeLinks, search, singleTypeLinks, contains, formatMessage, formatter]\n );\n\n const handleClear = () => {\n setSearch('');\n };\n\n const handleChangeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n setSearch(event.target.value);\n };\n\n const label = formatMessage({\n id: getTranslation('header.name'),\n defaultMessage: 'Content Manager',\n });\n\n // Show loading state while data is being fetched\n if (isLoading) {\n return (\n <SubNav.Main aria-label={label}>\n <SubNav.Header label={label} />\n <Divider />\n <Flex padding={4} justifyContent=\"center\">\n <Loader />\n </Flex>\n </SubNav.Main>\n );\n }\n\n return (\n <SubNav.Main aria-label={label}>\n {!isFullPage && (\n <>\n <SubNav.Header label={label} />\n <Divider />\n </>\n )}\n <SubNav.Content>\n {isFullPage && (\n <>\n <SubNav.Header label={label} />\n <Divider />\n </>\n )}\n <Flex\n paddingLeft={{\n initial: 3,\n large: 5,\n }}\n paddingRight={{\n initial: 3,\n large: 5,\n }}\n paddingTop={5}\n paddingBottom={{ initial: 1, large: 0 }}\n gap={3}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <Searchbar\n value={search}\n onChange={handleChangeSearch}\n onClear={handleClear}\n placeholder={formatMessage({\n id: 'search.placeholder',\n defaultMessage: 'Search',\n })}\n size=\"S\"\n // eslint-disable-next-line react/no-children-prop\n children={undefined}\n name={'search_contentType'}\n clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n />\n </Flex>\n <SubNav.Sections>\n {menu.map((section) => {\n return (\n <SubNav.Section\n key={section.id}\n label={section.title}\n badgeLabel={section.links.length.toString()}\n >\n {section.links.map((link) => {\n return (\n <SubNav.Link\n key={link.uid}\n to={{\n pathname: link.to,\n }}\n label={link.title}\n />\n );\n })}\n </SubNav.Section>\n );\n })}\n </SubNav.Sections>\n </SubNav.Content>\n </SubNav.Main>\n );\n};\n\nexport { LeftMenu };\n"],"names":["LeftMenu","isFullPage","search","setSearch","React","useState","formatMessage","locale","useIntl","isLoading","useContentManagerInitData","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","contains","useFilter","sensitivity","formatter","useCollator","menu","useMemo","id","title","getTranslation","defaultMessage","searchable","links","map","section","filter","link","trim","sort","a","b","compare","handleClear","handleChangeSearch","event","target","value","label","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","Flex","padding","justifyContent","Loader","_Fragment","Content","paddingLeft","initial","large","paddingRight","paddingTop","paddingBottom","gap","direction","alignItems","Searchbar","onChange","onClear","placeholder","size","children","undefined","name","clearLabel","Sections","Section","badgeLabel","length","toString","Link","to","pathname","uid"],"mappings":"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"}
|
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { SubNav } from '@strapi/admin/strapi-admin';
|
|
4
4
|
import { useFilter, useCollator, Divider, Flex, Loader, Searchbar } from '@strapi/design-system';
|
|
5
|
-
import { stringify, parse } from 'qs';
|
|
6
5
|
import { useIntl } from 'react-intl';
|
|
7
6
|
import { useContentManagerInitData } from '../hooks/useContentManagerInitData.mjs';
|
|
8
|
-
import { useContentTypeSchema } from '../hooks/useContentTypeSchema.mjs';
|
|
9
7
|
import { useTypedSelector } from '../modules/hooks.mjs';
|
|
10
8
|
import { getTranslation } from '../utils/translations.mjs';
|
|
11
9
|
|
|
12
10
|
const LeftMenu = ({ isFullPage = false })=>{
|
|
13
11
|
const [search, setSearch] = React.useState('');
|
|
14
|
-
const [{ query }] = useQueryParams();
|
|
15
12
|
const { formatMessage, locale } = useIntl();
|
|
16
13
|
// Initialize Content Manager data to ensure links are available
|
|
17
14
|
const { isLoading } = useContentManagerInitData();
|
|
18
15
|
const collectionTypeLinks = useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
|
|
19
16
|
const singleTypeLinks = useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
|
|
20
|
-
const { schemas } = useContentTypeSchema();
|
|
21
17
|
const { contains } = useFilter(locale, {
|
|
22
18
|
sensitivity: 'base'
|
|
23
19
|
});
|
|
@@ -78,25 +74,6 @@ const LeftMenu = ({ isFullPage = false })=>{
|
|
|
78
74
|
id: getTranslation('header.name'),
|
|
79
75
|
defaultMessage: 'Content Manager'
|
|
80
76
|
});
|
|
81
|
-
const getPluginsParamsForLink = (link)=>{
|
|
82
|
-
const schema = schemas.find((schema)=>schema.uid === link.uid);
|
|
83
|
-
const isI18nEnabled = Boolean(schema?.pluginOptions?.i18n?.localized);
|
|
84
|
-
// The search params have the i18n plugin
|
|
85
|
-
if (query.plugins && 'i18n' in query.plugins) {
|
|
86
|
-
// Prepare removal of i18n from the plugins search params
|
|
87
|
-
const { i18n, ...restPlugins } = query.plugins;
|
|
88
|
-
// i18n is not enabled, remove it from the plugins search params
|
|
89
|
-
if (!isI18nEnabled) {
|
|
90
|
-
return restPlugins;
|
|
91
|
-
}
|
|
92
|
-
// i18n is enabled, put the plugins search params back together
|
|
93
|
-
return {
|
|
94
|
-
i18n,
|
|
95
|
-
...restPlugins
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
return query.plugins;
|
|
99
|
-
};
|
|
100
77
|
// Show loading state while data is being fetched
|
|
101
78
|
if (isLoading) {
|
|
102
79
|
return /*#__PURE__*/ jsxs(SubNav.Main, {
|
|
@@ -178,11 +155,7 @@ const LeftMenu = ({ isFullPage = false })=>{
|
|
|
178
155
|
children: section.links.map((link)=>{
|
|
179
156
|
return /*#__PURE__*/ jsx(SubNav.Link, {
|
|
180
157
|
to: {
|
|
181
|
-
pathname: link.to
|
|
182
|
-
search: stringify({
|
|
183
|
-
...parse(link.search ?? ''),
|
|
184
|
-
plugins: getPluginsParamsForLink(link)
|
|
185
|
-
})
|
|
158
|
+
pathname: link.to
|
|
186
159
|
},
|
|
187
160
|
label: link.title
|
|
188
161
|
}, link.uid);
|