muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

drop cell

Browse source
This commit is contained in:
muerwre 2019-08-08 18:19:07 +07:00
parent 5bf67309c3
commit 84f73c9cf3
4 changed files with 52 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/editors/ImageGrid/index.tsx
View file

@ -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} />
)
}