diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index 037bdcf71..fd497482a 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -1680,12 +1680,21 @@ "tagName": "dnn-searchbox", "description": "", "attributes": [ + { + "name": "debounce-time", + "type": { + "text": "number" + }, + "description": "How many milliseconds to wait before firing the queryChanged event.", + "default": "500", + "required": false + }, { "name": "debounced", "type": { "text": "boolean" }, - "description": "Debounces the queryChanged by 500ms.", + "description": "", "default": "true", "required": false }, diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index 8b632d899..fc86b501f 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -549,7 +549,11 @@ export namespace Components { } interface DnnSearchbox { /** - * Debounces the queryChanged by 500ms. + * How many milliseconds to wait before firing the queryChanged event. + */ + "debounceTime": number; + /** + * @deprecated Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0 Debounces the queryChanged by 500ms. */ "debounced": boolean; /** @@ -1831,7 +1835,11 @@ declare namespace LocalJSX { } interface DnnSearchbox { /** - * Debounces the queryChanged by 500ms. + * How many milliseconds to wait before firing the queryChanged event. + */ + "debounceTime"?: number; + /** + * @deprecated Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0 Debounces the queryChanged by 500ms. */ "debounced"?: boolean; /** diff --git a/packages/stencil-library/src/components/dnn-searchbox/dnn-searchbox.tsx b/packages/stencil-library/src/components/dnn-searchbox/dnn-searchbox.tsx index 0404fefff..4ed564cf7 100644 --- a/packages/stencil-library/src/components/dnn-searchbox/dnn-searchbox.tsx +++ b/packages/stencil-library/src/components/dnn-searchbox/dnn-searchbox.tsx @@ -1,5 +1,5 @@ import { Component, Host, h, Event, EventEmitter, Watch, Prop, State } from '@stencil/core'; -import { Debounce } from '../../utilities/debounce'; + @Component({ tag: 'dnn-searchbox', styleUrl: 'dnn-searchbox.scss', @@ -13,10 +13,16 @@ export class DnnSearchbox { @Prop() placeholder?: string = ""; /** + * @deprecated Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0 * Debounces the queryChanged by 500ms. */ @Prop() debounced: boolean = true; + /** + * How many milliseconds to wait before firing the queryChanged event. + */ + @Prop() debounceTime: number = 500; + /** Sets the query */ @Prop({mutable: true}) query: string = ""; @@ -27,27 +33,18 @@ export class DnnSearchbox { @Event() queryChanged: EventEmitter; @Watch('query') - fireQueryChanged(){ - if (this.debounced){ - this.debouncedHandleQueryChanged(); - } - else{ - this.handleQueryChanged(); - } + handleQueryChanged(){ + clearTimeout(this.debounceTimer); + this.debounceTimer = setTimeout(() => { + this.queryChanged.emit(this.query); + }, this.debounceTime); } @State() focused: any; private inputField: HTMLInputElement; - private handleQueryChanged(){ - this.queryChanged.emit(this.query); - } - - @Debounce(500) - private debouncedHandleQueryChanged(){ - this.handleQueryChanged(); - } + private debounceTimer: any = null; render() { return ( diff --git a/packages/stencil-library/src/components/dnn-searchbox/readme.md b/packages/stencil-library/src/components/dnn-searchbox/readme.md index e019c6d50..368cd99f2 100644 --- a/packages/stencil-library/src/components/dnn-searchbox/readme.md +++ b/packages/stencil-library/src/components/dnn-searchbox/readme.md @@ -7,11 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------------ | --------- | ------- | -| `debounced` | `debounced` | Debounces the queryChanged by 500ms. | `boolean` | `true` | -| `placeholder` | `placeholder` | Sets the field placeholder text. | `string` | `""` | -| `query` | `query` | Sets the query | `string` | `""` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | +| `debounceTime` | `debounce-time` | How many milliseconds to wait before firing the queryChanged event. | `number` | `500` | +| `debounced` | `debounced` | **[DEPRECATED]** Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0 Debounces the queryChanged by 500ms.

| `boolean` | `true` | +| `placeholder` | `placeholder` | Sets the field placeholder text. | `string` | `""` | +| `query` | `query` | Sets the query | `string` | `""` | ## Events diff --git a/packages/stencil-library/src/index.html b/packages/stencil-library/src/index.html index 1bb7445f2..5d9c59323 100644 --- a/packages/stencil-library/src/index.html +++ b/packages/stencil-library/src/index.html @@ -723,7 +723,7 @@

dnn-searchbox



- +


diff --git a/packages/stencil-library/src/utilities/debounce.ts b/packages/stencil-library/src/utilities/debounce.ts index 62d746985..5192905cd 100644 --- a/packages/stencil-library/src/utilities/debounce.ts +++ b/packages/stencil-library/src/utilities/debounce.ts @@ -15,8 +15,6 @@ export function Debounce(debounceTime: number = 500){ resolve(originalMethod.apply(this, args)); }, debounceTime); }) - } - } } \ No newline at end of file diff --git a/packages/stencil-library/vscode-data.json b/packages/stencil-library/vscode-data.json index d6e417ab3..ba55445ab 100644 --- a/packages/stencil-library/vscode-data.json +++ b/packages/stencil-library/vscode-data.json @@ -718,9 +718,13 @@ "value": "" }, "attributes": [ + { + "name": "debounce-time", + "description": "How many milliseconds to wait before firing the queryChanged event." + }, { "name": "debounced", - "description": "Debounces the queryChanged by 500ms." + "description": "" }, { "name": "placeholder",