Skip to content

Instantly share code, notes, and snippets.

@gilbarbara
Last active September 6, 2017 17:29
Show Gist options
  • Save gilbarbara/68666bb562f5eec395d9 to your computer and use it in GitHub Desktop.
Save gilbarbara/68666bb562f5eec395d9 to your computer and use it in GitHub Desktop.
React Input component with formsy-react validation
var React = require('react/addons'),
Bootstrap = require('react-bootstrap'),
Formsy = require('formsy-react');
var InputValidate = React.createClass({
mixins: [Formsy.Mixin, React.addons.PureRenderMixin],
getDefaultProps: function () {
return {
autocomplete: 'off',
disabled: false,
help: '',
icon: false,
label: '',
modifier: undefined,
options: undefined,
placeholder: '',
readonly: false,
type: 'text',
validationType: 'blur',
value: ''
};
},
getInitialState: function () {
return {
focused: false
};
},
componentWillReceiveProps: function (nextProps) {
if (nextProps.value !== this.props.value) {
this.setValue(String(nextProps.value));
}
if (nextProps.validations !== this.props.validations) {
this._validations = nextProps.validations + ',isValue';
}
},
checkInput: function (element) {
var value = element.value;
if (value) {
if (element.type === 'number') {
value = String(parseInt(value, 10));
}
}
this.setValue(value);
},
_onFocus: function (event) {
var value = event.currentTarget.value,
isValid = this.isValidValue(value);
event.currentTarget.readOnly = false;
this.setState({
focused: true
});
this.checkInput(event.currentTarget);
if (this.props._onFocus) {
this.props._onFocus(event.currentTarget, isValid);
}
},
_onBlur: function (event) {
var value = event.currentTarget.value,
isValid = this.isValidValue(value);
this.setState({ focused: false });
if (this.props.validationType === 'blur') {
this.checkInput(event.currentTarget);
}
if (this.props._onBlur) {
this.props._onBlur(event.currentTarget, isValid);
}
},
_onChange: function (event) {
var value = event.currentTarget.value,
isValid = this.isValidValue(value);
console.log('InputValidate:onChange', value, isValid);
if (this.props.validationType === 'change') {
this.checkInput(event.currentTarget);
}
else if (isValid) {
this.checkInput(event.currentTarget);
}
else if (!value) {
console.log('resetValue');
this.resetValue();
}
if (this.props._onChange) {
this.props._onChange(event.currentTarget, isValid);
}
},
render: function () {
var validateClass = this.showError() ? 'error' : (this.getValue() && this.isValidValue(this.getValue()) ? 'success' : null),
errorMessage = this.getErrorMessage();
return <Bootstrap.Input
type={this.props.type}
name={this.props.name}
defaultValue={this.getValue()}
addonBefore={this.props.icon}
placeholder={this.props.placeholder}
label={this.props.label}
help={errorMessage}
bsStyle={validateClass}
hasFeedback
ref={this.props.modifier}
groupClassName={(this.props.groupClassName ? this.props.groupClassName : 'group-class') + (this.state.focused ? ' focused' : '') }
labelClassName={this.props.labelClassName ? this.props.labelClassName : 'label-class'}
onChange={this._onChange}
onFocus={this._onFocus}
onBlur={this._onBlur}
autoComplete={this.props.autocomplete}
disabled={this.props.disabled}
readOnly={this.props.readonly}
>
{this.props.options}
</Bootstrap.Input>;
}
});
module.exports = InputValidate;
@gilbarbara
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment