diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx index 3686b0947..25a80c136 100644 --- a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx +++ b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx @@ -4,11 +4,11 @@ import { Page, Button, TDataTable, - defaultGroups, } from "@prefabs.tech/react-ui"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; +import englishData from "./en.json"; import frenchData from "./fr.json"; import nepaliData from "./np.json"; import { CodeBlock, Section } from "../../../../components/Demo"; @@ -18,6 +18,17 @@ export const CountryPickerDemo = () => { const navigate = useNavigate(); const locale = i18n.language; + const frenchTranslation = { + ...frenchData, + EU: "Union Européenne", + ASEAN: "ASEAN", + }; + const englishTranslation = { + ...englishData, + EU: "European Union", + ASEAN: "ASEAN", + }; + const data = [ { default: "true", @@ -80,7 +91,7 @@ export const CountryPickerDemo = () => { description: t("countryPicker.propertiesDescription.groups"), id: 9, prop: "groups", - type: "GroupData", + type: "Groups", }, { default: "[]", @@ -168,9 +179,10 @@ export const CountryPickerDemo = () => { const [flagsSelectValue, setFlagsSelectValue] = useState(""); const [includeFavoritesValue, setIncludeFavoritesValue] = useState(""); - const [groupedValue, setGroupedValue] = useState(""); const [customGroupValue, setCustomGroupValue] = useState(""); const [favoriteGroupValue, setFavoriteGroupValue] = useState(""); + const [translationGroupValue, setTranslationGroupValue] = + useState(""); const customFlagsPath = (code: string) => { return `https://flagcdn.com/${code.toLowerCase().trim()}.svg`; @@ -470,69 +482,85 @@ const selectedLocale = i18n.language;
- setGroupedValue(value as string) + setCustomGroupValue(value as string) } />
-
+
- setCustomGroupValue(value as string) + setTranslationGroupValue(value as string) } /> setCustomGroupValue(value)} + groups={groups} + locale={selectedLocale} + locales={locales} + value={value} + onChange={(value) => setSingleSelectValue(value)} />' />
@@ -568,7 +596,7 @@ const myRegions = { name="countryPicker" placeholder={t("countryPicker.placeholders.single")} value={favoriteGroupValue} - onChange={(value) => setFavoriteGroupValue(value)} + onChange={(value) => setSingleSelectValue(value)} />' />
@@ -608,7 +636,7 @@ const myRegions = { exampleCode={` type Translation = Record; -type Locales = Record; +type Locales = Record; type Groups = Record; diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/en.json b/apps/demo/src/Views/Ui/components/FormWidgets/en.json new file mode 100644 index 000000000..531c47afe --- /dev/null +++ b/apps/demo/src/Views/Ui/components/FormWidgets/en.json @@ -0,0 +1,251 @@ +{ + "AF": "Afghanistan", + "AX": "Åland Islands", + "AL": "Albania", + "DZ": "Algeria", + "AS": "American Samoa", + "AD": "Andorra", + "AO": "Angola", + "AI": "Anguilla", + "AQ": "Antarctica", + "AG": "Antigua and Barbuda", + "AR": "Argentina", + "AM": "Armenia", + "AW": "Aruba", + "AU": "Australia", + "AT": "Austria", + "AZ": "Azerbaijan", + "BS": "Bahamas", + "BH": "Bahrain", + "BD": "Bangladesh", + "BB": "Barbados", + "BY": "Belarus", + "BE": "Belgium", + "BZ": "Belize", + "BJ": "Benin", + "BM": "Bermuda", + "BT": "Bhutan", + "BO": "Bolivia", + "BQ": "Bonaire, Sint Eustatius and Saba", + "BA": "Bosnia and Herzegovina", + "BW": "Botswana", + "BV": "Bouvet Island", + "BR": "Brazil", + "IO": "British Indian Ocean Territory", + "BN": "Brunei Darussalam", + "BG": "Bulgaria", + "BF": "Burkina Faso", + "BI": "Burundi", + "CV": "Cabo Verde", + "KH": "Cambodia", + "CM": "Cameroon", + "CA": "Canada", + "KY": "Cayman Islands", + "CF": "Central African Republic", + "TD": "Chad", + "CL": "Chile", + "CN": "China", + "CX": "Christmas Island", + "CC": "Cocos (Keeling) Islands", + "CO": "Colombia", + "KM": "Comoros", + "CG": "Congo", + "CD": "Congo, Democratic Republic of the", + "CK": "Cook Islands", + "CR": "Costa Rica", + "CI": "Côte d'Ivoire", + "HR": "Croatia", + "CU": "Cuba", + "CW": "Curaçao", + "CY": "Cyprus", + "CZ": "Czechia", + "DK": "Denmark", + "DJ": "Djibouti", + "DM": "Dominica", + "DO": "Dominican Republic", + "EC": "Ecuador", + "EG": "Egypt", + "SV": "El Salvador", + "GQ": "Equatorial Guinea", + "ER": "Eritrea", + "EE": "Estonia", + "SZ": "Eswatini", + "ET": "Ethiopia", + "FK": "Falkland Islands (Malvinas)", + "FO": "Faroe Islands", + "FJ": "Fiji", + "FI": "Finland", + "FR": "France", + "GF": "French Guiana", + "PF": "French Polynesia", + "TF": "French Southern Territories", + "GA": "Gabon", + "GM": "Gambia", + "GE": "Georgia", + "DE": "Germany", + "GH": "Ghana", + "GI": "Gibraltar", + "GR": "Greece", + "GL": "Greenland", + "GD": "Grenada", + "GP": "Guadeloupe", + "GU": "Guam", + "GT": "Guatemala", + "GG": "Guernsey", + "GN": "Guinea", + "GW": "Guinea-Bissau", + "GY": "Guyana", + "HT": "Haiti", + "HM": "Heard Island and McDonald Islands", + "VA": "Holy See", + "HN": "Honduras", + "HK": "Hong Kong", + "HU": "Hungary", + "IS": "Iceland", + "IN": "India", + "ID": "Indonesia", + "IR": "Iran", + "IQ": "Iraq", + "IE": "Ireland", + "IM": "Isle of Man", + "IL": "Israel", + "IT": "Italy", + "JM": "Jamaica", + "JP": "Japan", + "JE": "Jersey", + "JO": "Jordan", + "KZ": "Kazakhstan", + "KE": "Kenya", + "KI": "Kiribati", + "KP": "Korea, Democratic People's Republic of", + "KR": "Korea, Republic of", + "KW": "Kuwait", + "KG": "Kyrgyzstan", + "LA": "Lao People's Democratic Republic", + "LV": "Latvia", + "LB": "Lebanon", + "LS": "Lesotho", + "LR": "Liberia", + "LY": "Libya", + "LI": "Liechtenstein", + "LT": "Lithuania", + "LU": "Luxembourg", + "MO": "Macao", + "MG": "Madagascar", + "MW": "Malawi", + "MY": "Malaysia", + "MV": "Maldives", + "ML": "Mali", + "MT": "Malta", + "MH": "Marshall Islands", + "MQ": "Martinique", + "MR": "Mauritania", + "MU": "Mauritius", + "YT": "Mayotte", + "MX": "Mexico", + "FM": "Micronesia", + "MD": "Moldova", + "MC": "Monaco", + "MN": "Mongolia", + "ME": "Montenegro", + "MS": "Montserrat", + "MA": "Morocco", + "MZ": "Mozambique", + "MM": "Myanmar", + "NA": "Namibia", + "NR": "Nauru", + "NP": "Nepal", + "NL": "Netherlands", + "NC": "New Caledonia", + "NZ": "New Zealand", + "NI": "Nicaragua", + "NE": "Niger", + "NG": "Nigeria", + "NU": "Niue", + "NF": "Norfolk Island", + "MK": "North Macedonia", + "MP": "Northern Mariana Islands", + "NO": "Norway", + "OM": "Oman", + "PK": "Pakistan", + "PW": "Palau", + "PS": "Palestine, State of", + "PA": "Panama", + "PG": "Papua New Guinea", + "PY": "Paraguay", + "PE": "Peru", + "PH": "Philippines", + "PN": "Pitcairn", + "PL": "Poland", + "PT": "Portugal", + "PR": "Puerto Rico", + "QA": "Qatar", + "RE": "Réunion", + "RO": "Romania", + "RU": "Russian Federation", + "RW": "Rwanda", + "BL": "Saint Barthélemy", + "SH": "Saint Helena, Ascension and Tristan da Cunha", + "KN": "Saint Kitts and Nevis", + "LC": "Saint Lucia", + "MF": "Saint Martin (French part)", + "PM": "Saint Pierre and Miquelon", + "VC": "Saint Vincent and the Grenadines", + "WS": "Samoa", + "SM": "San Marino", + "ST": "Sao Tome and Principe", + "SA": "Saudi Arabia", + "SN": "Senegal", + "RS": "Serbia", + "SC": "Seychelles", + "SL": "Sierra Leone", + "SG": "Singapore", + "SX": "Sint Maarten (Dutch part)", + "SK": "Slovakia", + "SI": "Slovenia", + "SB": "Solomon Islands", + "SO": "Somalia", + "ZA": "South Africa", + "GS": "South Georgia and the South Sandwich Islands", + "SS": "South Sudan", + "ES": "Spain", + "LK": "Sri Lanka", + "SD": "Sudan", + "SR": "Suriname", + "SJ": "Svalbard and Jan Mayen", + "SE": "Sweden", + "CH": "Switzerland", + "SY": "Syrian Arab Republic", + "TW": "Taiwan", + "TJ": "Tajikistan", + "TZ": "Tanzania, United Republic of", + "TH": "Thailand", + "TL": "Timor-Leste", + "TG": "Togo", + "TK": "Tokelau", + "TO": "Tonga", + "TT": "Trinidad and Tobago", + "TN": "Tunisia", + "TR": "Turkey", + "TM": "Turkmenistan", + "TC": "Turks and Caicos Islands", + "TV": "Tuvalu", + "UG": "Uganda", + "UA": "Ukraine", + "AE": "United Arab Emirates", + "GB": "United Kingdom", + "US": "United States", + "UM": "United States Minor Outlying Islands", + "UY": "Uruguay", + "UZ": "Uzbekistan", + "VU": "Vanuatu", + "VE": "Venezuela", + "VN": "Viet Nam", + "VG": "Virgin Islands, British", + "VI": "Virgin Islands, U.S.", + "WF": "Wallis and Futuna", + "EH": "Western Sahara", + "YE": "Yemen", + "ZM": "Zambia", + "ZW": "Zimbabwe" +} diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index 3ee9c0d53..1db0a957c 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -149,9 +149,9 @@ "fallbackLocale": "Fallback locale", "favorites": "Favorites", "flagsStyle": "Flags style and position", - "groupingCustom": "Custom grouping", - "groupingDefault": "Default grouping", + "groupingDefault": "Grouping", "groupingFavorites": "Grouping with favorites", + "groupingWithTranslation": "Grouping with translations", "include": "Include filter", "includeFavorites": "Include favorites", "labels": { diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index b14f896e9..8b8a65ba4 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -149,9 +149,9 @@ "fallbackLocale": "Fallback locale (fr)", "favorites": "Favorites (fr)", "flagsStyle": "Flags style and position (fr)", - "groupingCustom": "Custom grouping (fr)", - "groupingDefault": "Default grouping (fr)", + "groupingDefault": "Grouping (fr)", "groupingFavorites": "Grouping with favorites (fr)", + "groupingWithTranslation": "Grouping with translations (fr)", "locale": "New locale support (fr)", "include": "Include filter (fr)", "includeFavorites": "Include favorites (fr)", diff --git a/packages/ui/src/FormWidgets/CountryPicker/groups.json b/packages/ui/src/FormWidgets/CountryPicker/groups.json deleted file mode 100644 index 7f3411ee7..000000000 --- a/packages/ui/src/FormWidgets/CountryPicker/groups.json +++ /dev/null @@ -1,310 +0,0 @@ -{ - "EU": [ - "AT", - "BE", - "BG", - "HR", - "CY", - "CZ", - "DK", - "EE", - "FI", - "FR", - "DE", - "GR", - "HU", - "IE", - "IT", - "LV", - "LT", - "LU", - "MT", - "NL", - "PL", - "PT", - "RO", - "SK", - "SI", - "ES", - "SE" - ], - "ASEAN": ["BN", "KH", "ID", "LA", "MY", "MM", "PH", "SG", "TH", "VN"], - "NATO": [ - "AL", - "BE", - "BG", - "CA", - "HR", - "CZ", - "DK", - "EE", - "FI", - "FR", - "DE", - "GR", - "HU", - "IS", - "IT", - "LV", - "LT", - "LU", - "ME", - "NL", - "MK", - "NO", - "PL", - "PT", - "RO", - "SK", - "SI", - "ES", - "SE", - "TR", - "GB", - "US" - ], - "Schengen Area": [ - "AT", - "BE", - "HR", - "CZ", - "DK", - "EE", - "FI", - "FR", - "DE", - "GR", - "HU", - "IS", - "IT", - "LV", - "LI", - "LT", - "LU", - "MT", - "NL", - "NO", - "PL", - "PT", - "SK", - "SI", - "ES", - "SE", - "CH" - ], - "North America": [ - "AG", - "BS", - "BB", - "BZ", - "CA", - "CR", - "CU", - "DM", - "DO", - "SV", - "GD", - "GT", - "HT", - "HN", - "JM", - "MX", - "NI", - "PA", - "KN", - "LC", - "VC", - "TT", - "US" - ], - "South America": [ - "AR", - "BO", - "BR", - "CL", - "CO", - "EC", - "GY", - "PY", - "PE", - "SR", - "UY", - "VE" - ], - "Europe": [ - "AL", - "AD", - "AM", - "AT", - "AZ", - "BY", - "BE", - "BA", - "BG", - "HR", - "CY", - "CZ", - "DK", - "EE", - "FI", - "FR", - "GE", - "DE", - "GR", - "HU", - "IS", - "IE", - "IT", - "KZ", - "XK", - "LV", - "LI", - "LT", - "LU", - "MT", - "MD", - "MC", - "ME", - "NL", - "MK", - "NO", - "PL", - "PT", - "RO", - "RU", - "SM", - "RS", - "SK", - "SI", - "ES", - "SE", - "CH", - "TR", - "UA", - "GB", - "VA" - ], - "Asia": [ - "AF", - "AM", - "AZ", - "BH", - "BD", - "BT", - "BN", - "KH", - "CN", - "CY", - "GE", - "IN", - "ID", - "IR", - "IQ", - "IL", - "JP", - "JO", - "KZ", - "KW", - "KG", - "LA", - "LB", - "MY", - "MV", - "MN", - "MM", - "NP", - "KP", - "KR", - "OM", - "PK", - "PS", - "PH", - "QA", - "RU", - "SA", - "SG", - "LK", - "SY", - "TW", - "TJ", - "TH", - "TR", - "TM", - "AE", - "UZ", - "VN", - "YE" - ], - "Africa": [ - "DZ", - "AO", - "BJ", - "BW", - "BF", - "BI", - "CV", - "CM", - "CF", - "TD", - "KM", - "CD", - "CG", - "CI", - "DJ", - "EG", - "GQ", - "ER", - "SZ", - "ET", - "GA", - "GM", - "GH", - "GN", - "GW", - "KE", - "LS", - "LR", - "LY", - "MG", - "MW", - "ML", - "MR", - "MU", - "MA", - "MZ", - "NA", - "NE", - "NG", - "RW", - "ST", - "SN", - "SC", - "SL", - "SO", - "ZA", - "SS", - "SD", - "TZ", - "TG", - "TN", - "UG", - "ZM", - "ZW" - ], - "Oceania": [ - "AU", - "FJ", - "KI", - "MH", - "FM", - "NR", - "NZ", - "PW", - "PG", - "WS", - "SB", - "TO", - "TV", - "VU" - ] -} diff --git a/packages/ui/src/FormWidgets/CountryPicker/index.tsx b/packages/ui/src/FormWidgets/CountryPicker/index.tsx index 291ee5051..d110177f9 100644 --- a/packages/ui/src/FormWidgets/CountryPicker/index.tsx +++ b/packages/ui/src/FormWidgets/CountryPicker/index.tsx @@ -5,124 +5,143 @@ import { getFlagClass, } from "../../utils/country-picker"; import { Select, ISelectProperties } from "../Select"; -import defaultGroups from "./groups.json"; -import type { Option, GroupedOption as OptionGroup } from "../Select"; +import type { + CountryPickerProperties, + Groups, + Locales, + Translation, +} from "../../types/country-picker"; +import type { GroupedOption as OptionGroup, Option } from "../Select"; -export type Translation = Record; -export type Locales = Record; -export type Groups = Record; - -export type CountryPickerLabels = { - favorites?: string; - allCountries?: string; +const getLabel = ( + code: string, + locale: string, + locales: Locales | undefined, + fallbackTranslation: Translation, +) => { + return locales?.[locale]?.[code] || fallbackTranslation[code] || code; }; -export type CountryPickerProperties = Omit< - ISelectProperties, - "options" -> & { - autoSortOptions?: boolean; - exclude?: string[]; - fallbackLocale?: string; - favorites?: string[]; - flags?: boolean; - flagsPath?: (code: string) => string; - flagsPosition?: "left" | "right" | "right-edge"; - flagsStyle?: "circle" | "rectangular" | "square"; - groups?: Groups; - include?: string[]; - includeFavorites?: boolean; - labels?: CountryPickerLabels; - locale?: string; - locales?: Locales; -}; +const sortByLabel = ( + optionA: Option | OptionGroup, + optionB: Option | OptionGroup, +) => { + if (!optionA.label) { + return 1; + } -export { defaultGroups }; + if (!optionB.label) { + return -1; + } -const getBaseOptions = ( - exclude: string[] | undefined, - fallbackLocale: string, - include: string[] | undefined, + return optionA.label.localeCompare(optionB.label); +}; + +const getFavoriteOptions = ( + favorites: string[], locale: string, locales: Locales | undefined, + fallbackTranslation: Translation, + autoSortOptions: boolean, ): Option[] => { - const fallbackData = getFallbackTranslation(fallbackLocale, locales); - - if (!fallbackData) { + if (!favorites.length) { return []; } - const baseOptions: Option[] = []; + const options = favorites.map((code) => { + return { + value: code as unknown as T, + label: getLabel(code, locale, locales, fallbackTranslation), + }; + }); - if (include?.length) { - include.forEach((code) => { - if (exclude?.includes(code)) { - return; - } + if (autoSortOptions) { + options.sort(sortByLabel); + } - if (!fallbackData[code]) { - return; - } + return options; +}; - baseOptions.push({ - value: code as unknown as T, - label: getLabel(code, locale, locales, fallbackData[code]), +const getFullList = ( + groups: Groups | undefined, + include: string[] | undefined, + exclude: string[], + favorites: string[], + includeFavorites: boolean, + locale: string, + locales: Locales | undefined, + fallbackTranslation: Translation, + labels: CountryPickerProperties["labels"], + autoSortOptions: boolean, +): Option[] | OptionGroup[] => { + let options = [] as unknown as Option[] | OptionGroup[]; + + if (!groups || Object.keys(groups).length == 0) { + const codes = include || Object.keys(fallbackTranslation); + options = codes + .filter((code) => { + if (exclude.includes(code)) { + return false; + } + + if (!includeFavorites && favorites.includes(code)) { + return false; + } + + return true; + }) + .map((code) => { + return { + value: code as unknown as T, + label: getLabel(code, locale, locales, fallbackTranslation), + }; }); - }); - - return baseOptions; - } - Object.entries(fallbackData).forEach(([code, fallbackLabel]) => { - if (exclude?.includes(code)) { - return; + if (autoSortOptions) { + options.sort(sortByLabel); } - baseOptions.push({ - value: code as unknown as T, - label: getLabel(code, locale, locales, fallbackLabel), - }); - }); - - return baseOptions; -}; - -const getGroups = (groups: Groups, list: Option[]): OptionGroup[] => { - const optionMap = new Map( - list.map((option) => [String(option.value), option]), - ); - - return Object.entries(groups).reduce[]>( - (groupedOptions, [groupLabel, groupCodes]) => { - const options = groupCodes - .map((code) => optionMap.get(code)) - .filter(Boolean) as Option[]; + if (favorites.length > 0) { + return [ + { + label: labels?.allCountries || "All countries", + options: options, + }, + ]; + } + } else { + options = Object.entries(groups).map(([key, codes]) => { + const countries = codes.map((code) => { + return { + value: code as unknown as T, + label: getLabel(code, locale, locales, fallbackTranslation), + }; + }); - if (options.length) { - groupedOptions.push({ label: groupLabel, options }); + if (autoSortOptions) { + countries.sort(sortByLabel); } - return groupedOptions; - }, - [], - ); -}; + return { + label: getLabel(key, locale, locales, fallbackTranslation), + options: countries, + }; + }); -const getLabel = ( - code: string, - locale: string, - locales: Locales | undefined, - fallbackLabel?: string, -) => { - return locales?.[locale]?.[code] || fallbackLabel || code; + if (autoSortOptions) { + options.sort(sortByLabel); + } + } + + return options; }; const getOptions = ({ autoSortOptions = true, - exclude, + exclude = [], fallbackLocale = "en", - favorites, + favorites = [], groups, include, includeFavorites = true, @@ -142,159 +161,42 @@ const getOptions = ({ | "locale" | "locales" >) => { - const baseOptions = getBaseOptions( - exclude, - fallbackLocale, - include, - locale, - locales, - ); + const options: (Option | OptionGroup)[] = []; - if (favorites && favorites.length > 0) { - const optionsWithFavorites = getOptionsWithFavorites( - baseOptions, - favorites, - includeFavorites, - groups, - labels, - ); + const fallbackTranslation = + getFallbackTranslation(fallbackLocale, locales) || {}; - const hasFavoriteOptions = optionsWithFavorites[0].options.length > 0; - - return getSortedOptions( + if (favorites.length > 0) { + const favoriteOptions = getFavoriteOptions( + favorites, + locale, + locales, + fallbackTranslation, autoSortOptions, - optionsWithFavorites, - hasFavoriteOptions, ); - } - - if (groups && Object.keys(groups).length > 0) { - const optionGroups = getGroups(groups, baseOptions); - - return getSortedOptions(autoSortOptions, optionGroups); - } - return getSortedOptions(autoSortOptions, baseOptions); -}; - -const getOptionsWithFavorites = ( - baseOptions: Option[], - favorites: string[], - includeFavorites: boolean, - groups?: Groups, - labels?: CountryPickerLabels, -) => { - const favoriteOptions = favorites - .map((code) => baseOptions.find((option) => String(option.value) === code)) - .filter(Boolean) as Option[]; - - const mainOptions = includeFavorites - ? baseOptions - : baseOptions.filter((option) => !favorites.includes(String(option.value))); - - const mainGroups = - groups && Object.keys(groups).length > 0 - ? getGroups(groups, mainOptions) - : [ - { - label: labels?.allCountries || "All countries", - options: mainOptions, - }, - ]; - - return [ - { + options.push({ label: labels?.favorites || "Favorites", options: favoriteOptions, - }, - ...mainGroups, - ]; -}; - -const getSortedOptions = ( - autoSortOptions: boolean, - options: Option[] | OptionGroup[], - hasFavoriteOptions?: boolean, -) => { - if (!autoSortOptions) { - return options as Option[] | OptionGroup[]; - } - - if (!hasOptionGroup(options)) { - return [...(options as Option[])].sort(sortByLabel); - } - - const sortedOptionsGroup = (options as OptionGroup[]).map((group) => { - return { - ...group, - options: [...(group.options as Option[])].sort(sortByLabel), - }; - }); - - if (hasFavoriteOptions) { - return [ - sortedOptionsGroup[0], - ...sortedOptionsGroup.slice(1).sort(sortByLabel), - ]; + }); } - return sortedOptionsGroup.sort(sortByLabel); -}; - -const hasOptionGroup = ( - options: Option[] | OptionGroup[], -): options is OptionGroup[] => { - return ( - Array.isArray(options) && - options.length > 0 && - options.every( - (option): option is OptionGroup => - typeof option === "object" && "options" in option, - ) - ); -}; - -const renderCountryOption = ( - option: Option, - { - flags, - flagsPath, - flagsPosition = "left", - flagsStyle = "rectangular", - }: Pick< - CountryPickerProperties, - "flags" | "flagsPath" | "flagsPosition" | "flagsStyle" - >, -) => { - const code = String(option.value); - const flagClass = getFlagClass(code, flagsPosition, flagsStyle); - - return ( -
- {flags && - (flagsPath ? ( - {option.label} - ) : ( - - ))} - {option.label} -
+ const fullList = getFullList( + groups, + include, + exclude, + favorites, + includeFavorites, + locale, + locales, + fallbackTranslation, + labels, + autoSortOptions, ); -}; -const sortByLabel = ( - optionA: Option | OptionGroup, - optionB: Option | OptionGroup, -) => { - if (!optionA.label) { - return 1; - } - - if (!optionB.label) { - return -1; - } + options.push(...fullList); - return optionA.label.localeCompare(optionB.label); + return options; }; export const CountryPicker = ({ @@ -355,13 +257,26 @@ export const CountryPicker = ({ ); const handleRenderOption = useCallback( - (option: Option) => - renderCountryOption(option, { - flags, - flagsPath, - flagsPosition, - flagsStyle, - }), + (option: Option) => { + const code = String(option.value); + const flagClass = getFlagClass(code, flagsPosition, flagsStyle); + + return ( +
+ {flags && + (flagsPath ? ( + {option.label} + ) : ( + + ))} + {option.label} +
+ ); + }, [flags, flagsPath, flagsPosition, flagsStyle], );