@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
337 lines (336 loc) • 11 kB
JavaScript
import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
import { focusElement, nodeListToArray } from "../../utils/dom";
import { TreeSelectionMode } from "./interfaces";
export class CalciteTree {
constructor() {
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/** Display indentation guide lines */
this.lines = false;
/** Display input */
this.inputEnabled = false;
/** Specify the scale of the tree, defaults to m */
this.scale = "m";
/** Customize how tree selection works (single, multi, children, multi-children) */
this.selectionMode = TreeSelectionMode.Single;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillRender() {
const parent = this.el.parentElement.closest("calcite-tree");
this.lines = parent ? parent.lines : this.lines;
this.scale = parent ? parent.scale : this.scale;
this.inputEnabled = parent ? parent.inputEnabled : this.inputEnabled;
this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
this.child = !!parent;
}
render() {
return (h(Host, { "aria-multiselectable": this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.MultiChildren, role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() },
h("slot", null)));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
onFocus() {
if (!this.child) {
const focusTarget = this.el.querySelector("calcite-tree-item[selected]") ||
this.el.querySelector("calcite-tree-item");
focusElement(focusTarget);
}
}
onFocusIn(event) {
const focusedFromRootOrOutsideTree = event.relatedTarget === this.el || !this.el.contains(event.relatedTarget);
if (focusedFromRootOrOutsideTree) {
this.el.tabIndex = -1;
}
}
onFocusOut(event) {
const willFocusOutsideTree = !this.el.contains(event.relatedTarget);
if (willFocusOutsideTree) {
this.el.tabIndex = this.getRootTabIndex();
}
}
onClick(e) {
const target = e.target;
const childItems = nodeListToArray(target.querySelectorAll("calcite-tree-item"));
if (!this.child) {
e.preventDefault();
e.stopPropagation();
}
if (this.selectionMode === TreeSelectionMode.Ancestors && !this.child) {
this.updateAncestorTree(e);
return;
}
const shouldSelect = this.selectionMode !== null &&
(!target.hasChildren ||
(target.hasChildren &&
(this.selectionMode === TreeSelectionMode.Children ||
this.selectionMode === TreeSelectionMode.MultiChildren)));
const shouldModifyToCurrentSelection = e.detail.modifyCurrentSelection &&
(this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.MultiChildren);
const shouldSelectChildren = this.selectionMode === TreeSelectionMode.MultiChildren ||
this.selectionMode === TreeSelectionMode.Children;
const shouldClearCurrentSelection = !shouldModifyToCurrentSelection &&
(((this.selectionMode === TreeSelectionMode.Single ||
this.selectionMode === TreeSelectionMode.Multi) &&
childItems.length <= 0) ||
this.selectionMode === TreeSelectionMode.Children ||
this.selectionMode === TreeSelectionMode.MultiChildren);
const shouldExpandTarget = this.selectionMode === TreeSelectionMode.Children ||
this.selectionMode === TreeSelectionMode.MultiChildren;
if (!this.child) {
const targetItems = [];
if (shouldSelect) {
targetItems.push(target);
}
if (shouldSelectChildren) {
childItems.forEach((treeItem) => {
targetItems.push(treeItem);
});
}
if (shouldClearCurrentSelection) {
const selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item[selected]"));
selectedItems.forEach((treeItem) => {
if (!targetItems.includes(treeItem)) {
treeItem.selected = false;
}
});
}
if (shouldExpandTarget && !e.detail.forceToggle) {
target.expanded = true;
}
if (shouldModifyToCurrentSelection) {
window.getSelection().removeAllRanges();
}
if ((shouldModifyToCurrentSelection && target.selected) ||
(shouldSelectChildren && e.detail.forceToggle)) {
targetItems.forEach((treeItem) => {
treeItem.selected = false;
});
}
else {
targetItems.forEach((treeItem) => {
treeItem.selected = true;
});
}
}
this.calciteTreeSelect.emit({
selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
});
}
updateAncestorTree(e) {
const item = e.target;
const children = item.querySelectorAll("calcite-tree-item");
const ancestors = [];
let parent = item.parentElement.closest("calcite-tree-item");
while (parent) {
ancestors.push(parent);
parent = parent.parentElement.closest("calcite-tree-item");
}
item.selected = !item.selected;
item.indeterminate = false;
if (children === null || children === void 0 ? void 0 : children.length) {
children.forEach((el) => {
el.selected = item.selected;
el.indeterminate = false;
});
}
if (ancestors) {
ancestors.forEach((ancestor) => {
const descendants = nodeListToArray(ancestor.querySelectorAll("calcite-tree-item"));
const activeDescendants = descendants.filter((el) => el.selected);
if (activeDescendants.length === 0) {
ancestor.selected = false;
ancestor.indeterminate = false;
return;
}
const indeterminate = activeDescendants.length < descendants.length;
ancestor.indeterminate = indeterminate;
ancestor.selected = !indeterminate;
});
}
this.calciteTreeSelect.emit({
selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
});
}
// --------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
getRootTabIndex() {
return !this.child ? 0 : -1;
}
static get is() { return "calcite-tree"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["calcite-tree.scss"]
}; }
static get styleUrls() { return {
"$": ["calcite-tree.css"]
}; }
static get properties() { return {
"lines": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Display indentation guide lines"
},
"attribute": "lines",
"reflect": true,
"defaultValue": "false"
},
"inputEnabled": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Display input"
},
"attribute": "input-enabled",
"reflect": false,
"defaultValue": "false"
},
"child": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": "If this tree is nested within another tree, set to false",
"name": "internal"
}],
"text": ""
},
"attribute": "child",
"reflect": true
},
"scale": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Extract<\"s\" | \"m\", Scale>",
"resolved": "\"m\" | \"s\"",
"references": {
"Extract": {
"location": "global"
},
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specify the scale of the tree, defaults to m"
},
"attribute": "scale",
"reflect": true,
"defaultValue": "\"m\""
},
"selectionMode": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TreeSelectionMode",
"resolved": "TreeSelectionMode.Ancestors | TreeSelectionMode.Children | TreeSelectionMode.Multi | TreeSelectionMode.MultiChildren | TreeSelectionMode.Single",
"references": {
"TreeSelectionMode": {
"location": "import",
"path": "./interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Customize how tree selection works (single, multi, children, multi-children)"
},
"attribute": "selection-mode",
"reflect": true,
"defaultValue": "TreeSelectionMode.Single"
}
}; }
static get events() { return [{
"method": "calciteTreeSelect",
"name": "calciteTreeSelect",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property."
},
"complexType": {
"original": "TreeSelectDetail",
"resolved": "TreeSelectDetail",
"references": {
"TreeSelectDetail": {
"location": "import",
"path": "./interfaces"
}
}
}
}]; }
static get elementRef() { return "el"; }
static get listeners() { return [{
"name": "focus",
"method": "onFocus",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "focusin",
"method": "onFocusIn",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "focusout",
"method": "onFocusOut",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "calciteTreeItemSelect",
"method": "onClick",
"target": undefined,
"capture": false,
"passive": false
}]; }
}