moved funcs to editor from image-editor

src/components/editors/EditorPanel/index.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React, { FC, ChangeEventHandler } from 'react';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
+import { ImageUploadButton } from '~/components/editors/ImageUploadButton';
 
 interface IProps {
   data: INode;
   setData: (val: INode) => void;
+  onUpload: ChangeEventHandler<HTMLInputElement>;
 }
 
-const EditorPanel: FC<IProps> = () => <div className={styles.panel} />;
+const EditorPanel: FC<IProps> = ({ onUpload }) => (
+  <div className={styles.panel}>
+    <ImageUploadButton onUpload={onUpload} />
+  </div>
+);
 
 export { EditorPanel };

src/components/editors/ImageEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState, ChangeEventHandler, DragEventHandler } from 'react';
 import uuid from 'uuid4';
 import { INode, IFileWithUUID, IFile } from '~/redux/types';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
@@ -8,6 +8,7 @@ import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import { moveArrItem } from '~/utils/fn';
+import { IUploadStatus } from '~/redux/uploads/reducer';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -16,92 +17,19 @@ const mapDispatchToProps = {
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
   data: INode;
+  pending_files: IUploadStatus[];
   setData: (val: INode) => void;
+  onFileMove: (o: number, n: number) => void;
+  onInputChange: ChangeEventHandler<HTMLInputElement>;
+  onDrop: DragEventHandler<HTMLFormElement>;
 }
 
-const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles, statuses, files }) => {
-  const eventPreventer = useCallback(event => event.preventDefault(), []);
-  const [temp, setTemp] = useState([]);
-
-  const onFileMove = useCallback((old_index: number, new_index: number) => {
-    setData(assocPath(['files'], moveArrItem(old_index, new_index, data.files), data));
-  }, [data, setData]);
-
-  const onFileAdd = useCallback((file: IFile) => {
-    setData(assocPath(['files'], append(file, data.files), data));
-  }, [data, setData]);
-
-  const onDrop = useCallback(
-    (event: React.DragEvent<HTMLFormElement>) => {
-      event.preventDefault();
-
-      if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return;
-
-      const items: IFileWithUUID[] = Array.from(event.dataTransfer.files).map(
-        (file: File): IFileWithUUID => ({
-          file,
-          temp_id: uuid(),
-          subject: 'editor'
-        })
-      );
-
-      const temps = items.map(file => file.temp_id);
-
-      setTemp([...temp, ...temps]);
-      uploadUploadFiles(items);
-    },
-    [uploadUploadFiles, temp]
-  );
-
-  const onInputChange = useCallback(
-    event => {
-      event.preventDefault();
-
-      if (!event.target.files || !event.target.files.length) return;
-
-      const items: IFileWithUUID[] = Array.from(event.target.files).map(
-        (file: File): IFileWithUUID => ({
-          file,
-          temp_id: uuid(),
-          subject: 'editor'
-        })
-      );
-
-      const temps = items.map(file => file.temp_id);
-
-      setTemp([...temp, ...temps]);
-      uploadUploadFiles(items);
-    },
-    [uploadUploadFiles, temp]
-  );
-
-  useEffect(() => {
-    window.addEventListener('dragover', eventPreventer, false);
-    window.addEventListener('drop', eventPreventer, false);
-
-    return () => {
-      window.removeEventListener('dragover', eventPreventer, false);
-      window.removeEventListener('drop', eventPreventer, false);
-    };
-  }, [eventPreventer]);
-
-  useEffect(() => console.log({ temp }), [temp]);
-  useEffect(() => console.log({ data }), [data]);
-
-  useEffect(() => {
-    Object.entries(statuses).forEach(([id, status]) => {
-      if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
-        onFileAdd(files[status.uuid]);
-        setTemp(temp.filter(el => el !== id));
-      }
-    });
-  }, [statuses, files]);
-
+const ImageEditorUnconnected: FC<IProps> = ({ data, onFileMove, onInputChange, onDrop, pending_files }) => {
   return (
     <ImageGrid
       onFileMove={onFileMove}
       items={data.files}
-      locked={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
+      locked={pending_files}
       onUpload={onInputChange}
       onDrop={onDrop}
     />
@@ -110,43 +38,3 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
 
 const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected)
 export { ImageEditor };
-
-/*
-
-<SortableList onSortEnd={console.log} axis="xy">
-      {
-        data.files.map(file => (
-          <ImageUpload
-            thumb={file.url}
-          />
-        ))
-      }
-    </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
-              thumb={statuses[id].preview}
-              progress={statuses[id].progress}
-              is_uploading
-            />
-          )
-        ))
-      }
-  <input type="file" onChange={onInputChange} accept="image/*" multiple />
-</form>
-*/

src/components/editors/ImageGrid/index.tsx

@@ -40,8 +40,6 @@ const SortableList = SortableContainer(({ items, locked, onUpload, onDrop }: { i
           </SortableItem>
         ))
       }
-
-      <ImageUploadButton onUpload={onUpload} />
     </form>
   );
 });

