doc: revise schema/fieldProperties

Author: yiranc0205

packages/react-renderer-demo/src/pages/input-meta.md

@@ -1,31 +1,38 @@
-**What are input and meta?**
+**What are meta and input?**
 
-**Input**
+<br/>
 
-Input is an object which contains field values and methods that change form state. See the selection of most important attributes:
+**meta**
 
+`meta` is an object which contains meta information about field with given name. There is a lot of information about every field.
+
+[Here is the full list](https://final-form.org/docs/react-final-form/types/FieldRenderProps#metaactive) of commonly used `meta` information.
 ```jsx
 {
-  value: any, // any value of given form field. Its data type is based on field data type
-  name: string, // unique name of form field. Value will be accessible under this key in form state
-  onBlur: (event) => void, // function that should be triggered on field blur event
-  onChange: (value) => void, // function that changes value of field in formState. Should be called whenever you want to change value of field
-  onFocus: (event) => void, // function that should be triggered on field focus event
+  error: any, // whatever your validation function returns
+  pristine: bool, // true if the current value is === to the initial value, false if the values are !==.
+  dirty: bool, // opposite of pristine
+  touched: bool, //true if this field has ever gained and lost focus. false otherwise. Useful for knowing when to display error messages.
+  valid: bool //true if this field has no validation or submission errors. false otherwise.
 }
 ```
 
-Every user interaction that updates field value in form state should also call `input.onChange` with correct value.
+<br/>
+
+**input**
+
+`input` is an object, which contains field values and methods that change form state. 
 
-**Meta**
+See the selection of the most important attributes:
 
-Meta is a object which contains meta information about field with given name. There is a lot of information about every field.
-[Full list is here](https://final-form.org/docs/react-final-form/types/FieldRenderProps#metaactive). These are commonly used meta informations
 ```jsx
 {
-  error: any, // whatever your validation function returns
-  pristine: bool, // true if the current value is === to the initial value, false if the values are !==.
-  dirty: bool, // opposite of pristine
-  touched: bool, //true if this field has ever gained and lost focus. false otherwise. Useful for knowing when to display error messages.
-  valid: bool //true if this field has no validation or submission errors. false otherwise.
+  value: any, // any value of given form field. Its data type is based on field data type
+  name: string, // unique name of form field. Value will be accessible under this key in form state
+  onBlur: (event) => void, // function that should be triggered on field blur event
+  onChange: (value) => void, // function that changes value of field in formState. Should be called whenever you want to change value of field
+  onFocus: (event) => void, // function that should be triggered on field focus event
 }
-```
+```
+
+Every user interaction that updates field value in form state should also call `input.onChange` with correct value.

packages/react-renderer-demo/src/pages/schema/clear-on-unmount.md

@@ -3,20 +3,25 @@ import CodeExample from '@docs/code-example';
 
 <DocPage>
 
-# Clear on unmount
+# clearOnUnmount
 
 *boolean*
 
-When using dynamic forms where more fields share the same name, the value is preserved when a user switches the field. You can disable this behavior by setting 
-`clearOnUnmount` option in the renderer component or in the schema of the field. The option in the schema has always higher priority. (When 
-`clearOnUnmount` is set in the renderer and the field has it this attribute set to `false`, the field value will not be cleared.)
+When using dynamic forms where more fields share the same name, the value is preserved when a user switches the field. 
+
+You can disable this behavior by setting `clearOnUnmount` option in the renderer component, or in the schema of the field. 
+
+The option in the schema has always higher priority. (When `clearOnUnmount` is set to `ture` in the renderer, and this attribute is set to `false` in the schema of the the field, the field value will not be cleared.)
+
+<br/>
 
 ## Examples
 
 ### Form example
 
 <CodeExample source="components/clear-on-unmount" mode="preview" />
 
+<br/>
 
 ### Form level configuration
 
@@ -30,6 +35,8 @@ When using dynamic forms where more fields share the same name, the value is pre
 />
 ```
 
+<br/>
+
 ### Field level configuration
 
 ```jsx

packages/react-renderer-demo/src/pages/schema/cleared-value.md

@@ -3,11 +3,15 @@ import DocPage from '@docs/doc-page';
 
 <DocPage>
 
-# Cleared value
+# clearedValue
 
 *any*
 
-The value to send upon a submit if the field is empty. This wildcard value can be used to distinguish between an untouched field and a cleared one (it will be only used when field has initialValue). For example if you have a form that edits an entity and you would like to clear an attribute. Some APIs require the value to be set to null to register the change.
+`clearedValue` is the value to send upon a submit if the field is empty. 
+
+This wildcard value can be used to distinguish between an untouched field and a cleared one (it will be only used when field has `initialValue`). 
+
+For example, if you have a form that edits an entity and you would like to clear an attribute of the form, some APIs require the `clearedValue` to be set to null to register the change.
 
 
 <CodeExample source="components/cleared-value" mode="preview" />

packages/react-renderer-demo/src/pages/schema/constants.md

@@ -4,11 +4,13 @@ import DocPage from '@docs/doc-page';
 
 # Constants
 
-Data Driven Forms provides two constants files to keep consistency across all projects and prevent typos.
+**Data Driven Forms** provides two constant files to keep consistency across all projects and prevent typos.
+
+<br/>
 
 ## componentTypes
 
-Strings values used in `component` field attributes.
+`componentTypes` are string values used in `component` field attributes.
 
 ```jsx
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
@@ -48,9 +50,11 @@ Usage:
 }
 ```
 
+<br/>
+
 ## validatorTypes
 
-Strings values used in `validate` [type attribute](/schema/introduction#validate).
+`validatorTypes` are string values used in `validate` [type attribute](/schema/introduction#validate).
 
 ```jsx
 import { validatorTypes } from '@data-driven-forms/react-form-renderer';

packages/react-renderer-demo/src/pages/schema/data-types.md

@@ -3,12 +3,15 @@ import DocPage from '@docs/doc-page';
 
 <DocPage>
 
-# Data Types
+# dataType
 
 *string*
 
- You can specify a type of a component by providing `dataType`, which will automatically validates the component value.
-Because almost everything in HTML inputs is outputed as a string, adding the `dataType` props will also cast the value to given type.
+You can specify the type of a component by providing `dataType`, which will automatically validates the component value.
+
+Because almost everything in HTML inputs is outputed as a string, adding the `dataType` props will also cast the value to the given type.
+
+<br/>
 
 ## Example
 
@@ -21,6 +24,8 @@ Because almost everything in HTML inputs is outputed as a string, adding the `da
 }
 ```
 
+<br/>
+
 ## Available dataTypes
 
  ```jsx

packages/react-renderer-demo/src/pages/schema/initialize-on-mount.md

@@ -3,18 +3,20 @@ import CodeExample from '@docs/code-example';
 
 <DocPage>
 
-# Initialize On Mount
+# initializeOnMount
 
 *boolean*
 
-Data Driven Forms provides a way how you can easily initialized a field when the field is mounted (re-mounted).
+**Data Driven Forms** provides a way how you can easily initialize a field when the field is mounted (re-mounted).
 
 Just pass a `initializeOnMount` prop and set it to `true`.
 
-The field will use the `initialValue` set in the schema ([initialValue](/schema/introduction#initialvalue)).
+The field will use the `initialValue` set in the schema ([`initialValue`](/schema/introduction#initialvalue)).
 
 `initialValue` has higher priority than a value from `initialValues`.
 
+<br/>
+
 ## Example
 
 
@@ -27,14 +29,24 @@ The field will use the `initialValue` set in the schema ([initialValue](/schema/
 }
 ```
 
+<br/>
+
 ## When to use it?
 
-This feature comes handy if you need change a value when an user traverses a form, which shows and hides fields, and the value is not set by the user. Very useful case is used it wizard forms, where you can set different value for the same input according the way the user went in the wizard form by using this option combined with [hideField](/schema/introduction#hidefield) prop.
+If you need to change a value when a user traverses a form, which shows and hides fields, and the value is not set by the user, this feature comes handy. 
+
+A very useful case:
+
+> When you use `initializeOnMount` in wizard forms, you can set different values to one input component which leads users to different ways as the following example component. 
+
+> To achieve this implementation, you may need to use `initializeOnMount` combined with [`hideField`](/schema/introduction#hidefield) property.
 
 <CodeExample source="components/initialize-mount" mode="preview" />
 
+<br/>
+
 ## Clear the value
 
-If you need clear the value after unmounting, you can do it by using [clearOnUnmount](/schema/clear-on-unmount).
+If you need to clear the value after unmounting, you can do it by using [clearOnUnmount](/schema/clear-on-unmount).
 
 </DocPage>

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

@@ -4,15 +4,18 @@ import CodeExample from '@docs/code-example';
 
 <DocPage>
 
-# Resolve props
+# resolveProps
 
 *function (props, {meta, input}, formOptions) => props*
 
-**Only applicable for fields connected to the form state.**
 
-A function allowing to compute field properties from the current state of the field.
+**resolveProps is only applicable for fields that connected to the form state.**
 
-## Schema
+The function of resolveProps can compute field properties from the current state of the field. 
+
+<br/>
+
+## Example
 
 ```jsx
 const schema = {
@@ -23,33 +26,50 @@ const schema = {
 }
 ```
 
+<br/>
+
 ## Arguments
 
-### Props
+### props
 
-All field props passed in the schema.
+`props` are all field properties passed in the schema.
 
-### Meta and input
+<br/>
 
+### meta and input
+
+<br/>
 <InputMeta />
 
-### FormOptions
+<br/>
+
+### formOptions
+
+`formOptions` is an object containing access to the form state. 
+
+[Read more.](/hooks/use-form-api)
 
-Object containing access to the form state. Read more [here](/hooks/use-form-api).
+<br/>
 
 ## Rules
 
-I. `resolveProps` cannot return `actions`. You can access `actions`'s code in the `resolveProps` prop if you need it.
+Here are some rules about using `resolveProps`:
+
+I. `resolveProps` cannot return `actions`. You can access `actions`'s code in the `resolveProps` props if you need it.
 
 II. Do not use `async` functions to get the props.
 
-III. Do not trigger any side effects, as it could introduce bugs.
+III. Do not trigger any side effects, as it may introduce bugs.
+
+IV. `resolveProps` are merged together with the following priority:
 
-IV. `resolveProps` are merged together with following priority: `actions.resolveProps` (highest) > `field.resolveProps` > `mapper.resolveProps` (lowest)
+`actions.resolveProps` (highest) > `field.resolveProps` > `mapper.resolveProps` (lowest)
+
+<br/>
 
 ## Global resolveProps
 
-You can modify behavior for all components of the same type in your `componentMapper` via [global component props](/mappers/global-component-props).
+You can modify the behavior for all components of the same type in your `componentMapper` via [global component props](/mappers/global-component-props).
 
 ```jsx
 const componentMapper = {
@@ -60,13 +80,21 @@ const componentMapper = {
 }
 ```
 
-## Change props according to state of other components
+<br/>
+
+## Change props according to the 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#subscription) to trigger `resolveProps` functions from changing other fields.
+You can get states of all the 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 the other changing fields.
+
+<br/>
 
 ## Example
 
-Following example shows how can be a behavior of components changed using `resolveProps`. In this example, the component will have different color and helper text after it is validated.
+The following example shows how `resolveProps` changes a behavior of components . 
+
+In this example, after the component is validated, it will have different colors and helper texts.
 
 <CodeExample mode="preview" source="components/resolve-props" />