plane/web/components/ui/text-area/index.tsx
sriram veeraghanta 1e152c666c
New Directory Setup (#2065)
* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
2023-09-03 18:50:30 +05:30

86 lines
2.4 KiB
TypeScript

import React, { useState, useRef, useEffect } from "react";
// types
import { Props } from "./types";
// Updates the height of a <textarea> when the value changes.
const useAutoSizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
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]);
};
export const TextArea: React.FC<Props> = ({
id,
label,
className = "",
value,
placeholder,
name,
register,
mode = "primary",
rows,
cols,
disabled,
error,
validations,
noPadding = false,
onChange,
...rest
}) => {
const [textareaValue, setTextareaValue] = useState(value ?? "");
const textAreaRef = useRef<any>(null);
useAutoSizeTextArea(textAreaRef.current, textareaValue);
return (
<>
{label && (
<label htmlFor={id} className="mb-2 text-custom-text-200">
{label}
</label>
)}
<textarea
id={id}
placeholder={placeholder}
value={value}
rows={rows}
cols={cols}
disabled={disabled}
{...(register && register(name, validations))}
ref={(e) => {
textAreaRef.current = e;
if (register) register(name).ref(e);
}}
onChange={(e) => {
register && register(name).onChange(e);
onChange && onChange(e);
setTextareaValue(e.target.value);
}}
className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 ${
noPadding ? "" : "px-3 py-2"
} outline-none ${
mode === "primary"
? "rounded-md border border-custom-border-200"
: mode === "transparent"
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
: ""
} ${error ? "border-red-500" : ""} ${
error && mode === "primary" ? "bg-red-100" : ""
} ${className}`}
{...rest}
/>
{error?.message && <div className="text-sm text-red-500">{error.message}</div>}
</>
);
};