1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import { useRouter } from 'next/router';
import {
ChangeEvent,
FormEvent,
forwardRef,
ForwardRefRenderFunction,
useId,
useState,
} from 'react';
import { useIntl } from 'react-intl';
import { Button, Form, Input, Label, MagnifyingGlass } from '../../../atoms';
import { LabelledField } from '../../../molecules';
import styles from './search-form.module.scss';
export type SearchFormProps = {
/**
* Should the label be visually hidden?
*
* @default false
*/
isLabelHidden?: boolean;
/**
* The search page url.
*/
searchPage: string;
};
const SearchFormWithRef: ForwardRefRenderFunction<
HTMLInputElement,
SearchFormProps
> = ({ isLabelHidden = false, searchPage }, ref) => {
const intl = useIntl();
const fieldLabel = intl.formatMessage({
defaultMessage: 'Search for:',
description: 'SearchForm: field accessible label',
id: 'X8oujO',
});
const buttonLabel = intl.formatMessage({
defaultMessage: 'Search',
description: 'SearchForm: button accessible name',
id: 'WMqQrv',
});
const router = useRouter();
const [value, setValue] = useState<string>('');
const submitHandler = (e: FormEvent) => {
e.preventDefault();
router.push({ pathname: searchPage, query: { s: value } });
setValue('');
};
const updateForm = (e: ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
const id = useId();
return (
<Form className={styles.wrapper} onSubmit={submitHandler}>
<LabelledField
className={styles.field}
field={
<Input
className={styles.field}
id={`search-form-${id}`}
name="search-form"
onChange={updateForm}
ref={ref}
type="search"
value={value}
/>
}
label={
<Label htmlFor={`search-form-${id}`} isHidden={isLabelHidden}>
{fieldLabel}
</Label>
}
/>
<Button
aria-label={buttonLabel}
className={styles.btn}
kind="neutral"
shape="initial"
type="submit"
>
<MagnifyingGlass className={styles.btn__icon} />
</Button>
</Form>
);
};
/**
* SearchForm component
*
* Render a search form.
*/
export const SearchForm = forwardRef(SearchFormWithRef);
|
