Skip to content

Commit 7b487f0

Browse files
McDoyenMcDoyen
committed
Add debounce
1 parent 79448b0 commit 7b487f0

11 files changed

Lines changed: 77 additions & 88 deletions

File tree

‎package-lock.json‎

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
"ts-loader": "^5.3.1",
9797
"tslint": "^5.11.0",
9898
"tslint-eslint-rules": "^5.4.0",
99-
"typescript": "^3.2.1",
99+
"typescript": "^3.2.2",
100100
"wdio-dot-reporter": "0.0.10",
101101
"wdio-jasmine-framework": "^0.3.8",
102102
"wdio-selenium-standalone-service": "0.0.11",

‎src/DropdownReference/DropdownReference.webmodeler.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,8 @@ export class preview extends Component<ContainerProps, {}> {
4646
return (this.props.editable !== "default") || this.props.readOnly;
4747
}
4848

49-
private setAsyncSampleData(input: string): Promise<{}> | undefined {
50-
if (!input) {
49+
private setAsyncSampleData(): Promise<{}> {
5150
return Promise.resolve({ options: [ ] });
52-
}
53-
54-
return;
5551
}
5652
}
5753

‎src/DropdownReference/components/DropdownReference.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import Select, { Async } from "react-select";
44

55
import { Alert } from "../../SharedResources/components/Alert";
66
import { Label } from "../../SharedResources/components/Label";
7-
import { DropdownReferenceProps, hideDropDown } from "../../SharedResources/utils/ContainerUtils";
7+
import { DropdownProps, debounce, hideDropDown } from "../../SharedResources/utils/ContainerUtils";
88

99
import "react-select/dist/react-select.css";
1010
import "../../SharedResources/ui/Dropdown.scss";
1111

