@movalib/movalib-commons 1.0.40 → 1.0.42

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';
 export { default as MovaSignUp } from './src/MovaSignUp';
 export { default as MovaCopyright } from './src/MovaCopyright';
+export { default as MovaVehicleTireField } from './src/MovaVehicleTireField';
 export { default as User } from './src/models/User';
 export { default as Role } from './src/models/Role';
 export { default as Address } from './src/models/Address';

package/dist/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = exports.MovaAppType = exports.RoleType = exports.validateField = exports.VehicleTire = exports.Event = exports.Schedule = exports.Garage = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = exports.VehiclePlateField = void 0;
+exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = exports.MovaAppType = exports.RoleType = exports.validateField = exports.VehicleTire = exports.Event = exports.Schedule = exports.Garage = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.MovaVehicleTireField = 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; } });
@@ -18,6 +18,8 @@ var MovaSignUp_1 = require("./src/MovaSignUp");
 Object.defineProperty(exports, "MovaSignUp", { enumerable: true, get: function () { return __importDefault(MovaSignUp_1).default; } });
 var MovaCopyright_1 = require("./src/MovaCopyright");
 Object.defineProperty(exports, "MovaCopyright", { enumerable: true, get: function () { return __importDefault(MovaCopyright_1).default; } });
+var MovaVehicleTireField_1 = require("./src/MovaVehicleTireField");
+Object.defineProperty(exports, "MovaVehicleTireField", { enumerable: true, get: function () { return __importDefault(MovaVehicleTireField_1).default; } });
 // Export des classes
 var User_1 = require("./src/models/User");
 Object.defineProperty(exports, "User", { enumerable: true, get: function () { return __importDefault(User_1).default; } });

package/dist/src/MovaVehicleTireField.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import VehicleTire from './models/VehicleTire';
+interface MovaVehicleTireFieldProps {
+    vehicleTire: VehicleTire;
+    onChangeVehicleTire: (vehicleTire: VehicleTire, isValid: boolean) => void;
+}
+declare const MovaVehicleTireField: FC<MovaVehicleTireFieldProps>;
+export default MovaVehicleTireField;

package/dist/src/MovaVehicleTireField.js

