@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
478 lines (477 loc) • 15.6 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
*/
import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
import { TreeSelectionMode } from "../tree/interfaces";
import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
import { CSS, SLOTS, ICONS } from "./resources";
import { CSS_UTILITY } from "../../utils/resources";
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
/**
* @slot - A slot for adding content to the item.
* @slot children - A slot for adding nested `calcite-tree` elements.
*/
export class TreeItem {
constructor() {
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/** Is the item currently selected */
this.selected = false;
/** True if the item is in an expanded state */
this.expanded = false;
/** @internal Is the parent of this item expanded? */
this.parentExpanded = false;
/** @internal What level of depth is this item at? */
this.depth = -1;
/** @internal Does this tree item have a tree inside it? */
this.hasChildren = null;
this.iconClickHandler = (event) => {
event.stopPropagation();
this.expanded = !this.expanded;
};
this.childrenClickHandler = (event) => event.stopPropagation();
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
this.updateParentIsExpanded = (el, expanded) => {
const items = getSlotted(el, SLOTS.children, {
all: true,
selector: "calcite-tree-item"
});
items.forEach((item) => (item.parentExpanded = expanded));
};
this.updateAncestorTree = () => {
if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
const ancestors = [];
let parent = this.parentTreeItem;
while (parent) {
ancestors.push(parent);
parent = parent.parentElement.closest("calcite-tree-item");
}
ancestors.forEach((item) => (item.indeterminate = true));
return;
}
};
}
expandedHandler(newValue) {
this.updateParentIsExpanded(this.el, newValue);
}
getselectionMode() {
this.isSelectionMultiLike =
this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.MultiChildren;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
this.parentTreeItem = this.el.parentElement.closest("calcite-tree-item");
if (this.parentTreeItem) {
const { expanded } = this.parentTreeItem;
this.updateParentIsExpanded(this.parentTreeItem, expanded);
}
connectConditionalSlotComponent(this);
}
disconnectedCallback() {
disconnectConditionalSlotComponent(this);
}
componentWillRender() {
this.hasChildren = !!this.el.querySelector("calcite-tree");
this.depth = 0;
let parentTree = this.el.closest("calcite-tree");
if (!parentTree) {
return;
}
this.selectionMode = parentTree.selectionMode;
this.scale = parentTree.scale || "m";
this.lines = parentTree.lines;
let nextParentTree;
while (parentTree) {
nextParentTree = parentTree.parentElement.closest("calcite-tree");
if (nextParentTree === parentTree) {
break;
}
else {
parentTree = nextParentTree;
this.depth = this.depth + 1;
}
}
}
componentDidLoad() {
this.updateAncestorTree();
}
render() {
const rtl = getElementDir(this.el) === "rtl";
const showBulletPoint = this.selectionMode === TreeSelectionMode.Single ||
this.selectionMode === TreeSelectionMode.Children;
const showCheckmark = this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.MultiChildren;
const chevron = this.hasChildren ? (h("calcite-icon", { class: {
[CSS.chevron]: true,
[CSS_UTILITY.rtl]: rtl
}, "data-test-id": "icon", icon: ICONS.chevronRight, onClick: this.iconClickHandler, scale: "s" })) : null;
const defaultSlotNode = h("slot", { key: "default-slot" });
const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel, key: "checkbox-label" },
h("calcite-checkbox", { checked: this.selected, class: CSS.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }),
defaultSlotNode)) : null;
const selectedIcon = showBulletPoint
? ICONS.bulletPoint
: showCheckmark
? ICONS.checkmark
: null;
const bulletOrCheckIcon = selectedIcon ? (h("calcite-icon", { class: {
[CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,
[CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,
[CSS_UTILITY.rtl]: rtl
}, icon: selectedIcon, scale: "s" })) : null;
const hidden = !(this.parentExpanded || this.depth === 1);
return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
h("div", { class: {
[CSS.nodeContainer]: true,
[CSS_UTILITY.rtl]: rtl
}, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) },
chevron,
bulletOrCheckIcon,
checkbox ? checkbox : defaultSlotNode),
h("div", { class: {
[CSS.childrenContainer]: true,
[CSS_UTILITY.rtl]: rtl
}, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, ref: (el) => (this.childrenSlotWrapper = el), role: this.hasChildren ? "group" : undefined },
h("slot", { name: SLOTS.children }))));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
onClick(e) {
// Solve for if the item is clicked somewhere outside the slotted anchor.
// Anchor is triggered anywhere you click
const [link] = filterDirectChildren(this.el, "a");
if (link && e.composedPath()[0].tagName.toLowerCase() !== "a") {
const target = link.target === "" ? "_self" : link.target;
window.open(link.href, target);
}
this.calciteTreeItemSelect.emit({
modifyCurrentSelection: this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
forceToggle: false
});
}
keyDownHandler(e) {
let root;
switch (e.key) {
case " ":
this.calciteTreeItemSelect.emit({
modifyCurrentSelection: this.isSelectionMultiLike,
forceToggle: false
});
e.preventDefault();
break;
case "Enter":
// activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
const link = nodeListToArray(this.el.children).find((e) => e.matches("a"));
if (link) {
link.click();
this.selected = true;
}
else {
this.calciteTreeItemSelect.emit({
modifyCurrentSelection: this.isSelectionMultiLike,
forceToggle: false
});
}
e.preventDefault();
break;
case "Home":
root = this.el.closest("calcite-tree:not([child])");
const firstNode = root.querySelector("calcite-tree-item");
firstNode.focus();
break;
case "End":
root = this.el.closest("calcite-tree:not([child])");
let currentNode = root.children[root.children.length - 1]; // last child
let currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
while (currentTree) {
currentNode = currentTree.children[root.children.length - 1];
currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
}
currentNode.focus();
break;
}
}
static get is() { return "calcite-tree-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["tree-item.scss"]
}; }
static get styleUrls() { return {
"$": ["tree-item.css"]
}; }
static get properties() { return {
"selected": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is the item currently selected"
},
"attribute": "selected",
"reflect": true,
"defaultValue": "false"
},
"expanded": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "True if the item is in an expanded state"
},
"attribute": "expanded",
"reflect": true,
"defaultValue": "false"
},
"parentExpanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": "Is the parent of this item expanded?"
}],
"text": ""
},
"attribute": "parent-expanded",
"reflect": false,
"defaultValue": "false"
},
"depth": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": "What level of depth is this item at?"
}],
"text": ""
},
"attribute": "depth",
"reflect": true,
"defaultValue": "-1"
},
"hasChildren": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": "Does this tree item have a tree inside it?"
}],
"text": ""
},
"attribute": "has-children",
"reflect": true,
"defaultValue": "null"
},
"lines": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": "Draw lines (set on parent)"
}],
"text": ""
},
"attribute": "lines",
"reflect": true
},
"inputEnabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}, {
"name": "deprecated",
"text": "set \"ancestors\" selection-mode on parent tree for checkboxes"
}],
"text": "Display checkboxes (set on parent)"
},
"attribute": "input-enabled",
"reflect": false
},
"scale": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": "Scale of the parent tree, defaults to m"
}],
"text": ""
},
"attribute": "scale",
"reflect": true
},
"indeterminate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected"
}],
"text": ""
},
"attribute": "indeterminate",
"reflect": true
},
"selectionMode": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TreeSelectionMode",
"resolved": "TreeSelectionMode.Ancestors | TreeSelectionMode.Children | TreeSelectionMode.Multi | TreeSelectionMode.MultiChildren | TreeSelectionMode.Single",
"references": {
"TreeSelectionMode": {
"location": "import",
"path": "../tree/interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": "Tree selection-mode (set on parent)"
}],
"text": ""
},
"attribute": "selection-mode",
"reflect": false
}
}; }
static get events() { return [{
"method": "calciteTreeItemSelect",
"name": "calciteTreeItemSelect",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "TreeItemSelectDetail",
"resolved": "TreeItemSelectDetail",
"references": {
"TreeItemSelectDetail": {
"location": "import",
"path": "./interfaces"
}
}
}
}]; }
static get elementRef() { return "el"; }
static get watchers() { return [{
"propName": "expanded",
"methodName": "expandedHandler"
}, {
"propName": "selectionMode",
"methodName": "getselectionMode"
}]; }
static get listeners() { return [{
"name": "click",
"method": "onClick",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "keyDownHandler",
"target": undefined,
"capture": false,
"passive": false
}]; }
}