@movalib/movalib-commons 1.0.48 → 1.0.49

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as QRCode } from './src/QRCode';
 export { default as VehiclePlateField } from './src/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';

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.Gender = exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = exports.MovaAppType = exports.RoleType = exports.validateEmail = exports.validateText = exports.validatePhoneNumber = exports.validateField = exports.VehicleTire = exports.Event = exports.Schedule = exports.Garage = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.GenderSelector = exports.ConfirmationDialog = exports.MovaVehicleTireField = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = exports.VehiclePlateField = void 0;
+exports.Gender = exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = exports.MovaAppType = exports.RoleType = exports.validateEmail = exports.validateText = exports.validatePhoneNumber = exports.validateField = exports.VehicleTire = exports.Event = exports.Schedule = exports.Garage = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.GenderSelector = exports.ConfirmationDialog = exports.MovaVehicleTireField = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = exports.VehiclePlateField = exports.QRCode = void 0;
 // Export des composants
+var QRCode_1 = require("./src/QRCode");
+Object.defineProperty(exports, "QRCode", { enumerable: true, get: function () { return __importDefault(QRCode_1).default; } });
 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");

package/dist/src/GenderSelector.js

@@ -15,6 +15,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var GenderSelector = function (_a) {
     var handleSelectChange = _a.handleSelectChange, form = _a.form, required = _a.required, sx = _a.sx;
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx), error: !form.gender.isValid }, { 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", value: form.gender.value, onChange: function (e) { return handleSelectChange(e); } }, { 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, { children: form.gender.error })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx), error: !form.gender.isValid }, { 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: form.gender.value, onChange: function (e) { return handleSelectChange(e); } }, { 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, { children: form.gender.error })] })));
 };
 exports.default = GenderSelector;

package/dist/src/MovaLogin.js

@@ -62,6 +62,7 @@ var MovaCopyright_1 = __importDefault(require("./MovaCopyright"));
 var Enums_1 = require("./helpers/Enums");
 var Validator_1 = require("./helpers/Validator");
 var Tools_1 = require("./helpers/Tools");
+var react_router_dom_1 = require("react-router-dom");
 // Permet de centrer le contenu de l'application
 var styles = {
     display: 'flex',
@@ -82,6 +83,7 @@ var MovaLogin = function (_a) {
     var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity;
     var _b = (0, react_1.useState)(initialFormState), form = _b[0], setForm = _b[1];
     var _c = (0, react_1.useState)(""), message = _c[0], setMessage = _c[1];
+    var history = (0, react_router_dom_1.useHistory)();
     var handleInputChange = function (e) {
         var _a;
         var fieldName = e.target.name;
@@ -121,6 +123,13 @@ var MovaLogin = function (_a) {
             movaAppType === Enums_1.MovaAppType.USER ? logo_large_png_1.default :
                 movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_png_1.default : logo_large_png_1.default;
     };
+    var handleOnClickSignUp = function (e) {
+        e.preventDefault();
+        if (history) {
+            // On redirige l'utilisateur vers la page par défaut (accueil)
+            history.push('/signup');
+        }
+    };
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: styles }, { children: [(0, jsx_runtime_1.jsx)("img", { src: leaf_green_large_png_1.default, style: { position: 'fixed',
                     float: 'left',
                     width: '250px',
@@ -133,7 +142,7 @@ var MovaLogin = function (_a) {
                             display: 'flex',
                             flexDirection: 'column',
                             alignItems: 'center',
-                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '80%' } }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", autoFocus: true, onChange: function (e) { return handleInputChange(e); }, value: form.email.value, error: !form.email.isValid, helperText: form.email.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: "password", id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: form.password.value, error: !form.password.isValid, helperText: form.password.error }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: "remember", color: "primary" }), label: "Se souvenir de moi" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Se connecter" }) })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/forgot-password", variant: "body2", color: "text.secondary" }, { children: "Mot de passe oubli\u00E9 ?" })) })), movaAppType === Enums_1.MovaAppType.USER && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/signup", variant: "body2", color: "text.secondary" }, { children: "Créer mon compte" })) }))] }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
+                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '80%' } }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", autoFocus: true, onChange: function (e) { return handleInputChange(e); }, value: form.email.value, error: !form.email.isValid, helperText: form.email.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: "password", id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: form.password.value, error: !form.password.isValid, helperText: form.password.error }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: "remember", color: "primary" }), label: "Se souvenir de moi" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Se connecter" }) })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/forgot-password", variant: "body2", color: "text.secondary" }, { children: "Mot de passe oubli\u00E9 ?" })) })), movaAppType === Enums_1.MovaAppType.USER && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickSignUp(e); } }, { children: "Créer mon compte" })) }))] }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
                     float: 'right',
                     width: '250px',
                     height: '400px',

package/dist/src/QRCode.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+interface QRCodeProps {
+    data?: string;
+    showDownload?: boolean;
+}
+declare const QRCode: FC<QRCodeProps>;
+export default QRCode;

package/dist/src/QRCode.js

