2018-03-30 08:25:04 -04:00
|
|
|
const bindAll = require('lodash.bindall');
|
2018-03-07 15:51:07 -05:00
|
|
|
const allCountries = require('country-telephone-data').allCountries;
|
2018-01-30 11:53:12 -05:00
|
|
|
const classNames = require('classnames');
|
2018-03-26 10:56:25 -04:00
|
|
|
const formsyComponent = require('formsy-react-components/release/hoc/component').default;
|
2018-01-30 11:53:12 -05:00
|
|
|
const omit = require('lodash.omit');
|
|
|
|
const PropTypes = require('prop-types');
|
|
|
|
const React = require('react');
|
|
|
|
const ReactPhoneInput = require('react-telephone-input/lib/withStyles').default;
|
|
|
|
const Row = require('formsy-react-components').Row;
|
2016-08-02 15:23:09 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
|
|
|
|
const inputHOC = require('./input-hoc.jsx');
|
|
|
|
const intl = require('../../lib/intl.jsx');
|
|
|
|
const validationHOCFactory = require('./validations.jsx').validationHOCFactory;
|
2016-06-02 15:25:02 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
const allIso2 = allCountries.map(country => (country.iso2));
|
2016-06-03 00:01:46 -04:00
|
|
|
|
2016-06-13 12:48:58 -04:00
|
|
|
require('./row.scss');
|
2016-06-23 07:27:43 -04:00
|
|
|
require('./phone-input.scss');
|
2016-06-13 12:48:58 -04:00
|
|
|
|
2018-03-30 08:25:04 -04:00
|
|
|
class PhoneInput extends React.Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
|
|
|
bindAll(this [
|
|
|
|
'handleChange'
|
|
|
|
]);
|
|
|
|
this.state = {value: props.value};
|
|
|
|
}
|
|
|
|
componentWillReceiveProps (nextProps) {
|
|
|
|
if (nextProps.value !== this.state.value) {
|
|
|
|
this.setState({value: nextProps.value});
|
|
|
|
this.props.onSetValue(nextProps.value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
handleChange (telNumber, country) {
|
|
|
|
if (this.updateOnChange) {
|
|
|
|
this.onSetValue(telNumber);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
handleBlur (telNumber, country) {
|
|
|
|
if (this.updateOnBlur) {
|
|
|
|
this.onSetValue(telNumber);
|
2016-06-03 00:01:46 -04:00
|
|
|
}
|
2018-03-30 08:25:04 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
2016-06-02 15:25:02 -04:00
|
|
|
return (
|
2018-01-30 11:53:12 -05:00
|
|
|
<Row
|
2018-03-30 08:25:04 -04:00
|
|
|
{...this.props}
|
|
|
|
htmlFor={this.props.id}
|
2018-01-30 11:53:12 -05:00
|
|
|
rowClassName={classNames('phone-input', this.props.className)}
|
2016-06-02 15:25:02 -04:00
|
|
|
>
|
|
|
|
<div className="input-group">
|
2018-01-30 11:53:12 -05:00
|
|
|
<ReactPhoneInput
|
|
|
|
className="form-control"
|
2018-03-30 08:25:04 -04:00
|
|
|
defaultCountry={this.props.defaultCountry}
|
|
|
|
flagsImagePath="/images/flags.png"
|
|
|
|
id={this.props.id}
|
2018-01-30 11:53:12 -05:00
|
|
|
label={null}
|
2018-03-30 08:25:04 -04:00
|
|
|
onChange={this.handleChange}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
{...omit(this.props, ['className', 'onChange', 'onBlur'])}
|
2016-06-02 15:25:02 -04:00
|
|
|
/>
|
2018-03-30 08:25:04 -04:00
|
|
|
{this.props.help ? <Help help={this.props.help} /> : null}
|
2016-06-02 15:25:02 -04:00
|
|
|
</div>
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
}
|
2018-03-30 08:25:04 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
PhoneInput.defaultProps = {
|
|
|
|
type: 'tel',
|
|
|
|
value: '',
|
|
|
|
updateOnChange: true,
|
|
|
|
};
|
2016-06-02 15:25:02 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
const phoneValidationHOC = validationHOCFactory({
|
2016-08-10 07:53:49 -04:00
|
|
|
isPhone: <intl.FormattedMessage id="teacherRegistration.validationPhoneNumber" />
|
2016-06-02 15:25:02 -04:00
|
|
|
});
|
|
|
|
|
2018-03-30 08:25:04 -04:00
|
|
|
module.exports = inputHOC(phoneValidationHOC(defaultValidationHOC(formsyComponent(PhoneInput))));
|