gallery: implemented auto-resize for TextAreas

MerginMaps · Aug 14, 2023 · 1c3fa90 · 1c3fa90
1 parent e90a40c
commit 1c3fa90
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/app/qmlV2/component/MMTextArea.qml b/app/qmlV2/component/MMTextArea.qml
@@ -15,12 +15,17 @@ import "../Style.js" as Style
 Item {
   id: control
 
-  property alias areaHeight: textArea.height
+  property int areaHeight
   property alias text: textArea.text
   property alias placeholderText: textArea.placeholderText
   property string warningMsg
   property string errorMsg
 
+  // auto resize
+  property int minHeight: 50
+  property int maxHeight: 150
+  property bool autoHeight: false
+
   width: 280 * __dp
   height: textArea.height + messageItem.height
 
@@ -30,6 +35,7 @@ Item {
     property string warningMsg
     property string errorMsg
 
+    height: control.autoHeight ? ( contentHeight+10 > control.minHeight ? contentHeight+10 > control.maxHeight ? control.maxHeight : contentHeight+10 : control.minHeight ) : control.areaHeight
     width: parent.width
     hoverEnabled: true
     placeholderTextColor: Style.night_6

diff --git a/gallery/qml/pages/TextAreaPage.qml b/gallery/qml/pages/TextAreaPage.qml
@@ -33,16 +33,16 @@ Column {
       spacing: 20
       anchors.fill: parent
       MMTextArea {
-        areaHeight: 100
+        areaHeight: 50
         placeholderText: "Place holder"
       }
       MMTextArea {
-        areaHeight: 100
+        areaHeight: 50
         text: "Disabled"
         enabled: false
       }
       MMTextArea {
-        areaHeight: 100
+        areaHeight: 50
         text: "Something important"
         warningMsg: "Be careful"
       }
@@ -51,6 +51,13 @@ Column {
         text: "Something wrong"
         errorMsg: "Error message"
       }
+      MMTextArea {
+        areaHeight: 50
+        text: "autoHeight: true\nminHeight: 50\nmaxHeight: 150"
+        minHeight: 50
+        maxHeight: 150
+        autoHeight: true
+      }
     }
   }
 }