From 30755854d40ae8390f86bd586fd23ececb2aa608 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Tue, 30 Jun 2020 08:05:46 +0000 Subject: [PATCH 1/2] chore(deps): bump i18n-iso-countries from 5.5.0 to 6.0.0 Bumps [i18n-iso-countries](https://github.com/michaelwittig/node-i18n-iso-countries) from 5.5.0 to 6.0.0. - [Release notes](https://github.com/michaelwittig/node-i18n-iso-countries/releases) - [Commits](https://github.com/michaelwittig/node-i18n-iso-countries/compare/v5.5.0...v6.0.0) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index f7579838f97..d6866157c15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13114,9 +13114,9 @@ "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" }, "i18n-iso-countries": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-5.5.0.tgz", - "integrity": "sha512-S5lPQ3NYmi9n0PFX1L3qv0BQE/EvEVKPFQTLZubQxDQBNwS3Yf6WHk3Aw1wg0bpS8amn7gI5nk5n9JOcnUHvhA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-6.0.0.tgz", + "integrity": "sha512-2YOLRUNrnOq/sVchB6PfOgZ4E0rRMfxxy+QMhjv+2fiJHMidmmmb24UPHwXmzxyybB8mFPU+/uE46ebLOJIrpQ==", "requires": { "diacritics": "1.3.0" } diff --git a/package.json b/package.json index ef13852ceaa..48b16499a2c 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "graphql": "14.6.0", "graphql-tag": "2.10.3", "helmet": "3.23.3", - "i18n-iso-countries": "5.5.0", + "i18n-iso-countries": "6.0.0", "jsdom": "16.2.2", "jsonwebtoken": "8.5.1", "load-script": "1.0.0", From 9210a5f955553fdaec2fdbaa95464f869ad85c6e Mon Sep 17 00:00:00 2001 From: Benjamin Piouffle Date: Tue, 7 Jul 2020 17:27:33 +0200 Subject: [PATCH 2/2] fix(InputTypeCountry): Usage for latest version --- components/InputTypeCountry.js | 35 ++++++++++++++----------- styleguide/examples/InputTypeCountry.md | 12 ++++++++- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/components/InputTypeCountry.js b/components/InputTypeCountry.js index 5650fae0b51..fe29e17fc79 100644 --- a/components/InputTypeCountry.js +++ b/components/InputTypeCountry.js @@ -1,22 +1,23 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { countries as countriesEN } from 'i18n-iso-countries/langs/en.json'; -import { countries as countriesFR } from 'i18n-iso-countries/langs/fr.json'; +import countries from 'i18n-iso-countries'; +import countriesEN from 'i18n-iso-countries/langs/en.json'; +import countriesFR from 'i18n-iso-countries/langs/fr.json'; import { isUndefined, orderBy, truncate } from 'lodash'; import memoizeOne from 'memoize-one'; import { FormattedMessage, injectIntl } from 'react-intl'; import StyledSelect from './StyledSelect'; -const CountriesI18n = { - fr: countriesFR, - en: countriesEN, -}; +countries.registerLocale(countriesEN); +countries.registerLocale(countriesFR); class InputTypeCountry extends Component { static propTypes = { onChange: PropTypes.func.isRequired, name: PropTypes.string, + /** To force a specific locale */ + locale: PropTypes.string, defaultValue: PropTypes.string, /** Use this to control the component state */ value: PropTypes.string, @@ -30,12 +31,15 @@ class InputTypeCountry extends Component { static defaultProps = { name: 'country' }; - getOptions = memoizeOne(locale => { - const countries = CountriesI18n[locale] || CountriesI18n.en; + getCountryLabel(code, locale) { + const name = countries.getName(code, locale) || countries.getName(code, 'en'); + return `${truncate(name, { length: 30 })} - ${code}`; + } - const options = Object.keys(countries).map(code => ({ + getOptions = memoizeOne(locale => { + const options = Object.keys(countries.getAlpha2Codes()).map(code => ({ value: code, - label: `${truncate(countries[code] || countriesEN[code], { length: 30 })} - ${code}`, + label: this.getCountryLabel(code, locale), })); return orderBy(options, 'label'); @@ -47,23 +51,22 @@ class InputTypeCountry extends Component { } const code = country && country.toUpperCase(); - const countries = CountriesI18n[locale] || CountriesI18n.en; return { value: code, - label: `${truncate(countries[code] || countriesEN[code], { length: 30 })} - ${code}`, + label: this.getCountryLabel(code, locale), }; }); render() { - const { defaultValue, value, intl, onChange, ...props } = this.props; + const { defaultValue, value, intl, onChange, locale, ...props } = this.props; return ( onChange(value)} - value={!isUndefined(value) ? this.getSelectedOption(intl.locale, value) : undefined} - defaultValue={defaultValue ? this.getSelectedOption(intl.locale, defaultValue) : undefined} + value={!isUndefined(value) ? this.getSelectedOption(locale || intl.locale, value) : undefined} + defaultValue={defaultValue ? this.getSelectedOption(locale || intl.locale, defaultValue) : undefined} placeholder={} {...props} /> diff --git a/styleguide/examples/InputTypeCountry.md b/styleguide/examples/InputTypeCountry.md index 8865999ba3c..463924d3fb7 100644 --- a/styleguide/examples/InputTypeCountry.md +++ b/styleguide/examples/InputTypeCountry.md @@ -1,5 +1,15 @@ ### Default ```js - +const [locale, setLocale] = React.useState('en'); +
+ +
+
+ +
; ```