feat(media dir nav): synchronous deletion of multiple files

decaporg · Dec 22, 2020 · 391aede · 391aede
1 parent 4089afa
commit 391aede
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 13 deletions.
diff --git a/packages/netlify-cms-backend-github/src/implementation.tsx b/packages/netlify-cms-backend-github/src/implementation.tsx
@@ -451,6 +451,7 @@ export default class GitHub implements Implementation {
         displayURL: { id, path },
         path,
         isDirectory: type === TreeFileType.TREE,
+        hasChildren: files.filter(file => file.path.startsWith(path)).length > 1
       };
     });
     return withDisplayUrls;

diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js
@@ -111,7 +111,7 @@ class MediaLibrary extends React.Component {
   toTableData = files => {
     const tableData =
       files &&
-      files.map(({ key, name, id, size, path, queryOrder, displayURL, draft, isDirectory }) => {
+      files.map(({ key, name, id, size, path, queryOrder, displayURL, draft, isDirectory, hasChildren }) => {
         const ext = fileExtension(name).toLowerCase();
         return {
           key,
@@ -124,6 +124,7 @@ class MediaLibrary extends React.Component {
           displayURL,
           draft,
           isDirectory,
+          hasChildren,
           isImage: IMAGE_EXTENSIONS.includes(ext),
           isViewableImage: IMAGE_EXTENSIONS_VIEWABLE.includes(ext),
         };
@@ -230,16 +231,19 @@ class MediaLibrary extends React.Component {
   /**
    * Removes the selected file from the backend.
    */
-  handleDelete = () => {
-    const { selectedFile } = this.state;
+  handleDelete = async () => {
+    const { selectedAssets } = this.state;
     const { files, deleteMedia, privateUpload, t } = this.props;
     if (!window.confirm(t('mediaLibrary.mediaLibrary.onDelete'))) {
       return;
     }
-    const file = files.find(file => selectedFile.key === file.key);
-    deleteMedia(file, { privateUpload }).then(() => {
-      this.setState({ selectedFile: {} });
-    });
+    const filesToDelete = selectedAssets.map(selectedAsset => 
+      files.find(file => selectedAsset.key === file.key)
+    )
+    for (const file of filesToDelete) {
+      await deleteMedia(file, { privateUpload });
+    }
+    this.setState({ selectedAssets: [] });
   };
 
   /**

diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
@@ -177,7 +177,8 @@ class MediaLibraryCard extends React.Component {
       isViewableImage,
       isDraft,
       isDirectory,
-      size
+      size,
+      hasChildren
     } = this.props;
     const url = displayURL.get('url');
     var cardImageWrapper = (
@@ -192,7 +193,7 @@ class MediaLibraryCard extends React.Component {
     );
     var cardDirectoryEl = (
       <CardDirctoryWrapper>
-        <Icon type="folder" size="xlarge" />
+        <Icon type="folder" size="max" />
       </CardDirctoryWrapper>
     );
     var previewElement = isDirectory ? cardDirectoryEl : cardImageWrapper;
@@ -206,15 +207,17 @@ class MediaLibraryCard extends React.Component {
         tabIndex="-1"
         isPrivate={isPrivate}
       >
-        <CheckboxContainer>
-          <AssetCheckbox type="checkbox" onClick={onChecked} checked={isSelected} readOnly />
-        </CheckboxContainer>
+        {!hasChildren ? (
+          <CheckboxContainer>
+            <AssetCheckbox type="checkbox" onClick={onChecked} checked={isSelected} readOnly />
+          </CheckboxContainer>
+        ) : null}
+
         {previewElement}
         <CardText>
           <ObjectName>{text}</ObjectName>
           {isViewableImage ? <ImageMeta>{type} - {readableFileSize(size)}</ImageMeta> : null}
         </CardText>
-
       </Card>
     );
   }

diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
@@ -62,6 +62,7 @@ const CardWrapper = props => {
         type={file.type}
         isViewableImage={file.isViewableImage}
         isDirectory={file.isDirectory}
+        hasChildren={file.hasChildren}
         size={file.size}
       />
     </div>

diff --git a/packages/netlify-cms-ui-default/src/Icon.js b/packages/netlify-cms-ui-default/src/Icon.js
@@ -49,6 +49,7 @@ const sizes = {
   small: '18px',
   medium: '24px',
   large: '32px',
+  max: '100%',
 };
 
 const Icon = ({ type, direction, size = 'medium', className }) => {