NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #32 from huytd/main

Browse Source 
fix: make input area auto-resizable
This commit is contained in:
Zaid Mukaddam 2024-12-30 19:01:29 +05:30 committed by GitHub
commit 3b946f9f64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/ui/form-component.tsx
View File

@ -634,8 +634,20 @@ const FormComponent: React.FC<FormComponentProps> = ({
const postSubmitFileInputRef = useRef<HTMLInputElement>(null); const postSubmitFileInputRef = useRef<HTMLInputElement>(null);
const [isFocused, setIsFocused] = useState(false); const [isFocused, setIsFocused] = useState(false);
const autoResizeInput = (target: HTMLTextAreaElement) => {
if (target) {
target.style.height = 'auto'; // trigger recalculate scrollHeight
let additionalLineHeight = 0;
if (target.value) {
additionalLineHeight = parseFloat(window.getComputedStyle(target).lineHeight);
}
target.style.height = `${target.scrollHeight + additionalLineHeight}px`;
}
};
const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => { const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setInput(event.target.value); setInput(event.target.value);
autoResizeInput(event.target);
}; };
const handleFocus = () => { const handleFocus = () => {
@ -800,7 +812,7 @@ const FormComponent: React.FC<FormComponentProps> = ({
onFocus={handleFocus} onFocus={handleFocus}
onBlur={handleBlur} onBlur={handleBlur}
className={cn( className={cn(
"min-h-[40px] max-h-[200px] w-full resize-none rounded-lg", "min-h-[40px] w-full resize-none rounded-lg",
"overflow-y-auto overflow-x-hidden", "overflow-y-auto overflow-x-hidden",
"text-base leading-relaxed", "text-base leading-relaxed",
"bg-neutral-100 dark:bg-neutral-900", "bg-neutral-100 dark:bg-neutral-900",
@ -889,4 +901,4 @@ const FormComponent: React.FC<FormComponentProps> = ({
); );
}; };
export default FormComponent; export default FormComponent;