fda0a6791f
* style: project select dropdown ui improvement * style: create/update cycle modal ui improvement * style: create/update module modal ui improvement * fix: build error * style: input and textarea border improvement * cycle and module modal ui improvement * style: cycle and module modal ui improvement
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import * as React from "react";
|
|
|
|
export interface TextAreaProps
|
|
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
mode?: "primary" | "transparent";
|
|
hasError?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
// Updates the height of a <textarea> when the value changes.
|
|
const useAutoSizeTextArea = (
|
|
textAreaRef: HTMLTextAreaElement | null,
|
|
value: any
|
|
) => {
|
|
React.useEffect(() => {
|
|
if (textAreaRef) {
|
|
// We need to reset the height momentarily to get the correct scrollHeight for the textarea
|
|
textAreaRef.style.height = "0px";
|
|
const scrollHeight = textAreaRef.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.
|
|
textAreaRef.style.height = scrollHeight + "px";
|
|
}
|
|
}, [textAreaRef, value]);
|
|
};
|
|
|
|
const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
(props, ref) => {
|
|
const {
|
|
id,
|
|
name,
|
|
value = "",
|
|
rows = 1,
|
|
cols = 1,
|
|
mode = "primary",
|
|
hasError = false,
|
|
className = "",
|
|
...rest
|
|
} = props;
|
|
|
|
const textAreaRef = React.useRef<any>(ref);
|
|
|
|
ref && useAutoSizeTextArea(textAreaRef?.current, value);
|
|
|
|
return (
|
|
<textarea
|
|
id={id}
|
|
name={name}
|
|
ref={textAreaRef}
|
|
value={value}
|
|
rows={rows}
|
|
cols={cols}
|
|
className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
|
|
mode === "primary"
|
|
? "rounded-md border-[0.5px] border-custom-border-200"
|
|
: mode === "transparent"
|
|
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
|
|
: ""
|
|
} ${hasError ? "border-red-500" : ""} ${
|
|
hasError && mode === "primary" ? "bg-red-100" : ""
|
|
} ${className}`}
|
|
{...rest}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
export { TextArea };
|