binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1072] fix: pages UI improvements (#4294)

Browse source 
* fix: outline alignment

* fix: textarea auto-resize logic
This commit is contained in:
Aaryan Khandelwal 2024-04-26 18:29:18 +05:30 • committed by GitHub
parent f87bb95236
commit ad27184a91
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 25 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/form-fields/textarea.tsx
View file

@ -15,7 +15,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
// refs
const textAreaRef = useRef<any>(ref);
// auto re-size
useAutoResizeTextArea(textAreaRef);
useAutoResizeTextArea(textAreaRef, value);
return (
<textarea

30
packages/ui/src/hooks/use-auto-resize-textarea.ts
View file

@ -1,24 +1,16 @@
import { useEffect } from "react";
import { useLayoutEffect } from "react";
export const useAutoResizeTextArea = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => {
useEffect(() => {
export const useAutoResizeTextArea = (
textAreaRef: React.RefObject<HTMLTextAreaElement>,
value: string | number | readonly string[]
) => {
useLayoutEffect(() => {
const textArea = textAreaRef.current;
if (!textArea) return;
const resizeTextArea = () => {
textArea.style.height = "auto";
const computedHeight = textArea.scrollHeight + "px";
textArea.style.height = computedHeight;
};
const handleInput = () => resizeTextArea();
// resize on mount
resizeTextArea();
textArea.addEventListener("input", handleInput);
return () => {
textArea.removeEventListener("input", handleInput);
};
}, [textAreaRef]);
// We need to reset the height momentarily to get the correct scrollHeight for the textarea
textArea.style.height = "0px";
const scrollHeight = textArea.scrollHeight;
textArea.style.height = scrollHeight + "px";
}, [textAreaRef, value]);
};