From 5872e7a4574d460ffb4ada9e7d24a207c24b76f7 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 16 Oct 2019 15:40:39 +0700
Subject: [PATCH] moved out image grid components

---
 src/components/editors/ImageGrid/index.tsx    | 39 +------------------
 src/components/editors/ImageGrid/styles.scss  | 28 +------------
 .../editors/SortableImageGrid/index.tsx       | 38 ++++++++++++++++++
 .../editors/SortableImageGrid/styles.scss     | 14 +++++++
 .../editors/SortableImageGridItem/index.tsx   | 10 +++++
 .../editors/SortableImageGridItem/styles.scss |  4 ++
 6 files changed, 69 insertions(+), 64 deletions(-)
 create mode 100644 src/components/editors/SortableImageGrid/index.tsx
 create mode 100644 src/components/editors/SortableImageGrid/styles.scss
 create mode 100644 src/components/editors/SortableImageGridItem/index.tsx
 create mode 100644 src/components/editors/SortableImageGridItem/styles.scss

diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx
index 2c976763..0ead0f6c 100644
--- a/src/components/editors/ImageGrid/index.tsx
+++ b/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) => {
diff --git a/src/components/editors/ImageGrid/styles.scss b/src/components/editors/ImageGrid/styles.scss
index 18c1d269..7ab40804 100644
--- a/src/components/editors/ImageGrid/styles.scss
+++ b/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;
 }
diff --git a/src/components/editors/SortableImageGrid/index.tsx b/src/components/editors/SortableImageGrid/index.tsx
new file mode 100644
index 00000000..26fdd309
--- /dev/null
+++ b/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 };
diff --git a/src/components/editors/SortableImageGrid/styles.scss b/src/components/editors/SortableImageGrid/styles.scss
new file mode 100644
index 00000000..c525238b
--- /dev/null
+++ b/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));
+  }
+}
diff --git a/src/components/editors/SortableImageGridItem/index.tsx b/src/components/editors/SortableImageGridItem/index.tsx
new file mode 100644
index 00000000..6fb94e6e
--- /dev/null
+++ b/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 };
diff --git a/src/components/editors/SortableImageGridItem/styles.scss b/src/components/editors/SortableImageGridItem/styles.scss
new file mode 100644
index 00000000..81fd01cb
--- /dev/null
+++ b/src/components/editors/SortableImageGridItem/styles.scss
@@ -0,0 +1,4 @@
+.item {
+  z-index: 1;
+  box-sizing: border-box;
+}