Skip to content

Commit 9d7236e

Browse files
zombieJzombieJ
authored
chore: Test legacy (#9)
* update test case * support perf validate test * update demo * adjust * update validate test * update father * add legacy values * support normalize * add prop legacy test * rest legacy * update eslint rule
1 parent 87d813e commit 9d7236e

24 files changed

+32178
-181
lines changed

‎.eslintrc.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
const base = require('father/template/.eslintrc.js');
1+
const base = require('@umijs/fabric/dist/eslint');
22

3-
base.rules['no-template-curly-in-string'] = 0;
4-
base.rules['promise/always-return'] = 0;
5-
base.rules['promise/catch-or-return'] = 0;
6-
base.rules['promise/no-callback-in-promise'] = 0;
7-
base.rules['prefer-promise-reject-errors'] = 0;
8-
9-
module.exports = base;
3+
module.exports = {
4+
...base,
5+
rules: {
6+
...base.rules,
7+
'no-template-curly-in-string': 0,
8+
'prefer-promise-reject-errors': 0,
9+
'react/no-array-index-key': 0,
10+
},
11+
};

‎.prettierrc‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎README.md‎

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -61,33 +61,35 @@ We use typescript to create the Type definition. You can view directly in IDE. B
6161

6262
## Form
6363

64-
| Prop | Description | Type | Default |
65-
| --- | --- | --- | --- |
66-
| fields | Control Form fields status. Only use when in Redux | [FieldData](#fielddata)[] | - |
67-
| form | Set form instance created by `useForm` | [FormInstance](#useform) | `Form.useForm()` |
68-
| initialValues | Initial value of Form | Object | - |
69-
| name | Config name with [FormProvider](#formprovider) | string | - |
70-
| validateMessages | Set validate message template | [ValidateMessages](#validatemessages) | - |
71-
| onFieldsChange | Trigger when any value of Field changed | (changedFields, allFields): void | - |
72-
| onValuesChange | Trigger when any value of Field changed | (changedValues, values): void | - |
64+
| Prop | Description | Type | Default |
65+
| ---------------- | -------------------------------------------------- | ------------------------------------- | ---------------- |
66+
| fields | Control Form fields status. Only use when in Redux | [FieldData](#fielddata)[] | - |
67+
| form | Set form instance created by `useForm` | [FormInstance](#useform) | `Form.useForm()` |
68+
| initialValues | Initial value of Form | Object | - |
69+
| name | Config name with [FormProvider](#formprovider) | string | - |
70+
| validateMessages | Set validate message template | [ValidateMessages](#validatemessages) | - |
71+
| onFieldsChange | Trigger when any value of Field changed | (changedFields, allFields): void | - |
72+
| onValuesChange | Trigger when any value of Field changed | (changedValues, values): void | - |
7373

7474
## Field
7575

76-
| Prop | Description | Type | Default |
77-
| --- | --- | --- | --- |
78-
| dependencies | Will re-render if dependencies changed | [NamePath](#namepath)[] | - |
79-
| name | Field name path | [NamePath](#namepath) | - |
80-
| rules | Validate rules | [Rule](#rule)[] | - |
81-
| shouldUpdate | Check if Field should update | (prevValues, nextValues): boolean | - |
82-
| trigger | Collect value update by event trigger | string | onChange |
83-
| validateTrigger | Config trigger point with rule validate | string \| string[] | onChange |
76+
| Prop | Description | Type | Default |
77+
| ----------------- | --------------------------------------- | ------------------------------------- | -------- |
78+
| dependencies | Will re-render if dependencies changed | [NamePath](#namepath)[] | - |
79+
| getValueFromEvent | Specify how to get value from event | (..args: any[]) => any | - |
80+
| name | Field name path | [NamePath](#namepath) | - |
81+
| normalize | Normalize value before update | (value, prevValue, prevValues) => any | - |
82+
| rules | Validate rules | [Rule](#rule)[] | - |
83+
| shouldUpdate | Check if Field should update | (prevValues, nextValues): boolean | - |
84+
| trigger | Collect value update by event trigger | string | onChange |
85+
| validateTrigger | Config trigger point with rule validate | string \| string[] | onChange |
8486

8587
## List
8688

87-
| Prop | Description | Type | Default |
88-
| --- | --- | --- | --- |
89-
| name | List field name path | [NamePath](#namepath)[] | - |
90-
| children | Render props for listing fields | (fields: { name: [NamePath](#namepath) }[], operations: [ListOperations](#listoperations)): ReactNode | - |
89+
| Prop | Description | Type | Default |
90+
| -------- | ------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
91+
| name | List field name path | [NamePath](#namepath)[] | - |
92+
| children | Render props for listing fields | (fields: { name: [NamePath](#namepath) }[], operations: [ListOperations](#listoperations)): ReactNode | - |
9193

9294
## useForm
9395

@@ -114,26 +116,26 @@ class Demo extends React.Component {
114116
}
115117
```
116118

117-
| Prop | Description | Type |
118-
| --- | --- | --- |
119-
| getFieldValue | Get field value by name path | (name: [NamePath](#namepath)) => any |
120-
| getFieldsValue | Get list of field values by name path list | (nameList?: [NamePath](#namepath)[]) => any |
121-
| getFieldError | Get field errors by name path | (name: [NamePath](#namepath)) => string[] |
122-
| getFieldsError | Get list of field errors by name path list | (nameList?: [NamePath](#namepath)[]) => FieldError[] |
123-
| isFieldsTouched | Check if list of fields are touched | (nameList?: [NamePath](#namepath)[]) => boolean |
124-
| isFieldTouched | Check if a field is touched | (name: [NamePath](#namepath)) => boolean |
125-
| isFieldValidating | Check if a field is validating | (name: [NamePath](#namepath)) => boolean |
126-
| resetFields | Reset fields status | (fields?: [NamePath](#namepath)[]) => void |
127-
| setFields | Set fields status | (fields: FieldData[]) => void |
128-
| setFieldsValue | Set fields value | (values) => void |
129-
| validateFields | Trigger fields to validate | (nameList?: [NamePath](#namepath)[], options?: ValidateOptions) => Promise |
119+
| Prop | Description | Type |
120+
| ----------------- | ------------------------------------------ | -------------------------------------------------------------------------- |
121+
| getFieldValue | Get field value by name path | (name: [NamePath](#namepath)) => any |
122+
| getFieldsValue | Get list of field values by name path list | (nameList?: [NamePath](#namepath)[]) => any |
123+
| getFieldError | Get field errors by name path | (name: [NamePath](#namepath)) => string[] |
124+
| getFieldsError | Get list of field errors by name path list | (nameList?: [NamePath](#namepath)[]) => FieldError[] |
125+
| isFieldsTouched | Check if list of fields are touched | (nameList?: [NamePath](#namepath)[]) => boolean |
126+
| isFieldTouched | Check if a field is touched | (name: [NamePath](#namepath)) => boolean |
127+
| isFieldValidating | Check if a field is validating | (name: [NamePath](#namepath)) => boolean |
128+
| resetFields | Reset fields status | (fields?: [NamePath](#namepath)[]) => void |
129+
| setFields | Set fields status | (fields: FieldData[]) => void |
130+
| setFieldsValue | Set fields value | (values) => void |
131+
| validateFields | Trigger fields to validate | (nameList?: [NamePath](#namepath)[], options?: ValidateOptions) => Promise |
130132

131133
## FormProvider
132134

133-
| Prop | Description | Type | Default |
134-
| --- | --- | --- | --- |
135-
| validateMessages | Config global `validateMessages` template | [ValidateMessages](#validatemessages) | - |
136-
| onFormChange | Trigger by named form fields change | (name, { changedFields, forms }) => void | - |
135+
| Prop | Description | Type | Default |
136+
| ---------------- | ----------------------------------------- | ---------------------------------------- | ------- |
137+
| validateMessages | Config global `validateMessages` template | [ValidateMessages](#validatemessages) | - |
138+
| onFormChange | Trigger by named form fields change | (name, { changedFields, forms }) => void | - |
137139

138140
## Interface
139141

@@ -155,20 +157,20 @@ class Demo extends React.Component {
155157

156158
### Rule
157159

158-
| Prop | Type |
159-
| --- | --- |
160-
| enum | any[] |
161-
| len | number |
162-
| max | number |
163-
| message | string |
164-
| min | number |
165-
| pattern | RegExp |
166-
| required | boolean |
167-
| transform | (value) => any |
168-
| type | string |
169-
| validator | ([rule](#rule), value, callback: (error?: string) => void, [form](#useform)) => Promise \| void |
170-
| whitespace | boolean |
171-
| validateTrigger | string \| string[] |
160+
| Prop | Type |
161+
| --------------- | ----------------------------------------------------------------------------------------------- |
162+
| enum | any[] |
163+
| len | number |
164+
| max | number |
165+
| message | string |
166+
| min | number |
167+
| pattern | RegExp |
168+
| required | boolean |
169+
| transform | (value) => any |
170+
| type | string |
171+
| validator | ([rule](#rule), value, callback: (error?: string) => void, [form](#useform)) => Promise \| void |
172+
| whitespace | boolean |
173+
| validateTrigger | string \| string[] |
172174

173175
#### validator
174176

@@ -199,6 +201,12 @@ Validate Messages provides a list of error template. You can ref [here](https://
199201

200202
`rc-field-form` is try to keep sync with `rc-form` in api level, but there still have something to change:
201203

204+
## 🔥 Field will not keep snyc with `initialValues` when un-touched
205+
206+
In `rc-form`, field value will get from `initialValues` if user not operate on it.
207+
It's a bug but user use as a feature which makes fixing will be a breaking change and we have to keep it.
208+
In Field Form, this bug will not exist anymore. If you want to change a field value, use `setFieldsValue` instead.
209+
202210
## 🔥 Remove Field will not clean up related value
203211

204212
We do lots of logic to clean up the value when Field removed before. But with user feedback, remove exist value increase the additional work to keep value back with conditional field.

‎examples/StateForm-renderProps.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default class Demo extends React.Component {
1616
<h3>Render Props ({list.length} inputs)</h3>
1717
<p>Render Props is easy to use but bad performance</p>
1818
<StateForm>
19-
{(store) => {
19+
{(values) => {
2020
return (
2121
<React.Fragment>
22-
{JSON.stringify(store, null, 2)}
22+
{JSON.stringify(values, null, 2)}
2323
<Field name="field_1">
2424
<Input placeholder="Field 1" />
2525
</Field>
@@ -31,7 +31,7 @@ export default class Demo extends React.Component {
3131
</Field>
3232

3333
<h4>Show additional field when field 1 is `222`</h4>
34-
{store.field_1 === '222' ? (
34+
{values.field_1 === '222' ? (
3535
<Field name="secret">
3636
<Input placeholder="Field Secret!" />
3737
</Field>

‎examples/StateForm-validate-perf.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ export default class Demo extends React.Component {
4949
dependencies={['password']}
5050
rules={[
5151
{ required: true },
52-
{
53-
async validator(_, value, __, { getFieldValue }) {
52+
({ getFieldValue }) => ({
53+
async validator(_, value) {
5454
if (getFieldValue('password') !== value) {
5555
return Promise.reject('password2 is not same as password');
5656
}
5757
return Promise.resolve();
5858
},
59-
},
59+
}),
6060
]}
6161
>
6262
<Input placeholder="password 2" />
@@ -67,6 +67,7 @@ export default class Demo extends React.Component {
6767
label="Full of rules"
6868
rules={[
6969
{ required: true },
70+
{ required: true, message: <h1>我是 ReactNode</h1> },
7071
{ type: 'number' },
7172
{ type: 'enum', enum: ['aaa', 'bbb'] },
7273
{ type: 'date' },

‎examples/StateForm-validate.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ import Input from './components/Input';
77
const { Field } = StateForm;
88

99
const Error = ({ children }) => (
10-
<ul style={{ color: 'red' }}>{children.map((error) => <li>{error}</li>)}</ul>
10+
<ul style={{ color: 'red' }}>
11+
{children.map(error => (
12+
<li>{error}</li>
13+
))}
14+
</ul>
1115
);
1216

1317
const FieldState = ({ form, name }) => {
@@ -23,7 +27,7 @@ const FieldState = ({ form, name }) => {
2327
};
2428

2529
export default class Demo extends React.Component {
26-
onFinish = (values) => {
30+
onFinish = values => {
2731
console.log('Finish:', values);
2832
};
2933

@@ -43,7 +47,7 @@ export default class Demo extends React.Component {
4347

4448
return (
4549
<React.Fragment>
46-
<Field name="username" rules={[ { required: true } ]}>
50+
<Field name="username" rules={[{ required: true }]}>
4751
<Input
4852
placeholder="Username"
4953
onChange={({ target: { value } }) => {
@@ -58,16 +62,16 @@ export default class Demo extends React.Component {
5862
name="password"
5963
rules={[
6064
{ required: true },
61-
{
62-
validator(_, __, callback, context) {
65+
context => ({
66+
validator(_, __, callback) {
6367
if (context.isFieldTouched('password2')) {
64-
context.validateFields([ 'password2' ]);
68+
context.validateFields(['password2']);
6569
callback();
6670
return;
6771
}
6872
callback();
6973
},
70-
},
74+
}),
7175
]}
7276
>
7377
<Input placeholder="Password" />
@@ -79,23 +83,23 @@ export default class Demo extends React.Component {
7983
name="password2"
8084
rules={[
8185
{ required: true },
82-
{
83-
validator(rule, value, callback, context) {
86+
context => ({
87+
validator(rule, value, callback) {
8488
const { password } = context.getFieldsValue();
8589
if (password !== value) {
8690
callback('Not Same as password1!!!');
8791
}
8892
callback();
8993
},
90-
},
94+
}),
9195
]}
9296
>
9397
<Input placeholder="Password 2" />
9498
</Field>
9599
<FieldState form={form} name="password2" />
96100
<Error>{password2Error}</Error>
97101

98-
<Field name="renderProps" rules={[ { required: true } ]}>
102+
<Field name="renderProps" rules={[{ required: true }]}>
99103
{(control, meta) => {
100104
return (
101105
<div>
@@ -110,7 +114,7 @@ export default class Demo extends React.Component {
110114

111115
<Field
112116
name="validateTrigger"
113-
validateTrigger={[ 'onSubmit', 'onChange' ]}
117+
validateTrigger={['onSubmit', 'onChange']}
114118
rules={[
115119
{ required: true, validateTrigger: 'onSubmit' },
116120
{

‎examples/components/LabelField.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const { Field } = StateForm;
66

77
const Error = ({ children }) => (
88
<ul style={{ color: 'red' }}>
9-
{children.map((error: string) => (
10-
<li key={error}>{error}</li>
9+
{children.map((error: React.ReactNode, index: number) => (
10+
<li key={index}>{error}</li>
1111
))}
1212
</ul>
1313
);

0 commit comments

Comments
 (0)