fix: refactor to flat generics with consistent names & patterns

This commit is contained in:
Tanner Linsley
2023-09-13 14:46:16 -06:00
parent 46b49ca669
commit 1fb28c53eb
15 changed files with 252 additions and 225 deletions

View File

@@ -3,18 +3,23 @@ id: field
title: Field
---
### `FieldComponent<TFormData>`
### `FieldComponent<TParentData>`
A type alias representing a field component for a specific form data type.
```tsx
export type FieldComponent = <TField extends DeepKeys<TFormData>>({
export type FieldComponent = <TField extends DeepKeys<TParentData>>({
children,
...fieldOptions
}: {
children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any
children: (
fieldApi: FieldApi<DeepValue<TParentData, TField>, TParentData>,
) => any
name: TField
} & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any
} & Omit<
FieldOptions<DeepValue<TParentData, TField>, TParentData>,
'name'
>) => any
```
A function component that takes field options and a render function as children and returns a React component.
@@ -22,23 +27,23 @@ A function component that takes field options and a render function as children
### `Field`
```tsx
export function Field<TData, TFormData>({
export function Field<TData, TParentData>({
children,
...fieldOptions
}: { children: (fieldApi: FieldApi<TData, TFormData>) => any } & FieldOptions<
}: { children: (fieldApi: FieldApi<TData, TParentData>) => any } & FieldOptions<
TData,
TFormData
TParentData
>): any
```
A functional React component that renders a form field.
- ```tsx
children: (fieldApi: FieldApi<TData, TFormData>) => any
children: (fieldApi: FieldApi<TData, TParentData>) => any
```
- A render function that takes a field API instance and returns a React element.
- ```tsx
fieldOptions: FieldOptions<TData, TFormData>
fieldOptions: FieldOptions<TData, TParentData>
```
- The field options.
@@ -47,14 +52,14 @@ The `Field` component uses the `useField` hook internally to manage the field in
### `createFieldComponent`
```tsx
export function createFieldComponent<TFormData>(
formApi: FormApi<TFormData>,
): FieldComponent<TFormData>
export function createFieldComponent<TParentData>(
formApi: FormApi<TParentData>,
): FieldComponent<TParentData>
```
A factory function that creates a connected field component for a specific form API instance.
- ```tsx
formApi: FormApi<TFormData>
formApi: FormApi<TParentData>
```
- The form API instance to connect the field component to.

View File

@@ -3,11 +3,11 @@ id: fieldApi
title: Field API
---
### `FieldApi<TData, TFormData>`
### `FieldApi<TData, TParentData>`
When using `@tanstack/react-form`, the [core field API](../../reference/fieldApi) is extended with additional methods for React-specific functionality:
- ```tsx
Field: FieldComponent<TData, TFormData>
Field: FieldComponent<TData, TParentData>
```
- A pre-bound and type-safe sub-field component using this field as a root.

View File

@@ -3,17 +3,17 @@ id: useField
title: useField
---
### `UseField<TFormData>`
### `UseField<TParentData>`
A type representing a hook for using a field in a form with the given form data type.
```tsx
export type UseField = <TField extends DeepKeys<TFormData>>(
export type UseField = <TField extends DeepKeys<TParentData>>(
opts?: { name: TField } & FieldOptions<
DeepValue<TFormData, TField>,
TFormData
DeepValue<TParentData, TField>,
TParentData
>,
) => FieldApi<DeepValue<TFormData, TField>, TFormData>
) => FieldApi<DeepValue<TParentData, TField>, TParentData>
```
- A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
@@ -21,31 +21,31 @@ export type UseField = <TField extends DeepKeys<TFormData>>(
### `useField`
```tsx
export function useField<TData, TFormData>(
opts: FieldOptions<TData, TFormData>,
): FieldApi<TData, TFormData>
export function useField<TData, TParentData>(
opts: FieldOptions<TData, TParentData>,
): FieldApi<TData, TParentData>
```
A hook for managing a field in a form.
- ```tsx
opts: FieldOptions<TData, TFormData>
opts: FieldOptions<TData, TParentData>
```
- An object with field options.
#### Returns
- ```tsx
FieldApi<TData, TFormData>
FieldApi<TData, TParentData>
```
- The `FieldApi` instance for the specified field.
### `createUseField`
```tsx
export function createUseField<TFormData>(
formApi: FormApi<TFormData>,
): UseField<TFormData>
export function createUseField<TParentData>(
formApi: FormApi<TParentData>,
): UseField<TParentData>
```
A function that creates a `UseField` hook bound to the given `formApi`.