Add FormField.showAdvice() for displaying arbitrary form hints
Also modifies FormField.warnRequired() to use this new method
This commit is contained in:
parent
498b75c688
commit
f6f4d452b0
1 changed files with 12 additions and 6 deletions
|
@ -1,4 +1,5 @@
|
||||||
var FormField = React.createClass({
|
var FormField = React.createClass({
|
||||||
|
_fieldRequiredText: 'This field is required',
|
||||||
_type: null,
|
_type: null,
|
||||||
_element: null,
|
_element: null,
|
||||||
|
|
||||||
|
@ -8,7 +9,8 @@ var FormField = React.createClass({
|
||||||
},
|
},
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
warningState: 'hidden',
|
adviceState: 'hidden',
|
||||||
|
adviceText: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
|
@ -20,22 +22,26 @@ var FormField = React.createClass({
|
||||||
this._element = this.props.type;
|
this._element = this.props.type;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
warnRequired: function() {
|
showAdvice: function(text) {
|
||||||
this.setState({
|
this.setState({
|
||||||
warningState: 'shown',
|
adviceState: 'shown',
|
||||||
|
adviceText: text,
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
warningState: 'fading',
|
adviceState: 'fading',
|
||||||
});
|
});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
warningState: 'hidden',
|
adviceState: 'hidden',
|
||||||
});
|
});
|
||||||
}, 450);
|
}, 450);
|
||||||
}, 5000);
|
}, 5000);
|
||||||
},
|
},
|
||||||
|
warnRequired: function() {
|
||||||
|
this.showAdvice(this._fieldRequiredText);
|
||||||
|
},
|
||||||
focus: function() {
|
focus: function() {
|
||||||
this.refs.field.focus();
|
this.refs.field.focus();
|
||||||
},
|
},
|
||||||
|
@ -61,7 +67,7 @@ var FormField = React.createClass({
|
||||||
{...otherProps}>
|
{...otherProps}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</this._element>
|
</this._element>
|
||||||
<FormFieldAdvice field={this.refs.field} state={this.state.warningState}>This field is required</FormFieldAdvice>
|
<FormFieldAdvice field={this.refs.field} state={this.state.adviceState}>{this.state.adviceText}</FormFieldAdvice>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue