@movalib/movalib-commons 1.19.0 → 1.21.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/dist/devIndex.js

@@ -62,6 +62,7 @@ var VehiclePlateField_1 = __importDefault(require("./src/VehiclePlateField"));
 var GaragePLV_1 = __importDefault(require("./src/GaragePLV"));
 var AddressFields_1 = __importDefault(require("./src/AddressFields"));
 var IbanInput_1 = __importDefault(require("./src/IbanInput"));
+var GenderSelector_1 = __importDefault(require("./src/GenderSelector"));
 var App = function () {
     Logger_1.default.enableLogging();
     // Chargement de données garage de test
@@ -123,7 +124,11 @@ var App = function () {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: fr_1.default }, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { mb: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Container, __assign({ style: Tools_1.flexCenter, sx: { width: '400px', mt: 2 } }, { children: (0, jsx_runtime_1.jsx)(VehiclePlateField_1.default, { onValidVehiclePlate: function (vehiclePlate) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: fr_1.default }, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { mb: 4 } }, { children: [(0, jsx_runtime_1.jsx)(GenderSelector_1.default, { sx: { width: '20%' }, handleSelectChange: function (event) {
+                                    return;
+                                }, form: {
+                                    gender: undefined
+                                } }), (0, jsx_runtime_1.jsx)(material_1.Container, __assign({ style: Tools_1.flexCenter, sx: { width: '400px', mt: 2 } }, { children: (0, jsx_runtime_1.jsx)(VehiclePlateField_1.default, { onValidVehiclePlate: function (vehiclePlate) {
                                         alert('plaque valide');
                                     } }) })), (0, jsx_runtime_1.jsx)(MovaLogin_1.default, { darkMode: false, movaAppType: Enums_1.MovaAppType.INDIVIDUAL, version: "0.1.3", onSubmit: function (form) {
                                     alert('Form Submitted !');

package/dist/src/GenderSelector.js

@@ -15,8 +15,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var GenderSelector = function (_a) {
     var _b, _c, _d;
-    var handleSelectChange = _a.handleSelectChange, form = _a.form, required = _a.required, sx = _a.sx;
+    var handleSelectChange = _a.handleSelectChange, form = _a.form, _e = _a.required, required = _e === void 0 ? false : _e, sx = _a.sx;
     var theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: "Sexe" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: "Sexe", value: (_b = form.gender) === null || _b === void 0 ? void 0 : _b.value, onChange: function (e) { return handleSelectChange(e); }, error: Boolean((_c = form.gender) === null || _c === void 0 ? void 0 : _c.error) }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, __assign({ sx: { color: theme.palette.error.main } }, { children: (_d = form.gender) === null || _d === void 0 ? void 0 : _d.error }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Sexe ", !required && '(facultatif)'] }) })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Sexe ", !required && '(facultatif)'] }), value: (_b = form.gender) === null || _b === void 0 ? void 0 : _b.value, onChange: function (e) { return handleSelectChange(e); }, error: Boolean((_c = form.gender) === null || _c === void 0 ? void 0 : _c.error) }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, __assign({ sx: { color: theme.palette.error.main } }, { children: (_d = form.gender) === null || _d === void 0 ? void 0 : _d.error }))] })));
 };
 exports.default = GenderSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.19.0",
+  "version": "1.21.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)}