//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
+import React, {useState, useEffect} from 'react';
import { IconButton, StyleRulesCallback, withStyles, WithStyles, FormControl, InputLabel, Input, InputAdornment, Tooltip } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
interface SearchInputDataProps {
value: string;
+ label?: string;
+ selfClearProp: string;
}
interface SearchInputActionProps {
type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyles<CssRules>;
-interface SearchInputState {
- value: string;
-}
+// interface SearchInputState {
+// value: string;
+// label: string;
+// }
+
+// let selfClearPropState = '';
export const DEFAULT_SEARCH_DEBOUNCE = 1000;
-export const SearchInput = withStyles(styles)(
- class extends React.Component<SearchInputProps> {
- state: SearchInputState = {
- value: ""
- };
+const SearchInputComponent = (props: SearchInputProps) => {
+ const [timeout, setTimeout] = useState(1);
+ const [value, setValue] = useState("");
+ const [label, setLabel] = useState("Search");
+ const [selfClearProp, setSelfClearProp] = useState("");
- timeout: number;
-
- render() {
- return <form onSubmit={this.handleSubmit}>
- <FormControl>
- <InputLabel>Search</InputLabel>
- <Input
- type="text"
- value={this.state.value}
- onChange={this.handleChange}
- endAdornment={
- <InputAdornment position="end">
- <Tooltip title='Search'>
- <IconButton
- onClick={this.handleSubmit}>
- <SearchIcon />
- </IconButton>
- </Tooltip>
- </InputAdornment>
- } />
- </FormControl>
- </form>;
+ useEffect(() => {
+ if (props.value) {
+ setValue(props.value);
}
-
- componentDidMount() {
- this.setState({ value: this.props.value });
+ if (props.label) {
+ setLabel(props.label);
}
- componentWillReceiveProps(nextProps: SearchInputProps) {
- if (nextProps.value !== this.props.value) {
- this.setState({ value: nextProps.value });
- }
- }
+ return () => {
+ setValue("");
+ clearTimeout(timeout);
+ };
+ }, [props.value, props.label]); // eslint-disable-line react-hooks/exhaustive-deps
- componentWillUnmount() {
- clearTimeout(this.timeout);
+ useEffect(() => {
+ if (selfClearProp !== props.selfClearProp) {
+ setValue("");
+ setSelfClearProp(props.selfClearProp);
+ handleChange({ target: { value: "" } } as any);
}
+ }, [props.selfClearProp]); // eslint-disable-line react-hooks/exhaustive-deps
- handleSubmit = (event: React.FormEvent<HTMLElement>) => {
- event.preventDefault();
- clearTimeout(this.timeout);
- this.props.onSearch(this.state.value);
- }
+ const handleSubmit = (event: React.FormEvent<HTMLElement>) => {
+ event.preventDefault();
+ clearTimeout(timeout);
+ props.onSearch(value);
+ };
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const { target: { value: eventValue } } = event;
+ clearTimeout(timeout);
+ setValue(eventValue);
+ setTimeout(window.setTimeout(
+ () => {
+ props.onSearch(eventValue);
+ },
+ props.debounce || DEFAULT_SEARCH_DEBOUNCE
+ ));
+ };
- handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- clearTimeout(this.timeout);
- this.setState({ value: event.target.value });
- this.timeout = window.setTimeout(
- () => this.props.onSearch(this.state.value),
- this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
- );
+ return <form onSubmit={handleSubmit}>
+ <FormControl>
+ <InputLabel>{label}</InputLabel>
+ <Input
+ type="text"
+ data-cy="search-input"
+ value={value}
+ onChange={handleChange}
+ endAdornment={
+ <InputAdornment position="end">
+ <Tooltip title='Search'>
+ <IconButton
+ onClick={handleSubmit}>
+ <SearchIcon />
+ </IconButton>
+ </Tooltip>
+ </InputAdornment>
+ } />
+ </FormControl>
+ </form>;
+}
- }
- }
-);
+export const SearchInput = withStyles(styles)(SearchInputComponent);
\ No newline at end of file