Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 1 | import React from 'react' |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame^] | 2 | import { InputBase, InputAdornment } from '@material-ui/core'; |
| 3 | import { SearchRounded } from '@material-ui/icons'; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 4 | |
| 5 | class NewContactForm extends React.Component { |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 6 | constructor(props) { |
| 7 | super(props) |
| 8 | this.state = {value: ''} |
| 9 | this.controller = new AbortController() |
| 10 | this.handleChange = this.handleChange.bind(this) |
| 11 | this.handleSubmit = this.handleSubmit.bind(this) |
| 12 | } |
| 13 | |
| 14 | componentDidMount() { |
| 15 | this.controller = new AbortController() |
| 16 | } |
| 17 | |
| 18 | componentWillUnmount() { |
| 19 | this.controller.abort() |
| 20 | this.req = undefined |
| 21 | } |
| 22 | |
| 23 | handleChange(event) { |
| 24 | this.setState({value: event.target.value}) |
| 25 | this.props.onChange(event.target.value) |
| 26 | } |
| 27 | |
| 28 | handleSubmit(event) { |
| 29 | event.preventDefault() |
| 30 | if (this.props.onSubmit) |
| 31 | this.props.onSubmit(this.state.value) |
| 32 | } |
| 33 | |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 34 | render() { |
| 35 | return ( |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 36 | <form className="main-search" onSubmit={this.handleSubmit} noValidate autoComplete="off"> |
| 37 | <InputBase |
| 38 | className="main-search-input" |
| 39 | type="search" |
| 40 | placeholder="Ajouter un contact" |
| 41 | onChange={this.handleChange} |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame^] | 42 | startAdornment={<InputAdornment position="start"><SearchRounded /></InputAdornment>} |
| 43 | /> |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 44 | </form> |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 45 | ) |
| 46 | } |
| 47 | } |
| 48 | |
| 49 | export default NewContactForm |