feat(tree): add none selection mode (#5128)

#3121
Esri · Aug 16, 2022 · e96bfbe · e96bfbe
1 parent 2e2b694
commit e96bfbe
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 28 deletions.
diff --git a/src/components/tree-item/resources.ts b/src/components/tree-item/resources.ts
@@ -15,5 +15,6 @@ export const SLOTS = {
 export const ICONS = {
   bulletPoint: "bullet-point",
   checkmark: "check",
-  chevronRight: "chevron-right"
+  chevronRight: "chevron-right",
+  blank: "blank"
 };
diff --git a/src/components/tree-item/tree-item.scss b/src/components/tree-item/tree-item.scss
@@ -5,6 +5,12 @@
     cursor-pointer;
 }
 
+:host([selection-mode="none"]:not([has-children])) {
+  .node-container {
+    margin-inline: theme("margin.3");
+  }
+}
+
 @include calciteHydratedHidden();
 
 :host([scale="s"]) {
@@ -177,7 +183,7 @@
 }
 
 // dropdown expanded and not selected
-:host([has-children][expanded]:not([selected])) > .node-container {
+:host([has-children][expanded]:not([selected]):not([selection-mode="none"])) > .node-container {
   ::slotted(*) {
     @apply text-color-1 font-medium;
   }

diff --git a/src/components/tree-item/tree-item.tsx b/src/components/tree-item/tree-item.tsx
@@ -107,7 +107,7 @@ export class TreeItem implements ConditionalSlotComponent {
   /**
    * @internal
    */
-  @Prop({ mutable: true }) selectionMode: TreeSelectionMode;
+  @Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode;
 
   @Watch("selectionMode")
   getselectionMode(): void {
@@ -213,7 +213,7 @@ export class TreeItem implements ConditionalSlotComponent {
       : showCheckmark
       ? ICONS.checkmark
       : null;
-    const bulletOrCheckIcon = selectedIcon ? (
+    const itemIndicator = selectedIcon ? (
       <calcite-icon
         class={{
           [CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,
@@ -245,7 +245,7 @@ export class TreeItem implements ConditionalSlotComponent {
           ref={(el) => (this.defaultSlotWrapper = el as HTMLElement)}
         >
           {chevron}
-          {bulletOrCheckIcon}
+          {itemIndicator}
           {checkbox ? checkbox : defaultSlotNode}
         </div>
         <div

diff --git a/src/components/tree/interfaces.ts b/src/components/tree/interfaces.ts
@@ -5,6 +5,7 @@ export interface TreeSelectDetail {
 export enum TreeSelectionMode {
   Single = "single",
   Multi = "multi",
+  None = "none",
   Children = "children",
   MultiChildren = "multi-children",
   Ancestors = "ancestors"

diff --git a/src/components/tree/tree.e2e.ts b/src/components/tree/tree.e2e.ts
@@ -373,6 +373,44 @@ describe("calcite-tree", () => {
         expect(checkbox).not.toBeNull();
       });
     });
+
+    describe(`when tree-item selection-mode is ${TreeSelectionMode.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-item id="1">1</calcite-tree-item>
+            <calcite-tree-item id="2">2</calcite-tree-item>
+          </calcite-tree>
+        `);
+
+        type TestWindow = GlobalTestProps<{
+          selectedIds: string[];
+        }>;
+
+        await page.evaluateHandle(() =>
+          document.addEventListener("calciteTreeSelect", ({ detail }: CustomEvent) => {
+            (window as TestWindow).selectedIds = detail.selected.map((item) => item.id);
+          })
+        );
+
+        const getSelectedIds = async (): Promise<any> => page.evaluate(() => (window as TestWindow).selectedIds);
+
+        const tree = await page.find(`calcite-tree`);
+        const selectEventSpy = await tree.spyOnEvent("calciteTreeSelect");
+        const [item1, item2] = await page.findAll(`calcite-tree-item`);
+
+        await item1.click();
+        expect(selectEventSpy).toHaveReceivedEventTimes(1);
+        expect(await getSelectedIds()).toEqual(["1"]);
+        expect(await page.findAll("calcite-tree-item[selected]")).toHaveLength(0);
+
+        await item2.click();
+        expect(selectEventSpy).toHaveReceivedEventTimes(2);
+        expect(await getSelectedIds()).toEqual(["2"]);
+        expect(await page.findAll("calcite-tree-item[selected]")).toHaveLength(0);
+      });
+    });
   });
 
   describe("keyboard support", () => {

diff --git a/src/components/tree/tree.stories.ts b/src/components/tree/tree.stories.ts
@@ -49,14 +49,12 @@ export default {
   }
 };
 
+const selectionModes = ["single", "multi", "children", "multi-children", "ancestors", "none"];
+
 export const Simple = (): string => html`
   <calcite-tree
     ${boolean("lines", false)}
-    selection-mode="${select(
-      "selection-mode",
-      ["single", "multi", "children", "multi-children", "ancestors"],
-      "single"
-    )}"
+    selection-mode="${select("selection-mode", selectionModes, "single")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
   >
     ${treeItems}
@@ -67,11 +65,7 @@ export const RTL = (): string => html`
   <calcite-tree
     dir="rtl"
     ${boolean("lines", false)}
-    selection-mode="${select(
-      "selection-mode",
-      ["single", "multi", "children", "multi-children", "ancestors"],
-      "single"
-    )}"
+    selection-mode="${select("selection-mode", selectionModes, "single")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
   >
     ${treeItems}
@@ -82,11 +76,7 @@ export const DarkMode = (): string => html`
   <calcite-tree
     class="calcite-theme-dark"
     ${boolean("lines", false)}
-    selection-mode="${select(
-      "selection-mode",
-      ["single", "multi", "children", "multi-children", "ancestors"],
-      "single"
-    )}"
+    selection-mode="${select("selection-mode", selectionModes, "single")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
   >
     ${treeItems}

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
@@ -152,6 +152,8 @@ export class Tree {
       return;
     }
 
+    const isNoneSelectionMode = this.selectionMode === TreeSelectionMode.None;
+
     const shouldSelect =
       this.selectionMode !== null &&
       (!target.hasChildren ||
@@ -160,6 +162,7 @@ export class Tree {
             this.selectionMode === TreeSelectionMode.MultiChildren)));
 
     const shouldModifyToCurrentSelection =
+      !isNoneSelectionMode &&
       event.detail.modifyCurrentSelection &&
       (this.selectionMode === TreeSelectionMode.Multi ||
         this.selectionMode === TreeSelectionMode.MultiChildren);
@@ -220,20 +223,20 @@ export class Tree {
         targetItems.forEach((treeItem) => {
           treeItem.selected = false;
         });
-      } else {
+      } else if (!isNoneSelectionMode) {
         targetItems.forEach((treeItem) => {
           treeItem.selected = true;
         });
       }
     }
 
-    this.calciteTreeSelect.emit({
-      selected: (
-        nodeListToArray(
-          this.el.querySelectorAll("calcite-tree-item")
-        ) as HTMLCalciteTreeItemElement[]
-      ).filter((i) => i.selected)
-    });
+    const selected = isNoneSelectionMode
+      ? [target]
+      : (nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter(
+          (i) => i.selected
+        ) as HTMLCalciteTreeItemElement[]);
+
+    this.calciteTreeSelect.emit({ selected });
 
     event.stopPropagation();
   }

diff --git a/src/demos/tree.html b/src/demos/tree.html
@@ -353,6 +353,95 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
         </div>
       </div>
 
+      <!-- none selection mode -->
+      <div class="parent">
+        <div class="child right-aligned-text">none selection mode</div>
+
+        <div class="child">
+          <calcite-tree selection-mode="none" scale="s">
+            <calcite-tree-item>
+              <span>Child 1</span>
+            </calcite-tree-item>
+
+            <calcite-tree-item>
+              <span>Child 2</span>
+
+              <calcite-tree slot="children">
+                <calcite-tree-item>
+                  <span>Grandchild 1</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item>
+                      <span>Great Grandchild 1</span>
+                    </calcite-tree-item>
+                    <calcite-tree-item>
+                      <span>Great Grandchild 2</span>
+                    </calcite-tree-item>
+                    <calcite-tree-item>
+                      <span>Great Grandchild 3</span>
+                    </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+                <calcite-tree-item>
+                  <span>Grandchild 2</span>
+                </calcite-tree-item>
+                <calcite-tree-item>
+                  <span>Grandchild 3</span>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+
+            <calcite-tree-item>
+              <span>Child 3</span>
+            </calcite-tree-item>
+            <calcite-tree-item>
+              <span>Child 4</span>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>
+
+        <div class="child">
+          <calcite-tree selection-mode="none" scale="m">
+            <calcite-tree-item>
+              <span>Child 1</span>
+            </calcite-tree-item>
+
+            <calcite-tree-item>
+              <span>Child 2</span>
+
+              <calcite-tree slot="children">
+                <calcite-tree-item>
+                  <span>Grandchild 1</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item>
+                      <span>Great Grandchild 1</span>
+                    </calcite-tree-item>
+                    <calcite-tree-item>
+                      <span>Great Grandchild 2</span>
+                    </calcite-tree-item>
+                    <calcite-tree-item>
+                      <span>Great Grandchild 3</span>
+                    </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+                <calcite-tree-item>
+                  <span>Grandchild 2</span>
+                </calcite-tree-item>
+                <calcite-tree-item>
+                  <span>Grandchild 3</span>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+
+            <calcite-tree-item>
+              <span>Child 3</span>
+            </calcite-tree-item>
+            <calcite-tree-item>
+              <span>Child 4</span>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>
+      </div>
+
       <!-- events to test -->
       <div class="parent">
         <div class="child right-aligned-text">events</div>