From 34c9d0d7c7e28abf2a87b9b383e69996956a8fc6 Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Wed, 8 Jul 2020 17:29:14 +0300 Subject: [PATCH] feat(combo): Add caseSensitive option and make onSearchInput cancelable #7282 --- .../src/lib/combo/combo.component.html | 7 +++- .../src/lib/combo/combo.component.ts | 38 +++++++++++++++++-- .../src/lib/combo/combo.pipes.ts | 9 +++-- src/app/combo/combo.sample.html | 1 + src/app/combo/combo.sample.ts | 13 +++++-- 5 files changed, 55 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index bc576157ac6..9a0503b1a13 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo.component.html @@ -39,6 +39,11 @@ [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder" aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" /> + + + {{ caseSensitive ? 'format_size' : 'format_clear'}} + + @@ -47,7 +52,7 @@ [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id"> diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 9b8c6448364..ca8e910198d 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -103,6 +103,12 @@ export interface IComboItemAdditionEvent extends IBaseEventArgs { newCollection: any[]; } +/** Event emitted when the igx-combo's search input changes */ +export interface IComboSearchInputEventArgs extends CancelableEventArgs { + /** The change that has been made to the search input */ + change: string; +} + /** * When called with sets A & B, returns A - B (as array); * @hidden @@ -484,7 +490,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * ``` */ @Output() - public onSearchInput = new EventEmitter(); + public onSearchInput = new EventEmitter(); /** * Emitted when new chunk of data is loaded from the virtualization @@ -692,6 +698,22 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas @Input() public searchPlaceholder = 'Enter a Search Term'; + /** + * Sets the caseSensitive option of the combo filtering + * + * ```typescript + * // get + * let myComboCaseSensitiveFilter = this.combo.caseSensitive; + * ``` + * + * ```html + * + * + * ``` + */ + @Input() + public caseSensitive = false; + /** * Combo data source. * @@ -982,8 +1004,16 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas */ public handleInputChange(event?: string) { if (event !== undefined) { - this.onSearchInput.emit(event); + const args: IComboSearchInputEventArgs = { + change: event, + cancel: false + }; + this.onSearchInput.emit(args); + if (args.cancel) { + this.searchValue = null; + return; } + } this.checkMatch(); } @@ -1437,8 +1467,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas /** Returns a string that should be populated in the combo's text box */ private concatDisplayText(selection: any[]): string { const value = this.displayKey !== null && this.displayKey !== undefined ? - this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') : - selection.join(', '); + this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') : + selection.join(', '); return value; } diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts index a77a23c8363..28ffc114f83 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts @@ -13,18 +13,19 @@ import { DefaultSortingStrategy } from '../data-operations/sorting-strategy'; name: 'comboFiltering' }) export class IgxComboFilteringPipe implements PipeTransform { - public transform(collection: any[], searchValue: any, displayKey: any, shouldFilter: boolean) { + public transform(collection: any[], searchValue: any, displayKey: any, shouldFilter: boolean, caseSensitive: boolean) { if (!collection) { return []; } if (!searchValue || !shouldFilter) { return collection; } else { - const searchTerm = searchValue.toLowerCase().trim(); + const searchTerm = caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim(); if (displayKey != null) { - return collection.filter(e => e[displayKey].toLowerCase().includes(searchTerm)); + return collection.filter(e => caseSensitive ? e[displayKey].includes(searchTerm) : + e[displayKey].toLowerCase().includes(searchTerm)); } else { - return collection.filter(e => e.toLowerCase().includes(searchTerm)); + return collection.filter(e => caseSensitive ? e.includes(searchTerm) : e.toLowerCase().includes(searchTerm)); } } } diff --git a/src/app/combo/combo.sample.html b/src/app/combo/combo.sample.html index e003779495d..db3e5e857b1 100644 --- a/src/app/combo/combo.sample.html +++ b/src/app/combo/combo.sample.html @@ -23,6 +23,7 @@ [allowCustomValues]="customValuesFlag" [displayDensity]="'comfortable'" [autoFocusSearch]="autoFocusSearch" + (onSearchInput)="handleSearchInputEvent($event)" [filterable]="filterableFlag" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'"> diff --git a/src/app/combo/combo.sample.ts b/src/app/combo/combo.sample.ts index bfeb6c386e3..35242ecaaf6 100644 --- a/src/app/combo/combo.sample.ts +++ b/src/app/combo/combo.sample.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, OnInit, TemplateRef, AfterViewInit, ElementRef } from '@angular/core'; import { IgxComboComponent, IComboSelectionChangeEventArgs, DisplayDensity, OverlaySettings, AutoPositionStrategy, VerticalAlignment, HorizontalAlignment, GlobalPositionStrategy, - scaleInCenter, scaleOutCenter, ElasticPositionStrategy + scaleInCenter, scaleOutCenter, ElasticPositionStrategy, CancelableEventArgs } from 'igniteui-angular'; import { take } from 'rxjs/operators'; import { cloneDeep } from 'lodash'; @@ -156,9 +156,10 @@ export class ComboSampleComponent implements OnInit, AfterViewInit { console.log('Closed log!'); }); - this.igxCombo.onSearchInput.subscribe((e) => { - console.log(e); - }); + // this.igxCombo.onSearchInput.subscribe((e) => { + // e.cancel = true; + // console.log(e); + // }); } ngAfterViewInit() { @@ -194,4 +195,8 @@ export class ComboSampleComponent implements OnInit, AfterViewInit { handleSelectionChange(event: IComboSelectionChangeEventArgs) { console.log(event); } + + handleSearchInputEvent(event: CancelableEventArgs) { + // event.cancel = true; + } }