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

made sortable grid component

Browse source
This commit is contained in:
Fedor Katurov 2022-06-24 16:47:38 +07:00
parent 24ab0cb050
commit 3345939670
13 changed files with 243 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,9 @@
import React, { FC, useCallback } from 'react';
import { SortEnd } from 'react-sortable-hoc';
import { OnSortEnd, SortableImageGrid } from '~/components/editors/SortableImageGrid';
import { SortableImageGrid } from '~/components/sortable';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
import { UploadStatus } from '~/store/uploader/UploaderStore';
import { IFile } from '~/types';
import { moveArrItem } from '~/utils/fn';
import styles from './styles.module.scss';
interface IProps {
files: IFile[];
@ -19,15 +14,9 @@ interface IProps {
const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
const { innerWidth } = useWindowSize();
const onMove = useCallback<OnSortEnd>(
({ oldIndex, newIndex }) => {
setFiles(
moveArrItem(
oldIndex,
newIndex,
files.filter(file => !!file)
) as IFile[]
);
const onMove = useCallback(
(newFiles: IFile[]) => {
setFiles(newFiles.filter(it => it));
},
[setFiles, files]
);
@ -39,7 +28,15 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
[setFiles, files]
);
return <SortableImageGrid onDelete={onDrop} onSortEnd={onMove} items={files} locked={locked} />;
return (
<SortableImageGrid
onDelete={onDrop}
onSortEnd={onMove}
items={files}
locked={locked}
size={innerWidth > 768 ? 220 : 160}
/>
);
};
export { ImageGrid };