next-helios-fe 1.8.83 → 1.8.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.83",
+  "version": "1.8.85",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/other/textarea.tsx

@@ -1,25 +1,31 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Tooltip } from "../../../components";
 import { Icon } from "@iconify/react";
 
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "rows"> {
+  rows?: number;
+  maxRows?: number;
   label?: string;
   description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    disableResize?: boolean;
     hideInputDetail?: boolean;
   };
 }
 
 export const Textarea: React.FC<TextareaProps> = ({
+  rows,
+  maxRows,
   options,
   label,
   description,
   ...rest
 }) => {
+  const [tempRows, setTempRows] = useState<number>(rows || 10);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -28,6 +34,18 @@ export const Textarea: React.FC<TextareaProps> = ({
       ? "py-2"
       : "py-1.5";
 
+  useEffect(() => {
+    if (maxRows) {
+      if (rest.value && (rest.value as string)?.includes("\n")) {
+        if (((rest.value as string).match(/\n/g) || []).length < maxRows) {
+          setTempRows(((rest.value as string).match(/\n/g) || []).length + 1);
+        }
+      } else {
+        setTempRows(rows || 10);
+      }
+    }
+  }, [rows, maxRows, rest.value]);
+
   return (
     <label className={`flex flex-col gap-2 ${width}`}>
       {(label ||
@@ -64,8 +82,10 @@ export const Textarea: React.FC<TextareaProps> = ({
         </div>
       )}
       <textarea
-        rows={rest.rows || 10}
-        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
+        rows={tempRows}
+        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${
+          options?.disableResize && "resize-none"
+        } ${height}`}
         {...rest}
       />
     </label>