[arvados-workbench2] updated: 2.4.0-252-ga9a30db7
git repository hosting
git at public.arvados.org
Tue Oct 18 15:27:29 UTC 2022
Summary of changes:
src/components/search-input/search-input.test.tsx | 22 +---
src/components/search-input/search-input.tsx | 135 +++++++++++-----------
2 files changed, 67 insertions(+), 90 deletions(-)
via a9a30db7ec9505450da696ccf660edc20fe2ac0b (commit)
from e4f350462118a86831f92eb375c2bc89cbf85920 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit a9a30db7ec9505450da696ccf660edc20fe2ac0b
Author: Daniel Kutyła <daniel.kutyla at contractors.roche.com>
Date: Tue Oct 18 17:27:07 2022 +0200
19311: changed search component to a functional style
Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla at contractors.roche.com>
diff --git a/src/components/search-input/search-input.test.tsx b/src/components/search-input/search-input.test.tsx
index c1bd79ab..0cb56ea1 100644
--- a/src/components/search-input/search-input.test.tsx
+++ b/src/components/search-input/search-input.test.tsx
@@ -98,30 +98,10 @@ describe("<SearchInput />", () => {
describe("on input target change", () => {
it("clears the input value on selfClearProp change", () => {
const searchInput = mount(<SearchInput selfClearProp="abc" value="123" onSearch={onSearch} debounce={1000}/>);
- // initial no clear call
- jest.runTimersToTime(0);
searchInput.setProps({ selfClearProp: '111' });
- expect(onSearch).not.toBeCalledWith("");
- expect(onSearch).toHaveBeenCalledTimes(0);
-
- // second call trigger input clear
- searchInput.setProps({ selfClearProp: 'aaa111' });
- jest.runTimersToTime(0);
- expect(onSearch).toBeCalledWith("");
- expect(onSearch).toHaveBeenCalledTimes(1);
-
- // third call trigger not input clear beacuse of the same selfClearProp value
- searchInput.setProps({ selfClearProp: 'aaa111', value: '321' });
- jest.runTimersToTime(0);
+ jest.runTimersToTime(1000);
expect(onSearch).toBeCalledWith("");
expect(onSearch).toHaveBeenCalledTimes(1);
- expect(searchInput.props().value).toBe('321');
-
- // third call trigger input clear beacuse of different selfClearProp value
- searchInput.setProps({ selfClearProp: 'aaa222' });
- jest.runTimersToTime(0);
- expect(onSearch).toBeCalledWith("");
- expect(onSearch).toHaveBeenCalledTimes(2);
});
});
});
diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index 2835f156..f7007b69 100644
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -2,7 +2,7 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import 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';
@@ -45,84 +45,81 @@ interface SearchInputActionProps {
type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyles<CssRules>;
-interface SearchInputState {
- value: string;
- label: string;
-}
+// interface SearchInputState {
+// value: string;
+// label: string;
+// }
-let selfClearPropState = '';
+// let selfClearPropState = '';
export const DEFAULT_SEARCH_DEBOUNCE = 1000;
-export const SearchInput = withStyles(styles)(
- class extends React.Component<SearchInputProps> {
- state: SearchInputState = {
- value: "",
- label: ""
- };
+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>{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 (this.state.value !== '' && nextProps.selfClearProp && nextProps.selfClearProp !== selfClearPropState) {
- if (selfClearPropState !== '') {
- this.props.onSearch('');
- }
- selfClearPropState = 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);
+ };
+
+ 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
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list