scratch-www/src/components/forms/phone-input.jsx

83 lines
2.7 KiB
React
Raw Normal View History

const bindAll = require('lodash.bindall');
const allCountries = require('country-telephone-data').allCountries;
const classNames = require('classnames');
2018-03-26 10:56:25 -04:00
const formsyComponent = require('formsy-react-components/release/hoc/component').default;
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;
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
const allIso2 = allCountries.map(country => (country.iso2));
require('./row.scss');
2016-06-23 07:27:43 -04:00
require('./phone-input.scss');
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);
}
}
render () {
2016-06-02 15:25:02 -04:00
return (
<Row
{...this.props}
htmlFor={this.props.id}
rowClassName={classNames('phone-input', this.props.className)}
2016-06-02 15:25:02 -04:00
>
<div className="input-group">
<ReactPhoneInput
className="form-control"
defaultCountry={this.props.defaultCountry}
flagsImagePath="/images/flags.png"
id={this.props.id}
label={null}
onChange={this.handleChange}
onBlur={this.handleBlur}
{...omit(this.props, ['className', 'onChange', 'onBlur'])}
2016-06-02 15:25:02 -04:00
/>
{this.props.help ? <Help help={this.props.help} /> : null}
2016-06-02 15:25:02 -04:00
</div>
</Row>
);
}
}
PhoneInput.defaultProps = {
type: 'tel',
value: '',
updateOnChange: true,
};
2016-06-02 15:25:02 -04: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
});
module.exports = inputHOC(phoneValidationHOC(defaultValidationHOC(formsyComponent(PhoneInput))));