diff --git a/src/widgets/phone-country-selector.jsx b/src/widgets/phone-country-selector.jsx
new file mode 100644
index 00000000..52fefabd
--- /dev/null
+++ b/src/widgets/phone-country-selector.jsx
@@ -0,0 +1,43 @@
+// Selector for country dialing code.
+
+import React from 'react';
+import { FormattedDisplayName } from 'react-intl';
+import * as dcodes from '../dcodes.json';
+import { flagEmoji } from '../lib/strformat';
+
+export default class PhoneCountrySelector extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this.codeMap = {};
+ dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick(e) {
+ e.preventDefault();
+ this.props.onSubmit(e.target.dataset.code, e.target.dataset.dial);
+ }
+
+ render() {
+ const countries = [];
+ const selected = this.props.selected || 'US';
+ dcodes.default.forEach((dc, idx) => {
+ const style = (dc.code == selected ? 'selected ' : '');
+ countries.push(
+ {flagEmoji(dc.code)}
+
+ +{dc.dial}
+ );
+ });
+
+ return (
+
+ );
+ }
+}
diff --git a/src/widgets/phone-edit.jsx b/src/widgets/phone-edit.jsx
new file mode 100644
index 00000000..3b36282f
--- /dev/null
+++ b/src/widgets/phone-edit.jsx
@@ -0,0 +1,82 @@
+// Editor for a phone number.
+
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import * as dcodes from '../dcodes.json';
+import { flagEmoji } from '../lib/strformat';
+
+class PhoneEdit extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this.codeMap = {};
+ dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });
+
+ this.state = {
+ countryCode: props.countryCode || 'US',
+ dialCode: this.codeMap[props.countryCode || 'US'],
+ localNumber: ''
+ };
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleFinished = this.handleFinished.bind(this);
+ this.handleClear = this.handleClear.bind(this);
+ this.handleKeyDown = this.handleKeyDown.bind(this);
+ this.showCountrySelector = this.showCountrySelector.bind(this);
+ }
+
+ handleChange(e) {
+ this.setState({localNumber: this.filterNumber(e.target.value)});
+ }
+
+ handleFinished(e) {
+ e.preventDefault();
+ this.props.onSubmit(this.state.localNumber.trim());
+ }
+
+ handleClear(e) {
+ e.preventDefault();
+ const countryCode = this.props.countryCode || 'US';
+ this.setState({localNumber: '', countryCode: countryCode, dialCode: this.codeMap[countryCode || 'US']});
+ }
+
+ handleKeyDown(e) {
+ if (e.key === 'Enter') {
+ this.handleFinished(e);
+ } else if (e.key === 'Escape') {
+ this.handleClear(e);
+ }
+ }
+
+ showCountrySelector() {
+ this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);
+ }
+
+ // Filter out characters not permitted in a phone number.
+ filterNumber(number) {
+ if (!number) {
+ return number;
+ }
+ // Leave numbers, space, (, ), -, and .
+ // The + is not allowed: it's handled by the country code portion.
+ return number.replace(/[^-\s().\d]/g, '');
+ }
+
+ render() {
+ return (
+
+
+ {flagEmoji(this.state.countryCode)}
+ +{this.state.dialCode}
+
+ {this.state.localNumber ?
+
highlight_off
+ :
}
+
+ );
+ }
+}
+
+export default injectIntl(PhoneEdit);