src/components/editors/ImageUploadButton/styles.scss

@@ -1,11 +1,13 @@
 .wrap {
-  padding-bottom: 100%;
-  box-shadow: inset lighten($content_bg, 20%) 0 0 0 4px;
+  width: 60px;
+  height: 60px;
+  border-radius: 32px !important;
   position: relative;
   border-radius: $radius;
   cursor: pointer;
   opacity: 0.5;
   transition: opacity 0.5s;
+  background: $red_gradient;
 
   &:hover {}
 

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, { FC, useState, useCallback, useEffect } from 'react';
 import { ScrollDialog } from '../ScrollDialog';
 import { IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
@@ -11,14 +11,105 @@ import { connect } from 'react-redux';
 import { selectNode } from '~/redux/node/selectors';
 import { ImageEditor } from '~/components/editors/ImageEditor';
 import { EditorPanel } from '~/components/editors/EditorPanel';
+import assocPath from 'ramda/es/assocPath';
+import append from 'ramda/es/append';
+import { moveArrItem } from '~/utils/fn';
+import { IFile, IFileWithUUID } from '~/redux/types';
+import uuid from 'uuid4';
+import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
+import { selectUploads } from '~/redux/uploads/selectors';
 
-const mapStateToProps = selectNode;
-const mapDispatchToProps = {};
+const mapStateToProps = state => {
+  const { editor } = selectNode(state);
+  const { statuses, files } = selectUploads(state);
+
+  return { editor, statuses, files };
+};
+
+const mapDispatchToProps = {
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
+};
 
 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
+const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, uploadUploadFiles, files, statuses }) => {
   const [data, setData] = useState(editor);
+  const eventPreventer = useCallback(event => event.preventDefault(), []);
+  const [temp, setTemp] = useState([]);
+
+  const onFileMove = useCallback((old_index: number, new_index: number) => {
+    setData(assocPath(['files'], moveArrItem(old_index, new_index, data.files), data));
+  }, [data, setData]);
+
+  const onFileAdd = useCallback((file: IFile) => {
+    setData(assocPath(['files'], append(file, data.files), data));
+  }, [data, setData]);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent<HTMLFormElement>) => {
+      event.preventDefault();
+
+      if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return;
+
+      const items: IFileWithUUID[] = Array.from(event.dataTransfer.files).map(
+        (file: File): IFileWithUUID => ({
+          file,
+          temp_id: uuid(),
+          subject: 'editor'
+        })
+      );
+
+      const temps = items.map(file => file.temp_id);
+
+      setTemp([...temp, ...temps]);
+      uploadUploadFiles(items);
+    },
+    [uploadUploadFiles, temp]
+  );
+
+  const onInputChange = useCallback(
+    event => {
+      event.preventDefault();
+
+      if (!event.target.files || !event.target.files.length) return;
+
+      const items: IFileWithUUID[] = Array.from(event.target.files).map(
+        (file: File): IFileWithUUID => ({
+          file,
+          temp_id: uuid(),
+          subject: 'editor'
+        })
+      );
+
+      const temps = items.map(file => file.temp_id);
+
+      setTemp([...temp, ...temps]);
+      uploadUploadFiles(items);
+    },
+    [uploadUploadFiles, temp]
+  );
+
+  useEffect(() => {
+    window.addEventListener('dragover', eventPreventer, false);
+    window.addEventListener('drop', eventPreventer, false);
+
+    return () => {
+      window.removeEventListener('dragover', eventPreventer, false);
+      window.removeEventListener('drop', eventPreventer, false);
+    };
+  }, [eventPreventer]);
+
+  useEffect(() => console.log({ temp }), [temp]);
+  useEffect(() => console.log({ data }), [data]);
+
+  useEffect(() => {
+    Object.entries(statuses).forEach(([id, status]) => {
+      if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
+        onFileAdd(files[status.uuid]);
+        setTemp(temp.filter(el => el !== id));
+      }
+    });
+  }, [statuses, files]);
 
   const setTitle = useCallback(
     title => {
@@ -29,7 +120,11 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
 
   const buttons = (
     <Padder style={{ position: 'relative' }}>
-      <EditorPanel data={data} setData={setData} />
+      <EditorPanel
+        data={data}
+        setData={setData}
+        onUpload={onInputChange}
+      />
 
       <Group horizontal>
         <InputText title="Название" value={data.title} handler={setTitle} />
@@ -44,7 +139,15 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
   return (
     <ScrollDialog buttons={buttons} width={860} onClose={onRequestClose}>
       <div className={styles.editor}>
-        <ImageEditor data={data} setData={setData} />
+        <ImageEditor
+          data={data}
+          setData={setData}
+          pending_files={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
+          onUpload={onInputChange}
+          onFileMove={onFileMove}
+          onInputChange={onInputChange}
+          onDrop={onDrop}
+        />
       </div>
     </ScrollDialog>
   );