image grid

package-lock.json

@@ -14269,6 +14269,16 @@
         "shallowequal": "^1.0.2"
       }
     },
+    "react-sortable-hoc": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz",
+      "integrity": "sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.5.7"
+      }
+    },
     "react-stack-grid": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/react-stack-grid/-/react-stack-grid-0.7.1.tgz",

package.json

@@ -93,6 +93,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scrollbar": "^0.5.4",
+    "react-sortable-hoc": "^1.9.1",
     "react-stack-grid": "^0.7.1",
     "redux": "^4.0.1",
     "redux-persist": "^5.10.0",

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,6 +121,9 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
           />
         ))
       }
+    </SortableList>
+
+  <form className={styles.uploads} onDrop={onDrop}>
   {
     temp.map(id => (
       statuses[id] && (
@@ -120,10 +136,17 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
     ))
   }
 
+  {
+        temp.map(id => (
+          statuses[id] && (
+            <ImageUpload
+              thumb={statuses[id].preview}
+              progress={statuses[id].progress}
+              is_uploading
+            />
+          )
+        ))
+      }
   <input type="file" onChange={onInputChange} accept="image/*" multiple />
-    </form>
-  );
-};
-
-const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected)
-export { ImageEditor };
+</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;
+}

src/components/upload/ImageUpload/styles.scss

@@ -30,6 +30,7 @@
   border-radius: $radius;
   background: no-repeat 50% 50%;
   background-size: cover;
+  opacity: 0;
 }
 
 .progress {

src/redux/node/reducer.ts

@@ -19,7 +19,19 @@ const INITIAL_STATE: INodeState = {
     blocks: [
       { ...EMPTY_BLOCK, type: 'image' },
     ],
-    files: [{ ...EMPTY_FILE, id: uuid() }, { ...EMPTY_FILE, id: uuid() }]
+    files: [
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+      { ...EMPTY_FILE, id: uuid() },
+    ]
   },
   is_loading: false,
   error: null,