added SortableAudioGrid

src/components/editors/AudioGrid/index.tsx

@@ -1,15 +1,8 @@
 import React, { FC, useCallback } from 'react';
 
-import { SortEnd } from 'react-sortable-hoc';
-
-import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
-import { useWindowSize } from '~/hooks/dom/useWindowSize';
+import { SortableAudioGrid } from '~/components/sortable';
 import { UploadStatus } from '~/store/uploader/UploaderStore';
 import { IFile } from '~/types';
-import { moveArrItem } from '~/utils/fn';
-
-import styles from './styles.module.scss';
-
 
 interface IProps {
   files: IFile[];
@@ -18,17 +11,9 @@ interface IProps {
 }
 
 const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
-  const { innerWidth } = useWindowSize();
-
   const onMove = useCallback(
-    ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(
-        moveArrItem(
-          oldIndex,
-          newIndex,
-          files.filter(file => !!file)
-        ) as IFile[]
-      );
+    (newFiles: IFile[]) => {
+      setFiles(newFiles);
     },
     [setFiles, files]
   );
@@ -56,11 +41,8 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
       onDelete={onDrop}
       onTitleChange={onTitleChange}
       onSortEnd={onMove}
-      axis="xy"
       items={files}
       locked={locked}
-      pressDelay={innerWidth < 768 ? 200 : 0}
-      helperClass={styles.helper}
     />
   );
 };

src/components/editors/AudioGrid/styles.module.scss

@@ -1,6 +0,0 @@
-@import "src/styles/variables";
-
-.helper {
-  opacity: 0.5;
-  z-index: 10 !important;
-}

src/components/editors/SortableAudioGrid/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { SortableContainer } from 'react-sortable-hoc';
-
-import { SortableAudioGridItem } from '~/components/editors/SortableAudioGridItem';
-import { AudioPlayer } from '~/components/media/AudioPlayer';
-import { AudioUpload } from '~/components/upload/AudioUpload';
-import { UploadStatus } from '~/store/uploader/UploaderStore';
-import { IFile } from '~/types';
-
-import styles from './styles.module.scss';
-
-const SortableAudioGrid = SortableContainer(
-  ({
-    items,
-    locked,
-    onDelete,
-    onTitleChange,
-  }: {
-    items: IFile[];
-    locked: UploadStatus[];
-    onDelete: (file_id: IFile['id']) => void;
-    onTitleChange: (file_id: IFile['id'], title: string) => void;
-  }) => {
-    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}
-                onDelete={onDelete}
-                onTitleChange={onTitleChange}
-                isEditing
-              />
-            </SortableAudioGridItem>
-          ))}
-
-        {locked.map((item, index) => (
-          <SortableAudioGridItem key={item.id} index={index} collection={1} disabled>
-            <AudioUpload title={item.name} progress={item.progress} is_uploading />
-          </SortableAudioGridItem>
-        ))}
-      </div>
-    );
-  }
-);
-
-export { SortableAudioGrid };

src/components/editors/SortableAudioGrid/styles.module.scss

@@ -1,11 +0,0 @@
-@import "src/styles/variables";
-
-.grid {
-  box-sizing: border-box;
-
-  display: grid;
-  grid-column-gap: $gap;
-  grid-row-gap: $gap;
-  grid-template-columns: auto;
-  grid-template-rows: $comment_height;
-}