pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phone editing widget works

Browse Source
This commit is contained in:
or-else
2023-01-25 17:08:07 -08:00
parent 34f17f45b1
commit e2f3201ddb
32 changed files with 246 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+24 -6
View File
@@ -4,6 +4,8 @@
margin: 0;
font-family: Roboto, Arial, sans-serif;
text-rendering: optimizeLegibility;
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.3) rgba(255,255,255,0.1);
}
/* Basic elements defined */
@@ -333,13 +335,16 @@ li:hover .menuTrigger a {
div.alert-container {
position: absolute;
display: flex;
padding: 1rem;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(240,240,240,0.85);
z-index: 3;
}
div.alert {
position: relative;
background-color: white;
@@ -348,10 +353,15 @@ div.alert {
border-radius: 0.3rem;
margin: auto 2rem auto 2rem;
width: fit-content;
height: min-content;
min-width: 16rem;
max-width: 24rem;
max-height: 40rem;
overflow: hidden;
}
div.alert-container .title {
position: relative;
color: #2196f3;
font-size: 1.2rem;
font-weight: 500;
@@ -360,6 +370,7 @@ div.alert-container .title {
}
div.alert-container .title.with-control {
position: relative;
display: flex;
padding: 0.5rem 0.5rem 0 0.5rem;
align-items: center;
@@ -368,6 +379,7 @@ div.alert-container .title.with-control {
}
div.alert-container .content {
position: relative;
padding: 0.5rem 0 0.5rem 0;
}
/* END Alert */
@@ -1923,10 +1935,8 @@ video {
bottom: 0;
background-color: #c5e1a5;
clip-path: polygon(100% 0, 0 110%, 100% 110%);
-webkit-clip-path: polygon(100% 0, 0 110%, 100% 110%);
box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
border-bottom-left-radius: 0.3rem;
-moz-transition: ease-out background-color 0.5s;
transition: ease-out background-color 0.5s;
transition-delay: 0.3s;
}
@@ -1945,10 +1955,8 @@ video {
bottom: 0;
background-color: #fafafa;
clip-path: polygon(0 0, 100% 110%, 0 110%);
-webkit-clip-path: polygon(0 0, 100% 110%, 0 110%);
box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
border-bottom-right-radius: 0.3rem;
-moz-transition: ease-out background-color 0.5s;
transition: ease-out background-color 0.5s;
transition-delay: 0.3s;
}
@@ -3027,14 +3035,14 @@ ul.tabbar li.active > a {
.country-flag {
display: inline-block;
font-size: larger;
vertical-align: middle;
}
.dial-code {
white-space: nowrap;
display: inline-block;
cursor: pointer;
margin-top: 0.1rem;
vertical-align: middle;
margin-bottom: 0.15rem;
}
ul.phone-country-selector {
@@ -3047,6 +3055,7 @@ ul.phone-country-selector > li {
font-weight: lighter;
padding: 0.25rem 0.5rem 0.15rem 0.5rem;
cursor: pointer;
width: 100%;
}
ul.phone-country-selector > li:hover {
@@ -3063,6 +3072,15 @@ ul.phone-country-selector .dial-code {
font-weight: normal;
}
ul.phone-country-selector span {
display: inline-block;
}
ul.phone-country-selector span.country {
text-overflow: ellipsis;
overflow-x: hidden;
}
/*
Very wide monitor.
*/
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/views/create-account-view.jsx
+8 -6
View File
@@ -32,7 +32,8 @@ export default class CreateAccountView extends React.PureComponent {
newAvatarMime: null,
errorCleared: false,
buttonDisabled: false,
method: '',
// method: '',
method: 'tel',
saveToken: LocalStorageUtil.getObject('keep-logged-in')
};
@@ -53,7 +54,7 @@ export default class CreateAccountView extends React.PureComponent {
this.props.onError(err.message, 'err');
})
// "reqCred":{"auth":["email"]}
.finally(_ => this.setState({method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'}));
//.finally(_ => this.setState({method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'}));
}
handleLoginChange(e) {
@@ -61,7 +62,7 @@ export default class CreateAccountView extends React.PureComponent {
}
handlePasswordChange(password) {
this.setState({meth: 'tel', password: password});
this.setState({password: password});
}
handleEmailChange(e) {
@@ -69,7 +70,8 @@ export default class CreateAccountView extends React.PureComponent {
}
handlePhoneChange(number) {
this.setState({tel: number});
console.log('handlePhoneChange', number)
this.setState({meth: 'tel', tel: number});
}
handleFnChange(e) {
@@ -209,8 +211,8 @@ export default class CreateAccountView extends React.PureComponent {
description="Message shown when component is loading"/></div>}>
<PhoneEdit
autoFocus={false}
onShowCountrySelector={(code, dial) => console.log('onShowCountrySelector', code, dial)}
onSubmit={(code, dial) => console.log('onSubmit', code, dial)} />
onShowCountrySelector={this.props.onShowCountrySelector}
onSubmit={this.handlePhoneChange} />
</Suspense>
</div></>
: null
src/views/sidepanel-view.jsx
+1
View File
@@ -157,6 +157,7 @@ class SidepanelView extends React.PureComponent {
view === 'register' ?
<CreateAccountView
tinode={this.props.tinode}
onShowCountrySelector={this.props.onShowCountrySelector}
onCreateAccount={this.props.onCreateAccount}
onCancel={this.props.onCancel}
onError={this.props.onError} /> :
src/views/tinode-web.jsx
+22 -3
View File
@@ -1,5 +1,5 @@
// The top-level class to hold all functionality together.
import React from 'react';
import React, { Suspense } from 'react';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import { initializeApp as firebaseInitApp } from 'firebase/app';
@@ -12,6 +12,7 @@ import Alert from '../widgets/alert.jsx';
import ContextMenu from '../widgets/context-menu.jsx';
import ForwardDialog from '../widgets/forward-dialog.jsx';
import CallIncoming from '../widgets/call-incoming.jsx';
const PhoneCountrySelector = React.lazy(_ => import('../widgets/phone-country-selector.jsx'));
import InfoView from './info-view.jsx';
import MessagesView from './messages-view.jsx';
@@ -158,6 +159,7 @@ class TinodeWeb extends React.Component {
this.handlePasswordResetRequest = this.handlePasswordResetRequest.bind(this);
this.handleResetPassword = this.handleResetPassword.bind(this);
this.handleContextMenuAction = this.handleContextMenuAction.bind(this);
this.handleShowCountrySelector = this.handleShowCountrySelector.bind(this);
this.handleShowForwardDialog = this.handleShowForwardDialog.bind(this);
this.handleHideForwardDialog = this.handleHideForwardDialog.bind(this);
@@ -1725,6 +1727,22 @@ class TinodeWeb extends React.Component {
}
}
handleShowCountrySelector(code, dial, selectedCallback) {
console.log('handleShowCountrySelector', code, dial);
this.handleShowAlert("Select country",
<Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
description="Message shown when component is loading"/></div>}>
<PhoneCountrySelector
selected={code}
onSubmit={(c, d) => {
console.log("handleShowCountrySelector click", c, d);
this.setState({alertVisible: false});
selectedCallback(c, d);
}} />
</Suspense>,
null, null, _ => {}, "Cancel");
}
handleStartVideoCall() {
this.setState({
callTopic: this.state.topicSelected,
@@ -1954,12 +1972,12 @@ class TinodeWeb extends React.Component {
}
{this.state.alertVisible ?
<Alert
visible={this.state.alertVisible}
title={this.state.alertParams.title}
content={this.state.alertParams.content}
onReject={this.state.alertParams.onReject ? (_ => this.setState({alertVisible: false})) : null}
reject={this.state.alertParams.reject}
onConfirm={_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}}
onConfirm={this.state.alertParams.onConfirm ?
(_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}) : null}
confirm={this.state.alertParams.confirm}
/> : null}
<SidepanelView
@@ -2025,6 +2043,7 @@ class TinodeWeb extends React.Component {
onResetPassword={this.handleResetPassword}
onShowArchive={this.handleShowArchive}
onShowBlocked={this.handleShowBlocked}
onShowCountrySelector={this.handleShowCountrySelector}
onInitFind={this.tnInitFind}
searchResults={this.state.searchResults}
src/widgets/alert.jsx
+7 -3
View File
@@ -15,9 +15,13 @@ export default class Alert extends React.PureComponent {
:
null
}
<button className="primary" onClick={this.props.onConfirm}>
{this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />}
</button>
{this.props.onConfirm ?
<button className="primary" onClick={this.props.onConfirm}>
{this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />}
</button>
:
null
}
</div>
</div>
</div>);
src/widgets/phone-country-selector.jsx
+27 -17
View File
@@ -1,39 +1,47 @@
// Selector for country dialing code.
import React from 'react';
import { FormattedDisplayName } from 'react-intl';
import { injectIntl } from 'react-intl';
import * as dcodes from '../dcodes.json';
import { flagEmoji } from '../lib/strformat';
export default class PhoneCountrySelector extends React.PureComponent {
class PhoneCountrySelector extends React.PureComponent {
constructor(props) {
super(props);
this.codeMap = {};
dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });
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.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.props.onSubmit(e.target.dataset.code, e.target.dataset.dial);
this.countries.sort((a, b) => a.name.localeCompare(b.name));
}
render() {
const countries = [];
const selected = this.props.selected || 'US';
dcodes.default.forEach((dc, idx) => {
const style = (dc.code == selected ? 'selected ' : '');
countries.push(<li className={style} key={idx} data-code={dc.code} data-dial={dc.dial} onClick={this.handleClick}>
<span className="country-flag">{flagEmoji(dc.code)}</span>&nbsp;
<FormattedDisplayName type="region" value={dc.code} />
&nbsp;<span className="dial-code">+{dc.dial}</span>
this.countries.forEach((c, idx) => {
const style = (c.code == selected ? 'selected ' : '');
countries.push(<li className={style} key={idx} onClick={_ => this.props.onSubmit(c.code, c.dial)}>
<span className="country-flag">{c.flag}</span>
<span className="country">&nbsp;{c.name}</span>
<span className="dial-code">&nbsp;+{c.dial}</span>
</li>);
});
return (
<div className="scrollable-panel">
<div className="scrollable-panel" style={{height: '30rem'}}>
<ul className="phone-country-selector">
{countries}
</ul>
@@ -41,3 +49,5 @@ export default class PhoneCountrySelector extends React.PureComponent {
);
}
}
export default injectIntl(PhoneCountrySelector);
src/widgets/phone-edit.jsx
+38 -8
View File
@@ -2,6 +2,9 @@
import React from 'react';
import { injectIntl } from 'react-intl';
import { getExampleNumber, parsePhoneNumber } from 'libphonenumber-js/mobile';
import examples from 'libphonenumber-js/mobile/examples'
import * as dcodes from '../dcodes.json';
import { flagEmoji } from '../lib/strformat';
@@ -12,10 +15,14 @@ class PhoneEdit extends React.PureComponent {
this.codeMap = {};
dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });
const code = props.countryCode || 'US';
const dial = this.codeMap[code];
this.state = {
countryCode: props.countryCode || 'US',
dialCode: this.codeMap[props.countryCode || 'US'],
localNumber: ''
countryCode: code,
dialCode: dial,
localNumber: '',
placeholderNumber: this.placeholderNumber(code, dial)
};
this.handleChange = this.handleChange.bind(this);
@@ -29,10 +36,18 @@ class PhoneEdit extends React.PureComponent {
}
handleFinished(e) {
// this.setCustomValidity("Mobile phone number required");
e.preventDefault();
const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\d]/g, '')
this.props.onSubmit(`+${number}`);
const raw = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\d]/g, '')
let number = null;
try {
number = parsePhoneNumber(raw);
} catch (err) {}
if (!number || !number.isValid()) {
this.inputField.setCustomValidity("Mobile phone number required");
return;
}
this.props.onSubmit(number.format('E.164'));
}
@@ -43,7 +58,15 @@ class PhoneEdit extends React.PureComponent {
}
showCountrySelector() {
this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);
this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode,
(code, dial) => {
console.log('Callback', code, dial);
this.setState({
countryCode: code,
dialCode: dial,
placeholderNumber: this.placeholderNumber(code, dial)
})
});
}
// Filter out characters not permitted in a phone number.
@@ -56,13 +79,20 @@ class PhoneEdit extends React.PureComponent {
return number.replace(/[^-\s().\d]/g, '');
}
placeholderNumber(code, dial) {
console.log('In nplaceholder', code, dial);
const number = getExampleNumber(code, examples).formatInternational();
return number.substring(dial.length + 1).trim();
}
render() {
console.log('placeholder:', this.state.placeholderNumber);
return (
<>
<span className="dial-code" onClick={this.showCountrySelector}>
<span className="country-flag">{flagEmoji(this.state.countryCode)}&nbsp;</span>
+{this.state.dialCode}&nbsp;</span>
<input type="tel" placeholder={this.state.placeholder}
<input type="tel" ref={ref => {this.inputField = ref}} placeholder={this.state.placeholderNumber}
value={this.state.localNumber} onChange={this.handleChange}
maxLength={17} onKeyDown={this.handleKeyDown} onBlur={this.handleFinished}
required autoFocus={this.props.autoFocus} />
umd/226.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/246.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/246.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/251.prod.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"251.prod.js","mappings":"skNAOA,MAAMA,UAAkBC,IAAAA,cACtBC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,QAAU,CAAC,EAChBC,EAAAA,SAAuBC,IAAQH,KAAKC,QAAQE,EAAGC,MAAQD,EAAGE,IAAI,IAE9DL,KAAKM,MAAQ,CACXC,YAAaT,EAAMS,aAAe,KAClCC,SAAUR,KAAKC,QAAQH,EAAMS,aAAe,MAC5CE,YAAa,IAGfT,KAAKU,aAAeV,KAAKU,aAAaC,KAAKX,MAC3CA,KAAKY,eAAiBZ,KAAKY,eAAeD,KAAKX,MAC/CA,KAAKa,cAAgBb,KAAKa,cAAcF,KAAKX,MAC7CA,KAAKc,oBAAsBd,KAAKc,oBAAoBH,KAAKX,KAC3D,CAEAU,aAAaK,GACXf,KAAKgB,SAAS,CAACP,YAAaT,KAAKiB,aAAaF,EAAEG,OAAOC,QACzD,CAEAP,eAAeG,GAEbA,EAAEK,iBACF,MAAMC,EAAU,GAAErB,KAAKM,MAAME,WAAWR,KAAKM,MAAMG,YAAYa,SAASC,QAAQ,SAAU,IAC1FvB,KAAKF,MAAM0B,SAAU,IAAGH,IAC1B,CAGAR,cAAcE,GACE,UAAVA,EAAEU,KACJzB,KAAKY,eAAeG,EAExB,CAEAD,sBACEd,KAAKF,MAAM4B,sBAAsB1B,KAAKM,MAAMC,YAAaP,KAAKM,MAAME,SACtE,CAGAS,aAAaI,GACX,OAAKA,EAKEA,EAAOE,QAAQ,eAAgB,IAJ7BF,CAKX,CAEAM,SACE,OACE,oCACE,0BAAMC,UAAU,YAAYC,QAAS7B,KAAKc,qBACxC,0BAAMc,UAAU,iBAAgBE,EAAAA,EAAAA,IAAU9B,KAAKM,MAAMC,aAAa,KAAa,IAC7EP,KAAKM,MAAME,SAAS,KACxB,2BAAOuB,KAAK,MAAMC,YAAahC,KAAKM,MAAM0B,YACtCb,MAAOnB,KAAKM,MAAMG,YAAawB,SAAUjC,KAAKU,aAC9CwB,UAAW,GAAIC,UAAWnC,KAAKa,cAAeuB,OAAQpC,KAAKY,eAC3DyB,UAAQ,EAACC,UAAWtC,KAAKF,MAAMwC,YAGzC,EAGF,SAAeC,EAAAA,EAAAA,YAAW5C,E","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.codeMap = {};\n dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n this.state = {\n countryCode: props.countryCode || 'US',\n dialCode: this.codeMap[props.countryCode || 'US'],\n localNumber: ''\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleFinished = this.handleFinished.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.showCountrySelector = this.showCountrySelector.bind(this);\n }\n\n handleChange(e) {\n this.setState({localNumber: this.filterNumber(e.target.value)});\n }\n\n handleFinished(e) {\n // this.setCustomValidity(\"Mobile phone number required\");\n e.preventDefault();\n const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\\d]/g, '')\n this.props.onSubmit(`+${number}`);\n }\n\n\n handleKeyDown(e) {\n if (e.key === 'Enter') {\n this.handleFinished(e);\n }\n }\n\n showCountrySelector() {\n this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n }\n\n // Filter out characters not permitted in a phone number.\n filterNumber(number) {\n if (!number) {\n return number;\n }\n // Leave numbers, space, (, ), -, and .\n // The + is not allowed: it's handled by the country code portion.\n return number.replace(/[^-\\s().\\d]/g, '');\n }\n\n render() {\n return (\n <>\n <span className=\"dial-code\" onClick={this.showCountrySelector}>\n <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n +{this.state.dialCode}&nbsp;</span>\n <input type=\"tel\" placeholder={this.state.placeholder}\n value={this.state.localNumber} onChange={this.handleChange}\n maxLength={17} onKeyDown={this.handleKeyDown} onBlur={this.handleFinished}\n required autoFocus={this.props.autoFocus} />\n </>\n );\n }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["PhoneEdit","React","constructor","props","super","this","codeMap","dcodes","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","number","trim","replace","onSubmit","key","onShowCountrySelector","render","className","onClick","flagEmoji","type","placeholder","onChange","maxLength","onKeyDown","onBlur","required","autoFocus","injectIntl"],"sourceRoot":""}
{"version":3,"file":"251.prod.js","mappings":"skNAQA,MAAMA,UAAkBC,IAAAA,cACtBC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,QAAU,CAAC,EAChBC,EAAAA,SAAuBC,IAAQH,KAAKC,QAAQE,EAAGC,MAAQD,EAAGE,IAAI,IAE9DL,KAAKM,MAAQ,CACXC,YAAaT,EAAMS,aAAe,KAClCC,SAAUR,KAAKC,QAAQH,EAAMS,aAAe,MAC5CE,YAAa,IAGfT,KAAKU,aAAeV,KAAKU,aAAaC,KAAKX,MAC3CA,KAAKY,eAAiBZ,KAAKY,eAAeD,KAAKX,MAC/CA,KAAKa,cAAgBb,KAAKa,cAAcF,KAAKX,MAC7CA,KAAKc,oBAAsBd,KAAKc,oBAAoBH,KAAKX,KAC3D,CAEAU,aAAaK,GACXf,KAAKgB,SAAS,CAACP,YAAaT,KAAKiB,aAAaF,EAAEG,OAAOC,QACzD,CAEAP,eAAeG,GAEbA,EAAEK,iBACF,MAAMC,EAAU,GAAErB,KAAKM,MAAME,WAAWR,KAAKM,MAAMG,YAAYa,SAASC,QAAQ,SAAU,IAC1FvB,KAAKF,MAAM0B,SAAU,IAAGH,IAC1B,CAGAR,cAAcE,GACE,UAAVA,EAAEU,KACJzB,KAAKY,eAAeG,EAExB,CAEAD,sBACEd,KAAKF,MAAM4B,sBAAsB1B,KAAKM,MAAMC,YAAaP,KAAKM,MAAME,SACtE,CAGAS,aAAaI,GACX,OAAKA,EAKEA,EAAOE,QAAQ,eAAgB,IAJ7BF,CAKX,CAEAM,SACE,OACE,oCACE,0BAAMC,UAAU,YAAYC,QAAS7B,KAAKc,qBACxC,0BAAMc,UAAU,iBAAgBE,EAAAA,EAAAA,IAAU9B,KAAKM,MAAMC,aAAa,KAAa,IAC7EP,KAAKM,MAAME,SAAS,KACxB,2BAAOuB,KAAK,MAAMC,YAAahC,KAAKM,MAAM0B,YACtCb,MAAOnB,KAAKM,MAAMG,YAAawB,SAAUjC,KAAKU,aAC9CwB,UAAW,GAAIC,UAAWnC,KAAKa,cAAeuB,OAAQpC,KAAKY,eAC3DyB,UAAQ,EAACC,UAAWtC,KAAKF,MAAMwC,YAGzC,EAGF,SAAeC,EAAAA,EAAAA,YAAW5C,E","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.codeMap = {};\n dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n this.state = {\n countryCode: props.countryCode || 'US',\n dialCode: this.codeMap[props.countryCode || 'US'],\n localNumber: ''\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleFinished = this.handleFinished.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.showCountrySelector = this.showCountrySelector.bind(this);\n }\n\n handleChange(e) {\n this.setState({localNumber: this.filterNumber(e.target.value)});\n }\n\n handleFinished(e) {\n // this.setCustomValidity(\"Mobile phone number required\");\n e.preventDefault();\n const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\\d]/g, '')\n this.props.onSubmit(`+${number}`);\n }\n\n\n handleKeyDown(e) {\n if (e.key === 'Enter') {\n this.handleFinished(e);\n }\n }\n\n showCountrySelector() {\n this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n }\n\n // Filter out characters not permitted in a phone number.\n filterNumber(number) {\n if (!number) {\n return number;\n }\n // Leave numbers, space, (, ), -, and .\n // The + is not allowed: it's handled by the country code portion.\n return number.replace(/[^-\\s().\\d]/g, '');\n }\n\n render() {\n return (\n <>\n <span className=\"dial-code\" onClick={this.showCountrySelector}>\n <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n +{this.state.dialCode}&nbsp;</span>\n <input type=\"tel\" placeholder={this.state.placeholder}\n value={this.state.localNumber} onChange={this.handleChange}\n maxLength={17} onKeyDown={this.handleKeyDown} onBlur={this.handleFinished}\n required autoFocus={this.props.autoFocus} />\n </>\n );\n }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["PhoneEdit","React","constructor","props","super","this","codeMap","dcodes","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","number","trim","replace","onSubmit","key","onShowCountrySelector","render","className","onClick","flagEmoji","type","placeholder","onChange","maxLength","onKeyDown","onBlur","required","autoFocus","injectIntl"],"sourceRoot":""}
umd/252.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/252.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/290.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/290.prod.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"290.prod.js","mappings":"uMASA,MAAMA,UAA6BC,IAAAA,cACjCC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,UAAY,GACjB,MAAM,qBAACC,GAAwBJ,EAAMK,KACrCC,EAAAA,SAAuBC,IACrBL,KAAKC,UAAUK,KAAK,CAClBC,KAAMF,EAAGE,KACTC,KAAMH,EAAGG,KACTC,MAAMC,EAAAA,EAAAA,IAAUL,EAAGG,MACnBG,KAAMT,EAAqBG,EAAGG,KAAM,CAACI,KAAM,YAC3C,IAGJZ,KAAKC,UAAUY,MAAK,CAACC,EAAGC,IAAMD,EAAEH,KAAKK,cAAcD,EAAEJ,QAErDX,KAAKiB,YAAcjB,KAAKiB,YAAYC,KAAKlB,KAC3C,CAEAiB,YAAYE,GACVA,EAAEC,iBACFpB,KAAKF,MAAMuB,SAASF,EAAEG,OAAOC,QAAQf,KAAMW,EAAEG,OAAOC,QAAQhB,KAC9D,CAEAiB,SACE,MAAMvB,EAAY,GACZwB,EAAWzB,KAAKF,MAAM2B,UAAY,KAQxC,OAPAzB,KAAKC,UAAUyB,SAAQC,IACrB,MAAMC,EAASD,EAAEnB,MAAQiB,EAAW,YAAc,GAClDxB,EAAUK,KAAK,wBAAIuB,UAAWD,EAAOE,IAAKC,IAAK,YAAWJ,EAAEnB,KAAM,YAAWmB,EAAEpB,KAAMyB,QAAShC,KAAKiB,aACjG,0BAAOY,UAAU,gBAAgBF,EAAElB,MAAY,IAAOkB,EAAEhB,KAAK,IAAM,0BAAMkB,UAAU,aAAY,IAAEF,EAAEpB,OAC/F,IAIN,yBAAKsB,UAAU,oBACb,wBAAIA,UAAU,0BACX5B,GAIT,EAGF,SAAegC,EAAAA,EAAAA,YAAWtC,E","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.countries = [];\n const {formattedDisplayName} = props.intl;\n dcodes.default.forEach(dc => {\n this.countries.push({\n dial: dc.dial,\n code: dc.code,\n flag: flagEmoji(dc.code),\n name: formattedDisplayName(dc.code, {type: 'region'})\n });\n });\n\n this.countries.sort((a, b) => a.name.localeCompare(b.name));\n\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick(e) {\n e.preventDefault();\n this.props.onSubmit(e.target.dataset.code, e.target.dataset.dial);\n }\n\n render() {\n const countries = [];\n const selected = this.props.selected || 'US';\n this.countries.forEach(c => {\n const style = (c.code == selected ? 'selected ' : '');\n countries.push(<li className={style} key={idx} data-code={c.code} data-dial={c.dial} onClick={this.handleClick}>\n <span className=\"country-flag\">{c.flag}</span>&nbsp;{c.name}&nbsp;<span className=\"dial-code\">+{c.dial}</span>\n </li>);\n });\n\n return (\n <div className=\"scrollable-panel\">\n <ul className=\"phone-country-selector\">\n {countries}\n </ul>\n </div>\n );\n }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["PhoneCountrySelector","React","constructor","props","super","this","countries","formattedDisplayName","intl","dcodes","dc","push","dial","code","flag","flagEmoji","name","type","sort","a","b","localeCompare","handleClick","bind","e","preventDefault","onSubmit","target","dataset","render","selected","forEach","c","style","className","key","idx","onClick","injectIntl"],"sourceRoot":""}
{"version":3,"file":"290.prod.js","mappings":"2MASA,MAAMA,UAA6BC,IAAAA,cACjCC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,UAAY,GACjB,MAAM,kBAAEC,GAAsBJ,EAAMK,KACpCC,EAAAA,SAAuBC,IACPA,EAAGC,KAAKC,MAAM,KACtBC,SAAQC,IACZT,KAAKC,UAAUS,KAAK,CAClBJ,KAAMG,EAAKE,OACXC,KAAMP,EAAGO,KACTC,MAAMC,EAAAA,EAAAA,IAAUT,EAAGO,MACnBG,KAAMb,EAAkBG,EAAGO,KAAM,CAACI,KAAM,YACxC,GACF,IAGJhB,KAAKC,UAAUgB,MAAK,CAACC,EAAGC,IAAMD,EAAEH,KAAKK,cAAcD,EAAEJ,OACvD,CAEAM,SACE,MAAMpB,EAAY,GACZqB,EAAWtB,KAAKF,MAAMwB,UAAY,KAUxC,OATAtB,KAAKC,UAAUO,SAAQ,CAACe,EAAGC,KACzB,MAAMC,EAASF,EAAEX,MAAQU,EAAW,YAAc,GAClDrB,EAAUS,KAAK,wBAAIgB,UAAWD,EAAOE,IAAKH,EAAKI,QAASC,GAAK7B,KAAKF,MAAMgC,SAASP,EAAEX,KAAMW,EAAEjB,OACzF,0BAAMoB,UAAU,gBAAgBH,EAAEV,MAClC,0BAAMa,UAAU,WAAU,IAAOH,EAAER,MACnC,0BAAMW,UAAU,aAAY,KAAQH,EAAEjB,OAClC,IAIN,yBAAKoB,UAAU,mBAAmBD,MAAO,CAACM,OAAQ,UAChD,wBAAIL,UAAU,0BACXzB,GAIT,EAGF,SAAe+B,EAAAA,EAAAA,YAAWrC,E","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.countries = [];\n const { formatDisplayName } = props.intl;\n dcodes.default.forEach(dc => {\n const parts = dc.dial.split(',');\n parts.forEach(part => {\n this.countries.push({\n dial: part.trim(),\n code: dc.code,\n flag: flagEmoji(dc.code),\n name: formatDisplayName(dc.code, {type: 'region'})\n });\n });\n });\n\n this.countries.sort((a, b) => a.name.localeCompare(b.name));\n }\n\n render() {\n const countries = [];\n const selected = this.props.selected || 'US';\n this.countries.forEach((c, idx) => {\n const style = (c.code == selected ? 'selected ' : '');\n countries.push(<li className={style} key={idx} onClick={_ => this.props.onSubmit(c.code, c.dial)}>\n <span className=\"country-flag\">{c.flag}</span>\n <span className=\"country\">&nbsp;{c.name}</span>\n <span className=\"dial-code\">&nbsp;+{c.dial}</span>\n </li>);\n });\n\n return (\n <div className=\"scrollable-panel\" style={{height: '30rem'}}>\n <ul className=\"phone-country-selector\">\n {countries}\n </ul>\n </div>\n );\n }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["PhoneCountrySelector","React","constructor","props","super","this","countries","formatDisplayName","intl","dcodes","dc","dial","split","forEach","part","push","trim","code","flag","flagEmoji","name","type","sort","a","b","localeCompare","render","selected","c","idx","style","className","key","onClick","_","onSubmit","height","injectIntl"],"sourceRoot":""}
umd/514.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/700.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/734.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/78.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/78.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/817.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/92.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/932.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.dev.js
+37 -14
View File
@@ -4308,7 +4308,7 @@ __webpack_require__.r(__webpack_exports__);
const PhoneEdit = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => __webpack_require__.e(/*! import() */ "src_widgets_phone-edit_jsx").then(__webpack_require__.bind(__webpack_require__, /*! ../widgets/phone-edit.jsx */ "./src/widgets/phone-edit.jsx")));
const PhoneEdit = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_libphonenumber-js_examples_mobile_json_js-node_modules_libphonenumber-js-3ba9d5"), __webpack_require__.e("src_widgets_phone-edit_jsx")]).then(__webpack_require__.bind(__webpack_require__, /*! ../widgets/phone-edit.jsx */ "./src/widgets/phone-edit.jsx")));
@@ -4330,7 +4330,7 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
newAvatarMime: null,
errorCleared: false,
buttonDisabled: false,
method: '',
method: 'tel',
saveToken: _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_6__["default"].getObject('keep-logged-in')
};
this.handleLoginChange = this.handleLoginChange.bind(this);
@@ -4346,9 +4346,7 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
this.handleSubmit = this.handleSubmit.bind(this);
props.tinode.connect().catch(err => {
this.props.onError(err.message, 'err');
}).finally(_ => this.setState({
method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'
}));
});
}
handleLoginChange(e) {
this.setState({
@@ -4357,7 +4355,6 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
}
handlePasswordChange(password) {
this.setState({
meth: 'tel',
password: password
});
}
@@ -4368,7 +4365,9 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
});
}
handlePhoneChange(number) {
console.log('handlePhoneChange', number);
this.setState({
meth: 'tel',
tel: number
});
}
@@ -4559,8 +4558,8 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
}))
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PhoneEdit, {
autoFocus: false,
onShowCountrySelector: (code, dial) => console.log('onShowCountrySelector', code, dial),
onSubmit: (code, dial) => console.log('onSubmit', code, dial)
onShowCountrySelector: this.props.onShowCountrySelector,
onSubmit: this.handlePhoneChange
})))) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "panel-form-row"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_checkbox_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
@@ -7170,7 +7169,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _lib_navigation_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/navigation.js */ "./src/lib/navigation.js");
const PhoneEdit = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => __webpack_require__.e(/*! import() */ "src_widgets_phone-edit_jsx").then(__webpack_require__.bind(__webpack_require__, /*! ../widgets/phone-edit.jsx */ "./src/widgets/phone-edit.jsx")));
const PhoneEdit = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_libphonenumber-js_examples_mobile_json_js-node_modules_libphonenumber-js-3ba9d5"), __webpack_require__.e("src_widgets_phone-edit_jsx")]).then(__webpack_require__.bind(__webpack_require__, /*! ../widgets/phone-edit.jsx */ "./src/widgets/phone-edit.jsx")));
class PasswordResetView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
@@ -7731,6 +7730,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
onPersistenceChange: this.props.onPersistenceChange
}) : view === 'register' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_create_account_view_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
tinode: this.props.tinode,
onShowCountrySelector: this.props.onShowCountrySelector,
onCreateAccount: this.props.onCreateAccount,
onCancel: this.props.onCancel,
onError: this.props.onError
@@ -7854,6 +7854,7 @@ __webpack_require__.r(__webpack_exports__);
const PhoneCountrySelector = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => __webpack_require__.e(/*! import() */ "src_widgets_phone-country-selector_jsx").then(__webpack_require__.bind(__webpack_require__, /*! ../widgets/phone-country-selector.jsx */ "./src/widgets/phone-country-selector.jsx")));
@@ -8014,6 +8015,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
this.handlePasswordResetRequest = this.handlePasswordResetRequest.bind(this);
this.handleResetPassword = this.handleResetPassword.bind(this);
this.handleContextMenuAction = this.handleContextMenuAction.bind(this);
this.handleShowCountrySelector = this.handleShowCountrySelector.bind(this);
this.handleShowForwardDialog = this.handleShowForwardDialog.bind(this);
this.handleHideForwardDialog = this.handleHideForwardDialog.bind(this);
this.handleStartVideoCall = this.handleStartVideoCall.bind(this);
@@ -9376,6 +9378,27 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
});
}
}
handleShowCountrySelector(code, dial, selectedCallback) {
console.log('handleShowCountrySelector', code, dial);
this.handleShowAlert("Select country", react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "loading_note",
defaultMessage: [{
"type": 0,
"value": "Loading..."
}]
}))
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PhoneCountrySelector, {
selected: code,
onSubmit: (c, d) => {
console.log("handleShowCountrySelector click", c, d);
this.setState({
alertVisible: false
});
selectedCallback(c, d);
}
})), null, null, _ => {}, "Cancel");
}
handleStartVideoCall() {
this.setState({
callTopic: this.state.topicSelected,
@@ -9567,19 +9590,18 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
onAcceptCall: this.handleCallAccept,
onReject: this.handleCallHangup
}) : null, this.state.alertVisible ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_alert_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
visible: this.state.alertVisible,
title: this.state.alertParams.title,
content: this.state.alertParams.content,
onReject: this.state.alertParams.onReject ? _ => this.setState({
alertVisible: false
}) : null,
reject: this.state.alertParams.reject,
onConfirm: _ => {
onConfirm: this.state.alertParams.onConfirm ? _ => {
this.setState({
alertVisible: false
});
this.state.alertParams.onConfirm();
},
} : null,
confirm: this.state.alertParams.confirm
}) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sidepanel_view_jsx__WEBPACK_IMPORTED_MODULE_11__["default"], {
tinode: this.tinode,
@@ -9640,6 +9662,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
onResetPassword: this.handleResetPassword,
onShowArchive: this.handleShowArchive,
onShowBlocked: this.handleShowBlocked,
onShowCountrySelector: this.handleShowCountrySelector,
onInitFind: this.tnInitFind,
searchResults: this.state.searchResults,
onSearchContacts: this.handleSearchContacts,
@@ -9917,7 +9940,7 @@ class Alert extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent)
"type": 0,
"value": "Cancel"
}]
})) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
})) : null, this.props.onConfirm ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "primary",
onClick: this.props.onConfirm
}, this.props.confirm || react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
@@ -9926,7 +9949,7 @@ class Alert extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent)
"type": 0,
"value": "OK"
}]
})))));
})) : null)));
}
}
;
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_widgets_phone-country-selector_jsx.dev.js
+21 -20
View File
@@ -26,44 +26,45 @@ class PhoneCountrySelector extends (react__WEBPACK_IMPORTED_MODULE_0___default()
super(props);
this.countries = [];
const {
formattedDisplayName
formatDisplayName
} = props.intl;
_dcodes_json__WEBPACK_IMPORTED_MODULE_2__.forEach(dc => {
this.countries.push({
dial: dc.dial,
code: dc.code,
flag: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_3__.flagEmoji)(dc.code),
name: formattedDisplayName(dc.code, {
type: 'region'
})
const parts = dc.dial.split(',');
parts.forEach(part => {
this.countries.push({
dial: part.trim(),
code: dc.code,
flag: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_3__.flagEmoji)(dc.code),
name: formatDisplayName(dc.code, {
type: 'region'
})
});
});
});
this.countries.sort((a, b) => a.name.localeCompare(b.name));
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';
this.countries.forEach(c => {
this.countries.forEach((c, idx) => {
const style = c.code == selected ? 'selected ' : '';
countries.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
className: style,
key: idx,
"data-code": c.code,
"data-dial": c.dial,
onClick: this.handleClick
onClick: _ => this.props.onSubmit(c.code, c.dial)
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "country-flag"
}, c.flag), "\xA0", c.name, "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
}, c.flag), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "country"
}, "\xA0", c.name), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "dial-code"
}, "+", c.dial)));
}, "\xA0+", c.dial)));
});
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "scrollable-panel"
className: "scrollable-panel",
style: {
height: '30rem'
}
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
className: "phone-country-selector"
}, countries));
umd/src_widgets_phone-country-selector_jsx.dev.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"src_widgets_phone-country-selector_jsx.dev.js","mappings":";;;;;;;;;;;;;;;;;;;AAE0B;AACc;AAEC;AAEI;AAE7C,MAAMI,oBAAoB,SAASJ,4DAAmB,CAAC;EACrDM,WAAW,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAEZ,IAAI,CAACC,SAAS,GAAG,EAAE;IACnB,MAAM;MAACC;IAAoB,CAAC,GAAGF,KAAK,CAACG,IAAI;IACzCR,iDAAsB,CAACW,EAAE,IAAI;MAC3B,IAAI,CAACL,SAAS,CAACM,IAAI,CAAC;QAClBC,IAAI,EAAEF,EAAE,CAACE,IAAI;QACbC,IAAI,EAAEH,EAAE,CAACG,IAAI;QACbC,IAAI,EAAEd,yDAAS,CAACU,EAAE,CAACG,IAAI,CAAC;QACxBE,IAAI,EAAET,oBAAoB,CAACI,EAAE,CAACG,IAAI,EAAE;UAACG,IAAI,EAAE;QAAQ,CAAC;MACtD,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,CAACX,SAAS,CAACY,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACH,IAAI,CAACK,aAAa,CAACD,CAAC,CAACJ,IAAI,CAAC,CAAC;IAE3D,IAAI,CAACM,WAAW,GAAG,IAAI,CAACA,WAAW,CAACC,IAAI,CAAC,IAAI,CAAC;EAChD;EAEAD,WAAW,CAACE,CAAC,EAAE;IACbA,CAAC,CAACC,cAAc,EAAE;IAClB,IAAI,CAACpB,KAAK,CAACqB,QAAQ,CAACF,CAAC,CAACG,MAAM,CAACC,OAAO,CAACd,IAAI,EAAEU,CAAC,CAACG,MAAM,CAACC,OAAO,CAACf,IAAI,CAAC;EACnE;EAEAgB,MAAM,GAAG;IACP,MAAMvB,SAAS,GAAG,EAAE;IACpB,MAAMwB,QAAQ,GAAG,IAAI,CAACzB,KAAK,CAACyB,QAAQ,IAAI,IAAI;IAC5C,IAAI,CAACxB,SAAS,CAACI,OAAO,CAACqB,CAAC,IAAI;MAC1B,MAAMC,KAAK,GAAID,CAAC,CAACjB,IAAI,IAAIgB,QAAQ,GAAG,WAAW,GAAG,EAAG;MACrDxB,SAAS,CAACM,IAAI,CAAC;QAAI,SAAS,EAAEoB,KAAM;QAAC,GAAG,EAAEC,GAAI;QAAC,aAAWF,CAAC,CAACjB,IAAK;QAAC,aAAWiB,CAAC,CAAClB,IAAK;QAAC,OAAO,EAAE,IAAI,CAACS;MAAY,GAC7G;QAAO,SAAS,EAAC;MAAc,GAAES,CAAC,CAAChB,IAAI,CAAQ,QAAM,EAACgB,CAAC,CAACf,IAAI,EAAC,MAAM;QAAM,SAAS,EAAC;MAAW,GAAC,GAAC,EAACe,CAAC,CAAClB,IAAI,CAAQ,CAC5G,CAAC;IACR,CAAC,CAAC;IAEF,OACE;MAAK,SAAS,EAAC;IAAkB,GAC/B;MAAI,SAAS,EAAC;IAAwB,GACnCP,SAAS,CACP,CACD;EAEV;AACF;AAEA,iEAAeP,sDAAU,CAACG,oBAAoB,CAAC","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.countries = [];\n const {formattedDisplayName} = props.intl;\n dcodes.default.forEach(dc => {\n this.countries.push({\n dial: dc.dial,\n code: dc.code,\n flag: flagEmoji(dc.code),\n name: formattedDisplayName(dc.code, {type: 'region'})\n });\n });\n\n this.countries.sort((a, b) => a.name.localeCompare(b.name));\n\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick(e) {\n e.preventDefault();\n this.props.onSubmit(e.target.dataset.code, e.target.dataset.dial);\n }\n\n render() {\n const countries = [];\n const selected = this.props.selected || 'US';\n this.countries.forEach(c => {\n const style = (c.code == selected ? 'selected ' : '');\n countries.push(<li className={style} key={idx} data-code={c.code} data-dial={c.dial} onClick={this.handleClick}>\n <span className=\"country-flag\">{c.flag}</span>&nbsp;{c.name}&nbsp;<span className=\"dial-code\">+{c.dial}</span>\n </li>);\n });\n\n return (\n <div className=\"scrollable-panel\">\n <ul className=\"phone-country-selector\">\n {countries}\n </ul>\n </div>\n );\n }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["React","injectIntl","dcodes","flagEmoji","PhoneCountrySelector","PureComponent","constructor","props","countries","formattedDisplayName","intl","default","forEach","dc","push","dial","code","flag","name","type","sort","a","b","localeCompare","handleClick","bind","e","preventDefault","onSubmit","target","dataset","render","selected","c","style","idx"],"sourceRoot":""}
{"version":3,"file":"src_widgets_phone-country-selector_jsx.dev.js","mappings":";;;;;;;;;;;;;;;;;;;AAE0B;AACc;AAEC;AAEI;AAE7C,MAAMI,oBAAoB,SAASJ,4DAAmB,CAAC;EACrDM,WAAW,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAEZ,IAAI,CAACC,SAAS,GAAG,EAAE;IACnB,MAAM;MAAEC;IAAkB,CAAC,GAAGF,KAAK,CAACG,IAAI;IACxCR,iDAAsB,CAACW,EAAE,IAAI;MAC3B,MAAMC,KAAK,GAAGD,EAAE,CAACE,IAAI,CAACC,KAAK,CAAC,GAAG,CAAC;MAChCF,KAAK,CAACF,OAAO,CAACK,IAAI,IAAI;QACpB,IAAI,CAACT,SAAS,CAACU,IAAI,CAAC;UAClBH,IAAI,EAAEE,IAAI,CAACE,IAAI,EAAE;UACjBC,IAAI,EAAEP,EAAE,CAACO,IAAI;UACbC,IAAI,EAAElB,yDAAS,CAACU,EAAE,CAACO,IAAI,CAAC;UACxBE,IAAI,EAAEb,iBAAiB,CAACI,EAAE,CAACO,IAAI,EAAE;YAACG,IAAI,EAAE;UAAQ,CAAC;QACnD,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,CAACf,SAAS,CAACgB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACH,IAAI,CAACK,aAAa,CAACD,CAAC,CAACJ,IAAI,CAAC,CAAC;EAC7D;EAEAM,MAAM,GAAG;IACP,MAAMpB,SAAS,GAAG,EAAE;IACpB,MAAMqB,QAAQ,GAAG,IAAI,CAACtB,KAAK,CAACsB,QAAQ,IAAI,IAAI;IAC5C,IAAI,CAACrB,SAAS,CAACI,OAAO,CAAC,CAACkB,CAAC,EAAEC,GAAG,KAAK;MACjC,MAAMC,KAAK,GAAIF,CAAC,CAACV,IAAI,IAAIS,QAAQ,GAAG,WAAW,GAAG,EAAG;MACrDrB,SAAS,CAACU,IAAI,CAAC;QAAI,SAAS,EAAEc,KAAM;QAAC,GAAG,EAAED,GAAI;QAAC,OAAO,EAAEE,CAAC,IAAI,IAAI,CAAC1B,KAAK,CAAC2B,QAAQ,CAACJ,CAAC,CAACV,IAAI,EAAEU,CAAC,CAACf,IAAI;MAAE,GAC/F;QAAM,SAAS,EAAC;MAAc,GAAEe,CAAC,CAACT,IAAI,CAAQ,EAC9C;QAAM,SAAS,EAAC;MAAS,GAAC,MAAM,EAACS,CAAC,CAACR,IAAI,CAAQ,EAC/C;QAAM,SAAS,EAAC;MAAW,GAAC,OAAO,EAACQ,CAAC,CAACf,IAAI,CAAQ,CAC/C,CAAC;IACR,CAAC,CAAC;IAEF,OACE;MAAK,SAAS,EAAC,kBAAkB;MAAC,KAAK,EAAE;QAACoB,MAAM,EAAE;MAAO;IAAE,GACzD;MAAI,SAAS,EAAC;IAAwB,GACnC3B,SAAS,CACP,CACD;EAEV;AACF;AAEA,iEAAeP,sDAAU,CAACG,oBAAoB,CAAC","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.countries = [];\n const { formatDisplayName } = props.intl;\n dcodes.default.forEach(dc => {\n const parts = dc.dial.split(',');\n parts.forEach(part => {\n this.countries.push({\n dial: part.trim(),\n code: dc.code,\n flag: flagEmoji(dc.code),\n name: formatDisplayName(dc.code, {type: 'region'})\n });\n });\n });\n\n this.countries.sort((a, b) => a.name.localeCompare(b.name));\n }\n\n render() {\n const countries = [];\n const selected = this.props.selected || 'US';\n this.countries.forEach((c, idx) => {\n const style = (c.code == selected ? 'selected ' : '');\n countries.push(<li className={style} key={idx} onClick={_ => this.props.onSubmit(c.code, c.dial)}>\n <span className=\"country-flag\">{c.flag}</span>\n <span className=\"country\">&nbsp;{c.name}</span>\n <span className=\"dial-code\">&nbsp;+{c.dial}</span>\n </li>);\n });\n\n return (\n <div className=\"scrollable-panel\" style={{height: '30rem'}}>\n <ul className=\"phone-country-selector\">\n {countries}\n </ul>\n </div>\n );\n }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["React","injectIntl","dcodes","flagEmoji","PhoneCountrySelector","PureComponent","constructor","props","countries","formatDisplayName","intl","default","forEach","dc","parts","dial","split","part","push","trim","code","flag","name","type","sort","a","b","localeCompare","render","selected","c","idx","style","_","onSubmit","height"],"sourceRoot":""}
umd/src_widgets_phone-edit_jsx.dev.js
+39 -7
View File
@@ -15,12 +15,17 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var libphonenumber_js_mobile__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! libphonenumber-js/mobile */ "./node_modules/libphonenumber-js/mobile/exports/parsePhoneNumberWithError.js");
/* harmony import */ var libphonenumber_js_mobile__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! libphonenumber-js/mobile */ "./node_modules/libphonenumber-js/mobile/exports/getExampleNumber.js");
/* harmony import */ var libphonenumber_js_mobile_examples__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! libphonenumber-js/mobile/examples */ "./node_modules/libphonenumber-js/examples.mobile.json.js");
/* harmony import */ var _dcodes_json__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dcodes.json */ "./src/dcodes.json");
/* harmony import */ var _lib_strformat__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/strformat */ "./src/lib/strformat.js");
class PhoneEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
constructor(props) {
super(props);
@@ -28,10 +33,13 @@ class PhoneEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
_dcodes_json__WEBPACK_IMPORTED_MODULE_2__.forEach(dc => {
this.codeMap[dc.code] = dc.dial;
});
const code = props.countryCode || 'US';
const dial = this.codeMap[code];
this.state = {
countryCode: props.countryCode || 'US',
dialCode: this.codeMap[props.countryCode || 'US'],
localNumber: ''
countryCode: code,
dialCode: dial,
localNumber: '',
placeholderNumber: this.placeholderNumber(code, dial)
};
this.handleChange = this.handleChange.bind(this);
this.handleFinished = this.handleFinished.bind(this);
@@ -45,8 +53,16 @@ class PhoneEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}
handleFinished(e) {
e.preventDefault();
const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\d]/g, '');
this.props.onSubmit(`+${number}`);
const raw = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\d]/g, '');
let number = null;
try {
number = (0,libphonenumber_js_mobile__WEBPACK_IMPORTED_MODULE_4__.parsePhoneNumberWithError)(raw);
} catch (err) {}
if (!number || !number.isValid()) {
this.inputField.setCustomValidity("Mobile phone number required");
return;
}
this.props.onSubmit(number.format('E.164'));
}
handleKeyDown(e) {
if (e.key === 'Enter') {
@@ -54,7 +70,14 @@ class PhoneEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}
}
showCountrySelector() {
this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);
this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode, (code, dial) => {
console.log('Callback', code, dial);
this.setState({
countryCode: code,
dialCode: dial,
placeholderNumber: this.placeholderNumber(code, dial)
});
});
}
filterNumber(number) {
if (!number) {
@@ -62,7 +85,13 @@ class PhoneEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}
return number.replace(/[^-\s().\d]/g, '');
}
placeholderNumber(code, dial) {
console.log('In nplaceholder', code, dial);
const number = (0,libphonenumber_js_mobile__WEBPACK_IMPORTED_MODULE_5__.getExampleNumber)(code, libphonenumber_js_mobile_examples__WEBPACK_IMPORTED_MODULE_6__["default"]).formatInternational();
return number.substring(dial.length + 1).trim();
}
render() {
console.log('placeholder:', this.state.placeholderNumber);
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "dial-code",
onClick: this.showCountrySelector
@@ -70,7 +99,10 @@ class PhoneEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
className: "country-flag"
}, (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_3__.flagEmoji)(this.state.countryCode), "\xA0"), "+", this.state.dialCode, "\xA0"), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
type: "tel",
placeholder: this.state.placeholder,
ref: ref => {
this.inputField = ref;
},
placeholder: this.state.placeholderNumber,
value: this.state.localNumber,
onChange: this.handleChange,
maxLength: 17,
umd/src_widgets_phone-edit_jsx.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long