react-phone-number-input/build/input.js

Telephone input for React

'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _phone = require('./phone');

var _editor = require('./editor');

var _editor2 = _interopRequireDefault(_editor);

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

// Key codes
// https://github.com/sanniassin/react-input-mask/blob/master/InputElement.js
// https://github.com/halt-hammerzeit/react-phone-number-input

var Keys = {
	Backspace: 8,
	Delete: 46
};

// Usage:
//
// <Phone
// 	value={this.state.phone}
// 	format={format.RU}
// 	onChange={phone => this.setState({ phone })}
// 	className="phone-input"
// 	style={{ color: 'black' }} />
//

var Phone_input = function (_React$Component) {
	(0, _inherits3.default)(Phone_input, _React$Component);

	function Phone_input(props, context) {
		(0, _classCallCheck3.default)(this, Phone_input);

		var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Phone_input).call(this, props, context));

		_this.onKeyDown = _this.onKeyDown.bind(_this);
		_this.format_input_value = _this.format_input_value.bind(_this);
		return _this;
	}

	(0, _createClass3.default)(Phone_input, [{
		key: 'render',
		value: function render() {
			var _this2 = this;

			var _props = this.props;
			var value = _props.value;
			var className = _props.className;
			var style = _props.style;


			return _react2.default.createElement('input', {
				type: 'tel',
				ref: 'input',
				value: (0, _phone.format)(value, this.props.format),
				onKeyDown: this.onKeyDown,
				onChange: function onChange(event) {
					return _this2.format_input_value();
				},
				onPaste: function onPaste(event) {
					return _this2.format_input_value();
				},
				onCut: function onCut(event) {
					return _this2.format_input_value({ delete: true });
				},
				className: className,
				style: style });
		}

		// Returns <input/> DOM Element

	}, {
		key: 'input_element',
		value: function input_element() {
			return _reactDom2.default.findDOMNode(this.refs.input);
		}

		// Sets <input/> value and caret position

	}, {
		key: 'set_input_value',
		value: function set_input_value(value, caret_position) {
			// DOM Node
			var input = this.input_element();

			// set <input/> value manually to also set caret position
			// and prevent React from resetting the caret position later
			// inside subsequent `render()`.
			input.value = value;

			// Set caret position (with the neccessary adjustments)
			if (caret_position !== undefined) {
				input.setSelectionRange(caret_position, caret_position);
			}

			if (this.props.onChange) {
				this.props.onChange((0, _phone.cleartext_international)(value, this.props.format));
			}
		}

		// Gets <input/> value

	}, {
		key: 'get_input_value',
		value: function get_input_value() {
			return this.input_element().value;
		}

		// Gets <input/> caret position

	}, {
		key: 'get_caret_position',
		value: function get_caret_position() {
			return this.input_element().selectionStart;
		}

		// Gets <input/> selected position

	}, {
		key: 'get_selection',
		value: function get_selection() {
			// DOM Node
			var input = this.input_element();

			// If no selection, return nothing
			if (input.selectionStart === input.selectionEnd) {
				return;
			}

			return { start: input.selectionStart, end: input.selectionEnd };
		}

		// Formats input value as a phone number

	}, {
		key: 'format_input_value',
		value: function format_input_value() {
			var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

			// Get selection caret positions
			options.selection = this.get_selection();

			// Edit <input/>ted value according to the input conditions (caret position, key pressed)

			var _edit = (0, _editor2.default)(this.get_input_value(), this.get_caret_position(), this.props.format, options);

			var phone = _edit.phone;
			var caret = _edit.caret;

			// Set <input/> value and caret position

			this.set_input_value(phone, caret);
		}

		// Intercepts "Delete" and "Backspace" keys
		// (hitting "Delete" or "Backspace"
		//  at any caret position should always result in 
		//  erasing a digit)

	}, {
		key: 'onKeyDown',
		value: function onKeyDown(event) {
			var backspace = event.keyCode === Keys.Backspace;
			var Delete = event.keyCode === Keys.Delete;

			if (backspace || Delete) {
				this.format_input_value({ backspace: backspace, delete: Delete });
				return event.preventDefault();
			}
		}
	}]);
	return Phone_input;
}(_react2.default.Component);

exports.default = Phone_input;


Phone_input.propTypes = {
	format: _react.PropTypes.shape({
		country: _react.PropTypes.string.isRequired,
		city: _react.PropTypes.number.isRequired,
		number: _react.PropTypes.arrayOf(_react.PropTypes.number)
	}).isRequired,
	value: _react.PropTypes.string.isRequired,
	onChange: _react.PropTypes.func.isRequired,
	className: _react.PropTypes.string,
	style: _react.PropTypes.object
};
module.exports = exports['default'];
//# sourceMappingURL=input.js.map