From c503021789da8cd5498870fdbf6ae12828831ba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Fri, 7 Jul 2023 16:08:46 -0400
Subject: [PATCH] jams-react-client: can now use CountrySelect
Change-Id: I8a0a6841d68480e1931e1e84e8d21915fd74d950
---
.../components/CountrySelect/CountrySelect.js | 22 +++++++------------
1 file changed, 8 insertions(+), 14 deletions(-)
diff --git a/jams-react-client/src/components/CountrySelect/CountrySelect.js b/jams-react-client/src/components/CountrySelect/CountrySelect.js
index 425ca3b6..ed53dfb1 100644
--- a/jams-react-client/src/components/CountrySelect/CountrySelect.js
+++ b/jams-react-client/src/components/CountrySelect/CountrySelect.js
@@ -6,7 +6,6 @@ import { makeStyles } from "@mui/styles";
import i18next from "i18next";
function countryToFlag(isoCode) {
- console.log("isoCode: ", isoCode);
return isoCode
.toUpperCase()
.replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397));
@@ -22,30 +21,25 @@ const useStyles = makeStyles({
},
});
-export default function CountrySelect(props) {
+export default function CountrySelect({ setFieldValue, handleBlur }) {
const classes = useStyles();
return (
<Autocomplete
id="country-select"
options={countries}
- classes={{
- option: classes.option,
- }}
+ classes={{ option: classes.option }}
onChange={(e, value) => {
value != null
- ? props.setFieldValue("country", value.code)
- : props.setFieldValue("country", "");
+ ? setFieldValue("country", value.code)
+ : setFieldValue("country", "");
}}
autoHighlight
- getOptionLabel={(option) =>
- countryToFlag(option.code) + " " + option.label
- }
- renderOption={(option) => (
- <React.Fragment>
+ renderOption={(props, option) => (
+ <Box component="li" {...props}>
<span>{countryToFlag(option.code)}</span>
{option.label}
- </React.Fragment>
+ </Box>
)}
renderInput={(params) => (
<TextField
@@ -53,7 +47,7 @@ export default function CountrySelect(props) {
label={i18next.t("choose_a_country", "Choose a country")}
name="country"
variant="outlined"
- onBlur={props.handleBlur}
+ onBlur={handleBlur}
inputProps={{
...params.inputProps,
autoComplete: "country", // disable autocomplete and autofill
--
GitLab