Skip to content

Commit

Permalink
fix(antd): useDrawerForm has unused props (#6074)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alicanerdurmaz
alicanerdurmaz committed Jul 1, 2024
1 parent 853bef9 commit 311dcdc
Show file tree
Hide file tree
Showing 9 changed files with 313 additions and 46 deletions.
11 changes: 11 additions & 0 deletions .changeset/friendly-papayas-greet.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
"@refinedev/antd": minor
---

fix: [`useDrawerForm`](https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form/)'s `submit` and `form` props are not working (#6082).

- `submit` prop is removed from `useDrawerForm` hook. Instead, you can use `onFinish` prop to handle the form submission.
https://refine.dev/docs/guides-concepts/forms/#modifying-data-before-submission

- `form` prop is removed from `useDrawerForm` hook.
The purpose of `useDrawerForm` is to create a `form` instance. Because of that `form` instance cannot be passed as a prop.
29 changes: 29 additions & 0 deletions .changeset/silver-carrots-sell.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
"@refinedev/antd": minor
---

fix: `useForm`'s `defaultFormValues` prop is not working (#5727).

From now on, `useForm`, `useDrawerForm`, and `useModalForm` hooks accept the `defaultFormValues` prop to pre-populate the form with data that needs to be displayed.

```tsx
useForm({
defaultFormValues: {
title: "Hello World",
},
});
```

Also, it can be provided as an async function to fetch the default values. The loading state can be tracked using the `defaultFormValuesLoading` state returned from the hook.

> 🚨 When `action` is "edit" or "clone" a race condition with `async defaultFormValues` may occur. In this case, the form values will be the result of the last completed operation.
```tsx
const { defaultFormValuesLoading } = useForm({
defaultFormValues: async () => {
const response = await fetch("https://my-api.com/posts/1");
const data = await response.json();
return data;
},
});
```
57 changes: 44 additions & 13 deletions documentation/docs/ui-integrations/ant-design/hooks/use-drawer-form/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,32 @@ useDrawerForm({
});
```

### defaultFormValues

Default values for the form. Use this to pre-populate the form with data that needs to be displayed.

```tsx
useForm({
defaultFormValues: {
title: "Hello World",
},
});
```

Also, it can be provided as an async function to fetch the default values. The loading state can be tracked using the [`defaultFormValuesLoading`](#defaultformvaluesloading) state returned from the hook.

> 🚨 When `action` is "edit" or "clone" a race condition with `async defaultFormValues` may occur. In this case, the form values will be the result of the last completed operation.
```tsx
const { defaultFormValuesLoading } = useForm({
defaultFormValues: async () => {
const response = await fetch("https://my-api.com/posts/1");
const data = await response.json();
return data;
},
});
```

## Return values

### show
Expand Down Expand Up @@ -473,6 +499,10 @@ console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...

If `autoSave` is enabled, this hook returns `autoSaveProps` object with `data`, `error`, and `status` properties from mutation.

### defaultFormValuesLoading

If [`defaultFormValues`](#defaultformvalues) is an async function, `defaultFormValuesLoading` will be `true` until the function is resolved.

## FAQ

### How can I change the form data before submitting it to the API?
Expand Down Expand Up @@ -548,19 +578,20 @@ export const UserCreate: React.FC = () => {
| mutationMode? | [`MutationMode`](#mutationmode) |
| hideText? | `boolean` |

| Key | Description | Type |
| ----------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| show | A function that opens the drawer | `(id?: BaseKey) => void` |
| form | Ant Design form instance | [`FormInstance<TVariables>`](https://ant.design/components/form/#FormInstance) |
| formProps | Ant Design form props | [`FormProps`](/docs/ui-integrations/ant-design/hooks/use-form#properties) |
| drawerProps | Props for managed drawer | [`DrawerProps`](#drawerprops) |
| saveButtonProps | Props for a submit button | `{ disabled: boolean; onClick: () => void; loading: boolean; }` |
| deleteButtonProps | Adds props for delete button | `{ resourceName?: string; recordItemId?: BaseKey; onSuccess?: (data: TData) => void; mutationMode?: MutationMode; hideText?: boolean; }` |
| submit | Submit method, the parameter is the value of the form fields | `() => void` |
| open | Whether the drawer is open or not | `boolean` |
| close | Specify a function that can close the drawer | `() => void` |
| overtime | Overtime loading props | `{ elapsedTime?: number }` |
| autoSaveProps | Auto save props | `{ data: UpdateResponse<TData>` \| `undefined, error: HttpError` \| `null, status: "loading"` \| `"error"` \| `"idle"` \| `"success" }` |
| Key | Description | Type |
| ------------------------ | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| show | A function that opens the drawer | `(id?: BaseKey) => void` |
| form | Ant Design form instance | [`FormInstance<TVariables>`](https://ant.design/components/form/#FormInstance) |
| formProps | Ant Design form props | [`FormProps`](/docs/ui-integrations/ant-design/hooks/use-form#properties) |
| drawerProps | Props for managed drawer | [`DrawerProps`](#drawerprops) |
| saveButtonProps | Props for a submit button | `{ disabled: boolean; onClick: () => void; loading: boolean; }` |
| deleteButtonProps | Adds props for delete button | `{ resourceName?: string; recordItemId?: BaseKey; onSuccess?: (data: TData) => void; mutationMode?: MutationMode; hideText?: boolean; }` |
| submit | Submit method, the parameter is the value of the form fields | `() => void` |
| open | Whether the drawer is open or not | `boolean` |
| close | Specify a function that can close the drawer | `() => void` |
| overtime | Overtime loading props | `{ elapsedTime?: number }` |
| autoSaveProps | Auto save props | `{ data: UpdateResponse<TData>` \| `undefined, error: HttpError` \| `null, status: "loading"` \| `"error"` \| `"idle"` \| `"success" }` |
| defaultFormValuesLoading | DefaultFormValues loading status of form | `boolean` |

## Example

Expand Down
59 changes: 45 additions & 14 deletions documentation/docs/ui-integrations/ant-design/hooks/use-form/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -871,6 +871,32 @@ useForm({
});
```

### defaultFormValues

Default values for the form. Use this to pre-populate the form with data that needs to be displayed.

```tsx
useForm({
defaultFormValues: {
title: "Hello World",
},
});
```

Also, it can be provided as an async function to fetch the default values. The loading state can be tracked using the [`defaultFormValuesLoading`](#defaultformvaluesloading) state returned from the hook.

> 🚨 When `action` is "edit" or "clone" a race condition with `async defaultFormValues` may occur. In this case, the form values will be the result of the last completed operation.
```tsx
const { defaultFormValuesLoading } = useForm({
defaultFormValues: async () => {
const response = await fetch("https://my-api.com/posts/1");
const data = await response.json();
return data;
},
});
```

## Return Values

All [`Refine Core's useForm`](/docs/data/hooks/use-form/) return values also available in `useForm`.
Expand Down Expand Up @@ -988,6 +1014,10 @@ console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...

If `autoSave` is enabled, this hook returns `autoSaveProps` object with `data`, `error`, and `status` properties from mutation.

### defaultFormValuesLoading

If [`defaultFormValues`](#defaultformvalues) is an async function, `defaultFormValuesLoading` will be `true` until the function is resolved.

## FAQ

### How can Invalidate other resources?
Expand Down Expand Up @@ -1083,20 +1113,21 @@ You can use the `meta` property to pass common values to the mutation and the qu

### Return values

| Property | Description | Type |
| --------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onFinish | Triggers the mutation | `(values?: TVariables) => Promise<CreateResponse<TData>` \| `UpdateResponse<TData>` \| `void`> |
| form | Ant Design form instance | [`FormInstance`](https://ant.design/components/form/#FormInstance) |
| formProps | Ant Design form props | [`FormProps`](https://ant.design/components/form/#Form) |
| saveButtonProps | Props for a submit button | `{ disabled: boolean; onClick: () => void; loading?:boolean; }` |
| redirect | Redirect function for custom redirections | `(redirect:` `"list"`\|`"edit"`\|`"show"`\|`"create"`\| `false` ,`idFromFunction?:` [`BaseKey`](/docs/core/interface-references#basekey)\|`undefined`) => `data` |
| queryResult | Result of the query of a record | [`QueryObserverResult<T>`](https://react-query.tanstack.com/reference/useQuery) |
| mutationResult | Result of the mutation triggered by submitting the form | [`UseMutationResult<T>`](https://react-query.tanstack.com/reference/useMutation) |
| formLoading | Loading state of form request | `boolean` |
| id | Record id for `clone` and `create` action | [`BaseKey`](/docs/core/interface-references#basekey) |
| setId | `id` setter | `Dispatch<SetStateAction<` `string` \| `number` \| `undefined>>` |
| overtime | Overtime loading props | `{ elapsedTime?: number }` |
| autoSaveProps | Auto save props | `{ data: UpdateResponse<TData>` \| `undefined, error: HttpError` \| `null, status: "loading"` \| `"error"` \| `"idle"` \| `"success" }` |
| Property | Description | Type |
| ------------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onFinish | Triggers the mutation | `(values?: TVariables) => Promise<CreateResponse<TData>` \| `UpdateResponse<TData>` \| `void`> |
| form | Ant Design form instance | [`FormInstance`](https://ant.design/components/form/#FormInstance) |
| formProps | Ant Design form props | [`FormProps`](https://ant.design/components/form/#Form) |
| saveButtonProps | Props for a submit button | `{ disabled: boolean; onClick: () => void; loading?:boolean; }` |
| redirect | Redirect function for custom redirections | `(redirect:` `"list"`\|`"edit"`\|`"show"`\|`"create"`\| `false` ,`idFromFunction?:` [`BaseKey`](/docs/core/interface-references#basekey)\|`undefined`) => `data` |
| queryResult | Result of the query of a record | [`QueryObserverResult<T>`](https://react-query.tanstack.com/reference/useQuery) |
| mutationResult | Result of the mutation triggered by submitting the form | [`UseMutationResult<T>`](https://react-query.tanstack.com/reference/useMutation) |
| formLoading | Loading state of form request | `boolean` |
| id | Record id for `clone` and `create` action | [`BaseKey`](/docs/core/interface-references#basekey) |
| setId | `id` setter | `Dispatch<SetStateAction<` `string` \| `number` \| `undefined>>` |
| overtime | Overtime loading props | `{ elapsedTime?: number }` |
| autoSaveProps | Auto save props | `{ data: UpdateResponse<TData>` \| `undefined, error: HttpError` \| `null, status: "loading"` \| `"error"` \| `"idle"` \| `"success" }` |
| defaultFormValuesLoading | DefaultFormValues loading status of form | `boolean` |

## Example

Expand Down
Loading

0 comments on commit 311dcdc

Please sign in to comment.