diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index 7b3eb4cb..e3b7ab1d 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/src/components/editors/ImageEditor/index.tsx @@ -7,6 +7,7 @@ import { selectUploads } from '~/redux/uploads/selectors'; import assocPath from 'ramda/es/assocPath'; import append from 'ramda/es/append'; import { ImageGrid } from '~/components/editors/ImageGrid'; +import { moveArrItem } from '~/utils/fn'; const mapStateToProps = selectUploads; const mapDispatchToProps = { @@ -18,12 +19,14 @@ type IProps = ReturnType & typeof mapDispatchToProps & { setData: (val: INode) => void; } - - 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]); @@ -96,6 +99,7 @@ const ImageEditorUnconnected: FC = ({ data, setData, uploadUploadFiles, return ( !!statuses[id]).map(id => statuses[id])} /> diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index b89392c2..68d64f50 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactChildren } from 'react'; +import React, { FC, ReactChildren, useCallback } from 'react'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import * as styles from './styles.scss'; import { ImageUpload } from '~/components/upload/ImageUpload'; @@ -8,6 +8,7 @@ import { IUploadStatus } from '~/redux/uploads/reducer'; interface IProps { items: IFile[]; locked: IUploadStatus[]; + onFileMove: (o: number, n: number) => void; }; const SortableItem = SortableElement(({ children }) =>
{children}
); @@ -44,11 +45,12 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc const ImageGrid: FC = ({ items, locked, + onFileMove, }) => { - + const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]); return ( - + ) } diff --git a/src/utils/fn.ts b/src/utils/fn.ts new file mode 100644 index 00000000..f84257b9 --- /dev/null +++ b/src/utils/fn.ts @@ -0,0 +1,6 @@ +import curry from 'ramda/es/curry'; +import insert from 'ramda/es/insert'; +import nth from 'ramda/es/nth'; +import remove from 'ramda/es/remove'; + +export const moveArrItem = curry((at, to, list) => insert(to, nth(at, list), remove(at, 1, list))) \ No newline at end of file