@@ -0,0 +1,122 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 leaf_yellow_small_png_1 = __importDefault(require("../assets/images/leaf_yellow_small.png"));
+var qr_code_styling_1 = __importDefault(require("qr-code-styling"));
+var material_1 = require("@mui/material");
+var styles = {
+    inputWrapper: {
+        margin: "20px 0",
+        display: "flex",
+        alignItems: 'center',
+        justifyContent: "center",
+        width: '100%'
+    },
+    inputBox: {
+        flexGrow: 1,
+        marginRight: 20
+    }
+};
+var QRCode = function (_a) {
+    var data = _a.data, _b = _a.showDownload, showDownload = _b === void 0 ? false : _b;
+    var theme = (0, material_1.useTheme)();
+    // Le contenu du QR Code est transmis en props, sinon redirection vers ls site vitrine
+    var defaultData = 'https://movalib.com';
+    var _c = (0, react_1.useState)({
+        width: 300,
+        height: 300,
+        type: 'svg',
+        data: data !== null && data !== void 0 ? data : defaultData,
+        image: leaf_yellow_small_png_1.default,
+        margin: 10,
+        qrOptions: {
+            typeNumber: 0,
+            mode: 'Byte',
+            errorCorrectionLevel: 'Q'
+        },
+        imageOptions: {
+            hideBackgroundDots: true,
+            imageSize: 0.4,
+            margin: 15,
+            crossOrigin: 'anonymous',
+        },
+        dotsOptions: {
+            color: (0, material_1.darken)(theme.palette.primary.main, 0.3),
+            // gradient: {
+            //   type: 'linear', // 'radial'
+            //   rotation: 0,
+            //   colorStops: [{ offset: 0, color: theme.palette.primary.main }, { offset: 1, color: theme.palette.secondary.main }]
+            // },
+            type: 'square' // "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded";
+        },
+        backgroundOptions: {
+            color: 'white',
+            // gradient: {
+            //   type: 'linear', // 'radial'
+            //   rotation: 0,
+            //   colorStops: [{ offset: 0, color: '#ededff' }, { offset: 1, color: '#e6e7ff' }]
+            // },
+        },
+        cornersSquareOptions: {
+            color: (0, material_1.darken)(theme.palette.secondary.main, 0.1),
+            type: 'square',
+            // gradient: {
+            //   type: 'linear', // 'radial'
+            //   rotation: 180,
+            //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
+            // },
+        },
+        cornersDotOptions: {
+            color: (0, material_1.darken)(theme.palette.secondary.main, 0.1),
+            type: 'square',
+            // gradient: {
+            //   type: 'linear', // 'radial'
+            //   rotation: 180,
+            //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
+            // },
+        }
+    }), options = _c[0], setOptions = _c[1];
+    // Format de téléchargement par défaut
+    var _d = (0, react_1.useState)("png"), fileExt = _d[0], setFileExt = _d[1];
+    var qrCode = (0, react_1.useState)(new qr_code_styling_1.default(options))[0];
+    var ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (ref.current) {
+            qrCode.append(ref.current);
+        }
+    }, [qrCode, ref]);
+    (0, react_1.useEffect)(function () {
+        if (!qrCode)
+            return;
+        qrCode.update(options);
+    }, [qrCode, options]);
+    /*   const onExtensionChange = (event: ChangeEvent<HTMLSelectElement>) => {
+        setFileExt(event.target.value as Extension);
+      }; */
+    var onDownloadClick = function () {
+        if (!qrCode)
+            return;
+        qrCode.download({
+            extension: fileExt,
+            name: "movalib-qr-code"
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, style: styles.inputWrapper }), showDownload &&
+                (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ variant: 'outlined', onClick: onDownloadClick, sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2) } }, { children: "T\u00E9l\u00E9charger" })) }))] }));
+};
+exports.default = QRCode;

package/index.ts

@@ -1,6 +1,7 @@
 // src/index.ts
 
 // Export des composants
+export { default as QRCode } from './src/QRCode';
 export { default as VehiclePlateField } from './src/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,8 +18,10 @@
   "dependencies": {
     "@types/node": "^16.18.53",
     "@types/react": "^18.2.22",
+    "@types/react-router-dom": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1"
   },
   "eslintConfig": {
@@ -37,6 +39,7 @@
     "@types/react-dom": "^18.2.7",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.3",
+    "qr-code-styling": "^1.4.4",
     "ts-loader": "^9.4.4",
     "typescript": "^4.9.5",
     "webpack-cli": "^5.1.4"

package/src/GenderSelector.tsx

@@ -19,6 +19,7 @@ const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, for
         labelId="gender-label"
         id="gender"
         name="gender"
+        label="Sexe"
         value={form.gender.value}
         onChange={e => handleSelectChange(e)}
       >

package/src/MovaLogin.tsx

@@ -10,6 +10,7 @@ import { MovaLoginForm, MovaFormField } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
 import { validateEmail } from "./helpers/Validator";
 import { validateField } from "./helpers/Tools";
+import { useHistory } from "react-router-dom";
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -49,6 +50,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
 
     const [form, setForm] = useState<MovaLoginForm>(initialFormState);
     const [message, setMessage] = useState<string>("");
+    const history = useHistory();
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
         const fieldName: string = e.target.name;
@@ -98,6 +100,14 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
     }
 
