@movalib/movalib-commons 1.0.52 → 1.0.54

package/dist/index.d.ts

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

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 = exports.QRCode = 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 = exports.MovaDialog = void 0;
 // Export des composants
+var MovaDialog_1 = require("./src/MovaDialog");
+Object.defineProperty(exports, "MovaDialog", { enumerable: true, get: function () { return __importDefault(MovaDialog_1).default; } });
 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");

package/dist/src/MovaDialog.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, FC } from 'react';
+import React from 'react';
+interface MovaDialogProps {
+    children: React.ReactNode;
+    fullScreen: boolean;
+    open: boolean;
+    onClose: () => void;
+    actions?: React.ReactNode;
+    message?: string;
+    transition?: "fade";
+    leafImageColor?: "green" | "yellow" | "pink";
+    title?: string;
+    titleStyle?: CSSProperties;
+}
+declare const MovaDialog: FC<MovaDialogProps>;
+export default MovaDialog;

package/dist/src/MovaDialog.js

@@ -0,0 +1,59 @@
+"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 material_1 = require("@mui/material");
+var ArrowBackIosNewRounded_1 = __importDefault(require("@mui/icons-material/ArrowBackIosNewRounded"));
+var react_1 = __importDefault(require("react"));
+var leaf_green_large_png_1 = __importDefault(require("../assets/images/leaf_green_large.png"));
+var leaf_yellow_large_png_1 = __importDefault(require("../assets/images/leaf_yellow_large.png"));
+var leaf_pink_large_png_1 = __importDefault(require("../assets/images/leaf_pink_large.png"));
+var MovaDialog = function (_a) {
+    var fullScreen = _a.fullScreen, open = _a.open, onClose = _a.onClose, children = _a.children, title = _a.title, titleStyle = _a.titleStyle, message = _a.message, leafImageColor = _a.leafImageColor, transition = _a.transition, actions = _a.actions;
+    var getTransition = function () {
+        switch (transition) {
+            case "fade":
+                return react_1.default.forwardRef(function Transition(props, ref) {
+                    return (0, jsx_runtime_1.jsx)(material_1.Fade, __assign({ ref: ref, timeout: 200 }, props));
+                });
+        }
+    };
+    var getLeafImage = function () {
+        switch (leafImageColor) {
+            case "green": return leaf_green_large_png_1.default;
+            case "yellow": return leaf_yellow_large_png_1.default;
+            case "pink": return leaf_pink_large_png_1.default;
+        }
+    };
+    var LeafImageComponent = getLeafImage();
+    var purgeLocalState = function () {
+    };
+    var handleOnClose = function () {
+        purgeLocalState();
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, __assign({ fullScreen: fullScreen, fullWidth: true, TransitionComponent: getTransition(), open: open, "aria-labelledby": "garage-dialog-title", "aria-describedby": "garage-dialog-description", sx: { textAlign: 'center' } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getLeafImage(), style: {
+                    position: 'fixed',
+                    float: 'left',
+                    width: '150px',
+                    height: '350px',
+                    top: '-20%',
+                    zIndex: 0,
+                    left: 0,
+                    opacity: '0.2'
+                }, alt: 'Feuille Rose Movalib' }), (0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "garage-dialog-title", sx: { textAlign: 'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 } }, { children: (0, jsx_runtime_1.jsx)(material_1.AppBar, __assign({ sx: { position: 'relative' }, color: "transparent", elevation: 0 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "start", color: "inherit", onClick: handleOnClose, "aria-label": "close" }, { children: (0, jsx_runtime_1.jsx)(ArrowBackIosNewRounded_1.default, {}) })), title && (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { textAlign: 'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }, style: titleStyle }, { children: title }))] }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, __assign({ sx: { zIndex: 20 } }, { children: [children, message && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: "error", sx: { mb: 2 } }, { children: message }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, __assign({ sx: { justifyContent: 'center' } }, { children: actions }))] })));
+};
+exports.default = MovaDialog;

package/dist/src/MovaLogin.js

@@ -148,7 +148,7 @@ var MovaLogin = function (_a) {
      */
     var dialogForgotPassword = function () {
         var defaultMessage = "Êtes-vous sûr de vouloir continuer ?";
-        return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, __assign({ open: openForgotPassword, onClose: function () { return setOpenForgotPassword(false); }, "aria-labelledby": "forgot-password-dialog-title", "aria-describedby": "forgot-password-dialog-description" }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "forgot-password-title" }, { children: "R\u00E9cup\u00E9ration du mot de passe" })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContentText, __assign({ id: "forgot-password-dialog-description", sx: { mb: 2 } }, { children: "Saisissez votre email pour proc\u00E9der \u00E0 la r\u00E9initialisation de votre mot de passe." })), (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, disabled: !(form.email.value && (0, Validator_1.validateEmail)(form.email.value)) })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function (e) { return handleSubmitForgotPassword(e); }, color: "inherit", autoFocus: true, sx: { ml: 1 } }, { children: "Envoyer ma demande" })) })] })));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, __assign({ open: openForgotPassword, onClose: function () { return setOpenForgotPassword(false); }, "aria-labelledby": "forgot-password-dialog-title", "aria-describedby": "forgot-password-dialog-description" }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "forgot-password-title" }, { children: "R\u00E9cup\u00E9ration du mot de passe" })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContentText, __assign({ id: "forgot-password-dialog-description", sx: { mb: 2 } }, { children: "Saisissez votre email pour proc\u00E9der \u00E0 la r\u00E9initialisation de votre mot de passe." })), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", autoFocus: true, required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", 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.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function (e) { return handleSubmitForgotPassword(e); }, color: "primary", disabled: !(form.email.value && (0, Validator_1.validateEmail)(form.email.value)), sx: { ml: 1 } }, { children: "Envoyer ma demande" })) })] })));
     };
     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',

