-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathform-field.tsx
40 lines (36 loc) · 1.22 KB
/
form-field.tsx
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
import { component$, Slot, createContextId, useContextProvider, useContext, useStyles$, PropsOf } from "@builder.io/qwik";
import { mergeProps } from "../../utils/attributes";
import { useWithId } from "../../hooks/useWithId";
import styles from './form-field.scss?inline';
interface FormFieldState {
id: string;
}
export const FormFieldContext = createContextId<FormFieldState>('FormFieldContext');
export const useFormFieldId = (id?: string) => {
const baseId = useWithId(id);
const { id: finalId } = useContext(FormFieldContext, { id: baseId });
return {
id: finalId,
hasFormField: id !== baseId,
}
}
export const FormField = component$((props: PropsOf<'div'>) => {
useStyles$(styles);
const id = useWithId(props.id);
useContextProvider(FormFieldContext, { id });
// TODO: remove after useContext is fixed in v2.0
useContext(FormFieldContext);
const merged = mergeProps<'div'>(props, {
class: 'he-form-field'
});
return <div {...merged}>
<Slot />
</div>
});
export const Label = component$<PropsOf<'label'>>((props) => {
const { id } = useContext(FormFieldContext);
const attr = mergeProps<'label'>(props, { class: 'he-label', for: id });
return <label {...attr} >
<Slot/>
</label>
});