From 3ed01773c4c0aab16eab0e4b43208de443d7ba43 Mon Sep 17 00:00:00 2001 From: muerwre Date: Thu, 8 Aug 2019 18:31:55 +0700 Subject: [PATCH] moved funcs to editor from image-editor --- src/components/editors/EditorPanel/index.tsx | 10 +- src/components/editors/ImageEditor/index.tsx | 128 ++---------------- src/components/editors/ImageGrid/index.tsx | 2 - .../editors/ImageUploadButton/styles.scss | 6 +- src/containers/dialogs/EditorDialog/index.tsx | 115 +++++++++++++++- 5 files changed, 129 insertions(+), 132 deletions(-) diff --git a/src/components/editors/EditorPanel/index.tsx b/src/components/editors/EditorPanel/index.tsx index e34da5ff..0ae563e2 100644 --- a/src/components/editors/EditorPanel/index.tsx +++ b/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; } -const EditorPanel: FC = () =>
; +const EditorPanel: FC = ({ onUpload }) => ( +
+ +
+); export { EditorPanel }; diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index 1b0abbfd..454a0b8c 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/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 mapDispatchToProps & { data: INode; + pending_files: IUploadStatus[]; setData: (val: INode) => void; + onFileMove: (o: number, n: number) => void; + onInputChange: ChangeEventHandler; + onDrop: DragEventHandler; } -const ImageEditorUnconnected: FC = ({ 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) => { - 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 = ({ data, onFileMove, onInputChange, onDrop, pending_files }) => { return ( !!statuses[id]).map(id => statuses[id])} + locked={pending_files} onUpload={onInputChange} onDrop={onDrop} /> @@ -110,43 +38,3 @@ const ImageEditorUnconnected: FC = ({ data, setData, uploadUploadFiles, const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected) export { ImageEditor }; - -/* - - - { - data.files.map(file => ( - - )) - } - - -
- { - temp.map(id => ( - statuses[id] && ( - - ) - )) - } - - { - temp.map(id => ( - statuses[id] && ( - - ) - )) - } - - -*/ \ No newline at end of file diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index 897ad7cc..6ee757d4 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -40,8 +40,6 @@ const SortableList = SortableContainer(({ items, locked, onUpload, onDrop }: { i )) } - - ); }); diff --git a/src/components/editors/ImageUploadButton/styles.scss b/src/components/editors/ImageUploadButton/styles.scss index 311da355..5c4d8f5d 100644 --- a/src/components/editors/ImageUploadButton/styles.scss +++ b/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 {} diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 347700ca..1285c4f7 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/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 mapDispatchToProps & {}; -const EditorDialogUnconnected: FC = ({ onRequestClose, editor }) => { +const EditorDialogUnconnected: FC = ({ 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) => { + 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 = ({ onRequestClose, editor }) => { const buttons = ( - + @@ -44,7 +139,15 @@ const EditorDialogUnconnected: FC = ({ onRequestClose, editor }) => { return (
- + !!statuses[id]).map(id => statuses[id])} + onUpload={onInputChange} + onFileMove={onFileMove} + onInputChange={onInputChange} + onDrop={onDrop} + />
);