Merge branch 'master' into 15-use-cra-or-nextjs

# Conflicts:
#	src/components/node/CommentForm/index.tsx
#	src/utils/node.ts

src/components/editors/AudioGrid/index.tsx

@@ -16,7 +16,13 @@ interface IProps {
 const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]);
+      setFiles(
+        moveArrItem(
+          oldIndex,
+          newIndex,
+          files.filter(file => !!file)
+        ) as IFile[]
+      );
     },
     [setFiles, files]
   );
@@ -41,7 +47,7 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
 
   return (
     <SortableAudioGrid
-      onDrop={onDrop}
+      onDelete={onDrop}
       onTitleChange={onTitleChange}
       onSortEnd={onMove}
       axis="xy"

src/components/editors/ImageGrid/index.tsx

@@ -15,7 +15,13 @@ interface IProps {
 const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]);
+      setFiles(
+        moveArrItem(
+          oldIndex,
+          newIndex,
+          files.filter(file => !!file)
+        ) as IFile[]
+      );
     },
     [setFiles, files]
   );
@@ -29,7 +35,7 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
 
   return (
     <SortableImageGrid
-      onDrop={onDrop}
+      onDelete={onDrop}
       onSortEnd={onMove}
       axis="xy"
       items={files}

src/components/editors/SortableAudioGrid/index.tsx

@@ -11,23 +11,26 @@ const SortableAudioGrid = SortableContainer(
   ({
     items,
     locked,
-    onDrop,
+    onDelete,
     onTitleChange,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
-    onDrop: (file_id: IFile['id']) => void;
+    onDelete: (file_id: IFile['id']) => void;
     onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
   }) => {
-    console.log(locked);
-
     return (
       <div className={styles.grid}>
         {items
           .filter(file => file && file.id)
           .map((file, index) => (
             <SortableAudioGridItem key={file.id} index={index} collection={0}>
-              <AudioPlayer file={file} onDrop={onDrop} onTitleChange={onTitleChange} isEditing />
+              <AudioPlayer
+                file={file}
+                onDelete={onDelete}
+                onTitleChange={onTitleChange}
+                isEditing
+              />
             </SortableAudioGridItem>
           ))}
 

src/components/editors/SortableImageGrid/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import { ImageUpload } from '~/components/upload/ImageUpload';
 import styles from './styles.module.scss';
@@ -12,33 +12,38 @@ const SortableImageGrid = SortableContainer(
   ({
     items,
     locked,
-    onDrop,
+    onDelete,
     size = 200,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
-    onDrop: (file_id: IFile['id']) => void;
+    onDelete: (file_id: IFile['id']) => void;
     size?: number;
-  }) => (
-    <div
-      className={styles.grid}
-      style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
-    >
-      {items
-        .filter(file => file && file.id)
-        .map((file, index) => (
-          <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDrop} />
+  }) => {
+    const preventEvent = useCallback(event => event.preventDefault(), []);
+
+    return (
+      <div
+        className={styles.grid}
+        style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
+        onDropCapture={preventEvent}
+      >
+        {items
+          .filter(file => file && file.id)
+          .map((file, index) => (
+            <SortableImageGridItem key={file.id} index={index} collection={0}>
+              <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDelete} />
+            </SortableImageGridItem>
+          ))}
+
+        {locked.map((item, index) => (
+          <SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
+            <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
           </SortableImageGridItem>
         ))}
-
-      {locked.map((item, index) => (
-        <SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
-          <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
-        </SortableImageGridItem>
-      ))}
-    </div>
-  )
+      </div>
+    );
+  }
 );
 
 export { SortableImageGrid };