moved out image grid components

src/components/editors/ImageGrid/index.tsx

@@ -1,15 +1,12 @@
 import React, { FC, useCallback } from 'react';
-import { SortableContainer, SortableElement, SortEvent, SortEnd } from 'react-sortable-hoc';
+import { SortEnd } from 'react-sortable-hoc';
 import * as styles from './styles.scss';
-import { ImageUpload } from '~/components/upload/ImageUpload';
 import { IFile, INode } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
-import { getURL } from '~/utils/dom';
 import assocPath from 'ramda/es/assocPath';
 import { moveArrItem } from '~/utils/fn';
-import omit from 'ramda/es/omit';
-import remove from 'ramda/es/remove';
 import reject from 'ramda/es/reject';
+import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
 
 interface IProps {
   data: INode;
@@ -17,38 +14,6 @@ interface IProps {
   locked: IUploadStatus[];
 }
 
-const SortableImageGridItem = SortableElement(({ children }) => (
-  <div className={styles.item}>{children}</div>
-));
-
-const SortableImageGrid = SortableContainer(
-  ({
-    items,
-    locked,
-    onDrop,
-  }: {
-    items: IFile[];
-    locked: IUploadStatus[];
-    onDrop: (file_id: IFile['id']) => void;
-  }) => (
-    <div className={styles.grid}>
-      {items
-        .filter(file => file && file.id)
-        .map((file, index) => (
-          <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <ImageUpload id={file.id} thumb={getURL(file)} onDrop={onDrop} />
-          </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>
-  )
-);
-
 const ImageGrid: FC<IProps> = ({ data, setData, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {

src/components/editors/ImageGrid/styles.scss

@@ -1,30 +1,4 @@
-.grid {
-  min-height: 200px;
-  padding-bottom: 62px;
-  box-sizing: border-box;
-
-  display: grid;
-  grid-column-gap: $gap;
-  grid-row-gap: $gap;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-
-  // display: flex;
-  // flex-wrap: wrap;
-  @media (max-width: 600px) {
-    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
-  }
-}
-
-.item {
-  // flex: 0 4 25%;
-  // width: 25%;
-  // float: left;
-  // padding: $gap / 2;
-  z-index: 1;
-  box-sizing: border-box;
-}
-
 .helper {
   opacity: 0.5;
-  z-index: 10;
+  z-index: 10 !important;
 }

src/components/editors/SortableImageGrid/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { SortableContainer } from 'react-sortable-hoc';
+import { ImageUpload } from '~/components/upload/ImageUpload';
+import * as styles from './styles.scss';
+import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem';
+import { IFile } from '~/redux/types';
+import { IUploadStatus } from '~/redux/uploads/reducer';
+import { getURL } from '~/utils/dom';
+
+const SortableImageGrid = SortableContainer(
+  ({
+    items,
+    locked,
+    onDrop,
+  }: {
+    items: IFile[];
+    locked: IUploadStatus[];
+    onDrop: (file_id: IFile['id']) => void;
+  }) => (
+    <div className={styles.grid}>
+      {items
+        .filter(file => file && file.id)
+        .map((file, index) => (
+          <SortableImageGridItem key={file.id} index={index} collection={0}>
+            <ImageUpload id={file.id} thumb={getURL(file)} onDrop={onDrop} />
+          </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>
+  )
+);
+
+export { SortableImageGrid };

src/components/editors/SortableImageGrid/styles.scss

@@ -0,0 +1,14 @@
+.grid {
+  min-height: 200px;
+  padding-bottom: 62px;
+  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));
+  }
+}

src/components/editors/SortableImageGridItem/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortableElement } from 'react-sortable-hoc';
+
+import * as styles from './styles.scss';
+
+const SortableImageGridItem = SortableElement(({ children }) => (
+  <div className={styles.item}>{children}</div>
+));
+
+export { SortableImageGridItem };

src/components/editors/SortableImageGridItem/styles.scss

@@ -0,0 +1,4 @@
+.item {
+  z-index: 1;
+  box-sizing: border-box;
+}