76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
|
var requiredFieldWarningStyle = {
|
||
|
|
color: '#cc0000',
|
||
|
|
transition: 'opacity 400ms ease-in',
|
||
|
|
};
|
||
|
|
|
||
|
|
var FormField = React.createClass({
|
||
|
|
_type: null,
|
||
|
|
_element: null,
|
||
|
|
|
||
|
|
propTypes: {
|
||
|
|
type: React.PropTypes.string.isRequired,
|
||
|
|
hidden: React.PropTypes.bool,
|
||
|
|
},
|
||
|
|
getInitialState: function() {
|
||
|
|
return {
|
||
|
|
warningState: 'hidden',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
componentWillMount: function() {
|
||
|
|
if (['text', 'radio', 'checkbox', 'file'].indexOf(this.props.type) != -1) {
|
||
|
|
this._element = 'input';
|
||
|
|
this._type = this.props.type;
|
||
|
|
} else {
|
||
|
|
// Non <input> field, e.g. <select>, <textarea>
|
||
|
|
this._element = this.props.type;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
warnRequired: function() {
|
||
|
|
this.setState({
|
||
|
|
warningState: 'shown',
|
||
|
|
});
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
this.setState({
|
||
|
|
warningState: 'fading',
|
||
|
|
});
|
||
|
|
setTimeout(() => {
|
||
|
|
this.setState({
|
||
|
|
warningState: 'hidden',
|
||
|
|
});
|
||
|
|
}, 450);
|
||
|
|
}, 5000);
|
||
|
|
},
|
||
|
|
focus: function() {
|
||
|
|
this.refs.field.focus();
|
||
|
|
},
|
||
|
|
getValue: function() {
|
||
|
|
if (this.props.type == 'checkbox') {
|
||
|
|
return this.refs.field.checked;
|
||
|
|
} else {
|
||
|
|
return this.refs.field.value;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
var warningStyle = Object.assign({}, requiredFieldWarningStyle);
|
||
|
|
if (this.state.warningState == 'fading') {
|
||
|
|
warningStyle.opacity = '0';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Pass all unhandled props to the field element
|
||
|
|
var otherProps = Object.assign({}, this.props);
|
||
|
|
delete otherProps.type;
|
||
|
|
delete otherProps.hidden;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className={this.props.hidden ? 'hidden' : ''}>
|
||
|
|
<this._element type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
|
||
|
|
{...otherProps}>
|
||
|
|
{this.props.children}
|
||
|
|
</this._element>
|
||
|
|
<span className={this.state.warningState == 'hidden' ? 'hidden' : ''} style={warningStyle}> This field is required</span>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|