made sortable grid component

src/components/editors/ImageGrid/index.tsx

@@ -1,14 +1,9 @@
 import React, { FC, useCallback } from 'react';
 
-import { SortEnd } from 'react-sortable-hoc';
-
-import { OnSortEnd, SortableImageGrid } from '~/components/editors/SortableImageGrid';
+import { SortableImageGrid } from '~/components/sortable';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
 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[];
@@ -19,15 +14,9 @@ interface IProps {
 const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const { innerWidth } = useWindowSize();
 
-  const onMove = useCallback<OnSortEnd>(
-    ({ oldIndex, newIndex }) => {
-      setFiles(
-        moveArrItem(
-          oldIndex,
-          newIndex,
-          files.filter(file => !!file)
-        ) as IFile[]
-      );
+  const onMove = useCallback(
+    (newFiles: IFile[]) => {
+      setFiles(newFiles.filter(it => it));
     },
     [setFiles, files]
   );
@@ -39,7 +28,15 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
     [setFiles, files]
   );
 
-  return <SortableImageGrid onDelete={onDrop} onSortEnd={onMove} items={files} locked={locked} />;
+  return (
+    <SortableImageGrid
+      onDelete={onDrop}
+      onSortEnd={onMove}
+      items={files}
+      locked={locked}
+      size={innerWidth > 768 ? 220 : 160}
+    />
+  );
 };
 
 export { ImageGrid };

src/components/editors/SortableImageGrid/index.tsx

@@ -1,139 +0,0 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
-
-import {
-  closestCenter,
-  DndContext,
-  DragOverlay,
-  DragStartEvent,
-  KeyboardSensor,
-  MouseSensor,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import { DragEndEvent } from '@dnd-kit/core/dist/types';
-import {
-  rectSortingStrategy,
-  SortableContext,
-  sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable';
-import classNames from 'classnames';
-
-import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem';
-import { ImageUpload } from '~/components/upload/ImageUpload';
-import { ImagePresets } from '~/constants/urls';
-import { UploadStatus } from '~/store/uploader/UploaderStore';
-import { IFile } from '~/types';
-import { getURL } from '~/utils/dom';
-
-import styles from './styles.module.scss';
-
-export type OnSortEnd = (props: { oldIndex: number; newIndex: number }) => void;
-
-interface SortableImageGridProps {
-  onSortEnd: OnSortEnd;
-  items: IFile[];
-  locked: UploadStatus[];
-  onDelete: (file_id: IFile['id']) => void;
-  className?: string;
-}
-
-const SortableImageGrid: FC<SortableImageGridProps> = ({
-  items,
-  locked,
-  onDelete,
-  className,
-  onSortEnd,
-}) => {
-  const [draggingItem, setDraggingItem] = useState<IFile | null>(null);
-
-  const preventEvent = useCallback(event => event.preventDefault(), []);
-  const sensors = useSensors(
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        delay: 200,
-        tolerance: 5,
-      },
-    }),
-    useSensor(MouseSensor)
-  );
-
-  const ids = useMemo(() => items.map(it => it.id ?? 0), [items]);
-  const onDragEnd = useCallback(
-    ({ active, over }: DragEndEvent) => {
-      setDraggingItem(null);
-
-      if (active.id === over?.id || !over?.id) {
-        return;
-      }
-
-      const oldIndex = items.findIndex(it => it.id === active.id);
-      const newIndex = items.findIndex(it => it.id === over.id);
-
-      onSortEnd({ oldIndex, newIndex });
-    },
-    [items]
-  );
-
-  const onDragStart = useCallback(
-    ({ active }: DragStartEvent) => {
-      if (!active.id) {
-        return;
-      }
-
-      const activeItem = items.find(it => it.id === active.id);
-
-      setDraggingItem(activeItem ?? null);
-    },
-    [items]
-  );
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={onDragEnd}
-      onDragStart={onDragStart}
-    >
-      <SortableContext items={ids} strategy={rectSortingStrategy}>
-        <div className={classNames(styles.grid, className)} onDropCapture={preventEvent}>
-          {items
-            .filter(file => file && file.id)
-            .map((file, index) => (
-              <SortableImageGridItem
-                key={file.id}
-                id={file.id!}
-                className={file.id === draggingItem?.id ? styles.dragging : undefined}
-              >
-                <ImageUpload
-                  id={file.id}
-                  thumb={getURL(file, ImagePresets.cover)}
-                  onDrop={onDelete}
-                />
-              </SortableImageGridItem>
-            ))}
-
-          {locked.map((item, index) => (
-            <ImageUpload
-              thumb={item.thumbnail}
-              progress={item.progress}
-              is_uploading
-              key={item.id}
-            />
-          ))}
-
-          <DragOverlay>
-            {draggingItem ? (
-              <div className={styles.overlay}>
-                <ImageUpload thumb={getURL(draggingItem, ImagePresets.cover)} />
-              </div>
-            ) : null}
-          </DragOverlay>
-        </div>
-      </SortableContext>
-    </DndContext>
-  );
-};
-
-export { SortableImageGrid };

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

@@ -1,23 +0,0 @@
-@import "src/styles/variables";
-
-.grid {
-  box-sizing: border-box;
-
-  display: grid;
-  grid-column-gap: $gap;
-  grid-row-gap: $gap;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-
-  @media (max-width: 600px) {
-    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
-  }
-}
-
-.overlay {
-  box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px 2px;
-  border-radius: $radius;
-}
-
-.dragging {
-  opacity: 0.1;
-}

src/components/editors/SortableImageGridItem/index.tsx

@@ -1,44 +0,0 @@
-import React, { FC } from 'react';
-
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import classNames from 'classnames';
-
-import styles from './styles.module.scss';
-
-interface SortableImageGridItemProps {
-  id: number;
-  disabled?: boolean;
-  className?: string;
-}
-
-const SortableImageGridItem: FC<SortableImageGridItemProps> = ({
-  children,
-  id,
-  disabled = false,
-  className,
-}) => {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id,
-    disabled,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      className={classNames(styles.item, className)}
-    >
-      {children}
-    </div>
-  );
-};
-
-export { SortableImageGridItem };

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

@@ -1,6 +0,0 @@
-@import "src/styles/variables";
-
-.item {
-  z-index: 1;
-  box-sizing: border-box;
-}