Skip to content

Commit ca6c449

Browse files
bplok20010bplok20010
committed
Modified examples/demos/demo1.js
Modified src/Form.js Modified src/FormItem.js Missing src/FormItemBase.js Modified src/index.js
1 parent 3c62014 commit ca6c449

File tree

5 files changed

+226
-189
lines changed

5 files changed

+226
-189
lines changed

‎examples/demos/demo1.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,21 @@ export default class DEMO extends Component {
7171
};
7272
}
7373

74+
renderFieldExtra = (name, component) => {
75+
return (
76+
<div
77+
style={{
78+
color: "red",
79+
position: "absolute",
80+
top: "100%",
81+
left: 0
82+
}}
83+
>
84+
{component.isValidating() ? "校验中..." : component.getError()}
85+
</div>
86+
);
87+
};
88+
7489
render() {
7590
const { formValue } = this.state;
7691

@@ -83,6 +98,7 @@ export default class DEMO extends Component {
8398
onChange={formValue => this.setState({ formValue })}
8499
onSubmit={this.onSubmit}
85100
validators={this.getRules()}
101+
renderFieldExtra={this.renderFieldExtra}
86102
inline
87103
validateTrigger="blur"
88104
>
@@ -150,7 +166,7 @@ export default class DEMO extends Component {
150166
<NativeField component="input" />
151167
</FormItem>
152168
<div>
153-
{form.isValidatingField("name")
169+
{form.isFieldValidating("name")
154170
? "数据校验中..."
155171
: null}
156172
</div>
@@ -189,7 +205,7 @@ export default class DEMO extends Component {
189205
<NativeField component="input" />
190206
</FormItem>
191207
<div>
192-
{form.isValidatingField("info.list[0]")
208+
{form.isFieldValidating("info.list[0]")
193209
? "数据校验中..."
194210
: null}
195211
</div>
@@ -215,7 +231,7 @@ export default class DEMO extends Component {
215231
<NativeField component="input" />
216232
</FormItem>
217233
<div>
218-
{form.isValidatingField("info.list[1]")
234+
{form.isFieldValidating("info.list[1]")
219235
? "数据校验中..."
220236
: null}
221237
</div>
@@ -235,6 +251,7 @@ export default class DEMO extends Component {
235251
>
236252
<NativeField component="textarea" />
237253
</FormItem>
254+
{form.isValidating() ? "表单校验中..." : null}
238255
<pre>{JSON.stringify(formValue)}</pre>
239256
<pre>{JSON.stringify(form.getError())}</pre>
240257
<button>submit</button>

‎src/Form.js‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -19,32 +19,29 @@ export default class Form extends React.Component {
1919
path2obj: PropTypes.bool,
2020
defaultFormValue: PropTypes.object,
2121
getDefaultFieldValue: PropTypes.func,
22+
renderFieldExtra: PropTypes.func,
2223
formValue: PropTypes.object,
2324
validators: PropTypes.object,
2425
validateDelay: PropTypes.number,
2526
validateTrigger: PropTypes.string, //change blur none
27+
asyncTestDelay: PropTypes.number,
2628
component: PropTypes.node,
27-
rules: PropTypes.oneOfType([
28-
PropTypes.object,
29-
PropTypes.array,
30-
PropTypes.func
31-
]),
3229
labelWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
30+
labelStyle: PropTypes.object,
3331
labelPosition: PropTypes.oneOf(["top", "left"]),
3432
alignItems: PropTypes.oneOf(["top", "center", "bottom"]),
33+
clearErrorOnFocus: PropTypes.bool,
3534
inline: PropTypes.bool,
3635
onSubmit: PropTypes.func,
3736
onChange: PropTypes.func,
3837
validateFieldsAndScroll: PropTypes.bool,
39-
showMessage: PropTypes.bool,
4038
getInputProps: PropTypes.func
4139
};
4240

4341
static defaultProps = {
4442
prefixCls: "nex-form",
4543
className: "",
4644
style: {},
47-
rules: {},
4845
validators: {},
4946
path2obj: true,
5047
component: "form",
@@ -54,7 +51,7 @@ export default class Form extends React.Component {
5451
labelPosition: "left",
5552
alignItems: "center",
5653
inline: false,
57-
showMessage: true
54+
clearErrorOnFocus: true
5855
};
5956

6057
static getDerivedStateFromProps(nextProps, prevState) {
@@ -64,7 +61,7 @@ export default class Form extends React.Component {
6461
}
6562

6663
fields = [];
67-
_valiateCb = [];
64+
_validateCb = [];
6865

6966
state = {
7067
formError: {},
@@ -102,7 +99,7 @@ export default class Form extends React.Component {
10299
setValue(name, value, cb) {
103100
const { path2obj, onChange } = this.props;
104101
const formValue = this.state.formValue;
105-
const defer = deferred();
102+
// const defer = deferred();
106103

107104
// TODO: 后面再考虑下特殊场景
108105
const nextFormValue = {
@@ -126,19 +123,19 @@ export default class Form extends React.Component {
126123
}
127124

128125
if (cb) {
129-
this._valiateCb.push(formValue => {
126+
this._validateCb.push(formValue => {
130127
cb(formValue);
131-
defer.resolve();
128+
// defer.resolve(formValue);
132129
});
133130
}
134131

135-
return defer.promise;
132+
// return defer.promise;
136133
}
137134

138135
setValues(obj = {}, cb) {
139136
const { path2obj, onChange } = this.props;
140137
const formValue = this.state.formValue;
141-
const defer = deferred();
138+
// const defer = deferred();
142139

143140
const nextFormValue = {
144141
...formValue
@@ -164,26 +161,26 @@ export default class Form extends React.Component {
164161
}
165162

166163
if (cb) {
167-
this._valiateCb.push(formValue => {
164+
this._validateCb.push(formValue => {
168165
cb(formValue);
169-
defer.resolve();
166+
// defer.resolve(formValue);
170167
});
171168
}
172169

173-
return defer.promise;
170+
// return defer.promise;
174171
}
175172

176173
componentDidUpdate() {
177174
const formValue = this.state.formValue;
178-
const validateProcess = this._valiateCb;
179-
this._valiateCb = [];
175+
const validateProcess = this._validateCb;
176+
this._validateCb = [];
180177
validateProcess.forEach(cb => {
181178
cb(formValue);
182179
});
183180
}
184181

185182
componentWillUnmount() {
186-
this._valiateCb = [];
183+
this._validateCb = [];
187184
}
188185

189186
hasError(name) {
@@ -197,6 +194,26 @@ export default class Form extends React.Component {
197194
return formError[name];
198195
}
199196

197+
cleanError(name) {
198+
const { formError } = this.state;
199+
this.setState({
200+
formError: {
201+
...formError,
202+
[name]: null
203+
}
204+
});
205+
}
206+
207+
setError(name, message) {
208+
const { formError } = this.state;
209+
this.setState({
210+
formError: {
211+
...formError,
212+
[name]: message
213+
}
214+
});
215+
}
216+
200217
cleanErrors() {
201218
this.setState({
202219
formError: {}
@@ -245,11 +262,16 @@ export default class Form extends React.Component {
245262
return fieldValidators.filter(v => typeof v === "function");
246263
}
247264

248-
isValidatingField(name) {
265+
isFieldValidating(name) {
249266
const validatingFields = this.state.validatingFields;
250267
return !!validatingFields[name];
251268
}
252269

270+
isValidating() {
271+
const validatingFields = this.state.validatingFields;
272+
return Object.keys(validatingFields).some(key => validatingFields[key]);
273+
}
274+
253275
_validateField(name, callback) {
254276
callback = typeof callback === "function" ? callback : noop;
255277

@@ -470,16 +492,8 @@ export default class Form extends React.Component {
470492
});
471493
}
472494

473-
onFieldChange(name, value) {
474-
const { formValue } = this.state;
475-
476-
formValue.set(name, value);
477-
}
478-
479495
getFormContext() {
480-
return {
481-
form: this
482-
};
496+
return Object.create(this);
483497
}
484498

485499
render() {

0 commit comments

Comments
 (0)