@@ -0,0 +1,73 @@
+"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 material_1 = require("@mui/material");
+var react_1 = require("react");
+var VehicleTire_1 = __importDefault(require("./models/VehicleTire"));
+var Tools_1 = require("./helpers/Tools");
+// Regex pour une taille de pneumatique Française
+var regex = /^\d{9}[A-Za-z]$/;
+var MovaVehicleTireField = function (_a) {
+    var vehicleTire = _a.vehicleTire, onChangeVehicleTire = _a.onChangeVehicleTire;
+    var _b = (0, react_1.useState)(''), rawValue = _b[0], setRawValue = _b[1];
+    var _c = (0, react_1.useState)(''), tireInfo = _c[0], setTireInfo = _c[1];
+    var _d = (0, react_1.useState)(false), error = _d[0], setError = _d[1];
+    var _e = (0, react_1.useState)(0), lastLength = _e[0], setLastLength = _e[1]; // Ajout d'un état pour stocker la longueur précédente
+    (0, react_1.useEffect)(function () {
+        setTireInfo((0, Tools_1.formatVehicleTire)(vehicleTire));
+    }, [vehicleTire]);
+    (0, react_1.useEffect)(function () {
+        // Cette expression régulière supprimera tous les caractères qui ne sont pas des chiffres ou des lettres alphabétiques, à l'exception de "R" et "r".
+        // On ne peut saisir que 10 caractères maximum (ex : 245551791V)
+        var value = rawValue.toUpperCase().replace(/[^0-9A-QS-Za-qs-z]/g, '').slice(0, 10);
+        console.log(value);
+        // On valide la saisie (le champ n'est pas obligatoire)
+        var isValid = value.length == 0 || (value.length > 0 && regex.test(value));
+        setError(!regex.test(value));
+        console.log(isValid);
+        // Vérifier si l'utilisateur est en train de supprimer un caractère
+        var isDeleting = value.length < lastLength;
+        console.log("Deleting : ".concat(isDeleting));
+        // Ajout du " / "
+        if (value.length >= 3 && !(rawValue.length == 5 && isDeleting)) {
+            console.log('Ajout : /');
+            value = "".concat(value.substring(0, 3), " / ").concat(value.substring(3));
+        }
+        // Ajout du " R"
+        if (value.length >= 8 && !(rawValue.length == 9 && isDeleting)) {
+            console.log('Ajout : R');
+            value = "".concat(value.substring(0, 8), " R").concat(value.substring(8));
+        }
+        // Ajout d'un espace après la saisie du diamètre des pneus
+        if (value.length >= 12 && !(rawValue.length <= 12 && isDeleting)) {
+            console.log('Ajout : " "');
+            value = "".concat(value.substring(0, 12), " ").concat(value.substring(12));
+        }
+        setTireInfo(value);
+        console.log(value.length);
+        if (value.length >= 16 && !(rawValue.length == 17 && isDeleting)) {
+            var parts = value.split(" ");
+            if (parts.length === 5) {
+                var width = parts[0], separator = parts[1], height = parts[2], diameter = parts[3], speedIndex = parts[4];
+                var vehicleTire_1 = new VehicleTire_1.default(width, height, diameter, speedIndex);
+                onChangeVehicleTire(vehicleTire_1, isValid);
+            }
+        }
+        else {
+            onChangeVehicleTire(vehicleTire, isValid);
+        }
+        setLastLength(value.length); // Mettre à jour la longueur précédente
+    }, [rawValue]);
+    var handleChange = function (e) {
+        e.preventDefault();
+        setRawValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Taille des pneumatiques", variant: "outlined", value: tireInfo, onChange: handleChange, fullWidth: true, placeholder: 'XXX XX RXX XXX', sx: {
+            width: '100%',
+            '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+        }, error: error && tireInfo.length > 0, helperText: error && tireInfo.length > 0 ? "Saisie invalide" : '' }));
+};
+exports.default = MovaVehicleTireField;

package/dist/src/helpers/Tools.d.ts

@@ -1,4 +1,7 @@
+import VehicleTire from "../models/VehicleTire";
 import { MovaFormField } from "./Types";
+export declare function formatVehicleTire(vehicleTire: VehicleTire): string;
+export declare function formatVehicleTireStr(input: string): string;
 /**
  * Valide un champ de formulaire en utilisant une fonction de validation personnalisée.
  *

package/dist/src/helpers/Tools.js

@@ -1,6 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateField = void 0;
+exports.validateField = exports.formatVehicleTireStr = exports.formatVehicleTire = void 0;
+function formatVehicleTire(vehicleTire) {
+    if (vehicleTire) {
+        var concatened = "".concat(vehicleTire.width).concat(vehicleTire.height).concat(vehicleTire.diameter).concat(vehicleTire.speedIndex);
+        return formatVehicleTireStr(concatened);
+    }
+    return '';
+}
+exports.formatVehicleTire = formatVehicleTire;
+function formatVehicleTireStr(input) {
+    var formatted = input.toUpperCase().replace(/[^0-9A-QS-Za-qs-z]/g, '').slice(0, 10);
+    if (formatted.length >= 3) {
+        formatted = "".concat(formatted.substring(0, 3), " / ").concat(formatted.substring(3));
+    }
+    var indexOfR = formatted.indexOf(" R");
+    if (formatted.length >= 8 && indexOfR === -1) {
+        formatted = "".concat(formatted.substring(0, 8), " R").concat(formatted.substring(8));
+        if (formatted.length >= 12 && indexOfR === -1)
+            formatted = "".concat(formatted.substring(0, 12), " ").concat(formatted.substring(12));
+    }
+    else if (indexOfR !== -1 && formatted.length > indexOfR + 2) {
+        formatted = "".concat(formatted.substring(0, indexOfR + 2), " ").concat(formatted.substring(indexOfR + 2));
+    }
+    return formatted;
+}
+exports.formatVehicleTireStr = formatVehicleTireStr;
+;
 /**
  * Valide un champ de formulaire en utilisant une fonction de validation personnalisée.
  *

package/dist/src/models/VehicleTire.d.ts

@@ -1,7 +1,7 @@
 export default class VehicleTire {
-    tireWidth: string;
-    tireHeight: string;
-    tireDiameter: string;
-    tireSpeedIndex: string;
-    constructor(tireWidth: string, tireHeight: string, tireDiameter: string, tireSpeedIndex: string);
+    width: string;
+    height: string;
+    diameter: string;
+    speedIndex: string;
+    constructor(width: string, height: string, diameter: string, speedIndex: string);
 }

package/dist/src/models/VehicleTire.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var VehicleTire = /** @class */ (function () {
-    function VehicleTire(tireWidth, tireHeight, tireDiameter, tireSpeedIndex) {
-        this.tireWidth = tireWidth;
-        this.tireHeight = tireHeight;
-        this.tireDiameter = tireDiameter;
-        this.tireSpeedIndex = tireSpeedIndex;
+    function VehicleTire(width, height, diameter, speedIndex) {
+        this.width = width;
+        this.height = height;
+        this.diameter = diameter;
+        this.speedIndex = speedIndex;
     }
     return VehicleTire;
 }());

package/index.ts

@@ -7,6 +7,8 @@ export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';
 export { default as MovaSignUp } from './src/MovaSignUp';
 export { default as MovaCopyright } from './src/MovaCopyright';
+export { default as MovaVehicleTireField } from './src/MovaVehicleTireField';
+
 
 // Export des classes
 export { default as User } from './src/models/User';

package/package.json

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

package/src/MovaVehicleTireField.tsx

@@ -0,0 +1,105 @@
+import { TextField } from '@mui/material';
+import { useState, type FC, useEffect } from 'react';
+import VehicleTire from './models/VehicleTire';
+import { formatVehicleTire } from './helpers/Tools';
+
+interface MovaVehicleTireFieldProps {
+    vehicleTire: VehicleTire,
+    onChangeVehicleTire: (vehicleTire: VehicleTire, isValid: boolean) => void;
+}
+
+// Regex pour une taille de pneumatique Française
+const regex = /^\d{9}[A-Za-z]$/; 
+
+const MovaVehicleTireField: FC<MovaVehicleTireFieldProps> = ({ vehicleTire, onChangeVehicleTire }) => {
+
+    const [rawValue, setRawValue] = useState('');
+    const [tireInfo, setTireInfo] = useState('');
+    const [error, setError] = useState<boolean>(false);
+    const [lastLength, setLastLength] = useState<number>(0); // Ajout d'un état pour stocker la longueur précédente
+
+    useEffect(() => {
+            setTireInfo(formatVehicleTire(vehicleTire));
+    }, [vehicleTire ]);
+
+    useEffect(() => {
+
+        // Cette expression régulière supprimera tous les caractères qui ne sont pas des chiffres ou des lettres alphabétiques, à l'exception de "R" et "r".
+        // On ne peut saisir que 10 caractères maximum (ex : 245551791V)
+        let value = rawValue.toUpperCase().replace(/[^0-9A-QS-Za-qs-z]/g, '').slice(0, 10);
+
+        console.log(value);
+
+        // On valide la saisie (le champ n'est pas obligatoire)
+        let isValid = value.length == 0  || (value.length > 0 && regex.test(value));
+        setError(!regex.test(value));
+
+        console.log(isValid);
+
+        // Vérifier si l'utilisateur est en train de supprimer un caractère
+        const isDeleting = value.length < lastLength;
+        console.log(`Deleting : ${isDeleting}`);
+        
+        // Ajout du " / "
+        if (value.length >= 3 && !(rawValue.length == 5 && isDeleting)) {
+            console.log('Ajout : /')
+            value = `${value.substring(0, 3)} / ${value.substring(3)}`;
+        }
+
+        // Ajout du " R"
+        if (value.length >= 8 && !(rawValue.length == 9 && isDeleting)) {
+            console.log('Ajout : R')
+            value = `${value.substring(0, 8)} R${value.substring(8)}`;
+        }
+
+
+        // Ajout d'un espace après la saisie du diamètre des pneus
+        if (value.length >= 12 && !(rawValue.length <= 12 && isDeleting)) {
+            console.log('Ajout : " "')
+            value = `${value.substring(0, 12)} ${value.substring(12)}`;
+        }
+
+        setTireInfo(value);
+        console.log(value.length);
+
+        if (value.length >= 16 && !(rawValue.length == 17 && isDeleting)) {
+
+            const parts = value.split(" ");
+
+            if (parts.length === 5) {
+                let [width, separator, height, diameter, speedIndex] = parts;
+                const vehicleTire = new VehicleTire(width, height, diameter, speedIndex);
+                onChangeVehicleTire(vehicleTire, isValid);
+            }
+        } else {
+            onChangeVehicleTire(vehicleTire, isValid);
+        }
+
+        setLastLength(value.length); // Mettre à jour la longueur précédente
+
+    }, [rawValue]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        setRawValue(e.target.value);
+      };
+    
+    return (
+        <TextField
+            label="Taille des pneumatiques"
+            variant="outlined"
+            value={tireInfo}
+            onChange={handleChange}
+            fullWidth
+            placeholder='XXX XX RXX XXX'
+            sx={{ 
+                width: '100%', 
+                '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+              }}
+            error={error && tireInfo.length > 0}              
+            helperText={error && tireInfo.length > 0 ? "Saisie invalide" : ''}            
+        />
+    );
+}
+
+export default MovaVehicleTireField;

package/src/helpers/Tools.ts

@@ -1,5 +1,37 @@
+import VehicleTire from "../models/VehicleTire";
 import { MovaFormField } from "./Types";
 
+export function formatVehicleTire(vehicleTire: VehicleTire){
+  if(vehicleTire){
+    let concatened = `${vehicleTire.width}${vehicleTire.height}${vehicleTire.diameter}${vehicleTire.speedIndex}`;
+    return formatVehicleTireStr(concatened);
+  }
+  return '';
+}
+
+export function formatVehicleTireStr(input: string){
+
+  let formatted = input.toUpperCase().replace(/[^0-9A-QS-Za-qs-z]/g, '').slice(0, 10);
+
+  if (formatted.length >= 3) {
+    formatted = `${formatted.substring(0, 3)} / ${formatted.substring(3)}`;
+  }
+
+  const indexOfR = formatted.indexOf(" R");
+
+  if (formatted.length >= 8 && indexOfR === -1) {
+    formatted = `${formatted.substring(0, 8)} R${formatted.substring(8)}`;
+
+  if (formatted.length >= 12 && indexOfR === -1)
+    formatted = `${formatted.substring(0, 12)} ${formatted.substring(12)}`;
+
+  } else if (indexOfR !== -1 && formatted.length > indexOfR + 2) {
+    formatted = `${formatted.substring(0, indexOfR + 2)} ${formatted.substring(indexOfR + 2)}`;
+  }
+
+  return formatted;
+};
+
 /**
  * Valide un champ de formulaire en utilisant une fonction de validation personnalisée.
  *

package/src/models/VehicleTire.ts

@@ -1,22 +1,21 @@
 export default class VehicleTire {
 
-    tireWidth: string;
-    tireHeight: string;
-    tireDiameter: string;
-    tireSpeedIndex: string;
+    width: string;
+    height: string;
+    diameter: string;
+    speedIndex: string;
 
     constructor(
-      tireWidth: string,
-      tireHeight: string,
-      tireDiameter: string,
-      tireSpeedIndex: string
+      width: string,
+      height: string,
+      diameter: string,
+      speedIndex: string
     ) {
 
-        this.tireWidth = tireWidth;
-        this.tireHeight = tireHeight;
-        this.tireDiameter = tireDiameter;
-        this.tireSpeedIndex = tireSpeedIndex;
+        this.width = width;
+        this.height = height;
+        this.diameter = diameter;
+        this.speedIndex = speedIndex;
     }
-
     
 }