image grid

src/components/editors/ImageEditor/index.tsx

@@ -1,13 +1,12 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import uuid from 'uuid4';
 import { INode, IFileWithUUID, IFile } from '~/redux/types';
-import * as styles from './styles.scss';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { connect } from 'react-redux';
 import { selectUploads } from '~/redux/uploads/selectors';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
-import { ImageUpload } from '~/components/upload/ImageUpload';
+import { ImageGrid } from '~/components/editors/ImageGrid';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -19,6 +18,8 @@ type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
   setData: (val: INode) => void;
 }
 
+
+
 const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles, statuses, files }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
   const [temp, setTemp] = useState([]);
@@ -100,7 +101,19 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
   }, [statuses, files]);
 
   return (
-    <form className={styles.uploads} onDrop={onDrop}>
+    <ImageGrid
+      items={data.files}
+      locked={temp.map(id => statuses[id])}
+    />
+  );
+};
+
+const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected)
+export { ImageEditor };
+
+/*
+
+<SortableList onSortEnd={console.log} axis="xy">
       {
         data.files.map(file => (
           <ImageUpload
@@ -108,7 +121,22 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
           />
         ))
       }
-      {
+    </SortableList>
+
+  <form className={styles.uploads} onDrop={onDrop}>
+  {
+    temp.map(id => (
+      statuses[id] && (
+        <ImageUpload
+          thumb={statuses[id].preview}
+          progress={statuses[id].progress}
+          is_uploading
+        />
+      )
+    ))
+  }
+
+  {
         temp.map(id => (
           statuses[id] && (
             <ImageUpload
@@ -119,11 +147,6 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
           )
         ))
       }
-
-      <input type="file" onChange={onInputChange} accept="image/*" multiple />
-    </form>
-  );
-};
-
-const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected)
-export { ImageEditor };
+  <input type="file" onChange={onInputChange} accept="image/*" multiple />
+</form>
+*/

src/components/editors/ImageGrid/index.tsx

@@ -0,0 +1,42 @@
+import React, { FC, ReactChildren } from 'react';
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+import * as styles from './styles.scss';
+import { ImageUpload } from '~/components/upload/ImageUpload';
+import { IFile } from '~/redux/types';
+import { IUploadStatus } from '~/redux/uploads/reducer';
+
+interface IProps {
+  items: IFile[];
+  locked: IUploadStatus[];
+};
+
+const SortableItem = SortableElement(({ children }) => <div className={styles.item}>{children}</div>);
+
+const SortableList = SortableContainer(({ items, locked }: { items: IFile[], locked: IUploadStatus[] }) => {
+  return (
+    <div className={styles.grid}>
+      {
+        items.map((file, index) => (
+          <SortableItem key={file.id} index={index}>
+            <ImageUpload
+              thumb={file.url}
+            />
+          </SortableItem>
+        ))
+      }
+    </div>
+  );
+});
+
+const ImageGrid: FC<IProps> = ({
+  items,
+  locked,
+}) => {
+
+
+  return (
+    <SortableList onSortEnd={console.log} axis="xy" items={items} locked={locked} />
+  )
+}
+
+export { ImageGrid };

src/components/editors/ImageGrid/styles.scss

@@ -0,0 +1,25 @@
+.grid {
+  min-height: 200px;
+  padding-bottom: 60px;
+  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: 100;
+  box-sizing: border-box;
+}