62 lines
1.7 KiB
React
62 lines
1.7 KiB
React
// Selector for country dialing code.
|
|
|
|
import React from 'react';
|
|
import { injectIntl } from 'react-intl';
|
|
|
|
import * as dcodes from '../dcodes.json';
|
|
|
|
import { flagEmoji } from '../lib/strformat';
|
|
|
|
class PhoneCountrySelector extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.countries = [];
|
|
const { formatDisplayName } = props.intl;
|
|
dcodes.default.forEach(dc => {
|
|
const parts = dc.dial.split(',');
|
|
parts.forEach(part => {
|
|
this.countries.push({
|
|
dial: part.trim(),
|
|
code: dc.code,
|
|
flag: flagEmoji(dc.code),
|
|
name: formatDisplayName(dc.code, {type: 'region'})
|
|
});
|
|
});
|
|
});
|
|
|
|
this.countries.sort((a, b) => a.name.localeCompare(b.name));
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.selectedRef) {
|
|
this.selectedRef.scrollIntoView({block: 'center', inline: 'nearest'});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const countries = [];
|
|
const selected = this.props.selected || 'US';
|
|
this.countries.forEach((c, idx) => {
|
|
const style = (c.code == selected ? 'selected ' : '');
|
|
countries.push(<li className={style} key={idx}
|
|
ref={ref => {if (c.code == selected) {this.selectedRef = ref}}}
|
|
onClick={_ => this.props.onSubmit(c.code, c.dial)}>
|
|
<span className="country-flag">{c.flag}</span>
|
|
<span className="country"> {c.name}</span>
|
|
<span className="dial-code"> +{c.dial}</span>
|
|
</li>);
|
|
});
|
|
|
|
return (
|
|
<div className="scrollable-panel" style={{height: '30rem'}}>
|
|
<ul className="phone-country-selector">
|
|
{countries}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default injectIntl(PhoneCountrySelector);
|