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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import {
forwardRef,
type ForwardRefRenderFunction,
useId,
useImperativeHandle,
useRef,
type HTMLAttributes,
} from 'react';
import { useIntl } from 'react-intl';
import { type FormSubmitHandler, useForm } from '../../../../utils/hooks';
import { Button, Form, Icon, Input, Label, Notice } from '../../../atoms';
import { LabelledField } from '../../../molecules';
import styles from './search-form.module.scss';
export type SearchFormData = { query: string };
export type SearchFormSubmit = FormSubmitHandler<SearchFormData>;
export type SearchFormProps = Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'onSubmit'
> & {
/**
* Should the label be visually hidden?
*
* @default false
*/
isLabelHidden?: boolean;
/**
* A callback function to handle search form submit.
*/
onSubmit?: SearchFormSubmit;
};
export type SearchFormRef = {
/**
* A method to focus the search input.
*/
focus: () => void;
};
const SearchFormWithRef: ForwardRefRenderFunction<
SearchFormRef,
SearchFormProps
> = ({ isLabelHidden = false, onSubmit, ...props }, ref) => {
const intl = useIntl();
const { messages, submit, submitStatus, update, values } =
useForm<SearchFormData>({
initialValues: { query: '' },
submitHandler: onSubmit,
});
const id = useId();
const inputRef = useRef<HTMLInputElement>(null);
const formClass = `${styles.form} ${
styles[isLabelHidden ? 'form--no-label' : 'form--has-label']
}`;
const labels = {
button: intl.formatMessage({
defaultMessage: 'Search',
description: 'SearchForm: button accessible name',
id: 'WMqQrv',
}),
field: intl.formatMessage({
defaultMessage: 'Search for:',
description: 'SearchForm: field accessible label',
id: 'X8oujO',
}),
};
useImperativeHandle(
ref,
() => {
return {
focus() {
inputRef.current?.focus();
},
};
},
[]
);
return (
<div {...props}>
<Form className={formClass} onSubmit={submit}>
<LabelledField
className={styles.field}
field={
<Input
className={styles.input}
id={id}
// eslint-disable-next-line react/jsx-no-literals
name="query"
onChange={update}
ref={inputRef}
// eslint-disable-next-line react/jsx-no-literals
type="search"
value={values.query}
/>
}
label={
<Label htmlFor={id} isHidden={isLabelHidden}>
{labels.field}
</Label>
}
/>
<Button
aria-label={labels.button}
className={styles.btn}
isLoading={submitStatus === 'PENDING'}
// eslint-disable-next-line react/jsx-no-literals
kind="neutral"
// eslint-disable-next-line react/jsx-no-literals
shape="initial"
type="submit"
>
<Icon
aria-hidden
className={styles.icon}
// eslint-disable-next-line react/jsx-no-literals
shape="magnifying-glass"
// eslint-disable-next-line react/jsx-no-literals
size="lg"
/>
</Button>
</Form>
{messages?.error && submitStatus === 'FAILED' ? (
<Notice className={styles.notice} kind="error">
{messages.error}
</Notice>
) : null}
</div>
);
};
/**
* SearchForm component
*
* Render a search form.
*/
export const SearchForm = forwardRef(SearchFormWithRef);
|
