tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fix incorrect docs for complex mdx components (#10212)

Browse Source
This commit is contained in:
Alessio Gravili
2024-12-27 19:57:00 -07:00
committed by GitHub
parent 181fc410bf
commit 78b6d51e58
2 changed files with 59 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
docs/admin/hooks.mdx
View File

@@ -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.",
@@ -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",
@@ -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",
@@ -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",
@@ -220,10 +220,10 @@ 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: ''
@@ -231,7 +231,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>disabled</code></strong>`,
value: "**`disabled`**",
},
{
value: "Boolean denoting whether or not the form is disabled",
@@ -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',
@@ -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',
@@ -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',
@@ -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',
@@ -286,10 +286,10 @@ 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: '',
@@ -297,10 +297,10 @@ The `useForm` hook returns an object with the following properties:
],
[
{
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: '',
@@ -308,10 +308,10 @@ The `useForm` hook returns an object with the following properties:
],
[
{
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: '',
@@ -319,7 +319,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: `<strong><code>formRef</code></strong>`,
value: "**`formRef`**",
},
{
value: 'The ref from the form HTML element',
@@ -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',
@@ -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",
@@ -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',
@@ -360,7 +359,7 @@ 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",
@@ -368,7 +367,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
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.",
@@ -376,7 +375,7 @@ The `useForm` hook returns an object with the following properties:
],
[
{
value: <strong><code>data</code></strong>,
value: "**\`data<\`**",
},
{
value: "The data to add to the row",
@@ -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 = () => {
@@ -416,10 +410,11 @@ export const CustomArrayManager = () => {
</button>
)
}\`}
</pre>
\`\`\`
<p>An example config to go along with the Custom Component</p>
<pre>
An example config to go along with the Custom Component
\`\`\`tsx
{\`const ExampleCollection = {
slug: "example-collection",
fields: [
@@ -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",
@@ -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',
@@ -470,7 +463,7 @@ export const CustomArrayManager = () => {
rows={[
[
{
value: <strong><code>path</code></strong>,
value: "**\`path\`**",
},
{
value: "The path to the array or block field",
@@ -478,7 +471,7 @@ export const CustomArrayManager = () => {
],
[
{
value: <strong><code>rowIndex</code></strong>,
value: "**\`rowIndex\`**",
},
{
value: "The index of the row to remove",
@@ -487,13 +480,9 @@ export const CustomArrayManager = () => {
]}
/>
{' '}
<br />
{' '}
<pre>
\`\`\`tsx
{\`import { useForm } from "payload/components/forms";
export const CustomArrayManager = () => {
@@ -513,10 +502,11 @@ export const CustomArrayManager = () => {
</button>
)
}\`}
</pre>
\`\`\`
<p>An example config to go along with the Custom Component</p>
<pre>
An example config to go along with the Custom Component
\`\`\`tsx
{\`const ExampleCollection = {
slug: "example-collection",
fields: [
@@ -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",
@@ -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',
@@ -567,7 +555,7 @@ export const CustomArrayManager = () => {
rows={[
[
{
value: <strong><code>path</code></strong>,
value: "**\`path\`**",
},
{
value: "The path to the array or block field",
@@ -575,7 +563,7 @@ export const CustomArrayManager = () => {
],
[
{
value: <strong><code>rowIndex</code></strong>,
value: "**\`rowIndex\`**",
},
{
value: "The index of the row to replace",
@@ -583,7 +571,7 @@ export const CustomArrayManager = () => {
],
[
{
value: <strong><code>data</code></strong>,
value: "**\`data\`**",
},
{
value: "The data to replace within the row",
@@ -592,13 +580,10 @@ export const CustomArrayManager = () => {
]}
/>
{' '}
<br />
{' '}
<pre>
\`\`\`tsx
{\`import { useForm } from "payload/components/forms";
export const CustomArrayManager = () => {
@@ -623,10 +608,11 @@ export const CustomArrayManager = () => {
</button>
)
}\`}
</pre>
\`\`\`
<p>An example config to go along with the Custom Component</p>
<pre>
An example config to go along with the Custom Component
\`\`\`tsx
{\`const ExampleCollection = {
slug: "example-collection",
fields: [
@@ -651,8 +637,7 @@ export const CustomArrayManager = () => {
},
],
}\`}
</pre>
</>
\`\`\`
`
}
],

31
docs/rest-api/overview.mdx
View File

@@ -51,28 +51,15 @@ Note: Collection slugs must be formatted in kebab-case
},
},
drawerContent: `
<>
<h6>Additional <code>find</code> query parameters</h6>
The <code>find</code> endpoint supports the following additional query parameters:
<ul>
<li>
<a href="/docs/queries/overview#sort">sort</a> - sort by field
</li>
<li>
<a href="/docs/queries/overview">where</a> - pass a where query to constrain returned
documents
</li>
<li>
<a href="/docs/queries/pagination#pagination-controls">limit</a> - limit the returned
documents to a certain number
</li>
<li>
<a href="/docs/queries/pagination#pagination-controls">page</a> - get a specific page of
documents
</li>
</ul>
</>
`,
#### Additional `find` query parameters
The `find` endpoint supports the following additional query parameters:
- [sort](/docs/queries/overview#sort) - sort by field
- [where](/docs/queries/overview) - pass a where query to constrain returned documents
- [limit](/docs/queries/pagination#pagination-controls) - limit the returned documents to a certain number
- [page](/docs/queries/pagination#pagination-controls) - get a specific page of documents
`
},
},
{