image grid

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;
+}