@movalib/movalib-commons 1.19.0 → 1.20.0

package/devIndex.tsx

@@ -12,7 +12,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import DatePicker from '@mui/lab/DatePicker';
 import frLocale from 'date-fns/locale/fr';
 import QRCode from './src/QRCode';
-import { Alert, Box, Button, Container, Typography } from '@mui/material';
+import { Alert, Box, Button, Container, SelectChangeEvent, Typography } from '@mui/material';
 import GarageService from './src/services/GarageService';
 import AuthenticationService from './src/services/AuthenticationService';
 import Logger from './src/helpers/Logger';
@@ -25,6 +25,7 @@ import VehiclePlateField from './src/VehiclePlateField';
 import GaragePLV from './src/GaragePLV';
 import AddressFields from './src/AddressFields';
 import IbanInput from './src/IbanInput';
+import GenderSelector from './src/GenderSelector';
 
 const App = () => {
 
@@ -111,6 +112,12 @@ const App = () => {
         <ThemeProvider theme={theme}>
           <Box sx={{ mb: 4}}>
 
+          <GenderSelector sx={{ width : '20%' }}  handleSelectChange={function (event: SelectChangeEvent<string>): void {
+              return;
+            } } form={{
+              gender: undefined
+            }} />
+          
           <Container style={flexCenter} sx={{ width: '400px', mt: 2}}>
             <VehiclePlateField onValidVehiclePlate={function (vehiclePlate: string): void {
                 alert('plaque valide');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/GenderSelector.tsx

@@ -11,16 +11,16 @@ interface GenderSelectorProps {
     sx?: SxProps<Theme>;
 }
 
-const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, form, required, sx }) => {
+const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, form, required  = false, sx }) => {
   const theme = useTheme();
   return (
     <FormControl fullWidth margin="normal" required={required} sx={{ ...sx }} >
-      <InputLabel id="gender-label">Sexe</InputLabel>
+      <InputLabel id="gender-label"><>Sexe {!required && '(facultatif)'}</></InputLabel>
       <Select
         labelId="gender-label"
         id="gender"
         name="gender"
-        label="Sexe"
+        label={<>Sexe {!required && '(facultatif)'}</>}
         value={form.gender?.value}
         onChange={e => handleSelectChange(e)}
         error={Boolean(form.gender?.error)}