//
// SPDX-License-Identifier: AGPL-3.0
-import React from 'react';
-import { IconButton, StyleRulesCallback, withStyles, WithStyles, FormControl, InputLabel, Input, InputAdornment, Tooltip } from '@material-ui/core';
+import React, {useState, useEffect} from 'react';
+import {
+ IconButton,
+ FormControl,
+ InputLabel,
+ Input,
+ InputAdornment,
+ Tooltip,
+} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
-type CssRules = 'container' | 'input' | 'button';
-
-const styles: StyleRulesCallback<CssRules> = theme => {
- return {
- container: {
- position: 'relative',
- width: '100%'
- },
- input: {
- border: 'none',
- borderRadius: theme.spacing.unit / 4,
- boxSizing: 'border-box',
- padding: theme.spacing.unit,
- paddingRight: theme.spacing.unit * 4,
- width: '100%',
- },
- button: {
- position: 'absolute',
- top: theme.spacing.unit / 2,
- right: theme.spacing.unit / 2,
- width: theme.spacing.unit * 3,
- height: theme.spacing.unit * 3
- }
- };
-};
-
interface SearchInputDataProps {
value: string;
label?: string;
debounce?: number;
}
-type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyles<CssRules>;
-
-interface SearchInputState {
- value: string;
- label: string;
- selfClearProp: string;
-}
+type SearchInputProps = SearchInputDataProps & SearchInputActionProps;
export const DEFAULT_SEARCH_DEBOUNCE = 1000;
-export const SearchInput = withStyles(styles)(
- class extends React.Component<SearchInputProps> {
- state: SearchInputState = {
- value: "",
- label: "",
- selfClearProp: ""
- };
+export const SearchInput = (props: SearchInputProps) => {
+ const [timeout, setTimeout] = useState(0);
+ const [value, setValue] = useState("");
+ const [label, setLabel] = useState("Search");
+ const [selfClearProp, setSelfClearProp] = useState("");
- timeout: number;
-
- render() {
- return <form onSubmit={this.handleSubmit}>
- <FormControl>
- <InputLabel>{this.state.label}</InputLabel>
- <Input
- type="text"
- data-cy="search-input"
- 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,
- label: this.props.label || 'Search'
- });
+ if (props.label) {
+ setLabel(props.label);
}
- componentWillReceiveProps(nextProps: SearchInputProps) {
- if (nextProps.value !== this.props.value) {
- this.setState({ value: nextProps.value });
- }
- if (nextProps.selfClearProp !== this.state.selfClearProp) {
- this.props.onSearch('');
- this.setState({ selfClearProp: nextProps.selfClearProp });
- }
- }
+ 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);
+ };
- 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
- );
+ 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
+ ));
+ };
- }
- }
-);
+ 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>;
+};