feat: implemented NgxSelectComponent.navigated - #21 (comment)

optimistex · Feb 15, 2018 · 034ae8e · 034ae8e
1 parent 0ad0271
commit 034ae8e
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ Any item can be `disabled` for prevent selection. For disable an item add the pr
 | (close)  | Fired on select dropdown close |
 | (select)  | Fired on an item selected by user. Returns value of the selected item. |
 | (remove)  | Fired on an item removed by user. Returns value of the removed item. |
+| (navigated)  | Fired on navigate by the dropdown list. Returns: `INgxOptionNavigated`. |
 
 **Warning!** Although the component contains the `select` and the `remove` events, the better solution is using `valueChanches` of the `FormControl`.
 

diff --git a/src/app/doc.md b/src/app/doc.md
@@ -71,6 +71,7 @@ Any item can be `disabled` for prevent selection. For disable an item add the pr
 | (close)  | Fired on select dropdown close |
 | (select)  | Fired on an item selected by user. Returns value of the selected item. |
 | (remove)  | Fired on an item removed by user. Returns value of the removed item. |
+| (navigated)  | Fired on navigate by the dropdown list. Returns: `INgxOptionNavigated`. |
 
 **Warning!** Although the component contains the `select` and the `remove` events, the better solution is using `valueChanches` of the `FormControl`.
 

diff --git a/src/app/lib/ngx-select/ngx-select.component.html b/src/app/lib/ngx-select/ngx-select.component.html
@@ -70,7 +70,13 @@
                [ngClass]="{
                     'ngx-select__item_active active': isOptionActive(option, choiceItem),
                     'ngx-select__item_disabled disabled': option.disabled
-               }" (mouseenter)="optionActivate(option)" (click)="optionSelect(option, $event)">
+               }"
+               (mouseenter)="optionActivate({
+                    activeOption: option,
+                    filteredOptionList: optionsFiltered,
+                    index: optionsFiltered.indexOf(option)
+               })"
+               (click)="optionSelect(option, $event)">
                 <ng-template #defaultTemplateOption let-option let-highlight="highlight">
                     <span [innerHtml]="highlight"></span>
                 </ng-template>

diff --git a/src/app/lib/ngx-select/ngx-select.component.ts b/src/app/lib/ngx-select/ngx-select.component.ts
@@ -24,6 +24,7 @@ import * as lodashNs from 'lodash';
 import * as escapeStringNs from 'escape-string-regexp';
 import {NgxSelectOptGroup, NgxSelectOption, TSelectOption} from './ngx-select.classes';
 import {NgxSelectOptionDirective} from './ngx-templates.directive';
+import {INgxOptionNavigated} from './ngx-select.interfaces';
 
 const _ = lodashNs;
 const escapeString = escapeStringNs;
@@ -73,6 +74,7 @@ export class NgxSelectComponent implements ControlValueAccessor, DoCheck, AfterC
     @Output() public close = new EventEmitter<void>();
     @Output() public select = new EventEmitter<any>();
     @Output() public remove = new EventEmitter<any>();
+    @Output() public navigated = new EventEmitter<INgxOptionNavigated>();
 
     @ViewChild('main') protected mainElRef: ElementRef;
     @ViewChild('input') protected inputElRef: ElementRef;
@@ -214,28 +216,29 @@ export class NgxSelectComponent implements ControlValueAccessor, DoCheck, AfterC
 
     private navigateOption(navigation: ENavigation) {
         this.optionsFilteredFlat()
-            .map((options: NgxSelectOption[]) => {
+            .map<NgxSelectOption[], INgxOptionNavigated>((options: NgxSelectOption[]) => {
+                const navigated: INgxOptionNavigated = {index: -1, activeOption: null, filteredOptionList: options};
                 let newActiveIdx;
                 switch (navigation) {
                     case ENavigation.first:
-                        return options[0];
+                        navigated.index = 0;
+                        break;
                     case ENavigation.previous:
                         newActiveIdx = options.indexOf(this.optionActive) - 1;
-                        if (newActiveIdx >= 0) {
-                            return options[newActiveIdx];
-                        }
-                        return options[options.length - 1];
+                        navigated.index = newActiveIdx >= 0 ? newActiveIdx : options.length - 1;
+                        break;
                     case ENavigation.next:
                         newActiveIdx = options.indexOf(this.optionActive) + 1;
-                        if (newActiveIdx < options.length) {
-                            return options[newActiveIdx];
-                        }
-                        return options[0];
+                        navigated.index = newActiveIdx < options.length ? newActiveIdx : 0;
+                        break;
                     case ENavigation.last:
-                        return options[options.length - 1];
+                        navigated.index = options.length - 1;
+                        break;
                 }
+                navigated.activeOption = options[navigated.index];
+                return navigated;
             })
-            .subscribe((newActiveOption: NgxSelectOption) => this.optionActivate(newActiveOption));
+            .subscribe((newNavigated: INgxOptionNavigated) => this.optionActivate(newNavigated));
     }
 
     public ngDoCheck(): void {
@@ -369,9 +372,10 @@ export class NgxSelectComponent implements ControlValueAccessor, DoCheck, AfterC
         return false;
     }
 
-    protected optionActivate(option: NgxSelectOption): void {
-        if (!option || !option.disabled) {
-            this.optionActive = option;
+    protected optionActivate(navigated: INgxOptionNavigated): void {
+        if (!navigated.activeOption || !navigated.activeOption.disabled) {
+            this.optionActive = navigated.activeOption;
+            this.navigated.emit(navigated);
         }
     }
 
@@ -409,7 +413,11 @@ export class NgxSelectComponent implements ControlValueAccessor, DoCheck, AfterC
             this.optionsOpened = true;
             this.subjSearchText.next(search);
             if (!this.multiple && this.subjOptionsSelected.value.length) {
-                this.optionActivate(this.subjOptionsSelected.value[0]);
+                this.optionsFilteredFlat().subscribe((options: NgxSelectOption[]) => this.optionActivate({
+                    activeOption: this.subjOptionsSelected.value[0],
+                    filteredOptionList: options,
+                    index: options.indexOf(this.subjOptionsSelected.value[0])
+                }));
             } else {
                 this.navigateOption(ENavigation.first);
             }

diff --git a/src/app/lib/ngx-select/ngx-select.interfaces.ts b/src/app/lib/ngx-select/ngx-select.interfaces.ts
@@ -1,3 +1,5 @@
+import {NgxSelectOption} from './ngx-select.classes';
+
 export type TNgxSelectOptionType = 'option' | 'optgroup';
 
 export interface INgxSelectOptionBase {
@@ -15,3 +17,9 @@ export interface INgxSelectOptGroup {
     label: string;
     options: INgxSelectOption[];
 }
+
+export interface INgxOptionNavigated {
+    index: number;
+    activeOption: NgxSelectOption;
+    filteredOptionList: NgxSelectOption[];
+}