@movalib/movalib-commons 1.0.22 → 1.0.24

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as VehiclePlateField } from './src/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';
@@ -6,5 +7,7 @@ export { default as MovaCopyright } from './src/MovaCopyright';
 export { default as User } from './src/models/User';
 export { default as Role } from './src/models/Role';
 export { default as Address } from './src/models/Address';
+export { default as Vehicle } from './src/models/Vehicle';
+export { default as Document } from './src/models/Document';
 export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './src/helpers/Types';
 export { RoleType, MovaAppType } from './src/helpers/Enums';

package/dist/index.js

@@ -4,8 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MovaAppType = exports.RoleType = exports.Address = exports.Role = exports.User = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = void 0;
+exports.MovaAppType = exports.RoleType = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = exports.VehiclePlateField = void 0;
 // Export des composants
+var VehiclePlateField_1 = require("./src/VehiclePlateField");
+Object.defineProperty(exports, "VehiclePlateField", { enumerable: true, get: function () { return __importDefault(VehiclePlateField_1).default; } });
 var TestButton_1 = require("./src/TestButton");
 Object.defineProperty(exports, "TestButton", { enumerable: true, get: function () { return __importDefault(TestButton_1).default; } });
 var MovaSnackbar_1 = require("./src/MovaSnackbar");
@@ -23,6 +25,10 @@ var Role_1 = require("./src/models/Role");
 Object.defineProperty(exports, "Role", { enumerable: true, get: function () { return __importDefault(Role_1).default; } });
 var Address_1 = require("./src/models/Address");
 Object.defineProperty(exports, "Address", { enumerable: true, get: function () { return __importDefault(Address_1).default; } });
+var Vehicle_1 = require("./src/models/Vehicle");
+Object.defineProperty(exports, "Vehicle", { enumerable: true, get: function () { return __importDefault(Vehicle_1).default; } });
+var Document_1 = require("./src/models/Document");
+Object.defineProperty(exports, "Document", { enumerable: true, get: function () { return __importDefault(Document_1).default; } });
 // Export des enums
 var Enums_1 = require("./src/helpers/Enums");
 Object.defineProperty(exports, "RoleType", { enumerable: true, get: function () { return Enums_1.RoleType; } });

package/dist/src/VehiclePlateField.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+interface VehiclePlateFieldProps {
+    onValidVehiclePlate: (vehiclePlate: string) => void;
+}
+declare const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps>;
+export default VehiclePlateField;

package/dist/src/VehiclePlateField.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var VehiclePlateField = function (_a) {
+    var onValidVehiclePlate = _a.onValidVehiclePlate;
+    var _b = (0, react_1.useState)(''), value = _b[0], setValue = _b[1];
+    var _c = (0, react_1.useState)(false), error = _c[0], setError = _c[1];
+    var _d = (0, react_1.useState)(0), lastLength = _d[0], setLastLength = _d[1]; // Ajout d'un état pour stocker la longueur précédente
+    (0, react_1.useEffect)(function () {
+        if (!error && value !== '') {
+            onValidVehiclePlate(value);
+        }
+    }, [error, value, onValidVehiclePlate]);
+    var handleChange = function (e) {
+        var inputValue = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // Convertir en majuscules et supprimer les caractères non valides
+        // Vérifier si l'utilisateur est en train de supprimer un caractère
+        var isDeleting = inputValue.length < lastLength;
+        // Supprimer les tirets pour avoir une chaîne propre
+        var cleanInput = inputValue.replace(/-/g, '');
+        // Ajouter des tirets aux positions appropriées
+        if (cleanInput.length > 1 && !(cleanInput.length == 2 && isDeleting)) {
+            inputValue = "".concat(cleanInput.slice(0, 2), "-").concat(cleanInput.slice(2));
+        }
+        if (cleanInput.length > 4 && !(cleanInput.length == 5 && isDeleting)) {
+            inputValue = "".concat(cleanInput.slice(0, 2), "-").concat(cleanInput.slice(2, 5), "-").concat(cleanInput.slice(5, 7));
+        }
+        var regex = /^[A-Z]{2}-\d{3}-[A-Z]{2}$/; // Regex pour une plaque d'immatriculation française
+        setValue(inputValue);
+        setError(!regex.test(inputValue));
+        setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+    };
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Plaque d'immatriculation", variant: "outlined", value: value, onChange: handleChange, error: error, autoFocus: true, sx: {
+            width: '100%',
+            '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+        }, helperText: error ? "Utilisez le format 'XX-123-XX'" : '' }));
+};
+exports.default = VehiclePlateField;

package/index.ts

@@ -1,6 +1,7 @@
 // src/index.ts
 
 // Export des composants
+export { default as VehiclePlateField } from './src/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';
@@ -11,6 +12,8 @@ export { default as MovaCopyright } from './src/MovaCopyright';
 export { default as User } from './src/models/User';
 export { default as Role } from './src/models/Role';
 export { default as Address } from './src/models/Address';
+export { default as Vehicle } from './src/models/Vehicle';
+export { default as Document } from './src/models/Document';
 
 // Export des types
 export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './src/helpers/Types';

package/package.json

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

package/src/VehiclePlateField.tsx

@@ -0,0 +1,63 @@
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import TextField from '@mui/material/TextField';
+
+interface VehiclePlateFieldProps {
+    onValidVehiclePlate: (vehiclePlate: string) => void;
+  }
+
+const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps> = ({ onValidVehiclePlate }) => {
+
+  const [value, setValue] = useState<string>('');
+  const [error, setError] = useState<boolean>(false);
+  const [lastLength, setLastLength] = useState<number>(0); // Ajout d'un état pour stocker la longueur précédente
+
+  useEffect(() => {
+    if (!error && value !== '') {
+        onValidVehiclePlate(value);
+    }
+  }, [error, value, onValidVehiclePlate]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+
+    let inputValue = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // Convertir en majuscules et supprimer les caractères non valides
+
+     // Vérifier si l'utilisateur est en train de supprimer un caractère
+     const isDeleting = inputValue.length < lastLength;
+
+     // Supprimer les tirets pour avoir une chaîne propre
+    const cleanInput = inputValue.replace(/-/g, '');
+
+    // Ajouter des tirets aux positions appropriées
+    if (cleanInput.length > 1 && !(cleanInput.length == 2 && isDeleting)) {
+      inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2)}`;
+    }
+
+    if (cleanInput.length > 4 && !(cleanInput.length == 5 && isDeleting)) {
+      inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2, 5)}-${cleanInput.slice(5, 7)}`;
+    }
+
+    const regex = /^[A-Z]{2}-\d{3}-[A-Z]{2}$/; // Regex pour une plaque d'immatriculation française
+
+    setValue(inputValue);
+    setError(!regex.test(inputValue));
+    setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+  };
+
+  return (
+    <TextField
+      label="Plaque d'immatriculation"
+      variant="outlined"
+      value={value}
+      onChange={handleChange}
+      error={error}
+      autoFocus
+      sx={{ 
+        width: '100%', 
+        '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+      }}
+      helperText={error ? "Utilisez le format 'XX-123-XX'" : ''}
+    />
+  );
+};
+
+export default VehiclePlateField;