+ )
+}
+
+export default QuestionCountryV2
diff --git a/src/builder.js b/src/builder.js
index 90763963..b3c7d854 100644
--- a/src/builder.js
+++ b/src/builder.js
@@ -11,7 +11,7 @@ import QuestionCheckbox from './Questions/Checkbox'
import QuestionRadio from './Questions/Radio'
import QuestionSelect from './Questions/Select'
import QuestionCountry from './Questions/Country'
-import QuestionCountryNew from './Questions/CountryNew'
+import QuestionCountryV2 from './Questions/CountryV2/index.js'
import QuestionInput from './Questions/Input'
import QuestionTextarea from './Questions/Textarea'
import QuestionDate from './Questions/Date'
@@ -118,9 +118,9 @@ const FormBuilder = ({
)}
),
- country_new: (
+ country_v2: (
<>
-
Date: Wed, 28 Feb 2024 20:56:51 +0100
Subject: [PATCH 06/12] feat: add option to prepend the flag to the country
name
---
README.md | 3 +
example/src/forms/Countries/form-new.json | 22 ++++-
example/src/forms/Countries/form-old.json | 4 +-
example/src/forms/Countries/styles.js | 4 +-
src/Questions/CountryV2/index.js | 98 ++++++++++++++---------
src/builder.js | 2 +-
6 files changed, 85 insertions(+), 48 deletions(-)
diff --git a/README.md b/README.md
index acd4bc71..fe96a3e3 100644
--- a/README.md
+++ b/README.md
@@ -235,6 +235,9 @@ https://user-images.githubusercontent.com/79102959/134897712-95e4391c-cfbb-42cd-
| blacklist | List of ISO 3166-1 alpha-2 codes of the countries not allowed in the list. This is mutually exclusive with `whitelist` and `whitelist`takes precedence. | string[] | [] |
| priorityOptions | List of ISO 3166-1 alpha-2 codes of the countries to be displayed first in the list. Ex: ['GB', 'ES'] | string[] | [] |
| language | ISO 639-1 code of the language to display countries names. [Available laguages](https://github.com/michaelwittig/node-i18n-iso-countries?tab=readme-ov-file#supported-languages-iso-639-1) | string | en |
+| search | Allows the user to search typing in the select control | boolean | false |
+| flag | Shows the flag of the country before the name | boolean | false |
+
### Country v2 example:
diff --git a/example/src/forms/Countries/form-new.json b/example/src/forms/Countries/form-new.json
index 5bfe4a2e..4c181a70 100644
--- a/example/src/forms/Countries/form-new.json
+++ b/example/src/forms/Countries/form-new.json
@@ -1,6 +1,6 @@
{
- "name": "Form with new Country question format",
- "title": "Form with new Country question format",
+ "name": "Form with Country v2 question format",
+ "title": "Form with Country v2 question format",
"questions": [
{
"name": "country_all",
@@ -18,7 +18,7 @@
"name": "country_all",
"placeholder": "Select your country",
"type": "country_v2",
- "label": "List of original countries with search option",
+ "label": "List of original countries with flags",
"errorMessages": {
"required": "This field is required"
},
@@ -26,6 +26,22 @@
"required": true
},
"config": {
+ "flag": true
+ }
+ },
+ {
+ "name": "country_all",
+ "placeholder": "Select your country",
+ "type": "country_v2",
+ "label": "List of original countries with flags and search option",
+ "errorMessages": {
+ "required": "This field is required"
+ },
+ "registerConfig": {
+ "required": true
+ },
+ "config": {
+ "flag": true,
"search": true
}
},
diff --git a/example/src/forms/Countries/form-old.json b/example/src/forms/Countries/form-old.json
index 995d42b7..2570abe2 100644
--- a/example/src/forms/Countries/form-old.json
+++ b/example/src/forms/Countries/form-old.json
@@ -1,6 +1,6 @@
{
- "name": "Form with old Country question format",
- "title": "Form with old Country question format",
+ "name": "Form with Country question format",
+ "title": "Form with Country question format",
"questions": [
{
"name": "country_all",
diff --git a/example/src/forms/Countries/styles.js b/example/src/forms/Countries/styles.js
index c92c5231..34941690 100644
--- a/example/src/forms/Countries/styles.js
+++ b/example/src/forms/Countries/styles.js
@@ -1,9 +1,9 @@
export default {
container: {
- padding: '30px 30px',
+ padding: '10px 10px',
display: 'flex',
},
formContainer: {
- padding: '30px 30px',
+ padding: '10px 10px',
}
}
diff --git a/src/Questions/CountryV2/index.js b/src/Questions/CountryV2/index.js
index 9b001650..20ae1393 100644
--- a/src/Questions/CountryV2/index.js
+++ b/src/Questions/CountryV2/index.js
@@ -1,17 +1,61 @@
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from 'theme-ui'
-import { getCountryDataList } from 'countries-list'
+import { getCountryDataList, getEmojiFlag } from 'countries-list'
import countriesTools from 'i18n-iso-countries'
import ErrorMessage from '../../Fields/Error'
import Select from '../../Fields/Select'
import Label from '../../Fields/Label'
+import { useState } from 'react'
-// TODO: import all languages
countriesTools.registerLocale(require('i18n-iso-countries/langs/en.json'))
-countriesTools.registerLocale(require('i18n-iso-countries/langs/es.json'))
-countriesTools.registerLocale(require('i18n-iso-countries/langs/fr.json'))
+
+const buildCountryOptions = (config, language) => {
+ const priorityOptions = config?.priorityOptions || []
+ const whitelist = config?.whitelist || []
+ const blacklist = config?.blacklist || []
+ const flag = config?.flag || false
+
+ let finalListOfCountries = getCountryDataList()
+
+ // whitelist and blacklist are mutually exclusive
+ if (whitelist.length > 0) {
+ finalListOfCountries = finalListOfCountries.filter((country) => whitelist.includes(country.iso2))
+ } else if (blacklist.length > 0) {
+ finalListOfCountries = finalListOfCountries.filter((country) => !blacklist.includes(country.iso2))
+ }
+
+ // translate the country names and sort them by translated name
+ finalListOfCountries = finalListOfCountries.map((country) => ({
+ value: country.iso2,
+ label: countriesTools.getName(country.iso2, language) || country.name
+ })).sort((a, b) => a.label.localeCompare(b.label))
+
+ // sort the countries by priority
+ if (priorityOptions.length > 0) {
+ priorityOptions.toReversed().forEach((isoCountryCode) => {
+ const foundIndex = finalListOfCountries.findIndex((country) => country.value.toLowerCase() === isoCountryCode.toLowerCase())
+ if (foundIndex !== -1) {
+ const foundCountry = finalListOfCountries[foundIndex]
+ finalListOfCountries.splice(foundIndex, 1);
+ finalListOfCountries.unshift(foundCountry)
+ }
+ })
+ }
+
+ if (flag) {
+ finalListOfCountries = finalListOfCountries.map((country) => {
+ const emoji = getEmojiFlag(country.value)
+ return {
+ ...country,
+ label: emoji + ' ' + country.label
+ }
+ })
+ }
+
+ return finalListOfCountries
+}
const QuestionCountryV2 = ({
component,
@@ -21,6 +65,15 @@ const QuestionCountryV2 = ({
language,
...props
}) => {
+ useState(() => {
+ try {
+ countriesTools.registerLocale(require(`i18n-iso-countries/langs/${language}.json`))
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.error('@onebeyond/react-form-builder: language not supported for country names. Using English.')
+ }
+ }, [language])
+
const {
formState: { errors },
trigger,
@@ -29,41 +82,6 @@ const QuestionCountryV2 = ({
unregister
} = useForm
- const buildCountryOptions = (config) => {
- const priorityOptions = config?.priorityOptions || []
- const whitelist = config?.whitelist || []
- const blacklist = config?.blacklist || []
-
- let finalListOfCountries = getCountryDataList()
-
- // whitelist and blacklist are mutually exclusive
- if (whitelist.length > 0) {
- finalListOfCountries = finalListOfCountries.filter((country) => whitelist.includes(country.iso2))
- } else if (blacklist.length > 0) {
- finalListOfCountries = finalListOfCountries.filter((country) => !blacklist.includes(country.iso2))
- }
-
- // translate the country names and sort them by translated name
- finalListOfCountries = finalListOfCountries.map((country) => ({
- value: country.iso2,
- label: countriesTools.getName(country.iso2, language) || country.name
- })).sort((a, b) => a.label.localeCompare(b.label))
-
- // sort the countries by priority
- if (priorityOptions.length > 0) {
- priorityOptions.toReversed().forEach((isoCountryCode) => {
- const foundIndex = finalListOfCountries.findIndex((country) => country.value.toLowerCase() === isoCountryCode.toLowerCase())
- if (foundIndex !== -1) {
- const foundCountry = finalListOfCountries[foundIndex]
- finalListOfCountries.splice(foundIndex, 1);
- finalListOfCountries.unshift(foundCountry)
- }
- })
- }
-
- return finalListOfCountries
- }
-
return (
{
- const useFormObj = useForm({ defaultValues: { formatDate: '' } })
+ const useFormObj = useForm()
useEffect(() => {
if (formErrors && formErrors.length > 0) {
From 47e8e615ccd8d676ba04efcbfaf0ec7da56cdcdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8D=C3=B1igo=20Marqu=C3=ADnez=20Prado?=
<25435858+inigomarquinez@users.noreply.github.com>
Date: Thu, 29 Feb 2024 09:20:05 +0100
Subject: [PATCH 07/12] docs: improve readme file
---
README.md | 16 ++--------------
1 file changed, 2 insertions(+), 14 deletions(-)
diff --git a/README.md b/README.md
index fe96a3e3..49db17fd 100644
--- a/README.md
+++ b/README.md
@@ -206,15 +206,8 @@ Reminder: the 'countryAndRegions' prop that can be sent in the ReactFormBuilder
}
```
-
https://user-images.githubusercontent.com/79102959/134897712-95e4391c-cfbb-42cd-b813-06596d9b7096.mov
-
-
-
-
-
-
## Country v2
| Option | Description | Type | Default |
@@ -264,17 +257,12 @@ https://user-images.githubusercontent.com/79102959/134897712-95e4391c-cfbb-42cd-
"priorityOptions": [
"ES",
"PT"
- ]
+ ],
+ "flag": true
}
}
```
-
-
-
-
-
-
## Date
| Option | Description | Type | Default |
|--- |--- |:---: |:---: |
From 340ee7cb6bfeb029e5e813e9d66410f940efb2fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8D=C3=B1igo=20Marqu=C3=ADnez=20Prado?=
<25435858+inigomarquinez@users.noreply.github.com>
Date: Thu, 29 Feb 2024 09:27:40 +0100
Subject: [PATCH 08/12] refactor: use form context to avoid passing it to
children
---
src/Questions/CountryV2/index.js | 26 +++++++++++++++-----------
src/builder.js | 8 +++-----
2 files changed, 18 insertions(+), 16 deletions(-)
diff --git a/src/Questions/CountryV2/index.js b/src/Questions/CountryV2/index.js
index 20ae1393..1fa0834a 100644
--- a/src/Questions/CountryV2/index.js
+++ b/src/Questions/CountryV2/index.js
@@ -1,6 +1,7 @@
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from 'theme-ui'
+import { useFormContext } from 'react-hook-form'
import { getCountryDataList, getEmojiFlag } from 'countries-list'
import countriesTools from 'i18n-iso-countries'
@@ -57,14 +58,25 @@ const buildCountryOptions = (config, language) => {
return finalListOfCountries
}
+/**
+ * Question of type CountryV2
+ * @param {props} question Question metadata
+ * @param {props} language Language to display the country names
+ * @returns React component of a country select
+ */
const QuestionCountryV2 = ({
- component,
question,
- useForm,
- countryAndRegionsData,
language,
...props
}) => {
+ const {
+ formState: { errors },
+ trigger,
+ control,
+ defaultValue,
+ unregister
+ } = useFormContext()
+
useState(() => {
try {
countriesTools.registerLocale(require(`i18n-iso-countries/langs/${language}.json`))
@@ -74,14 +86,6 @@ const QuestionCountryV2 = ({
}
}, [language])
- const {
- formState: { errors },
- trigger,
- control,
- defaultValue,
- unregister
- } = useForm
-
return (
{question.dependentQuestions &&
@@ -320,7 +318,7 @@ const FormBuilder = ({
}
return (
- <>
+
)
}
From 4dae7f8b04fd7345f48ba2f66eda1a529f8e7465 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8D=C3=B1igo=20Marqu=C3=ADnez=20Prado?=
<25435858+inigomarquinez@users.noreply.github.com>
Date: Thu, 29 Feb 2024 10:27:54 +0100
Subject: [PATCH 09/12] docs: minor fix
---
README.md | 4 +++-
package.json | 2 +-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 49db17fd..7904dee8 100644
--- a/README.md
+++ b/README.md
@@ -961,9 +961,11 @@ Next, we can see different attributes and tags to adjust the accessibility of th
I confirm I am aged 18 years or older, a resident of the United Kingdom and have read and agree to the competition terms and condition and privacy policy