diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index 73e578d1..5eb13eed 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/src/components/editors/ImageEditor/index.tsx @@ -17,16 +17,14 @@ type IProps = ReturnType & pending_files: IUploadStatus[]; setData: (val: INode) => void; - onFileMove: (o: number, n: number) => void; + onFileMove: (from: number, to: number) => void; onInputChange: ChangeEventHandler; - onDrop: DragEventHandler; }; const ImageEditorUnconnected: FC = ({ data, onFileMove, onInputChange, - onDrop, pending_files, }) => ( = ({ items={data.files} locked={pending_files} onUpload={onInputChange} - onDrop={onDrop} /> ); diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index ba57ebd5..137ef5a1 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -1,5 +1,5 @@ import React, { - FC, useCallback, ChangeEventHandler, DragEventHandler + FC, useCallback, ChangeEventHandler, DragEventHandler, } from 'react'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import * as styles from './styles.scss'; @@ -12,10 +12,9 @@ interface IProps { locked: IUploadStatus[]; onFileMove: (o: number, n: number) => void; onUpload?: ChangeEventHandler; - onDrop: DragEventHandler; } -const SortableItem = SortableElement(({ children, }) => ( +const SortableItem = SortableElement(({ children }) => (
{children}
)); @@ -23,14 +22,12 @@ const SortableList = SortableContainer( ({ items, locked, - onDrop, }: { - items: IFile[]; - locked: IUploadStatus[]; - onUpload: ChangeEventHandler; - onDrop: DragEventHandler; + items: IFile[]; + locked: IUploadStatus[]; + onUpload: ChangeEventHandler; }) => ( -
+
{items.map((file, index) => ( @@ -41,15 +38,15 @@ const SortableList = SortableContainer( ))} - +
) ); const ImageGrid: FC = ({ - items, locked, onFileMove, onUpload, onDrop, + items, locked, onFileMove, onUpload, }) => { - const onMove = useCallback(({ oldIndex, newIndex, }) => onFileMove(oldIndex, newIndex), [ - onFileMove + const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [ + onFileMove, ]); return ( @@ -59,7 +56,6 @@ const ImageGrid: FC = ({ items={items} locked={locked} onUpload={onUpload} - onDrop={onDrop} pressDelay={window.innerWidth < 768 ? 200 : 0} helperClass={styles.helper} /> diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 71f2117a..5077bf0b 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/src/containers/dialogs/EditorDialog/index.tsx @@ -1,5 +1,5 @@ import React, { - FC, useState, useCallback, useEffect, + FC, useState, useCallback, useEffect, FormEvent, } from 'react'; import { connect } from 'react-redux'; import assocPath from 'ramda/es/assocPath'; @@ -61,7 +61,7 @@ const EditorDialogUnconnected: FC = ({ ); const onDrop = useCallback( - (event: React.DragEvent) => { + (event: React.DragEvent) => { event.preventDefault(); if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return; @@ -118,8 +118,8 @@ const EditorDialogUnconnected: FC = ({ }; }, [eventPreventer]); - useEffect(() => console.log({ temp }), [temp]); - useEffect(() => console.log({ data }), [data]); + // useEffect(() => console.log({ temp }), [temp]); + // useEffect(() => console.log({ data }), [data]); useEffect(() => { Object.entries(statuses).forEach(([id, status]) => { @@ -137,12 +137,17 @@ const EditorDialogUnconnected: FC = ({ [setData, data] ); + const onSubmit = useCallback((event: FormEvent) => { + event.preventDefault(); + console.log({ data }); + }, [data]); + const buttons = ( - +