Made reverted offset parent, but added overall design improvesments

blackbaud · Apr 23, 2018 · b5f0db0 · b5f0db0
1 parent 23b6796
commit b5f0db0
Show file tree

Hide file tree

Showing 12 changed files with 358 additions and 102 deletions.
diff --git a/src/modules/autocomplete/autocomplete-input.directive.ts b/src/modules/autocomplete/autocomplete-input.directive.ts
@@ -67,7 +67,7 @@ export class SkyAutocompleteInputDirective
   private _value: any;
 
   constructor(
-    private elementRef: ElementRef,
+    public elementRef: ElementRef,
     private renderer: Renderer2
   ) { }
 

diff --git a/src/modules/autocomplete/autocomplete.component.html b/src/modules/autocomplete/autocomplete.component.html
@@ -2,18 +2,18 @@
   <ng-content>
   </ng-content>
   <div class="sky-autocomplete-results">
-
-    <sky-dropdown
+    <sky-popover
+      placement="below"
+      [alignment]="alignment"
+      (popoverOpened)="onPopoverOpened()"
       [dismissOnBlur]="false"
-      [messageStream]="dropdownController">
-
-      <sky-dropdown-button>
-      </sky-dropdown-button>
-
+      [@.disabled]="true"
+      #popover>
       <sky-dropdown-menu
         [useNativeFocus]="false"
         [skyHighlight]="highlightText"
-        (menuChanges)="onMenuChanges($event)">
+        (menuChanges)="onMenuChanges($event)"
+        #dropdownMenu>
 
         <sky-dropdown-item
           *ngFor="let result of searchResults; let i = index">
@@ -27,7 +27,7 @@
 
         </sky-dropdown-item>
       </sky-dropdown-menu>
-    </sky-dropdown>
+    </sky-popover>
   </div>
   <ng-template
     let-item="item"

