/**
* Copyright (c) 2021 GraphQL Contributors.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { ChangeEventHandler } from 'react';
import debounce from '../../utility/debounce';
type OnSearchFn = (value: string) => void;
type SearchBoxProps = {
value?: string;
placeholder: string;
onSearch: OnSearchFn;
};
type SearchBoxState = {
value: string;
};
export default class SearchBox extends React.Component<
SearchBoxProps,
SearchBoxState
> {
debouncedOnSearch: OnSearchFn;
constructor(props: SearchBoxProps) {
super(props);
this.state = { value: props.value || '' };
this.debouncedOnSearch = debounce(200, this.props.onSearch);
}
render() {
return (
);
}
handleChange: ChangeEventHandler = event => {
const value = event.currentTarget.value;
this.setState({ value });
this.debouncedOnSearch(value);
};
handleClear = () => {
this.setState({ value: '' });
this.props.onSearch('');
};
}