74 lines
1.5 KiB
TypeScript
74 lines
1.5 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
|
||
|
|
interface ChoiceProviderProps {
|
||
|
|
children: ((
|
||
|
|
props: {
|
||
|
|
choices: Array<{
|
||
|
|
label: string;
|
||
|
|
value: string;
|
||
|
|
}>;
|
||
|
|
loading: boolean;
|
||
|
|
fetchChoices(value: string);
|
||
|
|
}
|
||
|
|
) => React.ReactElement<any>);
|
||
|
|
choices: Array<{
|
||
|
|
label: string;
|
||
|
|
value: string;
|
||
|
|
}>;
|
||
|
|
}
|
||
|
|
interface ChoiceProviderState {
|
||
|
|
choices: Array<{
|
||
|
|
label: string;
|
||
|
|
value: string;
|
||
|
|
}>;
|
||
|
|
loading: boolean;
|
||
|
|
timeout: any;
|
||
|
|
}
|
||
|
|
|
||
|
|
export class ChoiceProvider extends React.Component<
|
||
|
|
ChoiceProviderProps,
|
||
|
|
ChoiceProviderState
|
||
|
|
> {
|
||
|
|
state = { choices: [], loading: false, timeout: null };
|
||
|
|
|
||
|
|
handleChange = inputValue => {
|
||
|
|
if (this.state.loading) {
|
||
|
|
clearTimeout(this.state.timeout);
|
||
|
|
}
|
||
|
|
const timeout = setTimeout(() => this.fetchChoices(inputValue), 500);
|
||
|
|
this.setState({
|
||
|
|
loading: true,
|
||
|
|
timeout
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
fetchChoices = inputValue => {
|
||
|
|
let count = 0;
|
||
|
|
this.setState({
|
||
|
|
choices: this.props.choices.filter(suggestion => {
|
||
|
|
const keep =
|
||
|
|
(!inputValue ||
|
||
|
|
suggestion.label.toLowerCase().indexOf(inputValue.toLowerCase()) !==
|
||
|
|
-1) &&
|
||
|
|
count < 5;
|
||
|
|
|
||
|
|
if (keep) {
|
||
|
|
count += 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
return keep;
|
||
|
|
}),
|
||
|
|
loading: false,
|
||
|
|
timeout: null
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return this.props.children({
|
||
|
|
choices: this.state.choices,
|
||
|
|
fetchChoices: this.handleChange,
|
||
|
|
loading: this.state.loading
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|