Made "event" arg optional in clear method in tree-based selects (#358)

AbsaOSS · Mar 25, 2024 · 80b0e3c · 80b0e3c
1 parent 5c5e312
commit 80b0e3c
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 133 deletions.
diff --git a/...ts/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts b/...ts/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts
@@ -161,33 +161,7 @@ export class CpsTreeAutocompleteComponent
     }, 0);
   }
 
-  private _select(option: TreeNode): void {
-    function includes(array: any[], val: any): boolean {
-      return array?.some((item) => isEqual(item, val)) || false;
-    }
-
-    this.backspaceClickedOnce = false;
-
-    if (this.multiple) {
-      if (includes(this.treeSelection, option)) {
-        this.treeSelection = this.treeSelection.filter(
-          (v: TreeNode) => !isEqual(v, option)
-        );
-      } else {
-        this.treeSelection.push(option);
-      }
-    } else {
-      this.treeSelection = option;
-    }
-    this.updateValue(this.treeSelectionToValue(this.treeSelection));
-
-    this._clearInput();
-    setTimeout(() => {
-      this.focusInput();
-    }, 0);
-  }
-
-  override clear(event: any): void {
+  override clear(event?: any): void {
     super.clear(event);
 
     this._clearInput();
@@ -220,6 +194,32 @@ export class CpsTreeAutocompleteComponent
     else this.treeList._filter(searchVal);
   }
 
+  private _select(option: TreeNode): void {
+    function includes(array: any[], val: any): boolean {
+      return array?.some((item) => isEqual(item, val)) || false;
+    }
+
+    this.backspaceClickedOnce = false;
+
+    if (this.multiple) {
+      if (includes(this.treeSelection, option)) {
+        this.treeSelection = this.treeSelection.filter(
+          (v: TreeNode) => !isEqual(v, option)
+        );
+      } else {
+        this.treeSelection.push(option);
+      }
+    } else {
+      this.treeSelection = option;
+    }
+    this.updateValue(this.treeSelectionToValue(this.treeSelection));
+
+    this._clearInput();
+    setTimeout(() => {
+      this.focusInput();
+    }, 0);
+  }
+
   private _getValueLabel() {
     return this.treeSelection?.label || '';
   }

diff --git a/...it/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts b/...it/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts
@@ -309,45 +309,6 @@ export class CpsBaseTreeDropdownComponent
     this.resizeObserver?.disconnect();
   }
 
-  private _initContainerClickListener() {
-    this.treeContainerElement =
-      this.treeList?.el?.nativeElement?.querySelector('.p-tree-container');
-    if (this.treeContainerElement) {
-      this.treeContainerElement.addEventListener(
-        'click',
-        this._handleOnContainerClick.bind(this)
-      );
-    }
-  }
-
-  private _handleOnContainerClick(event: any) {
-    function getParentWithClass(
-      element: HTMLElement | null,
-      className: string
-    ) {
-      let currentElement = element;
-      while (currentElement) {
-        if (currentElement.classList.contains(className)) {
-          return currentElement;
-        }
-        currentElement = currentElement.parentElement;
-      }
-      return null;
-    }
-
-    this.optionFocused = true;
-
-    const elem = event.target.classList.contains('p-treenode-content')
-      ? event.target
-      : getParentWithClass(event.target, 'p-treenode-content');
-
-    if (
-      elem?.parentElement?.classList?.contains('cps-tree-node-fully-expandable')
-    ) {
-      this.onClickFullyExpandable(elem);
-    }
-  }
-
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = (event: any) => {};
 
@@ -369,12 +330,42 @@ export class CpsBaseTreeDropdownComponent
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setDisabledState(disabled: boolean) {}
+
+  onBlur() {
+    this.control?.control?.markAsTouched();
+    this._checkErrors();
+  }
+
+  focus() {
+    this.componentContainer?.nativeElement?.focus();
+    this.toggleOptions(true);
+  }
+
   updateValue(value: any): void {
     this.writeValue(value, true);
     this.onChange(value);
     this.valueChanged.emit(value);
   }
 
+  clear(event?: any): void {
+    event?.stopPropagation();
+
+    if (
+      (!this.multiple && this.treeSelection) ||
+      (this.multiple && this.treeSelection?.length > 0)
+    ) {
+      if (this.openOnClear) {
+        this.toggleOptions(true);
+      }
+      const val = this.multiple ? [] : undefined;
+      this.treeSelection = val;
+      this.updateValue(val);
+    }
+    this.optionFocused = false;
+  }
+
   onSelectNode() {
     if (!this.multiple) {
       this.toggleOptions(false);
@@ -396,16 +387,6 @@ export class CpsBaseTreeDropdownComponent
     });
   }
 
-  private _getHTMLElementKey(elem: any): string {
-    if (!elem?.classList) return '';
-    const classList = [...elem.classList];
-    const key = classList.find((className: string) => {
-      return className.startsWith('key-');
-    });
-    if (!key) return '';
-    return key.replace('key-', '');
-  }
-
   treeSelectionChanged(selection: any) {
     this.updateValue(this.treeSelectionToValue(selection));
   }
