StatusRowButton and SlippageSelector as a separate components, api simplified, fixed issue with setting values from outside

storybook/pages/StatusButtonRowPage.qml

@@ -19,15 +19,10 @@ SplitView {
         SplitView.fillWidth: true
         SplitView.fillHeight: true
 
-        background: Rectangle {
+        SlippageSelector {
-            color: Theme.palette.baseColor4
-        }
-
-        StatusButtonRow {
             id: buttonRow
-            symbolValue: ctrlCustomSymbol.text
+
             anchors.centerIn: parent
-            //currentValue: 1.42
         }
     }
 
@@ -40,37 +35,27 @@ SplitView {
         ColumnLayout {
             anchors.fill: parent
 
-            RowLayout {
+            Label {
                 Layout.fillWidth: true
-                Label { text: "Custom symbol:" }
+                font.weight: Font.Medium
-                TextField {
+                text: "Value: %1".arg(buttonRow.value)
-                    Layout.fillWidth: true
+            }
-                    id: ctrlCustomSymbol
+            Label {
-                    text: " %"
+                Layout.fillWidth: true
+                font.weight: Font.Medium
+                text: "Valid: " + buttonRow.valid//"%1".arg(buttonRow.valid ? "true" : "false")
+            }
+
+            ColumnLayout {
+                Repeater {
+                    model: [0.1, 0.5, 0.24, 0.8, 120.84]
+
+                    Button {
+                        text: "set " + modelData
+                        onClicked: buttonRow.value = modelData
+                    }
                 }
             }
-            Button {
-                text: "Reset to default"
-                onClicked: buttonRow.reset()
-            }
-            Label {
-                Layout.fillWidth: true
-                text: "Model: [%1]".arg(buttonRow.model)
-            }
-            Label {
-                Layout.fillWidth: true
-                text: "Default value: %1".arg(buttonRow.defaultValue)
-            }
-            Label {
-                Layout.fillWidth: true
-                font.weight: Font.Medium
-                text: "Current value: %1".arg(buttonRow.currentValue)
-            }
-            Label {
-                Layout.fillWidth: true
-                font.weight: Font.Medium
-                text: "Valid: %1".arg(buttonRow.valid ? "true" : "false")
-            }
 
             Item { Layout.fillHeight: true }
         }

ui/imports/shared/controls/SlippageSelector.qml

@@ -0,0 +1,94 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Controls 0.1
+
+Control {
+    id: root
+
+    property double value: 0.5
+    readonly property bool valid: customInput.visible && customInput.valid
+                                  || buttons.value !== null
+
+    onValueChanged: {
+        if (d.internalUpdate)
+            return false
+
+        const custom = !d.values.includes(value)
+
+        if (custom) {
+            customButton.visible = false
+            customInput.value = value
+        } else {
+            customButton.visible = true
+        }
+    }
+
+    Component.onCompleted: {
+        buttons.model.append(d.values.map(i => ({ text: "%L1 %".arg(i), value: i })))
+        valueChanged()
+    }
+
+    QtObject {
+        id: d
+
+        readonly property var values: [0.1, 0.5, 1]
+        property bool internalUpdate: false
+
+        function update(value) {
+            internalUpdate = true
+            root.value = value
+            internalUpdate = false
+        }
+    }
+
+    contentItem: RowLayout {
+        spacing: buttons.spacing
+
+        StatusButtonRow {
+            id: buttons
+
+            model: ListModel {}
+
+            Binding on value {
+                value: customInput.visible ? null : root.value
+            }
+
+            onValueChanged: {
+                if (value === null)
+                    return
+
+                d.update(value)
+                customButton.visible = true
+            }
+        }
+
+        StatusButton {
+            id: customButton
+            objectName: "customButton"
+
+            Layout.minimumWidth: 130
+
+            text: qsTr("Custom")
+            onClicked: {
+                visible = false
+                customInput.clear()
+                customInput.forceActiveFocus()
+            }
+        }
+
+        CurrencyAmountInput {
+            id: customInput
+            objectName: "customInput"
+
+            Layout.minimumWidth: customButton.Layout.minimumWidth
+
+            visible: !customButton.visible
+            minValue: 0.01
+            maxValue: 100.0
+            currencySymbol: "%"
+            onValueChanged: d.update(value)
+        }
+    }
+}

ui/imports/shared/controls/StatusButtonRow.qml

@@ -7,93 +7,36 @@ import StatusQ.Controls 0.1
 
 import utils 1.0
 
-Control {
+RowLayout {
     id: root
 
-    property var model: [0.1, 0.5, 1]
+    property string textRole: "text"
-    property double defaultValue: 0.5
+    property string valueRole: "value"
-    property string symbolValue: " %"
 
-    property alias currentValue: d.currentValue
+    property alias model: repeater.model
+    property var value: null
 
-    readonly property bool valid: d.currentValue && (d.customInputFocused ? customLoader.item.valid : true)
+    spacing: Style.current.halfPadding
 
-    function reset() {
+    Repeater {
-        customLoader.sourceComponent = customButtonComponent
+        id: repeater
-        d.currentValue = root.defaultValue
-    }
 
-    Component.onCompleted: {
+        objectName: "buttonsRepeater"
-        if (currentValue && !root.model.includes(currentValue))
-            d.activateCustomInput()
-    }
 
-    QtObject {
+        delegate: StatusButton {
-        id: d
+            readonly property var value: model[root.valueRole]
 
-        property double currentValue: root.defaultValue
+            Layout.minimumWidth: 100
-
-        readonly property bool customInputFocused: customLoader.sourceComponent === customInputComponent && customLoader.item.focus
-
-        function activateCustomInput() {
-            customLoader.sourceComponent = customInputComponent
-            customLoader.item.forceActiveFocus()
-        }
-    }
-
-    background: null
-    contentItem: RowLayout {
-        spacing: Style.current.halfPadding
-
-        Repeater {
-            objectName: "buttonsRepeater"
-            model: root.model
-            delegate: StatusButton {
-                readonly property double value: modelData
-                Layout.minimumWidth: 100
-                Layout.fillWidth: true
-                type: checked ? StatusBaseButton.Type.Primary : StatusBaseButton.Type.Normal
-                checkable: true
-                checked: value === d.currentValue && !d.customInputFocused
-                text: "%L1%2".arg(modelData).arg(root.symbolValue)
-                onClicked: d.currentValue = value
-            }
-        }
-        Loader {
-            id: customLoader
-            objectName: "customLoader"
-            Layout.minimumWidth: 130
             Layout.fillWidth: true
-            sourceComponent: customButtonComponent
-        }
-    }
 
-    Component {
+            type: checked ? StatusBaseButton.Type.Primary
-        id: customButtonComponent
+                          : StatusBaseButton.Type.Normal
-        StatusButton {
+
-            objectName: "customButton"
+            checkable: true
-            text: qsTr("Custom")
+            checked: value === root.value
-            onClicked: d.activateCustomInput()
+            text: model[root.textRole]
-        }
+
-    }
+            onClicked: root.value = value
-    Component {
-        id: customInputComponent
-        CurrencyAmountInput {
-            objectName: "customInput"
-            minValue: 0.01
-            currencySymbol: root.symbolValue
-            focus: value === d.currentValue
-            onValueChanged: d.currentValue = value
-            onFocusChanged: {
-                if (focus && valid)
-                    d.currentValue = value
-                else if (!valid)
-                    clear()
-            }
-            Component.onCompleted: {
-                if (d.currentValue && d.currentValue !== root.defaultValue && !root.model.includes(d.currentValue))
-                    value = d.currentValue
-            }
         }
     }
 }

ui/imports/shared/controls/qmldir

@@ -31,6 +31,7 @@ SeedPhraseTextArea 1.0 SeedPhraseTextArea.qml
 SendToContractWarning 1.0 SendToContractWarning.qml
 SettingsRadioButton 1.0 SettingsRadioButton.qml
 ShapeRectangle 1.0 ShapeRectangle.qml
+SlippageSelector 1.0 SlippageSelector.qml
 SocialLinkPreview 1.0 SocialLinkPreview.qml
 StatusButtonRow 1.0 StatusButtonRow.qml
 StatusSyncCodeInput 1.0 StatusSyncCodeInput.qml