diff --git a/.gitignore b/.gitignore index 5627c240..2292d97c 100644 --- a/.gitignore +++ b/.gitignore @@ -27,7 +27,7 @@ npm-debug.log *.sublime-workspace # webpack build target folder -/commonjs/ +# /commonjs/ # /modules/ /bundle/ \ No newline at end of file diff --git a/commonjs/CountrySelectNative.js b/commonjs/CountrySelectNative.js new file mode 100644 index 00000000..2a8a97be --- /dev/null +++ b/commonjs/CountrySelectNative.js @@ -0,0 +1,166 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _class, _temp2; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +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 CountrySelectNative = (_temp2 = _class = function (_Component) { + _inherits(CountrySelectNative, _Component); + + function CountrySelectNative() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, CountrySelectNative); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CountrySelectNative.__proto__ || Object.getPrototypeOf(CountrySelectNative)).call.apply(_ref, [this].concat(args))), _this), _this.onChange = function (event) { + var onChange = _this.props.onChange; + + var value = event.target.value; + onChange(value === 'ZZ' ? undefined : value); + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + _createClass(CountrySelectNative, [{ + key: 'render', + value: function render() { + var _props = this.props, + name = _props.name, + value = _props.value, + options = _props.options, + onFocus = _props.onFocus, + onBlur = _props.onBlur, + disabled = _props.disabled, + tabIndex = _props.tabIndex, + className = _props.className, + SelectArrow = _props.selectArrowComponent; + + + var selectedOption = void 0; + for (var _iterator = options, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { + var _ref2; + + if (_isArray) { + if (_i >= _iterator.length) break; + _ref2 = _iterator[_i++]; + } else { + _i = _iterator.next(); + if (_i.done) break; + _ref2 = _i.value; + } + + var option = _ref2; + + if (!option.divider && option.value === value) { + selectedOption = option; + } + } + + return _react2.default.createElement( + 'div', + { className: (0, _classnames2.default)(className, 'react-phone-number-input__country--native') }, + selectedOption && _react2.default.createElement(selectedOption.icon, { value: value }), + _react2.default.createElement( + 'select', + { + name: name, + value: value || 'ZZ', + onChange: this.onChange, + onFocus: onFocus, + onBlur: onBlur, + disabled: disabled, + tabIndex: tabIndex, + 'aria-label': this.props['aria-label'], + className: 'react-phone-number-input__country-select' }, + options.map(function (_ref3) { + var value = _ref3.value, + label = _ref3.label, + divider = _ref3.divider; + return _react2.default.createElement( + 'option', + { + key: divider ? '|' : value || 'ZZ', + value: divider ? '|' : value || 'ZZ', + disabled: divider ? true : false, + className: divider ? 'react-phone-number-input__country-select-divider' : undefined }, + label + ); + }) + ), + _react2.default.createElement(SelectArrow, null) + ); + } + }]); + + return CountrySelectNative; +}(_react.Component), _class.propTypes = { + // A two-letter country code. + // E.g. "US", "RU", etc. + value: _propTypes2.default.string, + + // Updates the `value`. + onChange: _propTypes2.default.func.isRequired, + + // `` options.\n\t\toptions : PropTypes.arrayOf(PropTypes.shape({\n\t\t\tvalue : PropTypes.string,\n\t\t\tlabel : PropTypes.string,\n\t\t\tdivider : PropTypes.bool\n\t\t})).isRequired,\n\n\t\t// HTML `name` attribute.\n\t\tname : PropTypes.string,\n\n\t\t// HTML `disabled` attribute.\n\t\tdisabled : PropTypes.bool,\n\n\t\t// HTML `tabIndex` attribute.\n\t\ttabIndex : PropTypes.number,\n\n\t\t// Select arrow component.\n\t\tselectArrowComponent : PropTypes.element.isRequired,\n\n\t\t// Toggles the `--focus` CSS class.\n\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/189\n\t\tonFocus : PropTypes.func,\n\n\t\t// Toggles the `--focus` CSS class.\n\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/189\n\t\tonBlur : PropTypes.func\n\t}\n\n\tstatic defaultProps =\n\t{\n\t\tselectArrowComponent : () =>
\n\t}\n\n\tonChange = (event) =>\n\t{\n\t\tconst { onChange } = this.props\n\t\tconst value = event.target.value\n\t\tonChange(value === 'ZZ' ? undefined : value)\n\t}\n\n\trender()\n\t{\n\t\tconst\n\t\t{\n\t\t\tname,\n\t\t\tvalue,\n\t\t\toptions,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\tdisabled,\n\t\t\ttabIndex,\n\t\t\tclassName,\n\t\t\tselectArrowComponent : SelectArrow\n\t\t}\n\t\t= this.props\n\n\t\tlet selectedOption\n\t\tfor (const option of options) {\n\t\t\tif (!option.divider && option.value === value) {\n\t\t\t\tselectedOption = option\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t
\n\t\t\t\t{ selectedOption && React.createElement(selectedOption.icon, ({ value })) }\n\n\t\t\t\t\n\t\t\t\t\t{options.map(({ value, label, divider }) => (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\n\t\t\t\t\t))}\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t
\n\t\t)\n\t}\n}"]} \ No newline at end of file diff --git a/commonjs/CountrySelectReactResponsiveUI.js b/commonjs/CountrySelectReactResponsiveUI.js new file mode 100644 index 00000000..53522625 --- /dev/null +++ b/commonjs/CountrySelectReactResponsiveUI.js @@ -0,0 +1,104 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _class, _temp; + +// Could have been `import { Select } from 'react-responsive-ui'` +// but in that case Webpack bundles the whole `react-responsive-ui` package. + + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _Select = require('react-responsive-ui/commonjs/Select'); + +var _Select2 = _interopRequireDefault(_Select); + +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 CountrySelectReactResponsiveUI = (_temp = _class = function (_Component) { + _inherits(CountrySelectReactResponsiveUI, _Component); + + function CountrySelectReactResponsiveUI() { + _classCallCheck(this, CountrySelectReactResponsiveUI); + + return _possibleConstructorReturn(this, (CountrySelectReactResponsiveUI.__proto__ || Object.getPrototypeOf(CountrySelectReactResponsiveUI)).apply(this, arguments)); + } + + _createClass(CountrySelectReactResponsiveUI, [{ + key: 'render', + value: function render() { + var _props = this.props, + name = _props.name, + value = _props.value, + onChange = _props.onChange, + onFocus = _props.onFocus, + onBlur = _props.onBlur, + options = _props.options, + disabled = _props.disabled, + tabIndex = _props.tabIndex, + className = _props.className, + ariaLabel = _props.ariaLabel, + saveOnIcons = _props.saveOnIcons, + scrollMaxItems = _props.scrollMaxItems, + toggleClassName = _props.toggleClassName; + + + return _react2.default.createElement(_Select2.default, { + icon: true, + name: name, + value: value, + onChange: onChange, + onFocus: onFocus, + onBlur: onBlur, + options: options, + disabled: disabled, + tabIndex: tabIndex, + className: className, + 'aria-label': this.props['aria-label'], + saveOnIcons: saveOnIcons, + scrollMaxItems: scrollMaxItems, + toggleClassName: toggleClassName }); + } + }]); + + return CountrySelectReactResponsiveUI; +}(_react.Component), _class.defaultProps = { + // If set to `false`, then country flags will be shown + // for all countries when country `` is expanded.\n\t\t// By default shows flag only for currently selected country.\n\t\t// (is `true` by default to save user's traffic\n\t\t// because all flags are about 3 MegaBytes)\n\t\tsaveOnIcons: true,\n\n\t\t// Toggles the `--focus` CSS class.\n\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/189\n\t\tonFocus : PropTypes.func,\n\n\t\t// Toggles the `--focus` CSS class.\n\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/189\n\t\tonBlur : PropTypes.func\n\t}\n\n\trender()\n\t{\n\t\tconst\n\t\t{\n\t\t\tname,\n\t\t\tvalue,\n\t\t\tonChange,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\toptions,\n\t\t\tdisabled,\n\t\t\ttabIndex,\n\t\t\tclassName,\n\t\t\t// `` caret position. + // https://github.com/reactjs/react-redux/issues/525#issuecomment-254852039 + // https://github.com/facebook/react/issues/955 + _this.setState({ value: newValue }, function () { + return onChange(newValue); + }); + }, _this.onBlur = function (event) { + var onBlur = _this.props.onBlur; + var value = _this.state.value; + + if (onBlur) { + // `event` is React's `SyntheticEvent`. + // Its `.value` is read-only therefore cloning it. + var _event = _extends({}, event, { + target: _extends({}, event.target, { + value: value + }) + // Workaround for `redux-form` event detection. + // https://github.com/erikras/redux-form/blob/v5/src/events/isEvent.js + });_event.stopPropagation = event.stopPropagation; + _event.preventDefault = event.preventDefault; + return onBlur(_event); + } + }, _this.focus = function () { + return _this.input.focus(); + }, _this.storeInput = function (ref) { + return _this.input = ref; + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + _createClass(InputBasic, [{ + key: 'format', + value: function format(value) { + var _props = this.props, + country = _props.country, + metadata = _props.metadata; + + return (0, _core.formatIncompletePhoneNumber)(value, country, metadata); + } + }, { + key: 'render', + value: function render() { + var _props2 = this.props, + onChange = _props2.onChange, + onFocus = _props2.onFocus, + country = _props2.country, + metadata = _props2.metadata, + Input = _props2.inputComponent, + rest = _objectWithoutProperties(_props2, ['onChange', 'onFocus', 'country', 'metadata', 'inputComponent']); + + // Prevents React from resetting the `` caret position. + // https://github.com/reactjs/react-redux/issues/525#issuecomment-254852039 + // https://github.com/facebook/react/issues/955 + + + var value = this.state.value; + + // Deprecated. Should be removed in a future major version release. + // `type="tel"` and `autoComplete="tel"` properties are here + // just for the "Without country select" component exported from + // `react-phone-number-input/basic-input` subpackage. + // These two properties will be overwritten by `` properties + // when not used as a "Without country select" component. + + return _react2.default.createElement(Input, _extends({ + type: 'tel', + autoComplete: 'tel' + }, rest, { + ref: this.storeInput, + value: this.format(value), + onChange: this.onChange, + onFocus: onFocus, + onBlur: this.onBlur })); + } + }], [{ + key: 'getDerivedStateFromProps', + + // Prevents React from resetting the `` caret position. + // https://github.com/reactjs/react-redux/issues/525#issuecomment-254852039 + // https://github.com/facebook/react/issues/955 + value: function getDerivedStateFromProps(_ref2) { + var value = _ref2.value; + + return { value: value }; + } + + // This `onBlur` interceptor is a workaround for `redux-form`'s bug + // so that it gets the up-to-date `value` in its `onBlur` handler. + // Without this fix it just gets the actual (raw) input field textual value. + // E.g. `+7 800 555 35 35` instead of `+78005553535`. + // + // New `value` is taken from `event` in `redux-form`'s `handleBlur()`. + // https://github.com/erikras/redux-form/blob/785edf8aac3adc84aba2ab6898a4aa8c48687750/src/ConnectedField.js#L168 + // `redux-form` shouldn't have taken the new `value` from `event`. + // + // A developer is not supposed to pass this `onBlur` property manually. + // Instead, `redux-form` passes `onBlur` to this component automatically + // and this component patches that `onBlur` handler (a hacky way but works). + // + + }]); + + return InputBasic; + }(PureComponent); + + InputBasic.propTypes = { + // The parsed phone number. + // "Parsed" not in a sense of "E.164" + // but rather in a sense of "having only + // digits and possibly a leading plus character". + // Examples: `""`, `"+"`, `"+123"`, `"123"`. + value: _propTypes2.default.string.isRequired, + + // Updates the `value`. + onChange: _propTypes2.default.func.isRequired, + + // Toggles the `--focus` CSS class. + // https://github.com/catamphetamine/react-phone-number-input/issues/189 + onFocus: _propTypes2.default.func, + + // `onBlur` workaround for `redux-form`'s bug. + onBlur: _propTypes2.default.func, + + // A two-letter country code for formatting `value` + // as a national phone number (e.g. `(800) 555 35 35`). + // E.g. "US", "RU", etc. + // If no `country` is passed then `value` + // is formatted as an international phone number. + // (e.g. `+7 800 555 35 35`) + country: _propTypes2.default.string, + + // `libphonenumber-js` metadata. + metadata: _propTypes2.default.object.isRequired, + + // The `` component. + inputComponent: _propTypes2.default.element.isRequired + }; + + InputBasic.defaultProps = { + metadata: defaultMetadata, + inputComponent: 'input' + }; + + return (0, _reactLifecyclesCompat.polyfill)(InputBasic); +} + +exports.default = createInput(); +//# sourceMappingURL=InputBasic.js.map \ No newline at end of file diff --git a/commonjs/InputBasic.js.map b/commonjs/InputBasic.js.map new file mode 100644 index 00000000..697bc92b --- /dev/null +++ b/commonjs/InputBasic.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/InputBasic.js"],"names":["createInput","PureComponent","React","Component","defaultMetadata","InputBasic","state","onChange","event","props","value","newValue","target","format","indexOf","slice","setState","onBlur","_event","stopPropagation","preventDefault","focus","input","storeInput","ref","country","metadata","onFocus","Input","inputComponent","rest","propTypes","PropTypes","string","isRequired","func","object","element","defaultProps"],"mappings":"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","file":"InputBasic.js","sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { parseIncompletePhoneNumber, formatIncompletePhoneNumber } from 'libphonenumber-js/core'\nimport { polyfill as reactLifecyclesCompat } from 'react-lifecycles-compat'\n\n// `PureComponent` is only available in React >= 15.3.0.\nconst PureComponent = React.PureComponent || React.Component\n\nexport function createInput(defaultMetadata) {\n\t/**\n\t * `InputBasic`'s caret is not as \"smart\" as the default `inputComponent`'s\n\t * but still works good enough. When erasing or inserting digits in the middle\n\t * of a phone number the caret usually jumps to the end: this is the expected\n\t * behaviour and it's the workaround for the [Samsung Galaxy smart caret positioning bug](https://github.com/catamphetamine/react-phone-number-input/issues/75).\n\t */\n\tclass InputBasic extends PureComponent {\n\t\t// Prevents React from resetting the `` caret position.\n\t\t// https://github.com/reactjs/react-redux/issues/525#issuecomment-254852039\n\t\t// https://github.com/facebook/react/issues/955\n\t\tstatic getDerivedStateFromProps({ value }) {\n\t\t\treturn { value }\n\t\t}\n\n\t\tstate = {}\n\n\t\tonChange = (event) => {\n\t\t\tconst { onChange } = this.props\n\t\t\tconst { value } = this.state\n\n\t\t\tlet newValue = parseIncompletePhoneNumber(event.target.value)\n\n\t\t\t// By default, if a value is something like `\"(123)\"`\n\t\t\t// then Backspace would only erase the rightmost brace\n\t\t\t// becoming something like `\"(123\"`\n\t\t\t// which would give the same `\"123\"` value\n\t\t\t// which would then be formatted back to `\"(123)\"`\n\t\t\t// and so a user wouldn't be able to erase the phone number.\n\t\t\t// Working around this issue with this simple hack.\n\t\t\tif (newValue === value) {\n\t\t\t\tif (this.format(newValue).indexOf(event.target.value) === 0) {\n\t\t\t\t\t// Trim the last digit (or plus sign).\n\t\t\t\t\tnewValue = newValue.slice(0, -1)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Prevents React from resetting the `` caret position.\n\t\t\t// https://github.com/reactjs/react-redux/issues/525#issuecomment-254852039\n\t\t\t// https://github.com/facebook/react/issues/955\n\t\t\tthis.setState({ value: newValue }, () => onChange(newValue))\n\t\t}\n\n\t\t// This `onBlur` interceptor is a workaround for `redux-form`'s bug\n\t\t// so that it gets the up-to-date `value` in its `onBlur` handler.\n\t\t// Without this fix it just gets the actual (raw) input field textual value.\n\t\t// E.g. `+7 800 555 35 35` instead of `+78005553535`.\n\t\t//\n\t\t// New `value` is taken from `event` in `redux-form`'s `handleBlur()`.\n\t\t// https://github.com/erikras/redux-form/blob/785edf8aac3adc84aba2ab6898a4aa8c48687750/src/ConnectedField.js#L168\n\t\t// `redux-form` shouldn't have taken the new `value` from `event`.\n\t\t//\n\t\t// A developer is not supposed to pass this `onBlur` property manually.\n\t\t// Instead, `redux-form` passes `onBlur` to this component automatically\n\t\t// and this component patches that `onBlur` handler (a hacky way but works).\n\t\t//\n\t\tonBlur = (event) => {\n\t\t\tconst { onBlur } = this.props\n\t\t\tconst { value } = this.state\n\t\t\tif (onBlur) {\n\t\t\t\t// `event` is React's `SyntheticEvent`.\n\t\t\t\t// Its `.value` is read-only therefore cloning it.\n\t\t\t\tconst _event = {\n\t\t\t\t\t...event,\n\t\t\t\t\ttarget: {\n\t\t\t\t\t\t...event.target,\n\t\t\t\t\t\tvalue\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// Workaround for `redux-form` event detection.\n\t\t\t\t// https://github.com/erikras/redux-form/blob/v5/src/events/isEvent.js\n\t\t\t\t_event.stopPropagation = event.stopPropagation\n\t\t\t\t_event.preventDefault = event.preventDefault\n\t\t\t\treturn onBlur(_event)\n\t\t\t}\n\t\t}\n\n\t\tformat(value) {\n\t\t\tconst { country, metadata } = this.props\n\t\t\treturn formatIncompletePhoneNumber(value, country, metadata)\n\t\t}\n\n\t\tfocus = () => this.input.focus()\n\n\t\tstoreInput = (ref) => this.input = ref\n\n\t\trender() {\n\t\t\tconst {\n\t\t\t\tonChange,\n\t\t\t\tonFocus,\n\t\t\t\tcountry,\n\t\t\t\tmetadata,\n\t\t\t\tinputComponent: Input,\n\t\t\t\t...rest\n\t\t\t} = this.props\n\n\t\t\t// Prevents React from resetting the `` caret position.\n\t\t\t// https://github.com/reactjs/react-redux/issues/525#issuecomment-254852039\n\t\t\t// https://github.com/facebook/react/issues/955\n\t\t\tconst { value } = this.state\n\n\t\t\t// Deprecated. Should be removed in a future major version release.\n\t\t\t// `type=\"tel\"` and `autoComplete=\"tel\"` properties are here\n\t\t\t// just for the \"Without country select\" component exported from\n\t\t\t// `react-phone-number-input/basic-input` subpackage.\n\t\t\t// These two properties will be overwritten by `` properties\n\t\t\t// when not used as a \"Without country select\" component.\n\n\t\t\treturn (\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t}\n\n\tInputBasic.propTypes = {\n\t\t// The parsed phone number.\n\t\t// \"Parsed\" not in a sense of \"E.164\"\n\t\t// but rather in a sense of \"having only\n\t\t// digits and possibly a leading plus character\".\n\t\t// Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\n\t\tvalue : PropTypes.string.isRequired,\n\n\t\t// Updates the `value`.\n\t\tonChange : PropTypes.func.isRequired,\n\n\t\t// Toggles the `--focus` CSS class.\n\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/189\n\t\tonFocus : PropTypes.func,\n\n\t\t// `onBlur` workaround for `redux-form`'s bug.\n\t\tonBlur : PropTypes.func,\n\n\t\t// A two-letter country code for formatting `value`\n\t\t// as a national phone number (e.g. `(800) 555 35 35`).\n\t\t// E.g. \"US\", \"RU\", etc.\n\t\t// If no `country` is passed then `value`\n\t\t// is formatted as an international phone number.\n\t\t// (e.g. `+7 800 555 35 35`)\n\t\tcountry : PropTypes.string,\n\n\t\t// `libphonenumber-js` metadata.\n\t\tmetadata : PropTypes.object.isRequired,\n\n\t\t// The `` component.\n\t\tinputComponent : PropTypes.element.isRequired\n\t}\n\n\tInputBasic.defaultProps = {\n\t\tmetadata: defaultMetadata,\n\t\tinputComponent: 'input'\n\t}\n\n\treturn reactLifecyclesCompat(InputBasic)\n}\n\nexport default createInput()"]} \ No newline at end of file diff --git a/commonjs/InputBasicDefaultMetadata.js b/commonjs/InputBasicDefaultMetadata.js new file mode 100644 index 00000000..fa450079 --- /dev/null +++ b/commonjs/InputBasicDefaultMetadata.js @@ -0,0 +1,71 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = 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 _metadataMin = require('libphonenumber-js/metadata.min.json'); + +var _metadataMin2 = _interopRequireDefault(_metadataMin); + +var _InputBasic = require('./InputBasic'); + +var _InputBasic2 = _interopRequireDefault(_InputBasic); + +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; } // Deprecated. +// This is a file used in legacy `/index.js` export entry. +// In some next major version this file will be removed +// and `/index.js` will be redirected to `/min/index.js`. + +var InputBasicDefaultMetadata = function (_Component) { + _inherits(InputBasicDefaultMetadata, _Component); + + function InputBasicDefaultMetadata() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, InputBasicDefaultMetadata); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InputBasicDefaultMetadata.__proto__ || Object.getPrototypeOf(InputBasicDefaultMetadata)).call.apply(_ref, [this].concat(args))), _this), _this.focus = function () { + return _this.input.focus(); + }, _this.storeInputRef = function (ref) { + return _this.input = ref; + }, _temp), _possibleConstructorReturn(_this, _ret); + } + // Proxy `.focus()` method. + + + _createClass(InputBasicDefaultMetadata, [{ + key: 'render', + value: function render() { + return _react2.default.createElement(_InputBasic2.default, _extends({}, this.props, { + ref: this.storeInputRef, + metadata: _metadataMin2.default })); + } + }]); + + return InputBasicDefaultMetadata; +}(_react.Component); + +exports.default = InputBasicDefaultMetadata; +//# sourceMappingURL=InputBasicDefaultMetadata.js.map \ No newline at end of file diff --git a/commonjs/InputBasicDefaultMetadata.js.map b/commonjs/InputBasicDefaultMetadata.js.map new file mode 100644 index 00000000..3f7fb232 --- /dev/null +++ b/commonjs/InputBasicDefaultMetadata.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/InputBasicDefaultMetadata.js"],"names":["InputBasicDefaultMetadata","focus","input","storeInputRef","ref","props","metadata","Component"],"mappings":";;;;;;;;;;;AAKA;;;;AACA;;;;AAEA;;;;;;;;;;+eARA;AACA;AACA;AACA;;IAOqBA,yB;;;;;;;;;;;;;;0NAGpBC,K,GAAQ;AAAA,UAAM,MAAKC,KAAL,CAAWD,KAAX,EAAN;AAAA,G,QAERE,a,GAAgB,UAACC,GAAD;AAAA,UAAS,MAAKF,KAAL,GAAaE,GAAtB;AAAA,G;;AAHhB;;;;;2BAMA;AACC,UACC,8BAAC,oBAAD,eACM,KAAKC,KADX;AAEC,SAAM,KAAKF,aAFZ;AAGC,cAAWG,qBAHZ,IADD;AAMA;;;;EAfqDC,gB;;kBAAlCP,yB","file":"InputBasicDefaultMetadata.js","sourcesContent":["// Deprecated.\n// This is a file used in legacy `/index.js` export entry.\n// In some next major version this file will be removed\n// and `/index.js` will be redirected to `/min/index.js`.\n\nimport React, { Component } from 'react'\nimport metadata from 'libphonenumber-js/metadata.min.json'\n\nimport InputBasic from './InputBasic'\n\nexport default class InputBasicDefaultMetadata extends Component\n{\n\t// Proxy `.focus()` method.\n\tfocus = () => this.input.focus()\n\n\tstoreInputRef = (ref) => this.input = ref\n\n\trender()\n\t{\n\t\treturn (\n\t\t\t\n\t\t)\n\t}\n}"]} \ No newline at end of file diff --git a/commonjs/InputSmart.js b/commonjs/InputSmart.js new file mode 100644 index 00000000..d7ed3042 --- /dev/null +++ b/commonjs/InputSmart.js @@ -0,0 +1,94 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +exports.createInput = createInput; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _inputFormat = require('input-format'); + +var _core = require('libphonenumber-js/core'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +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; } + +/** + * This input uses `input-format` library + * for "smart" caret positioning. + */ +function createInput(defaultMetadata) { + var _class, _temp2; + + return _temp2 = _class = function (_Component) { + _inherits(InputSmart, _Component); + + function InputSmart() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, InputSmart); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InputSmart.__proto__ || Object.getPrototypeOf(InputSmart)).call.apply(_ref, [this].concat(args))), _this), _this.focus = function () { + return _this.input.focus(); + }, _this.storeInput = function (ref) { + return _this.input = ref; + }, _this.format = function (value) { + var _this$props = _this.props, + country = _this$props.country, + metadata = _this$props.metadata; + + // "As you type" formatter. + + var formatter = new _core.AsYouType(country, metadata); + + // Format the number. + var text = formatter.input(value); + + return { text: text, template: formatter.getTemplate() }; + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + _createClass(InputSmart, [{ + key: 'render', + value: function render() { + var _props = this.props, + country = _props.country, + metadata = _props.metadata, + rest = _objectWithoutProperties(_props, ['country', 'metadata']); + + return _react2.default.createElement(_inputFormat.ReactInput, _extends({}, rest, { + ref: this.storeInput, + parse: _core.parsePhoneNumberCharacter, + format: this.format })); + } + }]); + + return InputSmart; + }(_react.Component), _class.defaultProps = { + metadata: defaultMetadata + }, _temp2; +} + +exports.default = createInput(); +//# sourceMappingURL=InputSmart.js.map \ No newline at end of file diff --git a/commonjs/InputSmart.js.map b/commonjs/InputSmart.js.map new file mode 100644 index 00000000..95244328 --- /dev/null +++ b/commonjs/InputSmart.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/InputSmart.js"],"names":["createInput","defaultMetadata","focus","input","storeInput","ref","format","value","props","country","metadata","formatter","AsYouType","text","template","getTemplate","rest","parsePhoneNumberCharacter","Component","defaultProps"],"mappings":";;;;;;;;;;QAQgBA,W,GAAAA,W;;AARhB;;;;AACA;;AACA;;;;;;;;;;;;AAEA;;;;AAIO,SAASA,WAAT,CAAqBC,eAArB,EACP;AAAA;;AACC;AAAA;;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA,6LAOCC,KAPD,GAOS;AAAA,WAAM,MAAKC,KAAL,CAAWD,KAAX,EAAN;AAAA,IAPT,QASCE,UATD,GASc,UAACC,GAAD;AAAA,WAAS,MAAKF,KAAL,GAAaE,GAAtB;AAAA,IATd,QAWCC,MAXD,GAWU,UAACC,KAAD,EACT;AAAA,sBAC+B,MAAKC,KADpC;AAAA,QACSC,OADT,eACSA,OADT;AAAA,QACkBC,QADlB,eACkBA,QADlB;;AAGC;;AACA,QAAMC,YAAY,IAAIC,eAAJ,CAAcH,OAAd,EAAuBC,QAAvB,CAAlB;;AAEA;AACA,QAAMG,OAAOF,UAAUR,KAAV,CAAgBI,KAAhB,CAAb;;AAEA,WAAO,EAAEM,UAAF,EAAQC,UAAUH,UAAUI,WAAV,EAAlB,EAAP;AACA,IAtBF;AAAA;;AAAA;AAAA;AAAA,4BAyBC;AAAA,iBACwC,KAAKP,KAD7C;AAAA,QACSC,OADT,UACSA,OADT;AAAA,QACkBC,QADlB,UACkBA,QADlB;AAAA,QAC+BM,IAD/B;;AAGC,WACC,8BAAC,uBAAD,eACKA,IADL;AAEC,UAAK,KAAKZ,UAFX;AAGC,YAAOa,+BAHR;AAIC,aAAQ,KAAKX,MAJd,IADD;AAOA;AAnCF;;AAAA;AAAA,GAAgCY,gBAAhC,UAEQC,YAFR,GAGC;AACCT,YAAWT;AADZ,EAHD;AAqCA;;kBAEcD,a","file":"InputSmart.js","sourcesContent":["import React, { Component } from 'react'\nimport { ReactInput } from 'input-format'\nimport { AsYouType, parsePhoneNumberCharacter } from 'libphonenumber-js/core'\n\n/**\n * This input uses `input-format` library\n * for \"smart\" caret positioning.\n */\nexport function createInput(defaultMetadata)\n{\n\treturn class InputSmart extends Component\n\t{\n\t\tstatic defaultProps =\n\t\t{\n\t\t\tmetadata : defaultMetadata\n\t\t}\n\n\t\tfocus = () => this.input.focus()\n\n\t\tstoreInput = (ref) => this.input = ref\n\n\t\tformat = (value) =>\n\t\t{\n\t\t\tconst { country, metadata } = this.props\n\n\t\t\t// \"As you type\" formatter.\n\t\t\tconst formatter = new AsYouType(country, metadata)\n\n\t\t\t// Format the number.\n\t\t\tconst text = formatter.input(value)\n\n\t\t\treturn { text, template: formatter.getTemplate() }\n\t\t}\n\n\t\trender()\n\t\t{\n\t\t\tconst { country, metadata, ...rest } = this.props\n\n\t\t\treturn (\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t}\n}\n\nexport default createInput()"]} \ No newline at end of file diff --git a/commonjs/InputSmartDefaultMetadata.js b/commonjs/InputSmartDefaultMetadata.js new file mode 100644 index 00000000..671fd005 --- /dev/null +++ b/commonjs/InputSmartDefaultMetadata.js @@ -0,0 +1,71 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = 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 _metadataMin = require('libphonenumber-js/metadata.min.json'); + +var _metadataMin2 = _interopRequireDefault(_metadataMin); + +var _InputSmart = require('./InputSmart'); + +var _InputSmart2 = _interopRequireDefault(_InputSmart); + +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; } // Deprecated. +// This is a file used in legacy `/index.js` export entry. +// In some next major version this file will be removed +// and `/index.js` will be redirected to `/min/index.js`. + +var InputSmartDefaultMetadata = function (_Component) { + _inherits(InputSmartDefaultMetadata, _Component); + + function InputSmartDefaultMetadata() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, InputSmartDefaultMetadata); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InputSmartDefaultMetadata.__proto__ || Object.getPrototypeOf(InputSmartDefaultMetadata)).call.apply(_ref, [this].concat(args))), _this), _this.focus = function () { + return _this.input.focus(); + }, _this.storeInputRef = function (ref) { + return _this.input = ref; + }, _temp), _possibleConstructorReturn(_this, _ret); + } + // Proxy `.focus()` method. + + + _createClass(InputSmartDefaultMetadata, [{ + key: 'render', + value: function render() { + return _react2.default.createElement(_InputSmart2.default, _extends({}, this.props, { + ref: this.storeInputRef, + metadata: _metadataMin2.default })); + } + }]); + + return InputSmartDefaultMetadata; +}(_react.Component); + +exports.default = InputSmartDefaultMetadata; +//# sourceMappingURL=InputSmartDefaultMetadata.js.map \ No newline at end of file diff --git a/commonjs/InputSmartDefaultMetadata.js.map b/commonjs/InputSmartDefaultMetadata.js.map new file mode 100644 index 00000000..2714715b --- /dev/null +++ b/commonjs/InputSmartDefaultMetadata.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/InputSmartDefaultMetadata.js"],"names":["InputSmartDefaultMetadata","focus","input","storeInputRef","ref","props","metadata","Component"],"mappings":";;;;;;;;;;;AAKA;;;;AACA;;;;AAEA;;;;;;;;;;+eARA;AACA;AACA;AACA;;IAOqBA,yB;;;;;;;;;;;;;;0NAGpBC,K,GAAQ;AAAA,UAAM,MAAKC,KAAL,CAAWD,KAAX,EAAN;AAAA,G,QAERE,a,GAAgB,UAACC,GAAD;AAAA,UAAS,MAAKF,KAAL,GAAaE,GAAtB;AAAA,G;;AAHhB;;;;;2BAMA;AACC,UACC,8BAAC,oBAAD,eACM,KAAKC,KADX;AAEC,SAAM,KAAKF,aAFZ;AAGC,cAAWG,qBAHZ,IADD;AAMA;;;;EAfqDC,gB;;kBAAlCP,yB","file":"InputSmartDefaultMetadata.js","sourcesContent":["// Deprecated.\n// This is a file used in legacy `/index.js` export entry.\n// In some next major version this file will be removed\n// and `/index.js` will be redirected to `/min/index.js`.\n\nimport React, { Component } from 'react'\nimport metadata from 'libphonenumber-js/metadata.min.json'\n\nimport InputSmart from './InputSmart'\n\nexport default class InputSmartDefaultMetadata extends Component\n{\n\t// Proxy `.focus()` method.\n\tfocus = () => this.input.focus()\n\n\tstoreInputRef = (ref) => this.input = ref\n\n\trender()\n\t{\n\t\treturn (\n\t\t\t\n\t\t)\n\t}\n}"]} \ No newline at end of file diff --git a/commonjs/InternationalIcon.js b/commonjs/InternationalIcon.js new file mode 100644 index 00000000..a3fa9553 --- /dev/null +++ b/commonjs/InternationalIcon.js @@ -0,0 +1,27 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = InternationalIcon; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function InternationalIcon() { + return _react2.default.createElement( + "svg", + { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50" }, + _react2.default.createElement("path", { stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", d: "M8.45,13A21.44,21.44,0,1,1,37.08,41.56" }), + _react2.default.createElement("path", { stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", d: "M19.36,35.47a36.9,36.9,0,0,1-2.28-13.24C17.08,10.39,21.88.85,27.8.85s10.72,9.54,10.72,21.38c0,6.48-1.44,12.28-3.71,16.21" }), + _react2.default.createElement("path", { stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", d: "M17.41,33.4A39,39,0,0,1,27.8,32.06c6.62,0,12.55,1.5,16.48,3.86" }), + _react2.default.createElement("path", { stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", d: "M44.29,8.53c-3.93,2.37-9.86,3.88-16.49,3.88S15.25,10.9,11.31,8.54" }), + _react2.default.createElement("line", { stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", x1: "27.8", y1: "0.85", x2: "27.8", y2: "34.61" }), + _react2.default.createElement("line", { stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", x1: "15.2", y1: "22.23", x2: "49.15", y2: "22.23" }), + _react2.default.createElement("path", { stroke: "transparent", fill: "currentColor", d: "M9.42,26.64c2.22-2.22,4.15-3.59.22-8.49S3.08,17,.93,19.17c-2.49,2.48-.13,11.74,9,20.89s18.41,11.5,20.89,9c2.15-2.15,5.91-4.77,1-8.71s-6.27-2-8.49.22c-1.55,1.55-5.48-1.69-8.86-5.08S7.87,28.19,9.42,26.64Z" }) + ); +} +//# sourceMappingURL=InternationalIcon.js.map \ No newline at end of file diff --git a/commonjs/InternationalIcon.js.map b/commonjs/InternationalIcon.js.map new file mode 100644 index 00000000..6d762146 --- /dev/null +++ b/commonjs/InternationalIcon.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/InternationalIcon.js"],"names":["InternationalIcon"],"mappings":";;;;;kBAEwBA,iB;;AAFxB;;;;;;AAEe,SAASA,iBAAT,GAA6B;AAC3C,QACC;AAAA;AAAA,IAAK,OAAM,4BAAX,EAAwC,SAAQ,WAAhD;AACC,0CAAM,QAAO,cAAb,EAA4B,MAAK,MAAjC,EAAwC,aAAY,KAApD,EAA0D,eAAc,OAAxE,EAAgF,GAAE,wCAAlF,GADD;AAEC,0CAAM,QAAO,cAAb,EAA4B,MAAK,MAAjC,EAAwC,aAAY,KAApD,EAA0D,eAAc,OAAxE,EAAgF,GAAE,0HAAlF,GAFD;AAGC,0CAAM,QAAO,cAAb,EAA4B,MAAK,MAAjC,EAAwC,aAAY,KAApD,EAA0D,eAAc,OAAxE,EAAgF,GAAE,gEAAlF,GAHD;AAIC,0CAAM,QAAO,cAAb,EAA4B,MAAK,MAAjC,EAAwC,aAAY,KAApD,EAA0D,eAAc,OAAxE,EAAgF,GAAE,mEAAlF,GAJD;AAKC,0CAAM,QAAO,cAAb,EAA4B,MAAK,MAAjC,EAAwC,aAAY,KAApD,EAA0D,eAAc,OAAxE,EAAgF,IAAG,MAAnF,EAA0F,IAAG,MAA7F,EAAoG,IAAG,MAAvG,EAA8G,IAAG,OAAjH,GALD;AAMC,0CAAM,QAAO,cAAb,EAA4B,MAAK,MAAjC,EAAwC,aAAY,KAApD,EAA0D,eAAc,OAAxE,EAAgF,IAAG,MAAnF,EAA0F,IAAG,OAA7F,EAAqG,IAAG,OAAxG,EAAgH,IAAG,OAAnH,GAND;AAOC,0CAAM,QAAO,aAAb,EAA2B,MAAK,cAAhC,EAA+C,GAAE,4MAAjD;AAPD,EADD;AAWA","file":"InternationalIcon.js","sourcesContent":["import React from 'react'\n\nexport default function InternationalIcon() {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t)\n}"]} \ No newline at end of file diff --git a/commonjs/PhoneInput.js b/commonjs/PhoneInput.js new file mode 100644 index 00000000..fcdb01ac --- /dev/null +++ b/commonjs/PhoneInput.js @@ -0,0 +1,1225 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = 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 _class, _class2, _temp, _initialiseProps; + +// import InputSmart from './InputSmart' + + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _reactLifecyclesCompat = require("react-lifecycles-compat"); + +var _core = require("libphonenumber-js/core"); + +var _InputBasic = require("./InputBasic"); + +var _InputBasic2 = _interopRequireDefault(_InputBasic); + +var _Flag = require("./Flag"); + +var _Flag2 = _interopRequireDefault(_Flag); + +var _PropTypes = require("./PropTypes"); + +var _inputControl = require("./input-control"); + +var _countries2 = require("./countries"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +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; } + +// `PureComponent` is only available in React >= 15.3.0. +var PureComponent = _react2.default.PureComponent || _react2.default.Component; + +var PhoneNumberInput = (0, _reactLifecyclesCompat.polyfill)(_class = (_temp = _class2 = function (_PureComponent) { + _inherits(PhoneNumberInput, _PureComponent); + + function PhoneNumberInput(props) { + _classCallCheck(this, PhoneNumberInput); + + var _this = _possibleConstructorReturn(this, (PhoneNumberInput.__proto__ || Object.getPrototypeOf(PhoneNumberInput)).call(this, props)); + + _initialiseProps.call(_this); + + var _this$props = _this.props, + value = _this$props.value, + labels = _this$props.labels, + international = _this$props.international, + metadata = _this$props.metadata; + var _this$props2 = _this.props, + country = _this$props2.country, + countries = _this$props2.countries, + countryOptions = _this$props2.countryOptions; + + // Validate `country`. + + if (country) { + if (!_this.isCountrySupportedWithError(country)) { + country = undefined; + } + } + + // Validate `countries`. + countries = filterCountries(countries, metadata); + + // Validate `countryOptions`. + countryOptions = filterCountryOptions(countryOptions, metadata); + + var phoneNumber = (0, _inputControl.parsePhoneNumber)(value, metadata); + + var pre_selected_country = (0, _inputControl.getPreSelectedCountry)(phoneNumber, country, countries || (0, _countries2.getCountryCodes)(labels).filter(function (_) { + return _ === "ZZ" || metadata.countries[_]; + }), international, metadata); + + _this.state = { + // Workaround for `this.props` inside `getDerivedStateFromProps()`. + props: _this.props, + + // The country selected. + country: pre_selected_country, + + // `countries` are stored in `this.state` because they're filtered. + // For example, a developer might theoretically pass some unsupported + // countries as part of the `countries` property, and because of that + // the component uses `this.state.countries` (which are filtered) + // instead of `this.props.countries` + // (which could potentially contain unsupported countries). + countries: countries, + + // Generate country `` `onChange` handler. + + + // Phone number `` `onKeyDown` handler. + + + /** + * `` `onChange()` handler. + * Updates `value` property accordingly (so that they are kept in sync). + * @param {string?} input — Either a parsed phone number or an empty string. Examples: `""`, `"+"`, `"+123"`, `"123"`. + */ + + + // Toggles the `--focus` CSS class. + + + // Toggles the `--focus` CSS class. + + + // This `onBlur` interceptor is a workaround for `redux-form` + // so that it gets the up-to-date `value` in its `onBlur` handler. + // Without this fix it just gets the actual (raw) input field textual value. + // E.g. `+7 800 555 35 35` instead of `+78005553535`. + // + // A developer is not supposed to pass this `onBlur` property manually. + // Instead, `redux-form` passes `onBlur` to this component automatically + // and this component patches that `onBlur` handler (a hacky way but works). + // + + + // When country `` value, e.g. `8005553535`. + // (and a couple of other less significant properties) + value: function getDerivedStateFromProps(props, state) { + var country = state.country, + hasUserSelectedACountry = state.hasUserSelectedACountry, + value = state.value, + _state$props = state.props, + old_default_country = _state$props.country, + old_value = _state$props.value; + var metadata = props.metadata, + countries = props.countries, + new_default_country = props.country, + new_value = props.value; + + + var new_state = { + // Emulate `prevProps` via `state.props`. + props: props, + // If the user has already manually selected a country + // then don't override that already selected country + // if the default `country` property changes. + // That's what `hasUserSelectedACountry` flag is for. + hasUserSelectedACountry: hasUserSelectedACountry + }; + + // If `countries` or `labels` or `international` changed + // then re-generate country `` + * and the country ``. + * + * Web browser's "autocomplete" feature + * remembers the phone number being input + * and can also autofill the `` + * with previously remembered phone numbers. + * + * https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill + * + * For example, can be used to turn it off: + * + * "So when should you use `autocomplete="off"`? + * One example is when you've implemented your own version + * of autocomplete for search. Another example is any form field + * where users will input and submit different kinds of information + * where it would not be useful to have the browser remember + * what was submitted previously". + */ + // (is `"tel"` by default) + autoComplete: _propTypes2.default.string.isRequired, + + /** + * Set to `true` to show the initial `value` in + * "national" format rather than "international". + * + * For example, if this flag is set to `true` + * and the initial `value="+12133734253"` is passed + * then the `` value will be `"(213) 373-4253"`. + * + * By default, this flag is set to `false`, + * meaning that if the initial `value="+12133734253"` is passed + * then the `` value will be `"+1 213 373 4253"`. + * + * The reason for such default behaviour is that + * the newer generation grows up when there are no stationary phones + * and therefore everyone inputs phone numbers in international format + * in their smartphones so people gradually get more accustomed to + * writing phone numbers in international format rather than in local format. + * Future people won't be using "national" format, only "international". + */ + // (is `false` by default) + displayInitialValueAsLocalNumber: _propTypes2.default.bool.isRequired, + + /** + * The country to be selected by default. + * For example, can be set after a GeoIP lookup. + * + * Example: `"US"`. + */ + // A two-letter country code ("ISO 3166-1 alpha-2"). + country: _propTypes2.default.string, + + /** + * If specified, only these countries will be available for selection. + * + * Example: + * + * `["RU", "UA", "KZ"]` + */ + countries: _propTypes2.default.arrayOf(_propTypes2.default.string), + + /** + * Custom country `` `aria-label`. + * + * Example: + * + * `{ "ZZ": "Международный", RU: "Россия", US: "США", ... }` + * + * See the `locales` directory for examples. + */ + labels: _PropTypes.labels.isRequired, + + /** + * The base URL path for country flag icons. + * By default it loads country flag icons from + * `flag-icon-css` repo github pages website. + * I imagine someone might want to download + * those country flag icons and host them + * on their own servers instead. + * Warning: in future new countries can be added + * to the country select which would result in + * "Image not found" errors when using custom `flagsPath` + * due to the custom-hosted flags bundle being outdated + * and missing the new flags. + * So if using custom `flagsPath` always check `CHANGELOG.md` + * for new country announcements before updating this library. + */ + flagsPath: _propTypes2.default.string.isRequired, + + /** + * Custom country flag icon components. + * These flags replace the default ones. + * + * The shape is an object where keys are country codes + * and values are flag icon components. + * Flag icon components receive the same properties + * as `flagComponent` (see below). + * + * Example: + * + * `{ "RU": () => }` + * + * Can be used to replace the default flags + * with custom ones for certain (or all) countries. + * + * Can also be used to bundle `` flags instead of ``s: + * + * By default flag icons are inserted as ``s + * with their `src` pointed to `flag-icon-css` repo github pages website. + * + * There might be some cases + * (e.g. a standalone "native" app, or an "intranet" web application) + * when including the full set of `` country flags (3 megabytes) + * is more appropriate than downloading them individually at runtime only if needed. + * + * Example: + * + * `// Uses flags (3 megabytes):` + * + * `import flags from 'react-phone-number-input/flags'` + * + * `import PhoneInput from 'react-phone-number-input'` + * + * `` + */ + flags: _propTypes2.default.objectOf(_propTypes2.default.element), + + /** + * Country flag icon component. + * + * Takes properties: + * + * * country : string — The country code. + * * flagsPath : string — The `flagsPath` property (see above). + * * flags : object — The `flags` property (see above). + */ + flagComponent: _propTypes2.default.element.isRequired, + + /** + * Set to `false` to drop the "International" option from country `` option icon. + */ + internationalIcon: _propTypes2.default.element.isRequired, + + /** + * Set to `false` to hide country ``. + */ + countrySelectTabIndex: _propTypes2.default.number, + + /** + * HTML `aria-label` attribute for country `` options. + * + * * `"|"` — inserts a separator. + * * `"..."` — means "the rest of the countries" (can be omitted). + * + * Example: + * + * `["US", "CA", "AU", "|", "..."]` + */ + countryOptions: _propTypes2.default.arrayOf(_propTypes2.default.string), + + /** + * `` component CSS style object. + */ + style: _propTypes2.default.object, + + /** + * `` component CSS class. + */ + className: _propTypes2.default.string, + + /** + * Phone number `` CSS class. + */ + inputClassName: _propTypes2.default.string, + + /** + * Returns phone number `` CSS class string. + * Receives an object of shape `{ disabled : boolean?, invalid : boolean? }`. + * @ignore + */ + getInputClassName: _propTypes2.default.func, + + /** + * Country `` uses this to hide phone number input when country select is expanded. + // * `focusPhoneInputField()` — Can be called to manually focus phone input field. E.g. `react-responsive-ui` `` component props. + */ + countrySelectProps: _propTypes2.default.object, + + /** + * Phone number `` component. + * + * Receives properties: + * + * * `value: string` — The formatted `value`. + * * `onChange(event: Event)` — Updates the formatted `value` from `event.target.value`. + * * `onFocus()` — Is used to toggle the `--focus` CSS class. + * * `onBlur(event: Event)` — Is used to toggle the `--focus` CSS class. + * * Other properties like `type="tel"` or `autoComplete="tel"` that should be passed through to the DOM ``. + * + * Must also either use `React.forwardRef()` to "forward" `ref` to the `` or implement `.focus()` method. + */ + numberInputComponent: _propTypes2.default.element.isRequired, + + /** + * Phone number `` component props. + */ + numberInputProps: _propTypes2.default.object, + + /** + * Phone number `` component (a higher-order one). + * + * Receives properties: + * + * * `value : string` — The parsed phone number. E.g.: `""`, `"+"`, `"+123"`, `"123"`. + * * `onChange(value? : string)` — Updates the `value`. + * * `onFocus()` — Is used to toggle the `--focus` CSS class. + * * `onBlur()` — Is used to toggle the `--focus` CSS class. + * * `country : string?` — The currently selected country. `undefined` means "International" (no country selected). + * * `metadata : object` — `libphonenumber-js` metadata. + * * `inputComponent : element` — Phone number `` component. This is basically the `numberInputComponent` property renamed to `inputComponent`. + * * All other properties should be passed through to the underlying ``. + * + * Must also either use `React.forwardRef()` to "forward" `ref` to the `` or implement `.focus()` method. + * + * @ignore + */ + inputComponent: _propTypes2.default.element.isRequired, + + /** + * Set to `false` to use `inputComponent={InputBasic}` + * instead of `input-format`'s ``. + */ + // Is `false` by default. + // smartCaret : PropTypes.bool.isRequired, + + /** + * Phone number extension `` element. + * + * Example: + * + * `ext={}` + */ + ext: _propTypes2.default.node, + + /** + * If set to `true` the phone number input will get trimmed + * if it exceeds the maximum length for the country. + */ + limitMaxLength: _propTypes2.default.bool.isRequired, + + /** + * An error message to show below the phone number ``. For example, `"Required"`. + */ + error: _propTypes2.default.string, + + /** + * The `error` is shown only when `indicateInvalid` is `true`. + * (which is the default). + * @deprecated + * @ignore + */ + indicateInvalid: _propTypes2.default.bool, + + /** + * `libphonenumber-js` metadata. + * + * Can be used to pass custom `libphonenumber-js` metadata + * to reduce the overall bundle size for those who compile "custom" metadata. + */ + metadata: _PropTypes.metadata.isRequired, + + /** + * Is called every time the selected country changes: + * either programmatically or when user selects it manually from the list. + */ + // People have been asking for a way to get the selected country. + // @see https://github.com/catamphetamine/react-phone-number-input/issues/128 + // For some it's just a "business requirement". + // I guess it's about gathering as much info on the user as a website can + // without introducing any addional fields that would complicate the form + // therefore reducing "conversion" (that's a marketing term). + // Assuming that the phone number's country is the user's country + // is not 100% correct but in most cases I guess it's valid. + onCountryChange: _propTypes2.default.func, + + /** + * Disables only the phone number ``. + * + * Some users choose to implement a digital keyboard component for phone number input. + * In such cases the phone number input field must be disabled in order for the default system keyboard to not show up on focus. + * At the same time, country select should not be disabled in order for the user to be able to choose their country. + */ + // (is `false` by default) + // https://github.com/catamphetamine/react-phone-number-input/issues/215 + disablePhoneInput: _propTypes2.default.bool.isRequired +}, _class2.defaultProps = { + /** + * Not disabled. + */ + disabled: false, + disablePhoneInput: false, + + /** + * Show `error` (if passed). + * @deprecated + */ + indicateInvalid: true, + + /** + * Remember (and autofill) the value as a phone number. + */ + autoComplete: "tel", + + /** + * Flag icon component. + */ + flagComponent: _Flag2.default, + + /** + * By default, use icons from `flag-icon-css` github repo. + */ + flagsPath: "https://lipis.github.io/flag-icon-css/flags/4x3/", + + /** + * Default "International" country `` component. + */ + numberInputComponent: "input", + + /** + * Phone number `` component (a higher-order one). + */ + inputComponent: _InputBasic2.default, + + /** + * Show country `` holds any digits + // then migrate those digits for the new `country`. + + var new_parsed_input = (0, _inputControl.migrateParsedInputForNewCountry)(old_parsed_input, old_country, new_country, metadata, + // Convert to "local" phone number format. + true); + + var new_value = (0, _inputControl.e164)(new_parsed_input, new_country, metadata); + + // Focus phone number `` upon country selection. + _this2.focus(); + + // If the user has already manually selected a country + // then don't override that already selected country + // if the default `country` property changes. + // That's what `hasUserSelectedACountry` flag is for. + + _this2.setState({ + country: new_country, + hasUserSelectedACountry: true, + parsed_input: new_parsed_input, + value: new_value + }, function () { + // Update the new `value` property. + // Doing it after the `state` has been updated + // because `onChange()` will trigger `getDerivedStateFromProps()` + // with the new `value` which will be compared to `state.value` there. + onChange(new_value); + }); + }; + + this.onPhoneNumberKeyDown = function (event) { + var onKeyDown = _this2.props.onKeyDown; + + // Actually "Down arrow" key is used for showing "autocomplete" ("autofill") options. + // (e.g. previously entered phone numbers for `autoComplete="tel"`) + // so can't hijack "Down arrow" keypress here. + // // Expand country `` options. + + +exports.default = PhoneNumberInput; +function generateCountrySelectOptions(countries, countryOptions, props) { + var labels = props.labels, + international = props.international, + metadata = props.metadata; + + + var CountrySelectOptionIcon = createCountrySelectOptionIconComponent(props); + + return transformCountryOptions((0, _inputControl.getCountrySelectOptions)(countries || (0, _countries2.getCountryCodes)(labels).filter(function (country) { + return country === "ZZ" || isCountrySupported(country, metadata); + }), labels, international).map(function (_ref) { + var value = _ref.value, + label = _ref.label; + return { + value: value, + label: label, + icon: CountrySelectOptionIcon + }; + }), countryOptions); +} + +function createCountrySelectOptionIconComponent(props) { + var flags = props.flags, + flagsPath = props.flagsPath, + FlagComponent = props.flagComponent, + InternationalIcon = props.internationalIcon; + + + return function (_ref2) { + var value = _ref2.value; + return _react2.default.createElement( + "div", + { + className: (0, _classnames2.default)("react-phone-number-input__icon", { + "react-phone-number-input__icon--international": value === undefined + }) + }, + value ? _react2.default.createElement(FlagComponent, { country: value, flags: flags, flagsPath: flagsPath }) : _react2.default.createElement(InternationalIcon, null) + ); + }; +} + +// Can move some country ``\n * and the country ``.\n *\n * Web browser's \"autocomplete\" feature\n * remembers the phone number being input\n * and can also autofill the ``\n * with previously remembered phone numbers.\n *\n * https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill\n *\n * For example, can be used to turn it off:\n *\n * \"So when should you use `autocomplete=\"off\"`?\n * One example is when you've implemented your own version\n * of autocomplete for search. Another example is any form field\n * where users will input and submit different kinds of information\n * where it would not be useful to have the browser remember\n * what was submitted previously\".\n */\n // (is `\"tel\"` by default)\n autoComplete: PropTypes.string.isRequired,\n\n /**\n * Set to `true` to show the initial `value` in\n * \"national\" format rather than \"international\".\n *\n * For example, if this flag is set to `true`\n * and the initial `value=\"+12133734253\"` is passed\n * then the `` value will be `\"(213) 373-4253\"`.\n *\n * By default, this flag is set to `false`,\n * meaning that if the initial `value=\"+12133734253\"` is passed\n * then the `` value will be `\"+1 213 373 4253\"`.\n *\n * The reason for such default behaviour is that\n * the newer generation grows up when there are no stationary phones\n * and therefore everyone inputs phone numbers in international format\n * in their smartphones so people gradually get more accustomed to\n * writing phone numbers in international format rather than in local format.\n * Future people won't be using \"national\" format, only \"international\".\n */\n // (is `false` by default)\n displayInitialValueAsLocalNumber: PropTypes.bool.isRequired,\n\n /**\n * The country to be selected by default.\n * For example, can be set after a GeoIP lookup.\n *\n * Example: `\"US\"`.\n */\n // A two-letter country code (\"ISO 3166-1 alpha-2\").\n country: PropTypes.string,\n\n /**\n * If specified, only these countries will be available for selection.\n *\n * Example:\n *\n * `[\"RU\", \"UA\", \"KZ\"]`\n */\n countries: PropTypes.arrayOf(PropTypes.string),\n\n /**\n * Custom country `` `aria-label`.\n *\n * Example:\n *\n * `{ \"ZZ\": \"Международный\", RU: \"Россия\", US: \"США\", ... }`\n *\n * See the `locales` directory for examples.\n */\n labels: labelsPropType.isRequired,\n\n /**\n * The base URL path for country flag icons.\n * By default it loads country flag icons from\n * `flag-icon-css` repo github pages website.\n * I imagine someone might want to download\n * those country flag icons and host them\n * on their own servers instead.\n * Warning: in future new countries can be added\n * to the country select which would result in\n * \"Image not found\" errors when using custom `flagsPath`\n * due to the custom-hosted flags bundle being outdated\n * and missing the new flags.\n * So if using custom `flagsPath` always check `CHANGELOG.md`\n * for new country announcements before updating this library.\n */\n flagsPath: PropTypes.string.isRequired,\n\n /**\n * Custom country flag icon components.\n * These flags replace the default ones.\n *\n * The shape is an object where keys are country codes\n * and values are flag icon components.\n * Flag icon components receive the same properties\n * as `flagComponent` (see below).\n *\n * Example:\n *\n * `{ \"RU\": () => }`\n *\n * Can be used to replace the default flags\n * with custom ones for certain (or all) countries.\n *\n * Can also be used to bundle `` flags instead of ``s:\n *\n * By default flag icons are inserted as ``s\n * with their `src` pointed to `flag-icon-css` repo github pages website.\n *\n * There might be some cases\n * (e.g. a standalone \"native\" app, or an \"intranet\" web application)\n * when including the full set of `` country flags (3 megabytes)\n * is more appropriate than downloading them individually at runtime only if needed.\n *\n * Example:\n *\n * `// Uses flags (3 megabytes):`\n *\n * `import flags from 'react-phone-number-input/flags'`\n *\n * `import PhoneInput from 'react-phone-number-input'`\n *\n * ``\n */\n flags: PropTypes.objectOf(PropTypes.element),\n\n /**\n * Country flag icon component.\n *\n * Takes properties:\n *\n * * country : string — The country code.\n * * flagsPath : string — The `flagsPath` property (see above).\n * * flags : object — The `flags` property (see above).\n */\n flagComponent: PropTypes.element.isRequired,\n\n /**\n * Set to `false` to drop the \"International\" option from country `` option icon.\n */\n internationalIcon: PropTypes.element.isRequired,\n\n /**\n * Set to `false` to hide country ``.\n */\n countrySelectTabIndex: PropTypes.number,\n\n /**\n * HTML `aria-label` attribute for country `` options.\n *\n * * `\"|\"` — inserts a separator.\n * * `\"...\"` — means \"the rest of the countries\" (can be omitted).\n *\n * Example:\n *\n * `[\"US\", \"CA\", \"AU\", \"|\", \"...\"]`\n */\n countryOptions: PropTypes.arrayOf(PropTypes.string),\n\n /**\n * `` component CSS style object.\n */\n style: PropTypes.object,\n\n /**\n * `` component CSS class.\n */\n className: PropTypes.string,\n\n /**\n * Phone number `` CSS class.\n */\n inputClassName: PropTypes.string,\n\n /**\n * Returns phone number `` CSS class string.\n * Receives an object of shape `{ disabled : boolean?, invalid : boolean? }`.\n * @ignore\n */\n getInputClassName: PropTypes.func,\n\n /**\n * Country `` uses this to hide phone number input when country select is expanded.\n // * `focusPhoneInputField()` — Can be called to manually focus phone input field. E.g. `react-responsive-ui` `` component props.\n */\n countrySelectProps: PropTypes.object,\n\n /**\n * Phone number `` component.\n *\n * Receives properties:\n *\n * * `value: string` — The formatted `value`.\n * * `onChange(event: Event)` — Updates the formatted `value` from `event.target.value`.\n * * `onFocus()` — Is used to toggle the `--focus` CSS class.\n * * `onBlur(event: Event)` — Is used to toggle the `--focus` CSS class.\n * * Other properties like `type=\"tel\"` or `autoComplete=\"tel\"` that should be passed through to the DOM ``.\n *\n * Must also either use `React.forwardRef()` to \"forward\" `ref` to the `` or implement `.focus()` method.\n */\n numberInputComponent: PropTypes.element.isRequired,\n\n /**\n * Phone number `` component props.\n */\n numberInputProps: PropTypes.object,\n\n /**\n * Phone number `` component (a higher-order one).\n *\n * Receives properties:\n *\n * * `value : string` — The parsed phone number. E.g.: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\n * * `onChange(value? : string)` — Updates the `value`.\n * * `onFocus()` — Is used to toggle the `--focus` CSS class.\n * * `onBlur()` — Is used to toggle the `--focus` CSS class.\n * * `country : string?` — The currently selected country. `undefined` means \"International\" (no country selected).\n * * `metadata : object` — `libphonenumber-js` metadata.\n * * `inputComponent : element` — Phone number `` component. This is basically the `numberInputComponent` property renamed to `inputComponent`.\n * * All other properties should be passed through to the underlying ``.\n *\n * Must also either use `React.forwardRef()` to \"forward\" `ref` to the `` or implement `.focus()` method.\n *\n * @ignore\n */\n inputComponent: PropTypes.element.isRequired,\n\n /**\n * Set to `false` to use `inputComponent={InputBasic}`\n * instead of `input-format`'s ``.\n */\n // Is `false` by default.\n // smartCaret : PropTypes.bool.isRequired,\n\n /**\n * Phone number extension `` element.\n *\n * Example:\n *\n *\t`ext={}`\n */\n ext: PropTypes.node,\n\n /**\n * If set to `true` the phone number input will get trimmed\n * if it exceeds the maximum length for the country.\n */\n limitMaxLength: PropTypes.bool.isRequired,\n\n /**\n * An error message to show below the phone number ``. For example, `\"Required\"`.\n */\n error: PropTypes.string,\n\n /**\n * The `error` is shown only when `indicateInvalid` is `true`.\n * (which is the default).\n * @deprecated\n * @ignore\n */\n indicateInvalid: PropTypes.bool,\n\n /**\n * `libphonenumber-js` metadata.\n *\n * Can be used to pass custom `libphonenumber-js` metadata\n * to reduce the overall bundle size for those who compile \"custom\" metadata.\n */\n metadata: metadataPropType.isRequired,\n\n /**\n * Is called every time the selected country changes:\n * either programmatically or when user selects it manually from the list.\n */\n // People have been asking for a way to get the selected country.\n // @see https://github.com/catamphetamine/react-phone-number-input/issues/128\n // For some it's just a \"business requirement\".\n // I guess it's about gathering as much info on the user as a website can\n // without introducing any addional fields that would complicate the form\n // therefore reducing \"conversion\" (that's a marketing term).\n // Assuming that the phone number's country is the user's country\n // is not 100% correct but in most cases I guess it's valid.\n onCountryChange: PropTypes.func,\n\n /**\n * Disables only the phone number ``.\n *\n * Some users choose to implement a digital keyboard component for phone number input.\n * In such cases the phone number input field must be disabled in order for the default system keyboard to not show up on focus.\n * At the same time, country select should not be disabled in order for the user to be able to choose their country.\n */\n // (is `false` by default)\n // https://github.com/catamphetamine/react-phone-number-input/issues/215\n disablePhoneInput: PropTypes.bool.isRequired\n };\n\n static defaultProps = {\n /**\n * Not disabled.\n */\n disabled: false,\n disablePhoneInput: false,\n\n /**\n * Show `error` (if passed).\n * @deprecated\n */\n indicateInvalid: true,\n\n /**\n * Remember (and autofill) the value as a phone number.\n */\n autoComplete: \"tel\",\n\n /**\n * Flag icon component.\n */\n flagComponent: FlagComponent,\n\n /**\n * By default, use icons from `flag-icon-css` github repo.\n */\n flagsPath: \"https://lipis.github.io/flag-icon-css/flags/4x3/\",\n\n /**\n * Default \"International\" country `` component.\n */\n numberInputComponent: \"input\",\n\n /**\n * Phone number `` component (a higher-order one).\n */\n inputComponent: InputBasic,\n\n /**\n * Show country `` options.\n country_select_options: generateCountrySelectOptions(\n countries,\n countryOptions,\n this.props\n ),\n\n // `parsed_input` state property holds non-formatted user's input.\n // The reason is that there's no way of finding out\n // in which form should `value` be displayed: international or national.\n // E.g. if `value` is `+78005553535` then it could be input\n // by a user both as `8 (800) 555-35-35` and `+7 800 555 35 35`.\n // Hence storing just `value`is not sufficient for correct formatting.\n // E.g. if a user entered `8 (800) 555-35-35`\n // then value is `+78005553535` and `parsed_input` is `88005553535`\n // and if a user entered `+7 800 555 35 35`\n // then value is `+78005553535` and `parsed_input` is `+78005553535`.\n parsed_input: generateParsedInput(value, phoneNumber, this.props),\n\n // `value` property is duplicated in state.\n // The reason is that `getDerivedStateFromProps()`\n // needs this `value` to compare to the new `value` property\n // to find out if `parsed_input` needs updating:\n // If the `value` property was changed externally\n // then it won't be equal to `state.value`\n // in which case `parsed_input` and `country` should be updated.\n value\n };\n }\n\n componentDidMount() {\n const { onCountryChange } = this.props;\n let { country } = this.props;\n const { country: selectedCountry } = this.state;\n\n if (onCountryChange) {\n if (!country || !this.isCountrySupportedWithError(country)) {\n country = undefined;\n }\n if (selectedCountry !== country) {\n onCountryChange(selectedCountry);\n }\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { onCountryChange } = this.props;\n // Call `onCountryChange` when user selects another country.\n if (onCountryChange && this.state.country !== prevState.country) {\n onCountryChange(this.state.country);\n }\n }\n\n // A shorthand for not passing `metadata` as a second argument.\n isCountrySupportedWithError = country => {\n const { metadata } = this.props;\n return isCountrySupportedWithError(country, metadata);\n };\n\n // Country `` holds any digits\n // then migrate those digits for the new `country`.\n const new_parsed_input = migrateParsedInputForNewCountry(\n old_parsed_input,\n old_country,\n new_country,\n metadata,\n // Convert to \"local\" phone number format.\n true\n );\n\n const new_value = e164(new_parsed_input, new_country, metadata);\n\n // Focus phone number `` upon country selection.\n this.focus();\n\n // If the user has already manually selected a country\n // then don't override that already selected country\n // if the default `country` property changes.\n // That's what `hasUserSelectedACountry` flag is for.\n\n this.setState(\n {\n country: new_country,\n hasUserSelectedACountry: true,\n parsed_input: new_parsed_input,\n value: new_value\n },\n () => {\n // Update the new `value` property.\n // Doing it after the `state` has been updated\n // because `onChange()` will trigger `getDerivedStateFromProps()`\n // with the new `value` which will be compared to `state.value` there.\n onChange(new_value);\n }\n );\n };\n\n // Phone number `` `onKeyDown` handler.\n onPhoneNumberKeyDown = event => {\n const { onKeyDown } = this.props;\n\n // Actually \"Down arrow\" key is used for showing \"autocomplete\" (\"autofill\") options.\n // (e.g. previously entered phone numbers for `autoComplete=\"tel\"`)\n // so can't hijack \"Down arrow\" keypress here.\n // // Expand country `` `onChange()` handler.\n * Updates `value` property accordingly (so that they are kept in sync).\n * @param {string?} input — Either a parsed phone number or an empty string. Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\n */\n onChange = _input => {\n const { onChange, international, limitMaxLength, metadata } = this.props;\n\n const { input, country, value } = parseInput(\n _input,\n this.state.parsed_input,\n this.state.country,\n this.state.countries,\n international,\n limitMaxLength,\n metadata\n );\n\n this.setState(\n {\n parsed_input: input,\n value,\n country\n },\n // Update the new `value` property.\n // Doing it after the `state` has been updated\n // because `onChange()` will trigger `getDerivedStateFromProps()`\n // with the new `value` which will be compared to `state.value` there.\n () => onChange(value)\n );\n };\n\n // Toggles the `--focus` CSS class.\n _onFocus = () => this.setState({ isFocused: true });\n\n // Toggles the `--focus` CSS class.\n _onBlur = () => this.setState({ isFocused: false });\n\n onFocus = event => {\n const { onFocus } = this.props;\n this._onFocus();\n if (onFocus) {\n onFocus(event);\n }\n };\n\n // This `onBlur` interceptor is a workaround for `redux-form`\n // so that it gets the up-to-date `value` in its `onBlur` handler.\n // Without this fix it just gets the actual (raw) input field textual value.\n // E.g. `+7 800 555 35 35` instead of `+78005553535`.\n //\n // A developer is not supposed to pass this `onBlur` property manually.\n // Instead, `redux-form` passes `onBlur` to this component automatically\n // and this component patches that `onBlur` handler (a hacky way but works).\n //\n onBlur = event => {\n const { onBlur } = this.props;\n const { value } = this.state;\n\n this._onBlur();\n\n if (!onBlur) {\n return;\n }\n\n // `event` is React's `SyntheticEvent`.\n // Its `.value` is read-only therefore cloning it.\n const _event = {\n ...event,\n target: {\n ...event.target,\n value\n }\n };\n\n // For `redux-form` event detection.\n // https://github.com/erikras/redux-form/blob/v5/src/events/isEvent.js\n _event.stopPropagation = event.stopPropagation;\n _event.preventDefault = event.preventDefault;\n\n return onBlur(_event);\n };\n\n // When country `` value, e.g. `8005553535`.\n // (and a couple of other less significant properties)\n static getDerivedStateFromProps(props, state) {\n const {\n country,\n hasUserSelectedACountry,\n value,\n props: { country: old_default_country, value: old_value }\n } = state;\n\n const {\n metadata,\n countries,\n country: new_default_country,\n value: new_value\n } = props;\n\n const new_state = {\n // Emulate `prevProps` via `state.props`.\n props,\n // If the user has already manually selected a country\n // then don't override that already selected country\n // if the default `country` property changes.\n // That's what `hasUserSelectedACountry` flag is for.\n hasUserSelectedACountry\n };\n\n // If `countries` or `labels` or `international` changed\n // then re-generate country `` and phone number `` */}\n
\n {/* Country `` */}\n {!hidePhoneInputField && (\n \n )}\n\n {/* Phone extension `` */}\n {ext && !hidePhoneInputField && (\n \n )}\n
\n\n {/* Error message */}\n {error && indicateInvalid && (\n
{error}
\n )}\n
\n );\n }\n}\n\n// Generates country `` options\n// to the top of the list, for example.\n// See `countryOptions` property.\nfunction transformCountryOptions(options, transform) {\n if (!transform) {\n return options;\n }\n\n const optionsOnTop = [];\n const optionsOnBottom = [];\n let appendTo = optionsOnTop;\n\n for (const element of transform) {\n if (element === \"|\") {\n appendTo.push({ divider: true });\n } else if (element === \"...\" || element === \"…\") {\n appendTo = optionsOnBottom;\n } else {\n // Find the position of the option.\n const index = options.indexOf(\n options.filter(option => option.value === element)[0]\n );\n // Get the option.\n const option = options[index];\n // Remove the option from its default position.\n options.splice(index, 1);\n // Add the option on top.\n appendTo.push(option);\n }\n }\n\n return optionsOnTop.concat(options).concat(optionsOnBottom);\n}\n\nfunction generateParsedInput(value, phoneNumber, props) {\n const { displayInitialValueAsLocalNumber } = props;\n\n // If the `value` (E.164 phone number)\n // belongs to the currently selected country\n // and `displayInitialValueAsLocalNumber` property is `true`\n // then convert `value` (E.164 phone number)\n // to a local phone number digits.\n // E.g. '+78005553535' -> '88005553535'.\n if (displayInitialValueAsLocalNumber && phoneNumber && phoneNumber.country) {\n return generateNationalNumberDigits(phoneNumber);\n }\n\n return value;\n}\n\nfunction isCountrySupported(country, metadata) {\n return metadata.countries.hasOwnProperty(country);\n}\n\nfunction isCountrySupportedWithError(country, metadata) {\n if (isCountrySupported(country, metadata)) {\n return true;\n } else {\n console.error(`Country not found: ${country}`);\n return false;\n }\n}\n\nfunction isCountryOptionSupportedWithError(countryOption, metadata) {\n switch (countryOption) {\n case \"|\":\n case \"...\":\n case \"…\":\n return true;\n default:\n return isCountrySupportedWithError(countryOption, metadata);\n }\n}\n\nfunction filterCountries(countries, metadata) {\n if (countries) {\n countries = countries.filter(country =>\n isCountrySupportedWithError(country, metadata)\n );\n if (countries.length === 0) {\n countries = undefined;\n }\n }\n return countries;\n}\n\nfunction filterCountryOptions(countryOptions, metadata) {\n if (countryOptions) {\n countryOptions = countryOptions.filter(countryOption =>\n isCountryOptionSupportedWithError(countryOption, metadata)\n );\n if (countryOptions.length === 0) {\n countryOptions = undefined;\n }\n }\n return countryOptions;\n}\n\nfunction parseExtDigits(event) {\n if (event) {\n if (typeof event === \"string\") {\n event = parseDigits(event);\n } else if (event.target && event.target.value) {\n event.target.value = parseDigits(event.target.value);\n }\n }\n return event;\n}\n"]} \ No newline at end of file diff --git a/commonjs/PhoneInputNative.js b/commonjs/PhoneInputNative.js new file mode 100644 index 00000000..142765e9 --- /dev/null +++ b/commonjs/PhoneInputNative.js @@ -0,0 +1,96 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = 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 _class, _temp2; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _PhoneInput = require('./PhoneInput'); + +var _PhoneInput2 = _interopRequireDefault(_PhoneInput); + +var _CountrySelectNative = require('./CountrySelectNative'); + +var _CountrySelectNative2 = _interopRequireDefault(_CountrySelectNative); + +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 PhoneInputNative = (_temp2 = _class = function (_Component) { + _inherits(PhoneInputNative, _Component); + + function PhoneInputNative() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, PhoneInputNative); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PhoneInputNative.__proto__ || Object.getPrototypeOf(PhoneInputNative)).call.apply(_ref, [this].concat(args))), _this), _this.storeInputRef = function (ref) { + return _this.input = ref; + }, _this.focus = function () { + return _this.input.focus(); + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + // These two country-select-related properties are + // implemented as `defaultProps` instead of passing them + // directly to the `` because `` + // is the default export of this library and therefore people pass + // `countrySelectComponent` property to this `` component + // and when they don't see any changes they might get confused. + // https://github.com/catamphetamine/react-phone-number-input/issues/229 + + + _createClass(PhoneInputNative, [{ + key: 'render', + value: function render() { + return _react2.default.createElement(_PhoneInput2.default, _extends({ ref: this.storeInputRef }, this.props)); + } + + // Proxy `.focus()` method. + + }]); + + return PhoneInputNative; +}(_react.Component), _class.propTypes = { + // (optional) + // Replaces the default country select arrow. + countrySelectArrowComponent: _propTypes2.default.element }, _class.defaultProps = { + countrySelectComponent: _CountrySelectNative2.default, + countrySelectProperties: COUNTRY_SELECT_PROPERTIES +}, _temp2); +exports.default = PhoneInputNative; + + +var COUNTRY_SELECT_PROPERTIES = { + countrySelectArrowComponent: 'selectArrowComponent' +}; +//# sourceMappingURL=PhoneInputNative.js.map \ No newline at end of file diff --git a/commonjs/PhoneInputNative.js.map b/commonjs/PhoneInputNative.js.map new file mode 100644 index 00000000..c3c95373 --- /dev/null +++ b/commonjs/PhoneInputNative.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/PhoneInputNative.js"],"names":["PhoneInputNative","storeInputRef","ref","input","focus","props","Component","propTypes","countrySelectArrowComponent","PropTypes","element","defaultProps","countrySelectComponent","CountrySelect","countrySelectProperties","COUNTRY_SELECT_PROPERTIES"],"mappings":";;;;;;;;;;;;;AAAA;;;;AACA;;;;AACA;;;;AAEA;;;;AACA;;;;;;;;;;;;IAEqBA,gB;;;;;;;;;;;;;;wMAoBpBC,a,GAAgB,UAACC,GAAD;AAAA,UAAS,MAAKC,KAAL,GAAaD,GAAtB;AAAA,G,QAShBE,K,GAAQ;AAAA,UAAM,MAAKD,KAAL,CAAWC,KAAX,EAAN;AAAA,G;;;AArBR;AACA;AACA;AACA;AACA;AACA;AACA;;;;;2BAQS;AACR,UACC,8BAAC,oBAAD,aAAY,KAAK,KAAKH,aAAtB,IAAyC,KAAKI,KAA9C,EADD;AAGA;;AAED;;;;;EA5B6CC,gB,UAEtCC,S,GAAY;AAClB;AACA;AACAC,8BAA8BC,oBAAUC,OAHtB,E,SAaZC,Y,GAAe;AACrBC,yBAAwBC,6BADH;AAErBC,0BAAyBC;AAFJ,C;kBAfFf,gB;;;AAgCrB,IAAMe,4BAA4B;AACjCP,8BAA8B;AADG,CAAlC","file":"PhoneInputNative.js","sourcesContent":["import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport PhoneInput from './PhoneInput'\nimport CountrySelect from './CountrySelectNative'\n\nexport default class PhoneInputNative extends Component\n{\n\tstatic propTypes = {\n\t\t// (optional)\n\t\t// Replaces the default country select arrow.\n\t\tcountrySelectArrowComponent : PropTypes.element\n\t}\n\n\t// These two country-select-related properties are\n\t// implemented as `defaultProps` instead of passing them\n\t// directly to the `` because ``\n\t// is the default export of this library and therefore people pass\n\t// `countrySelectComponent` property to this `` component\n\t// and when they don't see any changes they might get confused.\n\t// https://github.com/catamphetamine/react-phone-number-input/issues/229\n\tstatic defaultProps = {\n\t\tcountrySelectComponent: CountrySelect,\n\t\tcountrySelectProperties: COUNTRY_SELECT_PROPERTIES\n\t}\n\n\tstoreInputRef = (ref) => this.input = ref\n\n\trender() {\n\t\treturn (\n\t\t\t\n\t\t)\n\t}\n\n\t// Proxy `.focus()` method.\n\tfocus = () => this.input.focus()\n}\n\nconst COUNTRY_SELECT_PROPERTIES = {\n\tcountrySelectArrowComponent : 'selectArrowComponent'\n}"]} \ No newline at end of file diff --git a/commonjs/PhoneInputNativeDefaultMetadata.js b/commonjs/PhoneInputNativeDefaultMetadata.js new file mode 100644 index 00000000..d3b1f6f6 --- /dev/null +++ b/commonjs/PhoneInputNativeDefaultMetadata.js @@ -0,0 +1,21 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _metadataMin = require('libphonenumber-js/metadata.min.json'); + +var _metadataMin2 = _interopRequireDefault(_metadataMin); + +var _PhoneInputNativeDefaults = require('./PhoneInputNativeDefaults'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +// Deprecated. +// This is a file used in legacy `/index.js` export entry. +// In some next major version this file will be removed +// and `/index.js` will be redirected to `/min/index.js`. + +exports.default = (0, _PhoneInputNativeDefaults.createPhoneInput)(_metadataMin2.default); +//# sourceMappingURL=PhoneInputNativeDefaultMetadata.js.map \ No newline at end of file diff --git a/commonjs/PhoneInputNativeDefaultMetadata.js.map b/commonjs/PhoneInputNativeDefaultMetadata.js.map new file mode 100644 index 00000000..3bf2ce72 --- /dev/null +++ b/commonjs/PhoneInputNativeDefaultMetadata.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/PhoneInputNativeDefaultMetadata.js"],"names":["metadata"],"mappings":";;;;;;AAKA;;;;AACA;;;;AANA;AACA;AACA;AACA;;kBAKe,gDAAiBA,qBAAjB,C","file":"PhoneInputNativeDefaultMetadata.js","sourcesContent":["// Deprecated.\n// This is a file used in legacy `/index.js` export entry.\n// In some next major version this file will be removed\n// and `/index.js` will be redirected to `/min/index.js`.\n\nimport metadata from 'libphonenumber-js/metadata.min.json'\nimport { createPhoneInput } from './PhoneInputNativeDefaults'\n\nexport default createPhoneInput(metadata)"]} \ No newline at end of file diff --git a/commonjs/PhoneInputNativeDefaults.js b/commonjs/PhoneInputNativeDefaults.js new file mode 100644 index 00000000..a69950cf --- /dev/null +++ b/commonjs/PhoneInputNativeDefaults.js @@ -0,0 +1,80 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; + +exports.createPhoneInput = createPhoneInput; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _default = require('../locale/default.json'); + +var _default2 = _interopRequireDefault(_default); + +var _InternationalIcon = require('./InternationalIcon'); + +var _InternationalIcon2 = _interopRequireDefault(_InternationalIcon); + +var _PropTypes = require('./PropTypes'); + +var _PhoneInputNative = require('./PhoneInputNative'); + +var _PhoneInputNative2 = _interopRequireDefault(_PhoneInputNative); + +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; } + +function createPhoneInput(defaultMetadata) { + var _class, _temp2; + + return _temp2 = _class = function (_Component) { + _inherits(PhoneInputNativeDefaults, _Component); + + function PhoneInputNativeDefaults() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, PhoneInputNativeDefaults); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PhoneInputNativeDefaults.__proto__ || Object.getPrototypeOf(PhoneInputNativeDefaults)).call.apply(_ref, [this].concat(args))), _this), _this.storeInputRef = function (ref) { + return _this.input = ref; + }, _this.render = function () { + return _react2.default.createElement(_PhoneInputNative2.default, _extends({ ref: _this.storeInputRef }, _this.props)); + }, _this.focus = function () { + return _this.input.focus(); + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + return PhoneInputNativeDefaults; + }(_react.Component), _class.propTypes = { + metadata: _PropTypes.metadata.isRequired, + labels: _PropTypes.labels.isRequired, + internationalIcon: _propTypes2.default.element.isRequired + }, _class.defaultProps = { + metadata: defaultMetadata, + labels: _default2.default, + internationalIcon: _InternationalIcon2.default + }, _temp2; +} + +exports.default = createPhoneInput(); +//# sourceMappingURL=PhoneInputNativeDefaults.js.map \ No newline at end of file diff --git a/commonjs/PhoneInputNativeDefaults.js.map b/commonjs/PhoneInputNativeDefaults.js.map new file mode 100644 index 00000000..c8bca293 --- /dev/null +++ b/commonjs/PhoneInputNativeDefaults.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/PhoneInputNativeDefaults.js"],"names":["createPhoneInput","defaultMetadata","storeInputRef","ref","input","render","props","focus","Component","propTypes","metadata","metadataPropType","isRequired","labels","labelsPropType","internationalIcon","PropTypes","element","defaultProps"],"mappings":";;;;;;;;QAagBA,gB,GAAAA,gB;;AAbhB;;;;AACA;;;;AAEA;;;;AACA;;;;AAEA;;AAKA;;;;;;;;;;;;AAEO,SAASA,gBAAT,CAA0BC,eAA1B,EACP;AAAA;;AACC;AAAA;;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA,yNAgBCC,aAhBD,GAgBiB,UAACC,GAAD;AAAA,WAAS,MAAKC,KAAL,GAAaD,GAAtB;AAAA,IAhBjB,QAiBCE,MAjBD,GAiBU;AAAA,WAAM,8BAAC,0BAAD,aAAY,KAAK,MAAKH,aAAtB,IAAyC,MAAKI,KAA9C,EAAN;AAAA,IAjBV,QAkBCC,KAlBD,GAkBS;AAAA,WAAM,MAAKH,KAAL,CAAWG,KAAX,EAAN;AAAA,IAlBT;AAAA;;AAAA;AAAA,GAA8CC,gBAA9C,UAEQC,SAFR,GAGC;AACCC,YAAWC,oBAAiBC,UAD7B;AAECC,UAASC,kBAAeF,UAFzB;AAGCG,qBAAoBC,oBAAUC,OAAV,CAAkBL;AAHvC,EAHD,SASQM,YATR,GAUC;AACCR,YAAUT,eADX;AAECY,2BAFD;AAGCE;AAHD,EAVD;AAoBA;;kBAEcf,kB","file":"PhoneInputNativeDefaults.js","sourcesContent":["import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport labels from '../locale/default.json'\nimport internationalIcon from './InternationalIcon'\n\nimport {\n\tmetadata as metadataPropType,\n\tlabels as labelsPropType\n} from './PropTypes'\n\nimport PhoneInput from './PhoneInputNative'\n\nexport function createPhoneInput(defaultMetadata)\n{\n\treturn class PhoneInputNativeDefaults extends Component\n\t{\n\t\tstatic propTypes =\n\t\t{\n\t\t\tmetadata : metadataPropType.isRequired,\n\t\t\tlabels : labelsPropType.isRequired,\n\t\t\tinternationalIcon : PropTypes.element.isRequired\n\t\t}\n\n\t\tstatic defaultProps =\n\t\t{\n\t\t\tmetadata: defaultMetadata,\n\t\t\tlabels,\n\t\t\tinternationalIcon\n\t\t}\n\n\t\tstoreInputRef = (ref) => this.input = ref\n\t\trender = () => \n\t\tfocus = () => this.input.focus()\n\t}\n}\n\nexport default createPhoneInput()"]} \ No newline at end of file diff --git a/commonjs/PhoneInputNoCountrySelect.js b/commonjs/PhoneInputNoCountrySelect.js new file mode 100644 index 00000000..855a8a10 --- /dev/null +++ b/commonjs/PhoneInputNoCountrySelect.js @@ -0,0 +1,206 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); + +exports.createInput = createInput; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _core = require('libphonenumber-js/core'); + +var _InputBasic = require('./InputBasic'); + +var _InputBasic2 = _interopRequireDefault(_InputBasic); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +function createInput(defaultMetadata) { + function PhoneInput(_ref, ref) { + var country = _ref.country, + value = _ref.value, + onChange = _ref.onChange, + metadata = _ref.metadata, + rest = _objectWithoutProperties(_ref, ['country', 'value', 'onChange', 'metadata']); + + var _useState = (0, _react.useState)(country), + _useState2 = _slicedToArray(_useState, 2), + prevCountry = _useState2[0], + setPrevCountry = _useState2[1]; + + var _useState3 = (0, _react.useState)(getParsedInputForValue(value, country, metadata)), + _useState4 = _slicedToArray(_useState3, 2), + parsedInput = _useState4[0], + setParsedInput = _useState4[1]; + + var _useState5 = (0, _react.useState)(value), + _useState6 = _slicedToArray(_useState5, 2), + valueForParsedInput = _useState6[0], + setValueForParsedInput = _useState6[1]; + // If `value` property has been changed externally + // then re-initialize the component. + + + (0, _react.useEffect)(function () { + if (value !== valueForParsedInput) { + setParsedInput(getParsedInputForValue(value, country, metadata)); + setValueForParsedInput(value); + } + }, [value]); + // If the `country` has been changed then re-initialize the component. + (0, _react.useEffect)(function () { + if (country !== prevCountry) { + setPrevCountry(country); + setParsedInput(getParsedInputForValue(value, country, metadata)); + } + }, [country]); + // Call `onChange` after the new `valueForParsedInput` has been applied. + (0, _react.useEffect)(function () { + if (valueForParsedInput !== value) { + onChange(valueForParsedInput); + } + }, [valueForParsedInput]); + var onParsedInputChange = (0, _react.useCallback)(function (parsedInput) { + var value = void 0; + if (country) { + // Won't allow `+` in the beginning + // when a `country` has been specified. + if (parsedInput && parsedInput[0] === '+') { + parsedInput = parsedInput.slice(1); + } + // Convert `parsedInput` to `value`. + if (parsedInput) { + var asYouType = new _core.AsYouType(country, metadata); + asYouType.input(parsedInput); + var phoneNumber = asYouType.getNumber(); + if (phoneNumber) { + value = phoneNumber.number; + } + } + } else { + // Force a `+` in the beginning of a `value` + // when no `country` has been specified. + if (parsedInput && parsedInput[0] !== '+') { + parsedInput = '+' + parsedInput; + } + // Convert `parsedInput` to `value`. + if (parsedInput) { + value = parsedInput; + } + } + setParsedInput(parsedInput); + setValueForParsedInput(value); + }, [country, metadata, setParsedInput, setValueForParsedInput]); + return _react2.default.createElement(_InputBasic2.default, _extends({}, rest, { + ref: ref, + metadata: metadata, + country: country, + value: parsedInput, + onChange: onParsedInputChange })); + } + + PhoneInput = _react2.default.forwardRef(PhoneInput); + + PhoneInput.propTypes = { + /** + * HTML `` `type` attribute. + */ + type: _propTypes2.default.string, + + /** + * HTML `` `autocomplete` attribute. + */ + autoComplete: _propTypes2.default.string, + + /** + * A two-letter country code for formatting `value` + * as a national phone number (e.g. `(800) 555 35 35`). + * Examples: "US", "RU", etc. + * If no `country` is passed then `value` + * is formatted as an international phone number. + * (for example, `+7 800 555 35 35`) + */ + country: _propTypes2.default.string, + + /** + * The parsed phone number. + * Examples: `undefined`, `""`, `"+"`, `"+123"`, `"123"`. + */ + value: _propTypes2.default.string, + + /** + * Updates the `value`. + */ + onChange: _propTypes2.default.func.isRequired, + + /** + * The `` component. + */ + inputComponent: _propTypes2.default.element, + + /** + * `libphonenumber-js` metadata. + */ + metadata: _propTypes2.default.object.isRequired + }; + + PhoneInput.defaultProps = { + /** + * HTML `` `type="tel"`. + */ + type: 'tel', + + /** + * Remember (and autofill) the value as a phone number. + */ + autoComplete: 'tel', + + /** + * `libphonenumber-js` metadata. + */ + metadata: defaultMetadata + }; + + return PhoneInput; +} + +exports.default = createInput(); + + +function getParsedInputForValue(value, country, metadata) { + if (!value) { + return ''; + } + if (!country) { + return value; + } + var asYouType = new _core.AsYouType(country, metadata); + asYouType.input(value); + var phoneNumber = asYouType.getNumber(); + if (phoneNumber) { + // Even if the actual country of the `value` being passed + // doesn't match the `country` property, + // still format the national number. + // This is some kind of an "error recovery" procedure. + if (phoneNumber.country && phoneNumber.country !== country) { + console.error('[react-phone-number-input] Phone number ' + value + ' corresponds to country ' + phoneNumber.country + ' but ' + country + ' was specified instead.'); + } + return phoneNumber.formatNational(); + } else { + return ''; + } +} +//# sourceMappingURL=PhoneInputNoCountrySelect.js.map \ No newline at end of file diff --git a/commonjs/PhoneInputNoCountrySelect.js.map b/commonjs/PhoneInputNoCountrySelect.js.map new file mode 100644 index 00000000..5296c8fe --- /dev/null +++ b/commonjs/PhoneInputNoCountrySelect.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../source/PhoneInputNoCountrySelect.js"],"names":["createInput","defaultMetadata","PhoneInput","ref","country","value","onChange","metadata","rest","prevCountry","setPrevCountry","getParsedInputForValue","parsedInput","setParsedInput","valueForParsedInput","setValueForParsedInput","onParsedInputChange","slice","asYouType","AsYouType","input","phoneNumber","getNumber","number","React","forwardRef","propTypes","type","PropTypes","string","autoComplete","func","isRequired","inputComponent","element","object","defaultProps","console","error","formatNational"],"mappings":"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","file":"PhoneInputNoCountrySelect.js","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { AsYouType } from 'libphonenumber-js/core'\n\nimport InputBasic from './InputBasic'\n\nexport function createInput(defaultMetadata) {\n\tfunction PhoneInput({\n\t\tcountry,\n\t\tvalue,\n\t\tonChange,\n\t\tmetadata,\n\t\t...rest\n\t}, ref) {\n\t\tconst [prevCountry, setPrevCountry] = useState(country)\n\t\tconst [parsedInput, setParsedInput] = useState(getParsedInputForValue(value, country, metadata))\n\t\tconst [valueForParsedInput, setValueForParsedInput] = useState(value)\n\t\t// If `value` property has been changed externally\n\t\t// then re-initialize the component.\n\t\tuseEffect(() => {\n\t\t\tif (value !== valueForParsedInput) {\n\t\t\t\tsetParsedInput(getParsedInputForValue(value, country, metadata))\n\t\t\t\tsetValueForParsedInput(value)\n\t\t\t}\n\t\t}, [value])\n\t\t// If the `country` has been changed then re-initialize the component.\n\t\tuseEffect(() => {\n\t\t\tif (country !== prevCountry) {\n\t\t\t\tsetPrevCountry(country)\n\t\t\t\tsetParsedInput(getParsedInputForValue(value, country, metadata))\n\t\t\t}\n\t\t}, [country])\n\t\t// Call `onChange` after the new `valueForParsedInput` has been applied.\n\t\tuseEffect(() => {\n\t\t\tif (valueForParsedInput !== value) {\n\t\t\t\tonChange(valueForParsedInput)\n\t\t\t}\n\t\t}, [valueForParsedInput])\n\t\tconst onParsedInputChange = useCallback((parsedInput) => {\n\t\t\tlet value\n\t\t\tif (country) {\n\t\t\t\t// Won't allow `+` in the beginning\n\t\t\t\t// when a `country` has been specified.\n\t\t\t\tif (parsedInput && parsedInput[0] === '+') {\n\t\t\t\t\tparsedInput = parsedInput.slice(1)\n\t\t\t\t}\n\t\t\t\t// Convert `parsedInput` to `value`.\n\t\t\t\tif (parsedInput) {\n\t\t\t\t\tconst asYouType = new AsYouType(country, metadata)\n\t\t\t\t\tasYouType.input(parsedInput)\n\t\t\t\t\tconst phoneNumber = asYouType.getNumber()\n\t\t\t\t\tif (phoneNumber) {\n\t\t\t\t\t\tvalue = phoneNumber.number\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Force a `+` in the beginning of a `value`\n\t\t\t\t// when no `country` has been specified.\n\t\t\t\tif (parsedInput && parsedInput[0] !== '+') {\n\t\t\t\t\tparsedInput = '+' + parsedInput\n\t\t\t\t}\n\t\t\t\t// Convert `parsedInput` to `value`.\n\t\t\t\tif (parsedInput) {\n\t\t\t\t\tvalue = parsedInput\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetParsedInput(parsedInput)\n\t\t\tsetValueForParsedInput(value)\n\t\t}, [country, metadata, setParsedInput, setValueForParsedInput])\n\t\treturn (\n\t\t\t\n\t\t)\n\t}\n\n\tPhoneInput = React.forwardRef(PhoneInput)\n\n\tPhoneInput.propTypes = {\n\t\t/**\n\t\t * HTML `` `type` attribute.\n\t\t */\n\t\ttype: PropTypes.string,\n\n\t\t/**\n\t\t * HTML `` `autocomplete` attribute.\n\t\t */\n\t\tautoComplete: PropTypes.string,\n\n\t\t/**\n\t\t * A two-letter country code for formatting `value`\n\t\t * as a national phone number (e.g. `(800) 555 35 35`).\n\t\t * Examples: \"US\", \"RU\", etc.\n\t\t * If no `country` is passed then `value`\n\t\t * is formatted as an international phone number.\n\t\t * (for example, `+7 800 555 35 35`)\n\t\t */\n\t\tcountry: PropTypes.string,\n\n\t\t/**\n\t\t * The parsed phone number.\n\t\t * Examples: `undefined`, `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\n\t\t */\n\t\tvalue: PropTypes.string,\n\n\t\t/**\n\t\t * Updates the `value`.\n\t\t */\n\t\tonChange: PropTypes.func.isRequired,\n\n\t\t/**\n\t\t * The `` component.\n\t\t */\n\t\tinputComponent: PropTypes.element,\n\n\t\t/**\n\t\t * `libphonenumber-js` metadata.\n\t\t */\n\t\tmetadata: PropTypes.object.isRequired\n\t}\n\n\tPhoneInput.defaultProps = {\n\t\t/**\n\t\t * HTML `` `type=\"tel\"`.\n\t\t */\n\t\ttype: 'tel',\n\n\t\t/**\n\t\t * Remember (and autofill) the value as a phone number.\n\t\t */\n\t\tautoComplete: 'tel',\n\n\t\t/**\n\t\t * `libphonenumber-js` metadata.\n\t\t */\n\t\tmetadata: defaultMetadata\n\t}\n\n\treturn PhoneInput\n}\n\nexport default createInput()\n\nfunction getParsedInputForValue(value, country, metadata) {\n\tif (!value) {\n\t\treturn ''\n\t}\n\tif (!country) {\n\t\treturn value\n\t}\n\tconst asYouType = new AsYouType(country, metadata)\n\tasYouType.input(value)\n\tconst phoneNumber = asYouType.getNumber()\n\tif (phoneNumber) {\n\t\t// Even if the actual country of the `value` being passed\n\t\t// doesn't match the `country` property,\n\t\t// still format the national number.\n\t\t// This is some kind of an \"error recovery\" procedure.\n\t\tif (phoneNumber.country && phoneNumber.country !== country) {\n\t\t\tconsole.error(`[react-phone-number-input] Phone number ${value} corresponds to country ${phoneNumber.country} but ${country} was specified instead.`)\n\t\t}\n\t\treturn phoneNumber.formatNational()\n\t} else {\n\t\treturn ''\n\t}\n}"]} \ No newline at end of file diff --git a/commonjs/PhoneInputReactResponsiveUI.js b/commonjs/PhoneInputReactResponsiveUI.js new file mode 100644 index 00000000..ba427fab --- /dev/null +++ b/commonjs/PhoneInputReactResponsiveUI.js @@ -0,0 +1,125 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = 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 _class, _temp2; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _PhoneInput = require('./PhoneInput'); + +var _PhoneInput2 = _interopRequireDefault(_PhoneInput); + +var _CountrySelectReactResponsiveUI = require('./CountrySelectReactResponsiveUI'); + +var _CountrySelectReactResponsiveUI2 = _interopRequireDefault(_CountrySelectReactResponsiveUI); + +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 PhoneInputReactResponsiveUI = (_temp2 = _class = function (_Component) { + _inherits(PhoneInputReactResponsiveUI, _Component); + + function PhoneInputReactResponsiveUI() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, PhoneInputReactResponsiveUI); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PhoneInputReactResponsiveUI.__proto__ || Object.getPrototypeOf(PhoneInputReactResponsiveUI)).call.apply(_ref, [this].concat(args))), _this), _this.storeInputRef = function (ref) { + return _this.input = ref; + }, _this.focus = function () { + return _this.input.focus(); + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + // These two country-select-related properties are + // implemented as `defaultProps` instead of passing them + // directly to the `` analogous to how it's + // implemented in `` (see `./PhoneInputNative.js` notes). + + + _createClass(PhoneInputReactResponsiveUI, [{ + key: 'render', + value: function render() { + return _react2.default.createElement(_PhoneInput2.default, _extends({ ref: this.storeInputRef }, this.props)); + } + + // Proxy `.focus()` method. + + }]); + + return PhoneInputReactResponsiveUI; +}(_react.Component), _class.propTypes = { + // `` CSS class. + // Both for the phone number `` and + // the country select autocomplete ``. + inputClassName: _propTypes2.default.string, + + // If set to `false`, then country flags will be shown + // for all countries when country ``'s toggle `