status-desktop/storybook/pages/NetworkSelectItemDelegatePage.qml
Alex Jbanca 429203cd66 refactoring(NetworkSelectItemDelegate): Remove backend dependency and clean the API
This is the first step in refactoring the NetworkFilter, by cleaning the base component that handles the check states.
This component supports multiple configurations:
1. Single selection with or without radio button
2. Multiple selection with or without checkbox
3. Automatic handling of the check state. The component will change the check state based on user clicks
4. Manual handling of the check state. The component will not change the check state, but offers a toggled signal and expects the user to change the check state based on external flows

+ Fix minor bugs
2024-06-20 15:13:54 +03:00

98 lines
2.4 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml 2.15
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import AppLayouts.Wallet.controls 1.0
import Models 1.0
import Storybook 1.0
import SortFilterProxyModel 0.2
import utils 1.0
SplitView {
id: root
Item {
implicitWidth: delegate.width
NetworkSelectItemDelegate {
id: delegate
title: "Ethereum"
iconUrl: Style.svg("network/Network=Ethereum")
showIndicator: true
multiSelection: true
checkState: checkStateSelector.checkState
nextCheckState: checkState === Qt.Unchecked ? Qt.PartiallyChecked :
checkState === Qt.PartiallyChecked ? Qt.Checked : Qt.Unchecked
onCheckStateChanged: {
checkStateSelector.checkState = checkState
}
}
}
Pane {
id: pane
SplitView.fillWidth: true
ColumnLayout {
CheckBox {
text: "showIndicator"
checked: delegate.showIndicator
onCheckedChanged: {
delegate.showIndicator = checked
}
}
CheckBox {
text: "multiSelection"
checked: delegate.multiSelection
onCheckedChanged: {
delegate.multiSelection = checked
}
}
Label {
text: "title"
}
TextField {
text: delegate.title
onTextChanged: {
delegate.title = text
}
}
Label {
text: "iconUrl"
}
TextField {
text: delegate.iconUrl
onTextChanged: {
delegate.iconUrl = text
}
}
CheckBox {
id: checkStateSelector
text: "checkedState"
tristate: true
checked: true
onCheckStateChanged: {
if(delegate.checkState !== checkState) {
delegate.checkState = checkState
}
}
}
}
}
}
// category: Controls