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

added dropzones for comments and node editors

Browse source
This commit is contained in:
Fedor Katurov 2021-10-05 11:31:21 +07:00
parent fb8ad315c0
commit f10a1fa2d8
23 changed files with 247 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/comment/CommentForm/index.tsx
View file

@ -11,7 +11,7 @@ import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import { IComment, INode } from '~/redux/types';
import { EMPTY_COMMENT } from '~/redux/node/constants';
import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
import { UploadDropzone } from '~/components/upload/UploadDropzone';
import styles from './styles.module.scss';
import { ERROR_LITERAL } from '~/constants/errors';
import { useInputPasteUpload } from '~/utils/hooks/useInputPasteUpload';
@ -50,7 +50,7 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
useInputPasteUpload(textarea, uploader.uploadFiles);
return (
<CommentFormDropzone onUpload={uploader.uploadFiles}>
<UploadDropzone onUpload={uploader.uploadFiles}>
<form onSubmit={formik.handleSubmit} className={styles.wrap}>
<FormikProvider value={formik}>
<FileUploaderProvider value={uploader}>
@ -103,7 +103,7 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
</FileUploaderProvider>
</FormikProvider>
</form>
</CommentFormDropzone>
</UploadDropzone>
);
};

4
src/components/comment/CommentFormAttaches/index.tsx
View file

@ -5,7 +5,7 @@ import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
import { IFile } from '~/redux/types';
import { SortEnd } from 'react-sortable-hoc';
import { moveArrItem } from '~/utils/fn';
import { useDropZone } from '~/utils/hooks';
import { useFileDropZone } from '~/utils/hooks';
import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants';
import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
@ -29,7 +29,7 @@ const CommentFormAttaches: FC = () => {
pending,
]);
const onDrop = useDropZone(uploadFiles, COMMENT_FILE_TYPES);
const onDrop = useFileDropZone(uploadFiles, COMMENT_FILE_TYPES);
const hasImageAttaches = images.length > 0 || pendingImages.length > 0;
const hasAudioAttaches = audios.length > 0 || pendingAudios.length > 0;

14
src/components/comment/CommentFormDropzone/index.tsx
View file

@ -1,14 +0,0 @@
import React, { FC } from 'react';
import { COMMENT_FILE_TYPES } from '~/redux/uploads/constants';
import { useDropZone } from '~/utils/hooks';
interface IProps {
onUpload: (files: File[]) => void;
}
const CommentFormDropzone: FC<IProps> = ({ children, onUpload }) => {
const onDrop = useDropZone(onUpload, COMMENT_FILE_TYPES);
return <div onDropCapture={onDrop}>{children}</div>;
};
export { CommentFormDropzone };