Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 1 | import { SearchRounded } from '@mui/icons-material'; |
simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 2 | import { InputAdornment, InputBase } from '@mui/material'; |
simon | 6b9ddfb | 2022-10-03 00:04:50 -0400 | [diff] [blame] | 3 | import { ChangeEvent, FormEvent, useState } from 'react'; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 4 | |
simon | 6b9ddfb | 2022-10-03 00:04:50 -0400 | [diff] [blame] | 5 | type NewContactFormProps = { |
| 6 | onChange?: (v: string) => void; |
| 7 | onSubmit?: (v: string) => void; |
| 8 | }; |
| 9 | |
| 10 | export default function NewContactForm(props: NewContactFormProps) { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 11 | const [value, setValue] = useState(''); |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 12 | |
simon | 6b9ddfb | 2022-10-03 00:04:50 -0400 | [diff] [blame] | 13 | const handleChange = (event: ChangeEvent<HTMLInputElement>) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 14 | setValue(event.target.value); |
| 15 | if (props.onChange) props.onChange(event.target.value); |
| 16 | }; |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 17 | |
simon | 6b9ddfb | 2022-10-03 00:04:50 -0400 | [diff] [blame] | 18 | const handleSubmit = (event: FormEvent<HTMLFormElement>) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 19 | event.preventDefault(); |
| 20 | if (value && props.onSubmit) props.onSubmit(value); |
| 21 | }; |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 22 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 23 | return ( |
| 24 | <form className="main-search" onSubmit={handleSubmit} noValidate autoComplete="off"> |
| 25 | <InputBase |
| 26 | className="main-search-input" |
| 27 | type="search" |
| 28 | placeholder="Ajouter un contact" |
| 29 | value={value} |
| 30 | onChange={handleChange} |
| 31 | startAdornment={ |
| 32 | <InputAdornment position="start"> |
| 33 | <SearchRounded /> |
| 34 | </InputAdornment> |
| 35 | } |
| 36 | /> |
| 37 | </form> |
| 38 | ); |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 39 | } |