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

fixed editor structure

This commit is contained in:
muerwre 2019-08-21 11:23:15 +07:00
parent c3b444dc9f
commit cad4e683bc
5 changed files with 41 additions and 37 deletions

View file

@ -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<HTMLInputElement>;
onDrop: DragEventHandler<HTMLFormElement>;
}
const SortableItem = SortableElement(({ children, }) => (
const SortableItem = SortableElement(({ children }) => (
<div className={styles.item}>{children}</div>
));
@ -23,14 +22,12 @@ const SortableList = SortableContainer(
({
items,
locked,
onDrop,
}: {
items: IFile[];
locked: IUploadStatus[];
onUpload: ChangeEventHandler<HTMLInputElement>;
onDrop: DragEventHandler<HTMLFormElement>;
items: IFile[];
locked: IUploadStatus[];
onUpload: ChangeEventHandler<HTMLInputElement>;
}) => (
<form className={styles.grid} onDrop={onDrop}>
<div className={styles.grid}>
{items.map((file, index) => (
<SortableItem key={file.id} index={index} collection={0}>
<ImageUpload id={file.id} thumb={file.url} />
@ -41,15 +38,15 @@ const SortableList = SortableContainer(
<ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
</SortableItem>
))}
</form>
</div>
)
);
const ImageGrid: FC<IProps> = ({
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<IProps> = ({
items={items}
locked={locked}
onUpload={onUpload}
onDrop={onDrop}
pressDelay={window.innerWidth < 768 ? 200 : 0}
helperClass={styles.helper}
/>