@strapi/upload 5.48.0 → 5.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admin/ai/components/AIAssetCard.js +3 -2
- package/dist/admin/ai/components/AIAssetCard.js.map +1 -1
- package/dist/admin/ai/components/AIUploadModal.js +3 -2
- package/dist/admin/ai/components/AIUploadModal.js.map +1 -1
- package/dist/admin/components/AssetCard/UploadingAssetCard.js +3 -2
- package/dist/admin/components/AssetCard/UploadingAssetCard.js.map +1 -1
- package/dist/admin/components/AssetCard/VideoAssetCard.js +3 -2
- package/dist/admin/components/AssetCard/VideoAssetCard.js.map +1 -1
- package/dist/admin/components/AssetDialog/AssetDialog.js +3 -2
- package/dist/admin/components/AssetDialog/AssetDialog.js.map +1 -1
- package/dist/admin/components/AssetDialog/BrowseStep/Filters.js +3 -2
- package/dist/admin/components/AssetDialog/BrowseStep/Filters.js.map +1 -1
- package/dist/admin/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.js +3 -2
- package/dist/admin/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.js.map +1 -1
- package/dist/admin/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.js +3 -2
- package/dist/admin/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.js.map +1 -1
- package/dist/admin/components/AssetGridList/Draggable.js +3 -2
- package/dist/admin/components/AssetGridList/Draggable.js.map +1 -1
- package/dist/admin/components/Breadcrumbs/CrumbSimpleMenuAsync.js +3 -2
- package/dist/admin/components/Breadcrumbs/CrumbSimpleMenuAsync.js.map +1 -1
- package/dist/admin/components/BulkMoveDialog/BulkMoveDialog.js +5 -1
- package/dist/admin/components/BulkMoveDialog/BulkMoveDialog.js.map +1 -1
- package/dist/admin/components/EditAssetDialog/EditAssetContent.js +8 -4
- package/dist/admin/components/EditAssetDialog/EditAssetContent.js.map +1 -1
- package/dist/admin/components/EditAssetDialog/PreviewBox/AssetPreview.js +7 -3
- package/dist/admin/components/EditAssetDialog/PreviewBox/AssetPreview.js.map +1 -1
- package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.js +7 -3
- package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.js.map +1 -1
- package/dist/admin/components/EditAssetDialog/ReplaceMediaButton.js +3 -2
- package/dist/admin/components/EditAssetDialog/ReplaceMediaButton.js.map +1 -1
- package/dist/admin/components/EditFolderDialog/EditFolderDialog.js +8 -4
- package/dist/admin/components/EditFolderDialog/EditFolderDialog.js.map +1 -1
- package/dist/admin/components/FilterPopover/FilterPopover.js +3 -2
- package/dist/admin/components/FilterPopover/FilterPopover.js.map +1 -1
- package/dist/admin/components/FolderCard/FolderCard/FolderCard.js +3 -2
- package/dist/admin/components/FolderCard/FolderCard/FolderCard.js.map +1 -1
- package/dist/admin/components/MediaLibraryDialog/MediaLibraryDialog.js +5 -3
- package/dist/admin/components/MediaLibraryDialog/MediaLibraryDialog.js.map +1 -1
- package/dist/admin/components/MediaLibraryDialog/MediaLibraryDialog.mjs +2 -1
- package/dist/admin/components/MediaLibraryDialog/MediaLibraryDialog.mjs.map +1 -1
- package/dist/admin/components/MediaLibraryInput/Carousel/CarouselAssets.js +3 -2
- package/dist/admin/components/MediaLibraryInput/Carousel/CarouselAssets.js.map +1 -1
- package/dist/admin/components/MediaLibraryInput/Carousel/EmptyStateAsset.js +3 -2
- package/dist/admin/components/MediaLibraryInput/Carousel/EmptyStateAsset.js.map +1 -1
- package/dist/admin/components/MediaLibraryInput/MediaLibraryInput.js +3 -2
- package/dist/admin/components/MediaLibraryInput/MediaLibraryInput.js.map +1 -1
- package/dist/admin/components/SelectTree/SelectTree.js +7 -3
- package/dist/admin/components/SelectTree/SelectTree.js.map +1 -1
- package/dist/admin/components/TableList/CellContent.js +5 -1
- package/dist/admin/components/TableList/CellContent.js.map +1 -1
- package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js +3 -2
- package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js.map +1 -1
- package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js +3 -2
- package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js.map +1 -1
- package/dist/admin/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js +3 -2
- package/dist/admin/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js.map +1 -1
- package/dist/admin/components/UploadAssetDialog/UploadAssetDialog.js +3 -2
- package/dist/admin/components/UploadAssetDialog/UploadAssetDialog.js.map +1 -1
- package/dist/admin/future/components/Drawer.js +4 -3
- package/dist/admin/future/components/Drawer.js.map +1 -1
- package/dist/admin/future/pages/Assets/AssetsPage.js +29 -4
- package/dist/admin/future/pages/Assets/AssetsPage.js.map +1 -1
- package/dist/admin/future/pages/Assets/AssetsPage.mjs +28 -4
- package/dist/admin/future/pages/Assets/AssetsPage.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.js +3 -2
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetPreview.js +3 -2
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetPreview.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.js +3 -2
- package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.js +389 -0
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.js.map +1 -0
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.mjs +387 -0
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.mjs.map +1 -0
- package/dist/admin/future/pages/Assets/components/ImportFromUrlDialog.js +3 -2
- package/dist/admin/future/pages/Assets/components/ImportFromUrlDialog.js.map +1 -1
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.js +4 -4
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.js.map +1 -1
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.mjs +4 -4
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.js +48 -2
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.js.map +1 -1
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.mjs +48 -2
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.mjs.map +1 -1
- package/dist/admin/future/services/folders.js +28 -1
- package/dist/admin/future/services/folders.js.map +1 -1
- package/dist/admin/future/services/folders.mjs +28 -2
- package/dist/admin/future/services/folders.mjs.map +1 -1
- package/dist/admin/future/utils/files.js +5 -1
- package/dist/admin/future/utils/files.js.map +1 -1
- package/dist/admin/hooks/useAIMetadataJob.js +3 -2
- package/dist/admin/hooks/useAIMetadataJob.js.map +1 -1
- package/dist/admin/hooks/useAssets.js +3 -2
- package/dist/admin/hooks/useAssets.js.map +1 -1
- package/dist/admin/hooks/useCropImg.js +7 -3
- package/dist/admin/hooks/useCropImg.js.map +1 -1
- package/dist/admin/hooks/useEditAsset.js +3 -2
- package/dist/admin/hooks/useEditAsset.js.map +1 -1
- package/dist/admin/hooks/useFolders.js +3 -2
- package/dist/admin/hooks/useFolders.js.map +1 -1
- package/dist/admin/hooks/useModalQueryParams.js +3 -2
- package/dist/admin/hooks/useModalQueryParams.js.map +1 -1
- package/dist/admin/hooks/useSelectionState.js +3 -2
- package/dist/admin/hooks/useSelectionState.js.map +1 -1
- package/dist/admin/hooks/useUpload.js +3 -2
- package/dist/admin/hooks/useUpload.js.map +1 -1
- package/dist/admin/pages/App/App.js +3 -2
- package/dist/admin/pages/App/App.js.map +1 -1
- package/dist/admin/pages/App/ConfigureTheView/ConfigureTheView.js +7 -3
- package/dist/admin/pages/App/ConfigureTheView/ConfigureTheView.js.map +1 -1
- package/dist/admin/pages/App/ConfigureTheView/state/reducer.js +7 -2
- package/dist/admin/pages/App/ConfigureTheView/state/reducer.js.map +1 -1
- package/dist/admin/pages/App/MediaLibrary.js +3 -2
- package/dist/admin/pages/App/MediaLibrary.js.map +1 -1
- package/dist/admin/pages/App/components/BulkMoveButton.js +3 -2
- package/dist/admin/pages/App/components/BulkMoveButton.js.map +1 -1
- package/dist/admin/pages/App/components/Filters.js +3 -2
- package/dist/admin/pages/App/components/Filters.js.map +1 -1
- package/dist/admin/pages/SettingsPage/SettingsPage.js +7 -3
- package/dist/admin/pages/SettingsPage/SettingsPage.js.map +1 -1
- package/dist/admin/pages/SettingsPage/reducer.js +5 -1
- package/dist/admin/pages/SettingsPage/reducer.js.map +1 -1
- package/dist/admin/src/components/MediaLibraryDialog/MediaLibraryDialog.d.ts +2 -1
- package/dist/admin/src/future/pages/Assets/components/FolderTree/FolderTree.d.ts +19 -0
- package/dist/admin/src/future/pages/Assets/hooks/useFolderNavigation.d.ts +2 -0
- package/dist/admin/src/future/services/folders.d.ts +2 -2
- package/dist/admin/translations/en.json.js +10 -1
- package/dist/admin/translations/en.json.js.map +1 -1
- package/dist/admin/translations/en.json.mjs +10 -1
- package/dist/admin/translations/en.json.mjs.map +1 -1
- package/dist/admin/utils/formatBytes.js +5 -1
- package/dist/admin/utils/formatBytes.js.map +1 -1
- package/dist/admin/utils/urlYupSchema.js +3 -2
- package/dist/admin/utils/urlYupSchema.js.map +1 -1
- package/dist/server/controllers/admin-upload.js +11 -4
- package/dist/server/controllers/admin-upload.js.map +1 -1
- package/dist/server/controllers/content-api.js +19 -2
- package/dist/server/controllers/content-api.js.map +1 -1
- package/dist/server/controllers/content-api.mjs +12 -0
- package/dist/server/controllers/content-api.mjs.map +1 -1
- package/dist/server/controllers/utils/find-entity-and-check-permissions.js +7 -3
- package/dist/server/controllers/utils/find-entity-and-check-permissions.js.map +1 -1
- package/dist/server/middlewares/upload.js +7 -2
- package/dist/server/middlewares/upload.js.map +1 -1
- package/dist/server/register.js +9 -4
- package/dist/server/register.js.map +1 -1
- package/dist/server/routes/content-api.js +18 -2
- package/dist/server/routes/content-api.js.map +1 -1
- package/dist/server/routes/content-api.mjs +15 -0
- package/dist/server/routes/content-api.mjs.map +1 -1
- package/dist/server/routes/validation/upload.js +31 -2
- package/dist/server/routes/validation/upload.js.map +1 -1
- package/dist/server/routes/validation/upload.mjs +28 -0
- package/dist/server/routes/validation/upload.mjs.map +1 -1
- package/dist/server/services/file.js +13 -6
- package/dist/server/services/file.js.map +1 -1
- package/dist/server/services/image-manipulation.js +18 -12
- package/dist/server/services/image-manipulation.js.map +1 -1
- package/dist/server/services/provider.js +24 -0
- package/dist/server/services/provider.js.map +1 -1
- package/dist/server/services/provider.mjs +24 -0
- package/dist/server/services/provider.mjs.map +1 -1
- package/dist/server/services/upload.js +187 -31
- package/dist/server/services/upload.js.map +1 -1
- package/dist/server/services/upload.mjs +159 -11
- package/dist/server/services/upload.mjs.map +1 -1
- package/dist/server/src/controllers/content-api.d.ts +1 -0
- package/dist/server/src/controllers/content-api.d.ts.map +1 -1
- package/dist/server/src/controllers/index.d.ts +1 -0
- package/dist/server/src/controllers/index.d.ts.map +1 -1
- package/dist/server/src/index.d.ts +6 -0
- package/dist/server/src/index.d.ts.map +1 -1
- package/dist/server/src/routes/content-api.d.ts.map +1 -1
- package/dist/server/src/routes/validation/upload.d.ts +45 -0
- package/dist/server/src/routes/validation/upload.d.ts.map +1 -1
- package/dist/server/src/services/index.d.ts +5 -0
- package/dist/server/src/services/index.d.ts.map +1 -1
- package/dist/server/src/services/provider.d.ts +2 -1
- package/dist/server/src/services/provider.d.ts.map +1 -1
- package/dist/server/src/services/upload.d.ts +5 -0
- package/dist/server/src/services/upload.d.ts.map +1 -1
- package/dist/server/src/utils/mime-validation.d.ts.map +1 -1
- package/dist/server/utils/mime-validation.js +8 -2
- package/dist/server/utils/mime-validation.js.map +1 -1
- package/dist/server/utils/mime-validation.mjs +9 -3
- package/dist/server/utils/mime-validation.mjs.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PendingAssetStep.js","sources":["../../../../../admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Flex, Grid, KeyboardNavigable, Modal, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../enums';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad } from '../../../utils';\nimport { AssetCard } from '../../AssetCard/AssetCard';\nimport { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';\n\nimport type { File, RawFile } from '../../../../../shared/contracts/files';\n\nconst Status = {\n Idle: 'IDLE',\n Uploading: 'UPLOADING',\n Intermediate: 'INTERMEDIATE',\n};\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\ninterface PendingAssetStepProps {\n addUploadedFiles?: (files: File[]) => void;\n folderId?: string | number | null;\n onClose: () => void;\n onEditAsset: (asset: File) => void;\n onRemoveAsset: (asset: File) => void;\n onAddAsset?: (asset: File) => void;\n assets: Asset[];\n onClickAddAsset: () => void;\n onCancelUpload: (rawFile: RawFile) => void;\n onUploadSucceed: (file: RawFile) => void;\n trackedLocation?: string;\n initialAssetsToAdd?: File[];\n}\n\nexport const PendingAssetStep = ({\n addUploadedFiles,\n folderId,\n onClose,\n onEditAsset,\n onRemoveAsset,\n assets,\n onClickAddAsset,\n onCancelUpload,\n onUploadSucceed,\n trackedLocation,\n}: PendingAssetStepProps) => {\n const assetCountRef = React.useRef(0);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);\n\n const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n const assetsCountByType = assets.reduce(\n (acc: Record<AssetType, string | number>, asset) => {\n const { type } = asset;\n\n if (type !== undefined && !acc[type]) {\n acc[type] = 0;\n }\n\n if (type !== undefined) {\n const accType = acc[type];\n const currentCount = typeof accType === 'string' ? accType : accType.toString();\n acc[type] = `${parseInt(currentCount, 10) + 1}`;\n }\n\n return acc;\n },\n {} as Record<AssetType, string | number>\n );\n\n trackUsage('willAddMediaLibraryAssets', {\n location: trackedLocation!,\n ...assetsCountByType,\n });\n\n setUploadStatus(Status.Uploading);\n };\n\n const handleStatusChange = (status: string, file: RawFile) => {\n if (status === 'success' || status === 'error') {\n assetCountRef.current++;\n\n // There's no \"terminated\" status. When all the files have called their\n // onUploadSucceed callback, the parent component filters the asset list\n // and closes the modal when the asset list is empty\n if (assetCountRef.current === assets.length) {\n assetCountRef.current = 0;\n setUploadStatus(Status.Intermediate);\n }\n }\n\n if (status === 'success') {\n onUploadSucceed(file);\n }\n };\n\n return (\n <>\n <Modal.Header>\n <Modal.Title>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Modal.Title>\n </Modal.Header>\n\n <Modal.Body>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={7}>\n <Flex justifyContent=\"space-between\">\n <Flex direction=\"column\" alignItems=\"stretch\" gap={0}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n {formatMessage(\n {\n id: getTrad('list.assets.to-upload'),\n defaultMessage:\n '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n },\n { number: assets.length }\n )}\n </Typography>\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('modal.upload-list.sub-header-subtitle'),\n defaultMessage: 'Manage the assets before adding them to the Media Library',\n })}\n </Typography>\n </Flex>\n <Button size=\"S\" onClick={onClickAddAsset}>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Button>\n </Flex>\n <KeyboardNavigable tagName=\"article\">\n <Grid.Root gap={4}>\n {assets.map((asset) => {\n const assetKey = asset.url;\n\n if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {\n return (\n <Grid.Item\n m={4}\n s={6}\n xs={12}\n key={assetKey}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <UploadingAssetCard\n // Props used to store the newly uploaded files\n addUploadedFiles={addUploadedFiles!}\n asset={asset}\n id={assetKey}\n onCancel={onCancelUpload}\n onStatusChange={(status) => handleStatusChange(status, asset.rawFile!)}\n size=\"S\"\n folderId={folderId}\n />\n </Grid.Item>\n );\n }\n\n return (\n <Grid.Item col={4} key={assetKey} direction=\"column\" alignItems=\"stretch\">\n <AssetCard\n asset={asset}\n size=\"S\"\n key={assetKey}\n local\n alt={asset.name}\n onEdit={onEditAsset}\n onRemove={onRemoveAsset}\n />\n </Grid.Item>\n );\n })}\n </Grid.Root>\n </KeyboardNavigable>\n </Flex>\n </Modal.Body>\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button onClick={handleSubmit} loading={uploadStatus === Status.Uploading}>\n {formatMessage(\n {\n id: getTrad('modal.upload-list.footer.button'),\n defaultMessage:\n 'Upload {number, plural, one {# asset} other {# assets}} to the library',\n },\n { number: assets.length }\n )}\n </Button>\n </Modal.Footer>\n </>\n );\n};\n"],"names":["Status","Idle","Uploading","Intermediate","PendingAssetStep","addUploadedFiles","folderId","onClose","onEditAsset","onRemoveAsset","assets","onClickAddAsset","onCancelUpload","onUploadSucceed","trackedLocation","assetCountRef","React","useRef","formatMessage","useIntl","trackUsage","useTracking","uploadStatus","setUploadStatus","useState","handleSubmit","e","preventDefault","stopPropagation","assetsCountByType","reduce","acc","asset","type","undefined","accType","currentCount","toString","parseInt","location","handleStatusChange","status","file","current","length","_jsxs","_Fragment","_jsx","Modal","Header","Title","id","getTrad","defaultMessage","Body","Flex","direction","alignItems","gap","justifyContent","Typography","variant","fontWeight","textColor","number","Button","size","onClick","KeyboardNavigable","tagName","Grid","Root","map","assetKey","url","Item","m","s","xs","UploadingAssetCard","onCancel","onStatusChange","rawFile","col","AssetCard","local","alt","name","onEdit","onRemove","Footer","loading"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PendingAssetStep.js","sources":["../../../../../admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Flex, Grid, KeyboardNavigable, Modal, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../enums';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad } from '../../../utils';\nimport { AssetCard } from '../../AssetCard/AssetCard';\nimport { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';\n\nimport type { File, RawFile } from '../../../../../shared/contracts/files';\n\nconst Status = {\n Idle: 'IDLE',\n Uploading: 'UPLOADING',\n Intermediate: 'INTERMEDIATE',\n};\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\ninterface PendingAssetStepProps {\n addUploadedFiles?: (files: File[]) => void;\n folderId?: string | number | null;\n onClose: () => void;\n onEditAsset: (asset: File) => void;\n onRemoveAsset: (asset: File) => void;\n onAddAsset?: (asset: File) => void;\n assets: Asset[];\n onClickAddAsset: () => void;\n onCancelUpload: (rawFile: RawFile) => void;\n onUploadSucceed: (file: RawFile) => void;\n trackedLocation?: string;\n initialAssetsToAdd?: File[];\n}\n\nexport const PendingAssetStep = ({\n addUploadedFiles,\n folderId,\n onClose,\n onEditAsset,\n onRemoveAsset,\n assets,\n onClickAddAsset,\n onCancelUpload,\n onUploadSucceed,\n trackedLocation,\n}: PendingAssetStepProps) => {\n const assetCountRef = React.useRef(0);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);\n\n const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n const assetsCountByType = assets.reduce(\n (acc: Record<AssetType, string | number>, asset) => {\n const { type } = asset;\n\n if (type !== undefined && !acc[type]) {\n acc[type] = 0;\n }\n\n if (type !== undefined) {\n const accType = acc[type];\n const currentCount = typeof accType === 'string' ? accType : accType.toString();\n acc[type] = `${parseInt(currentCount, 10) + 1}`;\n }\n\n return acc;\n },\n {} as Record<AssetType, string | number>\n );\n\n trackUsage('willAddMediaLibraryAssets', {\n location: trackedLocation!,\n ...assetsCountByType,\n });\n\n setUploadStatus(Status.Uploading);\n };\n\n const handleStatusChange = (status: string, file: RawFile) => {\n if (status === 'success' || status === 'error') {\n assetCountRef.current++;\n\n // There's no \"terminated\" status. When all the files have called their\n // onUploadSucceed callback, the parent component filters the asset list\n // and closes the modal when the asset list is empty\n if (assetCountRef.current === assets.length) {\n assetCountRef.current = 0;\n setUploadStatus(Status.Intermediate);\n }\n }\n\n if (status === 'success') {\n onUploadSucceed(file);\n }\n };\n\n return (\n <>\n <Modal.Header>\n <Modal.Title>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Modal.Title>\n </Modal.Header>\n\n <Modal.Body>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={7}>\n <Flex justifyContent=\"space-between\">\n <Flex direction=\"column\" alignItems=\"stretch\" gap={0}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n {formatMessage(\n {\n id: getTrad('list.assets.to-upload'),\n defaultMessage:\n '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n },\n { number: assets.length }\n )}\n </Typography>\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('modal.upload-list.sub-header-subtitle'),\n defaultMessage: 'Manage the assets before adding them to the Media Library',\n })}\n </Typography>\n </Flex>\n <Button size=\"S\" onClick={onClickAddAsset}>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Button>\n </Flex>\n <KeyboardNavigable tagName=\"article\">\n <Grid.Root gap={4}>\n {assets.map((asset) => {\n const assetKey = asset.url;\n\n if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {\n return (\n <Grid.Item\n m={4}\n s={6}\n xs={12}\n key={assetKey}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <UploadingAssetCard\n // Props used to store the newly uploaded files\n addUploadedFiles={addUploadedFiles!}\n asset={asset}\n id={assetKey}\n onCancel={onCancelUpload}\n onStatusChange={(status) => handleStatusChange(status, asset.rawFile!)}\n size=\"S\"\n folderId={folderId}\n />\n </Grid.Item>\n );\n }\n\n return (\n <Grid.Item col={4} key={assetKey} direction=\"column\" alignItems=\"stretch\">\n <AssetCard\n asset={asset}\n size=\"S\"\n key={assetKey}\n local\n alt={asset.name}\n onEdit={onEditAsset}\n onRemove={onRemoveAsset}\n />\n </Grid.Item>\n );\n })}\n </Grid.Root>\n </KeyboardNavigable>\n </Flex>\n </Modal.Body>\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button onClick={handleSubmit} loading={uploadStatus === Status.Uploading}>\n {formatMessage(\n {\n id: getTrad('modal.upload-list.footer.button'),\n defaultMessage:\n 'Upload {number, plural, one {# asset} other {# assets}} to the library',\n },\n { number: assets.length }\n )}\n </Button>\n </Modal.Footer>\n </>\n );\n};\n"],"names":["Status","Idle","Uploading","Intermediate","PendingAssetStep","addUploadedFiles","folderId","onClose","onEditAsset","onRemoveAsset","assets","onClickAddAsset","onCancelUpload","onUploadSucceed","trackedLocation","assetCountRef","React","useRef","formatMessage","useIntl","trackUsage","useTracking","uploadStatus","setUploadStatus","useState","handleSubmit","e","preventDefault","stopPropagation","assetsCountByType","reduce","acc","asset","type","undefined","accType","currentCount","toString","parseInt","location","handleStatusChange","status","file","current","length","_jsxs","_Fragment","_jsx","Modal","Header","Title","id","getTrad","defaultMessage","Body","Flex","direction","alignItems","gap","justifyContent","Typography","variant","fontWeight","textColor","number","Button","size","onClick","KeyboardNavigable","tagName","Grid","Root","map","assetKey","url","Item","m","s","xs","UploadingAssetCard","onCancel","onStatusChange","rawFile","col","AssetCard","local","alt","name","onEdit","onRemove","Footer","loading"],"mappings":"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"}
|
|
@@ -8,7 +8,8 @@ var EditAssetContent = require('../EditAssetDialog/EditAssetContent.js');
|
|
|
8
8
|
var AddAssetStep = require('./AddAssetStep/AddAssetStep.js');
|
|
9
9
|
var PendingAssetStep = require('./PendingAssetStep/PendingAssetStep.js');
|
|
10
10
|
|
|
11
|
-
function
|
|
11
|
+
function _interopNamespace(e) {
|
|
12
|
+
if (e && e.__esModule) return e;
|
|
12
13
|
var n = Object.create(null);
|
|
13
14
|
if (e) {
|
|
14
15
|
Object.keys(e).forEach(function (k) {
|
|
@@ -25,7 +26,7 @@ function _interopNamespaceDefault(e) {
|
|
|
25
26
|
return Object.freeze(n);
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
var React__namespace = /*#__PURE__*/
|
|
29
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
29
30
|
|
|
30
31
|
const Steps = {
|
|
31
32
|
AddAsset: 'AddAsset',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadAssetDialog.js","sources":["../../../../admin/src/components/UploadAssetDialog/UploadAssetDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { EditAssetContent } from '../EditAssetDialog/EditAssetContent';\n\nimport { AddAssetStep } from './AddAssetStep/AddAssetStep';\nimport { PendingAssetStep } from './PendingAssetStep/PendingAssetStep';\n\nimport type { File, RawFile } from '../../../../shared/contracts/files';\nimport type { AllowedFiles } from '../../utils';\n\nconst Steps = {\n AddAsset: 'AddAsset',\n PendingAsset: 'PendingAsset',\n};\n\ninterface FileWithRawFile extends Omit<File, 'id' | 'hash'> {\n id?: string;\n hash?: string;\n rawFile: RawFile;\n}\n\ntype FileWithoutIdHash = Omit<File, 'id' | 'hash'>;\n\nexport interface Asset extends Omit<File, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: File['folder'] & { id: number };\n}\n\nexport interface UploadAssetDialogProps {\n addUploadedFiles?: (files: Asset[] | File[]) => void;\n folderId?: string | number | null;\n initialAssetsToAdd?: Asset[];\n onClose: () => void;\n open: boolean;\n trackedLocation?: string;\n validateAssetsTypes?: (\n assets: FileWithoutIdHash[] | Asset[],\n cb: (assets?: AllowedFiles[], error?: string) => void\n ) => void;\n}\n\nexport const UploadAssetDialog = ({\n initialAssetsToAdd,\n folderId = null,\n onClose = () => {},\n addUploadedFiles,\n trackedLocation,\n open,\n validateAssetsTypes = (_, cb) => cb(),\n}: UploadAssetDialogProps) => {\n const { formatMessage } = useIntl();\n const [step, setStep] = React.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);\n const [assets, setAssets] = React.useState(initialAssetsToAdd || []);\n const [assetToEdit, setAssetToEdit] = React.useState<File | Asset | undefined>(undefined);\n\n const handleAddToPendingAssets = (nextAssets: Asset[]) => {\n validateAssetsTypes(nextAssets, () => {\n setAssets((prevAssets) => prevAssets.concat(nextAssets));\n setStep(Steps.PendingAsset);\n });\n };\n\n const moveToAddAsset = () => {\n setStep(Steps.AddAsset);\n };\n\n const handleCancelUpload = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n // When there's no asset, transition to the AddAsset step\n if (nextAssets.length === 0) {\n moveToAddAsset();\n }\n };\n\n const handleUploadSuccess = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n if (nextAssets.length === 0) {\n onClose();\n }\n };\n\n const handleAssetEditValidation = (nextAsset?: Asset | boolean | null) => {\n if (nextAsset && typeof nextAsset !== 'boolean') {\n const nextAssets = assets.map((asset) => (asset === assetToEdit ? nextAsset : asset));\n setAssets(nextAssets);\n }\n\n setAssetToEdit(undefined);\n };\n\n const handleClose = () => {\n if (step === Steps.PendingAsset && assets.length > 0) {\n // eslint-disable-next-line no-alert\n const confirm = window.confirm(\n formatMessage({\n id: 'window.confirm.close-modal.files',\n defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.',\n })\n );\n\n if (confirm) {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const handleRemoveAsset = (assetToRemove: File) => {\n const nextAssets = assets.filter((asset) => asset !== assetToRemove);\n setAssets(nextAssets);\n };\n\n return (\n <Modal.Root open={open} onOpenChange={handleClose}>\n {step === Steps.AddAsset && (\n <Modal.Content>\n <AddAssetStep\n onClose={onClose}\n onAddAsset={(assets: FileWithRawFile[]) =>\n handleAddToPendingAssets(assets as unknown as Asset[])\n }\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {step === Steps.PendingAsset && (\n <Modal.Content>\n <PendingAssetStep\n onClose={handleClose}\n assets={assets}\n onEditAsset={setAssetToEdit}\n onRemoveAsset={handleRemoveAsset}\n onClickAddAsset={moveToAddAsset}\n onCancelUpload={handleCancelUpload}\n onUploadSucceed={handleUploadSuccess}\n initialAssetsToAdd={initialAssetsToAdd}\n addUploadedFiles={addUploadedFiles}\n folderId={folderId}\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {assetToEdit && (\n <Modal.Content>\n <EditAssetContent\n onClose={handleAssetEditValidation}\n asset={assetToEdit as Asset}\n initialFolderId={folderId}\n canUpdate\n canCopyLink={false}\n canDownload={false}\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n </Modal.Root>\n );\n};\n"],"names":["Steps","AddAsset","PendingAsset","UploadAssetDialog","initialAssetsToAdd","folderId","onClose","addUploadedFiles","trackedLocation","open","validateAssetsTypes","_","cb","formatMessage","useIntl","step","setStep","React","useState","assets","setAssets","assetToEdit","setAssetToEdit","undefined","handleAddToPendingAssets","nextAssets","prevAssets","concat","moveToAddAsset","handleCancelUpload","file","filter","asset","rawFile","length","handleUploadSuccess","handleAssetEditValidation","nextAsset","map","handleClose","confirm","window","id","defaultMessage","handleRemoveAsset","assetToRemove","_jsxs","Modal","Root","onOpenChange","_jsx","Content","AddAssetStep","onAddAsset","PendingAssetStep","onEditAsset","onRemoveAsset","onClickAddAsset","onCancelUpload","onUploadSucceed","EditAssetContent","initialFolderId","canUpdate","canCopyLink","canDownload"],"mappings":"
|
|
1
|
+
{"version":3,"file":"UploadAssetDialog.js","sources":["../../../../admin/src/components/UploadAssetDialog/UploadAssetDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { EditAssetContent } from '../EditAssetDialog/EditAssetContent';\n\nimport { AddAssetStep } from './AddAssetStep/AddAssetStep';\nimport { PendingAssetStep } from './PendingAssetStep/PendingAssetStep';\n\nimport type { File, RawFile } from '../../../../shared/contracts/files';\nimport type { AllowedFiles } from '../../utils';\n\nconst Steps = {\n AddAsset: 'AddAsset',\n PendingAsset: 'PendingAsset',\n};\n\ninterface FileWithRawFile extends Omit<File, 'id' | 'hash'> {\n id?: string;\n hash?: string;\n rawFile: RawFile;\n}\n\ntype FileWithoutIdHash = Omit<File, 'id' | 'hash'>;\n\nexport interface Asset extends Omit<File, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: File['folder'] & { id: number };\n}\n\nexport interface UploadAssetDialogProps {\n addUploadedFiles?: (files: Asset[] | File[]) => void;\n folderId?: string | number | null;\n initialAssetsToAdd?: Asset[];\n onClose: () => void;\n open: boolean;\n trackedLocation?: string;\n validateAssetsTypes?: (\n assets: FileWithoutIdHash[] | Asset[],\n cb: (assets?: AllowedFiles[], error?: string) => void\n ) => void;\n}\n\nexport const UploadAssetDialog = ({\n initialAssetsToAdd,\n folderId = null,\n onClose = () => {},\n addUploadedFiles,\n trackedLocation,\n open,\n validateAssetsTypes = (_, cb) => cb(),\n}: UploadAssetDialogProps) => {\n const { formatMessage } = useIntl();\n const [step, setStep] = React.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);\n const [assets, setAssets] = React.useState(initialAssetsToAdd || []);\n const [assetToEdit, setAssetToEdit] = React.useState<File | Asset | undefined>(undefined);\n\n const handleAddToPendingAssets = (nextAssets: Asset[]) => {\n validateAssetsTypes(nextAssets, () => {\n setAssets((prevAssets) => prevAssets.concat(nextAssets));\n setStep(Steps.PendingAsset);\n });\n };\n\n const moveToAddAsset = () => {\n setStep(Steps.AddAsset);\n };\n\n const handleCancelUpload = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n // When there's no asset, transition to the AddAsset step\n if (nextAssets.length === 0) {\n moveToAddAsset();\n }\n };\n\n const handleUploadSuccess = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n if (nextAssets.length === 0) {\n onClose();\n }\n };\n\n const handleAssetEditValidation = (nextAsset?: Asset | boolean | null) => {\n if (nextAsset && typeof nextAsset !== 'boolean') {\n const nextAssets = assets.map((asset) => (asset === assetToEdit ? nextAsset : asset));\n setAssets(nextAssets);\n }\n\n setAssetToEdit(undefined);\n };\n\n const handleClose = () => {\n if (step === Steps.PendingAsset && assets.length > 0) {\n // eslint-disable-next-line no-alert\n const confirm = window.confirm(\n formatMessage({\n id: 'window.confirm.close-modal.files',\n defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.',\n })\n );\n\n if (confirm) {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const handleRemoveAsset = (assetToRemove: File) => {\n const nextAssets = assets.filter((asset) => asset !== assetToRemove);\n setAssets(nextAssets);\n };\n\n return (\n <Modal.Root open={open} onOpenChange={handleClose}>\n {step === Steps.AddAsset && (\n <Modal.Content>\n <AddAssetStep\n onClose={onClose}\n onAddAsset={(assets: FileWithRawFile[]) =>\n handleAddToPendingAssets(assets as unknown as Asset[])\n }\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {step === Steps.PendingAsset && (\n <Modal.Content>\n <PendingAssetStep\n onClose={handleClose}\n assets={assets}\n onEditAsset={setAssetToEdit}\n onRemoveAsset={handleRemoveAsset}\n onClickAddAsset={moveToAddAsset}\n onCancelUpload={handleCancelUpload}\n onUploadSucceed={handleUploadSuccess}\n initialAssetsToAdd={initialAssetsToAdd}\n addUploadedFiles={addUploadedFiles}\n folderId={folderId}\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {assetToEdit && (\n <Modal.Content>\n <EditAssetContent\n onClose={handleAssetEditValidation}\n asset={assetToEdit as Asset}\n initialFolderId={folderId}\n canUpdate\n canCopyLink={false}\n canDownload={false}\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n </Modal.Root>\n );\n};\n"],"names":["Steps","AddAsset","PendingAsset","UploadAssetDialog","initialAssetsToAdd","folderId","onClose","addUploadedFiles","trackedLocation","open","validateAssetsTypes","_","cb","formatMessage","useIntl","step","setStep","React","useState","assets","setAssets","assetToEdit","setAssetToEdit","undefined","handleAddToPendingAssets","nextAssets","prevAssets","concat","moveToAddAsset","handleCancelUpload","file","filter","asset","rawFile","length","handleUploadSuccess","handleAssetEditValidation","nextAsset","map","handleClose","confirm","window","id","defaultMessage","handleRemoveAsset","assetToRemove","_jsxs","Modal","Root","onOpenChange","_jsx","Content","AddAssetStep","onAddAsset","PendingAssetStep","onEditAsset","onRemoveAsset","onClickAddAsset","onCancelUpload","onUploadSucceed","EditAssetContent","initialFolderId","canUpdate","canCopyLink","canDownload"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAMA,KAAAA,GAAQ;IACZC,QAAAA,EAAU,UAAA;IACVC,YAAAA,EAAc;AAChB,CAAA;AA6BO,MAAMC,iBAAAA,GAAoB,CAAC,EAChCC,kBAAkB,EAClBC,QAAAA,GAAW,IAAI,EACfC,OAAAA,GAAU,IAAA,CAAO,CAAC,EAClBC,gBAAgB,EAChBC,eAAe,EACfC,IAAI,EACJC,sBAAsB,CAACC,CAAAA,EAAGC,EAAAA,GAAOA,EAAAA,EAAI,EACd,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,IAAAA,EAAMC,OAAAA,CAAQ,GAAGC,gBAAAA,CAAMC,QAAQ,CAACd,kBAAAA,GAAqBJ,KAAAA,CAAME,YAAY,GAAGF,KAAAA,CAAMC,QAAQ,CAAA;IAC/F,MAAM,CAACkB,QAAQC,SAAAA,CAAU,GAAGH,iBAAMC,QAAQ,CAACd,sBAAsB,EAAE,CAAA;AACnE,IAAA,MAAM,CAACiB,WAAAA,EAAaC,cAAAA,CAAe,GAAGL,gBAAAA,CAAMC,QAAQ,CAA2BK,SAAAA,CAAAA;AAE/E,IAAA,MAAMC,2BAA2B,CAACC,UAAAA,GAAAA;AAChCf,QAAAA,mBAAAA,CAAoBe,UAAAA,EAAY,IAAA;AAC9BL,YAAAA,SAAAA,CAAU,CAACM,UAAAA,GAAeA,UAAAA,CAAWC,MAAM,CAACF,UAAAA,CAAAA,CAAAA;AAC5CT,YAAAA,OAAAA,CAAQhB,MAAME,YAAY,CAAA;AAC5B,QAAA,CAAA,CAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAM0B,cAAAA,GAAiB,IAAA;AACrBZ,QAAAA,OAAAA,CAAQhB,MAAMC,QAAQ,CAAA;AACxB,IAAA,CAAA;AAEA,IAAA,MAAM4B,qBAAqB,CAACC,IAAAA,GAAAA;QAC1B,MAAML,UAAAA,GAAaN,OAAOY,MAAM,CAAC,CAACC,KAAAA,GAAUA,KAAAA,CAAMC,OAAO,KAAKH,IAAAA,CAAAA;QAC9DV,SAAAA,CAAUK,UAAAA,CAAAA;;QAGV,IAAIA,UAAAA,CAAWS,MAAM,KAAK,CAAA,EAAG;AAC3BN,YAAAA,cAAAA,EAAAA;AACF,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMO,sBAAsB,CAACL,IAAAA,GAAAA;QAC3B,MAAML,UAAAA,GAAaN,OAAOY,MAAM,CAAC,CAACC,KAAAA,GAAUA,KAAAA,CAAMC,OAAO,KAAKH,IAAAA,CAAAA;QAC9DV,SAAAA,CAAUK,UAAAA,CAAAA;QAEV,IAAIA,UAAAA,CAAWS,MAAM,KAAK,CAAA,EAAG;AAC3B5B,YAAAA,OAAAA,EAAAA;AACF,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAM8B,4BAA4B,CAACC,SAAAA,GAAAA;QACjC,IAAIA,SAAAA,IAAa,OAAOA,SAAAA,KAAc,SAAA,EAAW;YAC/C,MAAMZ,UAAAA,GAAaN,OAAOmB,GAAG,CAAC,CAACN,KAAAA,GAAWA,KAAAA,KAAUX,cAAcgB,SAAAA,GAAYL,KAAAA,CAAAA;YAC9EZ,SAAAA,CAAUK,UAAAA,CAAAA;AACZ,QAAA;QAEAH,cAAAA,CAAeC,SAAAA,CAAAA;AACjB,IAAA,CAAA;AAEA,IAAA,MAAMgB,WAAAA,GAAc,IAAA;AAClB,QAAA,IAAIxB,SAASf,KAAAA,CAAME,YAAY,IAAIiB,MAAAA,CAAOe,MAAM,GAAG,CAAA,EAAG;;AAEpD,YAAA,MAAMM,OAAAA,GAAUC,MAAAA,CAAOD,OAAO,CAC5B3B,aAAAA,CAAc;gBACZ6B,EAAAA,EAAI,kCAAA;gBACJC,cAAAA,EAAgB;AAClB,aAAA,CAAA,CAAA;AAGF,YAAA,IAAIH,OAAAA,EAAS;AACXlC,gBAAAA,OAAAA,EAAAA;AACF,YAAA;QACF,CAAA,MAAO;AACLA,YAAAA,OAAAA,EAAAA;AACF,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMsC,oBAAoB,CAACC,aAAAA,GAAAA;AACzB,QAAA,MAAMpB,aAAaN,MAAAA,CAAOY,MAAM,CAAC,CAACC,QAAUA,KAAAA,KAAUa,aAAAA,CAAAA;QACtDzB,SAAAA,CAAUK,UAAAA,CAAAA;AACZ,IAAA,CAAA;IAEA,qBACEqB,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAACvC,IAAAA,EAAMA,IAAAA;QAAMwC,YAAAA,EAAcV,WAAAA;;AACnCxB,YAAAA,IAAAA,KAASf,KAAAA,CAAMC,QAAQ,kBACtBiD,cAAA,CAACH,mBAAMI,OAAO,EAAA;AACZ,gBAAA,QAAA,gBAAAD,cAAA,CAACE,yBAAAA,EAAAA;oBACC9C,OAAAA,EAASA,OAAAA;oBACT+C,UAAAA,EAAY,CAAClC,SACXK,wBAAAA,CAAyBL,MAAAA,CAAAA;oBAE3BX,eAAAA,EAAiBA;;;AAKtBO,YAAAA,IAAAA,KAASf,KAAAA,CAAME,YAAY,kBAC1BgD,cAAA,CAACH,mBAAMI,OAAO,EAAA;AACZ,gBAAA,QAAA,gBAAAD,cAAA,CAACI,iCAAAA,EAAAA;oBACChD,OAAAA,EAASiC,WAAAA;oBACTpB,MAAAA,EAAQA,MAAAA;oBACRoC,WAAAA,EAAajC,cAAAA;oBACbkC,aAAAA,EAAeZ,iBAAAA;oBACfa,eAAAA,EAAiB7B,cAAAA;oBACjB8B,cAAAA,EAAgB7B,kBAAAA;oBAChB8B,eAAAA,EAAiBxB,mBAAAA;oBACjB/B,kBAAAA,EAAoBA,kBAAAA;oBACpBG,gBAAAA,EAAkBA,gBAAAA;oBAClBF,QAAAA,EAAUA,QAAAA;oBACVG,eAAAA,EAAiBA;;;YAKtBa,WAAAA,kBACC6B,cAAA,CAACH,mBAAMI,OAAO,EAAA;AACZ,gBAAA,QAAA,gBAAAD,cAAA,CAACU,iCAAAA,EAAAA;oBACCtD,OAAAA,EAAS8B,yBAAAA;oBACTJ,KAAAA,EAAOX,WAAAA;oBACPwC,eAAAA,EAAiBxD,QAAAA;oBACjByD,SAAS,EAAA,IAAA;oBACTC,WAAAA,EAAa,KAAA;oBACbC,WAAAA,EAAa,KAAA;oBACbxD,eAAAA,EAAiBA;;;;;AAM7B;;;;"}
|
|
@@ -8,7 +8,8 @@ var icons = require('@strapi/icons');
|
|
|
8
8
|
var reactIntl = require('react-intl');
|
|
9
9
|
var styledComponents = require('styled-components');
|
|
10
10
|
|
|
11
|
-
function
|
|
11
|
+
function _interopNamespace(e) {
|
|
12
|
+
if (e && e.__esModule) return e;
|
|
12
13
|
var n = Object.create(null);
|
|
13
14
|
if (e) {
|
|
14
15
|
Object.keys(e).forEach(function (k) {
|
|
@@ -25,8 +26,8 @@ function _interopNamespaceDefault(e) {
|
|
|
25
26
|
return Object.freeze(n);
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
var React__namespace = /*#__PURE__*/
|
|
29
|
-
var Dialog__namespace = /*#__PURE__*/
|
|
29
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
30
|
+
var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
|
|
30
31
|
|
|
31
32
|
/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */ const DRAWER_CLOSE_ANIMATION_MS = 300;
|
|
32
33
|
/* -------------------------------------------------------------------------------------------------
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n from {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n flex-direction: column;\n position: fixed;\n bottom: 0;\n right: 0;\n padding: ${({ theme }) => theme.spaces[2]};\n max-width: 100%;\n /* Sit just below the overlay token (300) so that:\n - popovers (500) and tooltips (1000) rendered from descendant components\n surface above the drawer panel,\n - AlertDialog overlays (300) and contents (310) opened from inside the\n drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n z-index: 200;\n overflow: hidden;\n width: ${({ width }) => width ?? '400px'};\n max-height: ${({ maxHeight }) => maxHeight ?? '100vh'};\n\n &:focus {\n outline: none;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n &[data-state='open'] {\n animation: ${({ $animationDirection }) =>\n $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n }\n\n &[data-state='closed'] {\n animation: ${({ $animationDirection }) =>\n $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n pointer-events: none;\n }\n }\n`;\n\nconst DrawerContent = styled(Box)`\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral0};\n border-radius: ${({ theme }) => theme.borderRadius};\n box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n overflow: hidden;\n border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n display: grid;\n flex: 1;\n min-height: 0;\n grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n transition: grid-template-rows 0.3s ease-in-out;\n\n > div {\n overflow: hidden;\n min-height: 0;\n }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n &:hover {\n background: transparent;\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n animationDirection?: 'up' | 'left';\n children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n ({ animationDirection, children, ...props }, ref) => (\n <Dialog.Content\n ref={ref}\n forceMount\n asChild\n onPointerDownOutside={(e) => e.preventDefault()}\n onInteractOutside={(e) => e.preventDefault()}\n data-animation-direction={animationDirection}\n >\n <DrawerContainer $animationDirection={animationDirection} {...props}>\n <DrawerContent>{children}</DrawerContent>\n </DrawerContainer>\n </Dialog.Content>\n )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n isVisible?: boolean;\n onClose?: () => void;\n children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n <Dialog.Root\n open={isVisible}\n onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n modal={false}\n >\n <Dialog.Portal>{children}</Dialog.Portal>\n </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n children: React.ReactNode;\n /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n children,\n isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n <ScrollArea>{children}</ScrollArea>\n </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n onClose: () => void;\n label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n const { formatMessage } = useIntl();\n const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n return (\n <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n {children ?? <Cross />}\n </CloseIconButton>\n );\n};\n\nconst Drawer = {\n Root: DrawerRoot,\n Body: DrawerBody,\n ScrollableContent: DrawerScrollableContent,\n CloseButton: DrawerCloseButton,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,iGACO,MAAMA,yBAAAA,GAA4B;AAEzC;;AAEkG;AAGlG,MAAMC,mBAAAA,GAAsBC,0BAAS;;;;;;;;;AASrC,CAAC;AAED,MAAMC,oBAAAA,GAAuBD,0BAAS;;;;;;;;;AAStC,CAAC;AAED;AACA,MAAME,oBAAAA,GAAuBF,0BAAS;;;;;;;;;AAStC,CAAC;AAED,MAAMG,qBAAAA,GAAwBH,0BAAS;;;;;;;;;AASvC,CAAC;AAUD,MAAMI,eAAAA,GAAkBC,uBAAAA,CAAOC,iBAAAA,CAA2B;;;;;WAK/C,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;AASnC,SAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,SAAS,OAAA,CAAQ;AAC7B,cAAA,EAAE,CAAC,EAAEC,SAAS,EAAE,GAAKA,aAAa,OAAA,CAAQ;;;;;;;;iBAQvC,EAAE,CAAC,EAAEC,mBAAmB,EAAE,GACjCA,mBAAAA,KAAwB,IAAA,GAAOZ,sBAAsBG,oBAAAA;AACvD,QAAA,EAAEJ,yBAAAA,CAA0B;;;;iBAInB,EAAE,CAAC,EAAEa,mBAAmB,EAAE,GACjCA,mBAAAA,KAAwB,IAAA,GAAOV,uBAAuBE,qBAAAA;AACxD,QAAA,EAAEL,yBAAAA,CAA0B;;;;AAIpC,CAAC;AAED,MAAMc,aAAAA,GAAgBP,uBAAAA,CAAOQ,gBAAAA,CAAI;;;;;;oBAMb,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMO,MAAM,CAACC,QAAQ,CAAC;AAC1C,iBAAA,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMS,YAAY,CAAC;cACvC,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMU,OAAO,CAACC,WAAW,CAAC;;oBAErC,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAMO,MAAM,CAACK,UAAU,CAAC;AAC7D,CAAC;AAMD,MAAMC,kBAAAA,GAAqBf,uBAAAA,CAAOQ,gBAAAA,CAA6B;;;;AAIzC,sBAAA,EAAE,CAAC,EAAEQ,UAAU,EAAE,GAAMA,UAAAA,GAAa,QAAQ,KAAA,CAAO;;;;;;;AAOzE,CAAC;AAED,MAAMC,eAAAA,GAAkBjB,uBAAAA,CAAOkB,uBAAAA,CAAW;;;;AAI1C,CAAC;AAWD,MAAMC,2BAAaC,gBAAAA,CAAMC,UAAU,CACjC,CAAC,EAAEC,kBAAkB,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,iBAC3CC,cAAA,CAACC,kBAAOC,OAAO,EAAA;QACbH,GAAAA,EAAKA,GAAAA;QACLI,UAAU,EAAA,IAAA;QACVC,OAAO,EAAA,IAAA;QACPC,oBAAAA,EAAsB,CAACC,CAAAA,GAAMA,CAAAA,CAAEC,cAAc,EAAA;QAC7CC,iBAAAA,EAAmB,CAACF,CAAAA,GAAMA,CAAAA,CAAEC,cAAc,EAAA;QAC1CE,0BAAAA,EAA0Bb,kBAAAA;AAE1B,QAAA,QAAA,gBAAAI,cAAA,CAAC3B,eAAAA,EAAAA;YAAgBO,mBAAAA,EAAqBgB,kBAAAA;AAAqB,YAAA,GAAGE,KAAK;AACjE,YAAA,QAAA,gBAAAE,cAAA,CAACnB,aAAAA,EAAAA;AAAegB,gBAAAA,QAAAA,EAAAA;;;;AAKxBJ,UAAAA,CAAWiB,WAAW,GAAG,YAAA;AAYzB,MAAMC,UAAAA,GAAa,CAAC,EAAEC,SAAS,EAAEC,OAAO,EAAEhB,QAAQ,EAAmB,iBACnEG,cAAA,CAACC,iBAAAA,CAAOa,IAAI,EAAA;QACVC,IAAAA,EAAMH,SAAAA;QACNI,YAAAA,EAAc,CAACC,WAAAA,GAAgB,CAACA,WAAAA,IAAeJ,OAAAA,IAAAA;QAC/CK,KAAAA,EAAO,KAAA;gCAEPlB,cAAA,CAACC,kBAAOkB,MAAM,EAAA;AAAEtB,YAAAA,QAAAA,EAAAA;;;AAepB,MAAMuB,uBAAAA,GAA0B,CAAC,EAC/BvB,QAAQ,EACRwB,iBAAAA,GAAoB,IAAI,EACK,iBAC7BrB,cAAA,CAACX,kBAAAA,EAAAA;QAAmBC,UAAAA,EAAY+B,iBAAAA;AAAmBC,QAAAA,gBAAAA,EAAgB,CAACD,iBAAAA;AAClE,QAAA,QAAA,gBAAArB,cAAA,CAACuB,uBAAAA,EAAAA;AAAY1B,YAAAA,QAAAA,EAAAA;;;AAajB,MAAM2B,iBAAAA,GAAoB,CAAC,EAAEX,OAAO,EAAEY,KAAK,EAAE5B,QAAQ,EAA0B,GAAA;IAC7E,MAAM,EAAE6B,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,YAAAA,GAAeH,SAASC,aAAAA,CAAc;QAAEG,EAAAA,EAAI,cAAA;QAAgBC,cAAAA,EAAgB;AAAQ,KAAA,CAAA;AAC1F,IAAA,qBACE9B,cAAA,CAACT,eAAAA,EAAAA;QAAgBwC,OAAAA,EAASlB,OAAAA;QAASY,KAAAA,EAAOG,YAAAA;QAAcI,OAAAA,EAAQ,OAAA;AAC7DnC,QAAAA,QAAAA,EAAAA,QAAAA,kBAAYG,cAAA,CAACiC,WAAAA,EAAAA,EAAAA;;AAGpB,CAAA;AAEA,MAAMC,MAAAA,GAAS;IACbpB,IAAAA,EAAMH,UAAAA;IACNwB,IAAAA,EAAM1C,UAAAA;IACN2C,iBAAAA,EAAmBhB,uBAAAA;IACnBiB,WAAAA,EAAab,iBAAAA;AACbc,IAAAA,KAAAA,EAAOrC,kBAAOqC,KAAK;AACnBC,IAAAA,WAAAA,EAAatC,kBAAOsC;AACtB;;;;;"}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n from {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n flex-direction: column;\n position: fixed;\n bottom: 0;\n right: 0;\n padding: ${({ theme }) => theme.spaces[2]};\n max-width: 100%;\n /* Sit just below the overlay token (300) so that:\n - popovers (500) and tooltips (1000) rendered from descendant components\n surface above the drawer panel,\n - AlertDialog overlays (300) and contents (310) opened from inside the\n drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n z-index: 200;\n overflow: hidden;\n width: ${({ width }) => width ?? '400px'};\n max-height: ${({ maxHeight }) => maxHeight ?? '100vh'};\n\n &:focus {\n outline: none;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n &[data-state='open'] {\n animation: ${({ $animationDirection }) =>\n $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n }\n\n &[data-state='closed'] {\n animation: ${({ $animationDirection }) =>\n $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n pointer-events: none;\n }\n }\n`;\n\nconst DrawerContent = styled(Box)`\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral0};\n border-radius: ${({ theme }) => theme.borderRadius};\n box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n overflow: hidden;\n border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n display: grid;\n flex: 1;\n min-height: 0;\n grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n transition: grid-template-rows 0.3s ease-in-out;\n\n > div {\n overflow: hidden;\n min-height: 0;\n }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n &:hover {\n background: transparent;\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n animationDirection?: 'up' | 'left';\n children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n ({ animationDirection, children, ...props }, ref) => (\n <Dialog.Content\n ref={ref}\n forceMount\n asChild\n onPointerDownOutside={(e) => e.preventDefault()}\n onInteractOutside={(e) => e.preventDefault()}\n data-animation-direction={animationDirection}\n >\n <DrawerContainer $animationDirection={animationDirection} {...props}>\n <DrawerContent>{children}</DrawerContent>\n </DrawerContainer>\n </Dialog.Content>\n )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n isVisible?: boolean;\n onClose?: () => void;\n children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n <Dialog.Root\n open={isVisible}\n onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n modal={false}\n >\n <Dialog.Portal>{children}</Dialog.Portal>\n </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n children: React.ReactNode;\n /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n children,\n isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n <ScrollArea>{children}</ScrollArea>\n </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n onClose: () => void;\n label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n const { formatMessage } = useIntl();\n const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n return (\n <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n {children ?? <Cross />}\n </CloseIconButton>\n );\n};\n\nconst Drawer = {\n Root: DrawerRoot,\n Body: DrawerBody,\n ScrollableContent: DrawerScrollableContent,\n CloseButton: DrawerCloseButton,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}
|
|
@@ -17,13 +17,15 @@ var AssetsTable = require('./components/AssetsTable.js');
|
|
|
17
17
|
var CreateFolderDialog = require('./components/CreateFolderDialog.js');
|
|
18
18
|
var UploadDropZone = require('./components/DropZone/UploadDropZone.js');
|
|
19
19
|
var UploadDropZoneContext = require('./components/DropZone/UploadDropZoneContext.js');
|
|
20
|
+
var FolderTree = require('./components/FolderTree/FolderTree.js');
|
|
20
21
|
var ImportFromUrlDialog = require('./components/ImportFromUrlDialog.js');
|
|
21
22
|
var constants = require('./constants.js');
|
|
22
23
|
var useFolderInfo = require('./hooks/useFolderInfo.js');
|
|
23
24
|
var useFolderNavigation = require('./hooks/useFolderNavigation.js');
|
|
24
25
|
var useInfiniteAssets = require('./hooks/useInfiniteAssets.js');
|
|
25
26
|
|
|
26
|
-
function
|
|
27
|
+
function _interopNamespace(e) {
|
|
28
|
+
if (e && e.__esModule) return e;
|
|
27
29
|
var n = Object.create(null);
|
|
28
30
|
if (e) {
|
|
29
31
|
Object.keys(e).forEach(function (k) {
|
|
@@ -40,7 +42,7 @@ function _interopNamespaceDefault(e) {
|
|
|
40
42
|
return Object.freeze(n);
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
var ToggleGroup__namespace = /*#__PURE__*/
|
|
45
|
+
var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
|
|
44
46
|
|
|
45
47
|
const INTERSECTION_OPTIONS = {
|
|
46
48
|
threshold: 0.1
|
|
@@ -175,7 +177,22 @@ const HeaderWrapper = styledComponents.styled(designSystem.Box)`
|
|
|
175
177
|
const AssetsPage = ()=>{
|
|
176
178
|
const { formatMessage } = reactIntl.useIntl();
|
|
177
179
|
const { openDetails } = AssetDetailsDrawer.useAssetDetailsParam();
|
|
178
|
-
const { currentFolderId } = useFolderNavigation.useFolderNavigation();
|
|
180
|
+
const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation.useFolderNavigation();
|
|
181
|
+
// Deleted or missing folders (404) need a fetch — handled here, not in
|
|
182
|
+
// `useFolderNavigation` (which only strips malformed ?folder= values).
|
|
183
|
+
const { error: currentFolderError } = folders.useGetFolderQuery({
|
|
184
|
+
id: currentFolderId
|
|
185
|
+
}, {
|
|
186
|
+
skip: currentFolderId === null
|
|
187
|
+
});
|
|
188
|
+
React.useEffect(()=>{
|
|
189
|
+
if (currentFolderError?.name === 'NotFoundError') {
|
|
190
|
+
navigateToRoot();
|
|
191
|
+
}
|
|
192
|
+
}, [
|
|
193
|
+
currentFolderError,
|
|
194
|
+
navigateToRoot
|
|
195
|
+
]);
|
|
179
196
|
const { title, itemCount } = useFolderInfo.useFolderInfo(currentFolderId);
|
|
180
197
|
const itemCountLabel = formatMessage({
|
|
181
198
|
id: translations.getTranslationKey('header.content.item-count'),
|
|
@@ -183,6 +200,10 @@ const AssetsPage = ()=>{
|
|
|
183
200
|
}, {
|
|
184
201
|
count: itemCount
|
|
185
202
|
});
|
|
203
|
+
const pageHeaderTitle = title ? `${title} (${itemCountLabel})` : formatMessage({
|
|
204
|
+
id: 'app.loading',
|
|
205
|
+
defaultMessage: 'Loading...'
|
|
206
|
+
});
|
|
186
207
|
const [isCreateFolderDialogOpen, setIsCreateFolderDialogOpen] = React.useState(false);
|
|
187
208
|
// View state
|
|
188
209
|
const [view, setView] = strapiAdmin.usePersistentState(constants.localStorageKeys.view, constants.viewOptions.GRID);
|
|
@@ -250,6 +271,10 @@ const AssetsPage = ()=>{
|
|
|
250
271
|
children: /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
|
|
251
272
|
minHeight: "100vh",
|
|
252
273
|
background: "neutral0",
|
|
274
|
+
sideNav: /*#__PURE__*/ jsxRuntime.jsx(FolderTree.FolderTree, {
|
|
275
|
+
currentFolderId: currentFolderId,
|
|
276
|
+
onSelectFolder: navigateToFolderId
|
|
277
|
+
}),
|
|
253
278
|
children: [
|
|
254
279
|
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
|
|
255
280
|
children: /*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
@@ -261,7 +286,7 @@ const AssetsPage = ()=>{
|
|
|
261
286
|
}),
|
|
262
287
|
/*#__PURE__*/ jsxRuntime.jsx(HeaderWrapper, {
|
|
263
288
|
children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
|
|
264
|
-
title:
|
|
289
|
+
title: pageHeaderTitle,
|
|
265
290
|
primaryAction: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SimpleMenu, {
|
|
266
291
|
popoverPlacement: "bottom-end",
|
|
267
292
|
variant: "default",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetsPage.js","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useRef, useCallback, useState, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport { Layouts, useElementOnScreen, usePersistentState } from '@strapi/admin/strapi-admin';\nimport {\n Box,\n Flex,\n Loader,\n MenuItem,\n SimpleMenu,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, Folder, GridFour as GridIcon, Link, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useUploadFilesMutation, useUploadFromUrlsMutation } from '../../services/api';\nimport { useGetFoldersQuery } from '../../services/folders';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport {\n AssetDetailsDrawer,\n useAssetDetailsParam,\n} from './components/AssetDetails/AssetDetailsDrawer';\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { CreateFolderDialog } from './components/CreateFolderDialog';\nimport { DropFilesMessage, DropZoneWithOverlay } from './components/DropZone/UploadDropZone';\nimport { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext';\nimport { ImportFromUrlDialog } from './components/ImportFromUrlDialog';\nimport { localStorageKeys, viewOptions } from './constants';\nimport { useFolderInfo } from './hooks/useFolderInfo';\nimport { useFolderNavigation } from './hooks/useFolderNavigation';\nimport { useInfiniteAssets } from './hooks/useInfiniteAssets';\n\nimport type { UploadFileInfo } from '../../../../../shared/contracts/files';\n\nconst INTERSECTION_OPTIONS: IntersectionObserverInit = { threshold: 0.1 };\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsView\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsViewProps {\n view: number;\n folderId: number | null;\n onAssetItemClick: (assetId: number) => void;\n}\n\nconst AssetsView = ({ view, folderId, onAssetItemClick }: AssetsViewProps) => {\n const { formatMessage } = useIntl();\n const {\n assets,\n isLoading: isLoadingAssets,\n isFetchingMore,\n hasNextPage,\n fetchNextPage,\n error,\n } = useInfiniteAssets({ folder: folderId });\n const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({\n parentId: folderId,\n });\n\n const isGridView = view === viewOptions.GRID;\n const isLoading = isLoadingAssets || isLoadingFolders;\n\n const loadMoreRef = useElementOnScreen<HTMLDivElement>(\n useCallback(\n (isVisible) => {\n if (isVisible && hasNextPage && !isFetchingMore) {\n fetchNextPage();\n }\n },\n [hasNextPage, isFetchingMore, fetchNextPage]\n ),\n INTERSECTION_OPTIONS\n );\n\n if (isLoading) {\n return (\n <Flex justifyContent=\"center\" padding={8}>\n <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n </Flex>\n );\n }\n\n if (error) {\n return (\n <Box padding={8}>\n <Typography textColor=\"danger600\">\n {formatMessage({\n id: getTranslationKey('list.assets.error'),\n defaultMessage: 'An error occurred while fetching assets.',\n })}\n </Typography>\n </Box>\n );\n }\n\n if (folders.length === 0 && assets.length === 0) {\n return (\n <Box padding={8}>\n <Typography textColor=\"neutral600\">\n {formatMessage({\n id: 'app.components.EmptyStateLayout.content-document',\n defaultMessage: 'No content found',\n })}\n </Typography>\n </Box>\n );\n }\n return (\n <>\n {isGridView ? (\n <AssetsGrid folders={folders} assets={assets} onAssetItemClick={onAssetItemClick} />\n ) : (\n <AssetsTable assets={assets} folders={folders} onAssetItemClick={onAssetItemClick} />\n )}\n <div ref={loadMoreRef} style={{ height: 1 }} />\n {isFetchingMore && (\n <Flex justifyContent=\"center\" padding={4}>\n <Loader>\n {formatMessage({\n id: getTranslationKey('list.assets.loading-more'),\n defaultMessage: 'Loading more assets...',\n })}\n </Loader>\n </Flex>\n )}\n </>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n display: flex;\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]};\n padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n border: none;\n background: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n cursor: pointer;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary100};\n }\n\n &[data-state='on'] {\n background: ${({ theme }) => theme.colors.neutral150};\n }\n\n svg {\n width: 1.6rem;\n height: 1.6rem;\n }\n`;\n\nconst HeaderWrapper = styled(Box)`\n [data-strapi-header] {\n background: ${({ theme }) => theme.colors.neutral0};\n\n h1 {\n font-size: 1.8rem;\n }\n }\n`;\n\nexport const AssetsPage = () => {\n const { formatMessage } = useIntl();\n const { openDetails } = useAssetDetailsParam();\n\n const { currentFolderId } = useFolderNavigation();\n const { title, itemCount } = useFolderInfo(currentFolderId);\n const itemCountLabel = formatMessage(\n {\n id: getTranslationKey('header.content.item-count'),\n defaultMessage: '{count, plural, =1 {# item} other {# items}}',\n },\n { count: itemCount }\n );\n\n const [isCreateFolderDialogOpen, setIsCreateFolderDialogOpen] = useState(false);\n\n // View state\n const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n const isGridView = view === viewOptions.GRID;\n\n // Dialog state\n const [isUrlDialogOpen, setIsUrlDialogOpen] = useState(false);\n\n // Refs\n const fileInputRef = useRef<HTMLInputElement>(null);\n const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n // Upload handlers\n const [uploadFiles] = useUploadFilesMutation();\n const [uploadFromUrls] = useUploadFromUrlsMutation();\n\n const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n if (files.length === 0) return;\n\n const formData = new FormData();\n const fileInfoArray: UploadFileInfo[] = [];\n\n files.forEach((file) => {\n formData.append('files', file);\n fileInfoArray.push({\n name: file.name,\n caption: null,\n alternativeText: null,\n folder: folderId,\n });\n });\n\n formData.append('fileInfo', JSON.stringify(fileInfoArray));\n try {\n await uploadFiles({ formData, totalFiles: files.length }).unwrap();\n } catch (error) {\n // Error is already dispatched to store from the API queryFn\n }\n };\n\n const handleFileSelect = () => {\n fileInputRef.current?.click();\n };\n\n const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n const files = e.target.files;\n if (files && files.length > 0) {\n await uploadFilesToFolder(Array.from(files), currentFolderId);\n }\n e.target.value = '';\n };\n\n const handleDrop = async (files: globalThis.File[]) => {\n await uploadFilesToFolder(files, currentFolderId);\n };\n\n const handleUrlUpload = async (urls: string[]) => {\n try {\n await uploadFromUrls({ urls, folderId: currentFolderId }).unwrap();\n } catch (error) {\n // Error is already dispatched to store from the API queryFn\n }\n };\n\n return (\n <>\n <UploadDropZoneProvider onDrop={handleDrop}>\n <Box ref={uploadDropZoneRef}>\n <Layouts.Root minHeight=\"100vh\" background=\"neutral0\">\n <VisuallyHidden>\n <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n </VisuallyHidden>\n\n <HeaderWrapper>\n <Layouts.Header\n title={`${title} (${itemCountLabel})`}\n primaryAction={\n <SimpleMenu\n popoverPlacement=\"bottom-end\"\n variant=\"default\"\n endIcon={<ChevronDown />}\n label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n >\n <MenuItem\n onSelect={() => setIsCreateFolderDialogOpen(true)}\n startIcon={<Folder />}\n >\n {formatMessage({\n id: getTranslationKey('folder.create.title'),\n defaultMessage: 'New folder',\n })}\n </MenuItem>\n <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n {formatMessage({\n id: getTranslationKey('import-files'),\n defaultMessage: 'Import files',\n })}\n </MenuItem>\n <MenuItem onSelect={() => setIsUrlDialogOpen(true)} startIcon={<Link />}>\n {formatMessage({\n id: getTranslationKey('import-from-url'),\n defaultMessage: 'Import from URL',\n })}\n </MenuItem>\n </SimpleMenu>\n }\n subtitle={\n <Flex justifyContent=\"space-between\" alignItems=\"center\" gap={4} width=\"100%\">\n <Flex gap={4} alignItems=\"center\">\n TODO: Filters and search\n </Flex>\n\n <Flex gap={4} alignItems=\"center\">\n <Box>TODO: Sort</Box>\n <StyledToggleGroup\n type=\"single\"\n value={isGridView ? 'grid' : 'table'}\n onValueChange={(value) =>\n value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n }\n aria-label={formatMessage({\n id: getTranslationKey('view.switch.label'),\n defaultMessage: 'View options',\n })}\n >\n <StyledToggleItem\n value=\"table\"\n aria-label={formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n >\n <List />\n {formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n </StyledToggleItem>\n <StyledToggleItem\n value=\"grid\"\n aria-label={formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n >\n <GridIcon />\n {formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n </StyledToggleItem>\n </StyledToggleGroup>\n </Flex>\n </Flex>\n }\n />\n </HeaderWrapper>\n\n <Layouts.Content>\n <DropZoneWithOverlay>\n <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} folderName={title} />\n <AssetsView view={view} folderId={currentFolderId} onAssetItemClick={openDetails} />\n </DropZoneWithOverlay>\n </Layouts.Content>\n </Layouts.Root>\n </Box>\n </UploadDropZoneProvider>\n <CreateFolderDialog\n open={isCreateFolderDialogOpen}\n folderName={title}\n parentFolderId={currentFolderId}\n onClose={() => setIsCreateFolderDialogOpen(false)}\n />\n <ImportFromUrlDialog\n open={isUrlDialogOpen}\n onClose={() => setIsUrlDialogOpen(false)}\n onUpload={handleUrlUpload}\n />\n <AssetDetailsDrawer />\n </>\n );\n};\n"],"names":["INTERSECTION_OPTIONS","threshold","AssetsView","view","folderId","onAssetItemClick","formatMessage","useIntl","assets","isLoading","isLoadingAssets","isFetchingMore","hasNextPage","fetchNextPage","error","useInfiniteAssets","folder","data","folders","isLoadingFolders","useGetFoldersQuery","parentId","isGridView","viewOptions","GRID","loadMoreRef","useElementOnScreen","useCallback","isVisible","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","length","_jsxs","_Fragment","AssetsGrid","AssetsTable","div","ref","style","height","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","primary100","neutral150","HeaderWrapper","AssetsPage","openDetails","useAssetDetailsParam","currentFolderId","useFolderNavigation","title","itemCount","useFolderInfo","itemCountLabel","count","isCreateFolderDialogOpen","setIsCreateFolderDialogOpen","useState","setView","usePersistentState","localStorageKeys","isUrlDialogOpen","setIsUrlDialogOpen","fileInputRef","useRef","uploadDropZoneRef","uploadFiles","useUploadFilesMutation","uploadFromUrls","useUploadFromUrlsMutation","uploadFilesToFolder","files","formData","FormData","fileInfoArray","forEach","file","append","push","name","caption","alternativeText","JSON","stringify","totalFiles","unwrap","handleFileSelect","current","click","handleFileChange","e","target","Array","from","value","handleDrop","handleUrlUpload","urls","UploadDropZoneProvider","onDrop","Layouts","minHeight","background","VisuallyHidden","input","type","onChange","multiple","Header","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Folder","Files","Link","subtitle","alignItems","gap","width","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay","DropFilesMessage","folderName","CreateFolderDialog","open","parentFolderId","onClose","ImportFromUrlDialog","onUpload","AssetDetailsDrawer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAMA,oBAAAA,GAAiD;IAAEC,SAAAA,EAAW;AAAI,CAAA;AAYxE,MAAMC,UAAAA,GAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,gBAAgB,EAAmB,GAAA;IACvE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EACJC,MAAM,EACNC,SAAAA,EAAWC,eAAe,EAC1BC,cAAc,EACdC,WAAW,EACXC,aAAa,EACbC,KAAK,EACN,GAAGC,mCAAAA,CAAkB;QAAEC,MAAAA,EAAQZ;AAAS,KAAA,CAAA;IACzC,MAAM,EAAEa,MAAMC,SAAAA,GAAU,EAAE,EAAET,SAAAA,EAAWU,gBAAgB,EAAE,GAAGC,0BAAAA,CAAmB;QAC7EC,QAAAA,EAAUjB;AACZ,KAAA,CAAA;IAEA,MAAMkB,UAAAA,GAAanB,IAAAA,KAASoB,qBAAAA,CAAYC,IAAI;AAC5C,IAAA,MAAMf,YAAYC,eAAAA,IAAmBS,gBAAAA;IAErC,MAAMM,WAAAA,GAAcC,8BAAAA,CAClBC,iBAAAA,CACE,CAACC,SAAAA,GAAAA;QACC,IAAIA,SAAAA,IAAahB,WAAAA,IAAe,CAACD,cAAAA,EAAgB;AAC/CE,YAAAA,aAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EACA;AAACD,QAAAA,WAAAA;AAAaD,QAAAA,cAAAA;AAAgBE,QAAAA;KAAc,CAAA,EAE9Cb,oBAAAA,CAAAA;AAGF,IAAA,IAAIS,SAAAA,EAAW;AACb,QAAA,qBACEoB,cAAA,CAACC,iBAAAA,EAAAA;YAAKC,cAAAA,EAAe,QAAA;YAASC,OAAAA,EAAS,CAAA;AACrC,YAAA,QAAA,gBAAAH,cAAA,CAACI,mBAAAA,EAAAA;0BAAQ3B,aAAAA,CAAc;oBAAE4B,EAAAA,EAAI,aAAA;oBAAeC,cAAAA,EAAgB;AAAa,iBAAA;;;AAG/E,IAAA;AAEA,IAAA,IAAIrB,KAAAA,EAAO;AACT,QAAA,qBACEe,cAAA,CAACO,gBAAAA,EAAAA;YAAIJ,OAAAA,EAAS,CAAA;AACZ,YAAA,QAAA,gBAAAH,cAAA,CAACQ,uBAAAA,EAAAA;gBAAWC,SAAAA,EAAU,WAAA;0BACnBhC,aAAAA,CAAc;AACb4B,oBAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,mBAAA,CAAA;oBACtBJ,cAAAA,EAAgB;AAClB,iBAAA;;;AAIR,IAAA;AAEA,IAAA,IAAIjB,UAAQsB,MAAM,KAAK,KAAKhC,MAAAA,CAAOgC,MAAM,KAAK,CAAA,EAAG;AAC/C,QAAA,qBACEX,cAAA,CAACO,gBAAAA,EAAAA;YAAIJ,OAAAA,EAAS,CAAA;AACZ,YAAA,QAAA,gBAAAH,cAAA,CAACQ,uBAAAA,EAAAA;gBAAWC,SAAAA,EAAU,YAAA;0BACnBhC,aAAAA,CAAc;oBACb4B,EAAAA,EAAI,kDAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA;;;AAIR,IAAA;IACA,qBACEM,eAAA,CAAAC,mBAAA,EAAA;;AACGpB,YAAAA,UAAAA,iBACCO,cAAA,CAACc,qBAAAA,EAAAA;gBAAWzB,OAAAA,EAASA,SAAAA;gBAASV,MAAAA,EAAQA,MAAAA;gBAAQH,gBAAAA,EAAkBA;+BAEhEwB,cAAA,CAACe,uBAAAA,EAAAA;gBAAYpC,MAAAA,EAAQA,MAAAA;gBAAQU,OAAAA,EAASA,SAAAA;gBAASb,gBAAAA,EAAkBA;;0BAEnEwB,cAAA,CAACgB,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKrB,WAAAA;gBAAasB,KAAAA,EAAO;oBAAEC,MAAAA,EAAQ;AAAE;;AACzCrC,YAAAA,cAAAA,kBACCkB,cAAA,CAACC,iBAAAA,EAAAA;gBAAKC,cAAAA,EAAe,QAAA;gBAASC,OAAAA,EAAS,CAAA;AACrC,gBAAA,QAAA,gBAAAH,cAAA,CAACI,mBAAAA,EAAAA;8BACE3B,aAAAA,CAAc;AACb4B,wBAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,0BAAA,CAAA;wBACtBJ,cAAAA,EAAgB;AAClB,qBAAA;;;;;AAMZ,CAAA;AAEA;;AAEkG,qGAElG,MAAMc,iBAAAA,GAAoBC,uBAAAA,CAAOC,sBAAAA,CAAYC,IAAI,CAAC;;oBAE9B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;AAC5C,iBAAA,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMG,YAAY,CAAC;;AAErD,CAAC;AAED,MAAMC,gBAAAA,GAAmBP,uBAAAA,CAAOC,sBAAAA,CAAYO,IAAI,CAAC;;;OAG1C,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMM,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,WAAA,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMM,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAEN,KAAAA,CAAMM,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;cAEtD,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACM,QAAQ,CAAC;SAC5C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACO,UAAU,CAAC;;aAErC,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMS,SAAS,CAAC,CAAA,CAAE,CAAC;eAClC,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMU,WAAW,CAACC,QAAQ,CAAC;;;gBAG3C,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACW,UAAU,CAAC;;;;gBAIzC,EAAE,CAAC,EAAEZ,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACY,UAAU,CAAC;;;;;;;AAOzD,CAAC;AAED,MAAMC,aAAAA,GAAgBjB,uBAAAA,CAAOd,gBAAAA,CAAI;;gBAEjB,EAAE,CAAC,EAAEiB,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACM,QAAQ,CAAC;;;;;;AAMvD,CAAC;MAEYQ,UAAAA,GAAa,IAAA;IACxB,MAAM,EAAE9D,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAE8D,WAAW,EAAE,GAAGC,uCAAAA,EAAAA;IAExB,MAAM,EAAEC,eAAe,EAAE,GAAGC,uCAAAA,EAAAA;AAC5B,IAAA,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,2BAAAA,CAAcJ,eAAAA,CAAAA;AAC3C,IAAA,MAAMK,iBAAiBtE,aAAAA,CACrB;AACE4B,QAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,2BAAA,CAAA;QACtBJ,cAAAA,EAAgB;KAClB,EACA;QAAE0C,KAAAA,EAAOH;AAAU,KAAA,CAAA;AAGrB,IAAA,MAAM,CAACI,wBAAAA,EAA0BC,2BAAAA,CAA4B,GAAGC,cAAAA,CAAS,KAAA,CAAA;;IAGzE,MAAM,CAAC7E,MAAM8E,OAAAA,CAAQ,GAAGC,+BAAmBC,0BAAAA,CAAiBhF,IAAI,EAAEoB,qBAAAA,CAAYC,IAAI,CAAA;IAClF,MAAMF,UAAAA,GAAanB,IAAAA,KAASoB,qBAAAA,CAAYC,IAAI;;AAG5C,IAAA,MAAM,CAAC4D,eAAAA,EAAiBC,kBAAAA,CAAmB,GAAGL,cAAAA,CAAS,KAAA,CAAA;;AAGvD,IAAA,MAAMM,eAAeC,YAAAA,CAAyB,IAAA,CAAA;AAC9C,IAAA,MAAMC,oBAAoBD,YAAAA,CAAuB,IAAA,CAAA;;IAGjD,MAAM,CAACE,YAAY,GAAGC,0BAAAA,EAAAA;IACtB,MAAM,CAACC,eAAe,GAAGC,6BAAAA,EAAAA;IAEzB,MAAMC,mBAAAA,GAAsB,OAAOC,KAAAA,EAA0B1F,QAAAA,GAAAA;QAC3D,IAAI0F,KAAAA,CAAMtD,MAAM,KAAK,CAAA,EAAG;AAExB,QAAA,MAAMuD,WAAW,IAAIC,QAAAA,EAAAA;AACrB,QAAA,MAAMC,gBAAkC,EAAE;QAE1CH,KAAAA,CAAMI,OAAO,CAAC,CAACC,IAAAA,GAAAA;YACbJ,QAAAA,CAASK,MAAM,CAAC,OAAA,EAASD,IAAAA,CAAAA;AACzBF,YAAAA,aAAAA,CAAcI,IAAI,CAAC;AACjBC,gBAAAA,IAAAA,EAAMH,KAAKG,IAAI;gBACfC,OAAAA,EAAS,IAAA;gBACTC,eAAAA,EAAiB,IAAA;gBACjBxF,MAAAA,EAAQZ;AACV,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;AAEA2F,QAAAA,QAAAA,CAASK,MAAM,CAAC,UAAA,EAAYK,IAAAA,CAAKC,SAAS,CAACT,aAAAA,CAAAA,CAAAA;QAC3C,IAAI;AACF,YAAA,MAAMR,WAAAA,CAAY;AAAEM,gBAAAA,QAAAA;AAAUY,gBAAAA,UAAAA,EAAYb,MAAMtD;AAAO,aAAA,CAAA,CAAGoE,MAAM,EAAA;AAClE,QAAA,CAAA,CAAE,OAAO9F,KAAAA,EAAO;;AAEhB,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAM+F,gBAAAA,GAAmB,IAAA;AACvBvB,QAAAA,YAAAA,CAAawB,OAAO,EAAEC,KAAAA,EAAAA;AACxB,IAAA,CAAA;AAEA,IAAA,MAAMC,mBAAmB,OAAOC,CAAAA,GAAAA;AAC9B,QAAA,MAAMnB,KAAAA,GAAQmB,CAAAA,CAAEC,MAAM,CAACpB,KAAK;AAC5B,QAAA,IAAIA,KAAAA,IAASA,KAAAA,CAAMtD,MAAM,GAAG,CAAA,EAAG;AAC7B,YAAA,MAAMqD,mBAAAA,CAAoBsB,KAAAA,CAAMC,IAAI,CAACtB,KAAAA,CAAAA,EAAQvB,eAAAA,CAAAA;AAC/C,QAAA;QACA0C,CAAAA,CAAEC,MAAM,CAACG,KAAK,GAAG,EAAA;AACnB,IAAA,CAAA;AAEA,IAAA,MAAMC,aAAa,OAAOxB,KAAAA,GAAAA;AACxB,QAAA,MAAMD,oBAAoBC,KAAAA,EAAOvB,eAAAA,CAAAA;AACnC,IAAA,CAAA;AAEA,IAAA,MAAMgD,kBAAkB,OAAOC,IAAAA,GAAAA;QAC7B,IAAI;AACF,YAAA,MAAM7B,cAAAA,CAAe;AAAE6B,gBAAAA,IAAAA;gBAAMpH,QAAAA,EAAUmE;AAAgB,aAAA,CAAA,CAAGqC,MAAM,EAAA;AAClE,QAAA,CAAA,CAAE,OAAO9F,KAAAA,EAAO;;AAEhB,QAAA;AACF,IAAA,CAAA;IAEA,qBACE2B,eAAA,CAAAC,mBAAA,EAAA;;0BACEb,cAAA,CAAC4F,4CAAAA,EAAAA;gBAAuBC,MAAAA,EAAQJ,UAAAA;AAC9B,gBAAA,QAAA,gBAAAzF,cAAA,CAACO,gBAAAA,EAAAA;oBAAIU,GAAAA,EAAK0C,iBAAAA;4CACR/C,eAAA,CAACkF,oBAAQvE,IAAI,EAAA;wBAACwE,SAAAA,EAAU,OAAA;wBAAQC,UAAAA,EAAW,UAAA;;0CACzChG,cAAA,CAACiG,2BAAAA,EAAAA;AACC,gCAAA,QAAA,gBAAAjG,cAAA,CAACkG,OAAAA,EAAAA;oCAAMC,IAAAA,EAAK,MAAA;oCAAOlF,GAAAA,EAAKwC,YAAAA;oCAAc2C,QAAAA,EAAUjB,gBAAAA;oCAAkBkB,QAAQ,EAAA;;;0CAG5ErG,cAAA,CAACsC,aAAAA,EAAAA;wDACCtC,cAAA,CAAC8F,oBAAQQ,MAAM,EAAA;AACb1D,oCAAAA,KAAAA,EAAO,GAAGA,KAAAA,CAAM,EAAE,EAAEG,cAAAA,CAAe,CAAC,CAAC;AACrCwD,oCAAAA,aAAAA,gBACE3F,eAAA,CAAC4F,uBAAAA,EAAAA;wCACCC,gBAAAA,EAAiB,YAAA;wCACjBC,OAAAA,EAAQ,SAAA;AACRC,wCAAAA,OAAAA,gBAAS3G,cAAA,CAAC4G,iBAAAA,EAAAA,EAAAA,CAAAA;AACVC,wCAAAA,KAAAA,EAAOpI,aAAAA,CAAc;AAAE4B,4CAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,KAAA,CAAA;4CAAQJ,cAAAA,EAAgB;AAAM,yCAAA,CAAA;;0DAE3EN,cAAA,CAAC8G,qBAAAA,EAAAA;AACCC,gDAAAA,QAAAA,EAAU,IAAM7D,2BAAAA,CAA4B,IAAA,CAAA;AAC5C8D,gDAAAA,SAAAA,gBAAWhH,cAAA,CAACiH,YAAAA,EAAAA,EAAAA,CAAAA;0DAEXxI,aAAAA,CAAc;AACb4B,oDAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,qBAAA,CAAA;oDACtBJ,cAAAA,EAAgB;AAClB,iDAAA;;0DAEFN,cAAA,CAAC8G,qBAAAA,EAAAA;gDAASC,QAAAA,EAAU/B,gBAAAA;AAAkBgC,gDAAAA,SAAAA,gBAAWhH,cAAA,CAACkH,WAAAA,EAAAA,EAAAA,CAAAA;0DAC/CzI,aAAAA,CAAc;AACb4B,oDAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,cAAA,CAAA;oDACtBJ,cAAAA,EAAgB;AAClB,iDAAA;;0DAEFN,cAAA,CAAC8G,qBAAAA,EAAAA;AAASC,gDAAAA,QAAAA,EAAU,IAAMvD,kBAAAA,CAAmB,IAAA,CAAA;AAAOwD,gDAAAA,SAAAA,gBAAWhH,cAAA,CAACmH,UAAAA,EAAAA,EAAAA,CAAAA;0DAC7D1I,aAAAA,CAAc;AACb4B,oDAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,iBAAA,CAAA;oDACtBJ,cAAAA,EAAgB;AAClB,iDAAA;;;;AAIN8G,oCAAAA,QAAAA,gBACExG,eAAA,CAACX,iBAAAA,EAAAA;wCAAKC,cAAAA,EAAe,eAAA;wCAAgBmH,UAAAA,EAAW,QAAA;wCAASC,GAAAA,EAAK,CAAA;wCAAGC,KAAAA,EAAM,MAAA;;0DACrEvH,cAAA,CAACC,iBAAAA,EAAAA;gDAAKqH,GAAAA,EAAK,CAAA;gDAAGD,UAAAA,EAAW,QAAA;AAAS,gDAAA,QAAA,EAAA;;0DAIlCzG,eAAA,CAACX,iBAAAA,EAAAA;gDAAKqH,GAAAA,EAAK,CAAA;gDAAGD,UAAAA,EAAW,QAAA;;kEACvBrH,cAAA,CAACO,gBAAAA,EAAAA;AAAI,wDAAA,QAAA,EAAA;;kEACLK,eAAA,CAACQ,iBAAAA,EAAAA;wDACC+E,IAAAA,EAAK,QAAA;AACLX,wDAAAA,KAAAA,EAAO/F,aAAa,MAAA,GAAS,OAAA;wDAC7B+H,aAAAA,EAAe,CAAChC,KAAAA,GACdA,KAAAA,IAASpC,OAAAA,CAAQoC,KAAAA,KAAU,SAAS9F,qBAAAA,CAAYC,IAAI,GAAGD,qBAAAA,CAAY+H,KAAK,CAAA;AAE1EC,wDAAAA,YAAAA,EAAYjJ,aAAAA,CAAc;AACxB4B,4DAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,mBAAA,CAAA;4DACtBJ,cAAAA,EAAgB;AAClB,yDAAA,CAAA;;0EAEAM,eAAA,CAACgB,gBAAAA,EAAAA;gEACC4D,KAAAA,EAAM,OAAA;AACNkC,gEAAAA,YAAAA,EAAYjJ,aAAAA,CAAc;AACxB4B,oEAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,YAAA,CAAA;oEACtBJ,cAAAA,EAAgB;AAClB,iEAAA,CAAA;;kFAEAN,cAAA,CAAC2H,UAAAA,EAAAA,EAAAA,CAAAA;oEACAlJ,aAAAA,CAAc;AACb4B,wEAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,YAAA,CAAA;wEACtBJ,cAAAA,EAAgB;AAClB,qEAAA;;;0EAEFM,eAAA,CAACgB,gBAAAA,EAAAA;gEACC4D,KAAAA,EAAM,MAAA;AACNkC,gEAAAA,YAAAA,EAAYjJ,aAAAA,CAAc;AACxB4B,oEAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,WAAA,CAAA;oEACtBJ,cAAAA,EAAgB;AAClB,iEAAA,CAAA;;kFAEAN,cAAA,CAAC4H,cAAAA,EAAAA,EAAAA,CAAAA;oEACAnJ,aAAAA,CAAc;AACb4B,wEAAAA,EAAAA,EAAIK,8BAAAA,CAAkB,WAAA,CAAA;wEACtBJ,cAAAA,EAAgB;AAClB,qEAAA;;;;;;;;;;;AASd,0CAAAN,cAAA,CAAC8F,oBAAQ+B,OAAO,EAAA;AACd,gCAAA,QAAA,gBAAAjH,eAAA,CAACkH,kCAAAA,EAAAA;;sDACC9H,cAAA,CAAC+H,+BAAAA,EAAAA;4CAAiBpE,iBAAAA,EAAmBA,iBAAAA;4CAAmBqE,UAAAA,EAAYpF;;sDACpE5C,cAAA,CAAC3B,UAAAA,EAAAA;4CAAWC,IAAAA,EAAMA,IAAAA;4CAAMC,QAAAA,EAAUmE,eAAAA;4CAAiBlE,gBAAAA,EAAkBgE;;;;;;;;;0BAM/ExC,cAAA,CAACiI,qCAAAA,EAAAA;gBACCC,IAAAA,EAAMjF,wBAAAA;gBACN+E,UAAAA,EAAYpF,KAAAA;gBACZuF,cAAAA,EAAgBzF,eAAAA;AAChB0F,gBAAAA,OAAAA,EAAS,IAAMlF,2BAAAA,CAA4B,KAAA;;0BAE7ClD,cAAA,CAACqI,uCAAAA,EAAAA;gBACCH,IAAAA,EAAM3E,eAAAA;AACN6E,gBAAAA,OAAAA,EAAS,IAAM5E,kBAAAA,CAAmB,KAAA,CAAA;gBAClC8E,QAAAA,EAAU5C;;0BAEZ1F,cAAA,CAACuI,qCAAAA,EAAAA,EAAAA;;;AAGP;;;;"}
|
|
1
|
+
{"version":3,"file":"AssetsPage.js","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useRef, useCallback, useState, useEffect, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport { Layouts, useElementOnScreen, usePersistentState } from '@strapi/admin/strapi-admin';\nimport {\n Box,\n Flex,\n Loader,\n MenuItem,\n SimpleMenu,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, Folder, GridFour as GridIcon, Link, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useUploadFromUrlsMutation, useUploadFilesMutation } from '../../services/api';\nimport { useGetFolderQuery, useGetFoldersQuery } from '../../services/folders';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport {\n AssetDetailsDrawer,\n useAssetDetailsParam,\n} from './components/AssetDetails/AssetDetailsDrawer';\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { CreateFolderDialog } from './components/CreateFolderDialog';\nimport { DropFilesMessage, DropZoneWithOverlay } from './components/DropZone/UploadDropZone';\nimport { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext';\nimport { FolderTree } from './components/FolderTree/FolderTree';\nimport { ImportFromUrlDialog } from './components/ImportFromUrlDialog';\nimport { localStorageKeys, viewOptions } from './constants';\nimport { useFolderInfo } from './hooks/useFolderInfo';\nimport { useFolderNavigation } from './hooks/useFolderNavigation';\nimport { useInfiniteAssets } from './hooks/useInfiniteAssets';\n\nimport type { UploadFileInfo } from '../../../../../shared/contracts/files';\n\nconst INTERSECTION_OPTIONS: IntersectionObserverInit = { threshold: 0.1 };\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsView\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsViewProps {\n view: number;\n folderId: number | null;\n onAssetItemClick: (assetId: number) => void;\n}\n\nconst AssetsView = ({ view, folderId, onAssetItemClick }: AssetsViewProps) => {\n const { formatMessage } = useIntl();\n const {\n assets,\n isLoading: isLoadingAssets,\n isFetchingMore,\n hasNextPage,\n fetchNextPage,\n error,\n } = useInfiniteAssets({ folder: folderId });\n const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({\n parentId: folderId,\n });\n\n const isGridView = view === viewOptions.GRID;\n const isLoading = isLoadingAssets || isLoadingFolders;\n\n const loadMoreRef = useElementOnScreen<HTMLDivElement>(\n useCallback(\n (isVisible) => {\n if (isVisible && hasNextPage && !isFetchingMore) {\n fetchNextPage();\n }\n },\n [hasNextPage, isFetchingMore, fetchNextPage]\n ),\n INTERSECTION_OPTIONS\n );\n\n if (isLoading) {\n return (\n <Flex justifyContent=\"center\" padding={8}>\n <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n </Flex>\n );\n }\n\n if (error) {\n return (\n <Box padding={8}>\n <Typography textColor=\"danger600\">\n {formatMessage({\n id: getTranslationKey('list.assets.error'),\n defaultMessage: 'An error occurred while fetching assets.',\n })}\n </Typography>\n </Box>\n );\n }\n\n if (folders.length === 0 && assets.length === 0) {\n return (\n <Box padding={8}>\n <Typography textColor=\"neutral600\">\n {formatMessage({\n id: 'app.components.EmptyStateLayout.content-document',\n defaultMessage: 'No content found',\n })}\n </Typography>\n </Box>\n );\n }\n return (\n <>\n {isGridView ? (\n <AssetsGrid folders={folders} assets={assets} onAssetItemClick={onAssetItemClick} />\n ) : (\n <AssetsTable assets={assets} folders={folders} onAssetItemClick={onAssetItemClick} />\n )}\n <div ref={loadMoreRef} style={{ height: 1 }} />\n {isFetchingMore && (\n <Flex justifyContent=\"center\" padding={4}>\n <Loader>\n {formatMessage({\n id: getTranslationKey('list.assets.loading-more'),\n defaultMessage: 'Loading more assets...',\n })}\n </Loader>\n </Flex>\n )}\n </>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n display: flex;\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]};\n padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n border: none;\n background: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n cursor: pointer;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary100};\n }\n\n &[data-state='on'] {\n background: ${({ theme }) => theme.colors.neutral150};\n }\n\n svg {\n width: 1.6rem;\n height: 1.6rem;\n }\n`;\n\nconst HeaderWrapper = styled(Box)`\n [data-strapi-header] {\n background: ${({ theme }) => theme.colors.neutral0};\n\n h1 {\n font-size: 1.8rem;\n }\n }\n`;\n\nexport const AssetsPage = () => {\n const { formatMessage } = useIntl();\n const { openDetails } = useAssetDetailsParam();\n\n const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation();\n // Deleted or missing folders (404) need a fetch — handled here, not in\n // `useFolderNavigation` (which only strips malformed ?folder= values).\n const { error: currentFolderError } = useGetFolderQuery(\n { id: currentFolderId! },\n { skip: currentFolderId === null }\n );\n\n useEffect(() => {\n if (currentFolderError?.name === 'NotFoundError') {\n navigateToRoot();\n }\n }, [currentFolderError, navigateToRoot]);\n const { title, itemCount } = useFolderInfo(currentFolderId);\n const itemCountLabel = formatMessage(\n {\n id: getTranslationKey('header.content.item-count'),\n defaultMessage: '{count, plural, =1 {# item} other {# items}}',\n },\n { count: itemCount }\n );\n const pageHeaderTitle = title\n ? `${title} (${itemCountLabel})`\n : formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' });\n\n const [isCreateFolderDialogOpen, setIsCreateFolderDialogOpen] = useState(false);\n\n // View state\n const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n const isGridView = view === viewOptions.GRID;\n\n // Dialog state\n const [isUrlDialogOpen, setIsUrlDialogOpen] = useState(false);\n\n // Refs\n const fileInputRef = useRef<HTMLInputElement>(null);\n const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n // Upload handlers\n const [uploadFiles] = useUploadFilesMutation();\n const [uploadFromUrls] = useUploadFromUrlsMutation();\n\n const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n if (files.length === 0) return;\n\n const formData = new FormData();\n const fileInfoArray: UploadFileInfo[] = [];\n\n files.forEach((file) => {\n formData.append('files', file);\n fileInfoArray.push({\n name: file.name,\n caption: null,\n alternativeText: null,\n folder: folderId,\n });\n });\n\n formData.append('fileInfo', JSON.stringify(fileInfoArray));\n try {\n await uploadFiles({ formData, totalFiles: files.length }).unwrap();\n } catch (error) {\n // Error is already dispatched to store from the API queryFn\n }\n };\n\n const handleFileSelect = () => {\n fileInputRef.current?.click();\n };\n\n const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n const files = e.target.files;\n if (files && files.length > 0) {\n await uploadFilesToFolder(Array.from(files), currentFolderId);\n }\n e.target.value = '';\n };\n\n const handleDrop = async (files: globalThis.File[]) => {\n await uploadFilesToFolder(files, currentFolderId);\n };\n\n const handleUrlUpload = async (urls: string[]) => {\n try {\n await uploadFromUrls({ urls, folderId: currentFolderId }).unwrap();\n } catch (error) {\n // Error is already dispatched to store from the API queryFn\n }\n };\n\n return (\n <>\n <UploadDropZoneProvider onDrop={handleDrop}>\n <Box ref={uploadDropZoneRef}>\n <Layouts.Root\n minHeight=\"100vh\"\n background=\"neutral0\"\n sideNav={\n <FolderTree currentFolderId={currentFolderId} onSelectFolder={navigateToFolderId} />\n }\n >\n <VisuallyHidden>\n <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n </VisuallyHidden>\n\n <HeaderWrapper>\n <Layouts.Header\n title={pageHeaderTitle}\n primaryAction={\n <SimpleMenu\n popoverPlacement=\"bottom-end\"\n variant=\"default\"\n endIcon={<ChevronDown />}\n label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n >\n <MenuItem\n onSelect={() => setIsCreateFolderDialogOpen(true)}\n startIcon={<Folder />}\n >\n {formatMessage({\n id: getTranslationKey('folder.create.title'),\n defaultMessage: 'New folder',\n })}\n </MenuItem>\n <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n {formatMessage({\n id: getTranslationKey('import-files'),\n defaultMessage: 'Import files',\n })}\n </MenuItem>\n <MenuItem onSelect={() => setIsUrlDialogOpen(true)} startIcon={<Link />}>\n {formatMessage({\n id: getTranslationKey('import-from-url'),\n defaultMessage: 'Import from URL',\n })}\n </MenuItem>\n </SimpleMenu>\n }\n subtitle={\n <Flex justifyContent=\"space-between\" alignItems=\"center\" gap={4} width=\"100%\">\n <Flex gap={4} alignItems=\"center\">\n TODO: Filters and search\n </Flex>\n\n <Flex gap={4} alignItems=\"center\">\n <Box>TODO: Sort</Box>\n <StyledToggleGroup\n type=\"single\"\n value={isGridView ? 'grid' : 'table'}\n onValueChange={(value) =>\n value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n }\n aria-label={formatMessage({\n id: getTranslationKey('view.switch.label'),\n defaultMessage: 'View options',\n })}\n >\n <StyledToggleItem\n value=\"table\"\n aria-label={formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n >\n <List />\n {formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n </StyledToggleItem>\n <StyledToggleItem\n value=\"grid\"\n aria-label={formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n >\n <GridIcon />\n {formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n </StyledToggleItem>\n </StyledToggleGroup>\n </Flex>\n </Flex>\n }\n />\n </HeaderWrapper>\n\n <Layouts.Content>\n <DropZoneWithOverlay>\n <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} folderName={title} />\n <AssetsView view={view} folderId={currentFolderId} onAssetItemClick={openDetails} />\n </DropZoneWithOverlay>\n </Layouts.Content>\n </Layouts.Root>\n </Box>\n </UploadDropZoneProvider>\n <CreateFolderDialog\n open={isCreateFolderDialogOpen}\n folderName={title}\n parentFolderId={currentFolderId}\n onClose={() => setIsCreateFolderDialogOpen(false)}\n />\n <ImportFromUrlDialog\n open={isUrlDialogOpen}\n onClose={() => setIsUrlDialogOpen(false)}\n onUpload={handleUrlUpload}\n />\n <AssetDetailsDrawer />\n </>\n );\n};\n"],"names":["INTERSECTION_OPTIONS","threshold","AssetsView","view","folderId","onAssetItemClick","formatMessage","useIntl","assets","isLoading","isLoadingAssets","isFetchingMore","hasNextPage","fetchNextPage","error","useInfiniteAssets","folder","data","folders","isLoadingFolders","useGetFoldersQuery","parentId","isGridView","viewOptions","GRID","loadMoreRef","useElementOnScreen","useCallback","isVisible","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","length","_jsxs","_Fragment","AssetsGrid","AssetsTable","div","ref","style","height","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","primary100","neutral150","HeaderWrapper","AssetsPage","openDetails","useAssetDetailsParam","currentFolderId","navigateToFolderId","navigateToRoot","useFolderNavigation","currentFolderError","useGetFolderQuery","skip","useEffect","name","title","itemCount","useFolderInfo","itemCountLabel","count","pageHeaderTitle","isCreateFolderDialogOpen","setIsCreateFolderDialogOpen","useState","setView","usePersistentState","localStorageKeys","isUrlDialogOpen","setIsUrlDialogOpen","fileInputRef","useRef","uploadDropZoneRef","uploadFiles","useUploadFilesMutation","uploadFromUrls","useUploadFromUrlsMutation","uploadFilesToFolder","files","formData","FormData","fileInfoArray","forEach","file","append","push","caption","alternativeText","JSON","stringify","totalFiles","unwrap","handleFileSelect","current","click","handleFileChange","e","target","Array","from","value","handleDrop","handleUrlUpload","urls","UploadDropZoneProvider","onDrop","Layouts","minHeight","background","sideNav","FolderTree","onSelectFolder","VisuallyHidden","input","type","onChange","multiple","Header","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Folder","Files","Link","subtitle","alignItems","gap","width","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay","DropFilesMessage","folderName","CreateFolderDialog","open","parentFolderId","onClose","ImportFromUrlDialog","onUpload","AssetDetailsDrawer"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useState, useRef, useCallback } from 'react';
|
|
2
|
+
import { useEffect, useState, useRef, useCallback } from 'react';
|
|
3
3
|
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
4
4
|
import { usePersistentState, Layouts, useElementOnScreen } from '@strapi/admin/strapi-admin';
|
|
5
5
|
import { Box, VisuallyHidden, Flex, SimpleMenu, MenuItem, Loader, Typography } from '@strapi/design-system';
|
|
@@ -7,7 +7,7 @@ import { List, GridFour, Folder, Files, Link, ChevronDown } from '@strapi/icons'
|
|
|
7
7
|
import { useIntl } from 'react-intl';
|
|
8
8
|
import { styled } from 'styled-components';
|
|
9
9
|
import { useUploadFilesMutation, useUploadFromUrlsMutation } from '../../services/api.mjs';
|
|
10
|
-
import { useGetFoldersQuery } from '../../services/folders.mjs';
|
|
10
|
+
import { useGetFolderQuery, useGetFoldersQuery } from '../../services/folders.mjs';
|
|
11
11
|
import { getTranslationKey } from '../../utils/translations.mjs';
|
|
12
12
|
import { useAssetDetailsParam, AssetDetailsDrawer } from './components/AssetDetails/AssetDetailsDrawer.mjs';
|
|
13
13
|
import { AssetsGrid } from './components/AssetsGrid.mjs';
|
|
@@ -15,6 +15,7 @@ import { AssetsTable } from './components/AssetsTable.mjs';
|
|
|
15
15
|
import { CreateFolderDialog } from './components/CreateFolderDialog.mjs';
|
|
16
16
|
import { DropZoneWithOverlay, DropFilesMessage } from './components/DropZone/UploadDropZone.mjs';
|
|
17
17
|
import { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext.mjs';
|
|
18
|
+
import { FolderTree } from './components/FolderTree/FolderTree.mjs';
|
|
18
19
|
import { ImportFromUrlDialog } from './components/ImportFromUrlDialog.mjs';
|
|
19
20
|
import { localStorageKeys, viewOptions } from './constants.mjs';
|
|
20
21
|
import { useFolderInfo } from './hooks/useFolderInfo.mjs';
|
|
@@ -154,7 +155,22 @@ const HeaderWrapper = styled(Box)`
|
|
|
154
155
|
const AssetsPage = ()=>{
|
|
155
156
|
const { formatMessage } = useIntl();
|
|
156
157
|
const { openDetails } = useAssetDetailsParam();
|
|
157
|
-
const { currentFolderId } = useFolderNavigation();
|
|
158
|
+
const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation();
|
|
159
|
+
// Deleted or missing folders (404) need a fetch — handled here, not in
|
|
160
|
+
// `useFolderNavigation` (which only strips malformed ?folder= values).
|
|
161
|
+
const { error: currentFolderError } = useGetFolderQuery({
|
|
162
|
+
id: currentFolderId
|
|
163
|
+
}, {
|
|
164
|
+
skip: currentFolderId === null
|
|
165
|
+
});
|
|
166
|
+
useEffect(()=>{
|
|
167
|
+
if (currentFolderError?.name === 'NotFoundError') {
|
|
168
|
+
navigateToRoot();
|
|
169
|
+
}
|
|
170
|
+
}, [
|
|
171
|
+
currentFolderError,
|
|
172
|
+
navigateToRoot
|
|
173
|
+
]);
|
|
158
174
|
const { title, itemCount } = useFolderInfo(currentFolderId);
|
|
159
175
|
const itemCountLabel = formatMessage({
|
|
160
176
|
id: getTranslationKey('header.content.item-count'),
|
|
@@ -162,6 +178,10 @@ const AssetsPage = ()=>{
|
|
|
162
178
|
}, {
|
|
163
179
|
count: itemCount
|
|
164
180
|
});
|
|
181
|
+
const pageHeaderTitle = title ? `${title} (${itemCountLabel})` : formatMessage({
|
|
182
|
+
id: 'app.loading',
|
|
183
|
+
defaultMessage: 'Loading...'
|
|
184
|
+
});
|
|
165
185
|
const [isCreateFolderDialogOpen, setIsCreateFolderDialogOpen] = useState(false);
|
|
166
186
|
// View state
|
|
167
187
|
const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
|
|
@@ -229,6 +249,10 @@ const AssetsPage = ()=>{
|
|
|
229
249
|
children: /*#__PURE__*/ jsxs(Layouts.Root, {
|
|
230
250
|
minHeight: "100vh",
|
|
231
251
|
background: "neutral0",
|
|
252
|
+
sideNav: /*#__PURE__*/ jsx(FolderTree, {
|
|
253
|
+
currentFolderId: currentFolderId,
|
|
254
|
+
onSelectFolder: navigateToFolderId
|
|
255
|
+
}),
|
|
232
256
|
children: [
|
|
233
257
|
/*#__PURE__*/ jsx(VisuallyHidden, {
|
|
234
258
|
children: /*#__PURE__*/ jsx("input", {
|
|
@@ -240,7 +264,7 @@ const AssetsPage = ()=>{
|
|
|
240
264
|
}),
|
|
241
265
|
/*#__PURE__*/ jsx(HeaderWrapper, {
|
|
242
266
|
children: /*#__PURE__*/ jsx(Layouts.Header, {
|
|
243
|
-
title:
|
|
267
|
+
title: pageHeaderTitle,
|
|
244
268
|
primaryAction: /*#__PURE__*/ jsxs(SimpleMenu, {
|
|
245
269
|
popoverPlacement: "bottom-end",
|
|
246
270
|
variant: "default",
|