Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import {
TreeDataAdapter,
TreeDataRow,
// eslint-disable-next-line import/no-unassigned-import
class TestCardRow extends customElements.get("tree-view-table-row") {
static ROW_HEIGHT = 30;
static COLUMNS = [
{
id: "testCol",
},
];
connectedCallback() {
if (this.hasConnected) {
return;
}
super.connectedCallback();
this.cell = this.appendChild(document.createElement("td"));
const container = this.cell.appendChild(document.createElement("div"));
this.threader = container.appendChild(document.createElement("button"));
this.threader.textContent = "↳";
this.threader.classList.add("tree-button-thread");
this.twisty = container.appendChild(document.createElement("div"));
this.twisty.textContent = "v";
this.twisty.classList.add("twisty");
this.d2 = container.appendChild(document.createElement("div"));
this.d2.classList.add("d2");
}
fillRow() {
super.fillRow();
this.id = this.view.getRowProperties(this._index);
this.classList.remove("level0", "level1", "level2");
this.classList.add(`level${this.view.getLevel(this._index)}`);
this.d2.textContent = this.view.getCellText(this._index, "text");
}
}
customElements.define("test-row", TestCardRow, { extends: "tr" });
class TreeItem extends TreeDataRow {
constructor(id, text) {
super({ text });
this.id = id;
}
getProperties() {
return this.id;
}
}
const testView = new TreeDataAdapter();
testView._rowMap.push(new TreeItem("row-1", "Item with no children"));
testView._rowMap.push(new TreeItem("row-2", "Item with children"));
testView._rowMap.push(new TreeItem("row-3", "Item with grandchildren"));
testView._rowMap[1].appendRow(new TreeItem("row-2-1", "First child"));
testView._rowMap[1].appendRow(new TreeItem("row-2-2", "Second child"));
testView._rowMap[2].appendRow(new TreeItem("row-3-1", "First child"));
testView._rowMap[2].children[0].appendRow(
new TreeItem("row-3-1-1", "First grandchild")
);
testView._rowMap[2].children[0].appendRow(
new TreeItem("row-3-1-2", "Second grandchild")
);
testView.toggleOpenState(1);
testView.toggleOpenState(4);
testView.toggleOpenState(5);
const tree = document.getElementById("testTree");
tree.table.setBodyID("testBody");
tree.setAttribute("rows", "test-row");
tree.table.setColumns(TestCardRow.COLUMNS);
tree.addEventListener("select", () => {
console.log("select event, selected indices:", tree.selectedIndices);
});
tree.view = testView;