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

fixed ref forwarding on textareas

Browse source
This commit is contained in:
Fedor Katurov 2022-01-05 16:32:07 +07:00
parent 2b7b756212
commit 140e36b6b7
5 changed files with 58 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,7 +25,7 @@ interface IProps {
}
const CommentForm: FC<IProps> = ({ comment, nodeId, saveComment, onCancelEdit }) => {
const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
const [textarea, setTextArea] = useState<HTMLTextAreaElement | null>(null);
const uploader = useFileUploader(
UPLOAD_SUBJECTS.COMMENT,
UPLOAD_TARGETS.COMMENTS,
@ -55,7 +55,7 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, saveComment, onCancelEdit })
}, [formik]);
const error = formik.status || formik.errors.text;
useInputPasteUpload(textarea, uploader.uploadFiles);
const onPaste = useInputPasteUpload(uploader.uploadFiles);
return (
<UploadDropzone onUpload={uploader.uploadFiles}>
@ -63,7 +63,7 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, saveComment, onCancelEdit })
<FormikProvider value={formik}>
<FileUploaderProvider value={uploader}>
<div className={styles.input}>
<LocalCommentFormTextarea setRef={setTextarea} />
<LocalCommentFormTextarea onPaste={onPaste} ref={setTextArea} />
{!!error && (
<div className={styles.error} onClick={clearError}>

17
src/components/comment/LocalCommentFormTextarea/index.tsx
View file

@ -1,14 +1,18 @@
import React, { FC, KeyboardEventHandler, useCallback } from 'react';
import React, {
forwardRef,
KeyboardEventHandler,
TextareaHTMLAttributes,
useCallback,
} from 'react';
import { Textarea } from '~/components/input/Textarea';
import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
import { useRandomPhrase } from '~/constants/phrases';
interface IProps {
interface IProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
isLoading?: boolean;
setRef?: (r: HTMLTextAreaElement) => void;
}
const LocalCommentFormTextarea: FC<IProps> = ({ setRef }) => {
const LocalCommentFormTextarea = forwardRef<HTMLTextAreaElement, IProps>(({ ...rest }, ref) => {
const { values, handleChange, handleSubmit, isSubmitting } = useCommentFormContext();
const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
@ -22,14 +26,15 @@ const LocalCommentFormTextarea: FC<IProps> = ({ setRef }) => {
return (
<Textarea
{...rest}
ref={ref}
value={values.text}
handler={handleChange('text')}
onKeyDown={onKeyDown}
disabled={isSubmitting}
placeholder={placeholder}
ref={setRef}
/>
);
};
});
export { LocalCommentFormTextarea };