From 417e729e0d9bb999b5db1517fcfbc5a37d6aa15a Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Sat, 28 Jan 2023 13:12:30 +0800
Subject: [PATCH] feat: support textarea in the KeyValueInput component

Provide textrea in the KeyValueInput component, to input more content, and provide the textareaRows property to set the default rows of the textarea to display.

Change-Id: I6849fab3933cef82e1293f7bbe0f3006e19b6b38
---
 .../FormItem/KeyValueInput/index.jsx          | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/FormItem/KeyValueInput/index.jsx b/src/components/FormItem/KeyValueInput/index.jsx
index ada4a07a..e193006f 100644
--- a/src/components/FormItem/KeyValueInput/index.jsx
+++ b/src/components/FormItem/KeyValueInput/index.jsx
@@ -27,6 +27,8 @@ export default class index extends Component {
     keySpan: PropTypes.number,
     valueSpan: PropTypes.number,
     middleComponent: PropTypes.node,
+    isTextarea: PropTypes.bool,
+    textareaRows: PropTypes.number,
   };
 
   static defaultProps = {
@@ -38,6 +40,8 @@ export default class index extends Component {
     keyReadonly: false,
     valueReadonly: false,
     middleComponent: <PauseOutlined rotate={90} />,
+    isTextarea: false,
+    textareaRows: 2,
   };
 
   constructor(props) {
@@ -80,6 +84,22 @@ export default class index extends Component {
     });
   };
 
+  renderInput(value, placeholder, readOnly) {
+    const { isTextarea = false, textareaRows } = this.props;
+    const props = {
+      value,
+      placeholder,
+      onChange: this.onValueChange,
+      readOnly,
+      required: true,
+    };
+    if (isTextarea) {
+      props.rows = textareaRows;
+      return <Input.TextArea {...props} />;
+    }
+    return <Input {...props} />;
+  }
+
   render() {
     const { key, value } = this.state;
     const {
@@ -106,13 +126,7 @@ export default class index extends Component {
         </Col>
         {component}
         <Col span={valueSpan || 8}>
-          <Input
-            value={value}
-            placeholder={valuePlaceholder}
-            onChange={this.onValueChange}
-            readOnly={valueReadonly}
-            required
-          />
+          {this.renderInput(value, valuePlaceholder, valueReadonly)}
         </Col>
       </Row>
     );