updated extended-listbox to 4.0.0 (#19943)

types/extended-listbox/extended-listbox-tests.ts

@@ -1,39 +1,38 @@
-/// <reference types="jquery" />
-
-var $test = $("#test");
+const testElement: HTMLElement = document.getElementById("test");
 
 // Create Listbox with defaults
-var instance: ExtendedListboxInstance = <ExtendedListboxInstance>$test.listbox();
+let instance: SingleSelectListBox = new SingleSelectListBox(testElement);
+instance = new MultiSelectListBox(testElement);
 
 
 // Create with options
-var options = <ListBoxOptions>{};
-options.multiple = true;
-options.searchBar = false;
-options.searchBarWatermark = "Search";
-options.searchBarButton = { icon: "fa fa-search", visible: true, onClick: function () { alert(); } };
-options.getItems = (): (string|ListboxItem)[] => {
+let settings = <ListBoxSettings>{};
+settings.searchBar = false;
+settings.searchBarWatermark = "Search";
+settings.searchBarButton = { icon: "fa fa-search", visible: true, onClick: function () { alert(); } };
+settings.getItems = (): (string|ListBoxItem)[] => {
     return ["Test1"];
 };
-options.onItemsChanged = (event: ListboxEvent): void => {
+settings.onItemsChanged = (event: ListBoxEvent): void => {
     console.log(event.eventName);
     console.log(event.args);
     console.log(event.target);
 };
-options.onFilterChanged = (event: ListboxEvent): void => {
+settings.onFilterChanged = (event: ListBoxEvent): void => {
     console.log(event.args);
 };
-options.onValueChanged = (event: ListboxEvent): void => {
+settings.onValueChanged = (event: ListBoxEvent): void => {
     console.log(event.args);
 };
-options.onItemDoubleClicked = (event: ListboxEvent): void => {
+settings.onItemDoubleClicked = (event: ListBoxEvent): void => {
     console.log(event.args);
 };
-options.onItemEnterPressed = (event: ListboxEvent): void => {
+settings.onItemEnterPressed = (event: ListBoxEvent): void => {
     console.log(event.args);
 };
 
-instance = <ExtendedListboxInstance>$test.listbox(options);
+instance = new SingleSelectListBox(testElement, settings);
+instance = new MultiSelectListBox(testElement, settings);
 
 
 /////// NEW API ///////
@@ -43,7 +42,7 @@ var id: string = instance.addItem("Test2");
 
 
 // Add item
-var item: ListboxItem = <ListboxItem>{};
+var item: ListBoxItem = <ListBoxItem>{};
 item.selected = true;
 item.disabled = false;
 item.childItems = [{ text: "Test4" }];
@@ -67,14 +66,14 @@ instance.removeItems([id, ids[0]]);
 
 
 // Get item
-var i: ListboxItem = instance.getItem(id);
+var i: ListBoxItem = instance.getItem(id);
 
 
 // Get items
-var allItems: ListboxItem[] = instance.getItems();
+var allItems: ListBoxItem[] = instance.getItems();
 
 // Get selected items
-var allItems: ListboxItem[] = instance.getSelection();
+var allItems: ListBoxItem[] = instance.getSelection();
 
 
 // Move item up
@@ -106,30 +105,30 @@ instance.destroy();
 
 
 // onValueChanged
-instance.onValueChanged((event: ListboxEvent) => {
+settings.onValueChanged = (event: ListBoxEvent) => {
     console.log(event.args);
-});
+};
 
 
 // onItemsChanged
-instance.onItemsChanged((event: ListboxEvent) => {
+settings.onItemsChanged = (event: ListBoxEvent) => {
     console.log(event.args);
-});
+};
 
 
 // onFilterChanged
-instance.onFilterChanged((event: ListboxEvent) => {
+settings.onFilterChanged = (event: ListBoxEvent) => {
     console.log(event.args);
-});
+};
 
 
 // onItemEnterPressed
-instance.onItemEnterPressed((event: ListboxEvent) => {
+settings.onItemEnterPressed = (event: ListBoxEvent) => {
     console.log(event.args);
-});
+};
 
 
 // onItemDoubleClicked
-instance.onItemDoubleClicked((event: ListboxEvent) => {
+settings.onItemDoubleClicked = (event: ListBoxEvent) => {
     console.log(event.args);
-});
+};

types/extended-listbox/index.d.ts

@@ -1,10 +1,9 @@
-// Type definitions for extended-listbox 3.0.x
+// Type definitions for extended-listbox 4.0.x
 // Project: https://github.com/code-chris/extended-listbox
 // Definitions by: Christian Kotzbauer <https://github.com/code-chris>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
 
-interface ListboxItem {
+interface ListBoxItem {
     /** display text */
     text?: string;
 
@@ -27,10 +26,10 @@ interface ListboxItem {
     parentGroupId?: string;
 
     /** list of childItems */
-    childItems?: ListboxItem[];
+    childItems?: (string | ListBoxItem)[];
 }
 
-interface ListboxSearchBarButtonOptions {
+interface ListBoxSearchBarButtonOptions {
     /** determines if the button is visible */
     visible?: boolean;
 
@@ -41,7 +40,7 @@ interface ListboxSearchBarButtonOptions {
     onClick?: () => void;
 }
 
-interface ListBoxOptions {
+interface ListBoxSettings {
     /** determines if the searchBar is visible */
     searchBar?: boolean;
 
@@ -49,50 +48,44 @@ interface ListBoxOptions {
     searchBarWatermark?: string;
 
     /** settings for the searchBar button */
-    searchBarButton?: ListboxSearchBarButtonOptions;
-
-    /** determines if multiple items can be selected */
-    multiple?: boolean;
+    searchBarButton?: ListBoxSearchBarButtonOptions;
 
     /** function which returns a array of items */
-    getItems?: () => (string|ListboxItem)[];
+    getItems?: () => (string | ListBoxItem)[];
 
     /** callback for selection changes */
-    onValueChanged?: (event: ListboxEvent) => void;
+    onValueChanged?: (event: ListBoxEvent) => void;
 
     /** callback for searchBar text changes */
-    onFilterChanged?: (event: ListboxEvent) => void;
+    onFilterChanged?: (event: ListBoxEvent) => void;
 
     /** callback for item changes (item added, item removed, item order) */
-    onItemsChanged?: (event: ListboxEvent) => void;
+    onItemsChanged?: (event: ListBoxEvent) => void;
 
     /** callback for enter keyPress event on an item */
-    onItemEnterPressed?: (event: ListboxEvent) => void;
+    onItemEnterPressed?: (event: ListBoxEvent) => void;
 
     /** callback for doubleClick event on an item */
-    onItemDoubleClicked?: (event: ListboxEvent) => void;
+    onItemDoubleClicked?: (event: ListBoxEvent) => void;
 }
 
-interface ListboxEvent {
+interface ListBoxEvent {
     /** unique event name */
     eventName: string;
 
     /** target object for which event is triggered */
-    target: JQuery;
+    target: Element;
 
     /** any object */
     args: any;
 }
 
-interface ExtendedListboxInstance {
-    /** DOM element of the listbox root */
-    target: JQuery;
-
+interface BaseListBox {
     /** Adds a new item to the list */
-    addItem(item: string|ListboxItem): string;
+    addItem(item: string | ListBoxItem): string;
 
     /** Adds new items to the list */
-    addItems(item: (string|ListboxItem)[]): string[];
+    addItems(items: (string | ListBoxItem)[]): string[];
 
     /** Removes a item from the list */
     removeItem(identifier: string): void;
@@ -107,13 +100,10 @@ interface ExtendedListboxInstance {
     clearSelection(): void;
 
     /** Returns a item object for the given id or display text */
-    getItem(identifier: string): ListboxItem;
+    getItem(identifier: string): ListBoxItem;
 
     /** Returns all item objects */
-    getItems(): ListboxItem[];
-
-    /** Returns all ListboxItem's which are selected */
-    getSelection(): ListboxItem[];
+    getItems(): ListBoxItem[];
 
     /** Decreases the index of the matching item by one */
     moveItemUp(identifier: string): number;
@@ -130,26 +120,22 @@ interface ExtendedListboxInstance {
     /** Enables or disables the whole list and all childs */
     enable(state: boolean): void;
 
-    /** callback for selection changes */
-    onValueChanged(callback: (event: ListboxEvent) => void): void;
-
-    /** callback for item changes (item added, item removed, item order) */
-    onItemsChanged(callback: (event: ListboxEvent) => void): void;
-
-    /** callback for searchBar text changes */
-    onFilterChanged(callback: (event: ListboxEvent) => void): void;
-
-    /** callback for enter keyPress event on an item */
-    onItemEnterPressed(callback: (event: ListboxEvent) => void): void;
-
-    /** callback for doubleClick event on an item */
-    onItemDoubleClicked(callback: (event: ListboxEvent) => void): void;
+    /** Returns all ListBoxItem's which are selected */
+    getSelection(): ListBoxItem[];
 }
 
-interface JQuery {
-    /** constructs a new instance of Listbox on the given DOM item or returns existing */
-    listbox(): ExtendedListboxInstance|ExtendedListboxInstance[];
-
-    /** constructs a new instance of Listbox on the given DOM item */
-    listbox(options: ListBoxOptions): ExtendedListboxInstance|ExtendedListboxInstance[];
+interface SingleSelectListBox extends BaseListBox {
 }
+
+interface MultiSelectListBox extends BaseListBox {
+}
+
+declare var SingleSelectListBox: {
+    prototype: SingleSelectListBox;
+    new(domElement: HTMLElement, options?: ListBoxSettings): SingleSelectListBox;
+};
+
+declare var MultiSelectListBox: {
+    prototype: MultiSelectListBox;
+    new(domElement: HTMLElement, options?: ListBoxSettings): MultiSelectListBox;
+};