fix: Stencil build warnings (#537)

* mutable select prop testing * remove prop * Fix for item not matching correctly. Update test to fix event call count. * make sure event only fires when one is selected. * fix test. only emit when selected or multiple * change test app event. * debounce event * cleanup redundant code * cleanup * change debounce to next tick * review fixes. thanks @jcfranco * fix type typo
Esri · Nov 14, 2019 · d2e1721 · d2e1721
1 parent 2bff76a
commit d2e1721
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 50 deletions.
diff --git a/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx b/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
@@ -6,7 +6,6 @@ import {
   Host,
   Method,
   Prop,
-  State,
   Watch,
   h
 } from "@stencil/core";
@@ -54,14 +53,18 @@ export class CalcitePickListItem {
   /**
    * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
    */
-  @Prop() selected = false;
+  @Prop({ reflect: true, mutable: true }) selected = false;
 
   @Watch("selected")
-  selectedWatchHandler(newValue) {
-    if (this.isSelected !== newValue) {
-      this.isSelected = newValue;
-      this.emitChangeEvent();
-    }
+  selectedWatchHandler() {
+    this.calciteListItemChange.emit({
+      item: this.el,
+      value: this.value,
+      selected: this.selected,
+      shiftPressed: this.shiftPressed
+    });
+
+    this.shiftPressed = false;
   }
 
   /**
@@ -104,7 +107,7 @@ export class CalcitePickListItem {
 
   @Element() el: HTMLCalcitePickListItemElement;
 
-  @State() isSelected = this.selected;
+  shiftPressed: boolean;
 
   // --------------------------------------------------------------------------
   //
@@ -135,16 +138,13 @@ export class CalcitePickListItem {
   /**
    * Used to toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
-   * The second argument, when true, allows an event to be emitted, just as if a user had clicked.
    */
-  @Method() async toggleSelected(coerce?: boolean, emit = false) {
+  @Method() async toggleSelected(coerce?: boolean) {
     if (this.disabled) {
       return;
     }
-    this.isSelected = typeof coerce === "boolean" ? coerce : !this.isSelected;
-    if (emit) {
-      this.emitChangeEvent();
-    }
+
+    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
   }
 
   // --------------------------------------------------------------------------
@@ -157,40 +157,27 @@ export class CalcitePickListItem {
     if (this.disabled) {
       return;
     }
-    this.isSelected = !this.isSelected;
-    this.emitChangeEvent(event.shiftKey);
+
+    this.shiftPressed = event.shiftKey;
+    this.selected = !this.selected;
   };
 
   pickListKeyDownHandler = (event: KeyboardEvent): void => {
     if (event.key === " ") {
       event.preventDefault();
-      this.isSelected = !this.isSelected;
-      this.emitChangeEvent(false);
+      this.selected = !this.selected;
     }
   };
 
-  secondaryActionContainerClickHandler(event: MouseEvent) {
-    event.stopPropagation();
-  }
-
-  emitChangeEvent(shiftPressed = false) {
-    this.calciteListItemChange.emit({
-      item: this.el,
-      value: this.value,
-      selected: this.isSelected,
-      shiftPressed
-    });
-  }
-
   // --------------------------------------------------------------------------
   //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
 
   renderIcon() {
-    const { icon } = this;
-    if (!icon || this.compact) {
+    const { compact, icon, selected } = this;
+    if (!icon || compact) {
       return null;
     }
     if (icon === ICON_TYPES.grip) {
@@ -202,10 +189,10 @@ export class CalcitePickListItem {
     } else {
       const path =
         icon === ICON_TYPES.square
-          ? this.isSelected
+          ? selected
             ? checkSquare16
             : square16
-          : this.isSelected
+          : selected
           ? circleFilled16
           : circle16;
       return (
@@ -223,7 +210,7 @@ export class CalcitePickListItem {
       ) : null;
 
     return (
-      <Host selected={this.isSelected} role="checkbox" aria-checked={this.isSelected}>
+      <Host role="checkbox" aria-checked={this.selected}>
         <label
           class={CSS.label}
           onClick={this.pickListClickHandler}
@@ -237,7 +224,7 @@ export class CalcitePickListItem {
             {description}
           </div>
         </label>
-        <div class={CSS.action} onClick={this.secondaryActionContainerClickHandler}>
+        <div class={CSS.action}>
           <slot name="secondaryAction" />
         </div>
       </Host>

diff --git a/src/components/calcite-pick-list/calcite-pick-list.tsx b/src/components/calcite-pick-list/calcite-pick-list.tsx
@@ -102,6 +102,8 @@ export class CalcitePickList {
 
   @Element() el: HTMLCalcitePickListElement;
 
+  emitCalciteListChange: () => void;
+
   // --------------------------------------------------------------------------
   //
   //  Lifecycle

diff --git a/src/components/calcite-pick-list/shared-list-logic.ts b/src/components/calcite-pick-list/shared-list-logic.ts
@@ -1,5 +1,6 @@
 import { CalcitePickList } from "./calcite-pick-list";
 import { CalciteValueList } from "../calcite-value-list/calcite-value-list";
+import { debounce } from "lodash-es";
 
 type pickListItemMap = Map<string, HTMLCalcitePickListItemElement>;
 type valueListItemMap = Map<string, HTMLCalciteValueListItemElement>;
@@ -30,6 +31,7 @@ export const sharedListMethods = {
   initialize(this: CalcitePickList | CalciteValueList): void {
     this.setUpItems();
     this.setUpFilter();
+    this.emitCalciteListChange = debounce(sharedListMethods.internalCalciteListChangeEvent.bind(this), 0);
   },
   initializeObserver(this: CalcitePickList | CalciteValueList): void {
     this.observer.observe(this.el, { childList: true, subtree: true });
@@ -56,17 +58,21 @@ export const sharedListMethods = {
     } else {
       selectedValues.delete(value);
     }
+
     this.lastSelectedItem = item;
-    this.calciteListChange.emit(selectedValues);
+    this.emitCalciteListChange();
   },
   // --------------------------------------------------------------------------
   //
   //  Private Methods
   //
   // --------------------------------------------------------------------------
+  internalCalciteListChangeEvent(this: CalcitePickList | CalciteValueList): void {
+    this.calciteListChange.emit(this.selectedValues);
+  },
   setUpItems(
     this: CalcitePickList | CalciteValueList,
-    tagname: "calcite-pick-list-item" | "calcite-pick-list-item"
+    tagname: "calcite-pick-list-item" | "calcite-value-list-item"
   ): void {
     this.items = Array.from(this.el.querySelectorAll(tagname));
     this.items.forEach((item) => {
@@ -84,7 +90,7 @@ export const sharedListMethods = {
   },
   deselectSiblingItems(this: CalcitePickList | CalciteValueList, item: pickOrValueListItem) {
     this.items.forEach((currentItem) => {
-      if (currentItem !== item) {
+      if (currentItem.value !== item.value) {
         currentItem.toggleSelected(false);
         if (this.selectedValues.has(currentItem.value)) {
           this.selectedValues.delete(currentItem.value);

diff --git a/src/components/calcite-value-list-item/calcite-value-list-item.tsx b/src/components/calcite-value-list-item/calcite-value-list-item.tsx
@@ -36,7 +36,7 @@ export class CalciteValueListItem {
   /**
    * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
    */
-  @Prop() selected = false;
+  @Prop({ reflect: true, mutable: true }) selected = false;
 
   /**
    * The main label for this item. Appears next to the icon.
@@ -69,8 +69,8 @@ export class CalciteValueListItem {
   //
   // --------------------------------------------------------------------------
 
-  @Method() async toggleSelected(coerce?: boolean, emit = false) {
-    this.pickListItem.toggleSelected(coerce, emit);
+  @Method() async toggleSelected(coerce?: boolean) {
+    this.pickListItem.toggleSelected(coerce);
   }
 
   // --------------------------------------------------------------------------

diff --git a/src/components/calcite-value-list/calcite-value-list.tsx b/src/components/calcite-value-list/calcite-value-list.tsx
@@ -96,14 +96,10 @@ export class CalciteValueList {
 
   sortables: Sortable[] = [];
 
-  // --------------------------------------------------------------------------
-  //
-  //  Private Properties
-  //
-  // --------------------------------------------------------------------------
-
   @Element() el: HTMLCalciteValueListItemElement;
 
+  emitCalciteListChange: () => void;
+
   // --------------------------------------------------------------------------
   //
   //  Lifecycle

diff --git a/src/demos/calcite-pick-list.html b/src/demos/calcite-pick-list.html
@@ -153,7 +153,7 @@ <h2>Pick List with sub-groups</h2>
       </calcite-pick-list>
       <script>
         const pickList3 = document.querySelector("#three");
-        pickList3.addEventListener("calcitePickListSelectionChange", event => {
+        pickList3.addEventListener("calciteListChange", (event) => {
           console.log(event.detail);
         });
       </script>