1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Paper, Input, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
7 import NotificationsIcon from '@material-ui/icons/Notifications';
8 import PersonIcon from '@material-ui/icons/Person';
9 import HelpIcon from '@material-ui/icons/Help';
10 import SearchIcon from '@material-ui/icons/Search';
11 import { AppBarProps } from '@material-ui/core/AppBar';
13 interface SearchBarDataProps {
17 interface SearchBarActionProps {
18 onSearch: (value: string) => any;
22 type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>
24 interface SearchBarState {
29 const DEFAULT_SEARCH_DEBOUNCE = 1000;
31 class SearchBar extends React.Component<SearchBarProps> {
33 state: SearchBarState = {
38 timeout: NodeJS.Timer;
41 const { classes } = this.props
42 return <Paper className={classes.container}>
43 <form onSubmit={this.handleSubmit}>
45 className={classes.input}
46 onChange={this.handleChange}
48 value={this.state.value}
50 <IconButton className={classes.button}>
57 componentWillReceiveProps(nextProps: SearchBarProps) {
58 if (nextProps.value !== this.props.value) {
59 this.setState({ value: nextProps.value });
63 handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
64 event.preventDefault();
65 clearTimeout(this.timeout);
66 this.props.onSearch(this.state.value);
69 handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
70 clearTimeout(this.timeout);
71 this.setState({ value: event.target.value });
72 this.timeout = setTimeout(
73 () => this.props.onSearch(this.state.value),
74 this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
81 type CssRules = 'container' | 'input' | 'button'
83 const styles: StyleRulesCallback<CssRules> = theme => {
84 const { unit } = theme.spacing
92 borderRadius: unit / 4,
93 boxSizing: 'border-box',
95 paddingRight: unit * 4,
108 export default withStyles(styles)(SearchBar)