-
-
Notifications
You must be signed in to change notification settings - Fork 933
/
use-form-control.ts
75 lines (69 loc) · 2.25 KB
/
use-form-control.ts
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
import { CustomFieldType } from '@vendure/common/lib/shared-types';
import { useContext, useEffect, useState } from 'react';
import { HostedComponentContext } from '../directives/react-component-host.directive';
import { HostedReactComponentContext, ReactFormInputOptions } from '../types';
/**
* @description
* Provides access to the current FormControl value and a method to update the value.
*
* @example
* ```ts
* import { useFormControl, ReactFormInputProps } from '\@vendure/admin-ui/react';
* import React from 'react';
*
* export function ReactNumberInput({ readonly }: ReactFormInputProps) {
* const { value, setFormValue } = useFormControl();
*
* const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
* setFormValue(val);
* };
* return (
* <div>
* <input readOnly={readonly} type="number" onChange={handleChange} value={value} />
* </div>
* );
* }
* ```
*
* @docsCategory react-hooks
*/
export function useFormControl() {
const context = useContext(HostedComponentContext);
if (!context) {
throw new Error('No HostedComponentContext found');
}
if (!isFormInputContext(context)) {
throw new Error('useFormControl() can only be used in a form input component');
}
const { formControl, config } = context;
const [value, setValue] = useState(formControl.value ?? 0);
useEffect(() => {
const subscription = formControl.valueChanges.subscribe(v => {
setValue(v);
});
return () => {
subscription.unsubscribe();
};
}, []);
function setFormValue(newValue: any) {
formControl.setValue(coerceFormValue(newValue, config.type as CustomFieldType));
formControl.markAsDirty();
}
return { value, setFormValue };
}
function isFormInputContext(
context: HostedReactComponentContext,
): context is HostedReactComponentContext<ReactFormInputOptions> {
return context.config && context.formControl;
}
function coerceFormValue(value: any, type: CustomFieldType) {
switch (type) {
case 'int':
case 'float':
return Number(value);
case 'boolean':
return Boolean(value);
default:
return value;
}
}