XS-80: added auto size textarea (#318)

* XS-80: added auto size textarea * XS-80: merge commit fixes * XS-80: lint fix * XS-80: fixed story * Format + Add one-line documentation * XS-80: fixed rows prop for textarea * XS-80: prop order change --------- Co-authored-by: Rushi Vishavadia <[email protected]>
xola · Mar 28, 2024 · 474ef2a · 474ef2a
1 parent 39dcf84
commit 474ef2a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
         "react-hot-toast": "^2.1.0",
         "react-hotkeys-hook": "^3.4.0",
         "react-json-view": "^1.21.3",
+        "react-textarea-autosize": "^8.5.3",
         "react-select": "^5.7.0",
         "storybook-addon-designs": "^6.3.1",
         "tippy.js": "^6.3.1"

diff --git a/src/components/Forms/Textarea.jsx b/src/components/Forms/Textarea.jsx
@@ -1,16 +1,27 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { forwardRef } from "react";
+import TextareaAutosize from "react-textarea-autosize";
 import { BaseInput } from "./BaseInput";
 
-export const Textarea = forwardRef(({ className, value, rows = 2, ...rest }, ref) => {
-    return (
+export const Textarea = forwardRef(({ className, value, shouldAutoSize = false, rows = 2, ...rest }, ref) => {
+    return shouldAutoSize ? (
+        // TextareaAutosize has a few special props like minRows and maxRows instead of rows field so using rows field to feed the minRows prop. See full list here https://github.com/Andarist/react-textarea-autosize?tab=readme-ov-file#props
         <BaseInput
             ref={ref}
-            as="textarea"
+            as={TextareaAutosize}
             value={value}
+            minRows={rows}
             className={clsx("ui-textarea", className)}
+            {...rest}
+        />
+    ) : (
+        <BaseInput
+            ref={ref}
+            as="textarea"
+            value={value}
             rows={rows}
+            className={clsx("ui-textarea", className)}
             {...rest}
         />
     );
@@ -19,8 +30,10 @@ export const Textarea = forwardRef(({ className, value, rows = 2, ...rest }, ref
 Textarea.propTypes = {
     ...BaseInput.propTypes,
     rows: PropTypes.number,
+    shouldAutoSize: PropTypes.bool,
 };
 
 Textarea.defaultProps = {
     rows: 2,
+    shouldAutoSize: false,
 };
diff --git a/src/stories/Forms/Textarea.stories.js b/src/stories/Forms/Textarea.stories.js
@@ -70,4 +70,21 @@ export const CustomWidth = () => {
     );
 };
 
+export const AutoSize = () => {
+    return (
+        <FormGroup>
+            <Label>Text</Label>
+            <Textarea shouldAutoSize={true} rows={6}/>
+        </FormGroup>
+    );
+};
+
+AutoSize.parameters = {
+    docs: {
+        description: {
+            story: "Automatically resize the textarea as the data increases.",
+        },
+    },
+};
+
 export default TextareaStories;