kahuna-base-react-components 1.1.0 → 1.1.2

package/dist/types.d.ts

@@ -123,6 +123,8 @@ interface KTextAreaProps {
     fontSize?: string;
     iconSize?: string;
     checked?: boolean;
+    maxHeight?: number;
+    clearTextOnPressedEnter?: boolean;
 }
 declare const KTextArea: React.FC<KTextAreaProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KTextArea/KTextArea.stories.tsx

@@ -24,10 +24,18 @@ KTextAreaPrimary.args = {
     if (event.key === "Enter") {
       console.log("Enter is clicked and our value is:", event.currentTarget)
     }
+    if (event.key === "Enter" && event.shiftKey) {
+      console.log("Enter and shift is clicked ")
+    }
   },
-  rows: 4,
   placeholder: "Placeholder...",
-  hoverBackground: "white"
+  hoverBackground: "white",
+  width: 200,
+  height: 20,
+  leftIcon: TracksIcon,
+  activeBackground: "#FFF",
+  maxHeight: 200,
+  clearTextOnPressedEnter: true
 }
 
 export const KTextAreaLeftIcon = Template.bind({})

package/src/components/KTextArea/KTextArea.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, KeyboardEvent } from "react"
+import React, { useEffect, useState, KeyboardEvent, useRef } from "react"
 import "../../main.css"
 
 export interface KTextAreaProps {
@@ -28,12 +28,16 @@ export interface KTextAreaProps {
   fontSize?: string
   iconSize?: string
   checked?: boolean
+  maxHeight?: number
+  clearTextOnPressedEnter?: boolean
 }
 
 const KTextArea: React.FC<KTextAreaProps> = (props) => {
   const [background, setBackground] = useState("#F5F5F5")
   const [hover, setHover] = useState(false)
 
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
   useEffect(() => {
     const emptyBackground = props.background || "#F5F5F5"
     const activeBackground = props.activeBackground || "#FFF"
@@ -58,7 +62,19 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
   const border = props.border || "none"
   const fontSize = props.fontSize || "14px"
   const iconSize = props.iconSize || "20px"
-  const rows = props.rows || 2
+  const rows = props.rows || 1
+
+  const autoResize = props.maxHeight && props.maxHeight !== props.height
+  const maxHeight = props.maxHeight || 200
+  const clearTextOnPressedEnter = props.clearTextOnPressedEnter || false
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (textAreaRef.current) {
+      const textarea = textAreaRef.current
+      textarea.style.height = "auto"
+      textarea.style.height = `${textarea.scrollHeight}px` // Set the height to scrollHeight
+    }
+  }
 
   return (
     <div
@@ -83,29 +99,49 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
       )}
 
       <textarea
+        ref={textAreaRef}
         className={"k-input"}
         style={{
           background: hover ? hoverBackground : background,
           width,
           height,
           accentColor,
-          fontSize
+          fontSize,
+          overflow: autoResize ? "hidden" : "auto",
+          minHeight: height,
+          resize: autoResize ? "none" : "vertical",
+          ...(autoResize && { maxHeight })
         }}
-        rows={rows}
         value={props.value}
+        rows={rows}
         placeholder={props.placeholder || ""}
         disabled={disabled}
         onBlur={(event) => {
-          console.log("onBulur", event.target.value)
           if (props.onBlur) props.onBlur(event.target.value)
         }}
         onChange={(event) => {
-          console.log("OnChange", event.target.value)
+          if (autoResize) {
+            handleInput(event)
+          }
+
           props.onChange(event.target.value)
         }}
         onKeyDown={(event) => {
-          console.log("OnKeyDown", event)
           if (props.onKeyDown) props.onKeyDown(event)
+
+          if (event.key === "Enter") {
+            if (event.shiftKey) {
+              return
+            } else if (textAreaRef.current && clearTextOnPressedEnter) {
+              event.preventDefault()
+              const textAreaComponent = textAreaRef.current
+              textAreaComponent.style.height = "auto"
+              textAreaComponent.style.height = `${height}px`
+              textAreaComponent.value = ""
+            } else {
+              event.preventDefault()
+            }
+          }
         }}
       />