Skip to content

Commit 0c1fbd8

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1215 from yiranc0205/revise-schema-introduction
doc: revise schema/introduction
2 parents 3199d49 + 9fd1490 commit 0c1fbd8

File tree

1 file changed

+124
-29
lines changed

1 file changed

+124
-29
lines changed

‎packages/react-renderer-demo/src/pages/schema/introduction.md

Lines changed: 124 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,21 @@ import DocPage from '@docs/doc-page';
44

55
# Schema Introduction
66

7+
<br/>
8+
79
## Schema definition
810

9-
A schema is an object consists of fields:
11+
A schema is an object consists of `fields`:
1012

1113
```jsx
1214
{
1315
fields: []
1416
}
1517
```
1618

17-
Other attribues, such as title or description, can be used in [form templates](/components/form-template).
19+
Other attributes, such as `title` or `description`, can be used in [form templates](/components/form-template).
20+
21+
<br/>
1822

1923
## Field definition
2024

@@ -39,20 +43,52 @@ Other attribues, such as title or description, can be used in [form templates](/
3943
...componentSpecificAttributes
4044
}
4145
```
46+
<br/>
4247

4348
### component (required)
4449

4550
*string*
4651

47-
`component` is a string value representing used component. Available options depends on the component mapper. Data Driven Forms automatically checks if the component is available, if not, it shows an error message. You can use [componentTypes](/schema/constants#componenttypes) to prevent typos. This attribute is not required for fields of these components: `wizard`, `field-array` and `tabs` as these fields include only special components with no implementation.
52+
The value of `component` is a *string* that represents used component. Available options depend on the [component mapper](/mappers/custom-mapper#Componentmapper).
53+
54+
**Data Driven Forms** automatically checks if the component is available; if not, it shows an error message. You can use [componentTypes](/schema/constants#componenttypes) to prevent typos.
55+
56+
This attribute is not required for the first level of the `fields` in the following components, as this first level of the `fields` is implemented with special predefined components:
57+
58+
`wizard`, `field-array`, `tabs`
59+
60+
<br/>
61+
62+
Here is an example for `wizard`:
63+
``` jsx
64+
const schema = {
65+
fields: [{
66+
component: 'wizard', // here you define the wizard component
67+
name: 'wizard-field',
68+
...
69+
// first level of this `fields` are the direct children of wizard - wizard-steps
70+
fields: [{
71+
name: 'step-1',
72+
title: 'Foo',
73+
...
74+
fields: [{
75+
// these are not children of the wizard step and you require a component attribute again
76+
component: 'text-field',
77+
name: 'bar',
78+
...
79+
}]
80+
}]
81+
}]
82+
}
83+
```
4884

4985
---
5086

5187
### name (required)
5288

5389
*string*
5490

55-
`name` represents the variable the form value is stored in. You can use [dot notation](https://final-form.org/docs/final-form/field-names) to create nested objects.
91+
`name` represents the variable that stores the form value. You can use [dot notation](https://final-form.org/docs/final-form/field-names) to create nested objects.
5692

5793
```jsx
5894
{
@@ -61,7 +97,7 @@ Other attribues, such as title or description, can be used in [form templates](/
6197
}
6298
```
6399

64-
will be transformed to
100+
The code above will be automatically transformed to:
65101

66102
```jsx
67103
{
@@ -71,39 +107,50 @@ will be transformed to
71107
}
72108
```
73109

110+
74111
---
75112

76113
### actions
77114

78115
*object*
79116

80-
An object that allows to map other properties to globally defined actions. For example, a select has lazy loaded option and with this you can define parameters for the function and keep them in a string format. Read more [here](/mappers/action-mapper).
117+
The *object* of actions maps other properties to globally defined actions.
118+
119+
For example, a `select` has lazy loaded option. With actions, you can define parameters for the function, and keep them in a *string* format.
120+
121+
[Read more.](/mappers/action-mapper)
122+
81123

82124
---
83125

84126
### clearedValue
85127

86128
*any*
87129

88-
A value that will be used if the field is cleared. Read more [here](/schema/cleared-value).
130+
If the field is cleared, clearedValue defines the value that will be used.
131+
132+
[Read more.](/schema/cleared-value)
133+
89134

90135
---
91136

92137
### clearOnUnmount
93138

94139
*bool*
95140

96-
When `true`, the value will be cleared after the component is unmounted. Read more [here](/schema/clear-on-unmount)
141+
When clearOnUnmount is `true`, after the component is unmounted, the value will be cleared.
142+
143+
[Read more](/schema/clear-on-unmount).
97144

98145
---
99146

100147
### condition
101148

102149
*object* | *array*
103150

104-
`condition` allows to hide/show field when a [condition](/schema/condition-schema) is fulfilled.
151+
When a [`condition`](/schema/condition-schema) is fulfilled, it can show or hide a component.
105152

106-
Example:
153+
Here is an example:
107154

108155
```jsx
109156
{
@@ -115,21 +162,45 @@ Example:
115162
}
116163
```
117164

118-
A field with this configuration will be shown only if the first name is Douglas.
165+
In this example, only if the `first-name` is `Douglas`, the field appears.
166+
167+
<br/>
168+
169+
The following multiple condition types can be [nested](/schema/condition-nesting):
170+
171+
[`and`](/schema/and), [`or`](/schema/or), [`not`](/schema/not), [`sequence`](/schema/condition-sequence).
172+
173+
<br/>
119174

120-
There are multiple condition types: [and](/schema/and), [or](/schema/or), [not](/schema/not), [sequence](/schema/condition-sequence) that can be [nested](/schema/condition-nesting).
175+
The following are multiple matchers:
121176

122-
And there are multiple matchers: [is](/schema/is), [isEmpty](/schema/is-empty), [isNotEmpty](/schema/is-not-empty), [pattern](/schema/pattern). Some of these matchers can be inverted by using [notMatch](/schema/not-match).
177+
[`is`](/schema/is), [`isEmpty`](/schema/is-empty), [`isNotEmpty`](/schema/is-not-empty), [`pattern`](/schema/pattern).
178+
179+
You can use [`notMatch`](/schema/not-match) to invert matchers.
180+
181+
<br/>
182+
183+
The following actions can be binded to conditions:
184+
185+
[`set`](/schema/condition-set), [`visible`](/schema/condition-visible).
123186

124-
There are also two actions that can be binded to conditions: [set](/schema/condition-set) and [visible](/schema/condition-visible).
125187

126188
---
127189

128190
### dataType
129191

130-
one of strings: *integer | float | number | boolean | string*
192+
*string*
193+
194+
The value of dataType must be one of the following strings:
195+
196+
`"integer"`, `"float"`, `"number"`, `"boolean"` or `"string"`.
197+
198+
<br/>
199+
200+
The value of this component will be converted to the type that dataType indicates.
201+
202+
[Read more.](/schema/data-types)
131203

132-
Data type sets the type the value will be converted to. Read more [here](/schema/data-types).
133204

134205
---
135206

@@ -139,49 +210,62 @@ Data type sets the type the value will be converted to. Read more [here](/schema
139210

140211
You can pass additional [Final Form FieldProps](https://final-form.org/docs/react-final-form/types/FieldProps) via FieldProps object. This prop is made to avoid conflicts between Final Form props and component props.
141212

213+
142214
---
143215

144216
### hideField
145217

146218
*bool*
147219

148-
When `true`, then this will be hidden by CSS. The value will be still registered and submitted.
220+
When the hideField is `true`, CSS hides this filed. The value will be still registered and submitted.
221+
149222

150223
---
151224

152225
### initializeOnMount
153226

154227
*bool*
155228

156-
When `true`, the value will be re-initialized every time the component is mounted. Read more [here](/schema/initialize-on-mount).
229+
When initializeOnMount is `true`, every time the component is mounted, the value will be re-initialized.
230+
231+
[Read more.](/schema/initialize-on-mount)
232+
157233

158234
---
159235

160236
### initialValue
161237

162238
*any*
163239

164-
Sets an initial value of the field. Read more [here](https://final-form.org/docs/react-final-form/types/FieldProps#initialvalue).
240+
Sets an initial value of the field.
241+
242+
[Read more.](https://final-form.org/docs/react-final-form/types/FieldProps#initialvalue)
243+
165244

166245
---
167246

168247
### resolveProps
169248

170249
*function (props, {meta, input}, formOptions) => props*
171250

172-
**Only applicable for fields connected to the form state.**
251+
**resolveProps is only applicable for fields that connected to the form state.**
252+
253+
The function of resolveProps can compute field properties from the current state of the field.
254+
255+
[Read more.](/schema/resolve-props)
173256

174-
A function allowing to compute field properties from the current state of the field. Read more [here](/schema/resolve-props).
175257

176258
---
177259

178260
### validate
179261

180262
*array*
181263

182-
`validate` array sets up validation of the field. It is an array of objects/functions:
264+
`validate` array sets up validation of the field. It is an array of the following objects or functions:
183265

184-
**object**
266+
<br/>
267+
268+
**Object**
185269

186270
```jsx
187271
{
@@ -190,19 +274,27 @@ A function allowing to compute field properties from the current state of the fi
190274
}
191275
```
192276

193-
Type is one of our provided validators: [required](/schema/required-validator), [length](/schema/length-validator), [URL](/schema/url-validator), [pattern](/schema/pattern-validator), [number value](/schema/number-value-validator). You can use [validatorTypes](/schema/constants#validatortypes) to prevent typos.
277+
Type is one of our provided validators:
278+
279+
[`REQUIRED`](/schema/required-validator), [`[MIN|MAX|EXACT]_LENGTH`](/schema/length-validator), [`URL`](/schema/url-validator), [`PATTERN`](/schema/pattern-validator) or [`[MIN|MAX]_NUMBER_VALUE`](/schema/number-value-validator).
194280

195-
Or you can implement your own via creating a [validator mapper](/mappers/validator-mapper).
281+
You can use [validatorTypes](/schema/constants#validatortypes) to prevent typos.
282+
283+
You can also implement your own validator by creating a [validator mapper](/mappers/validator-mapper).
284+
285+
<br/>
196286

197287
**Message**
198288

199-
All provided validators let you change the message via [message attribute](/schema/custom-validator-message) or you can set them [globally](/schema/overwriting-default-message).
289+
All provided validators allows you to change the message via [message attribute](/schema/custom-validator-message); you can also set the message [globally](/schema/overwriting-default-message).
200290

201291
By default, each validator provides a default message in English.
202292

203-
**function**
293+
<br/>
294+
295+
**Function**
204296

205-
You can pass a [custom function](/schema/custom-validator):
297+
You can pass a [custom function](/schema/custom-validator) as the following example:
206298

207299
```jsx
208300
{
@@ -213,11 +305,12 @@ You can pass a [custom function](/schema/custom-validator):
213305

214306
This also supports using [async functions](/schema/async-validator).
215307

308+
216309
---
217310

218311
### componentSpecificAttributes
219312

220-
Each component defines its required and optional props. Read more [here](/provided-mappers/component-api).
313+
Each component defines its required and optional props.
221314

222315
```jsx
223316
{
@@ -229,4 +322,6 @@ Each component defines its required and optional props. Read more [here](/provid
229322
}
230323
```
231324
325+
[Read more.](/provided-mappers/component-api)
326+
232327
</DocPage>

0 commit comments

Comments
 (0)