linphone-desktop/Linphone/view/Control/Input/TextField.qml

import QtQuick
import QtQuick.Controls.Basic as Control
import QtQuick.Layouts
import Linphone
import CustomControls 1.0
import 'qrc:/qt/qml/Linphone/view/Control/Tool/Helper/utils.js' as Utils
import "qrc:/qt/qml/Linphone/view/Style/buttonStyle.js" as ButtonStyle

Control.TextField {
    id: mainItem
    property var customWidth
    width: Utils.getSizeWithScreenRatio(customWidth ? customWidth - 1 : 360)
    height: Utils.getSizeWithScreenRatio(49)
    leftPadding: Utils.getSizeWithScreenRatio(15)
    rightPadding: eyeButton.visible
        ? Utils.getSizeWithScreenRatio(5) + eyeButton.width + eyeButton.rightMargin
        : Utils.getSizeWithScreenRatio(15)
    echoMode: (hidden && !eyeButton.checked) ? TextInput.Password : TextInput.Normal

    // Workaround for Windows slowness when first typing a password
    // due to Qt not initializing the Password echo mode before the first letter is typed
    Component.onCompleted: {
        text = "workaround"
        resetText()
    }

    verticalAlignment: TextInput.AlignVCenter
    color: isError ? DefaultStyle.danger_500_main : DefaultStyle.main2_600
    placeholderTextColor: DefaultStyle.placeholders
    font {
        family: DefaultStyle.defaultFont
        pixelSize: Typography.p1.pixelSize
        weight: Typography.p1.weight
    }
    selectByMouse: true
    activeFocusOnTab: true
    KeyNavigation.right: eyeButton
    text: initialText

    property bool controlIsDown: false
    property bool hidden: false
    property bool isError: false
	property bool keyboardFocus: FocusHelper.keyboardFocus
    // Background properties
    property bool backgroundVisible: true
    property color backgroundColor: DefaultStyle.grey_100
    property color disabledBackgroundColor: DefaultStyle.grey_200
    // Border properties
    property color backgroundBorderColor: DefaultStyle.grey_200
    property color activeBorderColor: DefaultStyle.main1_500_main
	property color keyboardFocusedBorderColor: DefaultStyle.main2_900
	property color errorBorderColor: DefaultStyle.danger_500_main
	property real borderWidth: Utils.getSizeWithScreenRatio(1)
	property real keyboardFocusedBorderWidth: Utils.getSizeWithScreenRatio(3)
    // Text properties
    property string initialText
    property real pixelSize: Typography.p1.pixelSize
    property real weight: Typography.p1.weight

    // fill propertyName and propertyOwner to check text validity
    property string propertyName
    property var propertyOwner
    property var propertyOwnerGui
    property var initialReading: true
    property var isValid: function (text) {
        return true
    }
    property bool toValidate: false
    property int idleTimeOut: 200
    property bool empty: propertyOwnerGui
        ? mainItem.propertyOwnerGui.core != undefined && mainItem.propertyOwnerGui.core[mainItem.propertyName]?.length == 0
        : mainItem.propertyOwner != undefined && mainItem.propertyOwner[mainItem.propertyName]?.length == 0
    property bool canBeEmpty: true

    signal validationChecked(bool valid)

    function resetText() {
        text = initialText
    }

    signal enterPressed

    onAccepted: {
        // No need to process changing focus because of TextEdited callback.
        idleTimer.stop()
        updateText()
    }
    onTextChanged: {
        if (mainItem.toValidate) {
            idleTimer.restart()
        }
    }
    function updateText() {
        mainItem.empty = text.length == 0
        if (initialReading) {
            initialReading = false
        }
        if (mainItem.empty && !mainItem.canBeEmpty) {
            mainItem.validationChecked(false)
            return
        }
        if (mainItem.propertyName && isValid(text)) {
            if (mainItem.propertyOwnerGui) {
                if (mainItem.propertyOwnerGui.core[mainItem.propertyName] != text) {
                    mainItem.propertyOwnerGui.core[mainItem.propertyName] = text
                }
            } else {
                if (mainItem.propertyOwner[mainItem.propertyName] != text)
                    mainItem.propertyOwner[mainItem.propertyName] = text
            }
            mainItem.validationChecked(true)
        } else
            mainItem.validationChecked(false)
    }
    // Validation textfield functions
    Timer {
        id: idleTimer
        running: false
        interval: mainItem.idleTimeOut
        repeat: false
        onTriggered: {
            mainItem.accepted()
        }
    }

    background: Rectangle {
        id: inputBackground
        visible: mainItem.backgroundVisible
        anchors.fill: parent
        radius: Utils.getSizeWithScreenRatio(79)
        color: mainItem.enabled ? mainItem.backgroundColor : mainItem.disabledBackgroundColor
        border.color: mainItem.isError ? mainItem.errorBorderColor : mainItem.keyboardFocus ? mainItem.keyboardFocusedBorderColor : mainItem.activeFocus ? mainItem.activeBorderColor : mainItem.backgroundBorderColor
        border.width: mainItem.keyboardFocus ? mainItem.keyboardFocusedBorderWidth : mainItem.borderWidth
    }

    cursorDelegate: Rectangle {
        id: cursor
        color: DefaultStyle.main1_500_main
        width: Utils.getSizeWithScreenRatio(1)
        anchors.verticalCenter: mainItem.verticalCenter

        SequentialAnimation {
            loops: Animation.Infinite
            running: mainItem.cursorVisible

            PropertyAction {
                target: cursor
                property: 'visible'
                value: true
            }

            PauseAnimation {
                duration: 600
            }

            PropertyAction {
                target: cursor
                property: 'visible'
                value: false
            }

            PauseAnimation {
                duration: 600
            }

            onStopped: {
                cursor.visible = false
            }
        }
    }
    Keys.onPressed: event => {
        if (event.key == Qt.Key_Control)
        mainItem.controlIsDown = true
        if (event.key === Qt.Key_Enter
            || event.key === Qt.Key_Return) {
            enterPressed()
            if (mainItem.controlIsDown) {

            }
        }
    }
    Keys.onReleased: event => {
        if (event.jey == Qt.Key_Control)
        mainItem.controlIsDown = false
    }

    Button {
        id: eyeButton
        KeyNavigation.left: mainItem
        property real rightMargin: Utils.getSizeWithScreenRatio(15)
        z: 1
        visible: mainItem.hidden
        checkable: true
        style: ButtonStyle.noBackground
        icon.source: eyeButton.checked ? AppIcons.eyeShow : AppIcons.eyeHide
        width: Utils.getSizeWithScreenRatio(20)
        height: Utils.getSizeWithScreenRatio(20)
        icon.width: width
        icon.height: height
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: rightMargin
        
        Accessible.name: (eyeButton.checked ?
            //: Hide %1
            qsTr("hide_accessible_name") :
            //: Show %1
            qsTr("show_accessible_name")
        ).arg(mainItem.Accessible.name)
    }
}