@strapi/upload 5.34.0 → 5.36.0

package/dist/admin/future/pages/Assets/AssetsPage.mjs

@@ -0,0 +1,321 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { useNotification, useAPIErrorHandler, Layouts, SearchInput } from '@strapi/admin/strapi-admin';
+import { Box, VisuallyHidden, Flex, SimpleMenu, MenuItem, Loader, Typography } from '@strapi/design-system';
+import { ChevronDown, Files, List, GridFour, Folder } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { usePersistentState } from '../../../hooks/usePersistentState.mjs';
+import { useUploadFilesMutation } from '../../services/api.mjs';
+import { useGetAssetsQuery } from '../../services/assets.mjs';
+import { getTranslationKey } from '../../utils/translations.mjs';
+import { AssetsGrid } from './components/AssetsGrid.mjs';
+import { AssetsTable } from './components/AssetsTable.mjs';
+import { DropZoneWithOverlay } from './components/DropZone/DropZoneWithOverlay.mjs';
+import { UploadDropZoneProvider, useUploadDropZone } from './components/DropZone/UploadDropZoneContext.mjs';
+import { viewOptions, localStorageKeys } from './constants.mjs';
+
+const AssetsView = ({ view })=>{
+    const { formatMessage } = useIntl();
+    const { data, isLoading, error } = useGetAssetsQuery({
+        folder: null
+    });
+    const isGridView = view === viewOptions.GRID;
+    const assets = data?.results ?? [];
+    if (isLoading) {
+        return /*#__PURE__*/ jsx(Flex, {
+            justifyContent: "center",
+            padding: 8,
+            children: /*#__PURE__*/ jsx(Loader, {
+                children: formatMessage({
+                    id: 'app.loading',
+                    defaultMessage: 'Loading...'
+                })
+            })
+        });
+    }
+    if (error) {
+        return /*#__PURE__*/ jsx(Box, {
+            padding: 8,
+            children: /*#__PURE__*/ jsx(Typography, {
+                textColor: "danger600",
+                children: formatMessage({
+                    id: getTranslationKey('list.assets.error'),
+                    defaultMessage: 'An error occurred while fetching assets.'
+                })
+            })
+        });
+    }
+    if (isGridView) {
+        return /*#__PURE__*/ jsx(AssetsGrid, {
+            assets: assets
+        });
+    }
+    return /*#__PURE__*/ jsx(AssetsTable, {
+        assets: assets
+    });
+};
+const StyledToggleGroup = styled(ToggleGroup.Root)`
+  display: flex;
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  overflow: hidden;
+`;
+const StyledToggleItem = styled(ToggleGroup.Item)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[4]}`};
+  border: none;
+  background: ${({ theme })=>theme.colors.neutral0};
+  color: ${({ theme })=>theme.colors.neutral800};
+  cursor: pointer;
+  font-size: ${({ theme })=>theme.fontSizes[1]};
+  font-weight: ${({ theme })=>theme.fontWeights.semiBold};
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.neutral100};
+  }
+
+  &[data-state='on'] {
+    background: ${({ theme })=>theme.colors.neutral150};
+  }
+
+  svg {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+`;
+const DropFilesMessage = ({ uploadDropZoneRef })=>{
+    const { formatMessage } = useIntl();
+    const { isDragging } = useUploadDropZone();
+    // Dropzone message position (relative to main content)
+    const [leftContentWidth, setLeftContentWidth] = useState(0);
+    // Calculate the left content width to position the dropzone message correctly
+    useEffect(()=>{
+        if (!uploadDropZoneRef?.current) return;
+        const updateRect = ()=>{
+            const rect = uploadDropZoneRef.current?.getBoundingClientRect();
+            if (rect) {
+                setLeftContentWidth((prev)=>prev !== rect.left ? rect.left : prev);
+            }
+        };
+        updateRect();
+        const resizeObserver = new ResizeObserver(updateRect);
+        resizeObserver.observe(uploadDropZoneRef.current);
+        return ()=>resizeObserver.disconnect();
+    }, [
+        uploadDropZoneRef
+    ]);
+    if (!isDragging) return null;
+    return /*#__PURE__*/ jsxs(DropFilesMessageImpl, {
+        $leftContentWidth: leftContentWidth,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral0",
+                children: formatMessage({
+                    id: getTranslationKey('dropzone.upload.message'),
+                    defaultMessage: 'Drop here to upload to'
+                })
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsx(Folder, {
+                        width: 20,
+                        height: 20,
+                        fill: "neutral0"
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral0",
+                        fontWeight: "semiBold",
+                        children: "Current folder"
+                    })
+                ]
+            })
+        ]
+    });
+};
+const DropFilesMessageImpl = styled(Box)`
+  position: fixed;
+  bottom: ${({ theme })=>theme.spaces[8]};
+  left: 50%;
+  transform: translateX(calc(-50% + ${({ $leftContentWidth })=>$leftContentWidth / 2}px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  background: ${({ theme })=>theme.colors.primary600};
+  padding: ${({ theme })=>theme.spaces[4]} ${({ theme })=>theme.spaces[6]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  z-index: 2;
+`;
+const AssetsPage = ()=>{
+    const { formatMessage } = useIntl();
+    // View state
+    const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
+    const isGridView = view === viewOptions.GRID;
+    // Refs
+    const fileInputRef = useRef(null);
+    const uploadDropZoneRef = useRef(null);
+    // Upload handlers
+    const { toggleNotification } = useNotification();
+    const { _unstableFormatAPIError } = useAPIErrorHandler();
+    const [uploadFiles] = useUploadFilesMutation();
+    const uploadFilesToFolder = async (files, folderId)=>{
+        if (files.length === 0) return;
+        const formData = new FormData();
+        files.forEach((file)=>{
+            formData.append('files', file);
+            formData.append('fileInfo', JSON.stringify({
+                name: file.name,
+                caption: null,
+                alternativeText: null,
+                folder: folderId
+            }));
+        });
+        try {
+            await uploadFiles(formData).unwrap();
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: getTranslationKey('assets.uploaded'),
+                    defaultMessage: '{number, plural, one {# asset} other {# assets}} uploaded successfully'
+                }, {
+                    number: files.length
+                })
+            });
+        } catch (error) {
+            const errorMessage = _unstableFormatAPIError(error);
+            toggleNotification({
+                type: 'danger',
+                message: errorMessage
+            });
+        }
+    };
+    const handleFileSelect = ()=>{
+        fileInputRef.current?.click();
+    };
+    const handleFileChange = async (e)=>{
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            await uploadFilesToFolder(Array.from(files), null);
+        }
+        e.target.value = '';
+    };
+    const handleDrop = async (files)=>{
+        await uploadFilesToFolder(files, null);
+    };
+    return /*#__PURE__*/ jsx(UploadDropZoneProvider, {
+        onDrop: handleDrop,
+        children: /*#__PURE__*/ jsx(Box, {
+            ref: uploadDropZoneRef,
+            children: /*#__PURE__*/ jsxs(Layouts.Root, {
+                minHeight: "100vh",
+                children: [
+                    /*#__PURE__*/ jsx(VisuallyHidden, {
+                        children: /*#__PURE__*/ jsx("input", {
+                            type: "file",
+                            ref: fileInputRef,
+                            onChange: handleFileChange,
+                            multiple: true
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(DropFilesMessage, {
+                        uploadDropZoneRef: uploadDropZoneRef
+                    }),
+                    /*#__PURE__*/ jsx(Layouts.Header, {
+                        navigationAction: /*#__PURE__*/ jsx(Box, {
+                            children: "TODO: Breadcrumbs"
+                        }),
+                        title: "TODO: Folder location",
+                        primaryAction: /*#__PURE__*/ jsxs(Flex, {
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(SimpleMenu, {
+                                    popoverPlacement: "bottom-end",
+                                    variant: "default",
+                                    endIcon: /*#__PURE__*/ jsx(ChevronDown, {}),
+                                    label: formatMessage({
+                                        id: getTranslationKey('new'),
+                                        defaultMessage: 'New'
+                                    }),
+                                    children: /*#__PURE__*/ jsx(MenuItem, {
+                                        onSelect: handleFileSelect,
+                                        startIcon: /*#__PURE__*/ jsx(Files, {}),
+                                        children: formatMessage({
+                                            id: getTranslationKey('import-files'),
+                                            defaultMessage: 'Import files'
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(SearchInput, {
+                                    label: formatMessage({
+                                        id: getTranslationKey('search.label'),
+                                        defaultMessage: 'Search for an asset'
+                                    }),
+                                    trackedEvent: "didSearchMediaLibraryElements",
+                                    trackedEventDetails: {
+                                        location: 'upload'
+                                    }
+                                }),
+                                /*#__PURE__*/ jsxs(StyledToggleGroup, {
+                                    type: "single",
+                                    value: isGridView ? 'grid' : 'table',
+                                    onValueChange: (value)=>value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE),
+                                    "aria-label": formatMessage({
+                                        id: getTranslationKey('view.switch.label'),
+                                        defaultMessage: 'View options'
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ jsxs(StyledToggleItem, {
+                                            value: "table",
+                                            "aria-label": formatMessage({
+                                                id: getTranslationKey('view.table'),
+                                                defaultMessage: 'Table view'
+                                            }),
+                                            children: [
+                                                /*#__PURE__*/ jsx(List, {}),
+                                                formatMessage({
+                                                    id: getTranslationKey('view.table'),
+                                                    defaultMessage: 'Table view'
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs(StyledToggleItem, {
+                                            value: "grid",
+                                            "aria-label": formatMessage({
+                                                id: getTranslationKey('view.grid'),
+                                                defaultMessage: 'Grid view'
+                                            }),
+                                            children: [
+                                                /*#__PURE__*/ jsx(GridFour, {}),
+                                                formatMessage({
+                                                    id: getTranslationKey('view.grid'),
+                                                    defaultMessage: 'Grid view'
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Layouts.Content, {
+                        children: /*#__PURE__*/ jsx(DropZoneWithOverlay, {
+                            children: /*#__PURE__*/ jsx(AssetsView, {
+                                view: view
+                            })
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+export { AssetsPage };
+//# sourceMappingURL=AssetsPage.mjs.map

package/dist/admin/future/pages/Assets/AssetsPage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetsPage.mjs","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport {\n  Layouts,\n  SearchInput,\n  useNotification,\n  useAPIErrorHandler,\n} 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, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { usePersistentState } from '../../../hooks/usePersistentState';\nimport { useUploadFilesMutation } from '../../services/api';\nimport { useGetAssetsQuery } from '../../services/assets';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { DropZoneWithOverlay } from './components/DropZone/DropZoneWithOverlay';\nimport {\n  UploadDropZoneProvider,\n  useUploadDropZone,\n} from './components/DropZone/UploadDropZoneContext';\nimport { localStorageKeys, viewOptions } from './constants';\n\ninterface AssetsViewProps {\n  view: number;\n}\n\nconst AssetsView = ({ view }: AssetsViewProps) => {\n  const { formatMessage } = useIntl();\n  const { data, isLoading, error } = useGetAssetsQuery({ folder: null });\n\n  const isGridView = view === viewOptions.GRID;\n  const assets = data?.results ?? [];\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 (isGridView) {\n    return <AssetsGrid assets={assets} />;\n  }\n\n  return <AssetsTable assets={assets} />;\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.neutral100};\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\n/**\n * Dropzone items\n */\n\ninterface DropFilesMessageProps {\n  uploadDropZoneRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst DropFilesMessage = ({ uploadDropZoneRef }: DropFilesMessageProps) => {\n  const { formatMessage } = useIntl();\n  const { isDragging } = useUploadDropZone();\n\n  // Dropzone message position (relative to main content)\n  const [leftContentWidth, setLeftContentWidth] = useState(0);\n\n  // Calculate the left content width to position the dropzone message correctly\n  useEffect(() => {\n    if (!uploadDropZoneRef?.current) return;\n\n    const updateRect = () => {\n      const rect = uploadDropZoneRef.current?.getBoundingClientRect();\n      if (rect) {\n        setLeftContentWidth((prev) => (prev !== rect.left ? rect.left : prev));\n      }\n    };\n\n    updateRect();\n    const resizeObserver = new ResizeObserver(updateRect);\n    resizeObserver.observe(uploadDropZoneRef.current);\n    return () => resizeObserver.disconnect();\n  }, [uploadDropZoneRef]);\n\n  if (!isDragging) return null;\n\n  return (\n    <DropFilesMessageImpl $leftContentWidth={leftContentWidth}>\n      <Typography textColor=\"neutral0\">\n        {formatMessage({\n          id: getTranslationKey('dropzone.upload.message'),\n          defaultMessage: 'Drop here to upload to',\n        })}\n      </Typography>\n      <Flex gap={2} alignItems=\"center\">\n        <Folder width={20} height={20} fill=\"neutral0\" />\n        <Typography textColor=\"neutral0\" fontWeight=\"semiBold\">\n          Current folder{/* TODO: Replace this later with the current folder name */}\n        </Typography>\n      </Flex>\n    </DropFilesMessageImpl>\n  );\n};\n\nconst DropFilesMessageImpl = styled(Box)<{ $leftContentWidth: number }>`\n  position: fixed;\n  bottom: ${({ theme }) => theme.spaces[8]};\n  left: 50%;\n  transform: translateX(calc(-50% + ${({ $leftContentWidth }) => $leftContentWidth / 2}px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  background: ${({ theme }) => theme.colors.primary600};\n  padding: ${({ theme }) => theme.spaces[4]} ${({ theme }) => theme.spaces[6]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 2;\n`;\n\nexport const AssetsPage = () => {\n  const { formatMessage } = useIntl();\n\n  // View state\n  const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n  const isGridView = view === viewOptions.GRID;\n\n  // Refs\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n  // Upload handlers\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError } = useAPIErrorHandler();\n  const [uploadFiles] = useUploadFilesMutation();\n\n  const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n    if (files.length === 0) return;\n    const formData = new FormData();\n    files.forEach((file) => {\n      formData.append('files', file);\n      formData.append(\n        'fileInfo',\n        JSON.stringify({\n          name: file.name,\n          caption: null,\n          alternativeText: null,\n          folder: folderId,\n        })\n      );\n    });\n    try {\n      await uploadFiles(formData).unwrap();\n      toggleNotification({\n        type: 'success',\n        message: formatMessage(\n          {\n            id: getTranslationKey('assets.uploaded'),\n            defaultMessage:\n              '{number, plural, one {# asset} other {# assets}} uploaded successfully',\n          },\n          { number: files.length }\n        ),\n      });\n    } catch (error) {\n      const errorMessage = _unstableFormatAPIError(error as Error);\n      toggleNotification({\n        type: 'danger',\n        message: errorMessage,\n      });\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), null);\n    }\n    e.target.value = '';\n  };\n\n  const handleDrop = async (files: globalThis.File[]) => {\n    await uploadFilesToFolder(files, null);\n  };\n\n  return (\n    <UploadDropZoneProvider onDrop={handleDrop}>\n      <Box ref={uploadDropZoneRef}>\n        <Layouts.Root minHeight=\"100vh\">\n          <VisuallyHidden>\n            <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n          </VisuallyHidden>\n\n          <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} />\n\n          <Layouts.Header\n            navigationAction={<Box>TODO: Breadcrumbs</Box>}\n            title=\"TODO: Folder location\"\n            primaryAction={\n              <Flex gap={2}>\n                <SimpleMenu\n                  popoverPlacement=\"bottom-end\"\n                  variant=\"default\"\n                  endIcon={<ChevronDown />}\n                  label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n                >\n                  <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n                    {formatMessage({\n                      id: getTranslationKey('import-files'),\n                      defaultMessage: 'Import files',\n                    })}\n                  </MenuItem>\n                </SimpleMenu>\n                <SearchInput\n                  label={formatMessage({\n                    id: getTranslationKey('search.label'),\n                    defaultMessage: 'Search for an asset',\n                  })}\n                  trackedEvent=\"didSearchMediaLibraryElements\"\n                  trackedEventDetails={{ location: 'upload' }}\n                />\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            }\n          />\n\n          <Layouts.Content>\n            <DropZoneWithOverlay>\n              <AssetsView view={view} />\n            </DropZoneWithOverlay>\n          </Layouts.Content>\n        </Layouts.Root>\n      </Box>\n    </UploadDropZoneProvider>\n  );\n};\n"],"names":["AssetsView","view","formatMessage","useIntl","data","isLoading","error","useGetAssetsQuery","folder","isGridView","viewOptions","GRID","assets","results","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","AssetsGrid","AssetsTable","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","neutral100","neutral150","DropFilesMessage","uploadDropZoneRef","isDragging","useUploadDropZone","leftContentWidth","setLeftContentWidth","useState","useEffect","current","updateRect","rect","getBoundingClientRect","prev","left","resizeObserver","ResizeObserver","observe","disconnect","_jsxs","DropFilesMessageImpl","$leftContentWidth","gap","alignItems","Folder","width","height","fill","fontWeight","primary600","AssetsPage","setView","usePersistentState","localStorageKeys","fileInputRef","useRef","toggleNotification","useNotification","_unstableFormatAPIError","useAPIErrorHandler","uploadFiles","useUploadFilesMutation","uploadFilesToFolder","files","folderId","length","formData","FormData","forEach","file","append","JSON","stringify","name","caption","alternativeText","unwrap","type","message","number","errorMessage","handleFileSelect","click","handleFileChange","e","target","Array","from","value","handleDrop","UploadDropZoneProvider","onDrop","ref","Layouts","minHeight","VisuallyHidden","input","onChange","multiple","Header","navigationAction","title","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","SearchInput","trackedEvent","trackedEventDetails","location","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/AssetsGrid.js

@@ -0,0 +1,164 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var enums = require('../../../enums.js');
+var files = require('../../../utils/files.js');
+var getAssetIcon = require('../../../utils/getAssetIcon.js');
+var translations = require('../../../utils/translations.js');
+
+/* -------------------------------------------------------------------------------------------------
+ * AssetsGrid
+ * -----------------------------------------------------------------------------------------------*/ const StyledCard = styledComponents.styled(designSystem.Card)`
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: 8px;
+  overflow: hidden;
+`;
+/* -------------------------------------------------------------------------------------------------
+ * AssetPreview
+ * -----------------------------------------------------------------------------------------------*/ const PreviewContainer = styledComponents.styled(designSystem.Box)`
+  position: relative;
+  width: 100%;
+  padding-bottom: 62.5%;
+  height: 0;
+  overflow: hidden;
+  background: repeating-conic-gradient(
+      ${({ theme })=>theme.colors.neutral100} 0% 25%,
+      transparent 0% 50%
+    )
+    50% / 20px 20px;
+`;
+const StyledImage = styledComponents.styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const IconPreview = styledComponents.styled(designSystem.Flex)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral100};
+`;
+const AssetPreview = ({ asset })=>{
+    const { alternativeText, ext, formats, mime, url } = asset;
+    if (mime?.includes(enums.AssetType.Image)) {
+        const mediaURL = files.prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? files.prefixFileUrlWithBackendUrl(url);
+        if (mediaURL) {
+            return /*#__PURE__*/ jsxRuntime.jsx(PreviewContainer, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(StyledImage, {
+                    src: mediaURL,
+                    alt: alternativeText || ''
+                })
+            });
+        }
+    }
+    const DocIcon = getAssetIcon.getAssetIcon(mime, ext);
+    return /*#__PURE__*/ jsxRuntime.jsx(PreviewContainer, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(IconPreview, {
+            justifyContent: "center",
+            alignItems: "center",
+            children: /*#__PURE__*/ jsxRuntime.jsx(DocIcon, {
+                width: 48,
+                height: 48
+            })
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * AssetCard
+ * -----------------------------------------------------------------------------------------------*/ const StyledCardHeader = styledComponents.styled(designSystem.CardHeader)`
+  border-bottom: none;
+`;
+const CardFooter = styledComponents.styled(designSystem.Flex)`
+  min-width: 0;
+`;
+const FileTypeIcon = styledComponents.styled(designSystem.Flex)`
+  color: ${({ theme })=>theme.colors.neutral600};
+  flex-shrink: 0;
+`;
+const FileName = styledComponents.styled(designSystem.Typography)`
+  flex: 1;
+  min-width: 0;
+`;
+const AssetCard = ({ asset })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const TypeIcon = getAssetIcon.getAssetIcon(asset.mime, asset.ext);
+    return /*#__PURE__*/ jsxRuntime.jsxs(StyledCard, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(StyledCardHeader, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(AssetPreview, {
+                    asset: asset
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardBody, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(CardFooter, {
+                    alignItems: "center",
+                    gap: 2,
+                    paddingTop: 2,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(FileTypeIcon, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(TypeIcon, {
+                                width: 16,
+                                height: 16
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(FileName, {
+                            textColor: "primary800",
+                            ellipsis: true,
+                            children: asset.name
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                            label: formatMessage({
+                                id: translations.getTranslationKey('control-card.more-actions'),
+                                defaultMessage: 'More actions'
+                            }),
+                            variant: "ghost",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(icons.More, {})
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const AssetsGrid = ({ assets })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    if (assets.length === 0) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            padding: 8,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: 'app.components.EmptyStateLayout.content-document',
+                    defaultMessage: 'No content found'
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+        gap: 4,
+        children: assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                col: 3,
+                m: 4,
+                s: 6,
+                xs: 12,
+                direction: "column",
+                alignItems: "stretch",
+                children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard, {
+                    asset: asset
+                })
+            }, asset.id))
+    });
+};
+
+exports.AssetsGrid = AssetsGrid;
+//# sourceMappingURL=AssetsGrid.js.map

package/dist/admin/future/pages/Assets/components/AssetsGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetsGrid.js","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsGrid.tsx"],"sourcesContent":["import {\n  Box,\n  Card,\n  CardBody,\n  CardHeader,\n  Flex,\n  Grid,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\n\nimport type { File } from '../../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsGrid\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledCard = styled(Card)`\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: 8px;\n  overflow: hidden;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AssetPreview\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewContainer = styled(Box)`\n  position: relative;\n  width: 100%;\n  padding-bottom: 62.5%;\n  height: 0;\n  overflow: hidden;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n`;\n\nconst StyledImage = styled.img`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst IconPreview = styled(Flex)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral100};\n`;\n\ninterface AssetPreviewProps {\n  asset: File;\n}\n\nconst AssetPreview = ({ asset }: AssetPreviewProps) => {\n  const { alternativeText, ext, formats, mime, url } = asset;\n\n  if (mime?.includes(AssetType.Image)) {\n    const mediaURL =\n      prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);\n\n    if (mediaURL) {\n      return (\n        <PreviewContainer>\n          <StyledImage src={mediaURL} alt={alternativeText || ''} />\n        </PreviewContainer>\n      );\n    }\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <PreviewContainer>\n      <IconPreview justifyContent=\"center\" alignItems=\"center\">\n        <DocIcon width={48} height={48} />\n      </IconPreview>\n    </PreviewContainer>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetCard\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledCardHeader = styled(CardHeader)`\n  border-bottom: none;\n`;\n\nconst CardFooter = styled(Flex)`\n  min-width: 0;\n`;\n\nconst FileTypeIcon = styled(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  flex-shrink: 0;\n`;\n\nconst FileName = styled(Typography)`\n  flex: 1;\n  min-width: 0;\n`;\n\ninterface AssetCardProps {\n  asset: File;\n}\n\nconst AssetCard = ({ asset }: AssetCardProps) => {\n  const { formatMessage } = useIntl();\n  const TypeIcon = getAssetIcon(asset.mime, asset.ext);\n\n  return (\n    <StyledCard>\n      <StyledCardHeader>\n        <AssetPreview asset={asset} />\n      </StyledCardHeader>\n      <CardBody>\n        <CardFooter alignItems=\"center\" gap={2} paddingTop={2}>\n          <FileTypeIcon>\n            <TypeIcon width={16} height={16} />\n          </FileTypeIcon>\n          <FileName textColor=\"primary800\" ellipsis>\n            {asset.name}\n          </FileName>\n          <IconButton\n            label={formatMessage({\n              id: getTranslationKey('control-card.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            variant=\"ghost\"\n          >\n            <More />\n          </IconButton>\n        </CardFooter>\n      </CardBody>\n    </StyledCard>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsGrid\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsGridProps {\n  assets: File[];\n}\n\nexport const AssetsGrid = ({ assets }: AssetsGridProps) => {\n  const { formatMessage } = useIntl();\n\n  if (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\n  return (\n    <Grid.Root gap={4}>\n      {assets.map((asset) => (\n        <Grid.Item\n          col={3}\n          m={4}\n          s={6}\n          xs={12}\n          key={asset.id}\n          direction=\"column\"\n          alignItems=\"stretch\"\n        >\n          <AssetCard asset={asset} />\n        </Grid.Item>\n      ))}\n    </Grid.Root>\n  );\n};\n"],"names":["StyledCard","styled","Card","theme","colors","neutral200","PreviewContainer","Box","neutral100","StyledImage","img","IconPreview","Flex","neutral500","AssetPreview","asset","alternativeText","ext","formats","mime","url","includes","AssetType","Image","mediaURL","prefixFileUrlWithBackendUrl","thumbnail","_jsx","src","alt","DocIcon","getAssetIcon","justifyContent","alignItems","width","height","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","neutral600","FileName","Typography","AssetCard","formatMessage","useIntl","TypeIcon","_jsxs","CardBody","gap","paddingTop","textColor","ellipsis","name","IconButton","label","id","getTranslationKey","defaultMessage","variant","More","AssetsGrid","assets","length","padding","Grid","Root","map","Item","col","m","s","xs","direction"],"mappings":"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"}