Skip to content

Commit

Permalink
docs: fix incorrect docs for complex mdx components (#10212)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlessioGr
AlessioGr authored Dec 28, 2024
1 parent 181fc41 commit 78b6d51
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 87 deletions.
115 changes: 50 additions & 65 deletions docs/admin/hooks.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ The `useForm` hook returns an object with the following properties:
rows={[
[
{
value: `<strong><code>fields</code></strong>`,
value: "**`fields`**",
},
{
value: "Deprecated. This property cannot be relied on as up-to-date.",
Expand All @@ -187,7 +187,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>submit</code></strong>`,
value: "**`submit`**",
},
{
value: "Method to trigger the form to submit",
Expand All @@ -198,7 +198,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>dispatchFields</code></strong>`,
value: "**`dispatchFields`**",
},
{
value: "Dispatch actions to the form field state",
Expand All @@ -209,7 +209,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>validateForm</code></strong>`,
value: "**`validateForm`**",
},
{
value: "Trigger a validation of the form state",
Expand All @@ -220,18 +220,18 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>createFormData</code></strong>`,
value: "**`createFormData`**",
},
{
value: `<>Create a <code>multipart/form-data</code> object from the current form's state</>`,
value: "Create a `multipart/form-data` object from the current form's state",
},
{
value: ''
}
],
[
{
value: `<strong><code>disabled</code></strong>`,
value: "**`disabled`**",
},
{
value: "Boolean denoting whether or not the form is disabled",
Expand All @@ -242,7 +242,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>getFields</code></strong>`,
value: "**`getFields`**",
},
{
value: 'Gets all fields from state',
Expand All @@ -253,7 +253,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>getField</code></strong>`,
value: "**`getField`**",
},
{
value: 'Gets a single field from state by path',
Expand All @@ -264,7 +264,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>getData</code></strong>`,
value: "**`getData`**",
},
{
value: 'Returns the data stored in the form',
Expand All @@ -275,7 +275,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>getSiblingData</code></strong>`,
value: "**`getSiblingData`**",
},
{
value: 'Returns form sibling data for the given field path',
Expand All @@ -286,40 +286,40 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>setModified</code></strong>`,
value: "**`setModified`**",
},
{
value: `<>Set the form\'s <code>modified</code> state</>`,
value: "Set the form\'s `modified` state",
},
{
value: '',
},
],
[
{
value: `<strong><code>setProcessing</code></strong>`,
value: "**`setProcessing`**",
},
{
value: `<>Set the form\'s <code>processing</code> state</>`,
value: "Set the form\'s `processing` state",
},
{
value: '',
},
],
[
{
value: `<strong><code>setSubmitted</code></strong>`,
value: "**`setSubmitted`**",
},
{
value: `<>Set the form\'s <code>submitted</code> state</>`,
value: "Set the form\'s `submitted` state",
},
{
value: '',
},
],
[
{
value: `<strong><code>formRef</code></strong>`,
value: "**`formRef`**",
},
{
value: 'The ref from the form HTML element',
Expand All @@ -330,7 +330,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>reset</code></strong>`,
value: "**`reset`**",
},
{
value: 'Method to reset the form to its initial state',
Expand All @@ -341,7 +341,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>addFieldRow</code></strong>`,
value: "**`addFieldRow`**",
},
{
value: "Method to add a row on an array or block field",
Expand All @@ -351,7 +351,6 @@ The `useForm` hook returns an object with the following properties:
drawerDescription: 'A useful method to programmatically add a row to an array or block field.',
drawerSlug: 'addFieldRow',
drawerContent: `
<>
<TableWithDrawers
columns={[
'Prop',
Expand All @@ -360,23 +359,23 @@ The `useForm` hook returns an object with the following properties:
rows={[
[
{
value: <strong><code>path</code></strong>,
value: "**\`path\`**",
},
{
value: "The path to the array or block field",
},
],
[
{
value: <strong><code>rowIndex</code></strong>,
value: "**\`rowIndex\`**",
},
{
value: "The index of the row to add. If omitted, the row will be added to the end of the array.",
},
],
[
{
value: <strong><code>data</code></strong>,
value: "**\`data<\`**",
},
{
value: "The data to add to the row",
Expand All @@ -385,13 +384,8 @@ The `useForm` hook returns an object with the following properties:
]}
/>
{' '}
<br />
{' '}
<pre>
\`\`\`tsx
{\`import { useForm } from "payload/components/forms";
export const CustomArrayManager = () => {
Expand All @@ -416,10 +410,11 @@ export const CustomArrayManager = () => {
</button>
)
}\`}
</pre>
\`\`\`
An example config to go along with the Custom Component
<p>An example config to go along with the Custom Component</p>
<pre>
\`\`\`tsx
{\`const ExampleCollection = {
slug: "example-collection",
fields: [
Expand All @@ -444,14 +439,13 @@ export const CustomArrayManager = () => {
},
],
}\`}
</pre>
</>
`
\`\`\`
`
}
],
[
{
value: `<strong><code>removeFieldRow</code></strong>`,
value: "**`removeFieldRow`**",
},
{
value: "Method to remove a row from an array or block field",
Expand All @@ -461,7 +455,6 @@ export const CustomArrayManager = () => {
drawerDescription: 'A useful method to programmatically remove a row from an array or block field.',
drawerSlug: 'removeFieldRow',
drawerContent: `
<>
<TableWithDrawers
columns={[
'Prop',
Expand All @@ -470,15 +463,15 @@ export const CustomArrayManager = () => {
rows={[
[
{
value: <strong><code>path</code></strong>,
value: "**\`path\`**",
},
{
value: "The path to the array or block field",
},
],
[
{
value: <strong><code>rowIndex</code></strong>,
value: "**\`rowIndex\`**",
},
{
value: "The index of the row to remove",
Expand All @@ -487,13 +480,9 @@ export const CustomArrayManager = () => {
]}
/>
{' '}
<br />
{' '}
<pre>
\`\`\`tsx
{\`import { useForm } from "payload/components/forms";
export const CustomArrayManager = () => {
Expand All @@ -513,10 +502,11 @@ export const CustomArrayManager = () => {
</button>
)
}\`}
</pre>
\`\`\`
An example config to go along with the Custom Component
<p>An example config to go along with the Custom Component</p>
<pre>
\`\`\`tsx
{\`const ExampleCollection = {
slug: "example-collection",
fields: [
Expand All @@ -541,14 +531,13 @@ export const CustomArrayManager = () => {
},
],
}\`}
</pre>
</>
`
\`\`\`
`
}
],
[
{
value: `<strong><code>replaceFieldRow</code></strong>`,
value: "**`replaceFieldRow`**",
},
{
value: "Method to replace a row from an array or block field",
Expand All @@ -558,7 +547,6 @@ export const CustomArrayManager = () => {
drawerDescription: 'A useful method to programmatically replace a row from an array or block field.',
drawerSlug: 'replaceFieldRow',
drawerContent: `
<>
<TableWithDrawers
columns={[
'Prop',
Expand All @@ -567,23 +555,23 @@ export const CustomArrayManager = () => {
rows={[
[
{
value: <strong><code>path</code></strong>,
value: "**\`path\`**",
},
{
value: "The path to the array or block field",
},
],
[
{
value: <strong><code>rowIndex</code></strong>,
value: "**\`rowIndex\`**",
},
{
value: "The index of the row to replace",
},
],
[
{
value: <strong><code>data</code></strong>,
value: "**\`data\`**",
},
{
value: "The data to replace within the row",
Expand All @@ -592,13 +580,10 @@ export const CustomArrayManager = () => {
]}
/>
{' '}
<br />
{' '}
<pre>
\`\`\`tsx
{\`import { useForm } from "payload/components/forms";
export const CustomArrayManager = () => {
Expand All @@ -623,10 +608,11 @@ export const CustomArrayManager = () => {
</button>
)
}\`}
</pre>
\`\`\`
An example config to go along with the Custom Component
<p>An example config to go along with the Custom Component</p>
<pre>
\`\`\`tsx
{\`const ExampleCollection = {
slug: "example-collection",
fields: [
Expand All @@ -651,8 +637,7 @@ export const CustomArrayManager = () => {
},
],
}\`}
</pre>
</>
\`\`\`
`
}
],
Expand Down
Loading

0 comments on commit 78b6d51

Please sign in to comment.