12-
export class DropdownReference extends Component<DropdownReferenceProps> {
12+
export class DropdownReference extends Component<DropdownProps> {
1313
render() {
1414
return this.props.showLabel
1515
? createElement(Label, {
@@ -42,7 +42,7 @@ export class DropdownReference extends Component<DropdownReferenceProps> {
4242
const commonProps = {
4343
clearable: this.props.isClearable,
4444
disabled: this.props.isReadOnly,
45-
onChange: this.props.handleOnchange,
45+
onChange: this.props.handleOnchange as () => void,
4646
...this.createSelectorProp()
4747
};
4848

@@ -58,7 +58,7 @@ export class DropdownReference extends Component<DropdownReferenceProps> {
5858
})
5959
: createElement(Async, {
6060
searchPromptText: this.props.searchPromptText,
61-
loadOptions: this.props.asyncData,
61+
loadOptions: debounce(this.props.asyncData, 200),
6262
...commonProps
6363
}),
6464
createElement(Alert, { className: "widget-dropdown-reference-alert" }, this.props.alertMessage)

‎src/DropdownReference/components/DropdownReferenceContainer.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, createElement } from "react";
22
import * as initializeReactFastclick from "react-fastclick";
33
import { hot } from "react-hot-loader";
44

5-
import { AttributeType, DropdownReferenceProps, ReferenceOption, parseStyle, validateProps } from "../../SharedResources/utils/ContainerUtils";
5+
import { AttributeType, DropdownProps, ReferenceOption, parseStyle, validateProps } from "../../SharedResources/utils/ContainerUtils";
66
import { FetchDataOptions, fetchData } from "../../SharedResources/utils/Data";
77
import { DropdownReference } from "./DropdownReference";
88

@@ -15,7 +15,7 @@ interface WrapperProps {
1515
friendlyId: string;
1616
}
1717

18-
export interface ContainerProps extends WrapperProps, DropdownReferenceProps {
18+
export interface ContainerProps extends WrapperProps, DropdownProps {
1919
attribute: string;
2020
entityPath: string;
2121
entityConstraint: string;
@@ -33,7 +33,7 @@ export interface ContainerProps extends WrapperProps, DropdownReferenceProps {
3333
export interface ContainerState {
3434
isClearable: boolean;
3535
options: ReferenceOption[];
36-
selectedObject: any;
36+
selectedObject: ReferenceOption;
3737
}
3838

3939
class DropdownReferenceContainer extends Component<ContainerProps, ContainerState> {
@@ -143,7 +143,7 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
143143
this.subscriptionHandles.push(window.mx.data.subscribe({
144144
entity: this.props.entityPath.split("/")[1],
145145
callback: () => {
146-
this.setState({ selectedObject: null });
146+
this.setState({ selectedObject: {} });
147147
this.getSelectedValue(this.props);
148148
this.retrieveOptions(this.props);
149149
}
@@ -163,15 +163,15 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
163163
} else {
164164
this.props.mxObject.set(this.association, selection.value);
165165
if (!this.state.selectedObject || (this.state.selectedObject.value !== selection.value)) {
166-
this.executeOnChangeEvent();
166+
this.executeOnChangeAction();
167167
}
168168
}
169169
}
170170

171-
this.setState({ selectedObject: selection ? selection : null });
171+
this.setState({ selectedObject: selection ? selection : {} });
172172
}
173173

174-
private executeOnChangeEvent() {
174+
private executeOnChangeAction() {
175175
const { mxform, mxObject, onChangeEvent, onChangeMicroflow, onChangeNanoflow } = this.props;
176176
const context = new mendix.lib.MxContext();
177177

@@ -232,10 +232,10 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
232232
this.setState({ options });
233233
}
234234

235-
private setAsyncOptions = (input: string): Promise<{ options: ReferenceOption[] }> => {
235+
private setAsyncOptions = (input?: string): Promise<{ options: ReferenceOption[] }> => {
236236
if (this.props.mxObject) {
237237
this.props.mxObject.set(this.props.searchAttribute, input);
238-
if (input.length >= this.props.minimumCharacter) {
238+
if (input && input.length >= this.props.minimumCharacter) {
239239
return this.retrieveOptions(this.props, input)
240240
.then(() => Promise.resolve({ options: this.state.options }));
241241
} else {

‎src/DropdownReference/components/__tests__/DropdownReference.spec.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ import { createElement } from "react";
44
import Select from "react-select";
55
import { Label } from "../../../SharedResources/components/Label";
66
import { DropdownReference } from "../DropdownReference";
7-
import { DropdownReferenceProps } from "../../../SharedResources/utils/ContainerUtils";
7+
import { DropdownProps } from "../../../SharedResources/utils/ContainerUtils";
88
import { Alert } from "../../../SharedResources/components/Alert";
99

1010
describe("DropdownReference", () => {
11-
const render = (props: DropdownReferenceProps) => shallow(createElement(DropdownReference, props));
12-
const ReferenceProps: DropdownReferenceProps = {
11+
const render = (props: DropdownProps) => shallow(createElement(DropdownReference, props));
12+
const ReferenceProps: DropdownProps = {
1313
asyncData: jasmine.any(Function),
1414
emptyOptionCaption: "Select city",
1515
labelWidth: 3,
1616
data: [ { value: "KampalaId" , label: "kampala" }, { value: "AmsterdamId" , label: "Amsterdam" } ],
17-
value: "Kampala",
1817
labelCaption: "City",
1918
location: "content",
2019
showLabel: true,

‎src/DropdownReferenceSet/DropdownReferenceSet.webmodeler.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,8 @@ export class preview extends Component<ContainerProps, {}> {
4646
return (this.props.editable !== "default") || this.props.readOnly;
4747
}
4848

49-
private setAsyncSampleData(input: string): Promise<{}> | undefined {
50-
if (!input) {
51-
return Promise.resolve({ options: [ ] });
52-
}
53-
54-
return;
49+
private setAsyncSampleData(): Promise<{}> {
50+
return Promise.resolve({ options: [ ] });
5551
}
5652
}
5753

‎src/DropdownReferenceSet/components/DropdownReferenceSet.ts‎

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,20 @@
11
import { Component, createElement } from "react";
2-
import Select, { Async, LoadOptionsHandler } from "react-select";
2+
import Select, { Async } from "react-select";
33
import * as classNames from "classnames";
44

55
import { Alert } from "../../SharedResources/components/Alert";
66
import { Label } from "../../SharedResources/components/Label";
7-
import { hideDropDown } from "../../SharedResources/utils/ContainerUtils";
7+
import { DropdownProps, debounce, hideDropDown } from "../../SharedResources/utils/ContainerUtils";
88

99
import "react-select/dist/react-select.css";
1010
import "../../SharedResources/ui/Dropdown.scss";
1111

12-
export interface DropdownReferenceSetProps {
13-
styleObject?: object;
14-
labelWidth: number;
15-
data?: ReferenceOption[];
16-
asyncData: LoadOptionsHandler<{}>;
17-
labelCaption: string;
18-
showLabel: boolean;
19-
emptyOptionCaption: string;
20-
isClearable: boolean;
21-
isReadOnly: boolean;
22-
selectType: "normal" | "asynchronous";
23-
lazyFilter: "startWith" | "contains";
24-
selectedValue: ReferenceOption[];
25-
handleOnchange?: (selectedOption: any) => void;
26-
className?: string;
27-
readOnlyStyle: "control" | "text";
28-
labelOrientation: "horizontal" | "vertical";
29-
location: "content" | "popup" | "modal" | "node";
30-
alertMessage: string;
31-
loadingText: string;
32-
minimumCharacter: number;
33-
searchPromptText: string;
34-
}
35-
3612
export interface ReferenceOption {
3713
value: string | boolean;
3814
label: string;
3915
}
4016

41-
export class DropdownReferenceSet extends Component<DropdownReferenceSetProps> {
17+
export class DropdownReferenceSet extends Component<DropdownProps> {
4218
render() {
4319
return this.props.showLabel
4420
? createElement(Label, {
@@ -73,7 +49,7 @@ export class DropdownReferenceSet extends Component<DropdownReferenceSetProps> {
7349
multi: true,
7450
removeSelected: true,
7551
disabled: this.props.isReadOnly,
76-
onChange: this.props.handleOnchange,
52+
onChange: this.props.handleOnchange as () => void,
7753
...this.createSelectorProp()
7854
};
7955

@@ -98,7 +74,7 @@ export class DropdownReferenceSet extends Component<DropdownReferenceSetProps> {
9874
: createElement(Async, {
9975
autoload: false,
10076
autoFocus: true,
101-
loadOptions: this.props.asyncData,
77+
loadOptions: debounce(this.props.asyncData, 200),
10278
searchPromptText: this.props.searchPromptText,
10379
...commonProps
10480
}),
@@ -145,7 +121,7 @@ export class DropdownReferenceSet extends Component<DropdownReferenceSetProps> {
145121
this.props.selectedValue.forEach((dataObject: ReferenceOption) => {
146122
const value = dataObject.value;
147123
if (value === selectedGuid.value) {
148-
selectedLabel = dataObject.label;
124+
selectedLabel = dataObject.label as string;
149125
}
150126
});
151127
}

‎src/DropdownReferenceSet/components/DropdownReferenceSetContainer.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { Component, createElement } from "react";
22
import * as initializeReactFastclick from "react-fastclick";
33
import { hot } from "react-hot-loader";
44

5-
import { AttributeType, parseStyle, validateProps } from "../../SharedResources/utils/ContainerUtils";
5+
import { AttributeType, DropdownProps, parseStyle, validateProps } from "../../SharedResources/utils/ContainerUtils";
66
import { FetchDataOptions, fetchData } from "../../SharedResources/utils/Data";
7-
import { DropdownReferenceSet, DropdownReferenceSetProps, ReferenceOption } from "./DropdownReferenceSet";
7+
import { DropdownReferenceSet, ReferenceOption } from "./DropdownReferenceSet";
88

99
interface WrapperProps {
1010
"class": string;
@@ -15,7 +15,7 @@ interface WrapperProps {
1515
friendlyId: string;
1616
}
1717

18-
export interface ContainerProps extends WrapperProps, DropdownReferenceSetProps {
18+
export interface ContainerProps extends WrapperProps, DropdownProps {
1919
attribute: string;
2020
entityPath: string;
2121
entityConstraint: string;
@@ -146,7 +146,7 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
146146
this.props.mxObject.addReferences(this.association, selectedOptions);
147147

148148
if (this.state.selected.length !== selectedOptions.length) {
149-
this.executeOnChangeEvent();
149+
this.executeOnChangeAction();
150150
}
151151

152152
this.setState({ selected: recentSelection });
@@ -178,7 +178,7 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
178178
});
179179
}
180180

181-
private executeOnChangeEvent() {
181+
private executeOnChangeAction() {
182182
const { mxform, mxObject, onChangeEvent, onChangeMicroflow, onChangeNanoflow } = this.props;
183183
const context = new mendix.lib.MxContext();
184184

@@ -239,10 +239,10 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
239239
this.setState({ options });
240240
}
241241

242-
private setAsyncOptions = (input: string): Promise<{ options: ReferenceOption[] }> => {
242+
private setAsyncOptions = (input?: string): Promise<{ options: ReferenceOption[] }> => {
243243
if (this.props.mxObject) {
244244
this.props.mxObject.set(this.props.searchAttribute, input);
245-
if (input.length >= this.props.minimumCharacter) {
245+
if (input && input.length >= this.props.minimumCharacter) {
246246
return this.retrieveOptions(this.props, input)
247247
.then(() => Promise.resolve({ options: this.state.options }));
248248
} else {

0 commit comments

Comments
 (0)