this.formRef = inst} />
159 | this.formRef // => The instance of Form
160 | ```
161 |
162 | ## (WrappedComponent: React.Component) => React.Component
163 |
164 | The returned function of createForm(). It will pass an object as prop `form` with the following members to WrappedComponent:
165 |
166 | ### getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }
167 |
168 | Will create props which can be set on a input/InputComponent which support value and onChange interface.
169 |
170 | After set, this will create a binding with this input.
171 |
172 | ```jsx
173 |
176 | ```
177 |
178 | #### name: String
179 |
180 | This input's unique name.
181 |
182 | #### option: Object
183 |
184 | | Option | Description | Type | Default |
185 | |-----------|------------------------------------------|------------|---------|
186 | | option.valuePropName | Prop name of component's value field, eg: checkbox should be set to `checked` ... | String | 'value' |
187 | | option.getValueProps | Get the component props according to field value. | (value): Object | (value) => ({ value }) |
188 | | option.getValueFromEvent | Specify how to get value from event. | (e): any | See below |
189 | | option.initialValue | Initial value of current component. | any | - |
190 | | option.normalize | Return normalized value. | (value, prev, all): Object | - |
191 | | option.trigger | Event which is listened to collect form data. | String | 'onChange' |
192 | | option.validateTrigger | Event which is listened to validate. Set to falsy to only validate when call props.validateFields. | String|String[] | 'onChange' |
193 | | option.rules | Validator rules. see: [async-validator](https://github.com/yiminghe/async-validator) | Object[] | - |
194 | | option.validateFirst | Whether stop validate on first rule of error for this field. | boolean | false |
195 | | option.validate | | Object[] | - |
196 | | option.validate[n].trigger | Event which is listened to validate. Set to falsy to only validate when call props.validateFields. | String|String[] | 'onChange' |
197 | | option.validate[n].rules | Validator rules. see: [async-validator](https://github.com/yiminghe/async-validator) | Object[] | - |
198 | | option.hidden | Ignore current field while validating or gettting fields | boolean | false |
199 | | option.preserve | Whether to preserve the value. That will remain the value when the field be unmounted and be mounted again | boolean | false |
200 |
201 | ##### Default value of `getValueFromEvent`
202 |
203 | ```js
204 | function defaultGetValueFromEvent(e) {
205 | if (!e || !e.target) {
206 | return e;
207 | }
208 | const { target } = e;
209 | return target.type === 'checkbox' ? target.checked : target.value;
210 | }
211 | ```
212 |
213 | ##### Tips
214 |
215 | ```js
216 | {
217 | validateTrigger: 'onBlur',
218 | rules: [{required: true}],
219 | }
220 | // is the shorthand of
221 | {
222 | validate: [{
223 | trigger: 'onBlur',
224 | rules: [{required: true}],
225 | }],
226 | }
227 | ```
228 |
229 | ### getFieldDecorator(name:String, option: Object) => (React.Node) => React.Node
230 |
231 | Similar to `getFieldProps`, but add some helper warnings and you can write onXX directly inside React.Node props:
232 |
233 | ```jsx
234 |
237 | ```
238 |
239 | ### getFieldsValue([fieldNames: String[]])
240 |
241 | Get fields value by fieldNames.
242 |
243 | ### getFieldValue(fieldName: String)
244 |
245 | Get field value by fieldName.
246 |
247 | ### getFieldInstance(fieldName: String)
248 |
249 | Get field react public instance by fieldName.
250 |
251 | ### setFieldsValue(obj: Object)
252 |
253 | Set fields value by kv object.
254 |
255 | ### setFieldsInitialValue(obj: Object)
256 |
257 | Set fields initialValue by kv object. use for reset and initial display/value.
258 |
259 | ### setFields(obj: Object)
260 |
261 | Set fields by kv object. each field can contain errors and value member.
262 |
263 | ### validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void)
264 |
265 | Validate and get fields value by fieldNames.
266 |
267 | options is the same as validate method of [async-validator](https://github.com/yiminghe/async-validator).
268 | And add `force`.
269 |
270 | #### options.force: Boolean
271 |
272 | Defaults to false. Whether to validate fields which have been validated(caused by validateTrigger).
273 |
274 | ### getFieldsError(names): Object{ [name]: String[] }
275 |
276 | Get inputs' validate errors.
277 |
278 | ### getFieldError(name): String[]
279 |
280 | Get input's validate errors.
281 |
282 | ### isFieldValidating(name: String): Bool
283 |
284 | Whether this input is validating.
285 |
286 | ### isFieldsValidating(names: String[]): Bool
287 |
288 | Whether one of the inputs is validating.
289 |
290 | ### isFieldTouched(name: String): Bool
291 |
292 | Whether this input's value had been changed by user.
293 |
294 | ### isFieldsTouched(names: String[]): Bool
295 |
296 | Whether one of the inputs' values had been changed by user.
297 |
298 | ### resetFields([names: String[]])
299 |
300 | Reset specified inputs. Defaults to all.
301 |
302 | ### isSubmitting(): Bool (Deprecated)
303 |
304 | Whether the form is submitting.
305 |
306 | ### submit(callback: Function) (Deprecated)
307 |
308 | Cause isSubmitting to return true, after callback called, isSubmitting return false.
309 |
310 |
311 | ## rc-form/lib/createDOMForm(option): Function
312 |
313 | createDOMForm enhancement, support props.form.validateFieldsAndScroll
314 |
315 | ### validateFieldsAndScroll([fieldNames: String[]], [options: Object], callback: (errors, values) => void)
316 |
317 | props.form.validateFields enhancement, support scroll to the first invalid form field, `scroll` is the same as [dom-scroll-into-view's function parameter `config`](https://github.com/yiminghe/dom-scroll-into-view#function-parameter).
318 |
319 | #### options.container: HTMLElement
320 |
321 | Defaults to first scrollable container of form field(until document).
322 |
323 |
324 | ## Notes
325 |
326 | - Do not use stateless function component inside Form component: https://github.com/facebook/react/pull/6534
327 |
328 | - you can not set same prop name as the value of validateTrigger/trigger for getFieldProps
329 |
330 | ```js
331 |
333 | })}>
334 | ```
335 |
336 | - you can not use ref prop for getFieldProps
337 |
338 | ```js
339 |
340 |
341 | this.props.form.getFieldInstance('ref') // use this to get ref
342 | ```
343 |
344 | or
345 |
346 | ```js
347 | (only allow function)
349 | })} />
350 | ```
351 |
352 | ## Test Case
353 |
354 | ```
355 | npm test
356 | npm run chrome-test
357 | ```
358 |
359 | ## Coverage
360 |
361 | ```
362 | npm run coverage
363 | ```
364 |
365 | open coverage/ dir
366 |
367 | ## License
368 |
369 | rc-form is released under the MIT license.
370 |
--------------------------------------------------------------------------------
/examples/across-router.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-component/form/f02b478c59c178ea9ee28cca3326ad1c4ed37f02/examples/across-router.html
--------------------------------------------------------------------------------
/examples/across-router.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0 */
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import ReactDOM from 'react-dom';
6 | import { createForm, formShape } from 'rc-form';
7 | import { Router, Route, hashHistory } from 'react-router';
8 | import { regionStyle } from './styles';
9 |
10 | class ChildForm extends React.Component {
11 | static propTypes = {
12 | initialValue: PropTypes.object,
13 | form: formShape,
14 | onDestroy: PropTypes.func,
15 | };
16 | componentWillUnmount() {
17 | this.props.onDestroy(this.props.form.getFieldsValue());
18 | }
19 | onClick = () => {
20 | window.history.back();
21 | }
22 | render() {
23 | const { getFieldProps } = this.props.form;
24 | return (
34 |
child form
35 |
36 | name:
37 |
41 |
42 |
43 |
44 |
45 |
{value.name}
:
64 | please select
;
65 | return (
66 | {valueEl}
67 | {childForm ? React.cloneElement(childForm, {
68 | onDestroy: this.props.onChange,
69 | initialValue: value || {},
70 | }) : null}
71 |
);
72 | }
73 | }
74 |
75 | class ParentForm extends React.Component {
76 | static propTypes = {
77 | initialValue: PropTypes.object,
78 | form: formShape,
79 | children: PropTypes.any,
80 | };
81 | onClick = () => {
82 | console.log(this.props.form.getFieldsValue());
83 | }
84 | render() {
85 | const { getFieldProps } = this.props.form;
86 | return (
87 |
parent form
88 |
89 | family:
90 |
91 |
94 |
95 |
96 |
97 |
98 |
110 |
111 |
112 |
113 |
114 |
115 |
), document.getElementById('__react-content'));
116 |
--------------------------------------------------------------------------------
/examples/async-init.html:
--------------------------------------------------------------------------------
1 | placeholder
--------------------------------------------------------------------------------
/examples/async-init.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0 */
2 |
3 | import { createForm, formShape } from 'rc-form';
4 | import React, { Component } from 'react';
5 | import ReactDOM from 'react-dom';
6 | import { regionStyle, errorStyle } from './styles';
7 |
8 | class Email extends React.Component {
9 | static propTypes = {
10 | form: formShape,
11 | };
12 |
13 | checkSpecial = (rule, value, callback) => {
14 | setTimeout(() => {
15 | if (value === 'yiminghe@gmail.com') {
16 | callback('can not be!');
17 | } else {
18 | callback();
19 | }
20 | }, 1000);
21 | }
22 |
23 | render() {
24 | const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
25 | const errors = getFieldError('email');
26 | return (
27 |
email validate onBlur
28 |
29 |
45 |
46 | {errors ? errors.join(',') : null}
47 |
48 |
49 | {isFieldValidating('email') ? 'validating' : null}
50 |
51 |
106 |
async init field
107 |
116 |
176 |
177 |
178 |
179 |
180 | , document.getElementById('__react-content'));
181 |
--------------------------------------------------------------------------------
/examples/dynamic.html:
--------------------------------------------------------------------------------
1 | placeholder
--------------------------------------------------------------------------------
/examples/dynamic.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0, react/prefer-stateless-function:0 */
2 |
3 | import { createForm, formShape } from 'rc-form';
4 | import React, { Component } from 'react';
5 | import PropTypes from 'prop-types';
6 | import ReactDOM from 'react-dom';
7 | import { regionStyle, errorStyle } from './styles';
8 |
9 | function Email(props) {
10 | const { hidden, form } = props;
11 | const { getFieldProps, getFieldError, isFieldValidating } = form;
12 | const errors = getFieldError('email');
13 | const style = {
14 | ...regionStyle,
15 | display: hidden ? 'none' : '',
16 | };
17 | return (
18 |
email:
19 |
32 |
33 | {errors ?
{errors.join(',')}
: null}
34 |
35 | {isFieldValidating('email') ?
validating
: null}
36 |
53 |
user:
54 |
63 |
64 | {errors ?
{errors.join(',')}
: null}
65 |
66 | {isFieldValidating('user') ?
validating
: null}
67 |
62 |
attachment:
63 |
64 |
70 |
71 |
72 | {(errors) ? errors.join(',') : null}
73 |
74 |
75 |
84 |
input[type="file"]
85 |
86 | );
87 | }
88 | }
89 |
90 | ReactDOM.render(, document.getElementById('__react-content'));
91 |
--------------------------------------------------------------------------------
/examples/getFieldDecorator.html:
--------------------------------------------------------------------------------
1 | placeholder
2 |
--------------------------------------------------------------------------------
/examples/getFieldDecorator.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0 */
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { createForm, formShape } from 'rc-form';
6 |
7 | class Form extends React.Component {
8 | static propTypes = {
9 | form: formShape,
10 | };
11 |
12 | componentWillMount() {
13 | this.nameDecorator = this.props.form.getFieldDecorator('name', {
14 | initialValue: '',
15 | rules: [{
16 | required: true,
17 | message: 'What\'s your name?',
18 | }],
19 | });
20 | }
21 |
22 | onSubmit = (e) => {
23 | e.preventDefault();
24 | this.props.form.validateFields((error, values) => {
25 | if (!error) {
26 | console.log('ok', values);
27 | } else {
28 | console.log('error', error, values);
29 | }
30 | });
31 | };
32 |
33 | onChange = (e) => {
34 | console.log(e.target.value);
35 | }
36 |
37 | render() {
38 | const { getFieldError } = this.props.form;
39 |
40 | return (
41 |
52 | );
53 | }
54 | }
55 |
56 | const WrappedForm = createForm()(Form);
57 | ReactDOM.render(, document.getElementById('__react-content'));
58 |
--------------------------------------------------------------------------------
/examples/input-array.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-component/form/f02b478c59c178ea9ee28cca3326ad1c4ed37f02/examples/input-array.html
--------------------------------------------------------------------------------
/examples/input-array.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console:0, react/jsx-no-bind:0 */
2 |
3 | import { createForm, formShape } from 'rc-form';
4 | import React from 'react';
5 | import ReactDOM from 'react-dom';
6 | import { regionStyle } from './styles';
7 |
8 | let uuid = 0;
9 |
10 |
11 | class Form extends React.Component {
12 | static propTypes = {
13 | form: formShape,
14 | };
15 | remove = (k) => {
16 | const { form } = this.props;
17 | // can use data-binding to get
18 | let keys = form.getFieldValue('keys');
19 | keys = keys.filter((key) => {
20 | return key !== k;
21 | });
22 | // can use data-binding to set
23 | form.setFieldsValue({
24 | keys,
25 | });
26 | }
27 | add = () => {
28 | uuid++;
29 | const { form } = this.props;
30 | // can use data-binding to get
31 | let keys = form.getFieldValue('keys');
32 | keys = keys.concat(uuid);
33 | // can use data-binding to set
34 | // important! notify form to detect changes
35 | form.setFieldsValue({
36 | keys,
37 | });
38 | }
39 | submit = (e) => {
40 | e.preventDefault();
41 | console.log(this.props.form.getFieldsValue());
42 | }
43 | render() {
44 | const { getFieldProps, getFieldValue } = this.props.form;
45 | getFieldProps('keys', {
46 | initialValue: [],
47 | });
48 | const inputs = getFieldValue('keys').map((k) => {
49 | return ();
54 | });
55 | return (
56 | {inputs}
57 |
58 |
59 |
60 |
61 |
62 |
49 |
modal
50 |
59 |
78 |
79 |
80 |
81 |
82 |
192 |
setFieldsValue
193 |
194 | );
195 | }
196 | }
197 |
198 | ReactDOM.render(, document.getElementById('__react-content'));
199 |
--------------------------------------------------------------------------------
/examples/normalize.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-component/form/f02b478c59c178ea9ee28cca3326ad1c4ed37f02/examples/normalize.html
--------------------------------------------------------------------------------
/examples/normalize.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0 */
2 |
3 | import { createForm, formShape } from 'rc-form';
4 | import React, { Component } from 'react';
5 | import ReactDOM from 'react-dom';
6 | import 'antd/dist/antd.css';
7 | import { regionStyle, errorStyle } from './styles';
8 |
9 | class CustomInput extends React.Component {
10 | static propTypes = {
11 | form: formShape,
12 | };
13 | state = {};
14 | checkUpper = (rule, value, callback) => {
15 | if (value !== value.toUpperCase()) {
16 | callback(new Error('need to be upper!'));
17 | } else {
18 | callback();
19 | }
20 | }
21 | toUpper = (v, prev) => {
22 | if (v === prev) {
23 | return v;
24 | }
25 | return v.toUpperCase();
26 | }
27 | render() {
28 | const { getFieldProps, getFieldError } = this.props.form;
29 | const errors = getFieldError('upper');
30 | return (
31 |
upper normalize
32 |
33 |
40 |
41 |
42 | {(errors) ? errors.join(',') : null}
43 |
44 |
77 |
min:
90 |
91 |
max:
104 |
105 |
128 |
normalize
129 |
138 |
16 |
email sync validate
17 |
18 | 错误的 email 格式,
24 | },
25 | ],
26 | })}
27 | />
28 |
29 | {errors}
30 |
31 |
32 | {isFieldValidating('email') ? 'validating' : null}
33 |
34 |
60 |
* user async validate
61 |
62 |
75 |
76 | {(errors) ? errors.join(',') : null}
77 |
78 |
79 | {isFieldValidating('user') ? 'validating' : null}
80 |
81 |
89 |
* custom select sync validate
90 |
104 |
105 | {(errors) ? errors.join(',') : null}
106 |
107 |
108 | {isFieldValidating('select') ? 'validating' : null}
109 |
110 |
121 |
* DateInput sync validate
122 |
123 |
134 |
135 |
136 | {(errors) ? errors.join(',') : null}
137 |
138 |
162 |
number input
163 |
164 |
173 |
174 |
175 | {(errors) ? errors.join(',') : null}
176 |
177 |
210 |
overview
211 |
245 |
18 |
has email?
19 |
20 |
25 |
26 |
43 |
email:
44 |
45 |
52 |
53 |
68 |
69 |
70 |
71 |
72 |
73 |
82 |
parallel form
83 |
84 | );
85 | }
86 | }
87 |
88 | ReactDOM.render(, document.getElementById('__react-content'));
89 |
--------------------------------------------------------------------------------
/examples/promise-validate.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-component/form/f02b478c59c178ea9ee28cca3326ad1c4ed37f02/examples/promise-validate.html
--------------------------------------------------------------------------------
/examples/promise-validate.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console:0 */
2 |
3 | import { createForm, formShape } from 'rc-form';
4 | import React from 'react';
5 | import ReactDOM from 'react-dom';
6 |
7 | class Form extends React.Component {
8 | static propTypes = {
9 | form: formShape,
10 | };
11 |
12 | handleSubmit = (e) => {
13 | e.preventDefault();
14 | const { validateFields } = this.props.form;
15 | validateFields()
16 | .then(console.log)
17 | .catch(console.error);
18 | }
19 |
20 | render() {
21 | const { getFieldDecorator } = this.props.form;
22 | return (
23 |
31 | );
32 | }
33 | }
34 |
35 | const NewForm = createForm()(Form);
36 |
37 | ReactDOM.render(, document.getElementById('__react-content'));
38 |
--------------------------------------------------------------------------------
/examples/react-native/App.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0, react/no-multi-comp:0 */
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import {
6 | StyleSheet,
7 | Button,
8 | Dimensions,
9 | TextInput,
10 | Text,
11 | View,
12 | Alert,
13 | } from 'react-native';
14 |
15 | import { createForm } from 'rc-form';
16 |
17 | const { width } = Dimensions.get('window');
18 | const styles = StyleSheet.create({
19 | container: {
20 | flex: 1,
21 | backgroundColor: '#fff',
22 | alignItems: 'center',
23 | padding: 50,
24 | justifyContent: 'center',
25 | },
26 | inputView: {
27 | width: width - 100,
28 | paddingLeft: 10,
29 | },
30 | input: {
31 | height: 42,
32 | fontSize: 16,
33 | },
34 | errorinfo: {
35 | marginTop: 10,
36 | },
37 | errorinfoText: {
38 | color: 'red',
39 | },
40 | });
41 |
42 | class FromItem extends React.PureComponent {
43 | static propTypes = {
44 | label: PropTypes.string,
45 | onChange: PropTypes.func,
46 | value: PropTypes.string,
47 | error: PropTypes.array,
48 | };
49 | getError = error => {
50 | if (error) {
51 | return error.map(info => {
52 | return (
53 |
54 | {info}
55 |
56 | );
57 | });
58 | }
59 | return null;
60 | };
61 | render() {
62 | const { label, onChange, value, error } = this.props;
63 | return (
64 |
65 |
74 | {this.getError(error)}
75 |
76 | );
77 | }
78 | }
79 |
80 | class App extends React.Component {
81 | static propTypes = {
82 | form: PropTypes.object.isRequired,
83 | };
84 |
85 | checkUserNameOne = (value, callback) => {
86 | setTimeout(() => {
87 | if (value === '15188888888') {
88 | callback('手机号已经被注册');
89 | } else {
90 | callback();
91 | }
92 | }, 2000);
93 | };
94 | submit = () => {
95 | this.props.form.validateFields((error) => {
96 | if (error) return;
97 | Alert('通过了所有验证'); // eslint-disable-line new-cap
98 | });
99 | };
100 | render() {
101 | const { getFieldDecorator, getFieldError } = this.props.form;
102 | return (
103 |
104 | 简单的手机号验证
105 | {getFieldDecorator('username', {
106 | validateFirst: true,
107 | rules: [
108 | { required: true, message: '请输入手机号!' },
109 | {
110 | pattern: /^1\d{10}$/,
111 | message: '请输入正确的手机号!',
112 | },
113 | {
114 | validator: (rule, value, callback) => {
115 | this.checkUserNameOne(value, callback);
116 | },
117 | message: '手机号已经被注册!',
118 | },
119 | ],
120 | })(
121 |
126 | )}
127 |
128 |
129 | );
130 | }
131 | }
132 |
133 | export default createForm()(App);
134 |
--------------------------------------------------------------------------------
/examples/react-native/expo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-component/form/f02b478c59c178ea9ee28cca3326ad1c4ed37f02/examples/react-native/expo.jpg
--------------------------------------------------------------------------------
/examples/redux.html:
--------------------------------------------------------------------------------
1 | placeholder
--------------------------------------------------------------------------------
/examples/redux.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0, react/prefer-stateless-function:0 */
2 |
3 | import { createForm, createFormField, formShape } from 'rc-form';
4 | import React, { Component } from 'react';
5 | import PropTypes from 'prop-types';
6 | import { combineReducers, createStore } from 'redux';
7 | import { Provider, connect } from 'react-redux';
8 | import ReactDOM from 'react-dom';
9 | import { regionStyle, errorStyle } from './styles';
10 |
11 | function form(state = {
12 | email: {
13 | value: 'x@gmail.com',
14 | },
15 | }, action) {
16 | switch (action.type) {
17 | case 'save_fields':
18 | return {
19 | ...state,
20 | ...action.payload,
21 | };
22 | default:
23 | return state;
24 | }
25 | }
26 |
27 | class Form extends Component {
28 | static propTypes = {
29 | form: formShape,
30 | }
31 |
32 | render() {
33 | const { getFieldProps, getFieldError } = this.props.form;
34 | const errors = getFieldError('email');
35 | return (
36 |
email:
37 |
38 |
44 |
45 | {(errors) ? errors.join(',') : null}
46 |
47 |
69 |
70 | email: {email && email.value}
71 |
72 |
73 |
113 |
integrate with redux
114 |
115 |
116 |
117 | );
118 | }
119 | }
120 |
121 | ReactDOM.render(, document.getElementById('__react-content'));
122 |
--------------------------------------------------------------------------------
/examples/server-validate.html:
--------------------------------------------------------------------------------
1 | placeholder
--------------------------------------------------------------------------------
/examples/server-validate.js:
--------------------------------------------------------------------------------
1 | /* eslint react/no-multi-comp:0, no-console:0, react/prefer-stateless-function:0 */
2 |
3 | import { createForm, formShape } from 'rc-form';
4 | import React, { Component } from 'react';
5 | import ReactDOM from 'react-dom';
6 | import { regionStyle, errorStyle } from './styles';
7 |
8 | function Email(props) {
9 | const { getFieldProps, getFieldError } = props.form;
10 | const errors = getFieldError('email');
11 | return (
12 |
email sync validate
13 |
14 |
26 |
27 | {errors ? errors.join(',') : null}
28 |
29 |
44 |
user async validate
45 |
46 |
52 |
53 |
54 | {(errors) ? errors.join(',') : null}
55 |
56 |
90 |
setFields
91 |
100 |
28 |
email:
29 |
30 |
36 |
37 |
38 | {(errors) ? errors.join(',') : null}
39 |
40 |
41 |
42 |
51 |
setFieldsValue
52 |
53 | );
54 | }
55 | }
56 |
57 | ReactDOM.render(, document.getElementById('__react-content'));
58 |
--------------------------------------------------------------------------------
/examples/start-end-date.html:
--------------------------------------------------------------------------------
1 | placeholder
--------------------------------------------------------------------------------
/examples/start-end-date.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console:0 */
2 |
3 | import React, { Component } from 'react';
4 | import ReactDOM from 'react-dom';
5 | import DatePicker from 'antd/lib/date-picker';
6 | import { formShape } from 'rc-form';
7 | import 'antd/dist/antd.css';
8 | import createDOMForm from 'rc-form/src/createDOMForm';
9 | import { regionStyle, errorStyle } from './styles';
10 |
11 | class Form extends Component {
12 | static propTypes = {
13 | form: formShape,
14 | };
15 |
16 | onSubmit = (e) => {
17 | console.log('submit');
18 | e.preventDefault();
19 | this.props.form.validateFieldsAndScroll((error, values) => {
20 | if (!error) {
21 | console.log('ok', values);
22 | } else {
23 | console.log('error', error, values);
24 | }
25 | });
26 | };
27 |
28 | reset = (e) => {
29 | e.preventDefault();
30 | this.props.form.resetFields();
31 | };
32 |
33 | checkStart = (rule, value, callback) => {
34 | const { validateFields } = this.props.form;
35 | validateFields(['end'], {
36 | force: true,
37 | });
38 | callback();
39 | };
40 |
41 | checkEnd = (rule, value, callback) => {
42 | const end = value;
43 | const { getFieldValue } = this.props.form;
44 | const start = getFieldValue('start');
45 | if (!end || !start) {
46 | callback('please select both start and end time');
47 | } else if (end.valueOf() < start.valueOf()) {
48 | callback('start time should be less than end time');
49 | } else {
50 | callback();
51 | }
52 | };
53 |
54 | render() {
55 | const { form } = this.props;
56 | const { getFieldProps, getFieldError } = form;
57 | return (
58 |
startTime and endTime validation
59 |
90 |
35 |
custom select sync validate
36 |
37 |
60 |
61 |
62 | {(errors) ? errors.join(',') :
63 |
68 | 1
69 | }
70 |
71 |
72 | {isFieldValidating('select') ? 'validating' :
77 | 1
78 | }
79 |
80 |
103 |
suggest
104 |
111 |
13 |
email sync validate
14 |
15 |
29 |
30 |
31 | {errors ? errors.join(',') : null}
32 |
33 |
34 | {isFieldValidating('email') ? 'validating' : null}
35 |
36 |
62 |
user async validate
63 |
64 |
77 |
78 |
79 | {(errors) ? errors.join(',') : null}
80 |
81 |
82 | {isFieldValidating('user') ? 'validating' : null}
83 |
84 |
115 |
validateFirst
116 |
127 |
12 |
email validate onBlur && onChange
13 |
14 |
29 |
30 |
31 | {errors ? errors.join(',') : null}
32 |
33 |
34 | {isFieldValidating('email') ? 'validating' : null}
35 |
36 |
51 |
user validate on submit
52 |
53 |
66 |
67 |
68 | {(errors) ? errors.join(',') : null}
69 |
70 |
71 | {isFieldValidating('user') ? 'validating' : null}
72 |
73 |
96 |
use validateTrigger config
97 |
106 |
24 |
25 |
30 |
31 | );
32 | }
33 | }
34 |
35 | Test = createForm({
36 | withRef: true,
37 | })(Test);
38 |
39 | describe('Async Validation', () => {
40 | let container;
41 | let component;
42 | let form;
43 |
44 | beforeEach(() => {
45 | container = document.createElement('div');
46 | document.body.appendChild(container);
47 | component = ReactDOM.render(, container);
48 | component = component.refs.wrappedComponent;
49 | form = component.props.form;
50 | });
51 |
52 | afterEach(() => {
53 | ReactDOM.unmountComponentAtNode(container);
54 | document.body.removeChild(container);
55 | });
56 |
57 | it('works', (done) => {
58 | async.series([
59 | (callback) => {
60 | Simulate.change(form.getFieldInstance('async'));
61 | expect(form.getFieldValue('async')).toBe('');
62 | expect(form.getFieldError('async')).toBeFalsy();
63 | expect(form.isFieldValidating('async')).toBe(true);
64 | expect(form.isFieldsValidating()).toBe(true);
65 | setTimeout(callback, 200);
66 | },
67 | (callback) => {
68 | expect(form.getFieldError('async')).toEqual(['must be 1']);
69 | expect(form.isFieldValidating('async')).toBe(false);
70 | expect(form.isFieldsValidating()).toBe(false);
71 | callback();
72 | },
73 | (callback) => {
74 | form.getFieldInstance('async').value = '1';
75 | Simulate.change(form.getFieldInstance('async'));
76 | expect(form.getFieldValue('async')).toBe('1');
77 | expect(form.getFieldError('async')).toBe(undefined);
78 | expect(form.isFieldValidating('async')).toBe(true);
79 | expect(form.isFieldsValidating()).toBe(true);
80 | setTimeout(callback, 200);
81 | },
82 | (callback) => {
83 | expect(form.getFieldError('async')).toBeFalsy();
84 | expect(form.isFieldValidating('async')).toBe(false);
85 | expect(form.isFieldsValidating()).toBe(false);
86 | callback();
87 | },
88 | ], done);
89 | });
90 | it('validateFields works for error', (done) => {
91 | form.validateFields((errors, values) => {
92 | expect(values.normal).toBe(undefined);
93 | expect(values.async).toBe(undefined);
94 | expect(Object.keys(errors).length).toBe(1);
95 | expect(errors.async.errors.map(e => e.message)).toEqual(['must be 1']);
96 | done();
97 | });
98 | });
99 |
100 | it('validateFields works for ok', (done) => {
101 | form.getFieldInstance('async').value = '1';
102 | Simulate.change(form.getFieldInstance('async'));
103 | form.validateFields((errors, values) => {
104 | expect(values.normal).toBe(undefined);
105 | expect(values.async).toBe('1');
106 | expect(errors).toBeFalsy();
107 | done();
108 | });
109 | });
110 |
111 | it('promise validateFields works for ok', (done) => {
112 | form.getFieldInstance('async').value = '1';
113 | Simulate.change(form.getFieldInstance('async'));
114 | return form.validateFields()
115 | .then(values => {
116 | expect(values.normal).toBe(undefined);
117 | expect(values.async).toBe('1');
118 | done();
119 | });
120 | });
121 |
122 | it('will error if change when validating', (done) => {
123 | form.validateFields((errors) => {
124 | expect(Object.keys(errors).length).toBe(1);
125 | expect(errors.async.errors.map(e => e.message)).toEqual(['async need to revalidate']);
126 | setTimeout(() => {
127 | done();
128 | }, 500);
129 | });
130 | form.getFieldInstance('async').value = '1';
131 | Simulate.change(form.getFieldInstance('async'));
132 | });
133 |
134 | it('Whether to catch when an error occurs', (done) => {
135 | form.validateFields()
136 | .catch(({ errors }) => {
137 | expect(Object.keys(errors).length).toBe(1);
138 | expect(errors.async.errors.map(e => e.message)).toEqual(['async need to revalidate']);
139 | expect.assertions(2);
140 | done();
141 | });
142 | form.getFieldInstance('async').value = '1';
143 | Simulate.change(form.getFieldInstance('async'));
144 | });
145 |
146 | // TODO: submit and isSubmitting are deprecated
147 | it('submit works', (done) => {
148 | expect(form.isSubmitting()).toBe(false);
149 | form.submit((callback) => {
150 | expect(form.isSubmitting()).toBe(true);
151 | setTimeout(() => {
152 | callback();
153 | expect(form.isSubmitting()).toBe(false);
154 | done();
155 | }, 100);
156 | });
157 | });
158 | });
159 |
--------------------------------------------------------------------------------
/tests/clean-field.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function */
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { mount } from 'enzyme';
6 | import createDOMForm from '../src/createDOMForm';
7 |
8 | jest.mock('dom-scroll-into-view', () => jest.fn());
9 |
10 | describe('clean field', () => {
11 | let div;
12 |
13 | beforeEach(() => {
14 | div = document.createElement('div');
15 | });
16 |
17 | afterEach(() => {
18 | ReactDOM.unmountComponentAtNode(div);
19 | });
20 |
21 | // https://github.com/ant-design/ant-design/issues/12560
22 | describe('clean field if did update removed', () => {
23 | // Prepare
24 | const Popup = ({ visible, children }) => {
25 | if (!visible) return null;
26 | return (
27 |
28 | {children}
29 |
30 | );
31 | };
32 |
33 | class Demo extends React.Component {
34 | render() {
35 | const { init, show } = this.props;
36 | const { getFieldDecorator } = this.props.form;
37 |
38 | let name;
39 | let age;
40 |
41 | if (init) {
42 | name = (
43 |
44 | name:
45 | {getFieldDecorator('name', {
46 | rules: [{ required: true }],
47 | })()}
48 |
49 | );
50 | } else {
51 | age = (
52 |
53 | age:
54 | {getFieldDecorator('age', {
55 | rules: [{ required: true }],
56 | })()}
57 |
58 | );
59 | }
60 |
61 | return (
62 |
63 | {name}
64 | {age}
65 |
66 | );
67 | }
68 | }
69 |
70 | const FormDemo = createDOMForm({
71 | withRef: true,
72 | })(Demo);
73 |
74 | class Test extends React.Component {
75 | state = {
76 | show: false,
77 | init: false,
78 | };
79 |
80 | onClick = () => {
81 | this.setState({ show: true });
82 | this.setState({ init: true });
83 | };
84 |
85 | setRef = (demo) => {
86 | this.demo = demo;
87 | };
88 |
89 | render() {
90 | const { show, init } = this.state;
91 | return (
92 |
93 |
94 |
95 |
96 | );
97 | }
98 | }
99 |
100 | // Do the test
101 | it('Remove when mount', () => {
102 | const wrapper = mount(, { attachTo: div });
103 | const form = wrapper.find('Demo').props().form;
104 | form.validateFields((error) => {
105 | expect(Object.keys(error)).toEqual(['age']);
106 | });
107 |
108 | wrapper.find('.my-btn').simulate('click');
109 |
110 | form.validateFields((error) => {
111 | expect(Object.keys(error)).toEqual(['name']);
112 | });
113 | });
114 | });
115 |
116 | // https://github.com/react-component/form/issues/205
117 | describe('Do not clean if field dom exist', () => {
118 | class Demo extends React.Component {
119 | state = {
120 | visible: true,
121 | };
122 |
123 | componentWillMount() {
124 | this.tmp = this.props.form.getFieldDecorator('age', {
125 | rules: [{ required: true }],
126 | });
127 | }
128 |
129 | render() {
130 | const { visible } = this.state;
131 | return (
132 |
133 | {visible && this.tmp()}
134 |
135 | );
136 | }
137 | }
138 |
139 | const FormDemo = createDOMForm({
140 | withRef: true,
141 | })(Demo);
142 |
143 | // Do the test
144 | it('Remove when mount', () => {
145 | const wrapper = mount(, { attachTo: div });
146 | const form = wrapper.find('Demo').props().form;
147 |
148 | // Init
149 | form.validateFields((error) => {
150 | expect(Object.keys(error)).toEqual(['age']);
151 | });
152 |
153 | // Refresh
154 | wrapper.update();
155 | form.validateFields((error) => {
156 | expect(Object.keys(error)).toEqual(['age']);
157 | });
158 |
159 | // Hide
160 | wrapper.find('Demo').setState({ visible: false });
161 | form.validateFields((error) => {
162 | expect(Object.keys(error || {})).toEqual([]);
163 | });
164 | });
165 | });
166 |
167 | describe('Don\'t clean field when has \'{ preserve: ture }\'', () => {
168 | // Prepare
169 | const Popup = ({ visible, children }) => {
170 | if (!visible) return null;
171 | return (
172 |
173 | {children}
174 |
175 | );
176 | };
177 |
178 | class Demo extends React.Component {
179 | render() {
180 | const { init, show } = this.props;
181 | const { getFieldDecorator } = this.props.form;
182 |
183 | let name;
184 | let age;
185 |
186 | if (init) {
187 | name = (
188 |
189 | name:
190 | {getFieldDecorator('name', {
191 | rules: [{ required: true }],
192 | })()}
193 |
194 | );
195 | } else {
196 | age = (
197 |
198 | age:
199 | {getFieldDecorator('age', {
200 | rules: [{ required: true }],
201 | preserve: true,
202 | })()}
203 |
204 | );
205 | }
206 |
207 | return (
208 |
209 | {name}
210 | {age}
211 |
212 | );
213 | }
214 | }
215 |
216 | const FormDemo = createDOMForm({
217 | withRef: true,
218 | })(Demo);
219 |
220 | class Test extends React.Component {
221 | state = {
222 | show: false,
223 | init: false,
224 | };
225 |
226 | onClick = () => {
227 | this.setState({ show: true });
228 | this.setState({ init: true });
229 | };
230 |
231 | setRef = (demo) => {
232 | this.demo = demo;
233 | };
234 |
235 | render() {
236 | const { show, init } = this.state;
237 | return (
238 |
239 |
240 |
241 |
242 | );
243 | }
244 | }
245 |
246 | // Do the test
247 | it('Don\'t remove when mount', done => {
248 | const wrapper = mount(, { attachTo: div });
249 | const form = wrapper.find('Demo').props().form;
250 | form.validateFields((error) => {
251 | expect(Object.keys(error)).toEqual(['age']);
252 | });
253 |
254 | wrapper.find('.my-btn').simulate('click');
255 |
256 | form.validateFields((error) => {
257 | expect(Object.keys(error)).toEqual(['age', 'name']);
258 | done();
259 | });
260 | });
261 | });
262 | });
263 |
--------------------------------------------------------------------------------
/tests/createDOMForm.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/prefer-stateless-function */
2 | import React from 'react';
3 | import { mount } from 'enzyme';
4 | import scrollIntoView from 'dom-scroll-into-view';
5 | import createDOMForm from '../src/createDOMForm';
6 |
7 | jest.mock('dom-scroll-into-view', () => jest.fn());
8 |
9 | class Test extends React.Component {
10 | render() {
11 | const { form, name } = this.props;
12 | const { getFieldDecorator } = form;
13 | return (
14 |
15 | {getFieldDecorator(name, {
16 | rules: [{
17 | required: true,
18 | }],
19 | })()}
20 |
21 | );
22 | }
23 | }
24 |
25 | Test = createDOMForm({
26 | withRef: true,
27 | })(Test);
28 |
29 | describe('validateFieldsAndScroll', () => {
30 | beforeEach(() => {
31 | scrollIntoView.mockClear();
32 | });
33 | it('works on overflowY auto element', (done) => {
34 | const wrapper = mount(, { attachTo: document.body });
35 | const form = wrapper.ref('wrappedComponent').props.form;
36 | form.validateFieldsAndScroll(() => {
37 | expect(scrollIntoView.mock.calls[0][1].tagName).not.toBe('TEXTAREA');
38 | wrapper.detach();
39 | done();
40 | });
41 | });
42 |
43 | it('works with nested fields', (done) => {
44 | const wrapper = mount(, { attachTo: document.body });
45 | const form = wrapper.ref('wrappedComponent').props.form;
46 | form.validateFieldsAndScroll(() => {
47 | expect(scrollIntoView).toHaveBeenCalled();
48 | wrapper.detach();
49 | done();
50 | });
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/tests/createForm.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, space-before-keywords, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function, react/no-string-refs */
3 |
4 | import React from 'react';
5 | import { mount } from 'enzyme';
6 | import createForm from '../src/createForm';
7 | import createFormField from '../src/createFormField';
8 |
9 | describe('validateMessage', () => {
10 | it('works', () => {
11 | class Test extends React.Component {
12 | render() {
13 | const { getFieldProps } = this.props.form;
14 | return (
15 |
16 |
22 |
23 | );
24 | }
25 | }
26 | Test = createForm({
27 | withRef: true,
28 | validateMessages: {
29 | required: '%s required!',
30 | },
31 | })(Test);
32 | const wrapper = mount();
33 | const form = wrapper.ref('wrappedComponent').props.form;
34 | wrapper.find('input').simulate('change');
35 | expect(form.getFieldError('required').length).toBe(1);
36 | expect(form.getFieldError('required')[0]).toBe('required required!');
37 | });
38 | });
39 |
40 | describe('onFieldsChange', () => {
41 | it('trigger `onFieldsChange` when value change', () => {
42 | const onFieldsChange = jest.fn();
43 | const Test = createForm({
44 | onFieldsChange,
45 | })(class extends React.Component {
46 | render() {
47 | const { getFieldProps } = this.props.form;
48 | return (
49 |
54 | );
55 | }
56 | });
57 | const wrapper = mount();
58 |
59 | wrapper.find('input').first().simulate('change', { target: { value: 'Benjy' } });
60 | expect(onFieldsChange.mock.calls[0][1]).toMatchObject({ user: { name: { value: 'Benjy' } } });
61 | expect(onFieldsChange.mock.calls[0][2]).toMatchObject({
62 | user: {
63 | name: { value: 'Benjy' },
64 | age: { value: undefined },
65 | },
66 | agreement: { value: undefined },
67 | });
68 | });
69 |
70 | it('trigger `onFieldsChange` when `setFields`', () => {
71 | const onFieldsChange = jest.fn();
72 | const Test = createForm({
73 | withRef: true,
74 | onFieldsChange,
75 | })(class extends React.Component {
76 | render() {
77 | const { getFieldProps } = this.props.form;
78 | return (
79 |
84 | );
85 | }
86 | });
87 | const wrapper = mount();
88 | const form = wrapper.ref('wrappedComponent').props.form;
89 |
90 | form.setFields({ user: { name: { value: 'Benjy' } } });
91 | expect(onFieldsChange.mock.calls[0][1]).toMatchObject({ user: { name: { value: 'Benjy' } } });
92 | expect(onFieldsChange.mock.calls[0][2]).toMatchObject({
93 | user: {
94 | name: { value: 'Benjy' },
95 | age: { value: undefined },
96 | },
97 | agreement: { value: undefined },
98 | });
99 | });
100 |
101 | it('fields in arguemnts can be passed to `mapPropsToFields` directly', () => {
102 | const Test = createForm({
103 | withRef: true,
104 | onFieldsChange(props, changed, all) {
105 | props.onChange(all);
106 | },
107 | mapPropsToFields({ fields }) {
108 | return fields;
109 | },
110 | })(class extends React.Component {
111 | render() {
112 | const { getFieldProps } = this.props.form;
113 | return (
114 |
119 | );
120 | }
121 | });
122 | class TestWrapper extends React.Component {
123 | state = {
124 | fields: {},
125 | };
126 | handleFieldsChange = (fields) => {
127 | this.setState({ fields });
128 | }
129 | render() {
130 | return (
131 |
136 | );
137 | }
138 | }
139 | const wrapper = mount();
140 | wrapper.find('input').at(0).simulate('change', { target: { value: 'Benjy' } });
141 | wrapper.find('input').at(1).simulate('change', { target: { value: 18 } });
142 | wrapper.find('input').at(2)
143 | .simulate('change', { target: { type: 'checkbox', checked: true } });
144 | expect(wrapper.state('fields')).toMatchObject({
145 | user: {
146 | age: { value: 18 },
147 | name: { value: 'Benjy' },
148 | },
149 | agreement: { value: true },
150 | });
151 | });
152 | });
153 |
154 | describe('onValuesChange', () => {
155 | it('trigger `onValuesChange` when value change', () => {
156 | const onValuesChange = jest.fn();
157 | const Test = createForm({
158 | onValuesChange,
159 | })(class extends React.Component {
160 | render() {
161 | const { getFieldProps } = this.props.form;
162 | return (
163 |
168 | );
169 | }
170 | });
171 | const wrapper = mount();
172 | wrapper.find('input').first().simulate('change', { target: { value: 'Benjy' } });
173 | expect(onValuesChange.mock.calls[0][1]).toMatchObject({ user: { name: 'Benjy' } });
174 | expect(onValuesChange.mock.calls[0][2])
175 | .toMatchObject({
176 | user: {
177 | name: 'Benjy',
178 | age: undefined,
179 | },
180 | agreement: undefined,
181 | });
182 | });
183 |
184 | it('trigger `onValuesChange` when `setFieldsValue`', () => {
185 | const onValuesChange = jest.fn();
186 | const Test = createForm({
187 | withRef: true,
188 | onValuesChange,
189 | })(class extends React.Component {
190 | render() {
191 | const { getFieldProps } = this.props.form;
192 | return (
193 |
198 | );
199 | }
200 | });
201 | const wrapper = mount();
202 | const form = wrapper.ref('wrappedComponent').props.form;
203 | form.setFieldsValue({ user: { name: 'Benjy' } });
204 | expect(onValuesChange.mock.calls[0][1]).toMatchObject({ user: { name: 'Benjy' } });
205 | expect(onValuesChange.mock.calls[0][2])
206 | .toMatchObject({
207 | user: {
208 | name: 'Benjy',
209 | age: undefined,
210 | },
211 | agreement: undefined,
212 | });
213 | });
214 | });
215 |
216 | describe('mapProps', () => {
217 | it('works', () => {
218 | const Test = createForm({
219 | withRef: true,
220 | mapProps(props) {
221 | return {
222 | ...props,
223 | x: props.x + 1,
224 | };
225 | },
226 | })(class extends React.Component { render() { return null; } });
227 | const wrapper = mount();
228 | const wrappedComponent = wrapper.ref('wrappedComponent');
229 | expect(wrappedComponent.props.x).toBe(3);
230 | });
231 | });
232 |
233 | describe('mapPropsToFields', () => {
234 | it('works', () => {
235 | const Test = createForm({
236 | withRef: true,
237 | mapPropsToFields({ formState }) {
238 | return {
239 | user: {
240 | name: createFormField({
241 | value: formState.userName,
242 | }),
243 | age: createFormField({
244 | value: formState.userAge,
245 | }),
246 | },
247 | agreement: createFormField({
248 | value: formState.agreement,
249 | }),
250 | };
251 | },
252 | })(class extends React.Component {
253 | render() {
254 | const { form } = this.props;
255 | const { getFieldProps } = form;
256 | return (
257 |
262 | );
263 | }
264 | });
265 | const wrapper = mount(
266 |
267 | );
268 | const form = wrapper.ref('wrappedComponent').props.form;
269 | expect(form.getFieldValue('user.name')).toBe('Benjy');
270 | expect(form.getFieldValue('user.age')).toBe(18);
271 | expect(form.getFieldValue('agreement')).toBe(false);
272 |
273 | wrapper.setProps({ formState: { userName: 'Benjy', userAge: 18, agreement: true } });
274 | expect(form.getFieldValue('user.name')).toBe('Benjy');
275 | expect(form.getFieldValue('user.age')).toBe(18);
276 | expect(form.getFieldValue('agreement')).toBe(true);
277 | });
278 |
279 | it('returned value will replace current fields', () => {
280 | const Test = createForm({
281 | withRef: true,
282 | mapPropsToFields(props) {
283 | return {
284 | field1: createFormField({
285 | value: props.formState.field1,
286 | }),
287 | };
288 | },
289 | })(class extends React.Component {
290 | render() {
291 | const { getFieldProps } = this.props.form;
292 | return (
293 |
297 | );
298 | }
299 | });
300 | const wrapper = mount();
301 | const form = wrapper.ref('wrappedComponent').props.form;
302 | wrapper.find('input').last().simulate('change', { target: { value: '3' } });
303 | wrapper.setProps({ formState: { field1: '1' } });
304 | expect(form.getFieldValue('field1')).toBe('1');
305 | expect(form.getFieldValue('field2')).toBe(undefined);
306 | });
307 | });
308 |
--------------------------------------------------------------------------------
/tests/dynamic-binding.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, space-before-keywords, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function */
3 |
4 | import React from 'react';
5 | import { mount } from 'enzyme';
6 | import createForm from '../src/createForm';
7 |
8 | describe('binding dynamic fields without any errors', () => {
9 | it('normal input', (done) => {
10 | const Test = createForm({
11 | withRef: true,
12 | })(
13 | class extends React.Component {
14 | render() {
15 | const { form, mode } = this.props;
16 | const { getFieldDecorator } = form;
17 | return (
18 |
27 | );
28 | }
29 | }
30 | );
31 | const wrapper = mount();
32 | const form = wrapper.ref('wrappedComponent').props.form;
33 | wrapper.find('#text').simulate('change', { target: { value: '123' } });
34 | wrapper.setProps({ mode: false });
35 | expect(wrapper.find('#number').getDOMNode().value).toBe('123');
36 | expect(form.getFieldValue('name')).toBe('123');
37 | wrapper.find('#number').simulate('change', { target: { value: '456' } });
38 | wrapper.setProps({ mode: true });
39 | expect(wrapper.find('#text').getDOMNode().value).toBe('456');
40 | expect(form.getFieldValue('name')).toBe('456');
41 | form.validateFields((errors, values) => {
42 | expect(errors).toBe(null);
43 | expect(values.name).toBe('456');
44 | done();
45 | });
46 | });
47 |
48 | it('hidden input', (done) => {
49 | const Test = createForm({
50 | withRef: true,
51 | })(
52 | class extends React.Component {
53 | render() {
54 | const { form, mode } = this.props;
55 | const { getFieldDecorator } = form;
56 | return (
57 |
66 | );
67 | }
68 | }
69 | );
70 | const wrapper = mount();
71 | const form = wrapper.ref('wrappedComponent').props.form;
72 | wrapper.find('#text1').simulate('change', { target: { value: '123' } });
73 | wrapper.find('#text2').simulate('change', { target: { value: '456' } });
74 | expect(wrapper.find('#text1').getDOMNode().value).toBe('123');
75 | expect(wrapper.find('#text2').getDOMNode().value).toBe('456');
76 | expect(form.getFieldValue('input1')).toBe('123');
77 | expect(form.getFieldValue('input2')).toBe('456');
78 | wrapper.setProps({ mode: false });
79 | expect(form.getFieldValue('input1')).toBe(undefined);
80 | expect(form.getFieldValue('input2')).toBe(undefined);
81 | wrapper.setProps({ mode: true });
82 | expect(wrapper.find('#text1').getDOMNode().value).toBe('');
83 | expect(wrapper.find('#text2').getDOMNode().value).toBe('');
84 | expect(form.getFieldValue('input1')).toBe(undefined);
85 | expect(form.getFieldValue('input2')).toBe(undefined);
86 | wrapper.find('#text1').simulate('change', { target: { value: '789' } });
87 | expect(wrapper.find('#text1').getDOMNode().value).toBe('789');
88 | expect(wrapper.find('#text2').getDOMNode().value).toBe('');
89 | expect(form.getFieldValue('input1')).toBe('789');
90 | expect(form.getFieldValue('input2')).toBe(undefined);
91 | form.validateFields((errors, values) => {
92 | expect(errors).toBe(null);
93 | expect(values.input1).toBe('789');
94 | expect(values.input2).toBe(undefined);
95 | done();
96 | });
97 | });
98 |
99 | it('nested fields', (done) => {
100 | const Test = createForm({
101 | withRef: true,
102 | })(
103 | class extends React.Component {
104 | render() {
105 | const { form, mode } = this.props;
106 | const { getFieldDecorator } = form;
107 | return (
108 |
113 | );
114 | }
115 | }
116 | );
117 | const wrapper = mount();
118 | const form = wrapper.ref('wrappedComponent').props.form;
119 | wrapper.find('#text').simulate('change', { target: { value: '123' } });
120 | wrapper.setProps({ mode: false });
121 | expect(wrapper.find('#number').getDOMNode().value).toBe('123');
122 | expect(form.getFieldValue('name.xxx')).toBe('123');
123 | wrapper.find('#number').simulate('change', { target: { value: '456' } });
124 | wrapper.setProps({ mode: true });
125 | expect(wrapper.find('#text').getDOMNode().value).toBe('456');
126 | expect(form.getFieldValue('name.xxx')).toBe('456');
127 |
128 | form.validateFields((errors, values) => {
129 | expect(errors).toBe(null);
130 | expect(values.name.xxx).toBe('456');
131 | done();
132 | });
133 | });
134 |
135 | it('input with different keys', (done) => {
136 | const Test = createForm({
137 | withRef: true,
138 | })(
139 | class extends React.Component {
140 | render() {
141 | const { form, mode } = this.props;
142 | const { getFieldDecorator } = form;
143 | return (
144 |
150 | );
151 | }
152 | }
153 | );
154 | const wrapper = mount();
155 | const form = wrapper.ref('wrappedComponent').props.form;
156 | wrapper.find('#text').simulate('change', { target: { value: '123' } });
157 | wrapper.setProps({ mode: false });
158 | expect(wrapper.find('#number').getDOMNode().value).toBe('123');
159 | expect(form.getFieldValue('name')).toBe('123');
160 | wrapper.find('#number').simulate('change', { target: { value: '456' } });
161 | wrapper.setProps({ mode: true });
162 | expect(wrapper.find('#text').getDOMNode().value).toBe('456');
163 | expect(form.getFieldValue('name')).toBe('456');
164 | form.validateFields((errors, values) => {
165 | expect(errors).toBe(null);
166 | expect(values.name).toBe('456');
167 | done();
168 | });
169 | });
170 |
171 | it('submit without removed fields', (done) => {
172 | const Test = createForm({
173 | withRef: true,
174 | })(
175 | class extends React.Component {
176 | render() {
177 | const { form, mode } = this.props;
178 | const { getFieldDecorator } = form;
179 | return (
180 |
186 | );
187 | }
188 | }
189 | );
190 | const wrapper = mount();
191 | const form = wrapper.ref('wrappedComponent').props.form;
192 | form.validateFields((errors, values) => {
193 | expect(errors).toBe(null);
194 | expect('name1' in values).toBe(true);
195 | expect('name2' in values).toBe(true);
196 | expect('name3' in values).toBe(true);
197 | expect('name4' in values).toBe(true);
198 | wrapper.setProps({ mode: true });
199 | form.validateFields((errors2, values2) => {
200 | expect(errors2).toBe(null);
201 | expect('name1' in values2).toBe(true);
202 | expect('name2' in values2).toBe(true);
203 | expect('name3' in values2).toBe(false);
204 | expect('name4' in values2).toBe(false);
205 | done();
206 | });
207 | });
208 | });
209 |
210 | it('reset fields', (done) => {
211 | const Test = createForm({
212 | withRef: true,
213 | })(
214 | class extends React.Component {
215 | render() {
216 | const { form, mode } = this.props;
217 | const { getFieldDecorator } = form;
218 | return (
219 |
228 | );
229 | }
230 | }
231 | );
232 | const wrapper = mount();
233 | const form = wrapper.ref('wrappedComponent').props.form;
234 | wrapper.find('#text1').simulate('change', { target: { value: '123' } });
235 | wrapper.find('#text2').simulate('change', { target: { value: '456' } });
236 | expect(wrapper.find('#text1').getDOMNode().value).toBe('123');
237 | expect(wrapper.find('#text2').getDOMNode().value).toBe('456');
238 | expect(form.getFieldValue('input1')).toBe('123');
239 | expect(form.getFieldValue('input2')).toBe('456');
240 | wrapper.setProps({ mode: false });
241 | expect(form.getFieldValue('input1')).toBe(undefined);
242 | expect(form.getFieldValue('input2')).toBe(undefined);
243 | form.resetFields();
244 | wrapper.setProps({ mode: true });
245 | expect(wrapper.find('#text1').getDOMNode().value).toBe('');
246 | expect(wrapper.find('#text2').getDOMNode().value).toBe('');
247 | expect(form.getFieldValue('input1')).toBe(undefined);
248 | expect(form.getFieldValue('input2')).toBe(undefined);
249 | wrapper.find('#text1').simulate('change', { target: { value: '789' } });
250 | expect(wrapper.find('#text1').getDOMNode().value).toBe('789');
251 | expect(wrapper.find('#text2').getDOMNode().value).toBe('');
252 | expect(form.getFieldValue('input1')).toBe('789');
253 | expect(form.getFieldValue('input2')).toBe(undefined);
254 | wrapper.find('#text2').simulate('change', { target: { value: '456' } });
255 | expect(wrapper.find('#text2').getDOMNode().value).toBe('456');
256 | expect(form.getFieldValue('input2')).toBe('456');
257 | form.validateFields((errors, values) => {
258 | expect(errors).toBe(null);
259 | expect(values.input1).toBe('789');
260 | expect(values.input2).toBe('456');
261 | done();
262 | });
263 | });
264 | });
265 |
--------------------------------------------------------------------------------
/tests/dynamic-rule.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function */
3 | import React from 'react';
4 | import { mount } from 'enzyme';
5 | import createDOMForm from '../src/createDOMForm';
6 |
7 | // https://github.com/ant-design/ant-design/issues/13689
8 | describe('reset form validate when rule changed', () => {
9 |
10 | class Demo extends React.Component {
11 | render() {
12 | const { form } = this.props;
13 | const { getFieldDecorator } = form;
14 | const type = form.getFieldValue("type");
15 |
16 | return (
17 |
18 | {getFieldDecorator('type')(
19 |
20 | )}
21 | {getFieldDecorator("val1", {
22 | rules: [{ required: type }]
23 | })(
24 |
25 | )}
26 | {getFieldDecorator("val2", {
27 | rules: [{ required: !type }]
28 | })(
29 |
30 | )}
31 |
32 |
33 | );
34 | }
35 | }
36 |
37 | const FormDemo = createDOMForm({
38 | withRef: true,
39 | })(Demo);
40 |
41 | // Do the test
42 | it('should update errors', (done) => {
43 | const wrapper = mount(, { attachTo: document.body });
44 | const form = wrapper.find('Demo').props().form;
45 |
46 | // type => test
47 | wrapper.find('.type').simulate('change', {target: {value: 'test'}});
48 | form.validateFields(err => {
49 | expect(Object.keys(err)).toEqual(['val1']);
50 |
51 | // type => ''
52 | wrapper.find('.type').simulate('change', {target: {value: ''}});
53 |
54 | form.validateFields(err2 => {
55 | expect(Object.keys(err2)).toEqual(['val2']);
56 | done();
57 | });
58 | });
59 | });
60 | });
--------------------------------------------------------------------------------
/tests/form.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function */
3 |
4 | import React from 'react';
5 | import { mount } from 'enzyme';
6 | import createForm from '../src/createForm';
7 |
8 | describe('setFieldsValue', () => {
9 | // https://github.com/ant-design/ant-design/issues/8386
10 | it('should work even set with undefined name', () => {
11 | const Test = createForm({ withRef: true })(
12 | class extends React.Component {
13 | componentDidMount() {
14 | this.props.form.setFieldsValue({
15 | normal: '2',
16 | inexist: 'oh',
17 | });
18 | }
19 |
20 | render() {
21 | const { getFieldProps } = this.props.form;
22 | return ;
23 | }
24 | }
25 | );
26 | const wrapper = mount();
27 | const form = wrapper.ref('wrappedComponent').props.form;
28 | expect(form.getFieldValue('normal')).toBe('2');
29 | });
30 | });
31 |
32 | describe('resetFields', () => {
33 | it('can reset hidden fields', () => {
34 | const Test = createForm({ withRef: true })(
35 | class extends React.Component {
36 | render() {
37 | const { getFieldProps } = this.props.form;
38 | return (
39 |
45 | );
46 | }
47 | }
48 | );
49 | const wrapper = mount();
50 | const form = wrapper.ref('wrappedComponent').props.form;
51 | form.setFieldsValue({ normal: 'Hello world!' });
52 | expect(form.getFieldsValue(['normal'])).toEqual({ normal: 'Hello world!' });
53 | form.resetFields();
54 | expect(form.getFieldsValue(['normal'])).toEqual({ normal: '' });
55 | });
56 | });
57 |
58 | describe('form name', () => {
59 | it('set id', () => {
60 | const Test = createForm({
61 | fieldNameProp: 'id',
62 | name: 'test',
63 | })(
64 | class extends React.Component {
65 | render() {
66 | const { getFieldProps } = this.props.form;
67 | return (
68 |
71 | );
72 | }
73 | }
74 | );
75 | const wrapper = mount();
76 | const input = wrapper.find('input').instance();
77 | expect(input.id).toBe('test_user');
78 | });
79 | });
80 |
--------------------------------------------------------------------------------
/tests/getFieldDecorator.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp, react/no-render-return-value */
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { Simulate } from 'react-dom/test-utils';
6 | import createForm from '../src/createForm';
7 |
8 | describe('getFieldDecorator', () => {
9 | class Test extends React.Component {
10 | componentWillMount() {
11 | const { getFieldDecorator } = this.props.form;
12 | this.normalInput = getFieldDecorator('normal');
13 | this.requiredInput = getFieldDecorator('required', {
14 | rules: [{
15 | required: true,
16 | }],
17 | });
18 | this.blurRequiredInput = getFieldDecorator('blurRequired', {
19 | validate: [{
20 | trigger: 'onBlur',
21 | rules: [{
22 | required: true,
23 | }],
24 | }],
25 | });
26 | }
27 | render() {
28 | return (
29 | {this.normalInput(
30 |
31 | )}
32 |
33 | {this.requiredInput(
34 |
35 | )}
36 |
37 | {this.blurRequiredInput(
38 |
39 | )}
40 |
);
41 | }
42 | }
43 |
44 | Test = createForm({
45 | withRef: true,
46 | })(Test);
47 |
48 | let container;
49 | let component;
50 | let form;
51 |
52 | beforeEach(() => {
53 | container = document.createElement('div');
54 | document.body.appendChild(container);
55 | component = ReactDOM.render(, container);
56 | component = component.refs.wrappedComponent;
57 | form = component.props.form;
58 | });
59 |
60 | afterEach(() => {
61 | ReactDOM.unmountComponentAtNode(container);
62 | document.body.removeChild(container);
63 | });
64 |
65 | it('collect value', () => {
66 | expect(form.getFieldValue('normal')).toBe(undefined);
67 | Simulate.change(form.getFieldInstance('normal'));
68 | expect(form.getFieldValue('normal')).toBe('');
69 | form.getFieldInstance('normal').value = '1';
70 | Simulate.change(form.getFieldInstance('normal'));
71 | expect(form.getFieldValue('normal')).toBe('1');
72 | });
73 |
74 | it('validate value', () => {
75 | expect(form.getFieldValue('required')).toBe(undefined);
76 | Simulate.change(form.getFieldInstance('required'));
77 | expect(form.getFieldValue('required')).toBe('');
78 | expect(form.getFieldError('required')).toEqual(['required is required']);
79 | form.getFieldInstance('required').value = '1';
80 | Simulate.change(form.getFieldInstance('required'));
81 | expect(form.getFieldValue('required')).toBe('1');
82 | expect(form.getFieldError('required')).toBe(undefined);
83 | });
84 |
85 |
86 | it('validate trigger value', () => {
87 | expect(form.getFieldValue('blurRequired')).toBe(undefined);
88 | Simulate.change(form.getFieldInstance('blurRequired'));
89 | expect(form.getFieldValue('blurRequired')).toBe('');
90 | expect(form.getFieldError('blurRequired')).toBe(undefined);
91 | Simulate.blur(form.getFieldInstance('blurRequired'));
92 | expect(form.getFieldValue('blurRequired')).toBe('');
93 | expect(form.getFieldError('blurRequired')).toEqual(['blurRequired is required']);
94 | form.getFieldInstance('blurRequired').value = '1';
95 | Simulate.change(form.getFieldInstance('blurRequired'));
96 | Simulate.blur(form.getFieldInstance('blurRequired'));
97 | expect(form.getFieldValue('blurRequired')).toBe('1');
98 | expect(form.getFieldError('blurRequired')).toBe(undefined);
99 | });
100 |
101 | it('validateFields works for error', (callback) => {
102 | form.validateFields((errors, values) => {
103 | expect(Object.keys(errors).length).toBe(2);
104 | expect(errors.required.errors.map(e => e.message)).toEqual(['required is required']);
105 | expect(errors.blurRequired.errors.map(e => e.message)).toEqual(['blurRequired is required']);
106 | expect(values.normal).toBe(undefined);
107 | expect(values.blurRequired).toBe(undefined);
108 | expect(values.required).toBe(undefined);
109 | callback();
110 | });
111 | });
112 |
113 | it('validateFields works for ok', (callback) => {
114 | form.getFieldInstance('required').value = '2';
115 | form.getFieldInstance('blurRequired').value = '1';
116 | Simulate.change(form.getFieldInstance('blurRequired'));
117 | Simulate.change(form.getFieldInstance('required'));
118 | form.validateFields((errors, values) => {
119 | expect(errors).toBeFalsy();
120 | expect(values.normal).toBe(undefined);
121 | expect(values.blurRequired).toBe('1');
122 | expect(values.required).toBe('2');
123 | callback();
124 | });
125 | });
126 |
127 | it('resetFields works', () => {
128 | form.getFieldInstance('required').value = '1';
129 | Simulate.change(form.getFieldInstance('required'));
130 | expect(form.getFieldValue('required')).toBe('1');
131 | expect(form.getFieldError('required')).toBe(undefined);
132 | form.resetFields();
133 | expect(form.getFieldValue('required')).toBe(undefined);
134 | expect(form.getFieldError('required')).toBe(undefined);
135 | });
136 |
137 | it('setFieldsInitialValue works', () => {
138 | form.setFieldsInitialValue({
139 | normal: '4',
140 | });
141 | form.getFieldInstance('normal').value = '2';
142 | Simulate.change(form.getFieldInstance('normal'));
143 | expect(form.getFieldValue('normal')).toBe('2');
144 | form.resetFields();
145 | expect(form.getFieldValue('normal')).toBe('4');
146 | });
147 | });
148 |
149 | describe('dynamic', () => {
150 | it('change validateTrigger', () => {
151 | class Test extends React.Component {
152 | state = {
153 | inited: false,
154 | };
155 |
156 | render() {
157 | const { getFieldDecorator } = this.props.form;
158 | return (
159 |
160 | {getFieldDecorator('title', {
161 | validateTrigger: this.state.inited ? 'onChange' : 'onBlur',
162 | rules: [
163 | { required: true, message: 'Title is required' },
164 | { min: 3, message: 'Title should be 3+ characters' },
165 | ],
166 | })()}
167 |
168 | );
169 | }
170 | }
171 |
172 | Test = createForm({
173 | withRef: true,
174 | })(Test);
175 |
176 | const container = document.createElement('div');
177 | document.body.appendChild(container);
178 | const app = ReactDOM.render(, container);
179 | const component = app.refs.wrappedComponent;
180 | const form = component.props.form;
181 |
182 | Simulate.blur(form.getFieldInstance('title'));
183 | expect(form.getFieldError('title')).toEqual(['Title is required']);
184 |
185 | component.setState({ inited: true });
186 |
187 | form.getFieldInstance('title').value = '1';
188 | Simulate.change(form.getFieldInstance('title'));
189 | expect(form.getFieldValue('title')).toBe('1');
190 | expect(form.getFieldError('title')).toEqual(['Title should be 3+ characters']);
191 | });
192 | });
193 |
--------------------------------------------------------------------------------
/tests/getFieldProps.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function */
3 |
4 | import React from 'react';
5 | import { mount } from 'enzyme';
6 | import createForm from '../src/createForm';
7 |
8 | describe('fieldname', () => {
9 | // https://github.com/ant-design/ant-design/issues/8985
10 | it('support disordered array', () => {
11 | const Test = createForm({ withRef: true })(
12 | class extends React.Component {
13 | render() {
14 | const { getFieldProps } = this.props.form;
15 | return (
16 |
17 |
22 |
27 |
28 | );
29 | }
30 | }
31 | );
32 |
33 | const wrapper = mount();
34 | const form = wrapper.ref('wrappedComponent').props.form;
35 | expect(() => form.validateFields()).not.toThrow();
36 | });
37 | });
38 |
39 | describe('initialValue', () => {
40 | it('works', () => {
41 | const Test = createForm({ withRef: true })(
42 | class extends React.Component {
43 | render() {
44 | const { getFieldProps } = this.props.form;
45 | return ;
46 | }
47 | }
48 | );
49 | const wrapper = mount();
50 | const form = wrapper.ref('wrappedComponent').props.form;
51 | expect(form.getFieldValue('normal')).toBe('1');
52 | wrapper.find('input').simulate('change', { target: { value: '2' } });
53 | expect(form.getFieldValue('normal')).toBe('2');
54 | form.resetFields();
55 | expect(form.getFieldValue('normal')).toBe('1');
56 | });
57 | });
58 |
59 | describe('getValueProps', () => {
60 | it('works', () => {
61 | const Test = createForm({ withRef: true })(
62 | class extends React.Component {
63 | render() {
64 | const { getFieldProps } = this.props.form;
65 | return (
66 |
73 | );
74 | }
75 | }
76 | );
77 | const wrapper = mount();
78 | const form = wrapper.ref('wrappedComponent').props.form;
79 | wrapper.find('input').simulate('change', { target: { value: '2' } });
80 | expect(form.getFieldValue('normal')).toBe('2');
81 | expect(form.getFieldInstance('normal').value).toBe('21');
82 | });
83 | });
84 |
85 | describe('getValueFromEvent', () => {
86 | it('works', () => {
87 | const Test = createForm({ withRef: true })(
88 | class extends React.Component {
89 | render() {
90 | const { getFieldProps } = this.props.form;
91 | return (
92 |
99 | );
100 | }
101 | }
102 | );
103 | const wrapper = mount();
104 | const form = wrapper.ref('wrappedComponent').props.form;
105 | wrapper.find('input').simulate('change', { target: { value: '2' } });
106 | expect(form.getFieldValue('normal')).toBe('21');
107 | });
108 | });
109 |
110 | describe('normalize', () => {
111 | it('works', () => {
112 | const Test = createForm({ withRef: true })(
113 | class extends React.Component {
114 | toUpper = (v) => {
115 | return v && v.toUpperCase();
116 | }
117 | render() {
118 | const { getFieldProps } = this.props.form;
119 | return (
120 |
125 | );
126 | }
127 | }
128 | );
129 | const wrapper = mount();
130 | const form = wrapper.ref('wrappedComponent').props.form;
131 | wrapper.find('input').simulate('change', { target: { value: 'a' } });
132 | expect(form.getFieldValue('normal')).toBe('A');
133 | expect(form.getFieldInstance('normal').value).toBe('A');
134 | });
135 | });
136 |
137 | describe('validate', () => {
138 | it('works', () => {
139 | const Test = createForm({ withRef: true })(
140 | class extends React.Component {
141 | render() {
142 | const { getFieldProps } = this.props.form;
143 | return (
144 |
154 | );
155 | }
156 | }
157 | );
158 | const wrapper = mount();
159 | const form = wrapper.ref('wrappedComponent').props.form;
160 | expect(form.getFieldValue('normal')).toBe(undefined);
161 | wrapper.find('input').simulate('change', { target: { value: '' } });
162 | expect(form.getFieldValue('normal')).toBe('');
163 | expect(form.getFieldError('normal')).toBe(undefined);
164 | wrapper.find('input').simulate('blur', { target: { value: '' } });
165 | expect(form.getFieldValue('normal')).toBe('');
166 | expect(form.getFieldError('normal')).toEqual(['normal is required']);
167 | wrapper.find('input').simulate('blur', { target: { value: '1' } });
168 | expect(form.getFieldValue('normal')).toBe('1');
169 | expect(form.getFieldError('normal')).toBe(undefined);
170 | });
171 |
172 | it('suport jsx message', () => {
173 | const Test = createForm({ withRef: true })(
174 | class extends React.Component {
175 | render() {
176 | const { getFieldProps } = this.props.form;
177 | return (
178 | 1,
183 | }],
184 | })}
185 | />
186 | );
187 | }
188 | }
189 | );
190 | const wrapper = mount();
191 | const form = wrapper.ref('wrappedComponent').props.form;
192 | wrapper.find('input').simulate('change');
193 | expect(form.getFieldError('required').length).toBe(1);
194 | expect(form.getFieldError('required')[0].type).toBe('b');
195 | });
196 | });
197 |
198 | describe('hidden', () => {
199 | it('works', (callback) => {
200 | const Test = createForm({ withRef: true })(
201 | class extends React.Component {
202 | render() {
203 | const { getFieldProps } = this.props.form;
204 | return (
205 |
212 | );
213 | }
214 | }
215 | );
216 | const wrapper = mount();
217 | const form = wrapper.ref('wrappedComponent').props.form;
218 | expect(form.getFieldsValue()).toEqual({});
219 | form.validateFields((errors, values) => {
220 | expect(errors).toBe(null);
221 | expect(values).toEqual({});
222 | callback();
223 | });
224 | });
225 |
226 | it('can be set', () => {
227 | const Test = createForm({ withRef: true })(
228 | class extends React.Component {
229 | render() {
230 | const { getFieldProps } = this.props.form;
231 | return (
232 |
238 | );
239 | }
240 | }
241 | );
242 | const wrapper = mount();
243 | const form = wrapper.ref('wrappedComponent').props.form;
244 | expect(form.getFieldsValue(['normal'])).toEqual({ normal: '' });
245 | form.setFieldsValue({ normal: 'Hello world!' });
246 | expect(form.getFieldsValue(['normal'])).toEqual({ normal: 'Hello world!' });
247 | });
248 | });
249 |
--------------------------------------------------------------------------------
/tests/index.js:
--------------------------------------------------------------------------------
1 | const req = require.context('.', false, /\.spec\.js$/);
2 | req.keys().forEach(req);
3 |
--------------------------------------------------------------------------------
/tests/overview.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function */
3 |
4 | import React from 'react';
5 | import { mount } from 'enzyme';
6 | import createForm from '../src/createForm';
7 |
8 | describe('getFieldProps\' behaviors', () => {
9 | it('collect value and relative getters', () => {
10 | const Test = createForm({ withRef: true })(
11 | class extends React.Component {
12 | render() {
13 | const { getFieldProps } = this.props.form;
14 | return (
15 |
20 | );
21 | }
22 | }
23 | );
24 | const wrapper = mount();
25 | const form = wrapper.ref('wrappedComponent').props.form;
26 | wrapper.find('input').at(0).simulate('change', { target: { value: '1' } });
27 | expect(form.getFieldValue('normal')).toBe('1');
28 | wrapper.find('input').at(1).simulate('change', { target: { value: 'a' } });
29 | expect(form.getFieldValue('nested1.a[0]')).toBe('a');
30 | expect(form.getFieldValue('nested1')).toEqual({ a: ['a'] });
31 | wrapper.find('input').at(2).simulate('change', { target: { value: 'b' } });
32 | expect(form.getFieldValue('nested2[0].b')).toBe('b');
33 | expect(form.getFieldValue('nested2')).toEqual([{ b: 'b' }]);
34 |
35 | expect(form.getFieldsValue(['normal', 'nested1', 'nested2[0]']))
36 | .toEqual({
37 | normal: '1',
38 | nested1: { a: ['a'] },
39 | nested2: [{ b: 'b' }],
40 | });
41 | });
42 |
43 | it('validate value and relative getters', () => {
44 | const Test = createForm({ withRef: true })(
45 | class extends React.Component {
46 | render() {
47 | const { getFieldProps } = this.props.form;
48 | return (
49 |
54 | );
55 | }
56 | }
57 | );
58 | const wrapper = mount();
59 | const form = wrapper.ref('wrappedComponent').props.form;
60 |
61 | wrapper.find('input').at(0).simulate('change');
62 | expect(form.getFieldError('normal')).toEqual(['normal is required']);
63 | wrapper.find('input').at(0).simulate('change', { target: { value: '1' } });
64 | expect(form.getFieldError('normal')).toBe(undefined);
65 |
66 | wrapper.find('input').at(1).simulate('change');
67 | expect(form.getFieldError('nested1.a[0]')).toEqual(['nested1.a[0] is required']);
68 | expect(form.getFieldError('nested1')).toEqual({ a: [['nested1.a[0] is required']] });
69 | wrapper.find('input').at(1).simulate('change', { target: { value: '1' } });
70 | expect(form.getFieldError('nested1.a[0]')).toBe(undefined);
71 | expect(form.getFieldError('nested1')).toEqual({ a: [undefined] });
72 |
73 | wrapper.find('input').at(2).simulate('change');
74 | expect(form.getFieldError('nested2[0].b')).toEqual(['nested2[0].b is required']);
75 | expect(form.getFieldError('nested2')).toEqual([{ b: ['nested2[0].b is required'] }]);
76 | wrapper.find('input').at(2).simulate('change', { target: { value: '1' } });
77 | expect(form.getFieldError('nested2[0].b')).toBe(undefined);
78 | expect(form.getFieldError('nested2')).toEqual([{ b: undefined }]);
79 |
80 | expect(form.getFieldsError(['normal', 'nested1', 'nested2[0]']))
81 | .toEqual({
82 | normal: undefined,
83 | nested1: { a: [undefined] },
84 | nested2: [{ b: undefined }],
85 | });
86 | });
87 | });
88 |
89 | describe('createForm\'s form behavior', () => {
90 | it('getFieldValue should return `undefined` when `name` is not registered', () => {
91 | const Test = createForm({ withRef: true })(
92 | class extends React.Component {
93 | render() { return null; }
94 | }
95 | );
96 | const wrapper = mount();
97 | const form = wrapper.ref('wrappedComponent').props.form;
98 | expect(form.getFieldValue('not-registered')).toBe(undefined);
99 | });
100 |
101 | it('setFieldsInitialValue works', () => {
102 | const Test = createForm({ withRef: true })(
103 | class extends React.Component {
104 | render() {
105 | const { getFieldProps } = this.props.form;
106 | return (
107 |
112 | );
113 | }
114 | }
115 | );
116 | const wrapper = mount();
117 | const form = wrapper.ref('wrappedComponent').props.form;
118 | form.setFieldsInitialValue({
119 | normal: '1',
120 | nested1: { a: ['2'] },
121 | nested2: [{ b: '3' }],
122 | });
123 | expect(form.getFieldsValue()).toEqual({
124 | normal: '1',
125 | nested1: { a: ['2'] },
126 | nested2: [{ b: '3' }],
127 | });
128 | });
129 |
130 | it('resetFields works', () => {
131 | const Test = createForm({ withRef: true })(
132 | class extends React.Component {
133 | render() {
134 | const { getFieldProps } = this.props.form;
135 | return (
136 |
141 | );
142 | }
143 | }
144 | );
145 | const wrapper = mount();
146 | const form = wrapper.ref('wrappedComponent').props.form;
147 |
148 | wrapper.find('input').at(0).simulate('change', { target: { value: '' } });
149 | expect(form.getFieldValue('normal')).toBe('');
150 | expect(form.getFieldError('normal')).toEqual(['normal is required']);
151 | wrapper.find('input').at(1).simulate('change', { target: { value: '' } });
152 | expect(form.getFieldValue('nested1.a[0]')).toBe('');
153 | expect(form.getFieldError('nested1.a[0]')).toEqual(['nested1.a[0] is required']);
154 | wrapper.find('input').at(2).simulate('change', { target: { value: '' } });
155 | expect(form.getFieldValue('nested2[0].b')).toBe('');
156 | expect(form.getFieldError('nested2[0].b')).toEqual(['nested2[0].b is required']);
157 | form.resetFields(['normal', 'nested1', 'nested2[0]']);
158 | expect(form.getFieldValue('normal')).toBe(undefined);
159 | expect(form.getFieldError('normal')).toBe(undefined);
160 | expect(form.getFieldValue('nested1.a[0]')).toBe(undefined);
161 | expect(form.getFieldError('nested1.a[0]')).toBe(undefined);
162 | expect(form.getFieldValue('nested2[0].b')).toBe(undefined);
163 | expect(form.getFieldError('nested2[0].b')).toBe(undefined);
164 | });
165 |
166 | it('validateFields works for errors', (callback) => {
167 | const Test = createForm({ withRef: true })(
168 | class extends React.Component {
169 | render() {
170 | const { getFieldProps } = this.props.form;
171 | return ;
172 | }
173 | }
174 | );
175 | const wrapper = mount();
176 | const form = wrapper.ref('wrappedComponent').props.form;
177 | form.validateFields((errors, values) => {
178 | expect(errors).toEqual({
179 | normal: {
180 | errors: [{ field: 'normal', message: 'normal is required' }],
181 | },
182 | });
183 | expect(values).toEqual({ normal: undefined });
184 | callback();
185 | });
186 | });
187 |
188 | it('validateFields works for ok', (callback) => {
189 | const Test = createForm({ withRef: true })(
190 | class extends React.Component {
191 | render() {
192 | const { getFieldProps } = this.props.form;
193 | return ;
194 | }
195 | }
196 | );
197 | const wrapper = mount();
198 | const form = wrapper.ref('wrappedComponent').props.form;
199 | wrapper.find('input').simulate('change', { target: { value: '1' } });
200 | form.validateFields((errors, values) => {
201 | expect(errors).toBe(null);
202 | expect(values).toEqual({ normal: '1' });
203 | callback();
204 | });
205 | });
206 |
207 | it('validateFields(names, callback) works', (callback) => {
208 | const Test = createForm({ withRef: true })(
209 | class extends React.Component {
210 | render() {
211 | const { getFieldProps } = this.props.form;
212 | return (
213 |
218 | );
219 | }
220 | }
221 | );
222 | const wrapper = mount();
223 | const form = wrapper.ref('wrappedComponent').props.form;
224 | form.validateFields(['nested1', 'nested2[0]'], (errors, values) => {
225 | expect(errors).toEqual({
226 | nested1: {
227 | a: [{
228 | errors: [{ field: 'nested1.a[0]', message: 'nested1.a[0] is required' }],
229 | }],
230 | },
231 | nested2: [{
232 | b: {
233 | errors: [{ field: 'nested2[0].b', message: 'nested2[0].b is required' }],
234 | },
235 | }],
236 | });
237 | expect(values).toEqual({
238 | nested1: { a: [undefined] },
239 | nested2: [{ b: undefined }],
240 | });
241 | callback();
242 | });
243 | });
244 | });
245 |
--------------------------------------------------------------------------------
/tests/setup.js:
--------------------------------------------------------------------------------
1 | global.requestAnimationFrame = global.requestAnimationFrame || function requestAnimationFrame(cb) {
2 | return setTimeout(cb, 0);
3 | };
4 |
5 | const Enzyme = require('enzyme');
6 | const Adapter = require('enzyme-adapter-react-16');
7 |
8 | Enzyme.configure({ adapter: new Adapter() });
9 |
--------------------------------------------------------------------------------
/tests/switch-field.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp,
2 | react/prefer-stateless-function */
3 | import React from 'react';
4 | import { mount } from 'enzyme';
5 | import createDOMForm from '../src/createDOMForm';
6 |
7 | jest.mock('dom-scroll-into-view', () => jest.fn());
8 |
9 | // https://github.com/ant-design/ant-design/issues/12560
10 | describe('switch field should not lost field', () => {
11 |
12 | // assume we have fields: [a, b, c] when switch a with b
13 | // mark at node a: a as toRemove, b as toAdd
14 | // mark at node b: b as toRemove, a as toAdd
15 | // if do change instantly, result will be
16 | // [a, b, c] -> [b, c] -> [a, c], it's a wrong result
17 | // but collect them and do this after, result will be
18 | // [a, b, c] -> (remove a,b) [c] -> (add a,b) [a,b, c]
19 |
20 | // Prepare
21 |
22 | class Demo extends React.Component {
23 | state = {
24 | list: ['a', 'b', 'c'],
25 | };
26 | switch = () => {
27 | this.setState({
28 | list: ['b', 'a', 'c'],
29 | });
30 | };
31 | render() {
32 | const { getFieldDecorator } = this.props.form;
33 | const [one, two, three] = this.state.list;
34 | // do not use map
35 | // react will detect it by key and knowing there was a change on order.
36 | // we need to test [custom reparenting], so use hard written three element.
37 | return
38 | {getFieldDecorator(one)()}
39 | {getFieldDecorator(two)()}
40 | {getFieldDecorator(three)()}
41 |
42 |
43 | }
44 | }
45 |
46 | const FormDemo = createDOMForm({
47 | withRef: true,
48 | })(Demo);
49 |
50 | // Do the test
51 | it('Preserve right fields when switch them', () => {
52 | const wrapper = mount(, { attachTo: document.body });
53 | const form = wrapper.find('Demo').props().form;
54 |
55 | wrapper.find('.one').simulate('change', {target: {value: 'value1'}});
56 |
57 | expect(Object.keys(form.getFieldsValue()))
58 | .toEqual(expect.arrayContaining(["a", "b", "c"]));
59 | expect(form.getFieldValue('a')).toBe('value1');
60 | expect(wrapper.find('.one').getDOMNode().value).toBe('value1');
61 |
62 | wrapper.find('.sw').simulate('click');
63 |
64 | expect(Object.keys(form.getFieldsValue()))
65 | .toEqual(expect.arrayContaining(["a", "b", "c"]));
66 | expect(form.getFieldValue('a')).toBe('value1');
67 | expect(wrapper.find('.two').getDOMNode().value).toBe('value1');
68 | });
69 | });
--------------------------------------------------------------------------------
/tests/utils.spec.js:
--------------------------------------------------------------------------------
1 | import createFormField, { isFormField } from '../src/createFormField';
2 | import { flattenFields } from '../src/utils';
3 |
4 | describe('utils.flattenFields', () => {
5 | it('works', () => {
6 | const fields = {
7 | user: {
8 | name: createFormField({
9 | value: 'benjycui',
10 | }),
11 | age: createFormField({
12 | value: 18,
13 | }),
14 | hobbies: [
15 | createFormField({
16 | value: 'Archery',
17 | }),
18 | createFormField({
19 | value: 'Roller Skating',
20 | }),
21 | ],
22 | },
23 | };
24 |
25 | expect(flattenFields(fields, (_, node) => isFormField(node)))
26 | .toEqual({
27 | 'user.name': { value: 'benjycui' },
28 | 'user.age': { value: 18 },
29 | 'user.hobbies[0]': { value: 'Archery' },
30 | 'user.hobbies[1]': { value: 'Roller Skating' },
31 | });
32 | });
33 |
34 | it('just ignore `undefined` when `undefined` is not a valid leaf node', () => {
35 | const fields = {
36 | user: {
37 | name: undefined,
38 | age: undefined,
39 | hobbies: [
40 | undefined,
41 | createFormField({
42 | value: 'Roller Skating',
43 | }),
44 | ],
45 | },
46 | };
47 |
48 | expect(flattenFields(fields, (_, node) => isFormField(node)))
49 | .toEqual({
50 | 'user.hobbies[1]': { value: 'Roller Skating' },
51 | });
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/tests/validateArray.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-multi-comp, react/prefer-stateless-function, react/no-render-return-value */
2 |
3 | import React from "react";
4 | import ReactDOM from "react-dom";
5 | import createForm from "../src/createForm";
6 |
7 | class MyInput extends React.Component {
8 | onChange = ({ target: { value } }) => {
9 | const { onChange } = this.props;
10 | onChange(value.split(","));
11 | };
12 | render() {
13 | const { value = [] } = this.props;
14 | return (
15 |
16 | );
17 | }
18 | }
19 |
20 | class Test extends React.Component {
21 | render() {
22 | const { getFieldDecorator } = this.props.form;
23 | return (
24 |
25 | {getFieldDecorator("url_array", {
26 | initialValue: ["test"],
27 | rules: [
28 | {
29 | required: true,
30 | message: "The tags must be urls",
31 | type: "array",
32 | defaultField: { type: "url" }
33 | }
34 | ]
35 | })()}
36 | {getFieldDecorator("url_array1.123", {
37 | rules: [{ required: true, message: "Additional test" }]
38 | })()}
39 | {getFieldDecorator("url_array-1", {
40 | rules: [{ required: true, message: "Additional test 2" }]
41 | })()}
42 |
43 | );
44 | }
45 | }
46 |
47 | Test = createForm({
48 | withRef: true
49 | })(Test);
50 |
51 | describe("validate array type", () => {
52 | let container;
53 | let component;
54 | let form;
55 |
56 | beforeEach(() => {
57 | container = document.createElement("div");
58 | document.body.appendChild(container);
59 | component = ReactDOM.render(, container);
60 | component = component.refs.wrappedComponent;
61 | form = component.props.form;
62 | });
63 |
64 | afterEach(() => {
65 | ReactDOM.unmountComponentAtNode(container);
66 | document.body.removeChild(container);
67 | });
68 |
69 | it("forceValidate works", done => {
70 | form.validateFields(errors => {
71 | expect(errors).toBeTruthy();
72 | expect(errors.url_array.errors).toEqual([
73 | {
74 | field: "url_array.0",
75 | message: "url_array.0 is not a valid url"
76 | }
77 | ]);
78 | expect(errors.url_array1["123"].errors).toEqual([
79 | { message: "Additional test", field: "url_array1.123" }
80 | ]);
81 | expect(errors["url_array-1"].errors).toEqual([
82 | { message: "Additional test 2", field: "url_array-1" }
83 | ]);
84 | done();
85 | });
86 | });
87 | });
88 |
--------------------------------------------------------------------------------
/tests/validateFields.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef, react/prop-types, react/no-render-return-value */
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { Simulate } from 'react-dom/test-utils';
6 | import createForm from '../src/createForm';
7 |
8 | class Test extends React.Component {
9 | force = (rule, value, callback) => {
10 | this.props.form.validateFields(['check'], {
11 | force: true,
12 | }, (errors) => {
13 | if (errors) {
14 | const es = Object.keys(errors).map((name) => {
15 | return errors[name].errors;
16 | }).reduce((result, current) => {
17 | return result.concat(...current.map(entity => ({
18 | ...entity, message: `${entity.message}_force`,
19 | })));
20 | }, []);
21 | callback(es);
22 | } else {
23 | callback();
24 | }
25 | });
26 | }
27 |
28 | check = (rule, value, callback) => {
29 | if ((value || '').length < (this.props.form.getFieldValue('force') || '').length) {
30 | callback('error');
31 | } else {
32 | callback();
33 | }
34 | }
35 |
36 | render() {
37 | const { getFieldProps } = this.props.form;
38 | return (
39 |
40 |
41 |
45 |
50 |
51 | );
52 | }
53 | }
54 |
55 | Test = createForm({
56 | withRef: true,
57 | })(Test);
58 |
59 | describe('validateFields', () => {
60 | let container;
61 | let component;
62 | let form;
63 |
64 | beforeEach(() => {
65 | container = document.createElement('div');
66 | document.body.appendChild(container);
67 | component = ReactDOM.render(, container);
68 | component = component.refs.wrappedComponent;
69 | form = component.props.form;
70 | });
71 |
72 | afterEach(() => {
73 | ReactDOM.unmountComponentAtNode(container);
74 | document.body.removeChild(container);
75 | });
76 |
77 | it('forceValidate works', (done) => {
78 | form.getFieldInstance('check').value = '1';
79 | Simulate.change(form.getFieldInstance('check'));
80 | expect(form.getFieldError('check')).toBeFalsy();
81 | form.getFieldInstance('force').value = '11';
82 | Simulate.change(form.getFieldInstance('force'));
83 | expect(form.getFieldError('check')).toBeFalsy();
84 | form.validateFields((errors) => {
85 | expect(errors).toBeTruthy();
86 | expect(Object.keys(errors).length).toBe(1);
87 | expect(form.getFieldError('check')).toEqual(['error', 'error_force']);
88 | expect(errors.check.errors.map(e => e.message)).toEqual(['error', 'error_force']);
89 | expect(form.getFieldError('force')).toBeFalsy();
90 | done();
91 | });
92 | });
93 | });
94 |
--------------------------------------------------------------------------------
/tests/validateFieldsAndScroll.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types, react/no-render-return-value */
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | import { Simulate } from 'react-dom/test-utils'
5 | import createDOMForm from '../src/createDOMForm'
6 |
7 | class Test extends React.Component {
8 | check = (rule, value, callback) => {
9 | setTimeout(() => {
10 | if (value === '1') {
11 | callback()
12 | } else {
13 | callback(new Error('must be 1'))
14 | }
15 | }, 100)
16 | }
17 |
18 | render() {
19 | const { getFieldProps } = this.props.form
20 | return (
21 |
22 |
23 |
28 |
29 | )
30 | }
31 | }
32 |
33 | Test = createDOMForm({
34 | withRef: true,
35 | })(Test)
36 |
37 | describe('Test validateFieldsAndScroll', () => {
38 | let container
39 | let component
40 | let form
41 |
42 | beforeEach(() => {
43 | container = document.createElement('div')
44 | document.body.appendChild(container)
45 | component = ReactDOM.render(, container)
46 | component = component.refs.wrappedComponent
47 | form = component.props.form
48 | })
49 |
50 | afterEach(() => {
51 | ReactDOM.unmountComponentAtNode(container)
52 | document.body.removeChild(container)
53 | })
54 |
55 | it('validate validateFieldsAndScroll promise', (done) => {
56 | form.getFieldInstance('async').value = '1'
57 | Simulate.change(form.getFieldInstance('async'))
58 | return form.validateFieldsAndScroll().then(values => {
59 | expect(values.normal).toBe(undefined)
60 | expect(values.async).toBe('1')
61 | done()
62 | })
63 | })
64 | })
65 |
--------------------------------------------------------------------------------