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

added comment form drop zone

This commit is contained in:
Fedor Katurov 2020-11-09 18:44:36 +07:00
parent 63b9781977
commit 62d4e03206
8 changed files with 142 additions and 93 deletions

View file

@ -19,8 +19,6 @@ const SortableAudioGrid = SortableContainer(
onDelete: (file_id: IFile['id']) => void;
onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
}) => {
console.log(locked);
return (
<div className={styles.grid}>
{items

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useCallback } from 'react';
import { SortableContainer } from 'react-sortable-hoc';
import { ImageUpload } from '~/components/upload/ImageUpload';
import styles from './styles.module.scss';
@ -19,26 +19,31 @@ const SortableImageGrid = SortableContainer(
locked: IUploadStatus[];
onDelete: (file_id: IFile['id']) => void;
size?: number;
}) => (
<div
className={styles.grid}
style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
>
{items
.filter(file => file && file.id)
.map((file, index) => (
<SortableImageGridItem key={file.id} index={index} collection={0}>
<ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDelete} />
}) => {
const preventEvent = useCallback(event => event.preventDefault(), []);
return (
<div
className={styles.grid}
style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
onDropCapture={preventEvent}
>
{items
.filter(file => file && file.id)
.map((file, index) => (
<SortableImageGridItem key={file.id} index={index} collection={0}>
<ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDelete} />
</SortableImageGridItem>
))}
{locked.map((item, index) => (
<SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
<ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
</SortableImageGridItem>
))}
{locked.map((item, index) => (
<SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
<ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
</SortableImageGridItem>
))}
</div>
)
</div>
);
}
);
export { SortableImageGrid };