drop cell

src/components/editors/ImageEditor/index.tsx

@@ -102,6 +102,8 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
       onFileMove={onFileMove}
       items={data.files}
       locked={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
+      onUpload={onInputChange}
+      onDrop={onDrop}
     />
   );
 };

src/components/editors/ImageGrid/index.tsx

@@ -1,21 +1,24 @@
-import React, { FC, ReactChildren, useCallback } from 'react';
+import React, { FC, ReactChildren, useCallback, ChangeEventHandler, DragEventHandler } 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';
+import { ImageUploadButton } from '~/components/editors/ImageUploadButton';
 
 interface IProps {
   items: IFile[];
   locked: IUploadStatus[];
   onFileMove: (o: number, n: number) => void;
+  onUpload?: ChangeEventHandler<HTMLInputElement>;
+  onDrop: DragEventHandler<HTMLFormElement>;
 };
 
 const SortableItem = SortableElement(({ children }) => <div className={styles.item}>{children}</div>);
 
-const SortableList = SortableContainer(({ items, locked }: { items: IFile[], locked: IUploadStatus[] }) => {
+const SortableList = SortableContainer(({ items, locked, onUpload, onDrop }: { items: IFile[]; locked: IUploadStatus[]; onUpload: ChangeEventHandler<HTMLInputElement>; onDrop: DragEventHandler<HTMLFormElement> }) => {
   return (
-    <div className={styles.grid}>
+    <form className={styles.grid} onDrop={onDrop}>
       {
         items.map((file, index) => (
           <SortableItem key={file.id} index={index} collection={0}>
@@ -37,7 +40,9 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
           </SortableItem>
         ))
       }
-    </div>
+
+      <ImageUploadButton onUpload={onUpload} />
+    </form>
   );
 });
 
@@ -45,11 +50,13 @@ const ImageGrid: FC<IProps> = ({
   items,
   locked,
   onFileMove,
+  onUpload,
+  onDrop,
 }) => {
   const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]);
 
   return (
-    <SortableList onSortEnd={onMove} axis="xy" items={items} locked={locked} />
+    <SortableList onSortEnd={onMove} axis="xy" items={items} locked={locked} onUpload={onUpload} onDrop={onDrop} />
   )
 }
 

src/components/editors/ImageUploadButton/index.tsx

@@ -0,0 +1,16 @@
+import React, { FC, ChangeEventHandler } from 'react';
+import * as styles from './styles.scss';
+
+interface IProps {
+  onUpload?: ChangeEventHandler<HTMLInputElement>;
+};
+
+const ImageUploadButton: FC<IProps> = ({
+  onUpload,
+}) => (
+    <div className={styles.wrap}>
+      <input type="file" onChange={onUpload} />
+    </div>
+  )
+
+export { ImageUploadButton };

src/components/editors/ImageUploadButton/styles.scss

@@ -0,0 +1,22 @@
+.wrap {
+  padding-bottom: 100%;
+  box-shadow: inset lighten($content_bg, 20%) 0 0 0 4px;
+  position: relative;
+  border-radius: $radius;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.5s;
+
+  &:hover {}
+
+  input {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+}