tiramisu-react-form/lib/components/Input.js

form component for reactjs

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.Input = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Label = require('./Label');

var _Label2 = _interopRequireDefault(_Label);

var _Error = require('./Error');

var _Error2 = _interopRequireDefault(_Error);

var _checkChild = require('../utils/errors/checkChild');

var _checkChild2 = _interopRequireDefault(_checkChild);

var _onChange = require('../utils/errors/onChange');

var _onChange2 = _interopRequireDefault(_onChange);

var _setWidth = require('../utils/style/setWidth');

var _setWidth2 = _interopRequireDefault(_setWidth);

var _format = require('../utils/format');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Input = function (_Component) {
	_inherits(Input, _Component);

	function Input() {
		_classCallCheck(this, Input);

		var _this = _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).call(this));

		_this.onChange = _this.onChange.bind(_this);
		_this.onBlur = _this.onBlur.bind(_this);
		_this.onFocus = _this.onFocus.bind(_this);

		_this.state = { error: '', value: '', cursorPosition: 0 };

		return _this;
	}

	_createClass(Input, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			var _props = this.props,
			    initialValue = _props.initialValue,
			    name = _props.name;


			var e = { target: { name: name, value: initialValue } };

			if (initialValue) {
				this.props.onChange(e, this.props);
			}
		}
	}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps, prevState) {
			var cursorPosition = this.state.cursorPosition,
			    _props2 = this.props,
			    name = _props2.name,
			    values = _props2.values;

			var value = values[name];

			var preValue = prevProps.values[name];

			if (value !== preValue) {
				this.setState(_extends({}, this.state, { value: values[name] }));
			}

			this.refs.input.setSelectionRange(cursorPosition, cursorPosition);
		}
	}, {
		key: 'onChange',
		value: function onChange(e) {
			var value = e.target.value;

			// set cursor position - important it happens before va

			var cursorPosition = 0;

			cursorPosition = e.target.selectionEnd;

			// formatBeforeChange for customized Inputs

			value = this.props.formatBeforeChange(value);

			e.target.value = (0, _format.formatOnChange)(value, this.props);

			var error = (0, _onChange2.default)(this, e.target.value);

			this.setState({ error: error, cursorPosition: cursorPosition });

			this.props.onChange(e, this.props);
		}
	}, {
		key: 'onBlur',
		value: function onBlur(e) {

			if (this.props.onBlur) {
				e.target.value = this.props.onBlur(this.props);
			}

			var error = (0, _checkChild2.default)(this, e.target.value);

			this.setState({ error: error });
		}
	}, {
		key: 'onFocus',
		value: function onFocus() {
			this.props.onFocus(this.props);
		}
	}, {
		key: 'render',
		value: function render() {
			var _props3 = this.props,
			    type = _props3.type,
			    formEncType = _props3.formEncType,
			    autoComplete = _props3.autoComplete,
			    autoFocus = _props3.autoFocus,
			    name = _props3.name,
			    label = _props3.label,
			    placeholder = _props3.placeholder,
			    classNames = _props3.classNames,
			    isRequired = _props3.isRequired,
			    width = _props3.width;
			var _state = this.state,
			    value = _state.value,
			    cursorPosition = _state.cursorPosition;


			var error = this.props.errors[name] || this.state.error;

			if (this.props.type === 'email') {
				type = 'text';
			}

			return _react2.default.createElement(
				'div',
				{ className: classNames.group, style: { width: width } },
				label ? _react2.default.createElement(_Label2.default, _extends({}, this.props, {
					isRequired: isRequired })) : _react2.default.createElement('div', null),
				_react2.default.createElement('input', {
					type: type,
					ref: 'input',
					formEncType: formEncType,

					autoComplete: autoComplete,
					autoFocus: autoFocus,

					name: name,
					placeholder: placeholder,
					value: value,

					className: classNames.input,

					onChange: this.onChange,
					onBlur: this.onBlur,
					onFocus: this.onFocus }),
				error ? _react2.default.createElement(_Error2.default, { text: error, classNames: classNames }) : _react2.default.createElement('div', null)
			);
		}
	}]);

	return Input;
}(_react.Component);

Input.propTypes = {
	type: _propTypes2.default.string.isRequired,
	formEncType: _propTypes2.default.string.isRequired,

	label: _propTypes2.default.string,
	name: _propTypes2.default.string.isRequired,
	displayName: _propTypes2.default.string,

	autoComplete: _propTypes2.default.string.isRequired,
	autoFocus: _propTypes2.default.bool.isRequired,

	placeholder: _propTypes2.default.string,
	classNames: _propTypes2.default.object.isRequired,

	isRequired: _propTypes2.default.bool,
	maxLength: _propTypes2.default.number,
	minLength: _propTypes2.default.number,
	onlyNumbers: _propTypes2.default.bool,
	noSpaces: _propTypes2.default.bool,
	noLetters: _propTypes2.default.bool,
	noNumbers: _propTypes2.default.bool,
	noSpecialCharacters: _propTypes2.default.bool,

	width: _propTypes2.default.string.isRequired,
	values: _propTypes2.default.object.isRequired,
	initialValue: _propTypes2.default.string,

	onChange: _propTypes2.default.func,
	onBlur: _propTypes2.default.func,
	onFocus: _propTypes2.default.func
};

Input.defaultProps = {
	type: 'text',
	formEncType: 'application/x-www-form-urlencoded',

	values: {},
	initialValue: '',

	autoComplete: 'on',
	autoFocus: false,

	formatBeforeChange: function formatBeforeChange(string) {
		return string;
	},

	isRequired: false,

	onlyNumbers: false,
	noSpaces: false,
	noLetters: false,
	noNumbers: false,
	noSpecialCharacters: false,

	classNames: {},
	width: '100%',

	onBlur: null,
	onFocus: function onFocus() {}
};

exports.Input = Input;