refactor: split Input into three files to simplify and reduce memory

Having all the different input types in one file made it simpler to design, but created an issue with memory, because all the aliases, properties and images were created for all types even if you only used a basic Input. I tried using Loaders, but making aliases within loaders is super painful/impossible in some cases.

ui/app/AppLayouts/Wallet/Components/AddAccountWithPrivateKey.qml

@@ -25,13 +25,12 @@ ModalPopup {
     }
 
 
-    Input {
+    StyledTextArea {
         id: accountPKeyInput
         anchors.top: passwordInput.bottom
         anchors.topMargin: marginBetweenInputs
         placeholderText: qsTr("Paste the contents of your private key")
         label: qsTr("Private key")
-        isTextArea: true
         customHeight: 88
     }
 
@@ -43,7 +42,7 @@ ModalPopup {
         label: qsTr("Account name")
     }
 
-    Input {
+    Select {
         id: accountColorInput
         anchors.top: accountNameInput.bottom
         anchors.topMargin: marginBetweenInputs

ui/app/AppLayouts/Wallet/Components/AddAccountWithSeed.qml

@@ -26,13 +26,12 @@ ModalPopup {
     }
 
 
-    Input {
+    StyledTextArea {
         id: accountSeedInput
         anchors.top: passwordInput.bottom
         anchors.topMargin: marginBetweenInputs
         placeholderText: qsTr("Enter your seed phrase, separate words with commas or spaces...")
         label: qsTr("Seed phrase")
-        isTextArea: true
         customHeight: 88
     }
 
@@ -44,7 +43,7 @@ ModalPopup {
         label: qsTr("Account name")
     }
 
-    Input {
+    Select {
         id: accountColorInput
         anchors.top: accountNameInput.bottom
         anchors.topMargin: marginBetweenInputs
@@ -69,13 +68,13 @@ ModalPopup {
         anchors.rightMargin: Theme.padding
         label: "Add account >"
 
-        disabled: passwordInput.text === "" || accountNameInput.text === "" || accountSeedInput.textAreaText === ""
+        disabled: passwordInput.text === "" || accountNameInput.text === "" || accountSeedInput.text === ""
 
         onClicked : {
             // TODO add message to show validation errors
-            if (passwordInput.text === "" || accountNameInput.text === "" || accountSeedInput.textAreaText === "") return;
+            if (passwordInput.text === "" || accountNameInput.text === "" || accountSeedInput.text === "") return;
 
-            walletModel.addAccountsFromSeed(accountSeedInput.textAreaText, passwordInput.text, accountNameInput.text, selectedColor)
+            walletModel.addAccountsFromSeed(accountSeedInput.text, passwordInput.text, accountNameInput.text, selectedColor)
             // TODO manage errors adding account
             popup.close();
         }

ui/app/AppLayouts/Wallet/Components/AddWatchOnlyAccount.qml

@@ -31,7 +31,7 @@ ModalPopup {
         label: qsTr("Account name")
     }
 
-    Input {
+    Select {
         id: accountColorInput
         anchors.top: accountNameInput.bottom
         anchors.topMargin: marginBetweenInputs

ui/app/AppLayouts/Wallet/Components/GenerateAccountModal.qml

@@ -31,7 +31,7 @@ ModalPopup {
         label: qsTr("Account name")
     }
 
-    Input {
+    Select {
         id: accountColorInput
         anchors.top: accountNameInput.bottom
         anchors.topMargin: marginBetweenInputs

ui/nim-status-client.pro

@@ -165,8 +165,10 @@ DISTFILES += \
     shared/Input.qml \
     shared/ModalPopup.qml \
     shared/PopupMenu.qml \
+    shared/Select.qml \
     shared/Separator.qml \
     shared/StatusTabButton.qml \
     shared/StyledButton.qml \
     shared/RoundedIcon.qml \
+    shared/StyledTextArea.qml \
     shared/qmldir

ui/shared/Input.qml

@@ -8,23 +8,18 @@ Item {
     property alias textField: inputValue
     property string placeholderText: "My placeholder"
     property alias text: inputValue.text
-    property alias textAreaText: textArea.text
     property string label: ""
-    property color bgColor: Theme.grey
-
     //    property string label: "My Label"
+    readonly property bool hasLabel: label !== ""
+    property color bgColor: Theme.grey
     //    property url icon: "../app/img/hash.svg"
     property url icon: ""
     readonly property bool hasIcon: icon.toString() !== ""
-    readonly property bool hasLabel: label !== ""
     readonly property var forceActiveFocus: function () {
         inputValue.forceActiveFocus(Qt.MouseFocusReason)
     }
     readonly property int labelMargin: 7
-    property var selectOptions
-    property bool isSelect: !!selectOptions && selectOptions.length > 0
     property int customHeight: 44
-    property bool isTextArea: false
 
     id: inputBox
     height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
@@ -67,59 +62,6 @@ Item {
             }
         }
 
-        TextArea {
-            id: textArea
-            text: ""
-            font.pixelSize: 15
-            wrapMode: Text.WordWrap
-            visible: inputBox.isTextArea
-            placeholderText: inputBox.placeholderText
-            anchors.rightMargin: Theme.padding
-            anchors.leftMargin: inputBox.hasIcon ? 36 : Theme.padding
-            anchors.bottomMargin: Theme.smallPadding
-            anchors.topMargin: Theme.smallPadding
-            anchors.fill: parent
-
-        }
-
-        Menu {
-            id: selectMenu
-            width: parent.width
-            padding: 10
-            background: Rectangle {
-                width: parent.width
-                height: parent.height
-                color: Theme.grey
-                radius: Theme.radius
-            }
-            Component.onCompleted: {
-                if (!selectOptions) {
-                    return
-                }
-
-                selectOptions.forEach(function (element) {
-                    var item = menuItem.createObject(undefined, element)
-                    selectMenu.addItem(item)
-                })
-            }
-
-            Component {
-                id: menuItem
-                MenuItem {
-                    property var onClicked: console.log("Default click function. Override me please")
-                    property color bgColor: Theme.white
-                    anchors.right: parent.right
-                    anchors.left: parent.left
-                    onTriggered: function () {
-                        onClicked()
-                    }
-                    background: Rectangle {
-                        color: bgColor
-                    }
-                }
-            }
-        }
-
         Image {
             id: iconImg
             sourceSize.height: 24
@@ -136,15 +78,9 @@ Item {
         id: mouseArea
         anchors.fill: parent
         onClicked: {
-            if (inputBox.isSelect) {
-                selectMenu.open()
-            } else if (inputBox.isTextArea) {
-                textArea.forceActiveFocus(Qt.MouseFocusReason)
-            } else {
             inputValue.forceActiveFocus(Qt.MouseFocusReason)
         }
     }
-    }
 }
 
 /*##^##

ui/shared/Select.qml

@@ -0,0 +1,96 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.12
+import "../imports"
+
+Item {
+    //    property string label: "My Label"
+    property string label: ""
+    readonly property bool hasLabel: label !== ""
+    property color bgColor: Theme.grey
+    readonly property int labelMargin: 7
+    property var selectOptions
+    property int customHeight: 44
+
+    id: inputBox
+    height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
+    anchors.right: parent.right
+    anchors.left: parent.left
+
+    Text {
+        id: inputLabel
+        text: inputBox.label
+        font.weight: Font.Medium
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        font.pixelSize: 13
+        color: Theme.black
+    }
+
+    Rectangle {
+        id: inputRectangle
+        height: customHeight
+        color: bgColor
+        radius: 8
+        anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
+        anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
+        anchors.right: parent.right
+        anchors.left: parent.left
+
+        Menu {
+            id: selectMenu
+            width: parent.width
+            padding: 10
+            background: Rectangle {
+                width: parent.width
+                height: parent.height
+                color: Theme.grey
+                radius: Theme.radius
+            }
+            Component.onCompleted: {
+                if (!selectOptions) {
+                    return
+                }
+
+                selectOptions.forEach(function (element) {
+                    var item = menuItem.createObject(undefined, element)
+                    selectMenu.addItem(item)
+                })
+            }
+
+            Component {
+                id: menuItem
+                MenuItem {
+                    property var onClicked: console.log("Default click function. Override me please")
+                    property color bgColor: Theme.white
+                    anchors.right: parent.right
+                    anchors.left: parent.left
+                    onTriggered: function () {
+                        onClicked()
+                    }
+                    background: Rectangle {
+                        color: bgColor
+                    }
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: {
+            selectMenu.open()
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
+}
+##^##*/
+

ui/shared/StyledTextArea.qml

@@ -0,0 +1,77 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.12
+import "../imports"
+
+Item {
+    property alias textField: textArea
+    property string placeholderText: "My placeholder"
+    property alias text: textArea.text
+    //    property string label: "My Label"
+    property string label: ""
+    readonly property bool hasLabel: label !== ""
+    property color bgColor: Theme.grey
+    readonly property var forceActiveFocus: function () {
+        textArea.forceActiveFocus(Qt.MouseFocusReason)
+    }
+    readonly property int labelMargin: 7
+    property int customHeight: 44
+
+    id: inputBox
+    height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
+    anchors.right: parent.right
+    anchors.left: parent.left
+
+    Text {
+        id: inputLabel
+        text: inputBox.label
+        font.weight: Font.Medium
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        font.pixelSize: 13
+        color: Theme.black
+    }
+
+    Rectangle {
+        id: inputRectangle
+        height: customHeight
+        color: bgColor
+        radius: 8
+        anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
+        anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
+        anchors.right: parent.right
+        anchors.left: parent.left
+
+        TextArea {
+            id: textArea
+            text: ""
+            font.pixelSize: 15
+            wrapMode: Text.WordWrap
+            placeholderText: inputBox.placeholderText
+            anchors.rightMargin: Theme.padding
+            anchors.leftMargin: inputBox.hasIcon ? 36 : Theme.padding
+            anchors.bottomMargin: Theme.smallPadding
+            anchors.topMargin: Theme.smallPadding
+            anchors.fill: parent
+
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: {
+            textArea.forceActiveFocus(Qt.MouseFocusReason)
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
+}
+##^##*/
+

ui/shared/qmldir

@@ -5,3 +5,5 @@ PopupMenu 1.0 PopupMenu.qml
 Separator 1.0 Separator.qml
 StatusTabButton 1.0 StatusTabButton.qml
 Input 1.0 Input.qml
+Select 1.0 Select.qml
+StyledTextArea 1.0 StyledTextArea.qml