ukui-menu/qml/AppControls2/FolderItem.qml

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0

MouseArea {
    id: control
    property bool editStatus: false
    hoverEnabled: true
    ToolTip.visible: textShow.truncated && textShow.visible && control.containsMouse
    ToolTip.text: name

    StyleBackground {
        anchors.fill: parent
        radius: 4
        useStyleTransparent: false
        alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00

        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 12
            spacing: 12

            FolderIcon {
                rows: 2; columns: 2
                spacing: 2; padding: 2
                icons: icon
                Layout.alignment: Qt.AlignVCenter
                Layout.preferredWidth: 32
                Layout.preferredHeight: 32
            }

            Item {
                id: renameArea
                Layout.fillWidth: true
                Layout.fillHeight: true

                StyleText {
                    id: textShow
                    anchors.fill: parent
                    visible: !control.editStatus
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignLeft
                    elide: Text.ElideRight
                    text: name
                }

                AppControls2.StyleBackground {
                    anchors.fill: parent
                    radius: 6
                    useStyleTransparent: false
                    alpha: textChange.activeFocus ? 0.04 : 0
                    paletteRole: Palette.Text
                    border.width: 2
                    borderAlpha: textChange.activeFocus ? 1 : 0
                    borderColor: Palette.Highlight

                    TextInput {
                        id: textChange
                        text: name
                        visible: control.editStatus
                        focus: false
                        clip: true
                        anchors.left: parent.left
                        anchors.leftMargin: 8
                        anchors.right: buttonMouseArea.left
                        anchors.rightMargin: 8
                        anchors.verticalCenter: parent.verticalCenter
                        activeFocusOnPress: false
                        verticalAlignment: Text.AlignVCenter
                        selectByMouse: true
                        maximumLength: 14

                        onEditingFinished: {
                            modelManager.getAppModel().renameFolder(id, text);
                            control.editStatus = false;
                        }

                        function updateTextInputColor() {
                            color = themePalette.paletteColor(Palette.Text);
                            selectionColor = themePalette.paletteColor(Palette.Highlight);
                        }

                        Component.onCompleted: {
                            updateTextInputColor();
                            themePalette.styleColorChanged.connect(updateTextInputColor);
                        }

                        Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor);
                    }

                    MouseArea {
                        id: buttonMouseArea
                        hoverEnabled: true
                        width: 16; height: width
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        visible: textChange.activeFocus

                        ThemeIcon {
                            anchors.centerIn: parent
                            width: 16; height: width
                            source: "image://appicon/edit-clear-symbolic"
                        }

                        onClicked: {
                            textChange.text = name;
                            control.editStatus = false;
                        }
                    }

                }

            }
        }
    }
    onEditStatusChanged: {
        if (editStatus) {
            textChange.forceActiveFocus();
            textChange.focus = true;
        }
        else {
            textChange.focus = false
        }
    }
}