feat(dropdown): support passing Observables of Array<ListItem>

Author: cal-smith

src/combobox/combobox.component.ts

@@ -218,7 +218,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	 */
 	ngOnChanges(changes) {
 		if (changes.items) {
-			this.view["updateList"](changes.items.currentValue);
+			this.view.items = changes.items.currentValue;
 			this.updateSelected();
 		}
 	}
@@ -254,9 +254,9 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 					this.closeDropdown();
 				}
 				this.selected.emit(event);
-				this.view["filterBy"]("");
+				this.view.filterBy("");
 			});
-			this.view["updateList"](this.items);
+			this.view.items = this.items;
 			// update the rest of combobox with any pre-selected items
 			// setTimeout just defers the call to the next check cycle
 			setTimeout(() => {
@@ -290,7 +290,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 			ev.stopPropagation();
 			this.openDropdown();
 			setTimeout(() => this.view.getCurrentElement().focus(), 0);
-		} else if (ev.key === "ArrowUp" && this.dropdownMenu.nativeElement.contains(ev.target) && !this.view["hasPrevElement"]()) {
+		} else if (ev.key === "ArrowUp" && this.dropdownMenu.nativeElement.contains(ev.target) && !this.view.hasPrevElement()) {
 			this.elementRef.nativeElement.querySelector(".combobox_input").focus();
 		}
 	}
@@ -340,7 +340,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 			}
 			return item;
 		});
-		this.view["updateList"](this.items);
+		this.view.items = this.items;
 		this.updatePills();
 		// clearSelected can only fire on type=multi
 		// so we just emit getSelected() (just in case there's any disabled but selected items)
