ExpandingListView

Rectangle {

    property alias list: list
    property alias mouseArea: headerMouseArea
    property alias headerText: headerText
    property alias listContainer: listContainer

    id: header
    height: Constants.appHeaderHeight
    width: parent.width
    color: "lightgrey"

    ToolIcon {
        id: arrow
        iconId: "icon-m-common-drilldown-arrow" + (theme.inverted ? "-inverse" : "")
        anchors.left: header.left
        anchors.verticalCenter: parent.verticalCenter
        //anchors.leftMargin: -20
    }
    Text {
        id: headerText
        anchors.left: arrow.right
        //anchors.leftMargin: 10
        font.pixelSize: Constants.expandingListViewHeaderSize
        anchors.verticalCenter: parent.verticalCenter
    }
    MouseArea {
        id: headerMouseArea
        anchors.fill: parent
//        onClicked: {
//            if (list.state == 'open') {
//                list.state = 'close';
//            } else if (list.count < 1) {
//                list.model = findingServiceWrapper.getCategories()
//                list.state = 'open';
//            }
//        }
    }
    Rectangle {
        id: listContainer
        width: parent.width
        height: 0
        anchors.top: header.bottom
        ListView {
            id: list
            anchors.fill: parent
            clip: true
            delegate:
                Rectangle {
                height: 75
                width: parent.width
                color: "lightgrey"
                Text {
                    text: model.modelData.name
                    font.pixelSize: Constants.expandingListViewItemSize
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                }
                Rectangle {
                    id: selectionRect
                    color: "grey"
                    opacity: 0
                    anchors.fill: parent
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        selectionRect.opacity = 0.5
                    }
                    onExited: {
                        selectionRect.opacity = 0
                    }
                }
            }
            states: [
                State {
                    name: "open"
                    PropertyChanges { target: listContainer; height: 375; }
                    PropertyChanges { target: arrow; rotation: 90; }
                },
                State {
                    name: "close"
                    PropertyChanges { target: listContainer; height: 0; }
                    PropertyChanges { target: arrow; rotation: 0; }
                }
            ]
            transitions: [
                Transition {
                    from: "*"; to: "open"
                    NumberAnimation { properties: "height"; easing.type: Easing.OutBounce; duration: 1000 }
                    NumberAnimation { properties: "rotation"; easing.type: Easing.OutBounce; duration: 1000 }
                },
                Transition {
                    from: "*"; to: "close"
                    NumberAnimation { properties: "height"; easing.type: Easing.OutBounce; duration: 1000 }
                    NumberAnimation { properties: "rotation"; easing.type: Easing.OutBounce; duration: 1000 }
                }
            ]
        }
    }
}