diff --git a/documentation/docs/ui-integrations/ant-design/hooks/use-form/index.md b/documentation/docs/ui-integrations/ant-design/hooks/use-form/index.md
index c4a8849e6a36..ffd413962046 100644
--- a/documentation/docs/ui-integrations/ant-design/hooks/use-form/index.md
+++ b/documentation/docs/ui-integrations/ant-design/hooks/use-form/index.md
@@ -433,9 +433,7 @@ render();
```tsx
useForm({
- refineCoreProps: {
- resource: "categories",
- },
+ resource: "categories",
});
```
@@ -448,10 +446,8 @@ import { useParsed } from "@refinedev/core";
const { id } = useParsed();
useForm({
- refineCoreProps: {
- resource: "custom-resource",
- id,
- },
+ resource: "custom-resource",
+ id,
});
```
@@ -461,9 +457,7 @@ Or you can use the `setId` function to set the `id` value.
import { useForm } from "@refinedev/antd";
const { setId } = useForm({
- refineCoreProps: {
- resource: "custom-resource",
- },
+ resource: "custom-resource",
});
setId("123");
@@ -481,11 +475,9 @@ It is useful when you want to `edit` or `clone` a `resource` from a different pa
```tsx
useForm({
- refineCoreProps: {
- action: "edit", // or clone
- resource: "categories",
- id: 1, // /categories/1
- },
+ action: "edit", // or clone
+ resource: "categories",
+ id: 1, // /categories/1
});
```
@@ -497,9 +489,7 @@ It can be set to `"show" | "edit" | "list" | "create"` or `false` to prevent the
```tsx
useForm({
- refineCoreProps: {
- redirect: false,
- },
+ redirect: false,
});
```
@@ -516,10 +506,8 @@ It receives the following parameters:
```tsx
useForm({
- refineCoreProps: {
- onMutationSuccess: (data, variables, context, isAutoSave) => {
- console.log({ data, variables, context, isAutoSave });
- },
+ onMutationSuccess: (data, variables, context, isAutoSave) => {
+ console.log({ data, variables, context, isAutoSave });
},
});
```
@@ -537,10 +525,8 @@ It receives the following parameters:
```tsx
useForm({
- refineCoreProps: {
- onMutationError: (data, variables, context, isAutoSave) => {
- console.log({ data, variables, context, isAutoSave });
- },
+ onMutationError: (data, variables, context, isAutoSave) => {
+ console.log({ data, variables, context, isAutoSave });
},
});
```
@@ -556,9 +542,7 @@ By default it's invalidates following queries from the current `resource`:
```tsx
useForm({
- refineCoreProps: {
- invalidates: ["list", "many", "detail"],
- },
+ invalidates: ["list", "many", "detail"],
});
```
@@ -570,9 +554,7 @@ If you want to use a different `dataProvider` on all resource pages, you can use
```tsx
useForm({
- refineCoreProps: {
- dataProviderName: "second-data-provider",
- },
+ dataProviderName: "second-data-provider",
});
```
@@ -583,9 +565,7 @@ Each mode corresponds to a different type of user experience.
```tsx
useForm({
- refineCoreProps: {
- mutationMode: "undoable", // "pessimistic" | "optimistic" | "undoable",
- },
+ mutationMode: "undoable", // "pessimistic" | "optimistic" | "undoable",
});
```
@@ -599,14 +579,12 @@ useForm({
```tsx
useForm({
- refineCoreProps: {
- successNotification: (data, values, resource) => {
- return {
- message: `Post Successfully created with ${data.title}`,
- description: "Success with no errors",
- type: "success",
- };
- },
+ successNotification: (data, values, resource) => {
+ return {
+ message: `Post Successfully created with ${data.title}`,
+ description: "Success with no errors",
+ type: "success",
+ };
},
});
```
@@ -619,16 +597,14 @@ useForm({
```tsx
useForm({
- refineCoreProps: {
- action: "create",
- resource: "post",
- errorNotification: (data, values, resource) => {
- return {
- message: `Something went wrong when deleting ${data.id}`,
- description: "Error",
- type: "error",
- };
- },
+ action: "create",
+ resource: "post",
+ errorNotification: (data, values, resource) => {
+ return {
+ message: `Something went wrong when deleting ${data.id}`,
+ description: "Error",
+ type: "error",
+ };
},
});
```
@@ -655,10 +631,8 @@ In the following example, we pass the `headers` property in the `meta` object to
```tsx
useForm({
- refineCoreProps: {
- meta: {
- headers: { "x-meta-data": "true" },
- },
+ meta: {
+ headers: { "x-meta-data": "true" },
},
});
@@ -687,10 +661,8 @@ In addition to the [`meta`](#meta) property, you can also pass the `queryMeta` p
```tsx
useForm({
- refineCoreProps: {
- queryMeta: {
- querySpecificValue: "someValue",
- },
+ queryMeta: {
+ querySpecificValue: "someValue",
},
});
```
@@ -703,10 +675,8 @@ In addition to the [`meta`](#meta) property, you can also pass the `mutationMeta
```tsx
useForm({
- refineCoreProps: {
- mutationMeta: {
- mutationSpecificValue: "someValue",
- },
+ mutationMeta: {
+ mutationSpecificValue: "someValue",
},
});
```
@@ -719,10 +689,8 @@ In the `edit` and `clone` modes, Refine uses [`useOne`](/docs/data/hooks/use-one
```tsx
useForm({
- refineCoreProps: {
- queryOptions: {
- retry: 3,
- },
+ queryOptions: {
+ retry: 3,
},
});
```
@@ -733,10 +701,8 @@ In the `create` and `clone` modes, Refine uses the [`useCreate`](/docs/data/hook
```tsx
useForm({
- refineCoreProps: {
- createMutationOptions: {
- retry: 3,
- },
+ createMutationOptions: {
+ retry: 3,
},
});
```
@@ -747,10 +713,8 @@ In the `edit` mode, Refine uses [`useUpdate`](/docs/data/hooks/use-update) hook
```tsx
useForm({
- refineCoreProps: {
- updateMutationOptions: {
- retry: 3,
- },
+ updateMutationOptions: {
+ retry: 3,
},
});
```
@@ -763,9 +727,7 @@ It can be set globally in [`Refine config`](/docs/core/refine-component#warnwhen
```tsx
useForm({
- refineCoreProps: {
- warnWhenUnsavedChanges: true,
- },
+ warnWhenUnsavedChanges: true,
});
```
@@ -775,9 +737,7 @@ When it's true, `submitOnEnter` will submit the form when the enter key is press
```tsx
useForm({
- refineCoreProps: {
- submitOnEnter: true,
- },
+ submitOnEnter: true,
});
```
@@ -789,9 +749,7 @@ useForm({
```tsx
useForm({
- refineCoreProps: {
- liveMode: "auto",
- },
+ liveMode: "auto",
});
```
@@ -803,10 +761,8 @@ useForm({
```tsx
useForm({
- refineCoreProps: {
- onLiveEvent: (event) => {
- console.log(event);
- },
+ onLiveEvent: (event) => {
+ console.log(event);
},
});
```
@@ -826,13 +782,11 @@ Return `overtime` object from this hook. `elapsedTime` is the elapsed time in mi
```tsx
const { overtime } = useForm({
- refineCoreProps: {
- //...
- overtimeOptions: {
- interval: 1000,
- onInterval(elapsedInterval) {
- console.log(elapsedInterval);
- },
+ //...
+ overtimeOptions: {
+ interval: 1000,
+ onInterval(elapsedInterval) {
+ console.log(elapsedInterval);
},
},
});
@@ -863,10 +817,8 @@ To enable the `autoSave` feature, set the `enabled` parameter to `true`. By defa
```tsx
useForm({
- refineCoreProps: {
- autoSave: {
- enabled: true,
- },
+ autoSave: {
+ enabled: true,
},
});
```
@@ -877,12 +829,10 @@ Set the debounce time for the `autoSave` prop. By default, it is `1000` millisec
```tsx
useForm({
- refineCoreProps: {
- autoSave: {
- enabled: true,
- // highlight-next-line
- debounce: 2000,
- },
+ autoSave: {
+ enabled: true,
+ // highlight-next-line
+ debounce: 2000,
},
});
```
@@ -893,18 +843,16 @@ If you want to modify the data before sending it to the server, you can use `onF
```tsx
useForm({
- refineCoreProps: {
- autoSave: {
- enabled: true,
- // highlight-start
- onFinish: (values) => {
- return {
- foo: "bar",
- ...values,
- };
- },
- // highlight-end
+ autoSave: {
+ enabled: true,
+ // highlight-start
+ onFinish: (values) => {
+ return {
+ foo: "bar",
+ ...values,
+ };
},
+ // highlight-end
},
});
```
@@ -915,12 +863,10 @@ This prop is useful when you want to invalidate the `list`, `many` and `detail`
```tsx
useForm({
- refineCoreProps: {
- autoSave: {
- enabled: true,
- // highlight-next-line
- invalidateOnUnmount: true,
- },
+ autoSave: {
+ enabled: true,
+ // highlight-next-line
+ invalidateOnUnmount: true,
},
});
```
@@ -1095,16 +1041,14 @@ const PostEdit = () => {
const invalidate = useInvalidate();
useForm({
- refineCoreProps: {
- // highlight-start
- onMutationSuccess: (data, variables, context) => {
- invalidate({
- resource: "users",
- invalidates: ["resourceAll"],
- });
- },
- // highlight-end
+ // highlight-start
+ onMutationSuccess: (data, variables, context) => {
+ invalidate({
+ resource: "users",
+ invalidates: ["resourceAll"],
+ });
},
+ // highlight-end
});
// ---