imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve country dropdown UX and expose +prefix

Browse source 
A prefix is now exposed through a change to the API for onOptionChange. This now returns the entire country object which includes iso2, prefix etc.

This also shows the prefix in the Registration and Login screens as a prefix to the phone number field.
This commit is contained in:
Luke Barnard 2017-04-25 11:21:47 +01:00
parent 1347d9fa65
commit 336462366e
4 changed files with 61 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/views/login/CountryDropdown.js
View file

@ -37,6 +37,7 @@ export default class CountryDropdown extends React.Component {
constructor(props) {
super(props);
this._onSearchChange = this._onSearchChange.bind(this);
this._onOptionChange = this._onOptionChange.bind(this);
this.state = {
searchQuery: '',
@ -48,7 +49,7 @@ export default class CountryDropdown extends React.Component {
// If no value is given, we start with the first
// country selected, but our parent component
// doesn't know this, therefore we do this.
this.props.onOptionChange(COUNTRIES[0].iso2);
this.props.onOptionChange(COUNTRIES[0]);
}
}
@ -58,6 +59,10 @@ export default class CountryDropdown extends React.Component {
});
}
_onOptionChange(iso2) {
this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]);
}
_flagImgForIso2(iso2) {
// Unicode Regional Indicator Symbol letter 'A'
const RIS_A = 0x1F1E6;
@ -68,6 +73,10 @@ export default class CountryDropdown extends React.Component {
);
}
getCountryPrefix(iso2) {
return COUNTRIES_BY_ISO2[iso2].prefix;
}
render() {
const Dropdown = sdk.getComponent('elements.Dropdown');
@ -102,9 +111,11 @@ export default class CountryDropdown extends React.Component {
// values between mounting and the initial value propgating
const value = this.props.value || COUNTRIES[0].iso2;
const getShortOption = this.props.isSmall ? this._flagImgForIso2 : undefined;
return <Dropdown className={this.props.className}
onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
menuWidth={298} getShortOption={this._flagImgForIso2}
onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
menuWidth={298} getShortOption={getShortOption}
value={value} searchEnabled={true}
>
{options}
@ -114,6 +125,7 @@ export default class CountryDropdown extends React.Component {
CountryDropdown.propTypes = {
className: React.PropTypes.string,
isSmall: React.PropTypes.bool,
onOptionChange: React.PropTypes.func.isRequired,
value: React.PropTypes.string,
};