diff --git a/src/modules/autocomplete/autocomplete.component.scss b/src/modules/autocomplete/autocomplete.component.scss
@@ -1,15 +1,20 @@
 .sky-autocomplete {
-  position: relative;
+  ::ng-deep .sky-popover-container {
+    padding: 0;
+    min-width: auto;
+    max-width: none;
 
-  ::ng-deep
-  .sky-dropdown-button {
-    visibility: hidden;
-    overflow: hidden;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    .sky-popover {
+      border-radius: 0 !important;
+      border: 0 !important;
+    }
+
+    .sky-popover-body {
+      padding: 0;
+    }
+
+    .sky-popover-arrow {
+      display: none;
+    }
   }
 }
diff --git a/src/modules/autocomplete/autocomplete.component.spec.ts b/src/modules/autocomplete/autocomplete.component.spec.ts
@@ -186,7 +186,7 @@ describe('Autocomplete component', () => {
         fixture.detectChanges();
 
         const inputElement = getInputElement();
-        const messageSpy = spyOn(autocomplete as any, 'sendDropdownMessage')
+        const messageSpy = spyOn(autocomplete as any, 'sendMessage')
           .and.callThrough();
 
         inputElement.value = 'r';
@@ -207,20 +207,22 @@ describe('Autocomplete component', () => {
         fixture.detectChanges();
 
         const inputElement = getInputElement();
-        const messageSpy = spyOn(autocomplete as any, 'sendDropdownMessage')
+        const messageSpy = spyOn(autocomplete as any, 'sendMessage')
           .and.callThrough();
 
         inputElement.value = 'r';
         SkyAppTestUtility.fireDomEvent(inputElement, 'keyup');
         tick();
 
+        fixture.detectChanges();
+
         inputElement.value = 're';
         SkyAppTestUtility.fireDomEvent(inputElement, 'keyup');
         tick();
 
         expect(messageSpy)
           .toHaveBeenCalledWith(SkyDropdownMessageType.Open);
-        expect(messageSpy.calls.count()).toEqual(1);
+        expect(messageSpy.calls.count()).toEqual(2);
       })
     );
 
@@ -395,7 +397,7 @@ describe('Autocomplete component', () => {
       });
       tick();
 
-      const messageSpy = spyOn(autocomplete as any, 'sendDropdownMessage')
+      const messageSpy = spyOn(autocomplete as any, 'sendMessage')
         .and.callThrough();
       const notifySpy = spyOn(autocomplete.selectionChange, 'emit')
         .and.callThrough();
@@ -422,7 +424,7 @@ describe('Autocomplete component', () => {
       SkyAppTestUtility.fireDomEvent(inputElement, 'keyup');
       tick();
 
-      const messageSpy = spyOn(autocomplete as any, 'sendDropdownMessage')
+      const messageSpy = spyOn(autocomplete as any, 'sendMessage')
         .and.callThrough();
       const notifySpy = spyOn(autocomplete.selectionChange, 'emit')
         .and.callThrough();
@@ -448,7 +450,7 @@ describe('Autocomplete component', () => {
       tick();
       fixture.detectChanges();
 
-      const spy = spyOn(autocomplete as any, 'sendDropdownMessage')
+      const spy = spyOn(autocomplete as any, 'sendMessage')
         .and.callThrough();
       const autocompleteElement = getAutocompleteElement();
       const dropdownElement = autocompleteElement
@@ -506,7 +508,7 @@ describe('Autocomplete component', () => {
       SkyAppTestUtility.fireDomEvent(inputElement, 'keyup');
       tick();
 
-      const spy = spyOn(autocomplete as any, 'sendDropdownMessage').and.callThrough();
+      const spy = spyOn(autocomplete as any, 'sendMessage').and.callThrough();
       const autocompleteElement = getAutocompleteElement();
 
       SkyAppTestUtility.fireDomEvent(autocompleteElement, 'keydown', {
@@ -603,7 +605,7 @@ describe('Autocomplete component', () => {
       tick();
       fixture.detectChanges();
 
-      const messageSpy = spyOn(autocomplete as any, 'sendDropdownMessage')
+      const messageSpy = spyOn(autocomplete as any, 'sendMessage')
         .and.callThrough();
       const notifySpy = spyOn(autocomplete.selectionChange, 'emit')
         .and.callThrough();
@@ -632,7 +634,7 @@ describe('Autocomplete component', () => {
         fixture.detectChanges();
         tick();
 
-        const spy = spyOn(autocomplete as any, 'sendDropdownMessage').and.callThrough();
+        const spy = spyOn(autocomplete as any, 'sendMessage').and.callThrough();
 
         SkyAppTestUtility.fireDomEvent(inputElement, 'mouseenter');
         tick();

diff --git a/src/modules/autocomplete/autocomplete.component.ts b/src/modules/autocomplete/autocomplete.component.ts
@@ -21,7 +21,8 @@ import 'rxjs/add/observable/fromEvent';
 import {
   SkyDropdownMenuChange,
   SkyDropdownMessageType,
-  SkyDropdownMessage
+  SkyDropdownMessage,
+  SkyDropdownMenuComponent
 } from '../dropdown';
 
 import {
@@ -34,6 +35,7 @@ import {
 import { SkyAutocompleteAdapterService } from './autocomplete-adapter.service';
 import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
 import { skyAutocompleteDefaultSearchFunction } from './autocomplete-default-search-function';
+import { SkyPopoverComponent, SkyPopoverAlignment } from '../popover';
 
 @Component({
   selector: 'sky-autocomplete',
@@ -115,8 +117,8 @@ export class SkyAutocompleteComponent
     return this._selectionChange;
   }
 
-  public get dropdownController(): Subject<SkyDropdownMessage> {
-    return this._dropdownController;
+  public get messageStream(): Subject<SkyDropdownMessage> {
+    return this._messageStream;
   }
 
   public get searchResults(): any[] {
@@ -127,9 +129,17 @@ export class SkyAutocompleteComponent
     return this._highlightText || '';
   }
 
+  public alignment: SkyPopoverAlignment = 'left';
+
   @ViewChild('defaultSearchResultTemplate')
   private defaultSearchResultTemplate: TemplateRef<any>;
 
+  @ViewChild(SkyPopoverComponent)
+  private popover: SkyPopoverComponent;
+
+  @ViewChild('dropdownMenu')
+  private dropdownMenu: SkyDropdownMenuComponent;
+
   @ContentChild(SkyAutocompleteInputDirective)
   private inputDirective: SkyAutocompleteInputDirective;
 
@@ -140,7 +150,7 @@ export class SkyAutocompleteComponent
 
   private _data: any[];
   private _descriptorProperty: string;
-  private _dropdownController = new Subject<SkyDropdownMessage>();
+  private _messageStream = new Subject<SkyDropdownMessage>();
   private _highlightText: string;
   private _propertiesToSearch: string[];
   private _search: SkyAutocompleteSearchFunction;
@@ -178,6 +188,12 @@ export class SkyAutocompleteComponent
       .subscribe(() => {
         this.isMouseEnter = false;
       });
+
+      this.messageStream
+      .takeUntil(this.ngUnsubscribe)
+      .subscribe((message: SkyDropdownMessage) => {
+        this.handleIncomingMessages(message);
+      });
   }
 
   public ngAfterContentInit(): void {
@@ -224,17 +240,21 @@ export class SkyAutocompleteComponent
     }
 
     if (change.items) {
-      this.sendDropdownMessage(SkyDropdownMessageType.FocusFirstItem);
+      this.sendMessage(SkyDropdownMessageType.FocusFirstItem);
     }
   }
 
+  public onPopoverOpened() {
+    this.sendMessage(SkyDropdownMessageType.Open);
+  }
+
   private handleKeyDown(event: KeyboardEvent): void {
     const key = event.key.toLowerCase();
 
     /* tslint:disable-next-line:switch-default */
     switch (key) {
       case 'arrowup':
-      this.sendDropdownMessage(SkyDropdownMessageType.FocusPreviousItem);
+      this.sendMessage(SkyDropdownMessageType.FocusPreviousItem);
       event.preventDefault();
       break;
 
@@ -246,7 +266,7 @@ export class SkyAutocompleteComponent
         this.searchTextChanged(text);
         event.preventDefault();
       } else {
-        this.sendDropdownMessage(SkyDropdownMessageType.FocusNextItem);
+        this.sendMessage(SkyDropdownMessageType.FocusNextItem);
         event.preventDefault();
       }
       break;
@@ -285,7 +305,7 @@ export class SkyAutocompleteComponent
     if (isLongEnough && isDifferent) {
       this.performSearch().then((results: any[]) => {
         if (!this.hasSearchResults()) {
-          this.sendDropdownMessage(SkyDropdownMessageType.Open);
+          this.positionPopover();
         }
 
         this._searchResults = results;
@@ -317,15 +337,48 @@ export class SkyAutocompleteComponent
     this.closeDropdown();
   }
 
+  private handleIncomingMessages(message: SkyDropdownMessage) {
+    /* tslint:disable-next-line:switch-default */
+    switch (message.type) {
+      case SkyDropdownMessageType.Open:
+      this.dropdownMenu.focusFirstItem();
+      break;
+
+      case SkyDropdownMessageType.FocusNextItem:
+      this.dropdownMenu.focusNextItem();
+      break;
+
+      case SkyDropdownMessageType.FocusPreviousItem:
+      this.dropdownMenu.focusPreviousItem();
+      break;
+
+      case SkyDropdownMessageType.Close:
+      this.popover.close();
+      break;
+
+      case SkyDropdownMessageType.FocusTriggerButton:
+      this.inputDirective.elementRef.nativeElement.focus();
+      break;
+    }
+  }
+
+  private positionPopover() {
+    this.popover.positionNextTo(
+      this.elementRef,
+      'below',
+      this.alignment
+    );
+  }
+
   private closeDropdown(): void {
     this._searchResults = [];
     this._highlightText = '';
     this.changeDetector.markForCheck();
-    this.sendDropdownMessage(SkyDropdownMessageType.Close);
+    this.sendMessage(SkyDropdownMessageType.Close);
   }
 
-  private sendDropdownMessage(type: SkyDropdownMessageType): void {
-    this.dropdownController.next({ type });
+  private sendMessage(type: SkyDropdownMessageType): void {
+    this.messageStream.next({ type });
   }
 
   private hasSearchResults(): boolean {

diff --git a/src/modules/autocomplete/autocomplete.module.ts b/src/modules/autocomplete/autocomplete.module.ts
@@ -7,6 +7,7 @@ import { SkyTextHighlightModule } from '../text-highlight';
 
 import { SkyAutocompleteComponent } from './autocomplete.component';
 import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
+import { SkyPopoverModule } from '../popover';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
     CommonModule,
     FormsModule,
     SkyTextHighlightModule,
-    SkyDropdownModule
+    SkyDropdownModule,
+    SkyPopoverModule
   ],
   exports: [
     SkyAutocompleteComponent,