cosmo-ui
Version:
Common React components
100 lines • 4.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_redux_1 = require("react-redux");
var _1 = require(".");
var reducers_1 = require("../reducers");
var selectors_1 = require("../selectors");
var actions_1 = require("../actions");
var google_libphonenumber_1 = require("google-libphonenumber");
var styles = require('../../src/styles/components/forms.scss');
var _PhoneInput = (function (_super) {
tslib_1.__extends(_PhoneInput, _super);
function _PhoneInput(props) {
var _this = _super.call(this, props) || this;
_this.countryCode = 'GB';
_this.phone = google_libphonenumber_1.PhoneNumberUtil.getInstance();
_this.numberFormat = google_libphonenumber_1.PhoneNumberFormat.INTERNATIONAL;
return _this;
}
_PhoneInput.prototype.componentDidMount = function () {
this.dispatchUpdate(this.getNextFieldState(this.format(this.getValueFromState())));
};
_PhoneInput.prototype.renderField = function () {
var _a = this.props, name = _a.name, disabled = _a.disabled, placeholder = _a.placeholder;
return (React.createElement("input", { ref: this.setFieldRef, className: this.classNames(), name: name, id: name + "Field", placeholder: placeholder, type: "text", value: this.getValueFromState(), disabled: disabled, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }));
};
/**
* TODO - this function is inefficient
* because it parses the value for a second time to validate
* It's been left in here because of the way the BaseForm component
* works but really it should be given a parsed value
* Also the fact that the min chars check is repeated
* Yes... this is definitely some shit code. Ooops. Sorry :)
* @param value
*/
_PhoneInput.prototype.validate = function (value) {
if (!value) {
return this.props.field.required ? ['* required'] : [];
}
else if (value.length > 3) {
var parsed = this.parse(value);
if (parsed && this.phone.isValidNumber(parsed)) {
return [];
}
}
return ['* not a valid UK number'];
};
_PhoneInput.prototype.getValueFromEvent = function (e) {
return this.format(e.currentTarget.value);
};
/**
* Format the phone number in international format
* Google only allow phone numbers with more
* than 3 digits to be parsed
*
* @param e
*/
_PhoneInput.prototype.format = function (value) {
if (value.length > 3) {
var parsed = this.parse(value);
if (parsed) {
return this.phone.format(parsed, this.numberFormat);
}
}
return value;
};
/**
* Transform string input into an
* object of type PhoneNumber
*
* @param value
*/
_PhoneInput.prototype.parse = function (value) {
try {
return this.phone.parse(value, this.countryCode);
}
catch (e) {
return undefined;
}
};
return _PhoneInput;
}(_1.BaseFormField));
var mapStateToProps = function (state, ownProps) { return (tslib_1.__assign({}, ownProps, { field: selectors_1.mapStateToField(state[reducers_1.FORM_REDUCER_KEY], ownProps) })); };
var mapDispatchToProps = {
setFormField: actions_1.setFormField,
};
var ConnectedPhoneInput = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(_PhoneInput);
var PhoneInput = (function (_super) {
tslib_1.__extends(PhoneInput, _super);
function PhoneInput() {
return _super !== null && _super.apply(this, arguments) || this;
}
PhoneInput.prototype.render = function () {
return (React.createElement(ConnectedPhoneInput, tslib_1.__assign({}, this.props, { formName: this.formName })));
};
return PhoneInput;
}(_1.FormFieldWrapper));
exports.PhoneInput = PhoneInput;
//# sourceMappingURL=phone-input.js.map