Add data object to useField/Field (#711)

Author: PerfectPixel

docs/types/FieldProps.md

@@ -97,6 +97,16 @@ Related:
 
 - [`FieldRenderProps`](FieldRenderProps)
 
+## `data`
+
+```ts
+Object
+```
+
+Optional.
+
+Initial state for arbitrary values to be placed by mutators.
+
 ## `defaultValue`
 
 ```ts

src/Field.js

@@ -10,6 +10,7 @@ const Field = ({
   beforeSubmit,
   children,
   component,
+  data,
   defaultValue,
   format,
   formatOnBlur,
@@ -31,6 +32,7 @@ const Field = ({
     beforeSubmit,
     children,
     component,
+    data,
     defaultValue,
     format,
     formatOnBlur,

src/types.js.flow

@@ -80,6 +80,7 @@ export type UseFieldAutoConfig = {
   beforeSubmit?: () => void | false,
   children?: $PropertyType<RenderableProps<*>, 'children'>,
   component?: $PropertyType<RenderableProps<*>, 'component'>,
+  data?: Object,
   defaultValue?: any,
   format?: (value: any, name: string) => any,
   formatOnBlur?: boolean,

src/useField.js

@@ -34,6 +34,7 @@ function useField<FormValues: FormValuesShape>(
     afterSubmit,
     allowNull,
     component,
+    data,
     defaultValue,
     format = defaultFormat,
     formatOnBlur,
@@ -75,6 +76,7 @@ function useField<FormValues: FormValuesShape>(
 
         return beforeSubmit && beforeSubmit()
       },
+      data,
       defaultValue,
       getValidator: () => configRef.current.validate,
       initialValue,
@@ -114,6 +116,7 @@ function useField<FormValues: FormValuesShape>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       name,
+      data,
       defaultValue,
       // If we want to allow inline fat-arrow field-level validation functions, we
       // cannot reregister field every time validate function !==.

typescript/index.d.ts

@@ -24,7 +24,8 @@ export type FieldMetaState<FieldValue> = Pick<
   >
 >;
 
-interface FieldInputProps<FieldValue, T extends HTMLElement = HTMLElement> extends AnyObject {
+interface FieldInputProps<FieldValue, T extends HTMLElement = HTMLElement>
+  extends AnyObject {
   name: string;
   onBlur: (event?: React.FocusEvent<T>) => void;
   onChange: (event: React.ChangeEvent<T> | any) => void;
@@ -39,13 +40,17 @@ interface AnyObject {
   [key: string]: any;
 }
 
-export interface FieldRenderProps<FieldValue, T extends HTMLElement = HTMLElement> {
+export interface FieldRenderProps<
+  FieldValue,
+  T extends HTMLElement = HTMLElement
+> {
   input: FieldInputProps<FieldValue, T>;
   meta: FieldMetaState<FieldValue>;
 }
 
 export interface FormRenderProps<FormValues = AnyObject>
-  extends FormState<FormValues>, RenderableProps<FormRenderProps<FormValues>> {
+  extends FormState<FormValues>,
+    RenderableProps<FormRenderProps<FormValues>> {
   form: FormApi<FormValues>;
   handleSubmit: (
     event?: React.SyntheticEvent<HTMLFormElement>
@@ -76,6 +81,7 @@ export interface UseFieldConfig<FieldValue> {
   afterSubmit?: () => void;
   allowNull?: boolean;
   beforeSubmit?: () => void | boolean;
+  data?: AnyObject;
   defaultValue?: FieldValue;
   format?: (value: FieldValue, name: string) => any;
   formatOnBlur?: boolean;