Skip to content

Commit

Permalink
docs(tree): Update interface for selectionMode. (#5801)
Browse files Browse the repository at this point in the history 
**Related Issue:** 

## Summary

docs(tree): Update interface for selectionMode.

cc @macandcheese
  • Loading branch information
@driskull
driskull authored Nov 23, 2022
1 parent 688ed42 commit 6ef4c6a
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 50 deletions.
25 changes: 11 additions & 14 deletions src/components/tree-item/tree-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,9 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
@Watch("selectionMode")
getselectionMode(): void {
this.isSelectionMultiLike =
this.selectionMode === TreeSelectionMode.Multiple ||
this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.MultiChildren;
this.selectionMode === "multiple" ||
this.selectionMode === "multi" ||
this.selectionMode === "multichildren";
}

//--------------------------------------------------------------------------
Expand Down Expand Up @@ -185,14 +185,12 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent

render(): VNode {
const rtl = getElementDir(this.el) === "rtl";
const showBulletPoint =
this.selectionMode === TreeSelectionMode.Single ||
this.selectionMode === TreeSelectionMode.Children;
const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children";
const showCheckmark =
this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.Multiple ||
this.selectionMode === TreeSelectionMode.MultiChildren;
const showBlank = this.selectionMode === TreeSelectionMode.None && !this.hasChildren;
this.selectionMode === "multi" ||
this.selectionMode === "multiple" ||
this.selectionMode === "multichildren";
const showBlank = this.selectionMode === "none" && !this.hasChildren;
const chevron = this.hasChildren ? (
<calcite-icon
class={{
Expand All @@ -207,7 +205,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
) : null;
const defaultSlotNode: VNode = <slot key="default-slot" />;
const checkbox =
this.selectionMode === TreeSelectionMode.Ancestors ? (
this.selectionMode === "ancestors" ? (
<label class={CSS.checkboxLabel} key="checkbox-label">
<calcite-checkbox
checked={this.selected}
Expand Down Expand Up @@ -293,8 +291,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
window.open(link.href, target);
}
this.calciteInternalTreeItemSelect.emit({
modifyCurrentSelection:
this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
modifyCurrentSelection: this.selectionMode === "ancestors" || this.isSelectionMultiLike,
forceToggle: false
});
}
Expand Down Expand Up @@ -406,7 +403,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
};

private updateAncestorTree = (): void => {
if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
if (this.selected && this.selectionMode === "ancestors") {
const ancestors: HTMLCalciteTreeItemElement[] = [];
let parent = this.parentTreeItem;
while (parent) {
Expand Down
10 changes: 1 addition & 9 deletions src/components/tree/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,4 @@ export interface TreeSelectDetail {
selected: HTMLCalciteTreeItemElement[];
}

export enum TreeSelectionMode {
Single = "single",
Multi = "multi",
None = "none",
Children = "children",
MultiChildren = "multichildren",
Ancestors = "ancestors",
Multiple = "multiple"
}
export type TreeSelectionMode = "single" | "multi" | "none" | "children" | "multichildren" | "ancestors" | "multiple";
11 changes: 5 additions & 6 deletions src/components/tree/tree.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
import { GlobalTestProps } from "../../tests/utils";
import { html } from "../../../support/formatting";
import { CSS } from "../tree-item/resources";
import { TreeSelectionMode } from "./interfaces";
import SpyInstance = jest.SpyInstance;

describe("calcite-tree", () => {
Expand All @@ -25,7 +24,7 @@ describe("calcite-tree", () => {
},
{
propertyName: "selectionMode",
defaultValue: TreeSelectionMode.Single
defaultValue: "single"
}
]));

Expand Down Expand Up @@ -395,11 +394,11 @@ describe("calcite-tree", () => {
expect(selectEventSpy).toHaveReceivedEventTimes(2);
});

describe(`when tree-item selection-mode is ${TreeSelectionMode.Ancestors}`, () => {
describe(`when tree-item selection-mode is "ancestors"`, () => {
it("should render checkbox inputs", async () => {
const page = await newE2EPage({
html: `
<calcite-tree selection-mode=${TreeSelectionMode.Ancestors}>
<calcite-tree selection-mode="ancestors">
<calcite-tree-item>1</calcite-tree-item>
<calcite-tree-item>2</calcite-tree-item>
</calcite-tree>
Expand All @@ -412,11 +411,11 @@ describe("calcite-tree", () => {
});
});

describe(`when tree-item selection-mode is ${TreeSelectionMode.None}`, () => {
describe(`when tree-item selection-mode is "none"`, () => {
it("allows selecting items without a selection", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-tree selection-mode=${TreeSelectionMode.None}>
<calcite-tree selection-mode="none">
<calcite-tree-item id="1">1</calcite-tree-item>
<calcite-tree-item id="2">2</calcite-tree-item>
</calcite-tree>
Expand Down
38 changes: 17 additions & 21 deletions src/components/tree/tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,7 @@ export class Tree {
* @default "single"
* @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
*/
@Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode =
TreeSelectionMode.Single;
@Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode = "single";

//--------------------------------------------------------------------------
//
Expand All @@ -86,9 +85,9 @@ export class Tree {
this.child
? undefined
: (
this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.Multiple ||
this.selectionMode === TreeSelectionMode.MultiChildren
this.selectionMode === "multi" ||
this.selectionMode === "multiple" ||
this.selectionMode === "multichildren"
).toString()
}
role={!this.child ? "tree" : undefined}
Expand Down Expand Up @@ -150,43 +149,40 @@ export class Tree {
event.stopPropagation();
}

if (this.selectionMode === TreeSelectionMode.Ancestors && !this.child) {
if (this.selectionMode === "ancestors" && !this.child) {
this.updateAncestorTree(event);
return;
}

const isNoneSelectionMode = this.selectionMode === TreeSelectionMode.None;
const isNoneSelectionMode = this.selectionMode === "none";

const shouldSelect =
this.selectionMode !== null &&
(!target.hasChildren ||
(target.hasChildren &&
(this.selectionMode === TreeSelectionMode.Children ||
this.selectionMode === TreeSelectionMode.MultiChildren)));
(this.selectionMode === "children" || this.selectionMode === "multichildren")));

const shouldModifyToCurrentSelection =
!isNoneSelectionMode &&
event.detail.modifyCurrentSelection &&
(this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.Multiple ||
this.selectionMode === TreeSelectionMode.MultiChildren);
(this.selectionMode === "multi" ||
this.selectionMode === "multiple" ||
this.selectionMode === "multichildren");

const shouldSelectChildren =
this.selectionMode === TreeSelectionMode.MultiChildren ||
this.selectionMode === TreeSelectionMode.Children;
this.selectionMode === "multichildren" || this.selectionMode === "children";

const shouldClearCurrentSelection =
!shouldModifyToCurrentSelection &&
(((this.selectionMode === TreeSelectionMode.Single ||
this.selectionMode === TreeSelectionMode.Multi ||
this.selectionMode === TreeSelectionMode.Multiple) &&
(((this.selectionMode === "single" ||
this.selectionMode === "multi" ||
this.selectionMode === "multiple") &&
childItems.length <= 0) ||
this.selectionMode === TreeSelectionMode.Children ||
this.selectionMode === TreeSelectionMode.MultiChildren);
this.selectionMode === "children" ||
this.selectionMode === "multichildren");

const shouldExpandTarget =
this.selectionMode === TreeSelectionMode.Children ||
this.selectionMode === TreeSelectionMode.MultiChildren;
this.selectionMode === "children" || this.selectionMode === "multichildren";

if (!this.child) {
const targetItems: HTMLCalciteTreeItemElement[] = [];
Expand Down

0 comments on commit 6ef4c6a

Please sign in to comment.