+    const handleOnClickSignUp = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        e.preventDefault();
+        if(history){
+            // On redirige l'utilisateur vers la page par défaut (accueil)
+            history.push('/signup');
+        }
+    }
+
 
     return (
         <div style={styles}>
@@ -175,7 +185,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                             </Link>
                         </Grid>
                         {movaAppType === MovaAppType.USER && <Grid item>
-                            <Link href="/signup" variant="body2" color="text.secondary">
+                            <Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickSignUp(e)}>
                             {"Créer mon compte"}
                             </Link>
                         </Grid>}

package/src/QRCode.tsx

@@ -0,0 +1,146 @@
+import { useState, type FC, useRef, useEffect, ChangeEvent } from 'react';
+import QRCodeImage from "../assets/images/leaf_yellow_small.png";
+import QRCodeStyling, {
+  DrawType,
+  TypeNumber,
+  Mode,
+  ErrorCorrectionLevel,
+  DotType,
+  CornerSquareType,
+  CornerDotType,
+  Extension,
+  Options
+} from "qr-code-styling";
+import { Box, Button, darken, useTheme } from '@mui/material';
+
+
+interface QRCodeProps {
+  data?:string,
+  showDownload?:boolean
+}
+
+
+const styles = {
+    inputWrapper: {
+      margin: "20px 0",
+      display: "flex",
+      alignItems: 'center',
+      justifyContent: "center",
+      width: '100%'
+    },
+    inputBox: {
+      flexGrow: 1,
+      marginRight: 20
+    }
+  };
+  
+const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
+
+  const theme = useTheme();
+  
+  // Le contenu du QR Code est transmis en props, sinon redirection vers ls site vitrine
+  const defaultData:string = 'https://movalib.com';
+
+  const [options, setOptions] = useState<Options>({
+    width: 300,
+    height: 300,
+    type: 'svg' as DrawType,
+    data: data ?? defaultData,
+    image: QRCodeImage,
+    margin: 10,
+    qrOptions: {
+      typeNumber: 0 as TypeNumber,
+      mode: 'Byte' as Mode,
+      errorCorrectionLevel: 'Q' as ErrorCorrectionLevel
+    },
+    imageOptions: {
+      hideBackgroundDots: true,
+      imageSize: 0.4,
+      margin: 15,
+      crossOrigin: 'anonymous',
+    },
+    dotsOptions: {
+      color: darken(theme.palette.primary.main, 0.3),
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 0,
+      //   colorStops: [{ offset: 0, color: theme.palette.primary.main }, { offset: 1, color: theme.palette.secondary.main }]
+      // },
+      type: 'square' as DotType  // "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded";
+    },
+    backgroundOptions: {
+      color: 'white',
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 0,
+      //   colorStops: [{ offset: 0, color: '#ededff' }, { offset: 1, color: '#e6e7ff' }]
+      // },
+    },
+    cornersSquareOptions: {
+      color: darken(theme.palette.secondary.main, 0.1),
+      type: 'square' as CornerSquareType,
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 180,
+      //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
+      // },
+    },
+    cornersDotOptions: {
+      color: darken(theme.palette.secondary.main, 0.1),
+      type: 'square' as CornerDotType,
+      // gradient: {
+      //   type: 'linear', // 'radial'
+      //   rotation: 180,
+      //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
+      // },
+    }
+  });
+
+  // Format de téléchargement par défaut
+  const [fileExt, setFileExt] = useState<Extension>("png");
+  const [qrCode] = useState<QRCodeStyling>(new QRCodeStyling(options));
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      qrCode.append(ref.current);
+    }
+  }, [qrCode, ref]);
+
+  useEffect(() => {
+    if (!qrCode) return;
+    qrCode.update(options);
+  }, [qrCode, options]);
+
+
+/*   const onExtensionChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    setFileExt(event.target.value as Extension);
+  }; */
+
+  const onDownloadClick = () => {
+    if (!qrCode) return;
+    qrCode.download({
+      extension: fileExt,
+      name:"movalib-qr-code"
+    });
+  };
+
+  return (
+    <Box>
+      <div ref={ref} style={styles.inputWrapper} />
+{/*         <select onChange={onExtensionChange} value={fileExt}>
+          <option value="svg">SVG</option>
+          <option value="png">PNG</option>
+          <option value="jpeg">JPEG</option>
+          <option value="webp">WEBP</option>
+        </select> */}
+        {showDownload && 
+          <Box sx={{ display:'flex', justifyContent:'center'}}>
+            <Button variant='outlined' onClick={onDownloadClick} sx={{ color: darken(theme.palette.primary.main, 0.2)}}>Télécharger</Button>
+          </Box>
+        }
+    </Box>
+  );
+}
+
+export default QRCode;