From 80b0e3c8d61fbbb37c602370426ce02573ec25d4 Mon Sep 17 00:00:00 2001 From: Andrei Fateev <104006376+fateeand@users.noreply.github.com> Date: Mon, 25 Mar 2024 17:25:15 +0100 Subject: [PATCH] Made "event" arg optional in clear method in tree-based selects (#358) --- .../cps-tree-autocomplete.component.ts | 54 ++--- .../cps-base-tree-dropdown.component.ts | 212 +++++++++--------- 2 files changed, 133 insertions(+), 133 deletions(-) diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts index 482f2587..8b9eb010 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts +++ b/projects/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/projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts b/projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts index 2bddcd4a..372e2c59 100644 --- a/projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts +++ b/projects/cps-ui-kit/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 { 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(); - } }