slint/internal/compiler/widgets/material-base/widget-table-view.slint

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { LineEditInner } from "../common/common.slint";
import { ScrollView } from "std-widgets-impl.slint";
import { StateLayer } from "comp-state-layer.slint";
import { md } from "md.slint";

component TableViewColumn inherits Rectangle {
    callback clicked <=> state-layer.clicked;
    callback adjust_size(length);

    in property <SortOrder> sort-order: SortOrder.unsorted;

    state-layer := StateLayer {
        background: md.sys.color.primary;
        selection-background: md.sys.color.secondary-container;
        ripple-color: md.sys.color.primary-ripple;
        has-ripple: true;
    }

    HorizontalLayout {
        padding-left: 16px;
        padding-right: 16px;
        spacing: 4px;

        HorizontalLayout {
            @children
        }

        Path {
            visible: root.sort-order != SortOrder.unsorted;
            width: 12px;
            height: 12px;
            y: (parent.height - self.height) / 2;
            commands: root.sort-order == SortOrder.ascending ?
                "M24 44 10 30l2.1-2.1 10.4 10.4V4h3v34.3l10.4-10.4L38 30Z" :
                "M22.5 44V9.7L12.1 20.1 10 18 24 4l14 14-2.1 2.1L25.5 9.7V44Z";
            fill: md.sys.color.on-surface;
        }
    }

    // border
    Rectangle {
        y: parent.height - self.height;
        width: 100%;
        height: 1px;
        background: md.sys.color.outline;
    }

    Rectangle {
        width: 1px;
        x: parent.width - 1px;
        background: movable-ta.has-hover ? md.sys.color.outline : transparent;
        animate background { duration: 250ms; }
        movable-ta := TouchArea {
            width: 10px;
            moved => {
                if (self.pressed) {
                    adjust_size(self.mouse-x - self.pressed-x);
                }
            }
            mouse-cursor: ew-resize;
        }
    }
}

component TableViewCell inherits Rectangle {
    clip: true;

    HorizontalLayout {
        padding-left: 16px;
        padding-right: 16px;

        @children
    }

    // border
    Rectangle {
        y: parent.height - self.height;
        width: 100%;
        height: 1px;
        background: md.sys.color.outline;
    }
}

component TableViewRow inherits Rectangle {
    callback clicked <=> state-layer.clicked;

    in property<bool> selected;

    min-height: 42px;

    state-layer := StateLayer {
        checked: root.selected;
        background: md.sys.color.primary;
        selection-background: md.sys.color.secondary-container;
        ripple-color: md.sys.color.primary-ripple;
        has-ripple: true;
    }

    HorizontalLayout {
       @children
    }

    states [
        selected when root.selected : {
            state-layer.background: md.sys.color.secondary-container;
        }
    ]
}

export component StandardTableView {
    private property <length> item-height: scroll-view.viewport-height / rows.length;
    private property <length> current-item-y: scroll-view.viewport-y + current-row * item-height;

    callback sort-ascending(int);
    callback sort-descending(int);

    private property <length> min-header-height: 42px;
    out property <int> current-sort-column: -1;
    in-out property <[TableColumn]> columns;
    in property <[[StandardListViewItem]]> rows;
    in-out property<int> current-row: -1;

    min-width: 400px;
    min-height: 200px;
    horizontal-stretch: 1;
    vertical-stretch: 1;

    public function set-current-row(index: int) {
        if(index < 0 || index >= rows.length) {
            return;
        }

        current-row = index;

        if(current-item-y < 0) {
            scroll-view.viewport-y += 0 - current-item-y;
        }

        if(current-item-y + item-height > scroll-view.visible-height) {
            scroll-view.viewport-y -= current-item-y + item-height - scroll-view.visible-height;
        }
    }

    function sort(index: int) {
        if (root.current-sort-column != index) {
            root.columns[root.current-sort-column].sort-order = SortOrder.unsorted;
        }

        if(root.columns[index].sort-order == SortOrder.ascending) {
            root.columns[index].sort-order = SortOrder.descending;
            root.sort-descending(index);
        } else {
            root.columns[index].sort-order = SortOrder.ascending;
            root.sort-ascending(index);
        }

        root.current-sort-column = index;
    }

    VerticalLayout {
        Rectangle {
            clip: true;
            vertical-stretch: 0;
            min-height: header-layout.min-height;

            header-layout := HorizontalLayout {
                padding-right: 20px;
                min-height: root.min-header-height;
                vertical-stretch: 0;
                for column[index] in root.columns : TableViewColumn {
                    sort-order: column.sort-order;
                    horizontal-stretch: column.horizontal-stretch;
                    min-width: max(column.min-width, column.width);
                    preferred-width: self.min-width;
                    max-width: (index < columns.length && column.width >= 1px) ? max(column.min-width, column.width) : 100000px;

                    Text {
                        vertical-alignment: center;
                        text: column.title;
                        font-weight: 900;
                        overflow: elide;
                    }

                    clicked => {
                        root.sort(index);
                    }

                    adjust-size(diff) => {
                        column.width = max(1px, self.width + diff);
                    }
                }
            }
        }

        scroll-view := ScrollView {
            vertical-stretch: 1;

            VerticalLayout {
                alignment: start;

                for row[idx] in root.rows : TableViewRow {
                    selected: idx == root.current-row;

                    for cell[index] in row : TableViewCell {
                        private property <bool> has_inner_focus;
                        horizontal-stretch: root.columns[index].horizontal-stretch;
                        min-width: max(columns[index].min-width, columns[index].width);
                        preferred-width: self.min-width;
                        max-width: (index < columns.length && columns[index].width >= 1px) ? max(columns[index].min-width, columns[index].width) : 100000px;

                        Rectangle {
                            Text {
                                width: 100%;
                                height: 100%;
                                overflow: elide;
                                vertical-alignment: center;
                                text: cell.text;
                            }
                        }
                    }

                    clicked => {
                        root.set-current-row(idx);
                    }
                }
            }
        }
    }

    FocusScope {
        key-pressed(event) => {
            if (event.text == Key.UpArrow) {
                root.set-current-row(root.current-row - 1);
                return accept;
            } else if (event.text == Key.DownArrow) {
                root.set-current-row(root.current-row + 1);
                return accept;
            }
            reject
        }
    }
}