-
Notifications
You must be signed in to change notification settings - Fork 2
/
BoundRichTextField.tsx
32 lines (30 loc) 路 1.13 KB
/
BoundRichTextField.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
import { FieldState } from "@homebound/form-state";
import { Observer } from "mobx-react";
import { RichTextField, RichTextFieldProps } from "src/components/RichTextField";
import { useTestIds } from "src/utils";
import { defaultLabel } from "src/utils/defaultLabel";
export type BoundRichTextFieldProps = Omit<RichTextFieldProps, "value" | "onChange"> & {
field: FieldState<string | null | undefined>;
// Optional in case the page wants extra behavior
onChange?: (value: string | undefined) => void;
};
/** Wraps `RichTextField` and binds it to a form field. */
export function BoundRichTextField(props: BoundRichTextFieldProps) {
const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
const testId = useTestIds(props, field.key);
return (
<Observer>
{() => (
<RichTextField
label={label}
value={field.value || undefined}
onChange={onChange}
// errorMsg={field.touched ? field.errors.join(" ") : undefined}
// onBlur={() => field.blur()}
{...testId}
{...others}
/>
)}
</Observer>
);
}