LedDisplay/OmobiDisplayApp/ressources/qml/CollapsableItemDelegate.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

ItemDelegate {
    id: control

    property bool expanded: false
    property Component expandedComponent: Component {
        Rectangle {
            implicitHeight: 100
            color: "red"
        }
    }

    height: 70 + expandedItemContainer.height

    contentItem: Item {}

    state: expanded ? "open":"closed"

    Item {
        id: expandedItemContainer

        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            margins: 5
        }

        clip: true

        height: control.state === "open" && expandedItemLoader.status === Loader.Ready && expandedItemLoader.item !== undefined ? expandedItemLoader.item.implicitHeight:0

        Behavior on height {
            NumberAnimation {
                duration: 200
            }
        }

        Loader {
            id: expandedItemLoader

            anchors.centerIn: parent

            width: parent.width

            onEnabledChanged: {
                if(enabled){
                    sourceComponent = control.expandedComponent
                }
                else {
                    hideDelayPa.start()
                }
            }

            anchors.fill: parent

            PauseAnimation {
                id: hideDelayPa

                duration: 200

                onRunningChanged: {
                    if(!running && !expandedItemLoader.enabled){
                        expandedItemLoader.sourceComponent = undefined
                    }
                }
            }
        }


    }

    states: [
        State {
            name: "closed"

            PropertyChanges {
                target: expandedItemLoader
                enabled: false
            }
        },
        State {
            name: "opened"

            PropertyChanges {
                target: expandedItemLoader
                enabled: true
            }
        }
    ]
}