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

eslint fix

Browse source
This commit is contained in:
muerwre 2019-08-09 12:23:07 +07:00
parent dfaac877fb
commit fa4d51360b
81 changed files with 741 additions and 972 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,11 @@
import React, { FC, ReactChildren, useCallback, ChangeEventHandler, DragEventHandler } 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[];
@ -12,50 +13,52 @@ interface IProps {
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, onUpload, onDrop }: { items: IFile[]; locked: IUploadStatus[]; onUpload: ChangeEventHandler<HTMLInputElement>; onDrop: DragEventHandler<HTMLFormElement> }) => {
return (
const SortableList = SortableContainer(
({
items,
locked,
onDrop
}: {
items: IFile[];
locked: IUploadStatus[];
onUpload: ChangeEventHandler<HTMLInputElement>;
onDrop: DragEventHandler<HTMLFormElement>;
}) => (
<form className={styles.grid} onDrop={onDrop}>
{
items.map((file, index) => (
<SortableItem key={file.id} index={index} collection={0}>
<ImageUpload
id={file.id}
thumb={file.url}
/>
</SortableItem>
))
}
{
locked.map((item, index) => (
<SortableItem key={item.temp_id} index={index} collection={1} disabled>
<ImageUpload
thumb={item.preview}
progress={item.progress}
is_uploading
/>
</SortableItem>
))
}
{items.map((file, index) => (
<SortableItem key={file.id} index={index} collection={0}>
<ImageUpload id={file.id} thumb={file.url} />
</SortableItem>
))}
{locked.map((item, index) => (
<SortableItem key={item.temp_id} index={index} collection={1} disabled>
<ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
</SortableItem>
))}
</form>
);
});
)
);
const ImageGrid: FC<IProps> = ({
items,
locked,
onFileMove,
onUpload,
onDrop,
items, locked, onFileMove, onUpload, onDrop
}) => {
const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]);
return (
<SortableList onSortEnd={onMove} axis="xy" items={items} locked={locked} onUpload={onUpload} onDrop={onDrop} pressDelay={100} />
)
}
<SortableList
onSortEnd={onMove}
axis="xy"
items={items}
locked={locked}
onUpload={onUpload}
onDrop={onDrop}
pressDelay={100}
/>
);
};
export { ImageGrid };
export { ImageGrid };