Merge pull request #1034 from rvsia/splitRendererPropsToPage

Change Renderer props from table to list

Author: rvsia

packages/react-renderer-demo/src/pages/components/form-template.md

@@ -32,7 +32,7 @@ With using `useFormApi` hook you can get access to all form information and func
 
 ## Customize form buttons
 
-You can customize form buttons in your [FormTemplate](/components/renderer#requiredprops) component
+You can customize form buttons in your [FormTemplate](/components/renderer#formtemplate) component
 
 <CodeExample source="components/form-template/custom-buttons" mode="preview" />
 

packages/react-renderer-demo/src/pages/components/renderer.md

@@ -19,34 +19,45 @@ const App = () => (<FormRenderer
 
 ## Required props
 
-|Prop|Type|Description|
-|----|:--:|----------:|
-|[componentMapper](/mappers/custom-mapper)|object|Defines types of form field components. Field components can change the state of the form.|
-|[FormTemplate](/components/form-template)|Component|Components which defines a template of the form. This component receives two props from the renderer: `formFields` and `schema`. `formFields` is the content of the form. You should wrap this content into your `<form>` component and add form buttons.|
-|onSubmit|func|A submit callback which receives two arguments: `values` and `formApi`.|
-|schema|object|A schema which defines structure of the form.|
+### componentMapper
 
-## Optional props
+*object*
+
+Defines types of form field components. Field components can change the state of the form.
+
+You can use [globally defined attributes](/mappers/global-component-props).
+
+[Read more](/mappers/custom-mapper).
+
+---
+
+### FormTemplate
+
+*Component*
+
+Components which defines a template of the form. This component receives two props from the renderer: `formFields` and `schema`. `formFields` is the content of the form. You should wrap this content into your `<form>` component and add form buttons.
+
+[Read more](/components/form-template).
+
+---
 
-|Prop|Type|Description|Default|
-|----|:--:|----------:|------:|
-|[actionMapper](/mappers/action-mapper)|object|Action mapper allows to map props to functions.||
-|[clearOnUnmount](/schema/clear-on-unmount)|bool|Will clear values of unmounted components. You can also set this to specific component in the form schema.|false|
-|[clearedValue](/schema/cleared-value)|any|Value that will be set to field with **initialValue** after deleting it. Useful for forms while editing.|undefined|
-|onReset|func|A reset callback. You don't need to manually clear the form values!||
-|onCancel|func|A cancel callback, which receives `values` as the first argument.||
-|debug|func|A function which will be called with every form update, i.e. `({ values }) => setValues(values)`, please take a look [here](https://final-form.org/docs/react-final-form/types/FormProps#debug)||
-|initialValues|object|An object of fields names as keys and values as their values.||
-|[schemaValidatorMapper](/mappers/schema-validator-mapper)|object|Schema validators mapper. You can control schemas of your components, validators and actions.||
-|subscription|object|You can pass your own [subscription](https://final-form.org/docs/react-final-form/types/FormProps#subscription), which will be added to default settings.|`{ pristine: true, submitting: true, valid: true }`|
-|[validate](/schema/introduction#validate)|func|A function which receives all form values and returns an object with errors.||
-|[validatorMapper](/mappers/validator-mapper)|object|A mapper containing custom validators, it's automatically merged with the default one.||
+### onSubmit
 
-## Schema
+*(values, [formApi](/hooks/use-form-api)) => void*
 
-The root object of the schema represents the Form component. Please read more [here](/schema/introduction).
+A submit callback which receives two arguments: `values` and `formApi`.
 
-### Example
+[Read more]([/mappers/custom-mapper](https://final-form.org/docs/react-final-form/types/FormProps#onsubmit)).
+
+---
+
+### schema
+
+*object*
+
+A schema which defines structure of the form. Consists of [fields](/schema/introduction).
+
+**Example**
 
 ```javascript
 schema = {
@@ -60,4 +71,119 @@ schema = {
 };
 ```
 
+---
+
+## Optional props
+
+### actionMapper
+
+*object*
+
+Action mapper allows to map functions as props.
+
+[Read more](/mappers/action-mapper).
+
+---
+
+### clearOnUnmount
+
+*boolean*
+
+Will clear values of unmounted components. You can also set this to specific component in the form schema.
+
+[Read more](/schema/clear-on-unmount).
+
+---
+
+### clearedValue
+
+*any*
+
+Value that will be set to field with **initialValue** after deleting it. Useful for forms while editing.
+
+[Read more](/schema/cleared-value).
+
+---
+
+### onReset
+
+*func*
+
+A reset callback that refresh the form state to the initial state.
+
+---
+
+### onCancel
+
+*(values) => void*
+
+A cancel callback, which receives `values` as the first argument.
+
+---
+
+### debug
+
+*(formState) => void*
+
+A function which will be called with every form update, i.e. `({ values }) => setValues(values)`. 
+
+[Read more](https://final-form.org/docs/react-final-form/types/FormProps#debug)
+
+---
+
+### initialValues
+
+*object*
+
+An object of fields names as keys and values as their values.
+
+**Example**
+
+```jsx
+initialValues={{ name: 'initial-name', nested: { value: 'neste-value' }}}
+```
+
+---
+
+### schemaValidatorMapper
+
+*object*
+
+Schema validators mapper. You can control schemas of your components, validators and actions.
+
+[Read more](/mappers/schema-validator-mapper).
+
+---
+
+### subscription
+
+*object*
+
+You can pass your own [subscription](https://final-form.org/docs/react-final-form/types/FormProps#subscription), which will be added to default settings.
+
+**Default subscription**
+
+`{ pristine: true, submitting: true, valid: true }`
+
+---
+
+### validate
+
+*(values) => void | Errors*
+
+A function which receives all form values and returns an object with errors.
+
+[Read more]([/components/form-template](https://final-form.org/docs/react-final-form/types/FormProps#validate)).
+
+---
+
+### validatorMapper
+
+*object*
+
+A mapper containing custom validators, it's automatically merged with the default one.
+
+[Read more](/mappers/validator-mapper).
+
+
 </DocPage>

packages/react-renderer-demo/src/pages/examples/resolve-props-example.md

@@ -11,7 +11,7 @@ To achieve that you need to rerender the changing field on each form change. Tha
 
 ## Subscription example
 
-Using [subscription](/components/renderer#optionalprops) is a simple way how to let form to be rerendered each time values changed. However, this solution can bring a performance hit when used in large forms with tens of fields.
+Using [subscription](/components/renderer##subscription) is a simple way how to let form to be rerendered each time values changed. However, this solution can bring a performance hit when used in large forms with tens of fields.
 
 <CodeExample source="components/examples/resolve-props-subscription" mode="preview" />
 

packages/react-renderer-demo/src/pages/faq.md

@@ -17,7 +17,7 @@ import CodeExample from '@docs/code-example';
 
 **A.** Right now, there are two standard ways how to update the second component:
 
-1) Set [subscription](/components/renderer#optionalprops)
+1) Set [subscription](/components/renderer#subscription)
 
 ```jsx
 <FormRenderer

packages/react-renderer-demo/src/pages/mappers/action-mapper.md

@@ -5,7 +5,7 @@ import DocPage from '@docs/doc-page';
 
 # Action Mapper
 
-The [ActionMapper](/components/renderer#optionalprops) allows you to map schema props to functions. This is useful when your schema is not written in JavaScript and you cannot use function inside of it, especially for schemas stored in databases.
+The [ActionMapper](/components/renderer#actionmapper) allows you to map schema props to functions. This is useful when your schema is not written in JavaScript and you cannot use function inside of it, especially for schemas stored in databases.
 
 ## Mapper
 

packages/react-renderer-demo/src/pages/mappers/schema-validator-mapper.md

@@ -5,7 +5,7 @@ import CodeExample from '@docs/code-example';
 
 # Schema validation
 
-Data Driven Forms contains default schema validator, that controls basic schema attributes: `name`, `component`, conditions, validators, etc. If you want to control your own validators, components or actions, use [schemaValidatorMapper](/components/renderer#optionalprops) prop.
+Data Driven Forms contains default schema validator, that controls basic schema attributes: `name`, `component`, conditions, validators, etc. If you want to control your own validators, components or actions, use [schemaValidatorMapper](/components/renderer#schemavalidatormapper) prop.
 
 It's a simple object containing three keys: `components`, `actions`, `validators`. Each of these is an another object with names as keys and functions as returns. Components' validators receive the whole field object, actions'/validators' validators receive two arguments: action/validator as the first one and the name of the field as the second one.
 

packages/react-renderer-demo/src/pages/mappers/validator-mapper.md

@@ -5,7 +5,7 @@ import CodeExample from '@docs/code-example';
 
 # Validator mapper
 
-If you need to expand default Data Driven Forms validator types, you can use [validatorMapper](/components/renderer#optionalprops).
+If you need to expand default Data Driven Forms validator types, you can use [validatorMapper](/components/renderer#validatormapper).
 
 ```jsx
 const customValidatorMapper = {

packages/react-renderer-demo/src/pages/schema/resolve-props.md

@@ -62,7 +62,7 @@ const componentMapper = {
 
 ## Change props according to state of other components
 
-You can get states of all other fields in the form via functions from `formOptions`. Don't forget to set the right [subscription](/components/renderer#optionalprops) to trigger `resolveProps` functions from changing other fields.
+You can get states of all other fields in the form via functions from `formOptions`. Don't forget to set the right [subscription](/components/renderer#subscription) to trigger `resolveProps` functions from changing other fields.
 
 ## Example