feat(StatusSeedPhraseInput): exposed touch/keys pressed events

Exposed keys.onPressed signal, mouse on clicked signal
as well as tabNavItem to be set in KeyNavigation.tab
when needed

Needed for task https://github.com/status-im/status-desktop/issues/4955
This commit is contained in:
Alexandra Betouni 2022-03-24 23:16:30 +02:00
parent 684f45cc08
commit f9f054e3d6
3 changed files with 66 additions and 2 deletions

View File

@ -41,6 +41,7 @@ Item {
property real rightPadding: 16 property real rightPadding: 16
property real topPadding: 12 property real topPadding: 12
property real bottomPadding: 12 property real bottomPadding: 12
property var tabNavItem: null
property real minimumHeight: 0 property real minimumHeight: 0
property real maximumHeight: 0 property real maximumHeight: 0
@ -72,6 +73,8 @@ Item {
property Component rightComponent property Component rightComponent
signal iconClicked signal iconClicked
signal keyPressed(var event)
signal editClicked()
implicitWidth: 448 implicitWidth: 448
implicitHeight: multiline ? Math.min(Math.max( implicitHeight: multiline ? Math.min(Math.max(
@ -115,8 +118,8 @@ Item {
cursorShape: Qt.IBeamCursor cursorShape: Qt.IBeamCursor
onClicked: { onClicked: {
edit.forceActiveFocus() edit.forceActiveFocus()
root.editClicked()
} }
RowLayout { RowLayout {
anchors { anchors {
fill: parent fill: parent
@ -186,7 +189,12 @@ Item {
Keys.onReturnPressed: event.accepted = !multiline Keys.onReturnPressed: event.accepted = !multiline
Keys.onEnterPressed: event.accepted = !multiline Keys.onEnterPressed: event.accepted = !multiline
Keys.forwardTo: [root] Keys.forwardTo: [root]
Keys.onPressed: edit.keyEvent = event.key KeyNavigation.priority: !!root.tabNavItem ? KeyNavigation.BeforeItem : KeyNavigation.AfterItem
KeyNavigation.tab: root.tabNavItem
Keys.onPressed: {
edit.keyEvent = event.key
root.keyPressed(event);
}
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle) onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
onActiveFocusChanged: if (root.pristine) root.pristine = false onActiveFocusChanged: if (root.pristine) root.pristine = false

View File

@ -107,6 +107,8 @@ Item {
property var pendingValidators: [] property var pendingValidators: []
signal iconClicked() signal iconClicked()
signal keyPressed(var event)
signal editClicked()
/*! /*!
\qmltype ValidationMode \qmltype ValidationMode
@ -290,6 +292,12 @@ Item {
Keys.forwardTo: [root] Keys.forwardTo: [root]
onIconClicked: root.iconClicked() onIconClicked: root.iconClicked()
onKeyPressed: {
root.keyPressed(event);
}
onEditChanged: {
root.editClicked();
}
} }
StatusBaseText { StatusBaseText {

View File

@ -7,6 +7,42 @@ import StatusQ.Popups 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
/*!
\qmltype StatusSeedPhraseInput
\inherits Item
\inqmlmodule StatusQ.Controls
\since StatusQ.Controls 0.1
\brief Displays a text input with suggestions. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
The \c StatusSeedPhraseInput item displays a text input with suggestions filtered based on the typed text.
For example:
\qml
StatusSeedPhraseInput {
id: statusSeedInput
anchors.left: parent.left
anchors.right: parent.right
textEdit.input.anchors.leftMargin: 16
textEdit.input.anchors.rightMargin: 16
textEdit.input.anchors.topMargin: 11
leftComponentText: "1"
inputList: ListModel {
ListElement {
seedWord: "panda"
}
ListElement {
seedWord: "posible"
}
ListElement {
seedWord: "wing"
}
}
}
\endqml
For a list of components available see StatusQ.
*/
Item { Item {
id: root id: root
width: 162 width: 162
@ -17,6 +53,12 @@ Item {
property ListModel inputList: ListModel { } property ListModel inputList: ListModel { }
property ListModel filteredList: ListModel { } property ListModel filteredList: ListModel { }
signal doneInsertingWord(string word) signal doneInsertingWord(string word)
/*
This signal is emitted when the user pressed a keyboard key and passes as a
parameter the event. The corresponding handler is \c onKeyPressed.
*/
signal keyPressed(var event)
signal editClicked()
onActiveFocusChanged: { onActiveFocusChanged: {
if (root.activeFocus) { if (root.activeFocus) {
@ -57,6 +99,12 @@ Item {
seedSuggestionsList.model = 0; seedSuggestionsList.model = 0;
} }
} }
onKeyPressed: {
root.keyPressed(event);
}
onEditClicked: {
root.editClicked();
}
} }
Item { Item {