chore(StatusListPicker): remove imperative filtering

iterates: status-im/status-desktop#6511, status-im/status-desktop#6500
This commit is contained in:
Patryk Osmaczko 2022-07-22 10:52:29 +02:00 committed by osmaczko
parent ac37549f62
commit b30f7b3ac5
1 changed files with 16 additions and 42 deletions

View File

@ -6,6 +6,8 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import SortFilterProxyModel 0.2
/*! /*!
\qmltype StatusListPicker \qmltype StatusListPicker
\inherits Item \inherits Item
@ -69,7 +71,7 @@ Item {
} }
\endqml \endqml
*/ */
property ListModel inputList: ListModel { } property var inputList: ListModel { }
/*! /*!
\qmlproperty string StatusListPicker::searchText \qmlproperty string StatusListPicker::searchText
@ -151,40 +153,6 @@ Item {
QtObject { QtObject {
id: d id: d
property var filteredModel: ListModel { }
// Used to set up component and the needed private properties
function initialize() {
if(filteredModel.count === 0) {
// It is necessary to load the model, not loaded yet!
var selected = 0
var selectionText = ""
for(var i = 0; i < root.inputList.count; i++) {
var item = root.inputList.get(i)
d.filteredModel.append(item)
if(item.selected) selected++;
}
// If the given model has more than one selected elements, the behaviour of the list picker will be as a multiple selector with checkboxes although it is
// set in the radiobutton mode. Radiobutton mode is only for mutial-exclusion.
if(selected > 1)
multiSelection = true
// Update selected items text:
d.getSelectedItemsText()
}
}
// Used to update model elements given a specific text by filtering them for its `name` and / or `shortName`.
function applyFilter(text) {
const input = text.toLowerCase()
filteredModel.clear()
for(var i = 0; i < root.inputList.count; i++) {
let item = root.inputList.get(i)
if(item.name.toLowerCase().includes(input) || item.shortName.toLowerCase().includes(input))
filteredModel.append(item)
}
}
function formatSymbolShortNameText(symbol, shortName) { function formatSymbolShortNameText(symbol, shortName) {
var formattedText = "" var formattedText = ""
@ -230,8 +198,6 @@ Item {
width: 110 width: 110
height: 38 height: 38
Component.onCompleted: d.initialize()
StatusPickerButton { StatusPickerButton {
id: btn id: btn
anchors.fill: parent anchors.fill: parent
@ -282,7 +248,18 @@ Item {
property int itemHeight: 40 property int itemHeight: 40
property int itemWidth: 360 property int itemWidth: 360
model: d.filteredModel model: SortFilterProxyModel {
sourceModel: root.inputList
delayed: true
filters: ExpressionFilter {
expression: {
root.searchText // ensure expression is reevaluated when searchText changes
return model.name.toLowerCase().startsWith(root.searchText.toLowerCase()) ||
model.shortName.toLowerCase().startsWith(root.searchText.toLowerCase())
}
}
}
width: itemWidth width: itemWidth
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 8 anchors.topMargin: 8
@ -310,10 +287,7 @@ Item {
text: root.searchText text: root.searchText
input.icon.name: "search" input.icon.name: "search"
onTextChanged: { onTextChanged: root.searchText = text
d.applyFilter(text)
root.searchText = text
}
} }
}// End of search input item }// End of search input item
delegate: StatusItemPicker { delegate: StatusItemPicker {