React Input component with formsy-react validation

InputValidate.jsx

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;

formsy-react 😄