Add FormField.showAdvice() for displaying arbitrary form hints

Also modifies FormField.warnRequired() to use this new method
This commit is contained in:
Alex Liebowitz 2016-11-18 03:43:28 -05:00
parent 498b75c688
commit f6f4d452b0

View file

@ -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>
); );
} }