@@ -349,7 +349,6 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 
 	/**
 	 * Closes the dropdown and emits the close event.
-	 * @memberof ComboBox
 	 */
 	public closeDropdown() {
 		this.open = false;
@@ -358,15 +357,13 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 
 	/**
 	 * Opens the dropdown.
-	 * @memberof ComboBox
 	 */
 	public openDropdown() {
 		this.open = true;
 	}
 
 	/**
 	 * Toggles the dropdown.
-	 * @memberof ComboBox
 	 */
 	public toggleDropdown() {
 		if (this.open) {
@@ -381,7 +378,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	 * @param {string} searchString
 	 */
 	public onSearch(searchString) {
-		this.view["filterBy"](searchString);
+		this.view.filterBy(searchString);
 		if (searchString !== "") {
 			this.openDropdown();
 		} else {
@@ -390,7 +387,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 		if (this.type === "single") {
 			// deselect if the input doesn't match the content
 			// of any given item
-			const matches = this.view.items.some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));
+			const matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));
 			if (!matches) {
 				const selected = this.view.getSelected();
 				if (selected) {
@@ -399,7 +396,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 					this.view.select.emit({ item: selected[0] });
 					this.propagateChangeCallback(null);
 				} else {
-					this.view["filterBy"]("");
+					this.view.filterBy("");
 				}
 			}
 		}
@@ -421,10 +418,10 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	public onSubmit(ev) {
 		let index = 0;
 		if (ev.after) {
-			index = this.view.items.indexOf(ev.after) + 1;
+			index = this.view.getListItems().indexOf(ev.after) + 1;
 		}
 		this.submit.emit({
-			items: this.view.items,
+			items: this.view.getListItems(),
 			index,
 			value: {
 				content: ev.value,

src/dropdown/abstract-dropdown-view.class.ts

@@ -1,5 +1,6 @@
 import { Input, Output, EventEmitter } from "@angular/core";
 import { ListItem } from "./list-item.interface";
+import { Observable } from "rxjs";
 
 
 /**
@@ -14,13 +15,16 @@ export class AbstractDropdownView {
 	/**
 	 * The items to be displayed in the list within the `AbstractDropDownView`.
 	 * @type {Array<ListItem>}
-	 * @memberof AbstractDropdownView
 	 */
-	@Input() items: Array<ListItem>;
+	@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {
+	}
+
+	get items(): Array<ListItem> | Observable<Array<ListItem>> {
+		return;
+	}
 	/**
 	 * Emits selection events to other class.
 	 * @type {EventEmitter<Object>}
-	 * @memberof AbstractDropdownView
 	 */
 	@Output() select: EventEmitter<Object>;
 	/**
@@ -36,6 +40,10 @@ export class AbstractDropdownView {
 	 * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.
 	 */
 	getNextItem(): ListItem { return; }
+	/**
+	 * Returns a boolean if the currently selected item is preceded by another
+	 */
+	hasNextElement(): boolean { return; }
 	/**
 	 * Returns the `HTMLElement` for the item that is subsequent to the selected item.
 	 */
@@ -44,6 +52,10 @@ export class AbstractDropdownView {
 	 * Returns the `ListItem` that precedes the selected item within `DropdownList`.
 	 */
 	getPrevItem(): ListItem { return; }
+	/**
+	 * Returns a boolean if the currently selected item is followed by another
+	 */
+	hasPrevElement(): boolean { return; }
 	/**
 	 * Returns the `HTMLElement` for the item that precedes the selected item.
 	 */
@@ -60,13 +72,21 @@ export class AbstractDropdownView {
 	 * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.
 	 */
 	getCurrentElement(): HTMLElement { return; }
+	/**
+	 * Returns the current items as an Array
+	 */
+	getListItems(): Array<ListItem> { return; }
 	/**
 	 * Transforms array input list of items to the correct state by updating the selected item(s).
 	 */
 	propagateSelected(value: Array<ListItem>): void {}
-
 	/**
-	 * Initalizes focus in the list
+	 *
+	 * @param value value to filter the list by
+	 */
+	filterBy(value: string): void {}
+	/**
+	 * Initializes focus in the list
 	 * In most cases this just calls `getCurrentElement().focus()`
 	 */
 	initFocus(): void {}

src/dropdown/dropdown.component.ts

@@ -20,6 +20,7 @@ import { throttleTime } from "rxjs/operators";
 import { AbstractDropdownView } from "./abstract-dropdown-view.class";
 import { position } from "../utils/position";
 import { I18n } from "./../i18n/i18n.module";
+import { ListItem } from "./list-item.interface";
 
 /**
  * Drop-down lists enable users to select one or more items from a list.
@@ -258,7 +259,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	writeValue(value: any) {
 		if (this.type === "single") {
 			if (this.value) {
-				const newValue = Object.assign({}, this.view.items.find(item => item[this.value] === value));
+				const newValue = Object.assign({}, this.view.getListItems().find(item => item[this.value] === value));
 				newValue.selected = true;
 				this.view.propagateSelected([newValue]);
 			} else {

src/dropdown/dropdown.stories.ts

@@ -4,6 +4,7 @@ import { action } from "@storybook/addon-actions";
 import { withKnobs, select, boolean, object, text } from "@storybook/addon-knobs/angular";
 
 import { DropdownModule } from "../";
+import { of } from "rxjs";
 
 storiesOf("Dropdown", module)
 	.addDecorator(
@@ -89,6 +90,32 @@ storiesOf("Dropdown", module)
 			model: null
 		}
 	}))
+	.add("With Observable items", () => ({
+		template: `
+		<div style="width: 300px">
+			<ibm-dropdown
+				[theme]="theme"
+				placeholder="Select"
+				[disabled]="disabled"
+				(selected)="selected($event)"
+				(onClose)="onClose($event)">
+				<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
+			</ibm-dropdown>
+		</div>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: of([
+				{ content: "one" },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for dropdown"),
+			onClose: action("Dropdown closed"),
+			theme: select("theme", ["dark", "light"], "dark")
+		}
+	}))
 	.add("Skeleton", () => ({
 		template: `
 		<div style="width: 300px">