// @flow import * as React from 'react'; import { Form, FormField, Submit } from 'component/common/form'; import Card from 'component/common/card'; const os = require('os').type(); const countryCodes = require('country-data') .callingCountries.all.filter(_ => _.emoji) .reduce((acc, cur) => acc.concat(cur.countryCallingCodes.map(_ => ({ ...cur, countryCallingCode: _ }))), []) .sort((a, b) => { if (a.countryCallingCode < b.countryCallingCode) { return -1; } if (a.countryCallingCode > b.countryCallingCode) { return 1; } return 0; }); type Props = { addUserPhone: (string, string) => void, cancelButton: React.Node, phoneErrorMessage: ?string, isPending: boolean, }; type State = { phone: string, countryCode: string, }; class UserPhoneNew extends React.PureComponent { constructor(props: Props) { super(props); this.state = { phone: '', countryCode: '+1', }; (this: any).formatPhone = this.formatPhone.bind(this); (this: any).handleSubmit = this.handleSubmit.bind(this); (this: any).handleSelect = this.handleSelect.bind(this); } formatPhone(value: string) { const { countryCode } = this.state; const formattedNumber = value.replace(/\D/g, ''); if (countryCode === '+1') { if (!formattedNumber) { return ''; } else if (formattedNumber.length < 4) { return formattedNumber; } else if (formattedNumber.length < 7) { return `(${formattedNumber.substring(0, 3)}) ${formattedNumber.substring(3)}`; } const fullNumber = `(${formattedNumber.substring(0, 3)}) ${formattedNumber.substring( 3, 6 )}-${formattedNumber.substring(6)}`; return fullNumber.length <= 14 ? fullNumber : fullNumber.substring(0, 14); } return formattedNumber; } handleChanged(event: SyntheticInputEvent<*>) { this.setState({ phone: this.formatPhone(event.target.value), }); } handleSelect(event: SyntheticInputEvent<*>) { this.setState({ countryCode: event.target.value }); } handleSubmit() { const { phone, countryCode } = this.state; this.props.addUserPhone(phone.replace(/\D/g, ''), countryCode.substring(1)); } render() { const { cancelButton, phoneErrorMessage, isPending } = this.props; return ( {countryCodes.map((country, index) => ( ))} { this.handleChanged(event); }} />
{cancelButton}
} /> ); } } export default UserPhoneNew;