Add debounce

Author: McDoyen

package-lock.json

@@ -96,7 +96,7 @@
     "ts-loader": "^5.3.1",
     "tslint": "^5.11.0",
     "tslint-eslint-rules": "^5.4.0",
-    "typescript": "^3.2.1",
+    "typescript": "^3.2.2",
     "wdio-dot-reporter": "0.0.10",
     "wdio-jasmine-framework": "^0.3.8",
     "wdio-selenium-standalone-service": "0.0.11",

package.json

@@ -4,7 +4,7 @@ import Select, { Async } from "react-select";
 
 import { Alert } from "../../SharedResources/components/Alert";
 import { Label } from "../../SharedResources/components/Label";
-import { DropdownReferenceProps, hideDropDown } from "../../SharedResources/utils/ContainerUtils";
+import { DropdownReferenceProps, debounce, hideDropDown } from "../../SharedResources/utils/ContainerUtils";
 
 import "react-select/dist/react-select.css";
 import "../../SharedResources/ui/Dropdown.scss";
@@ -58,7 +58,7 @@ export class DropdownReference extends Component<DropdownReferenceProps> {
                     })
                     : createElement(Async, {
                         searchPromptText: this.props.searchPromptText,
-                        loadOptions: this.props.asyncData,
+                        loadOptions: debounce(this.props.asyncData, 200),
                         ...commonProps
                     }),
                 createElement(Alert, { className: "widget-dropdown-reference-alert" }, this.props.alertMessage)

src/DropdownReference/components/DropdownReference.ts

@@ -1,10 +1,10 @@
 import { Component, createElement } from "react";
-import Select, { Async, LoadOptionsHandler } from "react-select";
+import Select, { Async } from "react-select";
 import * as classNames from "classnames";
 
 import { Alert } from "../../SharedResources/components/Alert";
 import { Label } from "../../SharedResources/components/Label";
-import { hideDropDown } from "../../SharedResources/utils/ContainerUtils";
+import { debounce, hideDropDown } from "../../SharedResources/utils/ContainerUtils";
 
 import "react-select/dist/react-select.css";
 import "../../SharedResources/ui/Dropdown.scss";
@@ -13,7 +13,7 @@ export interface DropdownReferenceSetProps {
     styleObject?: object;
     labelWidth: number;
     data?: ReferenceOption[];
-    asyncData: LoadOptionsHandler<{}>;
+    asyncData: any;
     labelCaption: string;
     showLabel: boolean;
     emptyOptionCaption: string;
@@ -98,7 +98,7 @@ export class DropdownReferenceSet extends Component<DropdownReferenceSetProps> {
                     : createElement(Async, {
                         autoload: false,
                         autoFocus: true,
-                        loadOptions: this.props.asyncData,
+                        loadOptions: debounce(this.props.asyncData, 200),
                         searchPromptText: this.props.searchPromptText,
                         ...commonProps
                     }),

src/DropdownReferenceSet/components/DropdownReferenceSet.ts

@@ -3,6 +3,11 @@
   .Select-arrow {
     display: none;
   }
+
+  .Select-clear {
+    color: $gray-dark;
+  }
+
   .Select.is-focused:not(.is-open) > .Select-control,
   select.has-value.is-focused.is-open > .Select-control {
     border-color: $brand-primary;

src/SharedResources/ui/Dropdown.scss

@@ -1,6 +1,5 @@
 import { ContainerProps } from "../../DropdownReference/components/DropdownReferenceContainer";
 import { ContainerProps as ReferenceSetProps } from "../../DropdownReferenceSet/components/DropdownReferenceSetContainer";
-import { LoadOptionsHandler } from "react-select";
 
 export interface AttributeType {
     name: string;
@@ -16,7 +15,7 @@ export interface DropdownReferenceProps {
     styleObject?: object;
     labelWidth: number;
     data: ReferenceOption[];
-    asyncData: LoadOptionsHandler<{}>;
+    asyncData: any;
     value?: string;
     labelCaption: string;
     showLabel: boolean;
@@ -48,6 +47,21 @@ export function hideDropDown() {
     }
 }
 
+export function debounce(input: any, wait = 0) {
+    let timeout: any = null;
+    let resolves: any = null;
+
+    return (...args: []) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            resolves(input(...args));
+            resolves = null;
+        }, wait);
+
+        return new Promise(r => resolves = r);
+    };
+}
+
 export const parseStyle = (style = ""): { [key: string]: string } => {
     try {
         return style.split(";").reduce<{ [key: string]: string }>((styleObject, line) => {