Feature/searchbox#82

SearchBox/README.md

@@ -8,15 +8,17 @@ This code component provides a wrapper around the [Fluent UI SearchBox](https://
 
 ## Properties
 
-- **SearchText** - The action items to render. The first item is considered the root item.
+- **Search Text** - The action items to render. The first item is considered the root item.
 
-- **IconName** - Name of the Fluent UI icon (see [Fluent UI Icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)).
+- **Icon Name** - Name of the Fluent UI icon (see [Fluent UI Icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)).
 
 - **Underlined** - Whether or not the SearchBox is underlined.
 
-- **DisableAnimation** - Whether or not to animate the SearchBox icon on focus.
+- **Disable Animation** - Whether or not to animate the SearchBox icon on focus.
 
-- **PlaceholderText** - Placeholder for the search box.
+- **Placeholder Text** - Placeholder for the search box.
+
+- **Delay Output** - To delay output by half a second. Useful when input is provided frequently within short duration.
 
 ## Additional properties
 

SearchBox/SearchBox/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="PowerCAT" constructor="SearchBox" version="0.0.1" display-name-key="SearchBox" description-key="SearchBox description" control-type="virtual">
+  <control namespace="PowerCAT" constructor="SearchBox" version="0.0.1" display-name-key="SearchBox" description-key="SearchBox_desc" control-type="virtual">
     <property name="SearchText" display-name-key="SearchBox_SearchText" description-key="SearchBox_SearchText_Desc" of-type="SingleLine.Text" usage="output" hidden="true" />
     <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
     <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
@@ -9,7 +9,7 @@
     <property name="DisableAnimation" display-name-key="DisableAnimation" of-type="TwoOptions" usage="input" required="false" />
     <property name="PlaceHolderText" display-name-key="PlaceHolderText" of-type="SingleLine.Text" usage="input" required="false" default-value="Search" />
     <property name="InputEvent" display-name-key="InputEvent" of-type="SingleLine.Text" usage="input" required="false"/>
-
+    <property name="DelayOutput" display-name-key="DelayOutput" of-type="TwoOptions" usage="input" required="false" />
     <resources>
       <code path="index.ts" order="1" />
       <resx path="strings/SearchBox.1033.resx" version="1.0.0" />

SearchBox/SearchBox/__mocks__/mock-parameters.ts

@@ -12,5 +12,6 @@ export function getMockParameters(): IInputs {
         IconName: new MockStringProperty(),
         DisableAnimation: new MockTwoOptionsProperty(),
         InputEvent: new MockStringProperty(),
+        DelayOutput: new MockTwoOptionsProperty(),
     };
 }

SearchBox/SearchBox/index.ts

@@ -3,11 +3,22 @@ import { IInputs, IOutputs } from './generated/ManifestTypes';
 import { SearchBoxComponent } from './components/SearchBox';
 import { ISearchBoxComponentProps } from './components/Component.types';
 import { InputEvents } from './ManifestConstants';
+import { Async } from '@fluentui/react';
+
 export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutputs> {
+    private static readonly DELAY_TIMEOUT: number = 500;
     context: ComponentFramework.Context<IInputs>;
-    notifyOutputChanged: () => void;
-    searchTextValue: string | null;
+    notifyOutputChanged: ((debounce?: boolean) => void) | null;
+    searchTextValue: string;
     setFocus = '';
+    asyncFluent: Async;
+    debouncedOutputChanged: (debounce?: boolean) => void;
+    delayOutput: boolean;
+
+    constructor() {
+        this.onChange = this.onChange.bind(this);
+        this.asyncFluent = new Async();
+    }
 
     /**
      * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
@@ -17,9 +28,12 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
      * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
      */
     public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void): void {
+        this.notifyOutputChanged = notifyOutputChanged;
         this.context = context;
         this.context.mode.trackContainerResize(true);
-        this.notifyOutputChanged = notifyOutputChanged;
+        if (this.notifyOutputChanged) {
+            this.debouncedOutputChanged = this.asyncFluent.debounce(this.notifyOutputChanged, SearchBox.DELAY_TIMEOUT);
+        }
     }
 
     /**
@@ -29,6 +43,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
     public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
         const allocatedWidth = parseInt(context.mode.allocatedWidth as unknown as string);
         const allocatedHeight = parseInt(context.mode.allocatedHeight as unknown as string);
+        this.delayOutput = context.parameters.DelayOutput.raw;
         const inputEvent = this.context.parameters.InputEvent.raw;
         const eventChanged = inputEvent && this.setFocus !== inputEvent;
 
@@ -57,9 +72,11 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
      * Called when a change is detected from the control. Updates the searchTextValue variable that is assigned to the output SearchText.
      * @param newValue a string returned as the input search text
      */
-    private onChange = (newValue: string | undefined): void => {
-        this.searchTextValue = newValue ?? null;
-        this.notifyOutputChanged();
+    private onChange = (newValue?: string): void => {
+        this.searchTextValue = newValue || '';
+        this.delayOutput
+            ? this.debouncedOutputChanged && this.debouncedOutputChanged()
+            : this.notifyOutputChanged && this.notifyOutputChanged();
     };
 
     /**
@@ -77,6 +94,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
      * i.e. cancelling any pending remote calls, removing listeners, etc.
      */
     public destroy(): void {
-        // Add code to cleanup control if necessary
+        this.notifyOutputChanged = null;
+        this.asyncFluent.dispose();
     }
 }

SearchBox/SearchBox/strings/SearchBox.1033.resx

@@ -142,4 +142,10 @@
     <data name="InputEvent" xml:space="preserve">
         <value>Input Event</value>
     </data>
+    <data name="DelayOutput" xml:space="preserve">
+        <value>Delay Output</value>
+    </data>
+    <data name="SearchBox_desc" xml:space="preserve">
+        <value>A component to get search text as input</value>
+    </data>
 </root>