From 36f246ee73f3d40bf3d7fcdd4b6d3c21627df3cf Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Fri, 17 Dec 2021 00:47:32 -0800 Subject: [PATCH 1/3] fix: adding forms support to combo box --- .../color-picker/color-picker.component.ts | 4 +- .../src/combo-box/combo-box.component.ts | 40 ++++++++++++++++--- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/projects/components/src/color-picker/color-picker.component.ts b/projects/components/src/color-picker/color-picker.component.ts index 7c3c1244e..343cfbe8f 100644 --- a/projects/components/src/color-picker/color-picker.component.ts +++ b/projects/components/src/color-picker/color-picker.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { IconType } from '@hypertrace/assets-library'; import { Color } from '@hypertrace/common'; import { IconSize } from '../icon/icon-size'; @@ -37,7 +37,7 @@ import { IconSize } from '../icon/icon-size'; ` }) -export class ColorPickerComponent { +export class ColorPickerComponent implements ControlValueAccessor { @Input() public selected?: string; diff --git a/projects/components/src/combo-box/combo-box.component.ts b/projects/components/src/combo-box/combo-box.component.ts index 77d05fa38..5ab615041 100644 --- a/projects/components/src/combo-box/combo-box.component.ts +++ b/projects/components/src/combo-box/combo-box.component.ts @@ -13,9 +13,10 @@ import { ViewChild, ViewChildren } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { IconType } from '@hypertrace/assets-library'; import { DomElementScrollIntoViewService, isNonEmptyString, TypedSimpleChanges } from '@hypertrace/common'; -import { isNil } from 'lodash-es'; +import { isNil, isEmpty } from 'lodash-es'; import { IconSize } from '../icon/icon-size'; import { PopoverRef } from '../popover/popover-ref'; import { PopoverComponent } from '../popover/popover.component'; @@ -25,6 +26,13 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api'; selector: 'ht-combo-box', styleUrls: ['./combo-box.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + multi: true, + useExisting: ComboBoxComponent + } + ], template: ` @@ -113,7 +121,7 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api'; ` }) -export class ComboBoxComponent implements AfterViewInit, OnChanges, OnDestroy { +export class ComboBoxComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor { @Input() public mode?: ComboBoxMode = ComboBoxMode.Input; @@ -176,6 +184,9 @@ export class ComboBoxComponent implements AfterViewInit, OnChan public createOption?: ComboBoxOption; + private propagateControlValueChange?: (value: string | undefined) => void; + private propagateControlValueChangeOnTouch?: (value: string | undefined) => void; + public constructor( private readonly changeDetectorRef: ChangeDetectorRef, private readonly scrollIntoViewService: DomElementScrollIntoViewService @@ -204,10 +215,9 @@ export class ComboBoxComponent implements AfterViewInit, OnChan } private setFilteredOptions(searchText?: string): void { - this.filteredOptions = - searchText === undefined - ? this.options ?? [] - : (this.options ?? []).filter(option => option.text.toLowerCase().includes(searchText.toLowerCase())); + this.filteredOptions = isEmpty(searchText) + ? this.options ?? [] + : (this.options ?? []).filter(option => option.text.toLowerCase().includes(searchText!.toLowerCase())); this.createOption = this.isShowCreateOption(searchText) ? this.buildCreateOption(searchText) : undefined; this.setHighlightedOptionIndex(); } @@ -227,6 +237,7 @@ export class ComboBoxComponent implements AfterViewInit, OnChan this.measureText(); this.setHighlightedOptionIndex(); this.textChange.emit(this.text); + this.propagateValueChangeToFormControl(this.text); } } @@ -405,4 +416,21 @@ export class ComboBoxComponent implements AfterViewInit, OnChan this.changeDetectorRef.markForCheck(); // Yes, required }); } + + private propagateValueChangeToFormControl(value?: string): void { + this.propagateControlValueChange?.(value); + this.propagateControlValueChangeOnTouch?.(value); + } + + public writeValue(text?: string): void { + this.text = text; + } + + public registerOnChange(onChange: (value?: string) => void): void { + this.propagateControlValueChange = onChange; + } + + public registerOnTouched(onTouch: (value?: string) => void): void { + this.propagateControlValueChangeOnTouch = onTouch; + } } From 9d862305084c66678ccb8aecf46afc8f92393614 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Fri, 17 Dec 2021 08:23:09 -0800 Subject: [PATCH 2/3] refactor: minor style change to color picker --- .../components/src/color-picker/color-picker.component.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/components/src/color-picker/color-picker.component.scss b/projects/components/src/color-picker/color-picker.component.scss index 27f4a2327..57fe290da 100644 --- a/projects/components/src/color-picker/color-picker.component.scss +++ b/projects/components/src/color-picker/color-picker.component.scss @@ -17,6 +17,10 @@ border: 2px solid $blue-4; } } + + .add-icon { + cursor: pointer; + } } .container { From beb2c26f7b8d4ef176ba51f9142a501384a2e067 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Fri, 17 Dec 2021 08:50:38 -0800 Subject: [PATCH 3/3] refactor: fix lint issues --- projects/components/src/combo-box/combo-box.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/combo-box/combo-box.component.ts b/projects/components/src/combo-box/combo-box.component.ts index 5ab615041..04305ec3e 100644 --- a/projects/components/src/combo-box/combo-box.component.ts +++ b/projects/components/src/combo-box/combo-box.component.ts @@ -16,7 +16,7 @@ import { import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { IconType } from '@hypertrace/assets-library'; import { DomElementScrollIntoViewService, isNonEmptyString, TypedSimpleChanges } from '@hypertrace/common'; -import { isNil, isEmpty } from 'lodash-es'; +import { isEmpty, isNil } from 'lodash-es'; import { IconSize } from '../icon/icon-size'; import { PopoverRef } from '../popover/popover-ref'; import { PopoverComponent } from '../popover/popover.component';