!2198 重构:批量修改文字输入框(可自动拉伸高度,可回车换行)

src/UI/Components/Text/TextModify.less

@@ -9,19 +9,10 @@
         .text-content {
             flex: 1;
             min-height: 100px;
-            width: 300px;
+            width: 400px;
             display: flex;
             flex-direction: column;
 
-            .header {
-                font-weight: bold;
-                overflow-y: scroll
-            }
-
-            .body {
-                overflow-y: scroll;
-            }
-
             .text-row {
                 display: flex;
                 padding: 5px;
@@ -35,6 +26,23 @@
                 &>:nth-child(2) {
                     flex: 2;
                 }
+
+                textarea {
+                    min-width: 100%;
+                    min-height: 35px;
+                    padding: 8px;
+                    width: 100%;
+                    font-size: 12px;
+                }
+            }
+
+            .header {
+                font-weight: bold;
+                padding: 5px 15px 5px 5px;
+            }
+
+            .body {
+                overflow-y: scroll;
             }
 
             .text-replace {

src/UI/Components/Text/TextModify.tsx

@@ -1,7 +1,7 @@
-import { Button, Classes, EditableText, Icon } from "@blueprintjs/core";
+import { Button, Classes, Icon } from "@blueprintjs/core";
 import { observable, toJS } from "mobx";
 import { observer } from "mobx-react";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { app } from "../../../ApplicationServices/Application";
 import { DefaultModifyTextsOption } from "../../../Editor/DefaultConfig";
 import { ModifyTextsConfigOption } from "../../Store/BoardInterface";
@@ -16,9 +16,13 @@ export class ModifyTextsStore implements IConfigStore
     @observable configName = "默认";
     SaveConfig()
     {
+        let opt = toJS(this.m_Option);
+        //清理尾部多余的回车
+        opt.changeTexts = opt.changeTexts.map((texts) => ([texts[0].trimEnd(), texts[1].trimEnd()]));
+
         //新的配置
         let newConfig: IConfigOption = {};
-        newConfig.option = toJS(this.m_Option);
+        newConfig.option = opt;
         return newConfig;
     };
     //板数据
@@ -42,23 +46,67 @@ export class ModifyTextsStore implements IConfigStore
     }
 }
 
+const RenderTextAreaRow = (observer((props: { texts: [string, string]; }) =>
+{
+    const { texts } = props;
+    const textareaElement1 = useRef<HTMLTextAreaElement>(null);
+    const textareaElement2 = useRef<HTMLTextAreaElement>(null);
+
+    const upDataHeight = () =>
+    {
+        if (textareaElement1.current && textareaElement2.current)
+        {
+            textareaElement1.current.style.height = "35px";
+            textareaElement2.current.style.height = "35px";
+            const maxHeight = Math.max(textareaElement1.current.scrollHeight, textareaElement2.current.scrollHeight);
+            textareaElement1.current.style.height = `${maxHeight}px`;
+            textareaElement2.current.style.height = `${maxHeight}px`;
+        }
+    };
+
+    useEffect(() =>
+    {
+        textareaElement1.current.value = texts[0];
+        textareaElement2.current.value = texts[1];
+        upDataHeight();
+    }, [texts]);
+
+    return (
+        <>
+            <div>
+                <textarea
+                    className={Classes.INPUT}
+                    ref={textareaElement1}
+                    defaultValue={texts[0]}
+                    onChange={(e) => { texts[0] = e.currentTarget.value; }}
+                    onKeyDown={(e) =>
+                    {
+                        e.stopPropagation();
+                        setTimeout(() => { upDataHeight(); }, 0);
+                    }}
+                />
+            </div>
+            <div className="text-replace"><div>替换为--&gt;</div></div>
+            <div>
+                <textarea
+                    className={Classes.INPUT}
+                    ref={textareaElement2}
+                    defaultValue={texts[1]}
+                    onChange={(e) => { texts[1] = e.currentTarget.value; }}
+                    onKeyDown={(e) =>
+                    {
+                        e.stopPropagation();
+                        setTimeout(() => { upDataHeight(); }, 0);
+                    }}
+                />
+            </div>
+        </>
+    );
+}));
+
 @observer
 export class TextModifyModal extends React.Component<{ store: ModifyTextsStore; }, {}>
 {
-    private renderEditableText = ((texts: [string, string], valueKey: number) =>
-    {
-        return (
-            <EditableText
-                multiline={true}
-                minLines={3}
-                maxLines={3}
-                value={texts[valueKey]}
-                placeholder=""
-                confirmOnEnterKey={true}
-                onChange={val => { texts[valueKey] = val; }}
-            />
-        );
-    });
     render()
     {
         const { changeTexts } = this.props.store.m_Option;
@@ -90,13 +138,7 @@ export class TextModifyModal extends React.Component<{ store: ModifyTextsStore;
                                     <div className="body">
                                         {changeTexts.map((texts, i) => (
                                             <div className="text-row note-item" key={i}>
-                                                <div>
+                                                <RenderTextAreaRow texts={texts} />
-                                                    {this.renderEditableText(texts, 0)}
-                                                </div>
-                                                <div className="text-replace"><div>替换为--&gt;</div></div>
-                                                <div>
-                                                    {this.renderEditableText(texts, 1)}
-                                                </div>
                                             </div>
                                         ))}
                                     </div>