@@ -495,6 +476,82 @@ export class CpsBaseTreeDropdownComponent
     }
   }
 
+  onNodeExpand(event: any) {
+    this._nodeToggledWithChevron(
+      event?.originalEvent?.currentTarget?.parentElement
+    );
+  }
+
+  onNodeCollapse(event: any) {
+    this._nodeToggledWithChevron(
+      event?.originalEvent?.currentTarget?.parentElement
+    );
+  }
+
+  treeSelectionToValue(selection: any) {
+    if (!selection) return this.multiple ? [] : undefined;
+    if (this.multiple) {
+      return selection.map((s: any) => this.originalOptionsMap.get(s.key));
+    } else {
+      return this.originalOptionsMap.get(selection.key);
+    }
+  }
+
+  // this is a fix of primeng change detection bug when virtual scroller is enabled
+  updateOptions() {
+    if (!this.virtualScroll) return;
+    this.treeList?.updateSerializedValue();
+  }
+
+  private _initContainerClickListener() {
+    this.treeContainerElement =
+      this.treeList?.el?.nativeElement?.querySelector('.p-tree-container');
+    if (this.treeContainerElement) {
+      this.treeContainerElement.addEventListener(
+        'click',
+        this._handleOnContainerClick.bind(this)
+      );
+    }
+  }
+
+  private _handleOnContainerClick(event: any) {
+    function getParentWithClass(
+      element: HTMLElement | null,
+      className: string
+    ) {
+      let currentElement = element;
+      while (currentElement) {
+        if (currentElement.classList.contains(className)) {
+          return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+      }
+      return null;
+    }
+
+    this.optionFocused = true;
+
+    const elem = event.target.classList.contains('p-treenode-content')
+      ? event.target
+      : getParentWithClass(event.target, 'p-treenode-content');
+
+    if (
+      elem?.parentElement?.classList?.contains('cps-tree-node-fully-expandable')
+    ) {
+      this.onClickFullyExpandable(elem);
+    }
+  }
+
+  private _getHTMLElementKey(elem: any): string {
+    if (!elem?.classList) return '';
+    const classList = [...elem.classList];
+    const key = classList.find((className: string) => {
+      return className.startsWith('key-');
+    });
+    if (!key) return '';
+    return key.replace('key-', '');
+  }
+
   private _setTreeListHeight(height: string) {
     if (this.treeList?.scroller?.style)
       this.treeList.scroller.style.height = height;
@@ -515,35 +572,6 @@ export class CpsBaseTreeDropdownComponent
     this.optionsMenu.selfClick = false;
   }
 
-  onNodeExpand(event: any) {
-    this._nodeToggledWithChevron(
-      event?.originalEvent?.currentTarget?.parentElement
-    );
-  }
-
-  onNodeCollapse(event: any) {
-    this._nodeToggledWithChevron(
-      event?.originalEvent?.currentTarget?.parentElement
-    );
-  }
-
-  clear(event: any): void {
-    event.stopPropagation();
-
-    if (
-      (!this.multiple && this.treeSelection) ||
-      (this.multiple && this.treeSelection?.length > 0)
-    ) {
-      if (this.openOnClear) {
-        this.toggleOptions(true);
-      }
-      const val = this.multiple ? [] : undefined;
-      this.treeSelection = val;
-      this.updateValue(val);
-    }
-    this.optionFocused = false;
-  }
-
   private _checkErrors(): void {
     const errors = this.control?.errors;
 
@@ -567,19 +595,6 @@ export class CpsBaseTreeDropdownComponent
     this.error = message || 'Unknown error';
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setDisabledState(disabled: boolean) {}
-
-  onBlur() {
-    this.control?.control?.markAsTouched();
-    this._checkErrors();
-  }
-
-  focus() {
-    this.componentContainer?.nativeElement?.focus();
-    this.toggleOptions(true);
-  }
-
   private _expandToNodes(nodes: any[]) {
     function getParentKey(key: string): string {
       const lastSeparatorIndex = key.lastIndexOf('-');
@@ -670,15 +685,6 @@ export class CpsBaseTreeDropdownComponent
     return nodeMap;
   }
 
-  treeSelectionToValue(selection: any) {
-    if (!selection) return this.multiple ? [] : undefined;
-    if (this.multiple) {
-      return selection.map((s: any) => this.originalOptionsMap.get(s.key));
-    } else {
-      return this.originalOptionsMap.get(selection.key);
-    }
-  }
-
   private _valueToTreeSelection(value: any) {
     function getKey(v: any, map: Map<string, any>): string {
       for (const [key, val] of map.entries()) {
@@ -703,10 +709,4 @@ export class CpsBaseTreeDropdownComponent
       return key ? this.optionsMap.get(key) : undefined;
     }
   }
-
-  // this is a fix of primeng change detection bug when virtual scroller is enabled
-  updateOptions() {
-    if (!this.virtualScroll) return;
-    this.treeList?.updateSerializedValue();
-  }
 }