File size: 3,257 Bytes
5fc68b0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
'use client';
import * as React from 'react';
import { cn } from '@/lib/utils';
import { useImperativeHandle } from 'react';
interface UseAutosizeTextAreaProps {
textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
minHeight?: number;
maxHeight?: number;
triggerAutoSize: string;
}
export const useAutosizeTextArea = ({
textAreaRef,
triggerAutoSize,
maxHeight = Number.MAX_SAFE_INTEGER,
minHeight = 0,
}: UseAutosizeTextAreaProps) => {
const [init, setInit] = React.useState(true);
React.useEffect(() => {
// We need to reset the height momentarily to get the correct scrollHeight for the textarea
const offsetBorder = 6;
const textAreaElement = textAreaRef.current;
if (textAreaElement) {
if (init) {
textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;
if (maxHeight > minHeight) {
textAreaElement.style.maxHeight = `${maxHeight}px`;
}
setInit(false);
}
textAreaElement.style.height = `${minHeight + offsetBorder}px`;
const scrollHeight = textAreaElement.scrollHeight;
// We then set the height directly, outside of the render loop
// Trying to set this with state or a ref will product an incorrect value.
if (scrollHeight > maxHeight) {
textAreaElement.style.height = `${maxHeight}px`;
} else {
textAreaElement.style.height = `${scrollHeight + offsetBorder}px`;
}
}
}, [textAreaRef.current, triggerAutoSize]);
};
export type AutosizeTextAreaRef = {
textArea: HTMLTextAreaElement;
maxHeight: number;
minHeight: number;
};
type AutosizeTextAreaProps = {
maxHeight?: number;
minHeight?: number;
} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
export const AutosizeTextarea = React.forwardRef<AutosizeTextAreaRef, AutosizeTextAreaProps>(
(
{
maxHeight = Number.MAX_SAFE_INTEGER,
minHeight = 52,
className,
onChange,
value,
...props
}: AutosizeTextAreaProps,
ref: React.Ref<AutosizeTextAreaRef>,
) => {
const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
const [triggerAutoSize, setTriggerAutoSize] = React.useState('');
useAutosizeTextArea({
textAreaRef,
triggerAutoSize: triggerAutoSize,
maxHeight,
minHeight,
});
useImperativeHandle(ref, () => ({
textArea: textAreaRef.current as HTMLTextAreaElement,
focus: () => textAreaRef?.current?.focus(),
maxHeight,
minHeight,
}));
React.useEffect(() => {
setTriggerAutoSize(value as string);
}, [props?.defaultValue, value]);
return (
<textarea
{...props}
value={value}
ref={textAreaRef}
className={cn(
'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
onChange={(e) => {
setTriggerAutoSize(e.target.value);
onChange?.(e);
}}
/>
);
},
);
AutosizeTextarea.displayName = 'AutosizeTextarea';
|