@strapi/upload 5.2.0 → 5.3.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/_chunks/{index-l4hbqJYu.js → index-BM9Ayh_r.js} +2 -2
- package/dist/_chunks/{index-l4hbqJYu.js.map → index-BM9Ayh_r.js.map} +1 -1
- package/dist/_chunks/{index-GpFGwMho.mjs → index-BWIqjWzC.mjs} +2 -2
- package/dist/_chunks/{index-GpFGwMho.mjs.map → index-BWIqjWzC.mjs.map} +1 -1
- package/dist/_chunks/{index-DlRn6eNH.js → index-Bl2-6oC8.js} +21 -22
- package/dist/_chunks/index-Bl2-6oC8.js.map +1 -0
- package/dist/_chunks/{index-BjvAmZvH.mjs → index-BwEfHu6y.mjs} +1079 -1595
- package/dist/_chunks/index-BwEfHu6y.mjs.map +1 -0
- package/dist/_chunks/{index-D7YMYvKK.js → index-C1MSWEyZ.js} +2 -2
- package/dist/_chunks/{index-D7YMYvKK.js.map → index-C1MSWEyZ.js.map} +1 -1
- package/dist/_chunks/{index-KSVkjErL.mjs → index-C_cWV2yS.mjs} +2 -2
- package/dist/_chunks/{index-KSVkjErL.mjs.map → index-C_cWV2yS.mjs.map} +1 -1
- package/dist/_chunks/{index-Bi33Km2i.mjs → index-DCAQ4hHN.mjs} +21 -22
- package/dist/_chunks/index-DCAQ4hHN.mjs.map +1 -0
- package/dist/_chunks/{index-BHcSb0I3.js → index-YwynuEzj.js} +1077 -1593
- package/dist/_chunks/index-YwynuEzj.js.map +1 -0
- package/dist/admin/index.js +1 -1
- package/dist/admin/index.mjs +1 -1
- package/dist/admin/src/components/AssetCard/AssetCard.d.ts +18 -0
- package/dist/admin/src/components/AssetCard/AssetCardBase.d.ts +14 -0
- package/dist/admin/src/components/AssetCard/AudioAssetCard.d.ts +7 -0
- package/dist/admin/src/components/AssetCard/AudioPreview.d.ts +6 -0
- package/dist/admin/src/components/AssetCard/DocAssetCard.d.ts +7 -0
- package/dist/admin/src/components/AssetCard/ImageAssetCard.d.ts +12 -0
- package/dist/admin/src/components/AssetCard/UploadingAssetCard.d.ts +17 -0
- package/dist/admin/src/components/AssetCard/VideoAssetCard.d.ts +8 -0
- package/dist/admin/src/components/AssetCard/VideoPreview.d.ts +9 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/Filters.d.ts +23 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/PageSize.d.ts +6 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.d.ts +9 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/PaginationContext.d.ts +9 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/components.d.ts +15 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/index.d.ts +9 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/SearchAsset/index.d.ts +7 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/index.d.ts +63 -0
- package/dist/admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.d.ts +1 -0
- package/dist/admin/src/components/AssetDialog/DialogFooter.d.ts +6 -0
- package/dist/admin/src/components/AssetDialog/SelectedStep/index.d.ts +8 -0
- package/dist/admin/src/components/AssetDialog/index.d.ts +39 -0
- package/dist/admin/src/components/AssetGridList/Draggable.d.ts +9 -0
- package/dist/admin/src/components/AssetGridList/index.d.ts +14 -0
- package/dist/admin/src/components/Breadcrumbs/Breadcrumbs.d.ts +15 -0
- package/dist/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.d.ts +7 -0
- package/dist/admin/src/components/Breadcrumbs/index.d.ts +1 -0
- package/dist/admin/src/components/BulkMoveDialog/BulkMoveDialog.d.ts +15 -0
- package/dist/admin/src/components/BulkMoveDialog/index.d.ts +1 -0
- package/dist/admin/src/components/ContextInfo/ContextInfo.d.ts +8 -0
- package/dist/admin/src/components/ContextInfo/index.d.ts +1 -0
- package/dist/admin/src/components/CopyLinkButton/index.d.ts +3 -0
- package/dist/admin/src/components/EditAssetDialog/DialogHeader.d.ts +1 -0
- package/dist/admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.d.ts +9 -0
- package/dist/admin/src/components/EditAssetDialog/PreviewBox/CroppingActions.d.ts +7 -0
- package/dist/admin/src/components/EditAssetDialog/PreviewBox/components.d.ts +17 -0
- package/dist/admin/src/components/EditAssetDialog/PreviewBox/index.d.ts +23 -0
- package/dist/admin/src/components/EditAssetDialog/RemoveAssetDialog.d.ts +8 -0
- package/dist/admin/src/components/EditAssetDialog/ReplaceMediaButton.d.ts +8 -0
- package/dist/admin/src/components/EditAssetDialog/index.d.ts +28 -0
- package/dist/admin/src/components/EditFolderDialog/EditFolderDialog.d.ts +10 -0
- package/dist/admin/src/components/EditFolderDialog/ModalHeader/ModalHeader.d.ts +5 -0
- package/dist/admin/src/components/EditFolderDialog/ModalHeader/index.d.ts +2 -0
- package/dist/admin/src/components/EditFolderDialog/RemoveFolderDialog.d.ts +7 -0
- package/dist/admin/src/components/EditFolderDialog/index.d.ts +1 -0
- package/dist/admin/src/components/EmptyAssets/EmptyAssetGrid.d.ts +6 -0
- package/dist/admin/src/components/EmptyAssets/index.d.ts +10 -0
- package/dist/admin/src/components/FilterList/FilterTag.d.ts +23 -0
- package/dist/admin/src/components/FilterList/index.d.ts +33 -0
- package/dist/admin/src/components/FilterPopover/FilterValueInput.d.ts +12 -0
- package/dist/admin/src/components/FilterPopover/index.d.ts +31 -0
- package/dist/admin/src/components/FilterPopover/utils/getFilterList.d.ts +21 -0
- package/dist/admin/src/components/FolderCard/FolderCard/FolderCard.d.ts +13 -0
- package/dist/admin/src/components/FolderCard/FolderCard/index.d.ts +1 -0
- package/dist/admin/src/components/FolderCard/FolderCardBody/FolderCardBody.d.ts +2 -0
- package/dist/admin/src/components/FolderCard/FolderCardBody/index.d.ts +1 -0
- package/dist/admin/src/components/FolderCard/FolderCardBodyAction/index.d.ts +7 -0
- package/dist/admin/src/components/FolderCard/FolderCardCheckbox/FolderCardCheckbox.d.ts +2 -0
- package/dist/admin/src/components/FolderCard/FolderCardCheckbox/index.d.ts +1 -0
- package/dist/admin/src/components/FolderCard/contexts/FolderCard.d.ts +7 -0
- package/dist/admin/src/components/FolderCard/index.d.ts +4 -0
- package/dist/admin/src/components/FolderGridList/FolderGridList.d.ts +7 -0
- package/dist/admin/src/components/FolderGridList/index.d.ts +1 -0
- package/dist/admin/src/components/MediaLibraryDialog/index.d.ts +9 -0
- package/dist/admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.d.ts +4 -0
- package/dist/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.d.ts +9 -0
- package/dist/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.d.ts +22 -0
- package/dist/admin/src/components/MediaLibraryInput/Carousel/EmptyStateAsset.d.ts +10 -0
- package/dist/admin/src/components/MediaLibraryInput/index.d.ts +17 -0
- package/dist/admin/src/components/SelectTree/Option.d.ts +16 -0
- package/dist/admin/src/components/SelectTree/SelectTree.d.ts +23 -0
- package/dist/admin/src/components/SelectTree/index.d.ts +2 -0
- package/dist/admin/src/components/SelectTree/utils/getOpenValues.d.ts +9 -0
- package/dist/admin/src/components/SelectTree/utils/getValuesToClose.d.ts +6 -0
- package/dist/admin/src/components/SortPicker/index.d.ts +7 -0
- package/dist/admin/src/components/TableList/CellContent.d.ts +8 -0
- package/dist/admin/src/components/TableList/PreviewCell.d.ts +7 -0
- package/dist/admin/src/components/TableList/TableRows.d.ts +22 -0
- package/dist/admin/src/components/TableList/index.d.ts +31 -0
- package/dist/admin/src/components/UploadAssetDialog/AddAssetStep/AddAssetStep.d.ts +13 -0
- package/dist/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.d.ts +8 -0
- package/dist/admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.d.ts +8 -0
- package/dist/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.d.ts +22 -0
- package/dist/admin/src/components/UploadAssetDialog/UploadAssetDialog.d.ts +21 -0
- package/dist/admin/src/components/UploadProgress/index.d.ts +7 -0
- package/dist/admin/src/hooks/useBulkMove.d.ts +5 -5
- package/dist/admin/src/hooks/useBulkRemove.d.ts +17 -20
- package/dist/admin/src/hooks/useEditAsset.d.ts +4 -4
- package/dist/admin/src/hooks/useEditFolder.d.ts +4 -4
- package/dist/admin/src/hooks/useFolder.d.ts +1 -1
- package/dist/admin/src/hooks/useFolderStructure.d.ts +7 -1
- package/dist/admin/src/hooks/useMediaLibraryPermissions.d.ts +5 -1
- package/dist/admin/src/hooks/useModalQueryParams.d.ts +1 -1
- package/dist/admin/src/hooks/useUpload.d.ts +7 -4
- package/dist/admin/src/newConstants.d.ts +24 -0
- package/dist/admin/src/utils/findRecursiveFolderByValue.d.ts +3 -2
- package/dist/admin/src/utils/getAllowedFiles.d.ts +1 -2
- package/dist/admin/src/utils/getBreadcrumbDataCM.d.ts +1 -1
- package/dist/admin/src/utils/getFolderParents.d.ts +4 -3
- package/dist/admin/src/utils/moveElement.d.ts +1 -1
- package/dist/admin/src/utils/urlsToAssets.d.ts +1 -1
- package/dist/shared/contracts/files.d.ts +10 -6
- package/dist/shared/contracts/folders.d.ts +23 -2
- package/package.json +8 -8
- package/dist/_chunks/index-BHcSb0I3.js.map +0 -1
- package/dist/_chunks/index-Bi33Km2i.mjs.map +0 -1
- package/dist/_chunks/index-BjvAmZvH.mjs.map +0 -1
- package/dist/_chunks/index-DlRn6eNH.js.map +0 -1
|
@@ -2,16 +2,15 @@
|
|
|
2
2
|
const icons = require("@strapi/icons");
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
|
-
const PropTypes = require("prop-types");
|
|
6
5
|
const strapiAdmin = require("@strapi/admin/strapi-admin");
|
|
7
6
|
const designSystem = require("@strapi/design-system");
|
|
8
7
|
const reactIntl = require("react-intl");
|
|
9
8
|
const styledComponents = require("styled-components");
|
|
9
|
+
const reactQuery = require("react-query");
|
|
10
|
+
const qs = require("qs");
|
|
10
11
|
const byteSize = require("byte-size");
|
|
11
12
|
const dateFns = require("date-fns");
|
|
12
|
-
const qs = require("qs");
|
|
13
13
|
const yup = require("yup");
|
|
14
|
-
const reactQuery = require("react-query");
|
|
15
14
|
const formik = require("formik");
|
|
16
15
|
const isEqual = require("lodash/isEqual");
|
|
17
16
|
const ReactSelect = require("react-select");
|
|
@@ -22,6 +21,7 @@ const reactDnd = require("react-dnd");
|
|
|
22
21
|
const reactRouterDom = require("react-router-dom");
|
|
23
22
|
const symbols = require("@strapi/icons/symbols");
|
|
24
23
|
const parseISO = require("date-fns/parseISO");
|
|
24
|
+
const PropTypes = require("prop-types");
|
|
25
25
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
26
26
|
function _interopNamespace(e) {
|
|
27
27
|
if (e && e.__esModule)
|
|
@@ -42,7 +42,6 @@ function _interopNamespace(e) {
|
|
|
42
42
|
return Object.freeze(n);
|
|
43
43
|
}
|
|
44
44
|
const React__namespace = /* @__PURE__ */ _interopNamespace(React);
|
|
45
|
-
const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
|
|
46
45
|
const byteSize__default = /* @__PURE__ */ _interopDefault(byteSize);
|
|
47
46
|
const yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
|
|
48
47
|
const isEqual__default = /* @__PURE__ */ _interopDefault(isEqual);
|
|
@@ -50,6 +49,7 @@ const ReactSelect__default = /* @__PURE__ */ _interopDefault(ReactSelect);
|
|
|
50
49
|
const Cropper__default = /* @__PURE__ */ _interopDefault(Cropper);
|
|
51
50
|
const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
|
|
52
51
|
const parseISO__default = /* @__PURE__ */ _interopDefault(parseISO);
|
|
52
|
+
const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
|
|
53
53
|
const __variableDynamicImportRuntimeHelper = (glob, path) => {
|
|
54
54
|
const v = glob[path];
|
|
55
55
|
if (v) {
|
|
@@ -60,7 +60,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
|
|
|
60
60
|
});
|
|
61
61
|
};
|
|
62
62
|
const name$1 = "@strapi/upload";
|
|
63
|
-
const version = "5.
|
|
63
|
+
const version = "5.2.0";
|
|
64
64
|
const description = "Makes it easy to upload images and files to your Strapi Application.";
|
|
65
65
|
const license = "SEE LICENSE IN LICENSE";
|
|
66
66
|
const author = {
|
|
@@ -116,8 +116,8 @@ const scripts = {
|
|
|
116
116
|
watch: "pack-up watch"
|
|
117
117
|
};
|
|
118
118
|
const dependencies = {
|
|
119
|
-
"@strapi/design-system": "2.0.0-rc.
|
|
120
|
-
"@strapi/icons": "2.0.0-rc.
|
|
119
|
+
"@strapi/design-system": "2.0.0-rc.12",
|
|
120
|
+
"@strapi/icons": "2.0.0-rc.12",
|
|
121
121
|
"@strapi/provider-upload-local": "workspace:*",
|
|
122
122
|
"@strapi/utils": "workspace:*",
|
|
123
123
|
"byte-size": "8.1.1",
|
|
@@ -195,6 +195,148 @@ const pluginPkg = {
|
|
|
195
195
|
engines,
|
|
196
196
|
strapi
|
|
197
197
|
};
|
|
198
|
+
const pluginId = pluginPkg.name.replace(/^@strapi\//i, "");
|
|
199
|
+
const useAssets = ({ skipWhen = false, query = {} } = {}) => {
|
|
200
|
+
const { formatMessage } = reactIntl.useIntl();
|
|
201
|
+
const { toggleNotification } = strapiAdmin.useNotification();
|
|
202
|
+
const { notifyStatus } = designSystem.useNotifyAT();
|
|
203
|
+
const { get } = strapiAdmin.useFetchClient();
|
|
204
|
+
const { folderPath, _q, ...paramsExceptFolderAndQ } = query;
|
|
205
|
+
let params;
|
|
206
|
+
if (_q) {
|
|
207
|
+
params = {
|
|
208
|
+
...paramsExceptFolderAndQ,
|
|
209
|
+
_q: encodeURIComponent(_q)
|
|
210
|
+
};
|
|
211
|
+
} else {
|
|
212
|
+
params = {
|
|
213
|
+
...paramsExceptFolderAndQ,
|
|
214
|
+
filters: {
|
|
215
|
+
$and: [
|
|
216
|
+
...paramsExceptFolderAndQ?.filters?.$and ?? [],
|
|
217
|
+
{
|
|
218
|
+
folderPath: { $eq: folderPath ?? "/" }
|
|
219
|
+
}
|
|
220
|
+
]
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
const { data, error, isLoading } = reactQuery.useQuery(
|
|
225
|
+
[pluginId, "assets", params],
|
|
226
|
+
async () => {
|
|
227
|
+
const { data: data2 } = await get("/upload/files", { params });
|
|
228
|
+
return data2;
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
enabled: !skipWhen,
|
|
232
|
+
staleTime: 0,
|
|
233
|
+
cacheTime: 0,
|
|
234
|
+
select(data2) {
|
|
235
|
+
if (data2?.results && Array.isArray(data2.results)) {
|
|
236
|
+
return {
|
|
237
|
+
...data2,
|
|
238
|
+
results: data2.results.filter((asset) => asset.name).map((asset) => ({
|
|
239
|
+
...asset,
|
|
240
|
+
/**
|
|
241
|
+
* Mime and ext cannot be null in the front-end because
|
|
242
|
+
* we expect them to be strings and use the `includes` method.
|
|
243
|
+
*/
|
|
244
|
+
mime: asset.mime ?? "",
|
|
245
|
+
ext: asset.ext ?? ""
|
|
246
|
+
}))
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
return data2;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
);
|
|
253
|
+
React__namespace.useEffect(() => {
|
|
254
|
+
if (data) {
|
|
255
|
+
notifyStatus(
|
|
256
|
+
formatMessage({
|
|
257
|
+
id: "list.asset.at.finished",
|
|
258
|
+
defaultMessage: "The assets have finished loading."
|
|
259
|
+
})
|
|
260
|
+
);
|
|
261
|
+
}
|
|
262
|
+
}, [data, formatMessage, notifyStatus]);
|
|
263
|
+
React__namespace.useEffect(() => {
|
|
264
|
+
if (error) {
|
|
265
|
+
toggleNotification({
|
|
266
|
+
type: "danger",
|
|
267
|
+
message: formatMessage({ id: "notification.error" })
|
|
268
|
+
});
|
|
269
|
+
}
|
|
270
|
+
}, [error, formatMessage, toggleNotification]);
|
|
271
|
+
return { data, error, isLoading };
|
|
272
|
+
};
|
|
273
|
+
const useFolders = ({ enabled = true, query = {} } = {}) => {
|
|
274
|
+
const { formatMessage } = reactIntl.useIntl();
|
|
275
|
+
const { toggleNotification } = strapiAdmin.useNotification();
|
|
276
|
+
const { notifyStatus } = designSystem.useNotifyAT();
|
|
277
|
+
const { folder, _q, ...paramsExceptFolderAndQ } = query;
|
|
278
|
+
const { get } = strapiAdmin.useFetchClient();
|
|
279
|
+
let params;
|
|
280
|
+
if (_q) {
|
|
281
|
+
params = {
|
|
282
|
+
...paramsExceptFolderAndQ,
|
|
283
|
+
pagination: {
|
|
284
|
+
pageSize: -1
|
|
285
|
+
},
|
|
286
|
+
_q
|
|
287
|
+
};
|
|
288
|
+
} else {
|
|
289
|
+
params = {
|
|
290
|
+
...paramsExceptFolderAndQ,
|
|
291
|
+
pagination: {
|
|
292
|
+
pageSize: -1
|
|
293
|
+
},
|
|
294
|
+
filters: {
|
|
295
|
+
$and: [
|
|
296
|
+
...paramsExceptFolderAndQ?.filters?.$and ?? [],
|
|
297
|
+
{
|
|
298
|
+
parent: {
|
|
299
|
+
id: folder ?? {
|
|
300
|
+
$null: true
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
]
|
|
305
|
+
}
|
|
306
|
+
};
|
|
307
|
+
}
|
|
308
|
+
const { data, error, isLoading } = reactQuery.useQuery(
|
|
309
|
+
[pluginId, "folders", qs.stringify(params)],
|
|
310
|
+
async () => {
|
|
311
|
+
const {
|
|
312
|
+
data: { data: data2 }
|
|
313
|
+
} = await get("/upload/folders", { params });
|
|
314
|
+
return data2;
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
enabled,
|
|
318
|
+
staleTime: 0,
|
|
319
|
+
cacheTime: 0,
|
|
320
|
+
onError() {
|
|
321
|
+
toggleNotification({
|
|
322
|
+
type: "danger",
|
|
323
|
+
message: formatMessage({ id: "notification.error" })
|
|
324
|
+
});
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
);
|
|
328
|
+
React__namespace.useEffect(() => {
|
|
329
|
+
if (data) {
|
|
330
|
+
notifyStatus(
|
|
331
|
+
formatMessage({
|
|
332
|
+
id: "list.asset.at.finished",
|
|
333
|
+
defaultMessage: "The folders have finished loading."
|
|
334
|
+
})
|
|
335
|
+
);
|
|
336
|
+
}
|
|
337
|
+
}, [data, formatMessage, notifyStatus]);
|
|
338
|
+
return { data, error, isLoading };
|
|
339
|
+
};
|
|
198
340
|
const appendSearchParamsToUrl = ({ url, params }) => {
|
|
199
341
|
if (url === void 0 || typeof params !== "object") {
|
|
200
342
|
return url;
|
|
@@ -364,8 +506,7 @@ function getAPIInnerErrors(error, { getTrad: getTrad2 }) {
|
|
|
364
506
|
}
|
|
365
507
|
return normalizedError?.defaultMessage;
|
|
366
508
|
}
|
|
367
|
-
const
|
|
368
|
-
const getTrad = (id2) => `${pluginId}.${id2}`;
|
|
509
|
+
const getTrad = (id) => `${pluginId}.${id}`;
|
|
369
510
|
const getBreadcrumbDataCM = (folder) => {
|
|
370
511
|
let data = [
|
|
371
512
|
{
|
|
@@ -445,68 +586,17 @@ const prefixPluginTranslations = (trad, pluginId2) => {
|
|
|
445
586
|
return acc;
|
|
446
587
|
}, {});
|
|
447
588
|
};
|
|
448
|
-
var AssetType$1 = /* @__PURE__ */ ((AssetType2) => {
|
|
449
|
-
AssetType2["Video"] = "video";
|
|
450
|
-
AssetType2["Image"] = "image";
|
|
451
|
-
AssetType2["Document"] = "doc";
|
|
452
|
-
AssetType2["Audio"] = "audio";
|
|
453
|
-
return AssetType2;
|
|
454
|
-
})(AssetType$1 || {});
|
|
455
|
-
var AssetSource$1 = /* @__PURE__ */ ((AssetSource2) => {
|
|
456
|
-
AssetSource2["Url"] = "url";
|
|
457
|
-
AssetSource2["Computer"] = "computer";
|
|
458
|
-
return AssetSource2;
|
|
459
|
-
})(AssetSource$1 || {});
|
|
460
|
-
const PERMISSIONS$1 = {
|
|
461
|
-
// This permission regards the main component (App) and is used to tell
|
|
462
|
-
// If the plugin link should be displayed in the menu
|
|
463
|
-
// And also if the plugin is accessible. This use case is found when a user types the url of the
|
|
464
|
-
// plugin directly in the browser
|
|
465
|
-
main: [
|
|
466
|
-
{ action: "plugin::upload.read", subject: null },
|
|
467
|
-
{
|
|
468
|
-
action: "plugin::upload.assets.create",
|
|
469
|
-
subject: null
|
|
470
|
-
},
|
|
471
|
-
{
|
|
472
|
-
action: "plugin::upload.assets.update",
|
|
473
|
-
subject: null
|
|
474
|
-
}
|
|
475
|
-
],
|
|
476
|
-
copyLink: [
|
|
477
|
-
{
|
|
478
|
-
action: "plugin::upload.assets.copy-link",
|
|
479
|
-
subject: null
|
|
480
|
-
}
|
|
481
|
-
],
|
|
482
|
-
create: [
|
|
483
|
-
{
|
|
484
|
-
action: "plugin::upload.assets.create",
|
|
485
|
-
subject: null
|
|
486
|
-
}
|
|
487
|
-
],
|
|
488
|
-
download: [
|
|
489
|
-
{
|
|
490
|
-
action: "plugin::upload.assets.download",
|
|
491
|
-
subject: null
|
|
492
|
-
}
|
|
493
|
-
],
|
|
494
|
-
read: [{ action: "plugin::upload.read", subject: null }],
|
|
495
|
-
configureView: [{ action: "plugin::upload.configure-view", subject: null }],
|
|
496
|
-
settings: [{ action: "plugin::upload.settings.read", subject: null }],
|
|
497
|
-
update: [{ action: "plugin::upload.assets.update", subject: null, fields: null }]
|
|
498
|
-
};
|
|
499
589
|
const typeFromMime = (mime) => {
|
|
500
|
-
if (mime.includes(AssetType
|
|
501
|
-
return AssetType
|
|
590
|
+
if (mime.includes(AssetType.Image)) {
|
|
591
|
+
return AssetType.Image;
|
|
502
592
|
}
|
|
503
|
-
if (mime.includes(AssetType
|
|
504
|
-
return AssetType
|
|
593
|
+
if (mime.includes(AssetType.Video)) {
|
|
594
|
+
return AssetType.Video;
|
|
505
595
|
}
|
|
506
|
-
if (mime.includes(AssetType
|
|
507
|
-
return AssetType
|
|
596
|
+
if (mime.includes(AssetType.Audio)) {
|
|
597
|
+
return AssetType.Audio;
|
|
508
598
|
}
|
|
509
|
-
return AssetType
|
|
599
|
+
return AssetType.Document;
|
|
510
600
|
};
|
|
511
601
|
const rawFileToAsset = (rawFile, assetSource) => {
|
|
512
602
|
return {
|
|
@@ -542,12 +632,12 @@ const urlsToAssets = async (urls) => {
|
|
|
542
632
|
);
|
|
543
633
|
const assetsResults = await Promise.all(assetPromises);
|
|
544
634
|
const assets = assetsResults.map((fullFilledAsset) => ({
|
|
545
|
-
source: AssetSource
|
|
635
|
+
source: AssetSource.Url,
|
|
546
636
|
name: fullFilledAsset.name,
|
|
547
637
|
type: typeFromMime(fullFilledAsset.mime),
|
|
548
638
|
url: fullFilledAsset.url,
|
|
549
639
|
ext: fullFilledAsset.url.split(".").pop(),
|
|
550
|
-
mime: fullFilledAsset.mime,
|
|
640
|
+
mime: fullFilledAsset.mime ? fullFilledAsset.mime : void 0,
|
|
551
641
|
rawFile: fullFilledAsset.rawFile
|
|
552
642
|
}));
|
|
553
643
|
return assets;
|
|
@@ -592,91 +682,56 @@ const urlSchema = yup__namespace.object().shape({
|
|
|
592
682
|
}
|
|
593
683
|
})
|
|
594
684
|
});
|
|
595
|
-
|
|
596
|
-
Video
|
|
597
|
-
Image
|
|
598
|
-
Document
|
|
599
|
-
Audio
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
width: PropTypes__default.default.number,
|
|
646
|
-
size: PropTypes__default.default.number,
|
|
647
|
-
createdAt: PropTypes__default.default.string,
|
|
648
|
-
ext: PropTypes__default.default.string,
|
|
649
|
-
mime: PropTypes__default.default.string,
|
|
650
|
-
name: PropTypes__default.default.string,
|
|
651
|
-
url: PropTypes__default.default.string,
|
|
652
|
-
updatedAt: PropTypes__default.default.string,
|
|
653
|
-
alternativeText: PropTypes__default.default.string,
|
|
654
|
-
caption: PropTypes__default.default.string,
|
|
655
|
-
folder: PropTypes__default.default.shape(FolderDefinition),
|
|
656
|
-
formats: PropTypes__default.default.shape({
|
|
657
|
-
thumbnail: PropTypes__default.default.shape({
|
|
658
|
-
url: PropTypes__default.default.string
|
|
659
|
-
})
|
|
660
|
-
})
|
|
661
|
-
});
|
|
662
|
-
const CrumbDefinition = PropTypes__default.default.shape({
|
|
663
|
-
id: PropTypes__default.default.number,
|
|
664
|
-
label: PropTypes__default.default.oneOfType([
|
|
665
|
-
PropTypes__default.default.string,
|
|
666
|
-
PropTypes__default.default.shape({
|
|
667
|
-
id: PropTypes__default.default.string.isRequired,
|
|
668
|
-
defaultMessage: PropTypes__default.default.string.isRequired
|
|
669
|
-
})
|
|
670
|
-
]).isRequired,
|
|
671
|
-
href: PropTypes__default.default.string
|
|
672
|
-
});
|
|
673
|
-
const CrumbMenuDefinition = PropTypes__default.default.arrayOf(CrumbDefinition);
|
|
674
|
-
const BreadcrumbsDefinition = PropTypes__default.default.arrayOf(
|
|
675
|
-
PropTypes__default.default.oneOfType([CrumbDefinition, CrumbMenuDefinition])
|
|
676
|
-
);
|
|
677
|
-
const viewOptions = {
|
|
678
|
-
GRID: 0,
|
|
679
|
-
LIST: 1
|
|
685
|
+
var AssetType = /* @__PURE__ */ ((AssetType2) => {
|
|
686
|
+
AssetType2["Video"] = "video";
|
|
687
|
+
AssetType2["Image"] = "image";
|
|
688
|
+
AssetType2["Document"] = "doc";
|
|
689
|
+
AssetType2["Audio"] = "audio";
|
|
690
|
+
return AssetType2;
|
|
691
|
+
})(AssetType || {});
|
|
692
|
+
var AssetSource = /* @__PURE__ */ ((AssetSource2) => {
|
|
693
|
+
AssetSource2["Url"] = "url";
|
|
694
|
+
AssetSource2["Computer"] = "computer";
|
|
695
|
+
return AssetSource2;
|
|
696
|
+
})(AssetSource || {});
|
|
697
|
+
const PERMISSIONS$1 = {
|
|
698
|
+
// This permission regards the main component (App) and is used to tell
|
|
699
|
+
// If the plugin link should be displayed in the menu
|
|
700
|
+
// And also if the plugin is accessible. This use case is found when a user types the url of the
|
|
701
|
+
// plugin directly in the browser
|
|
702
|
+
main: [
|
|
703
|
+
{ action: "plugin::upload.read", subject: null },
|
|
704
|
+
{
|
|
705
|
+
action: "plugin::upload.assets.create",
|
|
706
|
+
subject: null
|
|
707
|
+
},
|
|
708
|
+
{
|
|
709
|
+
action: "plugin::upload.assets.update",
|
|
710
|
+
subject: null
|
|
711
|
+
}
|
|
712
|
+
],
|
|
713
|
+
copyLink: [
|
|
714
|
+
{
|
|
715
|
+
action: "plugin::upload.assets.copy-link",
|
|
716
|
+
subject: null
|
|
717
|
+
}
|
|
718
|
+
],
|
|
719
|
+
create: [
|
|
720
|
+
{
|
|
721
|
+
action: "plugin::upload.assets.create",
|
|
722
|
+
subject: null
|
|
723
|
+
}
|
|
724
|
+
],
|
|
725
|
+
download: [
|
|
726
|
+
{
|
|
727
|
+
action: "plugin::upload.assets.download",
|
|
728
|
+
subject: null
|
|
729
|
+
}
|
|
730
|
+
],
|
|
731
|
+
read: [{ action: "plugin::upload.read", subject: null }],
|
|
732
|
+
configureView: [{ action: "plugin::upload.configure-view", subject: null }],
|
|
733
|
+
settings: [{ action: "plugin::upload.settings.read", subject: null }],
|
|
734
|
+
update: [{ action: "plugin::upload.assets.update", subject: null, fields: null }]
|
|
680
735
|
};
|
|
681
736
|
const tableHeaders = [
|
|
682
737
|
{
|
|
@@ -722,210 +777,33 @@ const tableHeaders = [
|
|
|
722
777
|
label: { id: getTrad("list.table.header.createdAt"), defaultMessage: "created" },
|
|
723
778
|
isSortable: true
|
|
724
779
|
},
|
|
725
|
-
type: "date"
|
|
726
|
-
},
|
|
727
|
-
{
|
|
728
|
-
name: "updatedAt",
|
|
729
|
-
key: "updatedAt",
|
|
730
|
-
metadatas: {
|
|
731
|
-
label: { id: getTrad("list.table.header.updatedAt"), defaultMessage: "last update" },
|
|
732
|
-
isSortable: true
|
|
733
|
-
},
|
|
734
|
-
type: "date"
|
|
735
|
-
}
|
|
736
|
-
];
|
|
737
|
-
const
|
|
738
|
-
|
|
739
|
-
{ key: "sort.
|
|
740
|
-
{ key: "sort.
|
|
741
|
-
{ key: "sort.
|
|
742
|
-
{ key: "sort.
|
|
743
|
-
{ key: "sort.
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
// If the plugin link should be displayed in the menu
|
|
753
|
-
// And also if the plugin is accessible. This use case is found when a user types the url of the
|
|
754
|
-
// plugin directly in the browser
|
|
755
|
-
main: [
|
|
756
|
-
{ action: "plugin::upload.read", subject: null },
|
|
757
|
-
{
|
|
758
|
-
action: "plugin::upload.assets.create",
|
|
759
|
-
subject: null
|
|
760
|
-
},
|
|
761
|
-
{
|
|
762
|
-
action: "plugin::upload.assets.update",
|
|
763
|
-
subject: null
|
|
764
|
-
}
|
|
765
|
-
],
|
|
766
|
-
copyLink: [
|
|
767
|
-
{
|
|
768
|
-
action: "plugin::upload.assets.copy-link",
|
|
769
|
-
subject: null
|
|
770
|
-
}
|
|
771
|
-
],
|
|
772
|
-
create: [
|
|
773
|
-
{
|
|
774
|
-
action: "plugin::upload.assets.create",
|
|
775
|
-
subject: null
|
|
776
|
-
}
|
|
777
|
-
],
|
|
778
|
-
download: [
|
|
779
|
-
{
|
|
780
|
-
action: "plugin::upload.assets.download",
|
|
781
|
-
subject: null
|
|
782
|
-
}
|
|
783
|
-
],
|
|
784
|
-
read: [{ action: "plugin::upload.read", subject: null }],
|
|
785
|
-
configureView: [{ action: "plugin::upload.configure-view", subject: null }],
|
|
786
|
-
settings: [{ action: "plugin::upload.settings.read", subject: null }],
|
|
787
|
-
update: [{ action: "plugin::upload.assets.update", subject: null, fields: null }]
|
|
788
|
-
};
|
|
789
|
-
const useAssets = ({ skipWhen = false, query = {} } = {}) => {
|
|
790
|
-
const { formatMessage } = reactIntl.useIntl();
|
|
791
|
-
const { toggleNotification } = strapiAdmin.useNotification();
|
|
792
|
-
const { notifyStatus } = designSystem.useNotifyAT();
|
|
793
|
-
const { get } = strapiAdmin.useFetchClient();
|
|
794
|
-
const { folderPath, _q, ...paramsExceptFolderAndQ } = query;
|
|
795
|
-
let params;
|
|
796
|
-
if (_q) {
|
|
797
|
-
params = {
|
|
798
|
-
...paramsExceptFolderAndQ,
|
|
799
|
-
_q: encodeURIComponent(_q)
|
|
800
|
-
};
|
|
801
|
-
} else {
|
|
802
|
-
params = {
|
|
803
|
-
...paramsExceptFolderAndQ,
|
|
804
|
-
filters: {
|
|
805
|
-
$and: [
|
|
806
|
-
...paramsExceptFolderAndQ?.filters?.$and ?? [],
|
|
807
|
-
{
|
|
808
|
-
folderPath: { $eq: folderPath ?? "/" }
|
|
809
|
-
}
|
|
810
|
-
]
|
|
811
|
-
}
|
|
812
|
-
};
|
|
813
|
-
}
|
|
814
|
-
const { data, error, isLoading } = reactQuery.useQuery(
|
|
815
|
-
[pluginId, "assets", params],
|
|
816
|
-
async () => {
|
|
817
|
-
const { data: data2 } = await get("/upload/files", { params });
|
|
818
|
-
return data2;
|
|
819
|
-
},
|
|
820
|
-
{
|
|
821
|
-
enabled: !skipWhen,
|
|
822
|
-
staleTime: 0,
|
|
823
|
-
cacheTime: 0,
|
|
824
|
-
select(data2) {
|
|
825
|
-
if (data2?.results && Array.isArray(data2.results)) {
|
|
826
|
-
return {
|
|
827
|
-
...data2,
|
|
828
|
-
results: data2.results.filter((asset) => asset.name).map((asset) => ({
|
|
829
|
-
...asset,
|
|
830
|
-
/**
|
|
831
|
-
* Mime and ext cannot be null in the front-end because
|
|
832
|
-
* we expect them to be strings and use the `includes` method.
|
|
833
|
-
*/
|
|
834
|
-
mime: asset.mime ?? "",
|
|
835
|
-
ext: asset.ext ?? ""
|
|
836
|
-
}))
|
|
837
|
-
};
|
|
838
|
-
}
|
|
839
|
-
return data2;
|
|
840
|
-
}
|
|
841
|
-
}
|
|
842
|
-
);
|
|
843
|
-
React__namespace.useEffect(() => {
|
|
844
|
-
if (data) {
|
|
845
|
-
notifyStatus(
|
|
846
|
-
formatMessage({
|
|
847
|
-
id: "list.asset.at.finished",
|
|
848
|
-
defaultMessage: "The assets have finished loading."
|
|
849
|
-
})
|
|
850
|
-
);
|
|
851
|
-
}
|
|
852
|
-
}, [data, formatMessage, notifyStatus]);
|
|
853
|
-
React__namespace.useEffect(() => {
|
|
854
|
-
if (error) {
|
|
855
|
-
toggleNotification({
|
|
856
|
-
type: "danger",
|
|
857
|
-
message: formatMessage({ id: "notification.error" })
|
|
858
|
-
});
|
|
859
|
-
}
|
|
860
|
-
}, [error, formatMessage, toggleNotification]);
|
|
861
|
-
return { data, error, isLoading };
|
|
862
|
-
};
|
|
863
|
-
const useFolders = ({ enabled = true, query = {} } = {}) => {
|
|
864
|
-
const { formatMessage } = reactIntl.useIntl();
|
|
865
|
-
const { toggleNotification } = strapiAdmin.useNotification();
|
|
866
|
-
const { notifyStatus } = designSystem.useNotifyAT();
|
|
867
|
-
const { folder, _q, ...paramsExceptFolderAndQ } = query;
|
|
868
|
-
const { get } = strapiAdmin.useFetchClient();
|
|
869
|
-
let params;
|
|
870
|
-
if (_q) {
|
|
871
|
-
params = {
|
|
872
|
-
...paramsExceptFolderAndQ,
|
|
873
|
-
pagination: {
|
|
874
|
-
pageSize: -1
|
|
875
|
-
},
|
|
876
|
-
_q
|
|
877
|
-
};
|
|
878
|
-
} else {
|
|
879
|
-
params = {
|
|
880
|
-
...paramsExceptFolderAndQ,
|
|
881
|
-
pagination: {
|
|
882
|
-
pageSize: -1
|
|
883
|
-
},
|
|
884
|
-
filters: {
|
|
885
|
-
$and: [
|
|
886
|
-
...paramsExceptFolderAndQ?.filters?.$and ?? [],
|
|
887
|
-
{
|
|
888
|
-
parent: {
|
|
889
|
-
id: folder ?? {
|
|
890
|
-
$null: true
|
|
891
|
-
}
|
|
892
|
-
}
|
|
893
|
-
}
|
|
894
|
-
]
|
|
895
|
-
}
|
|
896
|
-
};
|
|
897
|
-
}
|
|
898
|
-
const { data, error, isLoading } = reactQuery.useQuery(
|
|
899
|
-
[pluginId, "folders", qs.stringify(params)],
|
|
900
|
-
async () => {
|
|
901
|
-
const {
|
|
902
|
-
data: { data: data2 }
|
|
903
|
-
} = await get("/upload/folders", { params });
|
|
904
|
-
return data2;
|
|
905
|
-
},
|
|
906
|
-
{
|
|
907
|
-
enabled,
|
|
908
|
-
staleTime: 0,
|
|
909
|
-
cacheTime: 0,
|
|
910
|
-
onError() {
|
|
911
|
-
toggleNotification({
|
|
912
|
-
type: "danger",
|
|
913
|
-
message: formatMessage({ id: "notification.error" })
|
|
914
|
-
});
|
|
915
|
-
}
|
|
916
|
-
}
|
|
917
|
-
);
|
|
918
|
-
React__namespace.useEffect(() => {
|
|
919
|
-
if (data) {
|
|
920
|
-
notifyStatus(
|
|
921
|
-
formatMessage({
|
|
922
|
-
id: "list.asset.at.finished",
|
|
923
|
-
defaultMessage: "The folders have finished loading."
|
|
924
|
-
})
|
|
925
|
-
);
|
|
926
|
-
}
|
|
927
|
-
}, [data, formatMessage, notifyStatus]);
|
|
928
|
-
return { data, error, isLoading };
|
|
780
|
+
type: "date"
|
|
781
|
+
},
|
|
782
|
+
{
|
|
783
|
+
name: "updatedAt",
|
|
784
|
+
key: "updatedAt",
|
|
785
|
+
metadatas: {
|
|
786
|
+
label: { id: getTrad("list.table.header.updatedAt"), defaultMessage: "last update" },
|
|
787
|
+
isSortable: true
|
|
788
|
+
},
|
|
789
|
+
type: "date"
|
|
790
|
+
}
|
|
791
|
+
];
|
|
792
|
+
const sortOptions$1 = [
|
|
793
|
+
{ key: "sort.created_at_desc", value: "createdAt:DESC" },
|
|
794
|
+
{ key: "sort.created_at_asc", value: "createdAt:ASC" },
|
|
795
|
+
{ key: "sort.name_asc", value: "name:ASC" },
|
|
796
|
+
{ key: "sort.name_desc", value: "name:DESC" },
|
|
797
|
+
{ key: "sort.updated_at_desc", value: "updatedAt:DESC" },
|
|
798
|
+
{ key: "sort.updated_at_asc", value: "updatedAt:ASC" }
|
|
799
|
+
];
|
|
800
|
+
const localStorageKeys$1 = {
|
|
801
|
+
modalView: `STRAPI_UPLOAD_MODAL_VIEW`,
|
|
802
|
+
view: `STRAPI_UPLOAD_LIBRARY_VIEW`
|
|
803
|
+
};
|
|
804
|
+
const viewOptions$1 = {
|
|
805
|
+
GRID: 0,
|
|
806
|
+
LIST: 1
|
|
929
807
|
};
|
|
930
808
|
const { main, ...restPermissions } = PERMISSIONS$1;
|
|
931
809
|
const useMediaLibraryPermissions = () => {
|
|
@@ -1225,14 +1103,6 @@ const ContextInfo = ({ blocks }) => {
|
|
|
1225
1103
|
}
|
|
1226
1104
|
);
|
|
1227
1105
|
};
|
|
1228
|
-
ContextInfo.propTypes = {
|
|
1229
|
-
blocks: PropTypes__default.default.arrayOf(
|
|
1230
|
-
PropTypes__default.default.shape({
|
|
1231
|
-
label: PropTypes__default.default.string,
|
|
1232
|
-
value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
|
|
1233
|
-
})
|
|
1234
|
-
).isRequired
|
|
1235
|
-
};
|
|
1236
1106
|
const ToggleButton = styledComponents.styled(designSystem.Flex)`
|
|
1237
1107
|
align-self: flex-end;
|
|
1238
1108
|
height: 2.2rem;
|
|
@@ -1249,9 +1119,9 @@ const Option = ({ children, data, selectProps, ...props }) => {
|
|
|
1249
1119
|
const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
|
|
1250
1120
|
const isOpen = openValues.includes(value);
|
|
1251
1121
|
const Icon = isOpen ? icons.ChevronUp : icons.ChevronDown;
|
|
1252
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "start", children: [
|
|
1122
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.Option, { data, selectProps, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "start", children: [
|
|
1253
1123
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", ellipsis: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }, children }) }),
|
|
1254
|
-
options?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1124
|
+
options && options?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1255
1125
|
ToggleButton,
|
|
1256
1126
|
{
|
|
1257
1127
|
"aria-label": formatMessage({
|
|
@@ -1273,16 +1143,6 @@ const Option = ({ children, data, selectProps, ...props }) => {
|
|
|
1273
1143
|
)
|
|
1274
1144
|
] }) });
|
|
1275
1145
|
};
|
|
1276
|
-
Option.propTypes = {
|
|
1277
|
-
children: PropTypes__default.default.node.isRequired,
|
|
1278
|
-
data: PropTypes__default.default.object.isRequired,
|
|
1279
|
-
onToggle: PropTypes__default.default.func.isRequired,
|
|
1280
|
-
selectProps: PropTypes__default.default.shape({
|
|
1281
|
-
maxDisplayDepth: PropTypes__default.default.number,
|
|
1282
|
-
openValues: PropTypes__default.default.arrayOf(PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])),
|
|
1283
|
-
onOptionToggle: PropTypes__default.default.func
|
|
1284
|
-
}).isRequired
|
|
1285
|
-
};
|
|
1286
1146
|
function getOpenValues(options, defaultValue = {}) {
|
|
1287
1147
|
let values = [];
|
|
1288
1148
|
const { value } = defaultValue;
|
|
@@ -1294,6 +1154,9 @@ function getOpenValues(options, defaultValue = {}) {
|
|
|
1294
1154
|
let { parent } = option;
|
|
1295
1155
|
while (parent !== void 0) {
|
|
1296
1156
|
const option2 = options.find(({ value: value2 }) => value2 === parent);
|
|
1157
|
+
if (!option2) {
|
|
1158
|
+
break;
|
|
1159
|
+
}
|
|
1297
1160
|
values.push(option2.value);
|
|
1298
1161
|
parent = option2.parent;
|
|
1299
1162
|
}
|
|
@@ -1301,15 +1164,28 @@ function getOpenValues(options, defaultValue = {}) {
|
|
|
1301
1164
|
}
|
|
1302
1165
|
function getValuesToClose(options, value) {
|
|
1303
1166
|
const optionForValue = options.find((option) => option.value === value);
|
|
1167
|
+
if (!optionForValue) {
|
|
1168
|
+
return [];
|
|
1169
|
+
}
|
|
1304
1170
|
return options.filter((option) => option.depth >= optionForValue.depth).map((option) => option.value);
|
|
1305
1171
|
}
|
|
1306
1172
|
const hasParent = (option) => !option.parent;
|
|
1307
|
-
const SelectTree = ({
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1173
|
+
const SelectTree = ({
|
|
1174
|
+
options: defaultOptions,
|
|
1175
|
+
maxDisplayDepth = 5,
|
|
1176
|
+
defaultValue,
|
|
1177
|
+
...props
|
|
1178
|
+
}) => {
|
|
1179
|
+
const flatDefaultOptions = React__namespace.useMemo(() => flattenTree(defaultOptions), [defaultOptions]);
|
|
1180
|
+
const optionsFiltered = React__namespace.useMemo(
|
|
1181
|
+
() => flatDefaultOptions.filter(hasParent),
|
|
1182
|
+
[flatDefaultOptions]
|
|
1183
|
+
);
|
|
1184
|
+
const [options, setOptions] = React__namespace.useState(optionsFiltered);
|
|
1185
|
+
const [openValues, setOpenValues] = React__namespace.useState(
|
|
1186
|
+
getOpenValues(flatDefaultOptions, defaultValue)
|
|
1187
|
+
);
|
|
1188
|
+
React__namespace.useEffect(() => {
|
|
1313
1189
|
if (openValues.length === 0) {
|
|
1314
1190
|
setOptions(flatDefaultOptions.filter((option) => option.parent === void 0));
|
|
1315
1191
|
} else {
|
|
@@ -1351,7 +1227,13 @@ const SelectTree = ({ options: defaultOptions, maxDisplayDepth, defaultValue, ..
|
|
|
1351
1227
|
}
|
|
1352
1228
|
);
|
|
1353
1229
|
};
|
|
1354
|
-
const Select = ({
|
|
1230
|
+
const Select = ({
|
|
1231
|
+
components: components2 = {},
|
|
1232
|
+
styles = {},
|
|
1233
|
+
error,
|
|
1234
|
+
ariaErrorMessage,
|
|
1235
|
+
...props
|
|
1236
|
+
}) => {
|
|
1355
1237
|
const theme = styledComponents.useTheme();
|
|
1356
1238
|
const customStyles = getSelectStyles(theme, error);
|
|
1357
1239
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1359,11 +1241,11 @@ const Select = ({ components: components2, styles, error, ariaErrorMessage, ...p
|
|
|
1359
1241
|
{
|
|
1360
1242
|
menuPosition: "fixed",
|
|
1361
1243
|
components: {
|
|
1244
|
+
...components2,
|
|
1362
1245
|
ClearIndicator,
|
|
1363
1246
|
DropdownIndicator,
|
|
1364
1247
|
IndicatorSeparator: () => null,
|
|
1365
|
-
LoadingIndicator: () => null
|
|
1366
|
-
...components2
|
|
1248
|
+
LoadingIndicator: () => null
|
|
1367
1249
|
},
|
|
1368
1250
|
"aria-errormessage": error && ariaErrorMessage,
|
|
1369
1251
|
"aria-invalid": !!error,
|
|
@@ -1372,18 +1254,6 @@ const Select = ({ components: components2, styles, error, ariaErrorMessage, ...p
|
|
|
1372
1254
|
}
|
|
1373
1255
|
);
|
|
1374
1256
|
};
|
|
1375
|
-
Select.defaultProps = {
|
|
1376
|
-
ariaErrorMessage: "",
|
|
1377
|
-
components: {},
|
|
1378
|
-
error: void 0,
|
|
1379
|
-
styles: {}
|
|
1380
|
-
};
|
|
1381
|
-
Select.propTypes = {
|
|
1382
|
-
components: PropTypes__default.default.object,
|
|
1383
|
-
styles: PropTypes__default.default.object,
|
|
1384
|
-
error: PropTypes__default.default.string,
|
|
1385
|
-
ariaErrorMessage: PropTypes__default.default.string
|
|
1386
|
-
};
|
|
1387
1257
|
const IconBox = styledComponents.styled(designSystem.Box)`
|
|
1388
1258
|
background: transparent;
|
|
1389
1259
|
border: none;
|
|
@@ -1413,13 +1283,7 @@ const CarretBox = styledComponents.styled(IconBox)`
|
|
|
1413
1283
|
}
|
|
1414
1284
|
`;
|
|
1415
1285
|
const DropdownIndicator = ({ innerProps }) => {
|
|
1416
|
-
return (
|
|
1417
|
-
// @ts-expect-error – issue with the ref attached to `innerProps`
|
|
1418
|
-
/* @__PURE__ */ jsxRuntime.jsx(CarretBox, { paddingRight: 3, ...innerProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, {}) })
|
|
1419
|
-
);
|
|
1420
|
-
};
|
|
1421
|
-
DropdownIndicator.propTypes = {
|
|
1422
|
-
innerProps: PropTypes__default.default.object.isRequired
|
|
1286
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CarretBox, { paddingRight: 3, ...innerProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, {}) });
|
|
1423
1287
|
};
|
|
1424
1288
|
const getSelectStyles = (theme, error) => {
|
|
1425
1289
|
return {
|
|
@@ -1431,8 +1295,8 @@ const getSelectStyles = (theme, error) => {
|
|
|
1431
1295
|
}),
|
|
1432
1296
|
control(base, state) {
|
|
1433
1297
|
let borderColor = theme.colors.neutral200;
|
|
1434
|
-
let boxShadowColor;
|
|
1435
|
-
let backgroundColor;
|
|
1298
|
+
let boxShadowColor = void 0;
|
|
1299
|
+
let backgroundColor = void 0;
|
|
1436
1300
|
if (state.isFocused) {
|
|
1437
1301
|
borderColor = theme.colors.primary600;
|
|
1438
1302
|
boxShadowColor = theme.colors.primary600;
|
|
@@ -1488,7 +1352,7 @@ const getSelectStyles = (theme, error) => {
|
|
|
1488
1352
|
paddingBottom: theme.spaces[1]
|
|
1489
1353
|
}),
|
|
1490
1354
|
option(base, state) {
|
|
1491
|
-
let backgroundColor = base
|
|
1355
|
+
let backgroundColor = base?.backgroundColor;
|
|
1492
1356
|
if (state.isFocused || state.isSelected) {
|
|
1493
1357
|
backgroundColor = theme.colors.primary100;
|
|
1494
1358
|
}
|
|
@@ -1529,26 +1393,6 @@ const getSelectStyles = (theme, error) => {
|
|
|
1529
1393
|
})
|
|
1530
1394
|
};
|
|
1531
1395
|
};
|
|
1532
|
-
const OptionShape = PropTypes__default.default.shape({
|
|
1533
|
-
value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
|
|
1534
|
-
label: PropTypes__default.default.string.isRequired,
|
|
1535
|
-
children: PropTypes__default.default.array
|
|
1536
|
-
});
|
|
1537
|
-
OptionShape.children = PropTypes__default.default.arrayOf(PropTypes__default.default.shape(OptionShape));
|
|
1538
|
-
OptionShape.defaultProps = {
|
|
1539
|
-
children: void 0
|
|
1540
|
-
};
|
|
1541
|
-
SelectTree.defaultProps = {
|
|
1542
|
-
defaultValue: void 0,
|
|
1543
|
-
maxDisplayDepth: 5
|
|
1544
|
-
};
|
|
1545
|
-
SelectTree.propTypes = {
|
|
1546
|
-
defaultValue: PropTypes__default.default.shape({
|
|
1547
|
-
value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string])
|
|
1548
|
-
}),
|
|
1549
|
-
maxDisplayDepth: PropTypes__default.default.number,
|
|
1550
|
-
options: PropTypes__default.default.arrayOf(OptionShape).isRequired
|
|
1551
|
-
};
|
|
1552
1396
|
const DialogHeader = () => {
|
|
1553
1397
|
const { formatMessage } = reactIntl.useIntl();
|
|
1554
1398
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
|
|
@@ -1662,6 +1506,7 @@ const useUpload = () => {
|
|
|
1662
1506
|
const cancel = () => abortController.abort();
|
|
1663
1507
|
return {
|
|
1664
1508
|
upload,
|
|
1509
|
+
isLoading: mutation.isLoading,
|
|
1665
1510
|
cancel,
|
|
1666
1511
|
error: mutation.error,
|
|
1667
1512
|
progress,
|
|
@@ -1696,9 +1541,6 @@ const CopyLinkButton = ({ url }) => {
|
|
|
1696
1541
|
}
|
|
1697
1542
|
);
|
|
1698
1543
|
};
|
|
1699
|
-
CopyLinkButton.propTypes = {
|
|
1700
|
-
url: PropTypes__default.default.string.isRequired
|
|
1701
|
-
};
|
|
1702
1544
|
const BoxWrapper = styledComponents.styled(designSystem.Flex)`
|
|
1703
1545
|
border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
|
|
1704
1546
|
width: 100%;
|
|
@@ -1730,10 +1572,11 @@ const CancelButton = styledComponents.styled.button`
|
|
|
1730
1572
|
}
|
|
1731
1573
|
}
|
|
1732
1574
|
`;
|
|
1733
|
-
const UploadProgress = ({ onCancel, progress, error }) => {
|
|
1575
|
+
const UploadProgress = ({ onCancel, progress = 0, error }) => {
|
|
1734
1576
|
const { formatMessage } = reactIntl.useIntl();
|
|
1735
1577
|
return /* @__PURE__ */ jsxRuntime.jsx(BoxWrapper, { alignItems: "center", background: error ? "danger100" : "neutral150", error, children: error ? /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, { "aria-label": error?.message }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 2, width: "100%", children: [
|
|
1736
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: progress
|
|
1578
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: progress }),
|
|
1579
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: `${progress}/100%` }),
|
|
1737
1580
|
/* @__PURE__ */ jsxRuntime.jsx(CancelButton, { type: "button", onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
|
|
1738
1581
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", tag: "span", textColor: "inherit", children: formatMessage({
|
|
1739
1582
|
id: "app.components.Button.cancel",
|
|
@@ -1743,15 +1586,6 @@ const UploadProgress = ({ onCancel, progress, error }) => {
|
|
|
1743
1586
|
] }) })
|
|
1744
1587
|
] }) });
|
|
1745
1588
|
};
|
|
1746
|
-
UploadProgress.defaultProps = {
|
|
1747
|
-
error: void 0,
|
|
1748
|
-
progress: 0
|
|
1749
|
-
};
|
|
1750
|
-
UploadProgress.propTypes = {
|
|
1751
|
-
error: PropTypes__default.default.instanceOf(Error),
|
|
1752
|
-
onCancel: PropTypes__default.default.func.isRequired,
|
|
1753
|
-
progress: PropTypes__default.default.number
|
|
1754
|
-
};
|
|
1755
1589
|
const useRemoveAsset = (onSuccess) => {
|
|
1756
1590
|
const { toggleNotification } = strapiAdmin.useNotification();
|
|
1757
1591
|
const { formatMessage } = reactIntl.useIntl();
|
|
@@ -1787,25 +1621,11 @@ const RemoveAssetDialog = ({ open, onClose, asset }) => {
|
|
|
1787
1621
|
onClose(null);
|
|
1788
1622
|
});
|
|
1789
1623
|
const handleConfirm = async (event) => {
|
|
1790
|
-
event
|
|
1624
|
+
event?.preventDefault();
|
|
1791
1625
|
await removeAsset(asset.id);
|
|
1792
1626
|
};
|
|
1793
1627
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { onConfirm: handleConfirm }) });
|
|
1794
1628
|
};
|
|
1795
|
-
RemoveAssetDialog.propTypes = {
|
|
1796
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
1797
|
-
open: PropTypes__default.default.bool.isRequired,
|
|
1798
|
-
asset: PropTypes__default.default.shape({
|
|
1799
|
-
id: PropTypes__default.default.number,
|
|
1800
|
-
height: PropTypes__default.default.number,
|
|
1801
|
-
width: PropTypes__default.default.number,
|
|
1802
|
-
size: PropTypes__default.default.number,
|
|
1803
|
-
createdAt: PropTypes__default.default.string,
|
|
1804
|
-
ext: PropTypes__default.default.string,
|
|
1805
|
-
name: PropTypes__default.default.string,
|
|
1806
|
-
url: PropTypes__default.default.string
|
|
1807
|
-
}).isRequired
|
|
1808
|
-
};
|
|
1809
1629
|
const usePersistentState = (key, defaultValue) => {
|
|
1810
1630
|
const [value, setValue] = React.useState(() => {
|
|
1811
1631
|
const stickyValue = window.localStorage.getItem(key);
|
|
@@ -1827,7 +1647,7 @@ const CardAsset$1 = styledComponents.styled(designSystem.Flex)`
|
|
|
1827
1647
|
border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
|
|
1828
1648
|
background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
|
|
1829
1649
|
`;
|
|
1830
|
-
const AssetPreview =
|
|
1650
|
+
const AssetPreview = React__namespace.forwardRef(({ mime, url, name: name2, ...props }, ref) => {
|
|
1831
1651
|
const [lang] = usePersistentState("strapi-admin-language", "en");
|
|
1832
1652
|
if (mime.includes(AssetType.Image)) {
|
|
1833
1653
|
return /* @__PURE__ */ jsxRuntime.jsx("img", { ref, src: url, alt: name2, ...props });
|
|
@@ -1844,11 +1664,6 @@ const AssetPreview = React.forwardRef(({ mime, url, name: name2, ...props }, ref
|
|
|
1844
1664
|
return /* @__PURE__ */ jsxRuntime.jsx(CardAsset$1, { justifyContent: "center", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(icons.File, { "aria-label": name2 }) });
|
|
1845
1665
|
});
|
|
1846
1666
|
AssetPreview.displayName = "AssetPreview";
|
|
1847
|
-
AssetPreview.propTypes = {
|
|
1848
|
-
mime: PropTypes__default.default.string.isRequired,
|
|
1849
|
-
name: PropTypes__default.default.string.isRequired,
|
|
1850
|
-
url: PropTypes__default.default.string.isRequired
|
|
1851
|
-
};
|
|
1852
1667
|
const RelativeBox = styledComponents.styled(designSystem.Box)`
|
|
1853
1668
|
position: relative;
|
|
1854
1669
|
`;
|
|
@@ -1975,14 +1790,6 @@ const Trigger = styledComponents.styled(designSystem.Menu.Trigger)`
|
|
|
1975
1790
|
}
|
|
1976
1791
|
}
|
|
1977
1792
|
`;
|
|
1978
|
-
CroppingActions.defaultProps = {
|
|
1979
|
-
onDuplicate: void 0
|
|
1980
|
-
};
|
|
1981
|
-
CroppingActions.propTypes = {
|
|
1982
|
-
onCancel: PropTypes__default.default.func.isRequired,
|
|
1983
|
-
onDuplicate: PropTypes__default.default.func,
|
|
1984
|
-
onValidate: PropTypes__default.default.func.isRequired
|
|
1985
|
-
};
|
|
1986
1793
|
const PreviewBox = ({
|
|
1987
1794
|
asset,
|
|
1988
1795
|
canUpdate,
|
|
@@ -1996,13 +1803,13 @@ const PreviewBox = ({
|
|
|
1996
1803
|
trackedLocation
|
|
1997
1804
|
}) => {
|
|
1998
1805
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
1999
|
-
const previewRef =
|
|
2000
|
-
const [isCropImageReady, setIsCropImageReady] =
|
|
2001
|
-
const [hasCropIntent, setHasCropIntent] =
|
|
2002
|
-
const [assetUrl, setAssetUrl] =
|
|
2003
|
-
const [thumbnailUrl, setThumbnailUrl] =
|
|
1806
|
+
const previewRef = React__namespace.useRef(null);
|
|
1807
|
+
const [isCropImageReady, setIsCropImageReady] = React__namespace.useState(false);
|
|
1808
|
+
const [hasCropIntent, setHasCropIntent] = React__namespace.useState(null);
|
|
1809
|
+
const [assetUrl, setAssetUrl] = React__namespace.useState(createAssetUrl(asset, false));
|
|
1810
|
+
const [thumbnailUrl, setThumbnailUrl] = React__namespace.useState(createAssetUrl(asset, true));
|
|
2004
1811
|
const { formatMessage } = reactIntl.useIntl();
|
|
2005
|
-
const [showConfirmDialog, setShowConfirmDialog] =
|
|
1812
|
+
const [showConfirmDialog, setShowConfirmDialog] = React__namespace.useState(false);
|
|
2006
1813
|
const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg();
|
|
2007
1814
|
const { editAsset, error, isLoading, progress, cancel } = useEditAsset();
|
|
2008
1815
|
const {
|
|
@@ -2012,7 +1819,7 @@ const PreviewBox = ({
|
|
|
2012
1819
|
error: uploadError,
|
|
2013
1820
|
progress: progressUpload
|
|
2014
1821
|
} = useUpload();
|
|
2015
|
-
|
|
1822
|
+
React__namespace.useEffect(() => {
|
|
2016
1823
|
if (replacementFile) {
|
|
2017
1824
|
const fileLocalUrl = URL.createObjectURL(replacementFile);
|
|
2018
1825
|
if (asset.isLocal) {
|
|
@@ -2022,13 +1829,13 @@ const PreviewBox = ({
|
|
|
2022
1829
|
setThumbnailUrl(fileLocalUrl);
|
|
2023
1830
|
}
|
|
2024
1831
|
}, [replacementFile, asset]);
|
|
2025
|
-
|
|
1832
|
+
React__namespace.useEffect(() => {
|
|
2026
1833
|
if (hasCropIntent === false) {
|
|
2027
1834
|
stopCropping();
|
|
2028
1835
|
onCropCancel();
|
|
2029
1836
|
}
|
|
2030
1837
|
}, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);
|
|
2031
|
-
|
|
1838
|
+
React__namespace.useEffect(() => {
|
|
2032
1839
|
if (hasCropIntent && isCropImageReady) {
|
|
2033
1840
|
crop(previewRef.current);
|
|
2034
1841
|
onCropStart();
|
|
@@ -2058,7 +1865,11 @@ const PreviewBox = ({
|
|
|
2058
1865
|
const isInCroppingMode = isCropping && !isLoading;
|
|
2059
1866
|
const handleDuplication = async () => {
|
|
2060
1867
|
const nextAsset = { ...asset, width, height };
|
|
2061
|
-
const file = await produceFile(
|
|
1868
|
+
const file = await produceFile(
|
|
1869
|
+
nextAsset.name,
|
|
1870
|
+
nextAsset.mime,
|
|
1871
|
+
nextAsset.updatedAt
|
|
1872
|
+
);
|
|
2062
1873
|
await upload({ name: file.name, rawFile: file }, asset.folder?.id);
|
|
2063
1874
|
trackUsage("didCropFile", { duplicatedFile: true, location: trackedLocation });
|
|
2064
1875
|
setHasCropIntent(false);
|
|
@@ -2104,7 +1915,7 @@ const PreviewBox = ({
|
|
|
2104
1915
|
}
|
|
2105
1916
|
),
|
|
2106
1917
|
canCopyLink && /* @__PURE__ */ jsxRuntime.jsx(CopyLinkButton, { url: assetUrl }),
|
|
2107
|
-
canUpdate && asset.mime
|
|
1918
|
+
canUpdate && asset.mime?.includes(AssetType.Image) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2108
1919
|
designSystem.IconButton,
|
|
2109
1920
|
{
|
|
2110
1921
|
label: formatMessage({ id: getTrad("control-card.crop"), defaultMessage: "Crop" }),
|
|
@@ -2162,35 +1973,24 @@ const PreviewBox = ({
|
|
|
2162
1973
|
)
|
|
2163
1974
|
] });
|
|
2164
1975
|
};
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
canCopyLink: PropTypes__default.default.bool.isRequired,
|
|
2172
|
-
canDownload: PropTypes__default.default.bool.isRequired,
|
|
2173
|
-
replacementFile: PropTypes__default.default.instanceOf(File),
|
|
2174
|
-
asset: AssetDefinition.isRequired,
|
|
2175
|
-
onDelete: PropTypes__default.default.func.isRequired,
|
|
2176
|
-
onCropFinish: PropTypes__default.default.func.isRequired,
|
|
2177
|
-
onCropStart: PropTypes__default.default.func.isRequired,
|
|
2178
|
-
onCropCancel: PropTypes__default.default.func.isRequired,
|
|
2179
|
-
trackedLocation: PropTypes__default.default.string
|
|
2180
|
-
};
|
|
2181
|
-
const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...props }) => {
|
|
1976
|
+
const ReplaceMediaButton = ({
|
|
1977
|
+
onSelectMedia,
|
|
1978
|
+
acceptedMime,
|
|
1979
|
+
trackedLocation,
|
|
1980
|
+
...props
|
|
1981
|
+
}) => {
|
|
2182
1982
|
const { formatMessage } = reactIntl.useIntl();
|
|
2183
|
-
const inputRef =
|
|
1983
|
+
const inputRef = React__namespace.useRef(null);
|
|
2184
1984
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
2185
1985
|
const handleClick = (e) => {
|
|
2186
1986
|
e.preventDefault();
|
|
2187
1987
|
if (trackedLocation) {
|
|
2188
1988
|
trackUsage("didReplaceMedia", { location: trackedLocation });
|
|
2189
1989
|
}
|
|
2190
|
-
inputRef.current
|
|
1990
|
+
inputRef.current?.click();
|
|
2191
1991
|
};
|
|
2192
1992
|
const handleChange = () => {
|
|
2193
|
-
const file = inputRef.current
|
|
1993
|
+
const file = inputRef.current?.files?.[0];
|
|
2194
1994
|
onSelectMedia(file);
|
|
2195
1995
|
};
|
|
2196
1996
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -2212,14 +2012,6 @@ const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...p
|
|
|
2212
2012
|
) })
|
|
2213
2013
|
] });
|
|
2214
2014
|
};
|
|
2215
|
-
ReplaceMediaButton.defaultProps = {
|
|
2216
|
-
trackedLocation: void 0
|
|
2217
|
-
};
|
|
2218
|
-
ReplaceMediaButton.propTypes = {
|
|
2219
|
-
acceptedMime: PropTypes__default.default.string.isRequired,
|
|
2220
|
-
onSelectMedia: PropTypes__default.default.func.isRequired,
|
|
2221
|
-
trackedLocation: PropTypes__default.default.string
|
|
2222
|
-
};
|
|
2223
2015
|
const LoadingBody$1 = styledComponents.styled(designSystem.Flex)`
|
|
2224
2016
|
/* 80px are coming from the Tabs component that is not included in the ModalBody */
|
|
2225
2017
|
min-height: ${() => `calc(60vh + 8rem)`};
|
|
@@ -2233,28 +2025,28 @@ const fileInfoSchema = yup__namespace.object({
|
|
|
2233
2025
|
const EditAssetContent = ({
|
|
2234
2026
|
onClose,
|
|
2235
2027
|
asset,
|
|
2236
|
-
canUpdate,
|
|
2237
|
-
canCopyLink,
|
|
2238
|
-
canDownload,
|
|
2028
|
+
canUpdate = false,
|
|
2029
|
+
canCopyLink = false,
|
|
2030
|
+
canDownload = false,
|
|
2239
2031
|
trackedLocation
|
|
2240
2032
|
}) => {
|
|
2241
2033
|
const { formatMessage, formatDate } = reactIntl.useIntl();
|
|
2242
2034
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
2243
|
-
const submitButtonRef =
|
|
2244
|
-
const [isCropping, setIsCropping] =
|
|
2245
|
-
const [replacementFile, setReplacementFile] =
|
|
2035
|
+
const submitButtonRef = React__namespace.useRef(null);
|
|
2036
|
+
const [isCropping, setIsCropping] = React__namespace.useState(false);
|
|
2037
|
+
const [replacementFile, setReplacementFile] = React__namespace.useState();
|
|
2246
2038
|
const { editAsset, isLoading } = useEditAsset();
|
|
2247
2039
|
const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
|
|
2248
2040
|
enabled: true
|
|
2249
2041
|
});
|
|
2250
2042
|
const handleSubmit = async (values) => {
|
|
2251
|
-
const nextAsset = { ...asset, ...values, folder: values.parent
|
|
2252
|
-
if (asset
|
|
2043
|
+
const nextAsset = { ...asset, ...values, folder: values.parent?.value };
|
|
2044
|
+
if (asset?.isLocal) {
|
|
2253
2045
|
onClose(nextAsset);
|
|
2254
2046
|
} else {
|
|
2255
2047
|
const editedAsset = await editAsset(nextAsset, replacementFile);
|
|
2256
|
-
const assetType = asset?.mime
|
|
2257
|
-
const didChangeLocation = asset?.folder?.id ? asset.folder.id !== values.parent
|
|
2048
|
+
const assetType = asset?.mime?.split("/")[0];
|
|
2049
|
+
const didChangeLocation = asset?.folder?.id ? asset.folder.id !== values.parent?.value : asset?.folder === null && !!values.parent?.value;
|
|
2258
2050
|
trackUsage("didEditMediaLibraryElements", {
|
|
2259
2051
|
location: trackedLocation,
|
|
2260
2052
|
type: assetType,
|
|
@@ -2287,9 +2079,9 @@ const EditAssetContent = ({
|
|
|
2287
2079
|
};
|
|
2288
2080
|
const activeFolderId = asset?.folder?.id;
|
|
2289
2081
|
const initialFormData = !folderStructureIsLoading && {
|
|
2290
|
-
name: asset
|
|
2291
|
-
alternativeText: asset
|
|
2292
|
-
caption: asset
|
|
2082
|
+
name: asset?.name,
|
|
2083
|
+
alternativeText: asset?.alternativeText ?? void 0,
|
|
2084
|
+
caption: asset?.caption ?? void 0,
|
|
2293
2085
|
parent: {
|
|
2294
2086
|
value: activeFolderId ?? void 0,
|
|
2295
2087
|
label: findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ?? folderStructure[0].label
|
|
@@ -2348,35 +2140,35 @@ const EditAssetContent = ({
|
|
|
2348
2140
|
id: getTrad("modal.file-details.size"),
|
|
2349
2141
|
defaultMessage: "Size"
|
|
2350
2142
|
}),
|
|
2351
|
-
value: formatBytes(asset
|
|
2143
|
+
value: formatBytes(asset?.size)
|
|
2352
2144
|
},
|
|
2353
2145
|
{
|
|
2354
2146
|
label: formatMessage({
|
|
2355
2147
|
id: getTrad("modal.file-details.dimensions"),
|
|
2356
2148
|
defaultMessage: "Dimensions"
|
|
2357
2149
|
}),
|
|
2358
|
-
value: asset
|
|
2150
|
+
value: asset?.height && asset.width ? `${asset.width}✕${asset.height}` : null
|
|
2359
2151
|
},
|
|
2360
2152
|
{
|
|
2361
2153
|
label: formatMessage({
|
|
2362
2154
|
id: getTrad("modal.file-details.date"),
|
|
2363
2155
|
defaultMessage: "Date"
|
|
2364
2156
|
}),
|
|
2365
|
-
value: formatDate(new Date(asset
|
|
2157
|
+
value: formatDate(new Date(asset?.createdAt))
|
|
2366
2158
|
},
|
|
2367
2159
|
{
|
|
2368
2160
|
label: formatMessage({
|
|
2369
2161
|
id: getTrad("modal.file-details.extension"),
|
|
2370
2162
|
defaultMessage: "Extension"
|
|
2371
2163
|
}),
|
|
2372
|
-
value: getFileExtension(asset
|
|
2164
|
+
value: getFileExtension(asset?.ext)
|
|
2373
2165
|
},
|
|
2374
2166
|
{
|
|
2375
2167
|
label: formatMessage({
|
|
2376
2168
|
id: getTrad("modal.file-details.id"),
|
|
2377
2169
|
defaultMessage: "Asset ID"
|
|
2378
2170
|
}),
|
|
2379
|
-
value: asset
|
|
2171
|
+
value: asset?.id
|
|
2380
2172
|
}
|
|
2381
2173
|
]
|
|
2382
2174
|
}
|
|
@@ -2479,7 +2271,7 @@ const EditAssetContent = ({
|
|
|
2479
2271
|
ReplaceMediaButton,
|
|
2480
2272
|
{
|
|
2481
2273
|
onSelectMedia: setReplacementFile,
|
|
2482
|
-
acceptedMime: asset
|
|
2274
|
+
acceptedMime: asset?.mime,
|
|
2483
2275
|
disabled: formDisabled,
|
|
2484
2276
|
trackedLocation
|
|
2485
2277
|
}
|
|
@@ -2487,7 +2279,7 @@ const EditAssetContent = ({
|
|
|
2487
2279
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2488
2280
|
designSystem.Button,
|
|
2489
2281
|
{
|
|
2490
|
-
onClick: () => submitButtonRef.current
|
|
2282
|
+
onClick: () => submitButtonRef.current?.click(),
|
|
2491
2283
|
loading: isLoading,
|
|
2492
2284
|
disabled: formDisabled,
|
|
2493
2285
|
children: formatMessage({ id: "global.finish", defaultMessage: "Finish" })
|
|
@@ -2499,39 +2291,24 @@ const EditAssetContent = ({
|
|
|
2499
2291
|
}
|
|
2500
2292
|
);
|
|
2501
2293
|
};
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
canUpdate
|
|
2506
|
-
canCopyLink
|
|
2507
|
-
canDownload
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
};
|
|
2520
|
-
EditAssetDialog.defaultProps = {
|
|
2521
|
-
asset: {},
|
|
2522
|
-
trackedLocation: void 0,
|
|
2523
|
-
canUpdate: false,
|
|
2524
|
-
canCopyLink: false,
|
|
2525
|
-
canDownload: false
|
|
2526
|
-
};
|
|
2527
|
-
EditAssetDialog.propTypes = {
|
|
2528
|
-
asset: AssetDefinition,
|
|
2529
|
-
canUpdate: PropTypes__default.default.bool,
|
|
2530
|
-
canCopyLink: PropTypes__default.default.bool,
|
|
2531
|
-
canDownload: PropTypes__default.default.bool,
|
|
2532
|
-
open: PropTypes__default.default.bool.isRequired,
|
|
2533
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
2534
|
-
trackedLocation: PropTypes__default.default.string
|
|
2294
|
+
const EditAssetDialog = ({
|
|
2295
|
+
open,
|
|
2296
|
+
onClose,
|
|
2297
|
+
canUpdate = false,
|
|
2298
|
+
canCopyLink = false,
|
|
2299
|
+
canDownload = false,
|
|
2300
|
+
...restProps
|
|
2301
|
+
}) => {
|
|
2302
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2303
|
+
EditAssetContent,
|
|
2304
|
+
{
|
|
2305
|
+
onClose,
|
|
2306
|
+
canUpdate,
|
|
2307
|
+
canCopyLink,
|
|
2308
|
+
canDownload,
|
|
2309
|
+
...restProps
|
|
2310
|
+
}
|
|
2311
|
+
) }) });
|
|
2535
2312
|
};
|
|
2536
2313
|
const useBulkRemove = () => {
|
|
2537
2314
|
const { toggleNotification } = strapiAdmin.useNotification();
|
|
@@ -2540,12 +2317,12 @@ const useBulkRemove = () => {
|
|
|
2540
2317
|
const { post } = strapiAdmin.useFetchClient();
|
|
2541
2318
|
const bulkRemoveQuery = (filesAndFolders) => {
|
|
2542
2319
|
const payload = filesAndFolders.reduce((acc, selected) => {
|
|
2543
|
-
const { id
|
|
2320
|
+
const { id, type } = selected;
|
|
2544
2321
|
const key = type === "asset" ? "fileIds" : "folderIds";
|
|
2545
2322
|
if (!acc[key]) {
|
|
2546
2323
|
acc[key] = [];
|
|
2547
2324
|
}
|
|
2548
|
-
acc[key].push(
|
|
2325
|
+
acc[key].push(id);
|
|
2549
2326
|
return acc;
|
|
2550
2327
|
}, {});
|
|
2551
2328
|
return post("/upload/actions/bulk-delete", payload);
|
|
@@ -2577,10 +2354,10 @@ const useBulkRemove = () => {
|
|
|
2577
2354
|
const remove = (...args) => mutation.mutateAsync(...args);
|
|
2578
2355
|
return { ...mutation, remove };
|
|
2579
2356
|
};
|
|
2580
|
-
const editFolderRequest = (put, post, { attrs, id
|
|
2581
|
-
const isEditing = !!
|
|
2357
|
+
const editFolderRequest = (put, post, { attrs, id }) => {
|
|
2358
|
+
const isEditing = !!id;
|
|
2582
2359
|
const method = isEditing ? put : post;
|
|
2583
|
-
return method(`/upload/folders/${
|
|
2360
|
+
return method(`/upload/folders/${id ?? ""}`, attrs).then((res) => res.data);
|
|
2584
2361
|
};
|
|
2585
2362
|
const useEditFolder = () => {
|
|
2586
2363
|
const queryClient = reactQuery.useQueryClient();
|
|
@@ -2591,10 +2368,10 @@ const useEditFolder = () => {
|
|
|
2591
2368
|
queryClient.refetchQueries([pluginId, "folder", "structure"], { active: true });
|
|
2592
2369
|
}
|
|
2593
2370
|
});
|
|
2594
|
-
const editFolder = (attrs,
|
|
2371
|
+
const editFolder = (attrs, id) => mutation.mutateAsync({ attrs, id });
|
|
2595
2372
|
return { ...mutation, editFolder, status: mutation.status };
|
|
2596
2373
|
};
|
|
2597
|
-
const EditFolderModalHeader = ({ isEditing }) => {
|
|
2374
|
+
const EditFolderModalHeader = ({ isEditing = false }) => {
|
|
2598
2375
|
const { formatMessage } = reactIntl.useIntl();
|
|
2599
2376
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage(
|
|
2600
2377
|
isEditing ? {
|
|
@@ -2606,20 +2383,9 @@ const EditFolderModalHeader = ({ isEditing }) => {
|
|
|
2606
2383
|
}
|
|
2607
2384
|
) }) });
|
|
2608
2385
|
};
|
|
2609
|
-
EditFolderModalHeader.defaultProps = {
|
|
2610
|
-
isEditing: false
|
|
2611
|
-
};
|
|
2612
|
-
EditFolderModalHeader.propTypes = {
|
|
2613
|
-
isEditing: PropTypes__default.default.bool
|
|
2614
|
-
};
|
|
2615
2386
|
const RemoveFolderDialog = ({ onClose, onConfirm, open }) => {
|
|
2616
2387
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { onConfirm }) });
|
|
2617
2388
|
};
|
|
2618
|
-
RemoveFolderDialog.propTypes = {
|
|
2619
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
2620
|
-
open: PropTypes__default.default.bool.isRequired,
|
|
2621
|
-
onConfirm: PropTypes__default.default.func.isRequired
|
|
2622
|
-
};
|
|
2623
2389
|
const folderSchema = yup__namespace.object({
|
|
2624
2390
|
name: yup__namespace.string().required(),
|
|
2625
2391
|
parent: yup__namespace.object({
|
|
@@ -2627,12 +2393,17 @@ const folderSchema = yup__namespace.object({
|
|
|
2627
2393
|
value: yup__namespace.number().nullable(true)
|
|
2628
2394
|
}).nullable(true)
|
|
2629
2395
|
});
|
|
2630
|
-
const EditFolderContent = ({
|
|
2396
|
+
const EditFolderContent = ({
|
|
2397
|
+
onClose,
|
|
2398
|
+
folder,
|
|
2399
|
+
location,
|
|
2400
|
+
parentFolderId
|
|
2401
|
+
}) => {
|
|
2631
2402
|
const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
|
|
2632
2403
|
enabled: true
|
|
2633
2404
|
});
|
|
2634
2405
|
const { canCreate, isLoading: isLoadingPermissions, canUpdate } = useMediaLibraryPermissions();
|
|
2635
|
-
const [showConfirmDialog, setShowConfirmDialog] =
|
|
2406
|
+
const [showConfirmDialog, setShowConfirmDialog] = React__namespace.useState(false);
|
|
2636
2407
|
const { formatMessage, formatDate } = reactIntl.useIntl();
|
|
2637
2408
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
2638
2409
|
const { editFolder, isLoading: isEditFolderLoading } = useEditFolder();
|
|
@@ -2641,21 +2412,24 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
|
|
|
2641
2412
|
const isLoading = isLoadingPermissions || folderStructureIsLoading;
|
|
2642
2413
|
const isEditing = !!folder;
|
|
2643
2414
|
const formDisabled = folder && !canUpdate || !folder && !canCreate;
|
|
2644
|
-
const initialFormData = !folderStructureIsLoading
|
|
2415
|
+
const initialFormData = !folderStructureIsLoading ? {
|
|
2645
2416
|
name: folder?.name ?? "",
|
|
2646
2417
|
parent: {
|
|
2647
2418
|
/* ideally we would use folderStructure[0].value, but since it is null
|
|
2648
|
-
|
|
2649
|
-
value: parentFolderId ? parseInt(parentFolderId, 10) : void 0,
|
|
2650
|
-
label: parentFolderId ? findRecursiveFolderByValue(folderStructure, parseInt(parentFolderId, 10))?.label : folderStructure[0].label
|
|
2419
|
+
react complains about rendering null as field value */
|
|
2420
|
+
value: parentFolderId ? parseInt(parentFolderId.toString(), 10) : void 0,
|
|
2421
|
+
label: parentFolderId ? folderStructure && findRecursiveFolderByValue(folderStructure, parseInt(parentFolderId.toString(), 10))?.label : folderStructure?.[0].label
|
|
2651
2422
|
}
|
|
2423
|
+
} : {
|
|
2424
|
+
name: "",
|
|
2425
|
+
parent: null
|
|
2652
2426
|
};
|
|
2653
2427
|
const handleSubmit = async (values, { setErrors }) => {
|
|
2654
2428
|
try {
|
|
2655
2429
|
await editFolder(
|
|
2656
2430
|
{
|
|
2657
2431
|
...values,
|
|
2658
|
-
parent: values.parent
|
|
2432
|
+
parent: values.parent?.value ?? null
|
|
2659
2433
|
},
|
|
2660
2434
|
folder?.id
|
|
2661
2435
|
);
|
|
@@ -2670,7 +2444,7 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
|
|
|
2670
2444
|
})
|
|
2671
2445
|
});
|
|
2672
2446
|
if (isEditing) {
|
|
2673
|
-
const didChangeLocation = parentFolderId ? parseInt(parentFolderId, 10) !== values.parent
|
|
2447
|
+
const didChangeLocation = parentFolderId ? parseInt(parentFolderId.toString(), 10) !== values.parent?.value : parentFolderId === null && !!values.parent?.value;
|
|
2674
2448
|
trackUsage("didEditMediaLibraryElements", {
|
|
2675
2449
|
location,
|
|
2676
2450
|
type: "folder",
|
|
@@ -2682,17 +2456,22 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
|
|
|
2682
2456
|
onClose({ created: true });
|
|
2683
2457
|
} catch (err) {
|
|
2684
2458
|
const errors = getAPIInnerErrors(err, { getTrad });
|
|
2685
|
-
const formikErrors = Object.entries(errors).reduce(
|
|
2686
|
-
acc[key]
|
|
2687
|
-
|
|
2688
|
-
|
|
2459
|
+
const formikErrors = Object.entries(errors).reduce(
|
|
2460
|
+
(acc, [key, error]) => {
|
|
2461
|
+
acc[key] = error.defaultMessage;
|
|
2462
|
+
return acc;
|
|
2463
|
+
},
|
|
2464
|
+
{}
|
|
2465
|
+
);
|
|
2689
2466
|
if (!isEmpty__default.default(formikErrors)) {
|
|
2690
2467
|
setErrors(formikErrors);
|
|
2691
2468
|
}
|
|
2692
2469
|
}
|
|
2693
2470
|
};
|
|
2694
2471
|
const handleDelete = async () => {
|
|
2695
|
-
|
|
2472
|
+
if (folder) {
|
|
2473
|
+
await remove([folder]);
|
|
2474
|
+
}
|
|
2696
2475
|
setShowConfirmDialog(false);
|
|
2697
2476
|
onClose();
|
|
2698
2477
|
};
|
|
@@ -2746,21 +2525,28 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
|
|
|
2746
2525
|
]
|
|
2747
2526
|
}
|
|
2748
2527
|
) }),
|
|
2749
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2528
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2529
|
+
designSystem.Field.Root,
|
|
2530
|
+
{
|
|
2531
|
+
name: "name",
|
|
2532
|
+
error: typeof errors.name === "string" ? errors.name : void 0,
|
|
2533
|
+
children: [
|
|
2534
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
|
|
2535
|
+
id: getTrad("form.input.label.folder-name"),
|
|
2536
|
+
defaultMessage: "Name"
|
|
2537
|
+
}) }),
|
|
2538
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2539
|
+
designSystem.TextInput,
|
|
2540
|
+
{
|
|
2541
|
+
value: values.name,
|
|
2542
|
+
onChange: handleChange,
|
|
2543
|
+
disabled: formDisabled
|
|
2544
|
+
}
|
|
2545
|
+
),
|
|
2546
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
|
2547
|
+
]
|
|
2548
|
+
}
|
|
2549
|
+
) }),
|
|
2764
2550
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: "folder-parent", children: [
|
|
2765
2551
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
|
|
2766
2552
|
id: getTrad("form.input.label.folder-location"),
|
|
@@ -2779,7 +2565,7 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
|
|
|
2779
2565
|
menuPortalTarget: document.querySelector("body"),
|
|
2780
2566
|
inputId: "folder-parent",
|
|
2781
2567
|
disabled: formDisabled,
|
|
2782
|
-
error: errors
|
|
2568
|
+
error: typeof errors.parent === "string" ? errors.parent : void 0,
|
|
2783
2569
|
ariaErrorMessage: "folder-parent-error"
|
|
2784
2570
|
}
|
|
2785
2571
|
),
|
|
@@ -2790,7 +2576,7 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
|
|
|
2790
2576
|
tag: "p",
|
|
2791
2577
|
id: "folder-parent-error",
|
|
2792
2578
|
textColor: "danger600",
|
|
2793
|
-
children: errors.parent
|
|
2579
|
+
children: typeof errors.parent === "string" ? errors.parent : void 0
|
|
2794
2580
|
}
|
|
2795
2581
|
)
|
|
2796
2582
|
] }) })
|
|
@@ -2839,42 +2625,19 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
|
|
|
2839
2625
|
)
|
|
2840
2626
|
] });
|
|
2841
2627
|
};
|
|
2842
|
-
EditFolderContent.defaultProps = {
|
|
2843
|
-
folder: void 0,
|
|
2844
|
-
location: void 0,
|
|
2845
|
-
parentFolderId: null
|
|
2846
|
-
};
|
|
2847
|
-
EditFolderContent.propTypes = {
|
|
2848
|
-
folder: FolderDefinition,
|
|
2849
|
-
location: PropTypes__default.default.string,
|
|
2850
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
2851
|
-
parentFolderId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
|
|
2852
|
-
};
|
|
2853
2628
|
const EditFolderDialog = ({ open, onClose, ...restProps }) => {
|
|
2854
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(EditFolderContent, { ...restProps, onClose }) }) });
|
|
2629
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(EditFolderContent, { ...restProps, onClose, open }) }) });
|
|
2855
2630
|
};
|
|
2856
|
-
|
|
2857
|
-
folder: void 0,
|
|
2858
|
-
location: void 0,
|
|
2859
|
-
parentFolderId: null
|
|
2860
|
-
};
|
|
2861
|
-
EditFolderDialog.propTypes = {
|
|
2862
|
-
folder: FolderDefinition,
|
|
2863
|
-
location: PropTypes__default.default.string,
|
|
2864
|
-
open: PropTypes__default.default.bool.isRequired,
|
|
2865
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
2866
|
-
parentFolderId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
|
|
2867
|
-
};
|
|
2868
|
-
const useFolder = (id2, { enabled = true } = {}) => {
|
|
2631
|
+
const useFolder = (id, { enabled = true } = {}) => {
|
|
2869
2632
|
const { toggleNotification } = strapiAdmin.useNotification();
|
|
2870
2633
|
const { get } = strapiAdmin.useFetchClient();
|
|
2871
2634
|
const { formatMessage } = reactIntl.useIntl();
|
|
2872
2635
|
const { data, error, isLoading } = reactQuery.useQuery(
|
|
2873
|
-
[pluginId, "folder",
|
|
2636
|
+
[pluginId, "folder", id],
|
|
2874
2637
|
async () => {
|
|
2875
2638
|
const {
|
|
2876
2639
|
data: { data: data2 }
|
|
2877
|
-
} = await get(`/upload/folders/${
|
|
2640
|
+
} = await get(`/upload/folders/${id}`, {
|
|
2878
2641
|
params: {
|
|
2879
2642
|
populate: {
|
|
2880
2643
|
parent: {
|
|
@@ -2927,14 +2690,14 @@ const CardContainer = styledComponents.styled(designSystem.Card)`
|
|
|
2927
2690
|
const AssetCardBase = ({
|
|
2928
2691
|
children,
|
|
2929
2692
|
extension,
|
|
2930
|
-
isSelectable: isSelectable2,
|
|
2693
|
+
isSelectable: isSelectable2 = true,
|
|
2931
2694
|
name: name2,
|
|
2932
2695
|
onSelect,
|
|
2933
2696
|
onRemove,
|
|
2934
2697
|
onEdit,
|
|
2935
|
-
selected,
|
|
2936
|
-
subtitle,
|
|
2937
|
-
variant
|
|
2698
|
+
selected = false,
|
|
2699
|
+
subtitle = "",
|
|
2700
|
+
variant = "Image"
|
|
2938
2701
|
}) => {
|
|
2939
2702
|
const { formatMessage } = reactIntl.useIntl();
|
|
2940
2703
|
const handleClick = (e) => {
|
|
@@ -2947,8 +2710,7 @@ const AssetCardBase = ({
|
|
|
2947
2710
|
};
|
|
2948
2711
|
return /* @__PURE__ */ jsxRuntime.jsxs(CardContainer, { role: "button", height: "100%", tabIndex: -1, onClick: handleClick, children: [
|
|
2949
2712
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
|
|
2950
|
-
isSelectable2 &&
|
|
2951
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { checked: selected, onCheckedChange: onSelect }) }),
|
|
2713
|
+
isSelectable2 && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { checked: selected, onCheckedChange: onSelect }) }),
|
|
2952
2714
|
(onRemove || onEdit) && /* @__PURE__ */ jsxRuntime.jsxs(CardActionsContainer, { onClick: handlePropagationClick, position: "end", children: [
|
|
2953
2715
|
onRemove && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2954
2716
|
designSystem.IconButton,
|
|
@@ -2974,7 +2736,7 @@ const AssetCardBase = ({
|
|
|
2974
2736
|
] }),
|
|
2975
2737
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
|
|
2976
2738
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
|
|
2977
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
|
2739
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { tag: "span", children: name2 }) }) }),
|
|
2978
2740
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardSubtitle, { children: [
|
|
2979
2741
|
/* @__PURE__ */ jsxRuntime.jsx(Extension$1, { children: extension }),
|
|
2980
2742
|
subtitle
|
|
@@ -2987,36 +2749,9 @@ const AssetCardBase = ({
|
|
|
2987
2749
|
] })
|
|
2988
2750
|
] });
|
|
2989
2751
|
};
|
|
2990
|
-
AssetCardBase.defaultProps = {
|
|
2991
|
-
children: void 0,
|
|
2992
|
-
isSelectable: true,
|
|
2993
|
-
onEdit: void 0,
|
|
2994
|
-
onSelect: void 0,
|
|
2995
|
-
onRemove: void 0,
|
|
2996
|
-
selected: false,
|
|
2997
|
-
subtitle: "",
|
|
2998
|
-
variant: "Image"
|
|
2999
|
-
};
|
|
3000
|
-
AssetCardBase.propTypes = {
|
|
3001
|
-
children: PropTypes__default.default.node,
|
|
3002
|
-
extension: PropTypes__default.default.string.isRequired,
|
|
3003
|
-
isSelectable: PropTypes__default.default.bool,
|
|
3004
|
-
name: PropTypes__default.default.string.isRequired,
|
|
3005
|
-
onEdit: PropTypes__default.default.func,
|
|
3006
|
-
onSelect: PropTypes__default.default.func,
|
|
3007
|
-
onRemove: PropTypes__default.default.func,
|
|
3008
|
-
selected: PropTypes__default.default.bool,
|
|
3009
|
-
subtitle: PropTypes__default.default.string,
|
|
3010
|
-
variant: PropTypes__default.default.oneOf(["Image", "Video", "Audio", "Doc"])
|
|
3011
|
-
};
|
|
3012
2752
|
const AudioPreview = ({ url, alt }) => {
|
|
3013
2753
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx("audio", { controls: true, src: url, children: alt }) });
|
|
3014
2754
|
};
|
|
3015
|
-
AudioPreview.defaultProps = {};
|
|
3016
|
-
AudioPreview.propTypes = {
|
|
3017
|
-
alt: PropTypes__default.default.string.isRequired,
|
|
3018
|
-
url: PropTypes__default.default.string.isRequired
|
|
3019
|
-
};
|
|
3020
2755
|
const AudioPreviewWrapper$1 = styledComponents.styled(designSystem.Box)`
|
|
3021
2756
|
canvas,
|
|
3022
2757
|
audio {
|
|
@@ -3025,25 +2760,14 @@ const AudioPreviewWrapper$1 = styledComponents.styled(designSystem.Box)`
|
|
|
3025
2760
|
max-height: ${({ size }) => size === "M" ? 16.4 : 8.8}rem;
|
|
3026
2761
|
}
|
|
3027
2762
|
`;
|
|
3028
|
-
const AudioAssetCard = ({
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
selected:
|
|
3036
|
-
size: "M"
|
|
3037
|
-
};
|
|
3038
|
-
AudioAssetCard.propTypes = {
|
|
3039
|
-
extension: PropTypes__default.default.string.isRequired,
|
|
3040
|
-
name: PropTypes__default.default.string.isRequired,
|
|
3041
|
-
onSelect: PropTypes__default.default.func,
|
|
3042
|
-
onEdit: PropTypes__default.default.func,
|
|
3043
|
-
onRemove: PropTypes__default.default.func,
|
|
3044
|
-
url: PropTypes__default.default.string.isRequired,
|
|
3045
|
-
selected: PropTypes__default.default.bool,
|
|
3046
|
-
size: PropTypes__default.default.oneOf(["S", "M"])
|
|
2763
|
+
const AudioAssetCard = ({
|
|
2764
|
+
name: name2,
|
|
2765
|
+
url,
|
|
2766
|
+
size = "M",
|
|
2767
|
+
selected = false,
|
|
2768
|
+
...restProps
|
|
2769
|
+
}) => {
|
|
2770
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AssetCardBase, { name: name2, selected, ...restProps, variant: "Audio", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { size, children: /* @__PURE__ */ jsxRuntime.jsx(AudioPreviewWrapper$1, { size, children: /* @__PURE__ */ jsxRuntime.jsx(AudioPreview, { url, alt: name2 }) }) }) });
|
|
3047
2771
|
};
|
|
3048
2772
|
const IconWrapper$1 = styledComponents.styled.span`
|
|
3049
2773
|
svg {
|
|
@@ -3054,99 +2778,83 @@ const CardAsset = styledComponents.styled(designSystem.Flex)`
|
|
|
3054
2778
|
border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
|
|
3055
2779
|
background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
|
|
3056
2780
|
`;
|
|
3057
|
-
const DocAssetCard = ({
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
selected
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
2781
|
+
const DocAssetCard = ({
|
|
2782
|
+
name: name2,
|
|
2783
|
+
extension,
|
|
2784
|
+
size = "M",
|
|
2785
|
+
selected = false,
|
|
2786
|
+
...restProps
|
|
2787
|
+
}) => {
|
|
2788
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2789
|
+
AssetCardBase,
|
|
2790
|
+
{
|
|
2791
|
+
name: name2,
|
|
2792
|
+
extension,
|
|
2793
|
+
selected,
|
|
2794
|
+
...restProps,
|
|
2795
|
+
variant: "Doc",
|
|
2796
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(CardAsset, { width: "100%", height: size === "S" ? `8.8rem` : `16.4rem`, justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$1, { children: extension === "pdf" ? /* @__PURE__ */ jsxRuntime.jsx(icons.FilePdf, { "aria-label": name2 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.File, { "aria-label": name2 }) }) })
|
|
2797
|
+
}
|
|
2798
|
+
);
|
|
3075
2799
|
};
|
|
3076
|
-
const ImageAssetCard = ({
|
|
2800
|
+
const ImageAssetCard = ({
|
|
2801
|
+
height,
|
|
2802
|
+
width,
|
|
2803
|
+
thumbnail,
|
|
2804
|
+
size = "M",
|
|
2805
|
+
alt,
|
|
2806
|
+
isUrlSigned,
|
|
2807
|
+
selected = false,
|
|
2808
|
+
...props
|
|
2809
|
+
}) => {
|
|
3077
2810
|
const thumbnailUrl = isUrlSigned ? thumbnail : appendSearchParamsToUrl({
|
|
3078
2811
|
url: thumbnail,
|
|
3079
2812
|
params: { updatedAt: props.updatedAt }
|
|
3080
2813
|
});
|
|
3081
|
-
|
|
3082
|
-
};
|
|
3083
|
-
ImageAssetCard.defaultProps = {
|
|
3084
|
-
height: void 0,
|
|
3085
|
-
width: void 0,
|
|
3086
|
-
selected: false,
|
|
3087
|
-
onEdit: void 0,
|
|
3088
|
-
onSelect: void 0,
|
|
3089
|
-
onRemove: void 0,
|
|
3090
|
-
size: "M",
|
|
3091
|
-
updatedAt: void 0
|
|
3092
|
-
};
|
|
3093
|
-
ImageAssetCard.propTypes = {
|
|
3094
|
-
alt: PropTypes__default.default.string.isRequired,
|
|
3095
|
-
extension: PropTypes__default.default.string.isRequired,
|
|
3096
|
-
height: PropTypes__default.default.number,
|
|
3097
|
-
name: PropTypes__default.default.string.isRequired,
|
|
3098
|
-
onEdit: PropTypes__default.default.func,
|
|
3099
|
-
onSelect: PropTypes__default.default.func,
|
|
3100
|
-
onRemove: PropTypes__default.default.func,
|
|
3101
|
-
width: PropTypes__default.default.number,
|
|
3102
|
-
thumbnail: PropTypes__default.default.string.isRequired,
|
|
3103
|
-
selected: PropTypes__default.default.bool,
|
|
3104
|
-
size: PropTypes__default.default.oneOf(["S", "M"]),
|
|
3105
|
-
updatedAt: PropTypes__default.default.string,
|
|
3106
|
-
isUrlSigned: PropTypes__default.default.bool.isRequired
|
|
2814
|
+
const subtitle = height && width ? ` - ${width}✕${height}` : void 0;
|
|
2815
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AssetCardBase, { ...props, selected, subtitle, variant: "Image", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: thumbnailUrl, size, alt }) });
|
|
3107
2816
|
};
|
|
3108
2817
|
const HAVE_FUTURE_DATA = 3;
|
|
3109
|
-
const VideoPreview = ({
|
|
2818
|
+
const VideoPreview = ({
|
|
2819
|
+
url,
|
|
2820
|
+
mime,
|
|
2821
|
+
onLoadDuration = () => {
|
|
2822
|
+
},
|
|
2823
|
+
alt,
|
|
2824
|
+
size = "M",
|
|
2825
|
+
...props
|
|
2826
|
+
}) => {
|
|
3110
2827
|
const handleTimeUpdate = (e) => {
|
|
3111
|
-
if (e.
|
|
3112
|
-
const video = e.
|
|
2828
|
+
if (e.currentTarget.currentTime > 0) {
|
|
2829
|
+
const video = e.currentTarget;
|
|
3113
2830
|
const canvas = document.createElement("canvas");
|
|
3114
2831
|
canvas.height = video.videoHeight;
|
|
3115
2832
|
canvas.width = video.videoWidth;
|
|
3116
|
-
canvas.getContext("2d")
|
|
2833
|
+
canvas.getContext("2d")?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
|
|
3117
2834
|
video.replaceWith(canvas);
|
|
3118
|
-
onLoadDuration(video.duration);
|
|
2835
|
+
onLoadDuration && onLoadDuration(video.duration);
|
|
3119
2836
|
}
|
|
3120
2837
|
};
|
|
3121
2838
|
const handleThumbnailVisibility = (e) => {
|
|
3122
|
-
const video = e.
|
|
2839
|
+
const video = e.currentTarget;
|
|
3123
2840
|
if (video.readyState < HAVE_FUTURE_DATA)
|
|
3124
2841
|
return;
|
|
3125
2842
|
video.play();
|
|
3126
2843
|
};
|
|
3127
|
-
return /* @__PURE__ */
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
},
|
|
3142
|
-
size: "M"
|
|
3143
|
-
};
|
|
3144
|
-
VideoPreview.propTypes = {
|
|
3145
|
-
alt: PropTypes__default.default.string.isRequired,
|
|
3146
|
-
url: PropTypes__default.default.string.isRequired,
|
|
3147
|
-
mime: PropTypes__default.default.string.isRequired,
|
|
3148
|
-
onLoadDuration: PropTypes__default.default.func,
|
|
3149
|
-
size: PropTypes__default.default.oneOf(["S", "M"])
|
|
2844
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { tag: "figure", ...props, children: [
|
|
2845
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2846
|
+
"video",
|
|
2847
|
+
{
|
|
2848
|
+
muted: true,
|
|
2849
|
+
onLoadedData: handleThumbnailVisibility,
|
|
2850
|
+
src: url,
|
|
2851
|
+
crossOrigin: "anonymous",
|
|
2852
|
+
onTimeUpdate: handleTimeUpdate,
|
|
2853
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("source", { type: mime })
|
|
2854
|
+
}
|
|
2855
|
+
),
|
|
2856
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "figcaption", children: alt })
|
|
2857
|
+
] }, url);
|
|
3150
2858
|
};
|
|
3151
2859
|
const VideoPreviewWrapper$2 = styledComponents.styled(designSystem.Box)`
|
|
3152
2860
|
canvas,
|
|
@@ -3157,39 +2865,35 @@ const VideoPreviewWrapper$2 = styledComponents.styled(designSystem.Box)`
|
|
|
3157
2865
|
max-height: ${({ size }) => size === "M" ? 16.4 : 8.8}rem;
|
|
3158
2866
|
}
|
|
3159
2867
|
`;
|
|
3160
|
-
const VideoAssetCard = ({
|
|
3161
|
-
|
|
2868
|
+
const VideoAssetCard = ({
|
|
2869
|
+
name: name2,
|
|
2870
|
+
url,
|
|
2871
|
+
mime,
|
|
2872
|
+
size = "M",
|
|
2873
|
+
selected = false,
|
|
2874
|
+
...props
|
|
2875
|
+
}) => {
|
|
2876
|
+
const [duration, setDuration] = React__namespace.useState();
|
|
3162
2877
|
const formattedDuration = duration && formatDuration(duration);
|
|
3163
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(AssetCardBase, { name: name2, ...props, variant: "Video", children: [
|
|
2878
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(AssetCardBase, { selected, name: name2, ...props, variant: "Video", children: [
|
|
3164
2879
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { size, children: /* @__PURE__ */ jsxRuntime.jsx(VideoPreviewWrapper$2, { size, children: /* @__PURE__ */ jsxRuntime.jsx(VideoPreview, { url, mime, onLoadDuration: setDuration, alt: name2 }) }) }),
|
|
3165
2880
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTimer, { children: formattedDuration || "..." })
|
|
3166
2881
|
] });
|
|
3167
2882
|
};
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3177
|
-
mime: PropTypes__default.default.string.isRequired,
|
|
3178
|
-
name: PropTypes__default.default.string.isRequired,
|
|
3179
|
-
onSelect: PropTypes__default.default.func,
|
|
3180
|
-
onEdit: PropTypes__default.default.func,
|
|
3181
|
-
onRemove: PropTypes__default.default.func,
|
|
3182
|
-
url: PropTypes__default.default.string.isRequired,
|
|
3183
|
-
selected: PropTypes__default.default.bool,
|
|
3184
|
-
size: PropTypes__default.default.oneOf(["S", "M"])
|
|
3185
|
-
};
|
|
3186
|
-
const AssetCard = ({ asset, isSelected, onSelect, onEdit, onRemove, size, local }) => {
|
|
2883
|
+
const AssetCard = ({
|
|
2884
|
+
asset,
|
|
2885
|
+
isSelected = false,
|
|
2886
|
+
onSelect,
|
|
2887
|
+
onEdit,
|
|
2888
|
+
onRemove,
|
|
2889
|
+
size = "M",
|
|
2890
|
+
local = false
|
|
2891
|
+
}) => {
|
|
3187
2892
|
const handleSelect = onSelect ? () => onSelect(asset) : void 0;
|
|
3188
2893
|
const commonAssetCardProps = {
|
|
3189
2894
|
id: asset.id,
|
|
3190
2895
|
isSelectable: asset.isSelectable,
|
|
3191
2896
|
extension: getFileExtension(asset.ext),
|
|
3192
|
-
key: asset.id,
|
|
3193
2897
|
name: asset.name,
|
|
3194
2898
|
url: local ? asset.url : createAssetUrl(asset, true),
|
|
3195
2899
|
mime: asset.mime,
|
|
@@ -3199,55 +2903,37 @@ const AssetCard = ({ asset, isSelected, onSelect, onEdit, onRemove, size, local
|
|
|
3199
2903
|
selected: isSelected,
|
|
3200
2904
|
size
|
|
3201
2905
|
};
|
|
3202
|
-
if (asset.mime
|
|
2906
|
+
if (asset.mime?.includes(AssetType.Video)) {
|
|
3203
2907
|
return /* @__PURE__ */ jsxRuntime.jsx(VideoAssetCard, { ...commonAssetCardProps });
|
|
3204
2908
|
}
|
|
3205
|
-
if (asset.mime
|
|
2909
|
+
if (asset.mime?.includes(AssetType.Image)) {
|
|
3206
2910
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3207
2911
|
ImageAssetCard,
|
|
3208
2912
|
{
|
|
3209
|
-
...commonAssetCardProps,
|
|
3210
2913
|
alt: asset.alternativeText || asset.name,
|
|
3211
2914
|
height: asset.height,
|
|
3212
2915
|
thumbnail: prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url),
|
|
3213
2916
|
width: asset.width,
|
|
3214
2917
|
updatedAt: asset.updatedAt,
|
|
3215
|
-
isUrlSigned: asset?.isUrlSigned || false
|
|
2918
|
+
isUrlSigned: asset?.isUrlSigned || false,
|
|
2919
|
+
...commonAssetCardProps
|
|
3216
2920
|
}
|
|
3217
2921
|
);
|
|
3218
2922
|
}
|
|
3219
|
-
if (asset.mime
|
|
2923
|
+
if (asset.mime?.includes(AssetType.Audio)) {
|
|
3220
2924
|
return /* @__PURE__ */ jsxRuntime.jsx(AudioAssetCard, { ...commonAssetCardProps });
|
|
3221
2925
|
}
|
|
3222
2926
|
return /* @__PURE__ */ jsxRuntime.jsx(DocAssetCard, { ...commonAssetCardProps });
|
|
3223
2927
|
};
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
// Determine if the asset is loaded locally or from a remote resource
|
|
3227
|
-
local: false,
|
|
3228
|
-
onSelect: void 0,
|
|
3229
|
-
onEdit: void 0,
|
|
3230
|
-
onRemove: void 0,
|
|
3231
|
-
size: "M"
|
|
3232
|
-
};
|
|
3233
|
-
AssetCard.propTypes = {
|
|
3234
|
-
asset: AssetDefinition.isRequired,
|
|
3235
|
-
local: PropTypes__default.default.bool,
|
|
3236
|
-
onSelect: PropTypes__default.default.func,
|
|
3237
|
-
onEdit: PropTypes__default.default.func,
|
|
3238
|
-
onRemove: PropTypes__default.default.func,
|
|
3239
|
-
isSelected: PropTypes__default.default.bool,
|
|
3240
|
-
size: PropTypes__default.default.oneOf(["S", "M"])
|
|
3241
|
-
};
|
|
3242
|
-
const Draggable = ({ children, id: id2, index: index2, moveItem }) => {
|
|
3243
|
-
const ref = React.useRef(null);
|
|
2928
|
+
const Draggable = ({ children, id, index: index2, moveItem }) => {
|
|
2929
|
+
const ref = React__namespace.useRef(null);
|
|
3244
2930
|
const [, drop] = reactDnd.useDrop({
|
|
3245
2931
|
accept: "draggable",
|
|
3246
2932
|
hover(hoveredOverItem) {
|
|
3247
2933
|
if (!ref.current) {
|
|
3248
2934
|
return;
|
|
3249
2935
|
}
|
|
3250
|
-
if (hoveredOverItem.id !==
|
|
2936
|
+
if (hoveredOverItem.id !== id) {
|
|
3251
2937
|
moveItem(hoveredOverItem.index, index2);
|
|
3252
2938
|
hoveredOverItem.index = index2;
|
|
3253
2939
|
}
|
|
@@ -3256,7 +2942,7 @@ const Draggable = ({ children, id: id2, index: index2, moveItem }) => {
|
|
|
3256
2942
|
const [{ isDragging }, drag] = reactDnd.useDrag({
|
|
3257
2943
|
type: "draggable",
|
|
3258
2944
|
item() {
|
|
3259
|
-
return { index: index2, id
|
|
2945
|
+
return { index: index2, id };
|
|
3260
2946
|
},
|
|
3261
2947
|
collect: (monitor) => ({
|
|
3262
2948
|
isDragging: monitor.isDragging()
|
|
@@ -3266,21 +2952,15 @@ const Draggable = ({ children, id: id2, index: index2, moveItem }) => {
|
|
|
3266
2952
|
drag(drop(ref));
|
|
3267
2953
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: { opacity, cursor: "move" }, children });
|
|
3268
2954
|
};
|
|
3269
|
-
Draggable.propTypes = {
|
|
3270
|
-
id: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]).isRequired,
|
|
3271
|
-
index: PropTypes__default.default.number.isRequired,
|
|
3272
|
-
children: PropTypes__default.default.node.isRequired,
|
|
3273
|
-
moveItem: PropTypes__default.default.func.isRequired
|
|
3274
|
-
};
|
|
3275
2955
|
const AssetGridList = ({
|
|
3276
|
-
allowedTypes,
|
|
2956
|
+
allowedTypes = ["files", "images", "videos", "audios"],
|
|
3277
2957
|
assets,
|
|
3278
2958
|
onEditAsset,
|
|
3279
2959
|
onSelectAsset,
|
|
3280
2960
|
selectedAssets,
|
|
3281
|
-
size,
|
|
2961
|
+
size = "M",
|
|
3282
2962
|
onReorderAsset,
|
|
3283
|
-
title
|
|
2963
|
+
title = null
|
|
3284
2964
|
}) => {
|
|
3285
2965
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { tagName: "article", children: [
|
|
3286
2966
|
title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
|
|
@@ -3314,32 +2994,19 @@ const AssetGridList = ({
|
|
|
3314
2994
|
}) })
|
|
3315
2995
|
] });
|
|
3316
2996
|
};
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
};
|
|
3324
|
-
AssetGridList.propTypes = {
|
|
3325
|
-
allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
|
|
3326
|
-
assets: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({})).isRequired,
|
|
3327
|
-
onEditAsset: PropTypes__default.default.func,
|
|
3328
|
-
onSelectAsset: PropTypes__default.default.func.isRequired,
|
|
3329
|
-
selectedAssets: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({})).isRequired,
|
|
3330
|
-
size: PropTypes__default.default.oneOf(["S", "M"]),
|
|
3331
|
-
onReorderAsset: PropTypes__default.default.func,
|
|
3332
|
-
title: PropTypes__default.default.string
|
|
3333
|
-
};
|
|
3334
|
-
const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }) => {
|
|
3335
|
-
const [shouldFetch, setShouldFetch] = React.useState(false);
|
|
2997
|
+
const CrumbSimpleMenuAsync = ({
|
|
2998
|
+
parentsToOmit = [],
|
|
2999
|
+
currentFolderId,
|
|
3000
|
+
onChangeFolder
|
|
3001
|
+
}) => {
|
|
3002
|
+
const [shouldFetch, setShouldFetch] = React__namespace.useState(false);
|
|
3336
3003
|
const { data, isLoading } = useFolderStructure({ enabled: shouldFetch });
|
|
3337
3004
|
const { pathname } = reactRouterDom.useLocation();
|
|
3338
3005
|
const [{ query }] = strapiAdmin.useQueryParams();
|
|
3339
3006
|
const { formatMessage } = reactIntl.useIntl();
|
|
3340
3007
|
const allAscendants = data && getFolderParents(data, currentFolderId);
|
|
3341
3008
|
const filteredAscendants = allAscendants && allAscendants.filter(
|
|
3342
|
-
(ascendant) => !parentsToOmit.includes(ascendant.id) && ascendant.id !== null
|
|
3009
|
+
(ascendant) => typeof ascendant.id === "number" && !parentsToOmit.includes(ascendant.id) && ascendant.id !== null
|
|
3343
3010
|
);
|
|
3344
3011
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3345
3012
|
designSystem.CrumbSimpleMenu,
|
|
@@ -3363,33 +3030,28 @@ const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }
|
|
|
3363
3030
|
{
|
|
3364
3031
|
tag: "button",
|
|
3365
3032
|
type: "button",
|
|
3366
|
-
onClick: () => onChangeFolder(ascendant.id, ascendant.path),
|
|
3033
|
+
onClick: () => onChangeFolder(Number(ascendant.id), ascendant.path),
|
|
3367
3034
|
children: ascendant.label
|
|
3368
3035
|
},
|
|
3369
3036
|
ascendant.id
|
|
3370
3037
|
);
|
|
3371
3038
|
}
|
|
3372
3039
|
const url = getFolderURL(pathname, query, {
|
|
3373
|
-
folder: ascendant?.id,
|
|
3040
|
+
folder: typeof ascendant?.id === "string" ? ascendant.id : void 0,
|
|
3374
3041
|
folderPath: ascendant?.path
|
|
3375
3042
|
});
|
|
3376
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { isLink: true,
|
|
3043
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { isLink: true, href: url, children: ascendant.label }, ascendant.id);
|
|
3377
3044
|
})
|
|
3378
3045
|
]
|
|
3379
3046
|
}
|
|
3380
3047
|
);
|
|
3381
3048
|
};
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
onChangeFolder
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
currentFolderId: PropTypes__default.default.number,
|
|
3389
|
-
onChangeFolder: PropTypes__default.default.func,
|
|
3390
|
-
parentsToOmit: PropTypes__default.default.arrayOf(PropTypes__default.default.number)
|
|
3391
|
-
};
|
|
3392
|
-
const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => {
|
|
3049
|
+
const Breadcrumbs = ({
|
|
3050
|
+
breadcrumbs,
|
|
3051
|
+
onChangeFolder,
|
|
3052
|
+
currentFolderId,
|
|
3053
|
+
...props
|
|
3054
|
+
}) => {
|
|
3393
3055
|
const { formatMessage } = reactIntl.useIntl();
|
|
3394
3056
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Breadcrumbs, { ...props, children: breadcrumbs.map((crumb, index2) => {
|
|
3395
3057
|
if (Array.isArray(crumb)) {
|
|
@@ -3405,14 +3067,24 @@ const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })
|
|
|
3405
3067
|
}
|
|
3406
3068
|
const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === void 0;
|
|
3407
3069
|
if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
|
|
3070
|
+
if (onChangeFolder) {
|
|
3071
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3072
|
+
designSystem.CrumbLink,
|
|
3073
|
+
{
|
|
3074
|
+
tag: "button",
|
|
3075
|
+
type: "button",
|
|
3076
|
+
onClick: () => onChangeFolder(crumb.id, crumb.path),
|
|
3077
|
+
children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
|
|
3078
|
+
},
|
|
3079
|
+
`breadcrumb-${crumb?.id ?? "root"}`
|
|
3080
|
+
);
|
|
3081
|
+
}
|
|
3408
3082
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3409
3083
|
designSystem.CrumbLink,
|
|
3410
3084
|
{
|
|
3411
|
-
tag:
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
onClick: onChangeFolder && (() => onChangeFolder(crumb.id, crumb.path)),
|
|
3415
|
-
children: crumb.label?.id ? formatMessage(crumb.label) : crumb.label
|
|
3085
|
+
tag: reactRouterDom.NavLink,
|
|
3086
|
+
href: crumb.href,
|
|
3087
|
+
children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
|
|
3416
3088
|
},
|
|
3417
3089
|
`breadcrumb-${crumb?.id ?? "root"}`
|
|
3418
3090
|
);
|
|
@@ -3421,21 +3093,12 @@ const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })
|
|
|
3421
3093
|
designSystem.Crumb,
|
|
3422
3094
|
{
|
|
3423
3095
|
isCurrent: index2 + 1 === breadcrumbs.length,
|
|
3424
|
-
children: crumb.label?.id ? formatMessage(crumb.label) : crumb.label
|
|
3096
|
+
children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
|
|
3425
3097
|
},
|
|
3426
3098
|
`breadcrumb-${crumb?.id ?? "root"}`
|
|
3427
3099
|
);
|
|
3428
3100
|
}) });
|
|
3429
3101
|
};
|
|
3430
|
-
Breadcrumbs.defaultProps = {
|
|
3431
|
-
currentFolderId: void 0,
|
|
3432
|
-
onChangeFolder: void 0
|
|
3433
|
-
};
|
|
3434
|
-
Breadcrumbs.propTypes = {
|
|
3435
|
-
breadcrumbs: BreadcrumbsDefinition.isRequired,
|
|
3436
|
-
currentFolderId: PropTypes__default.default.number,
|
|
3437
|
-
onChangeFolder: PropTypes__default.default.func
|
|
3438
|
-
};
|
|
3439
3102
|
const EmptyAssetCard = styledComponents.styled(designSystem.Box)`
|
|
3440
3103
|
background: linear-gradient(
|
|
3441
3104
|
180deg,
|
|
@@ -3458,11 +3121,13 @@ const EmptyAssetGrid = ({ count, size }) => {
|
|
|
3458
3121
|
`empty-asset-card-${idx}`
|
|
3459
3122
|
)) });
|
|
3460
3123
|
};
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3124
|
+
const EmptyAssets = ({
|
|
3125
|
+
icon: Icon = symbols.EmptyDocuments,
|
|
3126
|
+
content,
|
|
3127
|
+
action,
|
|
3128
|
+
size = "M",
|
|
3129
|
+
count = 12
|
|
3130
|
+
}) => {
|
|
3466
3131
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { position: "relative", children: [
|
|
3467
3132
|
/* @__PURE__ */ jsxRuntime.jsx(EmptyAssetGrid, { size, count }),
|
|
3468
3133
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { position: "absolute", top: 11, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, textAlign: "center", children: [
|
|
@@ -3474,29 +3139,10 @@ const EmptyAssets = ({ icon: Icon = symbols.EmptyDocuments, content, action, siz
|
|
|
3474
3139
|
] }) })
|
|
3475
3140
|
] });
|
|
3476
3141
|
};
|
|
3477
|
-
EmptyAssets.defaultProps = {
|
|
3478
|
-
action: void 0,
|
|
3479
|
-
icon: void 0,
|
|
3480
|
-
size: "M",
|
|
3481
|
-
count: 12
|
|
3482
|
-
};
|
|
3483
|
-
EmptyAssets.propTypes = {
|
|
3484
|
-
action: PropTypes__default.default.node,
|
|
3485
|
-
icon: PropTypes__default.default.elementType,
|
|
3486
|
-
content: PropTypes__default.default.string.isRequired,
|
|
3487
|
-
size: PropTypes__default.default.string,
|
|
3488
|
-
count: PropTypes__default.default.number
|
|
3489
|
-
};
|
|
3490
3142
|
const FolderCardContext = React.createContext({});
|
|
3491
3143
|
function useFolderCard() {
|
|
3492
3144
|
return React.useContext(FolderCardContext);
|
|
3493
3145
|
}
|
|
3494
|
-
let id = 0;
|
|
3495
|
-
const genId = () => ++id;
|
|
3496
|
-
const useId = (initialId) => {
|
|
3497
|
-
const idRef = React.useRef(`${initialId}-${genId()}`);
|
|
3498
|
-
return idRef.current;
|
|
3499
|
-
};
|
|
3500
3146
|
const FauxClickWrapper = styledComponents.styled.button`
|
|
3501
3147
|
height: 100%;
|
|
3502
3148
|
left: 0;
|
|
@@ -3526,16 +3172,25 @@ const Card = styledComponents.styled(designSystem.Box)`
|
|
|
3526
3172
|
}
|
|
3527
3173
|
}
|
|
3528
3174
|
`;
|
|
3529
|
-
const FolderCard =
|
|
3530
|
-
({
|
|
3531
|
-
|
|
3532
|
-
|
|
3175
|
+
const FolderCard = React__namespace.forwardRef(
|
|
3176
|
+
({
|
|
3177
|
+
children,
|
|
3178
|
+
id,
|
|
3179
|
+
startAction = null,
|
|
3180
|
+
cardActions = null,
|
|
3181
|
+
ariaLabel,
|
|
3182
|
+
onClick,
|
|
3183
|
+
to,
|
|
3184
|
+
...props
|
|
3185
|
+
}, ref) => {
|
|
3186
|
+
const generatedId = React__namespace.useId();
|
|
3187
|
+
const fodlerCtxValue = React__namespace.useMemo(() => ({ id: generatedId }), [generatedId]);
|
|
3533
3188
|
return /* @__PURE__ */ jsxRuntime.jsx(FolderCardContext.Provider, { value: fodlerCtxValue, children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { position: "relative", tabIndex: 0, $isCardActions: !!cardActions, ref, ...props, children: [
|
|
3534
3189
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3535
3190
|
FauxClickWrapper,
|
|
3536
3191
|
{
|
|
3537
3192
|
to: to || void 0,
|
|
3538
|
-
|
|
3193
|
+
as: to ? reactRouterDom.NavLink : "button",
|
|
3539
3194
|
type: to ? void 0 : "button",
|
|
3540
3195
|
onClick,
|
|
3541
3196
|
tabIndex: -1,
|
|
@@ -3571,39 +3226,23 @@ const FolderCard = React.forwardRef(
|
|
|
3571
3226
|
}
|
|
3572
3227
|
),
|
|
3573
3228
|
children,
|
|
3574
|
-
/* @__PURE__ */ jsxRuntime.jsx(CardActionDisplay, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAction, { right: 4, children: cardActions }) })
|
|
3229
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardActionDisplay, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAction, { right: 4, position: "end", children: cardActions }) })
|
|
3575
3230
|
]
|
|
3576
3231
|
}
|
|
3577
3232
|
)
|
|
3578
3233
|
] }) });
|
|
3579
3234
|
}
|
|
3580
3235
|
);
|
|
3581
|
-
FolderCard.defaultProps = {
|
|
3582
|
-
id: void 0,
|
|
3583
|
-
cardActions: null,
|
|
3584
|
-
startAction: null,
|
|
3585
|
-
to: void 0,
|
|
3586
|
-
onClick: void 0
|
|
3587
|
-
};
|
|
3588
|
-
FolderCard.propTypes = {
|
|
3589
|
-
ariaLabel: PropTypes__default.default.string.isRequired,
|
|
3590
|
-
children: PropTypes__default.default.node.isRequired,
|
|
3591
|
-
id: PropTypes__default.default.string,
|
|
3592
|
-
onClick: PropTypes__default.default.func,
|
|
3593
|
-
startAction: PropTypes__default.default.element,
|
|
3594
|
-
cardActions: PropTypes__default.default.element,
|
|
3595
|
-
to: PropTypes__default.default.string
|
|
3596
|
-
};
|
|
3597
3236
|
const StyledBox = styledComponents.styled(designSystem.Flex)`
|
|
3598
3237
|
user-select: none;
|
|
3599
3238
|
`;
|
|
3600
3239
|
const FolderCardBody = (props) => {
|
|
3601
|
-
const { id
|
|
3240
|
+
const { id } = useFolderCard();
|
|
3602
3241
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3603
3242
|
StyledBox,
|
|
3604
3243
|
{
|
|
3605
3244
|
...props,
|
|
3606
|
-
id: `${
|
|
3245
|
+
id: `${id}-title`,
|
|
3607
3246
|
alignItems: "flex-start",
|
|
3608
3247
|
direction: "column",
|
|
3609
3248
|
maxWidth: "100%",
|
|
@@ -3636,25 +3275,12 @@ const FolderCardBodyAction = ({ to, ...props }) => {
|
|
|
3636
3275
|
}
|
|
3637
3276
|
return /* @__PURE__ */ jsxRuntime.jsx(BoxOutline, { padding: 1, tag: "button", type: "button", maxWidth: "100%", ...props });
|
|
3638
3277
|
};
|
|
3639
|
-
|
|
3640
|
-
to: void 0
|
|
3641
|
-
};
|
|
3642
|
-
FolderCardBodyAction.propTypes = {
|
|
3643
|
-
to: PropTypes__default.default.string
|
|
3644
|
-
};
|
|
3645
|
-
const FolderGridList = ({ title, children }) => {
|
|
3278
|
+
const FolderGridList = ({ title = null, children }) => {
|
|
3646
3279
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { tagName: "article", children: [
|
|
3647
3280
|
title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
|
|
3648
3281
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children })
|
|
3649
3282
|
] });
|
|
3650
3283
|
};
|
|
3651
|
-
FolderGridList.defaultProps = {
|
|
3652
|
-
title: null
|
|
3653
|
-
};
|
|
3654
|
-
FolderGridList.propTypes = {
|
|
3655
|
-
children: PropTypes__default.default.node.isRequired,
|
|
3656
|
-
title: PropTypes__default.default.string
|
|
3657
|
-
};
|
|
3658
3284
|
const SortPicker = ({ onChangeSort, value }) => {
|
|
3659
3285
|
const { formatMessage } = reactIntl.useIntl();
|
|
3660
3286
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3662,7 +3288,7 @@ const SortPicker = ({ onChangeSort, value }) => {
|
|
|
3662
3288
|
{
|
|
3663
3289
|
size: "S",
|
|
3664
3290
|
value,
|
|
3665
|
-
onChange: (value2) => onChangeSort(value2),
|
|
3291
|
+
onChange: (value2) => onChangeSort(value2.toString()),
|
|
3666
3292
|
"aria-label": formatMessage({
|
|
3667
3293
|
id: getTrad("sort.label"),
|
|
3668
3294
|
defaultMessage: "Sort by"
|
|
@@ -3671,17 +3297,10 @@ const SortPicker = ({ onChangeSort, value }) => {
|
|
|
3671
3297
|
id: getTrad("sort.label"),
|
|
3672
3298
|
defaultMessage: "Sort by"
|
|
3673
3299
|
}),
|
|
3674
|
-
children: sortOptions.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
|
|
3300
|
+
children: sortOptions$1.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
|
|
3675
3301
|
}
|
|
3676
3302
|
);
|
|
3677
3303
|
};
|
|
3678
|
-
SortPicker.defaultProps = {
|
|
3679
|
-
value: void 0
|
|
3680
|
-
};
|
|
3681
|
-
SortPicker.propTypes = {
|
|
3682
|
-
onChangeSort: PropTypes__default.default.func.isRequired,
|
|
3683
|
-
value: PropTypes__default.default.string
|
|
3684
|
-
};
|
|
3685
3304
|
const VideoPreviewWrapper$1 = styledComponents.styled(designSystem.Box)`
|
|
3686
3305
|
figure {
|
|
3687
3306
|
width: ${({ theme }) => theme.spaces[7]};
|
|
@@ -3711,15 +3330,23 @@ const PreviewCell = ({ type, content }) => {
|
|
|
3711
3330
|
);
|
|
3712
3331
|
}
|
|
3713
3332
|
const { alternativeText, ext, formats, mime, name: name2, url } = content;
|
|
3714
|
-
if (mime
|
|
3333
|
+
if (mime?.includes(AssetType.Image)) {
|
|
3715
3334
|
const mediaURL = prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
|
|
3716
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3335
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3336
|
+
designSystem.Avatar.Item,
|
|
3337
|
+
{
|
|
3338
|
+
src: mediaURL,
|
|
3339
|
+
alt: alternativeText || void 0,
|
|
3340
|
+
preview: true,
|
|
3341
|
+
fallback: alternativeText
|
|
3342
|
+
}
|
|
3343
|
+
);
|
|
3717
3344
|
}
|
|
3718
|
-
if (mime
|
|
3345
|
+
if (mime?.includes(AssetType.Video)) {
|
|
3719
3346
|
return /* @__PURE__ */ jsxRuntime.jsx(VideoPreviewWrapper$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3720
3347
|
VideoPreview,
|
|
3721
3348
|
{
|
|
3722
|
-
url: createAssetUrl(content, true),
|
|
3349
|
+
url: createAssetUrl(content, true) || "",
|
|
3723
3350
|
mime,
|
|
3724
3351
|
alt: alternativeText ?? name2
|
|
3725
3352
|
}
|
|
@@ -3727,28 +3354,16 @@ const PreviewCell = ({ type, content }) => {
|
|
|
3727
3354
|
}
|
|
3728
3355
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "secondary100", color: "secondary600", width: "3.2rem", height: "3.2rem", children: getFileExtension(ext) });
|
|
3729
3356
|
};
|
|
3730
|
-
PreviewCell.propTypes = {
|
|
3731
|
-
content: PropTypes__default.default.shape({
|
|
3732
|
-
alternativeText: PropTypes__default.default.string,
|
|
3733
|
-
ext: PropTypes__default.default.string,
|
|
3734
|
-
formats: PropTypes__default.default.shape({
|
|
3735
|
-
thumbnail: PropTypes__default.default.shape({
|
|
3736
|
-
url: PropTypes__default.default.string
|
|
3737
|
-
})
|
|
3738
|
-
}),
|
|
3739
|
-
mime: PropTypes__default.default.string,
|
|
3740
|
-
name: PropTypes__default.default.string,
|
|
3741
|
-
url: PropTypes__default.default.string
|
|
3742
|
-
}).isRequired,
|
|
3743
|
-
type: PropTypes__default.default.string.isRequired
|
|
3744
|
-
};
|
|
3745
3357
|
const CellContent = ({ cellType, contentType, content, name: name2 }) => {
|
|
3746
3358
|
const { formatDate, formatMessage } = reactIntl.useIntl();
|
|
3359
|
+
const contentValue = content[name2];
|
|
3747
3360
|
switch (cellType) {
|
|
3748
3361
|
case "image":
|
|
3749
3362
|
return /* @__PURE__ */ jsxRuntime.jsx(PreviewCell, { type: contentType, content });
|
|
3750
3363
|
case "date":
|
|
3751
|
-
|
|
3364
|
+
if (typeof contentValue === "string") {
|
|
3365
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatDate(parseISO__default.default(contentValue), { dateStyle: "full" }) });
|
|
3366
|
+
}
|
|
3752
3367
|
case "size":
|
|
3753
3368
|
if (contentType === "folder")
|
|
3754
3369
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3761,7 +3376,9 @@ const CellContent = ({ cellType, contentType, content, name: name2 }) => {
|
|
|
3761
3376
|
children: "-"
|
|
3762
3377
|
}
|
|
3763
3378
|
);
|
|
3764
|
-
|
|
3379
|
+
if (typeof contentValue === "string" || typeof contentValue === "number") {
|
|
3380
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatBytes(contentValue) });
|
|
3381
|
+
}
|
|
3765
3382
|
case "ext":
|
|
3766
3383
|
if (contentType === "folder")
|
|
3767
3384
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3774,9 +3391,13 @@ const CellContent = ({ cellType, contentType, content, name: name2 }) => {
|
|
|
3774
3391
|
children: "-"
|
|
3775
3392
|
}
|
|
3776
3393
|
);
|
|
3777
|
-
|
|
3394
|
+
if (typeof contentValue === "string") {
|
|
3395
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: getFileExtension(contentValue)?.toUpperCase() });
|
|
3396
|
+
}
|
|
3778
3397
|
case "text":
|
|
3779
|
-
|
|
3398
|
+
if (typeof contentValue === "string") {
|
|
3399
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: contentValue });
|
|
3400
|
+
}
|
|
3780
3401
|
default:
|
|
3781
3402
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3782
3403
|
designSystem.Typography,
|
|
@@ -3790,135 +3411,126 @@ const CellContent = ({ cellType, contentType, content, name: name2 }) => {
|
|
|
3790
3411
|
);
|
|
3791
3412
|
}
|
|
3792
3413
|
};
|
|
3793
|
-
CellContent.propTypes = {
|
|
3794
|
-
cellType: PropTypes__default.default.string.isRequired,
|
|
3795
|
-
contentType: PropTypes__default.default.string.isRequired,
|
|
3796
|
-
content: PropTypes__default.default.shape({
|
|
3797
|
-
alternativeText: PropTypes__default.default.string,
|
|
3798
|
-
ext: PropTypes__default.default.string,
|
|
3799
|
-
formats: PropTypes__default.default.shape({
|
|
3800
|
-
thumbnail: PropTypes__default.default.shape({
|
|
3801
|
-
url: PropTypes__default.default.string
|
|
3802
|
-
})
|
|
3803
|
-
}),
|
|
3804
|
-
mime: PropTypes__default.default.string,
|
|
3805
|
-
url: PropTypes__default.default.string
|
|
3806
|
-
}).isRequired,
|
|
3807
|
-
name: PropTypes__default.default.string.isRequired
|
|
3808
|
-
};
|
|
3809
3414
|
const TableRows = ({
|
|
3810
|
-
onChangeFolder,
|
|
3415
|
+
onChangeFolder = null,
|
|
3811
3416
|
onEditAsset,
|
|
3812
3417
|
onEditFolder,
|
|
3813
3418
|
onSelectOne,
|
|
3814
|
-
rows,
|
|
3815
|
-
selected
|
|
3419
|
+
rows = [],
|
|
3420
|
+
selected = []
|
|
3816
3421
|
}) => {
|
|
3817
3422
|
const { formatMessage } = reactIntl.useIntl();
|
|
3818
|
-
const handleRowClickFn = (element,
|
|
3423
|
+
const handleRowClickFn = (element, id, path, elementType) => {
|
|
3819
3424
|
if (elementType === "asset") {
|
|
3820
3425
|
onEditAsset(element);
|
|
3821
3426
|
} else {
|
|
3822
|
-
onChangeFolder
|
|
3427
|
+
if (onChangeFolder) {
|
|
3428
|
+
onChangeFolder(id, path);
|
|
3429
|
+
}
|
|
3823
3430
|
}
|
|
3824
3431
|
};
|
|
3825
3432
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: rows.map((element) => {
|
|
3826
|
-
const { path, id
|
|
3433
|
+
const { path, id, isSelectable: isSelectable2, name: name2, folderURL, type: contentType } = element;
|
|
3827
3434
|
const isSelected = !!selected.find(
|
|
3828
|
-
(currentRow) => currentRow.id ===
|
|
3435
|
+
(currentRow) => currentRow.id === id && currentRow.type === contentType
|
|
3829
3436
|
);
|
|
3830
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3437
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3438
|
+
designSystem.Tr,
|
|
3439
|
+
{
|
|
3440
|
+
onClick: () => handleRowClickFn(element, id, path || void 0, contentType),
|
|
3441
|
+
children: [
|
|
3442
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3443
|
+
designSystem.Checkbox,
|
|
3835
3444
|
{
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
designSystem.
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3445
|
+
"aria-label": formatMessage(
|
|
3446
|
+
{
|
|
3447
|
+
id: contentType === "asset" ? "list-assets-select" : "list.folder.select",
|
|
3448
|
+
defaultMessage: contentType === "asset" ? "Select {name} asset" : "Select {name} folder"
|
|
3449
|
+
},
|
|
3450
|
+
{ name: name2 }
|
|
3451
|
+
),
|
|
3452
|
+
disabled: !isSelectable2,
|
|
3453
|
+
onCheckedChange: () => onSelectOne(element),
|
|
3454
|
+
checked: isSelected
|
|
3455
|
+
}
|
|
3456
|
+
) }),
|
|
3457
|
+
tableHeaders.map(({ name: name22, type: cellType }) => {
|
|
3458
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3459
|
+
CellContent,
|
|
3460
|
+
{
|
|
3461
|
+
content: element,
|
|
3462
|
+
cellType,
|
|
3463
|
+
contentType,
|
|
3464
|
+
name: name22
|
|
3465
|
+
}
|
|
3466
|
+
) }, name22);
|
|
3467
|
+
}),
|
|
3468
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "flex-end", children: [
|
|
3469
|
+
contentType === "folder" && (folderURL ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3470
|
+
designSystem.IconButton,
|
|
3471
|
+
{
|
|
3472
|
+
tag: reactRouterDom.Link,
|
|
3473
|
+
label: formatMessage({
|
|
3474
|
+
id: getTrad("list.folders.link-label"),
|
|
3475
|
+
defaultMessage: "Access folder"
|
|
3476
|
+
}),
|
|
3477
|
+
to: folderURL,
|
|
3478
|
+
variant: "ghost",
|
|
3479
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
|
|
3480
|
+
}
|
|
3481
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
3482
|
+
designSystem.IconButton,
|
|
3483
|
+
{
|
|
3484
|
+
tag: "button",
|
|
3485
|
+
label: formatMessage({
|
|
3486
|
+
id: getTrad("list.folders.link-label"),
|
|
3487
|
+
defaultMessage: "Access folder"
|
|
3488
|
+
}),
|
|
3489
|
+
onClick: () => onChangeFolder && onChangeFolder(id),
|
|
3490
|
+
variant: "ghost",
|
|
3491
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
|
|
3492
|
+
}
|
|
3493
|
+
)),
|
|
3494
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3495
|
+
designSystem.IconButton,
|
|
3496
|
+
{
|
|
3497
|
+
label: formatMessage({
|
|
3498
|
+
id: getTrad("control-card.edit"),
|
|
3499
|
+
defaultMessage: "Edit"
|
|
3500
|
+
}),
|
|
3501
|
+
onClick: () => contentType === "asset" ? onEditAsset(element) : onEditFolder(element),
|
|
3502
|
+
variant: "ghost",
|
|
3503
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
|
|
3504
|
+
}
|
|
3505
|
+
)
|
|
3506
|
+
] }) })
|
|
3507
|
+
]
|
|
3508
|
+
},
|
|
3509
|
+
id
|
|
3510
|
+
);
|
|
3886
3511
|
}) });
|
|
3887
3512
|
};
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
|
|
3896
|
-
onEditFolder: PropTypes__default.default.func.isRequired,
|
|
3897
|
-
onSelectOne: PropTypes__default.default.func.isRequired,
|
|
3898
|
-
rows: PropTypes__default.default.arrayOf(AssetDefinition, FolderDefinition),
|
|
3899
|
-
selected: PropTypes__default.default.arrayOf(AssetDefinition, FolderDefinition)
|
|
3900
|
-
};
|
|
3901
|
-
const TableList = ({
|
|
3902
|
-
assetCount,
|
|
3903
|
-
folderCount,
|
|
3904
|
-
indeterminate,
|
|
3905
|
-
onChangeSort,
|
|
3906
|
-
onChangeFolder,
|
|
3907
|
-
onEditAsset,
|
|
3908
|
-
onEditFolder,
|
|
3513
|
+
const TableList = ({
|
|
3514
|
+
assetCount = 0,
|
|
3515
|
+
folderCount = 0,
|
|
3516
|
+
indeterminate = false,
|
|
3517
|
+
onChangeSort = null,
|
|
3518
|
+
onChangeFolder = null,
|
|
3519
|
+
onEditAsset = null,
|
|
3520
|
+
onEditFolder = null,
|
|
3909
3521
|
onSelectAll,
|
|
3910
3522
|
onSelectOne,
|
|
3911
|
-
rows,
|
|
3912
|
-
selected,
|
|
3913
|
-
shouldDisableBulkSelect,
|
|
3914
|
-
sortQuery
|
|
3523
|
+
rows = [],
|
|
3524
|
+
selected = [],
|
|
3525
|
+
shouldDisableBulkSelect = false,
|
|
3526
|
+
sortQuery = ""
|
|
3915
3527
|
}) => {
|
|
3916
3528
|
const { formatMessage } = reactIntl.useIntl();
|
|
3917
3529
|
const [sortBy, sortOrder] = sortQuery.split(":");
|
|
3918
3530
|
const handleClickSort = (isSorted, name2) => {
|
|
3919
3531
|
const nextSortOrder = isSorted && sortOrder === "ASC" ? "DESC" : "ASC";
|
|
3920
3532
|
const nextSort = `${name2}:${nextSortOrder}`;
|
|
3921
|
-
onChangeSort(nextSort);
|
|
3533
|
+
onChangeSort && onChangeSort(nextSort);
|
|
3922
3534
|
};
|
|
3923
3535
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: tableHeaders.length + 2, rowCount: assetCount + folderCount + 1, children: [
|
|
3924
3536
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
|
|
@@ -3959,7 +3571,6 @@ const TableList = ({
|
|
|
3959
3571
|
{
|
|
3960
3572
|
onClick: () => handleClickSort(isSorted, name2),
|
|
3961
3573
|
tag: isSorted ? "span" : "button",
|
|
3962
|
-
label: !isSorted ? sortLabel : "",
|
|
3963
3574
|
textColor: "neutral600",
|
|
3964
3575
|
variant: "sigma",
|
|
3965
3576
|
children: tableHeaderLabel
|
|
@@ -3987,41 +3598,13 @@ const TableList = ({
|
|
|
3987
3598
|
)
|
|
3988
3599
|
] });
|
|
3989
3600
|
};
|
|
3990
|
-
TableList.defaultProps = {
|
|
3991
|
-
assetCount: 0,
|
|
3992
|
-
folderCount: 0,
|
|
3993
|
-
indeterminate: false,
|
|
3994
|
-
onChangeSort: null,
|
|
3995
|
-
onChangeFolder: null,
|
|
3996
|
-
onEditAsset: null,
|
|
3997
|
-
onEditFolder: null,
|
|
3998
|
-
rows: [],
|
|
3999
|
-
selected: [],
|
|
4000
|
-
shouldDisableBulkSelect: false,
|
|
4001
|
-
sortQuery: ""
|
|
4002
|
-
};
|
|
4003
|
-
TableList.propTypes = {
|
|
4004
|
-
assetCount: PropTypes__default.default.number,
|
|
4005
|
-
folderCount: PropTypes__default.default.number,
|
|
4006
|
-
indeterminate: PropTypes__default.default.bool,
|
|
4007
|
-
onChangeSort: PropTypes__default.default.func,
|
|
4008
|
-
onChangeFolder: PropTypes__default.default.func,
|
|
4009
|
-
onEditAsset: PropTypes__default.default.func,
|
|
4010
|
-
onEditFolder: PropTypes__default.default.func,
|
|
4011
|
-
onSelectAll: PropTypes__default.default.func.isRequired,
|
|
4012
|
-
onSelectOne: PropTypes__default.default.func.isRequired,
|
|
4013
|
-
rows: PropTypes__default.default.arrayOf(AssetDefinition, FolderDefinition),
|
|
4014
|
-
selected: PropTypes__default.default.arrayOf(AssetDefinition, FolderDefinition),
|
|
4015
|
-
shouldDisableBulkSelect: PropTypes__default.default.bool,
|
|
4016
|
-
sortQuery: PropTypes__default.default.string
|
|
4017
|
-
};
|
|
4018
3601
|
const FilterTag = ({ attribute, filter, onClick, operator, value }) => {
|
|
4019
3602
|
const { formatMessage, formatDate, formatTime } = reactIntl.useIntl();
|
|
4020
3603
|
const handleClick = () => {
|
|
4021
3604
|
onClick(filter);
|
|
4022
3605
|
};
|
|
4023
3606
|
const { fieldSchema } = attribute;
|
|
4024
|
-
const type = fieldSchema
|
|
3607
|
+
const type = fieldSchema?.type;
|
|
4025
3608
|
let formattedValue = value;
|
|
4026
3609
|
if (type === "date") {
|
|
4027
3610
|
formattedValue = formatDate(value, { dateStyle: "full" });
|
|
@@ -4032,43 +3615,42 @@ const FilterTag = ({ attribute, filter, onClick, operator, value }) => {
|
|
|
4032
3615
|
if (type === "time") {
|
|
4033
3616
|
const [hour, minute] = value.split(":");
|
|
4034
3617
|
const date = /* @__PURE__ */ new Date();
|
|
4035
|
-
date.setHours(hour);
|
|
4036
|
-
date.setMinutes(minute);
|
|
3618
|
+
date.setHours(Number(hour));
|
|
3619
|
+
date.setMinutes(Number(minute));
|
|
4037
3620
|
formattedValue = formatTime(date, {
|
|
4038
|
-
|
|
4039
|
-
|
|
3621
|
+
hour: "numeric",
|
|
3622
|
+
minute: "numeric"
|
|
4040
3623
|
});
|
|
4041
3624
|
}
|
|
4042
|
-
const content = `${attribute.metadatas
|
|
3625
|
+
const content = `${attribute.metadatas?.label} ${formatMessage({
|
|
4043
3626
|
id: `components.FilterOptions.FILTER_TYPES.${operator}`,
|
|
4044
3627
|
defaultMessage: operator
|
|
4045
3628
|
})} ${formattedValue}`;
|
|
4046
3629
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tag, { onClick: handleClick, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}), padding: 1, children: content });
|
|
4047
3630
|
};
|
|
4048
|
-
FilterTag.propTypes = {
|
|
4049
|
-
attribute: PropTypes__default.default.shape({
|
|
4050
|
-
name: PropTypes__default.default.string.isRequired,
|
|
4051
|
-
fieldSchema: PropTypes__default.default.object.isRequired,
|
|
4052
|
-
metadatas: PropTypes__default.default.shape({ label: PropTypes__default.default.string.isRequired }).isRequired
|
|
4053
|
-
}).isRequired,
|
|
4054
|
-
filter: PropTypes__default.default.object.isRequired,
|
|
4055
|
-
onClick: PropTypes__default.default.func.isRequired,
|
|
4056
|
-
operator: PropTypes__default.default.string.isRequired,
|
|
4057
|
-
value: PropTypes__default.default.string.isRequired
|
|
4058
|
-
};
|
|
4059
3631
|
const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
|
|
4060
3632
|
const handleClick = (filter) => {
|
|
4061
3633
|
const nextFilters = appliedFilters.filter((prevFilter) => {
|
|
4062
3634
|
const name2 = Object.keys(filter)[0];
|
|
4063
|
-
const
|
|
4064
|
-
|
|
4065
|
-
|
|
3635
|
+
const filterName = filter[name2];
|
|
3636
|
+
if (filterName !== void 0) {
|
|
3637
|
+
const filterType = Object.keys(filterName)[0];
|
|
3638
|
+
const filterValue = filterName[filterType];
|
|
3639
|
+
if (typeof filterValue === "string") {
|
|
3640
|
+
const decodedValue = decodeURIComponent(filterValue);
|
|
3641
|
+
return prevFilter[name2]?.[filterType] !== decodedValue;
|
|
3642
|
+
}
|
|
3643
|
+
}
|
|
3644
|
+
return true;
|
|
4066
3645
|
});
|
|
4067
3646
|
onRemoveFilter(nextFilters);
|
|
4068
3647
|
};
|
|
4069
3648
|
return appliedFilters.map((filter, i) => {
|
|
4070
3649
|
const attributeName = Object.keys(filter)[0];
|
|
4071
3650
|
const attribute = filtersSchema.find(({ name: name2 }) => name2 === attributeName);
|
|
3651
|
+
if (!attribute) {
|
|
3652
|
+
return null;
|
|
3653
|
+
}
|
|
4072
3654
|
const filterObj = filter[attributeName];
|
|
4073
3655
|
const operator = Object.keys(filterObj)[0];
|
|
4074
3656
|
let value = filterObj[operator];
|
|
@@ -4080,7 +3662,7 @@ const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
|
|
|
4080
3662
|
value = Array.isArray(value) || typeof value === "object" ? Object.values(value).join(", ") : decodeURIComponent(value);
|
|
4081
3663
|
}
|
|
4082
3664
|
let displayedOperator = operator;
|
|
4083
|
-
if (attribute
|
|
3665
|
+
if (attribute?.name === "mime") {
|
|
4084
3666
|
displayedOperator = operator === "$contains" ? "$eq" : "$ne";
|
|
4085
3667
|
if (operator === "$not") {
|
|
4086
3668
|
value = "file";
|
|
@@ -4104,63 +3686,41 @@ const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
|
|
|
4104
3686
|
);
|
|
4105
3687
|
});
|
|
4106
3688
|
};
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
name: PropTypes__default.default.string.isRequired,
|
|
4115
|
-
metadatas: PropTypes__default.default.shape({ label: PropTypes__default.default.string }),
|
|
4116
|
-
fieldSchema: PropTypes__default.default.shape({
|
|
4117
|
-
type: PropTypes__default.default.string,
|
|
4118
|
-
mainField: PropTypes__default.default.shape({
|
|
4119
|
-
name: PropTypes__default.default.string,
|
|
4120
|
-
type: PropTypes__default.default.string
|
|
4121
|
-
})
|
|
4122
|
-
})
|
|
4123
|
-
})
|
|
4124
|
-
),
|
|
4125
|
-
onRemoveFilter: PropTypes__default.default.func.isRequired
|
|
4126
|
-
};
|
|
4127
|
-
const FilterValueInput = ({ label, onChange, options, type, value }) => {
|
|
3689
|
+
const FilterValueInput = ({
|
|
3690
|
+
label = "",
|
|
3691
|
+
onChange,
|
|
3692
|
+
options = [],
|
|
3693
|
+
type,
|
|
3694
|
+
value = ""
|
|
3695
|
+
}) => {
|
|
4128
3696
|
const { formatMessage } = reactIntl.useIntl();
|
|
4129
3697
|
if (type === "date") {
|
|
4130
3698
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4131
3699
|
designSystem.DateTimePicker,
|
|
4132
3700
|
{
|
|
4133
3701
|
clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
|
|
4134
|
-
|
|
3702
|
+
"aria-label": label,
|
|
4135
3703
|
name: "datetimepicker",
|
|
4136
3704
|
onChange: (date) => {
|
|
4137
3705
|
const formattedDate = date ? new Date(date).toISOString() : "";
|
|
4138
3706
|
onChange(formattedDate);
|
|
4139
3707
|
},
|
|
4140
3708
|
onClear: () => onChange(""),
|
|
4141
|
-
value: value ? new Date(value) : void 0
|
|
4142
|
-
selectedDateLabel: (formattedDate) => `Date picker, current is ${formattedDate}`,
|
|
4143
|
-
selectButtonTitle: formatMessage({ id: "selectButtonTitle", defaultMessage: "Select" })
|
|
3709
|
+
value: value ? new Date(value) : void 0
|
|
4144
3710
|
}
|
|
4145
3711
|
);
|
|
4146
3712
|
}
|
|
4147
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
|
|
4152
|
-
|
|
4153
|
-
|
|
4154
|
-
|
|
4155
|
-
}
|
|
4156
|
-
|
|
4157
|
-
|
|
4158
|
-
onChange: PropTypes__default.default.func.isRequired,
|
|
4159
|
-
options: PropTypes__default.default.arrayOf(
|
|
4160
|
-
PropTypes__default.default.shape({ label: PropTypes__default.default.string.isRequired, value: PropTypes__default.default.string.isRequired })
|
|
4161
|
-
),
|
|
4162
|
-
type: PropTypes__default.default.string.isRequired,
|
|
4163
|
-
value: PropTypes__default.default.any
|
|
3713
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3714
|
+
designSystem.SingleSelect,
|
|
3715
|
+
{
|
|
3716
|
+
"aria-label": label,
|
|
3717
|
+
onChange: (value2) => onChange(value2.toString()),
|
|
3718
|
+
value,
|
|
3719
|
+
children: options?.map((option) => {
|
|
3720
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: option.value, children: option.label }, option.value);
|
|
3721
|
+
})
|
|
3722
|
+
}
|
|
3723
|
+
);
|
|
4164
3724
|
};
|
|
4165
3725
|
const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
|
|
4166
3726
|
const type = mainField?.schema.type ? mainField.schema.type : fieldType;
|
|
@@ -4259,28 +3819,31 @@ const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
|
|
|
4259
3819
|
};
|
|
4260
3820
|
const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle }) => {
|
|
4261
3821
|
const { formatMessage } = reactIntl.useIntl();
|
|
4262
|
-
const [modifiedData, setModifiedData] =
|
|
3822
|
+
const [modifiedData, setModifiedData] = React__namespace.useState({
|
|
4263
3823
|
name: "createdAt",
|
|
4264
3824
|
filter: "$eq",
|
|
4265
3825
|
value: ""
|
|
4266
3826
|
});
|
|
4267
3827
|
const handleChangeFilterField = (value) => {
|
|
4268
3828
|
const nextField = displayedFilters2.find((f) => f.name === value);
|
|
3829
|
+
if (!nextField) {
|
|
3830
|
+
return;
|
|
3831
|
+
}
|
|
4269
3832
|
const {
|
|
4270
3833
|
fieldSchema: { type, options }
|
|
4271
3834
|
} = nextField;
|
|
4272
3835
|
let filterValue = "";
|
|
4273
3836
|
if (type === "enumeration") {
|
|
4274
|
-
filterValue = options[0].value;
|
|
3837
|
+
filterValue = options?.[0].value || "";
|
|
4275
3838
|
}
|
|
4276
3839
|
const filter = getFilterList(nextField)[0].value;
|
|
4277
|
-
setModifiedData({ name: value, filter, value: filterValue });
|
|
3840
|
+
setModifiedData({ name: value.toString(), filter, value: filterValue });
|
|
4278
3841
|
};
|
|
4279
3842
|
const handleChangeOperator = (operator) => {
|
|
4280
3843
|
if (modifiedData.name === "mime") {
|
|
4281
|
-
setModifiedData((prev) => ({ ...prev, filter: operator, value: "image" }));
|
|
3844
|
+
setModifiedData((prev) => ({ ...prev, filter: operator.toString(), value: "image" }));
|
|
4282
3845
|
} else {
|
|
4283
|
-
setModifiedData((prev) => ({ ...prev, filter: operator, value: "" }));
|
|
3846
|
+
setModifiedData((prev) => ({ ...prev, filter: operator.toString(), value: "" }));
|
|
4284
3847
|
}
|
|
4285
3848
|
};
|
|
4286
3849
|
const handleSubmit = (e) => {
|
|
@@ -4300,7 +3863,9 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
|
|
|
4300
3863
|
let filterToAdd2;
|
|
4301
3864
|
if (modifiedData.filter === "$contains") {
|
|
4302
3865
|
hasCurrentFilter = alreadyAppliedFilters.find((filter) => {
|
|
4303
|
-
|
|
3866
|
+
if (typeof filter.mime?.$not !== "string" && !Array.isArray(filter.mime?.$not)) {
|
|
3867
|
+
return filter.mime?.$not?.$contains !== void 0;
|
|
3868
|
+
}
|
|
4304
3869
|
}) !== void 0;
|
|
4305
3870
|
filterToAdd2 = {
|
|
4306
3871
|
mime: {
|
|
@@ -4329,7 +3894,8 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
|
|
|
4329
3894
|
return;
|
|
4330
3895
|
}
|
|
4331
3896
|
const hasFilter2 = alreadyAppliedFilters.find((filter) => {
|
|
4332
|
-
|
|
3897
|
+
const modifiedDataFilter = modifiedData.filter;
|
|
3898
|
+
return filter.mime && filter.mime[modifiedDataFilter] === modifiedData.value;
|
|
4333
3899
|
}) !== void 0;
|
|
4334
3900
|
if (hasFilter2) {
|
|
4335
3901
|
onToggle();
|
|
@@ -4340,7 +3906,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
|
|
|
4340
3906
|
if (filterType !== "mime") {
|
|
4341
3907
|
return true;
|
|
4342
3908
|
}
|
|
4343
|
-
if (filter.mime?.$not?.$contains !== void 0) {
|
|
3909
|
+
if (typeof filter.mime?.$not !== "string" && !Array.isArray(filter.mime?.$not) && filter.mime?.$not?.$contains !== void 0) {
|
|
4344
3910
|
return false;
|
|
4345
3911
|
}
|
|
4346
3912
|
if (Array.isArray(filter?.mime?.$contains)) {
|
|
@@ -4369,7 +3935,8 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
|
|
|
4369
3935
|
return;
|
|
4370
3936
|
}
|
|
4371
3937
|
const hasFilter = filters.find((filter) => {
|
|
4372
|
-
|
|
3938
|
+
const modifiedDataName = modifiedData.name;
|
|
3939
|
+
return filter[modifiedDataName] && filter[modifiedDataName]?.[modifiedDataName] === encodedValue;
|
|
4373
3940
|
}) !== void 0;
|
|
4374
3941
|
if (!hasFilter) {
|
|
4375
3942
|
let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: encodedValue } };
|
|
@@ -4393,7 +3960,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
|
|
|
4393
3960
|
onChange: handleChangeFilterField,
|
|
4394
3961
|
value: modifiedData.name,
|
|
4395
3962
|
children: displayedFilters2.map((filter) => {
|
|
4396
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: filter.name, children: filter.metadatas
|
|
3963
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: filter.name, children: filter.metadatas?.label }, filter.name);
|
|
4397
3964
|
})
|
|
4398
3965
|
}
|
|
4399
3966
|
) }),
|
|
@@ -4416,8 +3983,8 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
|
|
|
4416
3983
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4417
3984
|
FilterValueInput,
|
|
4418
3985
|
{
|
|
4419
|
-
...appliedFilter
|
|
4420
|
-
...appliedFilter
|
|
3986
|
+
...appliedFilter?.metadatas,
|
|
3987
|
+
...appliedFilter?.fieldSchema,
|
|
4421
3988
|
value: modifiedData.value,
|
|
4422
3989
|
onChange: (value) => setModifiedData((prev) => ({ ...prev, value }))
|
|
4423
3990
|
}
|
|
@@ -4425,18 +3992,6 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
|
|
|
4425
3992
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { size: "L", variant: "secondary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), type: "submit", fullWidth: true, children: formatMessage({ id: "app.utils.add-filter", defaultMessage: "Add filter" }) }) })
|
|
4426
3993
|
] }) }) });
|
|
4427
3994
|
};
|
|
4428
|
-
FilterPopover.propTypes = {
|
|
4429
|
-
displayedFilters: PropTypes__default.default.arrayOf(
|
|
4430
|
-
PropTypes__default.default.shape({
|
|
4431
|
-
name: PropTypes__default.default.string.isRequired,
|
|
4432
|
-
metadatas: PropTypes__default.default.shape({ label: PropTypes__default.default.string }),
|
|
4433
|
-
fieldSchema: PropTypes__default.default.shape({ type: PropTypes__default.default.string })
|
|
4434
|
-
})
|
|
4435
|
-
).isRequired,
|
|
4436
|
-
filters: PropTypes__default.default.array.isRequired,
|
|
4437
|
-
onSubmit: PropTypes__default.default.func.isRequired,
|
|
4438
|
-
onToggle: PropTypes__default.default.func.isRequired
|
|
4439
|
-
};
|
|
4440
3995
|
const Filters = ({ appliedFilters, onChangeFilters }) => {
|
|
4441
3996
|
const [open, setOpen] = React__namespace.useState(false);
|
|
4442
3997
|
const { formatMessage } = reactIntl.useIntl();
|
|
@@ -4445,7 +4000,7 @@ const Filters = ({ appliedFilters, onChangeFilters }) => {
|
|
|
4445
4000
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4446
4001
|
FilterPopover,
|
|
4447
4002
|
{
|
|
4448
|
-
onToggle: setOpen,
|
|
4003
|
+
onToggle: () => setOpen((prev) => !prev),
|
|
4449
4004
|
displayedFilters,
|
|
4450
4005
|
filters: appliedFilters,
|
|
4451
4006
|
onSubmit: onChangeFilters
|
|
@@ -4461,14 +4016,10 @@ const Filters = ({ appliedFilters, onChangeFilters }) => {
|
|
|
4461
4016
|
)
|
|
4462
4017
|
] });
|
|
4463
4018
|
};
|
|
4464
|
-
Filters.propTypes = {
|
|
4465
|
-
appliedFilters: PropTypes__default.default.array.isRequired,
|
|
4466
|
-
onChangeFilters: PropTypes__default.default.func.isRequired
|
|
4467
|
-
};
|
|
4468
4019
|
const PageSize = ({ onChangePageSize, pageSize }) => {
|
|
4469
4020
|
const { formatMessage } = reactIntl.useIntl();
|
|
4470
4021
|
const handleChange = (value) => {
|
|
4471
|
-
onChangePageSize(value);
|
|
4022
|
+
onChangePageSize(Number(value));
|
|
4472
4023
|
};
|
|
4473
4024
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
|
4474
4025
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4495,16 +4046,12 @@ const PageSize = ({ onChangePageSize, pageSize }) => {
|
|
|
4495
4046
|
}) }) })
|
|
4496
4047
|
] });
|
|
4497
4048
|
};
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
pageSize: PropTypes__default.default.number.isRequired
|
|
4501
|
-
};
|
|
4502
|
-
const PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });
|
|
4503
|
-
const usePagination = () => React.useContext(PaginationContext);
|
|
4049
|
+
const PaginationContext = React__namespace.createContext({ activePage: 1, pageCount: 1 });
|
|
4050
|
+
const usePagination = () => React__namespace.useContext(PaginationContext);
|
|
4504
4051
|
const PaginationText = styledComponents.styled(designSystem.Typography)`
|
|
4505
4052
|
line-height: revert;
|
|
4506
4053
|
`;
|
|
4507
|
-
const
|
|
4054
|
+
const linkWrapperStyles = styledComponents.css`
|
|
4508
4055
|
padding: ${({ theme }) => theme.spaces[3]};
|
|
4509
4056
|
border-radius: ${({ theme }) => theme.borderRadius};
|
|
4510
4057
|
box-shadow: ${({ $active, theme }) => $active ? theme.shadows.filterShadow : void 0};
|
|
@@ -4541,8 +4088,14 @@ const LinkWrapper = styledComponents.styled.button`
|
|
|
4541
4088
|
}
|
|
4542
4089
|
}
|
|
4543
4090
|
`;
|
|
4544
|
-
|
|
4545
|
-
|
|
4091
|
+
const LinkWrapperButton = styledComponents.styled.button`
|
|
4092
|
+
${linkWrapperStyles}
|
|
4093
|
+
`;
|
|
4094
|
+
const LinkWrapperDiv = styledComponents.styled.div`
|
|
4095
|
+
${linkWrapperStyles}
|
|
4096
|
+
`;
|
|
4097
|
+
LinkWrapperButton.defaultProps = { type: "button" };
|
|
4098
|
+
const PageLinkWrapper = styledComponents.styled(LinkWrapperButton)`
|
|
4546
4099
|
color: ${({ theme, $active }) => $active ? theme.colors.primary700 : theme.colors.neutral800};
|
|
4547
4100
|
background: ${({ theme, $active }) => $active ? theme.colors.neutral0 : void 0};
|
|
4548
4101
|
|
|
@@ -4550,7 +4103,7 @@ const PageLinkWrapper = styledComponents.styled(LinkWrapper)`
|
|
|
4550
4103
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
|
4551
4104
|
}
|
|
4552
4105
|
`;
|
|
4553
|
-
const ActionLinkWrapper = styledComponents.styled(
|
|
4106
|
+
const ActionLinkWrapper = styledComponents.styled(LinkWrapperButton)`
|
|
4554
4107
|
font-size: 1.1rem;
|
|
4555
4108
|
svg path {
|
|
4556
4109
|
fill: ${(p) => p["aria-disabled"] ? p.theme.colors.neutral300 : p.theme.colors.neutral600};
|
|
@@ -4567,7 +4120,7 @@ const ActionLinkWrapper = styledComponents.styled(LinkWrapper)`
|
|
|
4567
4120
|
pointer-events: none;
|
|
4568
4121
|
` : void 0}
|
|
4569
4122
|
`;
|
|
4570
|
-
const DotsWrapper = styledComponents.styled(
|
|
4123
|
+
const DotsWrapper = styledComponents.styled(LinkWrapperDiv)`
|
|
4571
4124
|
color: ${({ theme }) => theme.colors.neutral800};
|
|
4572
4125
|
`;
|
|
4573
4126
|
const PreviousLink = ({ children, ...props }) => {
|
|
@@ -4594,36 +4147,24 @@ const PageLink = ({ number, children, ...props }) => {
|
|
|
4594
4147
|
/* @__PURE__ */ jsxRuntime.jsx(PaginationText, { "aria-hidden": true, variant: "pi", fontWeight: isActive ? "bold" : "", children: number })
|
|
4595
4148
|
] }) });
|
|
4596
4149
|
};
|
|
4597
|
-
const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(DotsWrapper, { ...props,
|
|
4150
|
+
const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(DotsWrapper, { ...props, as: "div", children: [
|
|
4598
4151
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children }),
|
|
4599
4152
|
/* @__PURE__ */ jsxRuntime.jsx(PaginationText, { "aria-hidden": true, small: true, children: "…" })
|
|
4600
4153
|
] }) });
|
|
4601
|
-
|
|
4602
|
-
children
|
|
4603
|
-
|
|
4604
|
-
|
|
4605
|
-
|
|
4606
|
-
|
|
4607
|
-
};
|
|
4608
|
-
NextLink.propTypes = sharedPropTypes;
|
|
4609
|
-
PreviousLink.propTypes = sharedPropTypes;
|
|
4610
|
-
Dots.propTypes = {
|
|
4611
|
-
children: PropTypes__default.default.node.isRequired
|
|
4612
|
-
};
|
|
4613
|
-
const Pagination = ({ children, label, activePage, pageCount }) => {
|
|
4614
|
-
const paginationValue = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
|
|
4154
|
+
const Pagination = ({
|
|
4155
|
+
children,
|
|
4156
|
+
activePage,
|
|
4157
|
+
pageCount,
|
|
4158
|
+
label = "pagination"
|
|
4159
|
+
}) => {
|
|
4160
|
+
const paginationValue = React__namespace.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
|
|
4615
4161
|
return /* @__PURE__ */ jsxRuntime.jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { tag: "nav", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "ul", gap: 1, children }) }) });
|
|
4616
4162
|
};
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
|
|
4622
|
-
children: PropTypes__default.default.node.isRequired,
|
|
4623
|
-
label: PropTypes__default.default.string,
|
|
4624
|
-
pageCount: PropTypes__default.default.number.isRequired
|
|
4625
|
-
};
|
|
4626
|
-
const PaginationFooter = ({ activePage, onChangePage, pagination: { pageCount } }) => {
|
|
4163
|
+
const PaginationFooter = ({
|
|
4164
|
+
activePage,
|
|
4165
|
+
onChangePage,
|
|
4166
|
+
pagination: { pageCount }
|
|
4167
|
+
}) => {
|
|
4627
4168
|
const { formatMessage } = reactIntl.useIntl();
|
|
4628
4169
|
const previousActivePage = activePage - 1;
|
|
4629
4170
|
const nextActivePage = activePage + 1;
|
|
@@ -4760,21 +4301,16 @@ const PaginationFooter = ({ activePage, onChangePage, pagination: { pageCount }
|
|
|
4760
4301
|
}) })
|
|
4761
4302
|
] });
|
|
4762
4303
|
};
|
|
4763
|
-
|
|
4764
|
-
activePage: PropTypes__default.default.number.isRequired,
|
|
4765
|
-
onChangePage: PropTypes__default.default.func.isRequired,
|
|
4766
|
-
pagination: PropTypes__default.default.shape({ pageCount: PropTypes__default.default.number.isRequired }).isRequired
|
|
4767
|
-
};
|
|
4768
|
-
const SearchAsset = ({ onChangeSearch, queryValue }) => {
|
|
4304
|
+
const SearchAsset = ({ onChangeSearch, queryValue = null }) => {
|
|
4769
4305
|
const { formatMessage } = reactIntl.useIntl();
|
|
4770
4306
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
4771
|
-
const [isOpen, setIsOpen] =
|
|
4772
|
-
const [value, setValue] =
|
|
4773
|
-
const wrapperRef =
|
|
4774
|
-
|
|
4307
|
+
const [isOpen, setIsOpen] = React__namespace.useState(!!queryValue);
|
|
4308
|
+
const [value, setValue] = React__namespace.useState(queryValue || "");
|
|
4309
|
+
const wrapperRef = React__namespace.useRef(null);
|
|
4310
|
+
React__namespace.useLayoutEffect(() => {
|
|
4775
4311
|
if (isOpen) {
|
|
4776
4312
|
setTimeout(() => {
|
|
4777
|
-
wrapperRef.current
|
|
4313
|
+
wrapperRef.current?.querySelector("input")?.focus();
|
|
4778
4314
|
}, 0);
|
|
4779
4315
|
}
|
|
4780
4316
|
}, [isOpen]);
|
|
@@ -4814,13 +4350,6 @@ const SearchAsset = ({ onChangeSearch, queryValue }) => {
|
|
|
4814
4350
|
}
|
|
4815
4351
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: "Search", onClick: handleToggle, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}) });
|
|
4816
4352
|
};
|
|
4817
|
-
SearchAsset.defaultProps = {
|
|
4818
|
-
queryValue: null
|
|
4819
|
-
};
|
|
4820
|
-
SearchAsset.propTypes = {
|
|
4821
|
-
onChangeSearch: PropTypes__default.default.func.isRequired,
|
|
4822
|
-
queryValue: PropTypes__default.default.string
|
|
4823
|
-
};
|
|
4824
4353
|
const isSelectable = (allowedTypes, mime = "") => {
|
|
4825
4354
|
if (!mime)
|
|
4826
4355
|
return false;
|
|
@@ -4838,12 +4367,12 @@ const ActionContainer = styledComponents.styled(designSystem.Box)`
|
|
|
4838
4367
|
}
|
|
4839
4368
|
`;
|
|
4840
4369
|
const BrowseStep = ({
|
|
4841
|
-
allowedTypes,
|
|
4370
|
+
allowedTypes = [],
|
|
4842
4371
|
assets: rawAssets,
|
|
4843
4372
|
canCreate,
|
|
4844
4373
|
canRead,
|
|
4845
|
-
folders,
|
|
4846
|
-
multiple,
|
|
4374
|
+
folders = [],
|
|
4375
|
+
multiple = false,
|
|
4847
4376
|
onAddAsset,
|
|
4848
4377
|
onChangeFilters,
|
|
4849
4378
|
onChangePage,
|
|
@@ -4860,8 +4389,8 @@ const BrowseStep = ({
|
|
|
4860
4389
|
selectedAssets
|
|
4861
4390
|
}) => {
|
|
4862
4391
|
const { formatMessage } = reactIntl.useIntl();
|
|
4863
|
-
const [view, setView] = usePersistentState(localStorageKeys.modalView, viewOptions.GRID);
|
|
4864
|
-
const isGridView = view === viewOptions.GRID;
|
|
4392
|
+
const [view, setView] = usePersistentState(localStorageKeys$1.modalView, viewOptions$1.GRID);
|
|
4393
|
+
const isGridView = view === viewOptions$1.GRID;
|
|
4865
4394
|
const { data: currentFolder, isLoading: isCurrentFolderLoading } = useFolder(
|
|
4866
4395
|
queryObject?.folder,
|
|
4867
4396
|
{
|
|
@@ -4874,7 +4403,7 @@ const BrowseStep = ({
|
|
|
4874
4403
|
isSelectable: isSelectable(singularTypes, asset?.mime),
|
|
4875
4404
|
type: "asset"
|
|
4876
4405
|
}));
|
|
4877
|
-
const breadcrumbs = !isCurrentFolderLoading
|
|
4406
|
+
const breadcrumbs = !isCurrentFolderLoading ? getBreadcrumbDataCM(currentFolder) : void 0;
|
|
4878
4407
|
const allAllowedAsset = getAllowedFiles(allowedTypes, assets);
|
|
4879
4408
|
const areAllAssetSelected = allAllowedAsset.length > 0 && selectedAssets.length > 0 && allAllowedAsset.every(
|
|
4880
4409
|
(asset) => selectedAssets.findIndex((currAsset) => currAsset.id === asset.id) !== -1
|
|
@@ -4936,7 +4465,7 @@ const BrowseStep = ({
|
|
|
4936
4465
|
id: "view-switch.grid",
|
|
4937
4466
|
defaultMessage: "Grid View"
|
|
4938
4467
|
}),
|
|
4939
|
-
onClick: () => setView(isGridView ? viewOptions.LIST : viewOptions.GRID),
|
|
4468
|
+
onClick: () => setView(isGridView ? viewOptions$1.LIST : viewOptions$1.GRID),
|
|
4940
4469
|
children: isGridView ? /* @__PURE__ */ jsxRuntime.jsx(icons.List, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.GridFour, {})
|
|
4941
4470
|
}
|
|
4942
4471
|
) }),
|
|
@@ -5066,8 +4595,8 @@ const BrowseStep = ({
|
|
|
5066
4595
|
defaultMessage: "{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}"
|
|
5067
4596
|
},
|
|
5068
4597
|
{
|
|
5069
|
-
folderCount: folder.children
|
|
5070
|
-
filesCount: folder.files
|
|
4598
|
+
folderCount: folder.children?.count,
|
|
4599
|
+
filesCount: folder.files?.count
|
|
5071
4600
|
}
|
|
5072
4601
|
)
|
|
5073
4602
|
}
|
|
@@ -5104,7 +4633,13 @@ const BrowseStep = ({
|
|
|
5104
4633
|
) })
|
|
5105
4634
|
] }),
|
|
5106
4635
|
pagination.pageCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", paddingTop: 4, children: [
|
|
5107
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4636
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4637
|
+
PageSize,
|
|
4638
|
+
{
|
|
4639
|
+
pageSize: queryObject.pageSize,
|
|
4640
|
+
onChangePageSize
|
|
4641
|
+
}
|
|
4642
|
+
),
|
|
5108
4643
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5109
4644
|
PaginationFooter,
|
|
5110
4645
|
{
|
|
@@ -5116,41 +4651,6 @@ const BrowseStep = ({
|
|
|
5116
4651
|
] })
|
|
5117
4652
|
] });
|
|
5118
4653
|
};
|
|
5119
|
-
BrowseStep.defaultProps = {
|
|
5120
|
-
allowedTypes: [],
|
|
5121
|
-
folders: [],
|
|
5122
|
-
multiple: false,
|
|
5123
|
-
onSelectAllAsset: void 0
|
|
5124
|
-
};
|
|
5125
|
-
BrowseStep.propTypes = {
|
|
5126
|
-
allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
|
|
5127
|
-
assets: PropTypes__default.default.arrayOf(AssetDefinition).isRequired,
|
|
5128
|
-
canCreate: PropTypes__default.default.bool.isRequired,
|
|
5129
|
-
canRead: PropTypes__default.default.bool.isRequired,
|
|
5130
|
-
folders: PropTypes__default.default.arrayOf(FolderDefinition),
|
|
5131
|
-
multiple: PropTypes__default.default.bool,
|
|
5132
|
-
onAddAsset: PropTypes__default.default.func.isRequired,
|
|
5133
|
-
onChangeFilters: PropTypes__default.default.func.isRequired,
|
|
5134
|
-
onChangeFolder: PropTypes__default.default.func.isRequired,
|
|
5135
|
-
onChangePage: PropTypes__default.default.func.isRequired,
|
|
5136
|
-
onChangePageSize: PropTypes__default.default.func.isRequired,
|
|
5137
|
-
onChangeSort: PropTypes__default.default.func.isRequired,
|
|
5138
|
-
onChangeSearch: PropTypes__default.default.func.isRequired,
|
|
5139
|
-
onEditAsset: PropTypes__default.default.func.isRequired,
|
|
5140
|
-
onEditFolder: PropTypes__default.default.func.isRequired,
|
|
5141
|
-
onSelectAsset: PropTypes__default.default.func.isRequired,
|
|
5142
|
-
onSelectAllAsset: PropTypes__default.default.func,
|
|
5143
|
-
queryObject: PropTypes__default.default.shape({
|
|
5144
|
-
filters: PropTypes__default.default.object,
|
|
5145
|
-
page: PropTypes__default.default.number.isRequired,
|
|
5146
|
-
pageSize: PropTypes__default.default.number.isRequired,
|
|
5147
|
-
_q: PropTypes__default.default.string,
|
|
5148
|
-
sort: PropTypes__default.default.string,
|
|
5149
|
-
folder: PropTypes__default.default.number
|
|
5150
|
-
}).isRequired,
|
|
5151
|
-
pagination: PropTypes__default.default.shape({ pageCount: PropTypes__default.default.number.isRequired }).isRequired,
|
|
5152
|
-
selectedAssets: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({})).isRequired
|
|
5153
|
-
};
|
|
5154
4654
|
const DialogFooter = ({ onClose, onValidate }) => {
|
|
5155
4655
|
const { formatMessage } = reactIntl.useIntl();
|
|
5156
4656
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
|
|
@@ -5158,14 +4658,11 @@ const DialogFooter = ({ onClose, onValidate }) => {
|
|
|
5158
4658
|
onValidate && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onValidate, children: formatMessage({ id: "global.finish", defaultMessage: "Finish" }) })
|
|
5159
4659
|
] });
|
|
5160
4660
|
};
|
|
5161
|
-
|
|
5162
|
-
|
|
5163
|
-
|
|
5164
|
-
|
|
5165
|
-
|
|
5166
|
-
onValidate: PropTypes__default.default.func
|
|
5167
|
-
};
|
|
5168
|
-
const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset }) => {
|
|
4661
|
+
const SelectedStep = ({
|
|
4662
|
+
selectedAssets,
|
|
4663
|
+
onSelectAsset,
|
|
4664
|
+
onReorderAsset
|
|
4665
|
+
}) => {
|
|
5169
4666
|
const { formatMessage } = reactIntl.useIntl();
|
|
5170
4667
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
|
|
5171
4668
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 0, children: [
|
|
@@ -5193,32 +4690,24 @@ const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset }) => {
|
|
|
5193
4690
|
)
|
|
5194
4691
|
] });
|
|
5195
4692
|
};
|
|
5196
|
-
SelectedStep.defaultProps = {
|
|
5197
|
-
onReorderAsset: void 0
|
|
5198
|
-
};
|
|
5199
|
-
SelectedStep.propTypes = {
|
|
5200
|
-
onSelectAsset: PropTypes__default.default.func.isRequired,
|
|
5201
|
-
selectedAssets: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({})).isRequired,
|
|
5202
|
-
onReorderAsset: PropTypes__default.default.func
|
|
5203
|
-
};
|
|
5204
4693
|
const LoadingBody = styledComponents.styled(designSystem.Flex)`
|
|
5205
4694
|
/* 80px are coming from the Tabs component that is not included in the ModalBody */
|
|
5206
4695
|
min-height: ${() => `calc(60vh + 8rem)`};
|
|
5207
4696
|
`;
|
|
5208
4697
|
const AssetContent = ({
|
|
5209
|
-
allowedTypes,
|
|
5210
|
-
folderId,
|
|
4698
|
+
allowedTypes = [],
|
|
4699
|
+
folderId = null,
|
|
5211
4700
|
onClose,
|
|
5212
4701
|
onAddAsset,
|
|
5213
4702
|
onAddFolder,
|
|
5214
4703
|
onChangeFolder,
|
|
5215
4704
|
onValidate,
|
|
5216
|
-
multiple,
|
|
5217
|
-
initiallySelectedAssets,
|
|
4705
|
+
multiple = false,
|
|
4706
|
+
initiallySelectedAssets = [],
|
|
5218
4707
|
trackedLocation
|
|
5219
4708
|
}) => {
|
|
5220
|
-
const [assetToEdit, setAssetToEdit] =
|
|
5221
|
-
const [folderToEdit, setFolderToEdit] =
|
|
4709
|
+
const [assetToEdit, setAssetToEdit] = React__namespace.useState(void 0);
|
|
4710
|
+
const [folderToEdit, setFolderToEdit] = React__namespace.useState(void 0);
|
|
5222
4711
|
const { formatMessage } = reactIntl.useIntl();
|
|
5223
4712
|
const {
|
|
5224
4713
|
canRead,
|
|
@@ -5340,7 +4829,9 @@ const AssetContent = ({
|
|
|
5340
4829
|
};
|
|
5341
4830
|
const handleFolderChange = (folderId2, folderPath) => {
|
|
5342
4831
|
onChangeFolder(folderId2);
|
|
5343
|
-
onChangeFolderParam
|
|
4832
|
+
if (onChangeFolderParam) {
|
|
4833
|
+
onChangeFolderParam(folderId2, folderPath);
|
|
4834
|
+
}
|
|
5344
4835
|
};
|
|
5345
4836
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5346
4837
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
|
|
@@ -5399,11 +4890,11 @@ const AssetContent = ({
|
|
|
5399
4890
|
pagination,
|
|
5400
4891
|
queryObject,
|
|
5401
4892
|
onAddAsset,
|
|
5402
|
-
onChangeFilters,
|
|
4893
|
+
onChangeFilters: (filters) => onChangeFilters(filters),
|
|
5403
4894
|
onChangeFolder: handleFolderChange,
|
|
5404
4895
|
onChangePage,
|
|
5405
4896
|
onChangePageSize,
|
|
5406
|
-
onChangeSort,
|
|
4897
|
+
onChangeSort: (sort) => onChangeSort(sort),
|
|
5407
4898
|
onChangeSearch
|
|
5408
4899
|
}
|
|
5409
4900
|
) }),
|
|
@@ -5420,49 +4911,9 @@ const AssetContent = ({
|
|
|
5420
4911
|
/* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { onClose, onValidate: () => onValidate(selectedAssets) })
|
|
5421
4912
|
] });
|
|
5422
4913
|
};
|
|
5423
|
-
|
|
5424
|
-
allowedTypes: [],
|
|
5425
|
-
folderId: null,
|
|
5426
|
-
initiallySelectedAssets: [],
|
|
5427
|
-
multiple: false,
|
|
5428
|
-
trackedLocation: void 0
|
|
5429
|
-
};
|
|
5430
|
-
AssetContent.propTypes = {
|
|
5431
|
-
allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
|
|
5432
|
-
folderId: PropTypes__default.default.number,
|
|
5433
|
-
initiallySelectedAssets: PropTypes__default.default.arrayOf(AssetDefinition),
|
|
5434
|
-
multiple: PropTypes__default.default.bool,
|
|
5435
|
-
onAddAsset: PropTypes__default.default.func.isRequired,
|
|
5436
|
-
onAddFolder: PropTypes__default.default.func.isRequired,
|
|
5437
|
-
onChangeFolder: PropTypes__default.default.func.isRequired,
|
|
5438
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
5439
|
-
onValidate: PropTypes__default.default.func.isRequired,
|
|
5440
|
-
trackedLocation: PropTypes__default.default.string
|
|
5441
|
-
};
|
|
5442
|
-
const AssetDialog = ({ open, onClose, ...restProps }) => {
|
|
4914
|
+
const AssetDialog = ({ open = false, onClose, ...restProps }) => {
|
|
5443
4915
|
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AssetContent, { onClose, ...restProps }) }) });
|
|
5444
4916
|
};
|
|
5445
|
-
AssetDialog.defaultProps = {
|
|
5446
|
-
allowedTypes: [],
|
|
5447
|
-
folderId: null,
|
|
5448
|
-
initiallySelectedAssets: [],
|
|
5449
|
-
multiple: false,
|
|
5450
|
-
open: false,
|
|
5451
|
-
trackedLocation: void 0
|
|
5452
|
-
};
|
|
5453
|
-
AssetDialog.propTypes = {
|
|
5454
|
-
allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
|
|
5455
|
-
folderId: PropTypes__default.default.number,
|
|
5456
|
-
initiallySelectedAssets: PropTypes__default.default.arrayOf(AssetDefinition),
|
|
5457
|
-
multiple: PropTypes__default.default.bool,
|
|
5458
|
-
onAddAsset: PropTypes__default.default.func.isRequired,
|
|
5459
|
-
onAddFolder: PropTypes__default.default.func.isRequired,
|
|
5460
|
-
onChangeFolder: PropTypes__default.default.func.isRequired,
|
|
5461
|
-
open: PropTypes__default.default.bool,
|
|
5462
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
5463
|
-
onValidate: PropTypes__default.default.func.isRequired,
|
|
5464
|
-
trackedLocation: PropTypes__default.default.string
|
|
5465
|
-
};
|
|
5466
4917
|
const TabsRoot = styledComponents.styled(designSystem.Tabs.Root)`
|
|
5467
4918
|
display: flex;
|
|
5468
4919
|
flex-direction: column;
|
|
@@ -5485,10 +4936,14 @@ const OpaqueBox = styledComponents.styled(designSystem.Box)`
|
|
|
5485
4936
|
opacity: 0;
|
|
5486
4937
|
cursor: pointer;
|
|
5487
4938
|
`;
|
|
5488
|
-
const FromComputerForm = ({
|
|
4939
|
+
const FromComputerForm = ({
|
|
4940
|
+
onClose,
|
|
4941
|
+
onAddAssets,
|
|
4942
|
+
trackedLocation
|
|
4943
|
+
}) => {
|
|
5489
4944
|
const { formatMessage } = reactIntl.useIntl();
|
|
5490
|
-
const [dragOver, setDragOver] =
|
|
5491
|
-
const inputRef =
|
|
4945
|
+
const [dragOver, setDragOver] = React__namespace.useState(false);
|
|
4946
|
+
const inputRef = React__namespace.useRef(null);
|
|
5492
4947
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
5493
4948
|
const handleDragOver = (event) => {
|
|
5494
4949
|
event.preventDefault();
|
|
@@ -5500,15 +4955,19 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
|
|
|
5500
4955
|
const handleDragLeave = () => setDragOver(false);
|
|
5501
4956
|
const handleClick = (e) => {
|
|
5502
4957
|
e.preventDefault();
|
|
5503
|
-
inputRef.current
|
|
4958
|
+
inputRef.current?.click();
|
|
5504
4959
|
};
|
|
5505
4960
|
const handleChange = () => {
|
|
5506
|
-
const files2 = inputRef.current
|
|
4961
|
+
const files2 = inputRef.current?.files;
|
|
5507
4962
|
const assets = [];
|
|
5508
|
-
|
|
5509
|
-
|
|
5510
|
-
|
|
5511
|
-
|
|
4963
|
+
if (files2) {
|
|
4964
|
+
for (let i = 0; i < files2.length; i++) {
|
|
4965
|
+
const file = files2.item(i);
|
|
4966
|
+
if (file) {
|
|
4967
|
+
const asset = rawFileToAsset(file, AssetSource.Computer);
|
|
4968
|
+
assets.push(asset);
|
|
4969
|
+
}
|
|
4970
|
+
}
|
|
5512
4971
|
}
|
|
5513
4972
|
if (trackedLocation) {
|
|
5514
4973
|
trackUsage("didSelectFile", { source: "computer", location: trackedLocation });
|
|
@@ -5522,8 +4981,10 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
|
|
|
5522
4981
|
const assets = [];
|
|
5523
4982
|
for (let i = 0; i < files2.length; i++) {
|
|
5524
4983
|
const file = files2.item(i);
|
|
5525
|
-
|
|
5526
|
-
|
|
4984
|
+
if (file) {
|
|
4985
|
+
const asset = rawFileToAsset(file, AssetSource.Computer);
|
|
4986
|
+
assets.push(asset);
|
|
4987
|
+
}
|
|
5527
4988
|
}
|
|
5528
4989
|
onAddAssets(assets);
|
|
5529
4990
|
}
|
|
@@ -5582,17 +5043,9 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
|
|
|
5582
5043
|
}) }) })
|
|
5583
5044
|
] });
|
|
5584
5045
|
};
|
|
5585
|
-
FromComputerForm.defaultProps = {
|
|
5586
|
-
trackedLocation: void 0
|
|
5587
|
-
};
|
|
5588
|
-
FromComputerForm.propTypes = {
|
|
5589
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
5590
|
-
onAddAssets: PropTypes__default.default.func.isRequired,
|
|
5591
|
-
trackedLocation: PropTypes__default.default.string
|
|
5592
|
-
};
|
|
5593
5046
|
const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
|
|
5594
|
-
const [loading, setLoading] =
|
|
5595
|
-
const [error, setError] =
|
|
5047
|
+
const [loading, setLoading] = React__namespace.useState(false);
|
|
5048
|
+
const [error, setError] = React__namespace.useState(void 0);
|
|
5596
5049
|
const { formatMessage } = reactIntl.useIntl();
|
|
5597
5050
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
5598
5051
|
const handleSubmit = async ({ urls }) => {
|
|
@@ -5647,14 +5100,6 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
|
|
|
5647
5100
|
}
|
|
5648
5101
|
);
|
|
5649
5102
|
};
|
|
5650
|
-
FromUrlForm.defaultProps = {
|
|
5651
|
-
trackedLocation: void 0
|
|
5652
|
-
};
|
|
5653
|
-
FromUrlForm.propTypes = {
|
|
5654
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
5655
|
-
onAddAsset: PropTypes__default.default.func.isRequired,
|
|
5656
|
-
trackedLocation: PropTypes__default.default.string
|
|
5657
|
-
};
|
|
5658
5103
|
const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
|
|
5659
5104
|
const { formatMessage } = reactIntl.useIntl();
|
|
5660
5105
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -5704,14 +5149,6 @@ const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
|
|
|
5704
5149
|
] })
|
|
5705
5150
|
] });
|
|
5706
5151
|
};
|
|
5707
|
-
AddAssetStep.defaultProps = {
|
|
5708
|
-
trackedLocation: void 0
|
|
5709
|
-
};
|
|
5710
|
-
AddAssetStep.propTypes = {
|
|
5711
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
5712
|
-
onAddAsset: PropTypes__default.default.func.isRequired,
|
|
5713
|
-
trackedLocation: PropTypes__default.default.string
|
|
5714
|
-
};
|
|
5715
5152
|
const UploadProgressWrapper = styledComponents.styled.div`
|
|
5716
5153
|
height: 8.8rem;
|
|
5717
5154
|
width: 100%;
|
|
@@ -5724,7 +5161,7 @@ const UploadingAssetCard = ({
|
|
|
5724
5161
|
onCancel,
|
|
5725
5162
|
onStatusChange,
|
|
5726
5163
|
addUploadedFiles,
|
|
5727
|
-
folderId
|
|
5164
|
+
folderId = null
|
|
5728
5165
|
}) => {
|
|
5729
5166
|
const { upload, cancel, error, progress, status } = useUpload();
|
|
5730
5167
|
const { formatMessage } = reactIntl.useIntl();
|
|
@@ -5748,16 +5185,16 @@ const UploadingAssetCard = ({
|
|
|
5748
5185
|
defaultMessage: "Audio"
|
|
5749
5186
|
});
|
|
5750
5187
|
}
|
|
5751
|
-
|
|
5188
|
+
React__namespace.useEffect(() => {
|
|
5752
5189
|
const uploadFile = async () => {
|
|
5753
|
-
const files2 = await upload(asset, folderId);
|
|
5190
|
+
const files2 = await upload(asset, folderId ? Number(folderId) : null);
|
|
5754
5191
|
if (addUploadedFiles) {
|
|
5755
5192
|
addUploadedFiles(files2);
|
|
5756
5193
|
}
|
|
5757
5194
|
};
|
|
5758
5195
|
uploadFile();
|
|
5759
5196
|
}, []);
|
|
5760
|
-
|
|
5197
|
+
React__namespace.useEffect(() => {
|
|
5761
5198
|
onStatusChange(status);
|
|
5762
5199
|
}, [status, onStatusChange]);
|
|
5763
5200
|
const handleCancel = () => {
|
|
@@ -5766,19 +5203,26 @@ const UploadingAssetCard = ({
|
|
|
5766
5203
|
};
|
|
5767
5204
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
5768
5205
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Card, { borderColor: error ? "danger600" : "neutral150", children: [
|
|
5769
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(UploadProgressWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5206
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(UploadProgressWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5207
|
+
UploadProgress,
|
|
5208
|
+
{
|
|
5209
|
+
error: error || void 0,
|
|
5210
|
+
onCancel: handleCancel,
|
|
5211
|
+
progress
|
|
5212
|
+
}
|
|
5213
|
+
) }) }),
|
|
5770
5214
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
|
|
5771
5215
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
|
|
5772
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
|
5216
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { tag: "span", children: asset.name }) }) }),
|
|
5773
5217
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: /* @__PURE__ */ jsxRuntime.jsx(Extension, { children: asset.ext }) })
|
|
5774
5218
|
] }),
|
|
5775
5219
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { paddingTop: 1, grow: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: badgeContent }) })
|
|
5776
5220
|
] })
|
|
5777
5221
|
] }),
|
|
5778
5222
|
error ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "danger600", children: formatMessage(
|
|
5779
|
-
error?.
|
|
5780
|
-
id: getTrad(`apiError.${error.
|
|
5781
|
-
defaultMessage: error.
|
|
5223
|
+
error?.message ? {
|
|
5224
|
+
id: getTrad(`apiError.${error.message}`),
|
|
5225
|
+
defaultMessage: error.message
|
|
5782
5226
|
/* See issue: https://github.com/strapi/strapi/issues/13867
|
|
5783
5227
|
A proxy might return an error, before the request reaches Strapi
|
|
5784
5228
|
and therefore we need to handle errors gracefully.
|
|
@@ -5790,22 +5234,6 @@ const UploadingAssetCard = ({
|
|
|
5790
5234
|
) }) : void 0
|
|
5791
5235
|
] });
|
|
5792
5236
|
};
|
|
5793
|
-
UploadingAssetCard.defaultProps = {
|
|
5794
|
-
addUploadedFiles: void 0,
|
|
5795
|
-
folderId: null
|
|
5796
|
-
};
|
|
5797
|
-
UploadingAssetCard.propTypes = {
|
|
5798
|
-
addUploadedFiles: PropTypes__default.default.func,
|
|
5799
|
-
asset: PropTypes__default.default.shape({
|
|
5800
|
-
name: PropTypes__default.default.string,
|
|
5801
|
-
ext: PropTypes__default.default.string,
|
|
5802
|
-
rawFile: PropTypes__default.default.instanceOf(File),
|
|
5803
|
-
type: PropTypes__default.default.oneOf(Object.values(AssetType))
|
|
5804
|
-
}).isRequired,
|
|
5805
|
-
folderId: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
|
|
5806
|
-
onCancel: PropTypes__default.default.func.isRequired,
|
|
5807
|
-
onStatusChange: PropTypes__default.default.func.isRequired
|
|
5808
|
-
};
|
|
5809
5237
|
const Status = {
|
|
5810
5238
|
Idle: "IDLE",
|
|
5811
5239
|
Uploading: "UPLOADING",
|
|
@@ -5823,21 +5251,28 @@ const PendingAssetStep = ({
|
|
|
5823
5251
|
onUploadSucceed,
|
|
5824
5252
|
trackedLocation
|
|
5825
5253
|
}) => {
|
|
5826
|
-
const assetCountRef =
|
|
5254
|
+
const assetCountRef = React__namespace.useRef(0);
|
|
5827
5255
|
const { formatMessage } = reactIntl.useIntl();
|
|
5828
5256
|
const { trackUsage } = strapiAdmin.useTracking();
|
|
5829
|
-
const [uploadStatus, setUploadStatus] =
|
|
5257
|
+
const [uploadStatus, setUploadStatus] = React__namespace.useState(Status.Idle);
|
|
5830
5258
|
const handleSubmit = async (e) => {
|
|
5831
5259
|
e.preventDefault();
|
|
5832
5260
|
e.stopPropagation();
|
|
5833
|
-
const assetsCountByType = assets.reduce(
|
|
5834
|
-
|
|
5835
|
-
|
|
5836
|
-
acc[type]
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
-
|
|
5261
|
+
const assetsCountByType = assets.reduce(
|
|
5262
|
+
(acc, asset) => {
|
|
5263
|
+
const { type } = asset;
|
|
5264
|
+
if (type !== void 0 && !acc[type]) {
|
|
5265
|
+
acc[type] = 0;
|
|
5266
|
+
}
|
|
5267
|
+
if (type !== void 0) {
|
|
5268
|
+
const accType = acc[type];
|
|
5269
|
+
const currentCount = typeof accType === "string" ? accType : accType.toString();
|
|
5270
|
+
acc[type] = `${parseInt(currentCount, 10) + 1}`;
|
|
5271
|
+
}
|
|
5272
|
+
return acc;
|
|
5273
|
+
},
|
|
5274
|
+
{}
|
|
5275
|
+
);
|
|
5841
5276
|
trackUsage("willAddMediaLibraryAssets", {
|
|
5842
5277
|
location: trackedLocation,
|
|
5843
5278
|
...assetsCountByType
|
|
@@ -5923,40 +5358,24 @@ const PendingAssetStep = ({
|
|
|
5923
5358
|
] })
|
|
5924
5359
|
] });
|
|
5925
5360
|
};
|
|
5926
|
-
PendingAssetStep.defaultProps = {
|
|
5927
|
-
addUploadedFiles: void 0,
|
|
5928
|
-
folderId: null,
|
|
5929
|
-
trackedLocation: void 0
|
|
5930
|
-
};
|
|
5931
|
-
PendingAssetStep.propTypes = {
|
|
5932
|
-
addUploadedFiles: PropTypes__default.default.func,
|
|
5933
|
-
assets: PropTypes__default.default.arrayOf(AssetDefinition).isRequired,
|
|
5934
|
-
folderId: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
|
|
5935
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
5936
|
-
onEditAsset: PropTypes__default.default.func.isRequired,
|
|
5937
|
-
onRemoveAsset: PropTypes__default.default.func.isRequired,
|
|
5938
|
-
onClickAddAsset: PropTypes__default.default.func.isRequired,
|
|
5939
|
-
onUploadSucceed: PropTypes__default.default.func.isRequired,
|
|
5940
|
-
onCancelUpload: PropTypes__default.default.func.isRequired,
|
|
5941
|
-
trackedLocation: PropTypes__default.default.string
|
|
5942
|
-
};
|
|
5943
5361
|
const Steps = {
|
|
5944
5362
|
AddAsset: "AddAsset",
|
|
5945
5363
|
PendingAsset: "PendingAsset"
|
|
5946
5364
|
};
|
|
5947
5365
|
const UploadAssetDialog = ({
|
|
5948
5366
|
initialAssetsToAdd,
|
|
5949
|
-
folderId,
|
|
5950
|
-
onClose
|
|
5367
|
+
folderId = null,
|
|
5368
|
+
onClose = () => {
|
|
5369
|
+
},
|
|
5951
5370
|
addUploadedFiles,
|
|
5952
5371
|
trackedLocation,
|
|
5953
5372
|
open,
|
|
5954
5373
|
validateAssetsTypes = (_, cb) => cb()
|
|
5955
5374
|
}) => {
|
|
5956
5375
|
const { formatMessage } = reactIntl.useIntl();
|
|
5957
|
-
const [step, setStep] =
|
|
5958
|
-
const [assets, setAssets] =
|
|
5959
|
-
const [assetToEdit, setAssetToEdit] =
|
|
5376
|
+
const [step, setStep] = React__namespace.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);
|
|
5377
|
+
const [assets, setAssets] = React__namespace.useState(initialAssetsToAdd || []);
|
|
5378
|
+
const [assetToEdit, setAssetToEdit] = React__namespace.useState(void 0);
|
|
5960
5379
|
const handleAddToPendingAssets = (nextAssets) => {
|
|
5961
5380
|
validateAssetsTypes(nextAssets, () => {
|
|
5962
5381
|
setAssets((prevAssets) => prevAssets.concat(nextAssets));
|
|
@@ -5981,7 +5400,7 @@ const UploadAssetDialog = ({
|
|
|
5981
5400
|
}
|
|
5982
5401
|
};
|
|
5983
5402
|
const handleAssetEditValidation = (nextAsset) => {
|
|
5984
|
-
if (nextAsset) {
|
|
5403
|
+
if (nextAsset && typeof nextAsset !== "boolean") {
|
|
5985
5404
|
const nextAssets = assets.map((asset) => asset === assetToEdit ? nextAsset : asset);
|
|
5986
5405
|
setAssets(nextAssets);
|
|
5987
5406
|
}
|
|
@@ -6011,7 +5430,7 @@ const UploadAssetDialog = ({
|
|
|
6011
5430
|
AddAssetStep,
|
|
6012
5431
|
{
|
|
6013
5432
|
onClose,
|
|
6014
|
-
onAddAsset: handleAddToPendingAssets,
|
|
5433
|
+
onAddAsset: (assets2) => handleAddToPendingAssets(assets2),
|
|
6015
5434
|
trackedLocation
|
|
6016
5435
|
}
|
|
6017
5436
|
) }),
|
|
@@ -6044,32 +5463,18 @@ const UploadAssetDialog = ({
|
|
|
6044
5463
|
) })
|
|
6045
5464
|
] });
|
|
6046
5465
|
};
|
|
6047
|
-
UploadAssetDialog.defaultProps = {
|
|
6048
|
-
addUploadedFiles: void 0,
|
|
6049
|
-
folderId: null,
|
|
6050
|
-
initialAssetsToAdd: void 0,
|
|
6051
|
-
onClose() {
|
|
6052
|
-
},
|
|
6053
|
-
trackedLocation: void 0,
|
|
6054
|
-
validateAssetsTypes: void 0
|
|
6055
|
-
};
|
|
6056
|
-
UploadAssetDialog.propTypes = {
|
|
6057
|
-
addUploadedFiles: PropTypes__default.default.func,
|
|
6058
|
-
folderId: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
|
|
6059
|
-
initialAssetsToAdd: PropTypes__default.default.arrayOf(AssetDefinition),
|
|
6060
|
-
open: PropTypes__default.default.bool.isRequired,
|
|
6061
|
-
onClose: PropTypes__default.default.func,
|
|
6062
|
-
trackedLocation: PropTypes__default.default.string,
|
|
6063
|
-
validateAssetsTypes: PropTypes__default.default.func
|
|
6064
|
-
};
|
|
6065
5466
|
const STEPS$1 = {
|
|
6066
5467
|
AssetSelect: "SelectAsset",
|
|
6067
5468
|
AssetUpload: "UploadAsset",
|
|
6068
5469
|
FolderCreate: "FolderCreate"
|
|
6069
5470
|
};
|
|
6070
|
-
const MediaLibraryDialog = ({
|
|
6071
|
-
|
|
6072
|
-
|
|
5471
|
+
const MediaLibraryDialog = ({
|
|
5472
|
+
onClose,
|
|
5473
|
+
onSelectAssets,
|
|
5474
|
+
allowedTypes = ["files", "images", "videos", "audios"]
|
|
5475
|
+
}) => {
|
|
5476
|
+
const [step, setStep] = React__namespace.useState(STEPS$1.AssetSelect);
|
|
5477
|
+
const [folderId, setFolderId] = React__namespace.useState(null);
|
|
6073
5478
|
switch (step) {
|
|
6074
5479
|
case STEPS$1.AssetSelect:
|
|
6075
5480
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -6099,14 +5504,6 @@ const MediaLibraryDialog = ({ onClose, onSelectAssets, allowedTypes }) => {
|
|
|
6099
5504
|
return /* @__PURE__ */ jsxRuntime.jsx(UploadAssetDialog, { open: true, onClose: () => setStep(STEPS$1.AssetSelect), folderId });
|
|
6100
5505
|
}
|
|
6101
5506
|
};
|
|
6102
|
-
MediaLibraryDialog.defaultProps = {
|
|
6103
|
-
allowedTypes: ["files", "images", "videos", "audios"]
|
|
6104
|
-
};
|
|
6105
|
-
MediaLibraryDialog.propTypes = {
|
|
6106
|
-
allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
|
|
6107
|
-
onClose: PropTypes__default.default.func.isRequired,
|
|
6108
|
-
onSelectAssets: PropTypes__default.default.func.isRequired
|
|
6109
|
-
};
|
|
6110
5507
|
const DocAsset = styledComponents.styled(designSystem.Flex)`
|
|
6111
5508
|
background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
|
|
6112
5509
|
`;
|
|
@@ -6124,7 +5521,7 @@ const AudioPreviewWrapper = styledComponents.styled(designSystem.Box)`
|
|
|
6124
5521
|
}
|
|
6125
5522
|
`;
|
|
6126
5523
|
const CarouselAsset = ({ asset }) => {
|
|
6127
|
-
if (asset.mime
|
|
5524
|
+
if (asset.mime?.includes(AssetType.Video)) {
|
|
6128
5525
|
return /* @__PURE__ */ jsxRuntime.jsx(VideoPreviewWrapper, { height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6129
5526
|
VideoPreview,
|
|
6130
5527
|
{
|
|
@@ -6134,10 +5531,16 @@ const CarouselAsset = ({ asset }) => {
|
|
|
6134
5531
|
}
|
|
6135
5532
|
) });
|
|
6136
5533
|
}
|
|
6137
|
-
if (asset.mime
|
|
6138
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AudioPreviewWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5534
|
+
if (asset.mime?.includes(AssetType.Audio)) {
|
|
5535
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AudioPreviewWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5536
|
+
AudioPreview,
|
|
5537
|
+
{
|
|
5538
|
+
url: createAssetUrl(asset, true),
|
|
5539
|
+
alt: asset.alternativeText || asset.name
|
|
5540
|
+
}
|
|
5541
|
+
) });
|
|
6139
5542
|
}
|
|
6140
|
-
if (asset.mime
|
|
5543
|
+
if (asset.mime?.includes(AssetType.Image)) {
|
|
6141
5544
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6142
5545
|
designSystem.Box,
|
|
6143
5546
|
{
|
|
@@ -6149,12 +5552,14 @@ const CarouselAsset = ({ asset }) => {
|
|
|
6149
5552
|
}
|
|
6150
5553
|
);
|
|
6151
5554
|
}
|
|
6152
|
-
return /* @__PURE__ */ jsxRuntime.jsx(DocAsset, { width: "100%", height: "100%", justifyContent: "center", hasRadius: true, children: asset.ext
|
|
6153
|
-
};
|
|
6154
|
-
CarouselAsset.propTypes = {
|
|
6155
|
-
asset: AssetDefinition.isRequired
|
|
5555
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DocAsset, { width: "100%", height: "100%", justifyContent: "center", hasRadius: true, children: asset.ext?.includes("pdf") ? /* @__PURE__ */ jsxRuntime.jsx(icons.FilePdf, { "aria-label": asset.alternativeText || asset.name, width: "24px", height: "32px" }) : /* @__PURE__ */ jsxRuntime.jsx(icons.File, { "aria-label": asset.alternativeText || asset.name, width: "24px", height: "32px" }) });
|
|
6156
5556
|
};
|
|
6157
|
-
const CarouselAssetActions = ({
|
|
5557
|
+
const CarouselAssetActions = ({
|
|
5558
|
+
asset,
|
|
5559
|
+
onDeleteAsset,
|
|
5560
|
+
onAddAsset,
|
|
5561
|
+
onEditAsset
|
|
5562
|
+
}) => {
|
|
6158
5563
|
const { formatMessage } = reactIntl.useIntl();
|
|
6159
5564
|
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CarouselActions, { children: [
|
|
6160
5565
|
onAddAsset && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -6193,23 +5598,16 @@ const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset })
|
|
|
6193
5598
|
)
|
|
6194
5599
|
] });
|
|
6195
5600
|
};
|
|
6196
|
-
CarouselAssetActions.defaultProps = {
|
|
6197
|
-
onAddAsset: void 0,
|
|
6198
|
-
onDeleteAsset: void 0,
|
|
6199
|
-
onEditAsset: void 0
|
|
6200
|
-
};
|
|
6201
|
-
CarouselAssetActions.propTypes = {
|
|
6202
|
-
asset: AssetDefinition.isRequired,
|
|
6203
|
-
onAddAsset: PropTypes__default.default.func,
|
|
6204
|
-
onEditAsset: PropTypes__default.default.func,
|
|
6205
|
-
onDeleteAsset: PropTypes__default.default.func
|
|
6206
|
-
};
|
|
6207
5601
|
const TextAlignTypography = styledComponents.styled(designSystem.Typography)`
|
|
6208
5602
|
align-items: center;
|
|
6209
5603
|
`;
|
|
6210
|
-
const EmptyStateAsset = ({
|
|
5604
|
+
const EmptyStateAsset = ({
|
|
5605
|
+
disabled = false,
|
|
5606
|
+
onClick,
|
|
5607
|
+
onDropAsset
|
|
5608
|
+
}) => {
|
|
6211
5609
|
const { formatMessage } = reactIntl.useIntl();
|
|
6212
|
-
const [dragOver, setDragOver] =
|
|
5610
|
+
const [dragOver, setDragOver] = React__namespace.useState(false);
|
|
6213
5611
|
const handleDragEnter = (e) => {
|
|
6214
5612
|
e.preventDefault();
|
|
6215
5613
|
setDragOver(true);
|
|
@@ -6229,8 +5627,10 @@ const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
|
|
|
6229
5627
|
const assets = [];
|
|
6230
5628
|
for (let i = 0; i < files2.length; i++) {
|
|
6231
5629
|
const file = files2.item(i);
|
|
6232
|
-
|
|
6233
|
-
|
|
5630
|
+
if (file) {
|
|
5631
|
+
const asset = rawFileToAsset(file, AssetSource.Computer);
|
|
5632
|
+
assets.push(asset);
|
|
5633
|
+
}
|
|
6234
5634
|
}
|
|
6235
5635
|
onDropAsset(assets);
|
|
6236
5636
|
}
|
|
@@ -6285,19 +5685,10 @@ const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
|
|
|
6285
5685
|
}
|
|
6286
5686
|
);
|
|
6287
5687
|
};
|
|
6288
|
-
|
|
6289
|
-
disabled: false,
|
|
6290
|
-
onDropAsset: void 0
|
|
6291
|
-
};
|
|
6292
|
-
EmptyStateAsset.propTypes = {
|
|
6293
|
-
disabled: PropTypes__default.default.bool,
|
|
6294
|
-
onClick: PropTypes__default.default.func.isRequired,
|
|
6295
|
-
onDropAsset: PropTypes__default.default.func
|
|
6296
|
-
};
|
|
6297
|
-
const CarouselAssets = React.forwardRef(
|
|
5688
|
+
const CarouselAssets = React__namespace.forwardRef(
|
|
6298
5689
|
({
|
|
6299
5690
|
assets,
|
|
6300
|
-
disabled,
|
|
5691
|
+
disabled = false,
|
|
6301
5692
|
error,
|
|
6302
5693
|
hint,
|
|
6303
5694
|
label,
|
|
@@ -6309,12 +5700,12 @@ const CarouselAssets = React.forwardRef(
|
|
|
6309
5700
|
onEditAsset,
|
|
6310
5701
|
onNext,
|
|
6311
5702
|
onPrevious,
|
|
6312
|
-
required,
|
|
5703
|
+
required = false,
|
|
6313
5704
|
selectedAssetIndex,
|
|
6314
5705
|
trackedLocation
|
|
6315
5706
|
}, forwardedRef) => {
|
|
6316
5707
|
const { formatMessage } = reactIntl.useIntl();
|
|
6317
|
-
const [isEditingAsset, setIsEditingAsset] =
|
|
5708
|
+
const [isEditingAsset, setIsEditingAsset] = React__namespace.useState(false);
|
|
6318
5709
|
const currentAsset = assets[selectedAssetIndex];
|
|
6319
5710
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
6320
5711
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -6357,7 +5748,14 @@ const CarouselAssets = React.forwardRef(
|
|
|
6357
5748
|
},
|
|
6358
5749
|
{ n: 1, m: 1 }
|
|
6359
5750
|
),
|
|
6360
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5751
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5752
|
+
EmptyStateAsset,
|
|
5753
|
+
{
|
|
5754
|
+
disabled,
|
|
5755
|
+
onClick: onAddAsset,
|
|
5756
|
+
onDropAsset
|
|
5757
|
+
}
|
|
5758
|
+
)
|
|
6361
5759
|
}
|
|
6362
5760
|
) : assets.map((asset, index2) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6363
5761
|
designSystem.CarouselSlide,
|
|
@@ -6384,8 +5782,8 @@ const CarouselAssets = React.forwardRef(
|
|
|
6384
5782
|
if (editedAsset === null) {
|
|
6385
5783
|
onDeleteAssetFromMediaLibrary();
|
|
6386
5784
|
}
|
|
6387
|
-
if (editedAsset) {
|
|
6388
|
-
onEditAsset(editedAsset);
|
|
5785
|
+
if (editedAsset && typeof editedAsset !== "boolean") {
|
|
5786
|
+
onEditAsset?.(editedAsset);
|
|
6389
5787
|
}
|
|
6390
5788
|
},
|
|
6391
5789
|
asset: currentAsset,
|
|
@@ -6398,50 +5796,31 @@ const CarouselAssets = React.forwardRef(
|
|
|
6398
5796
|
] });
|
|
6399
5797
|
}
|
|
6400
5798
|
);
|
|
6401
|
-
CarouselAssets.defaultProps = {
|
|
6402
|
-
disabled: false,
|
|
6403
|
-
error: void 0,
|
|
6404
|
-
hint: void 0,
|
|
6405
|
-
labelAction: void 0,
|
|
6406
|
-
onDropAsset: void 0,
|
|
6407
|
-
required: false,
|
|
6408
|
-
trackedLocation: void 0
|
|
6409
|
-
};
|
|
6410
|
-
CarouselAssets.propTypes = {
|
|
6411
|
-
assets: PropTypes__default.default.arrayOf(AssetDefinition).isRequired,
|
|
6412
|
-
disabled: PropTypes__default.default.bool,
|
|
6413
|
-
error: PropTypes__default.default.string,
|
|
6414
|
-
hint: PropTypes__default.default.string,
|
|
6415
|
-
label: PropTypes__default.default.string.isRequired,
|
|
6416
|
-
labelAction: PropTypes__default.default.node,
|
|
6417
|
-
onAddAsset: PropTypes__default.default.func.isRequired,
|
|
6418
|
-
onDeleteAsset: PropTypes__default.default.func.isRequired,
|
|
6419
|
-
onDeleteAssetFromMediaLibrary: PropTypes__default.default.func.isRequired,
|
|
6420
|
-
onDropAsset: PropTypes__default.default.func,
|
|
6421
|
-
onEditAsset: PropTypes__default.default.func.isRequired,
|
|
6422
|
-
onNext: PropTypes__default.default.func.isRequired,
|
|
6423
|
-
onPrevious: PropTypes__default.default.func.isRequired,
|
|
6424
|
-
required: PropTypes__default.default.bool,
|
|
6425
|
-
selectedAssetIndex: PropTypes__default.default.number.isRequired,
|
|
6426
|
-
trackedLocation: PropTypes__default.default.string
|
|
6427
|
-
};
|
|
6428
5799
|
const STEPS = {
|
|
6429
5800
|
AssetSelect: "SelectAsset",
|
|
6430
5801
|
AssetUpload: "UploadAsset",
|
|
6431
5802
|
FolderCreate: "FolderCreate"
|
|
6432
5803
|
};
|
|
6433
|
-
const MediaLibraryInput =
|
|
6434
|
-
({
|
|
5804
|
+
const MediaLibraryInput = React__namespace.forwardRef(
|
|
5805
|
+
({
|
|
5806
|
+
attribute: { allowedTypes = ["videos", "files", "images", "audios"], multiple = false },
|
|
5807
|
+
label,
|
|
5808
|
+
hint,
|
|
5809
|
+
disabled = false,
|
|
5810
|
+
labelAction = void 0,
|
|
5811
|
+
name: name2,
|
|
5812
|
+
required = false
|
|
5813
|
+
}, forwardedRef) => {
|
|
6435
5814
|
const { formatMessage } = reactIntl.useIntl();
|
|
6436
5815
|
const { onChange, value, error } = strapiAdmin.useField(name2);
|
|
6437
5816
|
const fieldAllowedTypes = allowedTypes || ["files", "images", "videos", "audios"];
|
|
6438
|
-
const [uploadedFiles, setUploadedFiles] =
|
|
6439
|
-
const [step, setStep] =
|
|
6440
|
-
const [selectedIndex, setSelectedIndex] =
|
|
6441
|
-
const [droppedAssets, setDroppedAssets] =
|
|
6442
|
-
const [folderId, setFolderId] =
|
|
5817
|
+
const [uploadedFiles, setUploadedFiles] = React__namespace.useState([]);
|
|
5818
|
+
const [step, setStep] = React__namespace.useState(void 0);
|
|
5819
|
+
const [selectedIndex, setSelectedIndex] = React__namespace.useState(0);
|
|
5820
|
+
const [droppedAssets, setDroppedAssets] = React__namespace.useState();
|
|
5821
|
+
const [folderId, setFolderId] = React__namespace.useState(null);
|
|
6443
5822
|
const { toggleNotification } = strapiAdmin.useNotification();
|
|
6444
|
-
|
|
5823
|
+
React__namespace.useEffect(() => {
|
|
6445
5824
|
if (step === void 0) {
|
|
6446
5825
|
setUploadedFiles([]);
|
|
6447
5826
|
}
|
|
@@ -6453,9 +5832,8 @@ const MediaLibraryInput = React.forwardRef(
|
|
|
6453
5832
|
selectedAssets = [value];
|
|
6454
5833
|
}
|
|
6455
5834
|
const handleValidation = (nextSelectedAssets) => {
|
|
6456
|
-
|
|
6457
|
-
|
|
6458
|
-
});
|
|
5835
|
+
const value2 = multiple ? nextSelectedAssets : nextSelectedAssets[0];
|
|
5836
|
+
onChange(name2, value2);
|
|
6459
5837
|
setStep(void 0);
|
|
6460
5838
|
};
|
|
6461
5839
|
const handleDeleteAssetFromMediaLibrary = () => {
|
|
@@ -6468,9 +5846,8 @@ const MediaLibraryInput = React.forwardRef(
|
|
|
6468
5846
|
} else {
|
|
6469
5847
|
nextValue = null;
|
|
6470
5848
|
}
|
|
6471
|
-
|
|
6472
|
-
|
|
6473
|
-
});
|
|
5849
|
+
const value2 = nextValue;
|
|
5850
|
+
onChange(name2, value2);
|
|
6474
5851
|
setSelectedIndex(0);
|
|
6475
5852
|
};
|
|
6476
5853
|
const handleDeleteAsset = (asset) => {
|
|
@@ -6481,18 +5858,14 @@ const MediaLibraryInput = React.forwardRef(
|
|
|
6481
5858
|
} else {
|
|
6482
5859
|
nextValue = null;
|
|
6483
5860
|
}
|
|
6484
|
-
onChange(
|
|
6485
|
-
target: { name: name2, value: nextValue }
|
|
6486
|
-
});
|
|
5861
|
+
onChange(name2, nextValue);
|
|
6487
5862
|
setSelectedIndex(0);
|
|
6488
5863
|
};
|
|
6489
5864
|
const handleAssetEdit = (asset) => {
|
|
6490
5865
|
const nextSelectedAssets = selectedAssets.map(
|
|
6491
5866
|
(prevAsset) => prevAsset.id === asset.id ? asset : prevAsset
|
|
6492
5867
|
);
|
|
6493
|
-
onChange(
|
|
6494
|
-
target: { name: name2, value: multiple ? nextSelectedAssets : nextSelectedAssets[0] }
|
|
6495
|
-
});
|
|
5868
|
+
onChange(name2, multiple ? nextSelectedAssets : nextSelectedAssets[0]);
|
|
6496
5869
|
};
|
|
6497
5870
|
const validateAssetsTypes = (assets, callback) => {
|
|
6498
5871
|
const allowedAssets = getAllowedFiles(fieldAllowedTypes, assets);
|
|
@@ -6534,7 +5907,10 @@ const MediaLibraryInput = React.forwardRef(
|
|
|
6534
5907
|
};
|
|
6535
5908
|
let initiallySelectedAssets = selectedAssets;
|
|
6536
5909
|
if (uploadedFiles.length > 0) {
|
|
6537
|
-
const allowedUploadedFiles = getAllowedFiles(
|
|
5910
|
+
const allowedUploadedFiles = getAllowedFiles(
|
|
5911
|
+
fieldAllowedTypes,
|
|
5912
|
+
uploadedFiles
|
|
5913
|
+
);
|
|
6538
5914
|
initiallySelectedAssets = multiple ? [...allowedUploadedFiles, ...selectedAssets] : [allowedUploadedFiles[0]];
|
|
6539
5915
|
}
|
|
6540
5916
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -6602,25 +5978,133 @@ const MediaLibraryInput = React.forwardRef(
|
|
|
6602
5978
|
] });
|
|
6603
5979
|
}
|
|
6604
5980
|
);
|
|
6605
|
-
|
|
6606
|
-
|
|
6607
|
-
|
|
6608
|
-
hint: void 0,
|
|
6609
|
-
label: void 0,
|
|
6610
|
-
labelAction: void 0,
|
|
6611
|
-
required: false
|
|
6612
|
-
};
|
|
6613
|
-
MediaLibraryInput.propTypes = {
|
|
6614
|
-
attribute: PropTypes__default.default.shape({
|
|
6615
|
-
allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
|
|
6616
|
-
multiple: PropTypes__default.default.bool
|
|
6617
|
-
}),
|
|
6618
|
-
disabled: PropTypes__default.default.bool,
|
|
6619
|
-
hint: PropTypes__default.default.string,
|
|
6620
|
-
label: PropTypes__default.default.string,
|
|
6621
|
-
labelAction: PropTypes__default.default.node,
|
|
5981
|
+
const ParentFolderShape = {
|
|
5982
|
+
id: PropTypes__default.default.number.isRequired,
|
|
5983
|
+
createdAt: PropTypes__default.default.string.isRequired,
|
|
6622
5984
|
name: PropTypes__default.default.string.isRequired,
|
|
6623
|
-
|
|
5985
|
+
updatedAt: PropTypes__default.default.string.isRequired,
|
|
5986
|
+
pathId: PropTypes__default.default.number.isRequired,
|
|
5987
|
+
path: PropTypes__default.default.string.isRequired
|
|
5988
|
+
};
|
|
5989
|
+
ParentFolderShape.parent = PropTypes__default.default.shape(ParentFolderShape);
|
|
5990
|
+
const FolderShape = {
|
|
5991
|
+
id: PropTypes__default.default.number,
|
|
5992
|
+
children: PropTypes__default.default.shape({
|
|
5993
|
+
count: PropTypes__default.default.number.isRequired
|
|
5994
|
+
}),
|
|
5995
|
+
createdAt: PropTypes__default.default.string,
|
|
5996
|
+
createdBy: PropTypes__default.default.shape(),
|
|
5997
|
+
files: PropTypes__default.default.shape({
|
|
5998
|
+
count: PropTypes__default.default.number.isRequired
|
|
5999
|
+
}),
|
|
6000
|
+
name: PropTypes__default.default.string,
|
|
6001
|
+
updatedAt: PropTypes__default.default.string,
|
|
6002
|
+
updatedBy: PropTypes__default.default.shape(),
|
|
6003
|
+
pathId: PropTypes__default.default.number,
|
|
6004
|
+
path: PropTypes__default.default.string
|
|
6005
|
+
};
|
|
6006
|
+
FolderShape.parent = PropTypes__default.default.shape(ParentFolderShape);
|
|
6007
|
+
const FolderDefinition = PropTypes__default.default.shape(FolderShape);
|
|
6008
|
+
const FolderStructure = PropTypes__default.default.shape({
|
|
6009
|
+
value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
|
|
6010
|
+
label: PropTypes__default.default.string.isRequired,
|
|
6011
|
+
children: PropTypes__default.default.array
|
|
6012
|
+
});
|
|
6013
|
+
FolderStructure.children = PropTypes__default.default.arrayOf(PropTypes__default.default.shape(FolderStructure));
|
|
6014
|
+
FolderStructure.defaultProps = {
|
|
6015
|
+
children: void 0
|
|
6016
|
+
};
|
|
6017
|
+
PropTypes__default.default.arrayOf(FolderStructure);
|
|
6018
|
+
const AssetDefinition = PropTypes__default.default.shape({
|
|
6019
|
+
id: PropTypes__default.default.number,
|
|
6020
|
+
height: PropTypes__default.default.number,
|
|
6021
|
+
width: PropTypes__default.default.number,
|
|
6022
|
+
size: PropTypes__default.default.number,
|
|
6023
|
+
createdAt: PropTypes__default.default.string,
|
|
6024
|
+
ext: PropTypes__default.default.string,
|
|
6025
|
+
mime: PropTypes__default.default.string,
|
|
6026
|
+
name: PropTypes__default.default.string,
|
|
6027
|
+
url: PropTypes__default.default.string,
|
|
6028
|
+
updatedAt: PropTypes__default.default.string,
|
|
6029
|
+
alternativeText: PropTypes__default.default.string,
|
|
6030
|
+
caption: PropTypes__default.default.string,
|
|
6031
|
+
folder: PropTypes__default.default.shape(FolderDefinition),
|
|
6032
|
+
formats: PropTypes__default.default.shape({
|
|
6033
|
+
thumbnail: PropTypes__default.default.shape({
|
|
6034
|
+
url: PropTypes__default.default.string
|
|
6035
|
+
})
|
|
6036
|
+
})
|
|
6037
|
+
});
|
|
6038
|
+
const CrumbDefinition = PropTypes__default.default.shape({
|
|
6039
|
+
id: PropTypes__default.default.number,
|
|
6040
|
+
label: PropTypes__default.default.oneOfType([
|
|
6041
|
+
PropTypes__default.default.string,
|
|
6042
|
+
PropTypes__default.default.shape({
|
|
6043
|
+
id: PropTypes__default.default.string.isRequired,
|
|
6044
|
+
defaultMessage: PropTypes__default.default.string.isRequired
|
|
6045
|
+
})
|
|
6046
|
+
]).isRequired,
|
|
6047
|
+
href: PropTypes__default.default.string
|
|
6048
|
+
});
|
|
6049
|
+
const CrumbMenuDefinition = PropTypes__default.default.arrayOf(CrumbDefinition);
|
|
6050
|
+
const BreadcrumbsDefinition = PropTypes__default.default.arrayOf(
|
|
6051
|
+
PropTypes__default.default.oneOfType([CrumbDefinition, CrumbMenuDefinition])
|
|
6052
|
+
);
|
|
6053
|
+
const viewOptions = {
|
|
6054
|
+
GRID: 0,
|
|
6055
|
+
LIST: 1
|
|
6056
|
+
};
|
|
6057
|
+
const pageSizes = [10, 20, 50, 100];
|
|
6058
|
+
const sortOptions = [
|
|
6059
|
+
{ key: "sort.created_at_desc", value: "createdAt:DESC" },
|
|
6060
|
+
{ key: "sort.created_at_asc", value: "createdAt:ASC" },
|
|
6061
|
+
{ key: "sort.name_asc", value: "name:ASC" },
|
|
6062
|
+
{ key: "sort.name_desc", value: "name:DESC" },
|
|
6063
|
+
{ key: "sort.updated_at_desc", value: "updatedAt:DESC" },
|
|
6064
|
+
{ key: "sort.updated_at_asc", value: "updatedAt:ASC" }
|
|
6065
|
+
];
|
|
6066
|
+
const localStorageKeys = {
|
|
6067
|
+
modalView: `STRAPI_UPLOAD_MODAL_VIEW`,
|
|
6068
|
+
view: `STRAPI_UPLOAD_LIBRARY_VIEW`
|
|
6069
|
+
};
|
|
6070
|
+
const PERMISSIONS = {
|
|
6071
|
+
// This permission regards the main component (App) and is used to tell
|
|
6072
|
+
// If the plugin link should be displayed in the menu
|
|
6073
|
+
// And also if the plugin is accessible. This use case is found when a user types the url of the
|
|
6074
|
+
// plugin directly in the browser
|
|
6075
|
+
main: [
|
|
6076
|
+
{ action: "plugin::upload.read", subject: null },
|
|
6077
|
+
{
|
|
6078
|
+
action: "plugin::upload.assets.create",
|
|
6079
|
+
subject: null
|
|
6080
|
+
},
|
|
6081
|
+
{
|
|
6082
|
+
action: "plugin::upload.assets.update",
|
|
6083
|
+
subject: null
|
|
6084
|
+
}
|
|
6085
|
+
],
|
|
6086
|
+
copyLink: [
|
|
6087
|
+
{
|
|
6088
|
+
action: "plugin::upload.assets.copy-link",
|
|
6089
|
+
subject: null
|
|
6090
|
+
}
|
|
6091
|
+
],
|
|
6092
|
+
create: [
|
|
6093
|
+
{
|
|
6094
|
+
action: "plugin::upload.assets.create",
|
|
6095
|
+
subject: null
|
|
6096
|
+
}
|
|
6097
|
+
],
|
|
6098
|
+
download: [
|
|
6099
|
+
{
|
|
6100
|
+
action: "plugin::upload.assets.download",
|
|
6101
|
+
subject: null
|
|
6102
|
+
}
|
|
6103
|
+
],
|
|
6104
|
+
read: [{ action: "plugin::upload.read", subject: null }],
|
|
6105
|
+
configureView: [{ action: "plugin::upload.configure-view", subject: null }],
|
|
6106
|
+
settings: [{ action: "plugin::upload.settings.read", subject: null }],
|
|
6107
|
+
update: [{ action: "plugin::upload.assets.update", subject: null, fields: null }]
|
|
6624
6108
|
};
|
|
6625
6109
|
const name = pluginPkg.strapi.name;
|
|
6626
6110
|
const index = {
|
|
@@ -6633,7 +6117,7 @@ const index = {
|
|
|
6633
6117
|
defaultMessage: "Media Library"
|
|
6634
6118
|
},
|
|
6635
6119
|
permissions: PERMISSIONS.main,
|
|
6636
|
-
Component: () => Promise.resolve().then(() => require("./index-
|
|
6120
|
+
Component: () => Promise.resolve().then(() => require("./index-Bl2-6oC8.js")),
|
|
6637
6121
|
position: 4
|
|
6638
6122
|
});
|
|
6639
6123
|
app.addSettingsLink("global", {
|
|
@@ -6643,7 +6127,7 @@ const index = {
|
|
|
6643
6127
|
defaultMessage: "Media Library"
|
|
6644
6128
|
},
|
|
6645
6129
|
to: "media-library",
|
|
6646
|
-
Component: () => Promise.resolve().then(() => require("./index-
|
|
6130
|
+
Component: () => Promise.resolve().then(() => require("./index-C1MSWEyZ.js")),
|
|
6647
6131
|
permissions: PERMISSIONS.settings
|
|
6648
6132
|
});
|
|
6649
6133
|
app.addFields({ type: "media", Component: MediaLibraryInput });
|
|
@@ -6712,4 +6196,4 @@ exports.useMediaLibraryPermissions = useMediaLibraryPermissions;
|
|
|
6712
6196
|
exports.usePersistentState = usePersistentState;
|
|
6713
6197
|
exports.useSelectionState = useSelectionState;
|
|
6714
6198
|
exports.viewOptions = viewOptions;
|
|
6715
|
-
//# sourceMappingURL=index-
|
|
6199
|
+
//# sourceMappingURL=index-YwynuEzj.js.map
|