package/index.ts

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

package/package.json

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

package/src/MovaDialog.tsx

@@ -0,0 +1,106 @@
+import { Alert, AppBar, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Toolbar, Typography } from '@mui/material';
+import type { CSSProperties, FC } from 'react';
+import BackIcon from '@mui/icons-material/ArrowBackIosNewRounded';
+import React from 'react';
+import { TransitionProps } from '@mui/material/transitions';
+import GreenLeafImage from "../assets/images/leaf_green_large.png";
+import YellowLeafImage from "../assets/images/leaf_yellow_large.png";
+import PinkLeafImage from "../assets/images/leaf_pink_large.png";
+
+interface MovaDialogProps {
+    children: React.ReactNode,
+    fullScreen: boolean,
+    open: boolean,
+    onClose: () => void,
+    actions?: React.ReactNode,
+    message?:string,
+    transition?: "fade",
+    leafImageColor?: "green" | "yellow" |  "pink",
+    title?: string,
+    titleStyle?: CSSProperties;
+}
+
+const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, children, title, titleStyle, message, leafImageColor, transition, actions}) => {
+
+    const getTransition = () => {
+        switch(transition){
+            case "fade": 
+            return React.forwardRef(function Transition(
+                props: TransitionProps & {
+                  children: React.ReactElement;
+                },
+                ref: React.Ref<unknown>,
+              ) {
+                return <Fade ref={ref} timeout={200} {...props} />;
+              });
+        }
+    }
+
+    const getLeafImage = () => {
+        switch(leafImageColor){
+            case "green" : return GreenLeafImage;
+            case "yellow" : return YellowLeafImage;
+            case "pink" : return PinkLeafImage;
+        }
+    }
+
+    const LeafImageComponent = getLeafImage();
+
+    const purgeLocalState = () => {
+
+    }
+
+    const handleOnClose = () => {
+        purgeLocalState();
+        onClose();
+    }
+    
+    return (
+        <Dialog
+            fullScreen={fullScreen}
+            fullWidth
+            TransitionComponent={getTransition()}
+            open={open}
+            aria-labelledby="garage-dialog-title"
+            aria-describedby="garage-dialog-description"
+            sx={{ textAlign:'center'}}
+        >
+            <img src={getLeafImage()} style={{
+                position: 'fixed', 
+                float:'left',
+                width: '150px',
+                height: '350px',
+                top: '-20%',
+                zIndex: 0,
+                left: 0,
+                opacity: '0.2'}} alt='Feuille Rose Movalib'></img>   
+
+            <DialogTitle id="garage-dialog-title" sx={{ textAlign:'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 }} >
+                <AppBar sx={{ position: 'relative' }} color="transparent" elevation={0}>
+                    <Toolbar>
+                        <IconButton
+                            edge="start"
+                            color="inherit"
+                            onClick={handleOnClose}
+                            aria-label="close"
+                        >
+                            <BackIcon />
+                        </IconButton>
+                        {title && <Typography sx={{ textAlign:'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }} style={titleStyle}>
+                            {title}
+                        </Typography>}
+                    </Toolbar>
+                </AppBar>
+            </DialogTitle>
+            <DialogContent sx={{ zIndex: 20}}>
+                {children}
+                {message && <Alert severity="error" sx={{ mb: 2 }}>{message}</Alert>}
+            </DialogContent>
+            <DialogActions sx={{ justifyContent:'center'}}>
+                {actions}
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export default MovaDialog;

package/src/MovaLogin.tsx

@@ -147,23 +147,26 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
               </DialogContentText>
               <TextField
                     margin="normal"
+                    autoFocus
                     required
                     fullWidth
                     id="email"
                     label="Adresse email"
                     name="email"
                     autoComplete="email"
-                    autoFocus
                     onChange={e => handleInputChange(e)}
                     value={form.email.value}
                     error={!form.email.isValid}
                     helperText={form.email.error}
-                    disabled={!(form.email.value && validateEmail(form.email.value))}
                 />
             </DialogContent>
             <DialogActions>
-              <Button onClick={(e) => handleSubmitForgotPassword(e)} color="inherit" autoFocus sx={{ ml: 1}}>
-                Envoyer ma demande
+              <Button onClick={(e) => handleSubmitForgotPassword(e)} 
+                color="primary"
+                disabled={!(form.email.value && validateEmail(form.email.value))}
+                sx={{ ml: 1}}>
+
+                    Envoyer ma demande
               </Button>
             </DialogActions>
           </Dialog>