@movalib/movalib-commons 1.0.55 → 1.0.57

package/dist/index.d.ts

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

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

package/dist/src/Loader.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from "react";
+interface LoaderProps {
+    loading: boolean;
+    padding?: number;
+}
+declare const Loader: FunctionComponent<LoaderProps>;
+export default Loader;

package/dist/src/Loader.js

@@ -0,0 +1,27 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Loader = function (_a) {
+    var loading = _a.loading, _b = _a.padding, padding = _b === void 0 ? 3 : _b;
+    var theme = (0, material_1.useTheme)();
+    var containerStyle = {
+        width: '100%',
+        textAlign: 'center',
+        paddingTop: theme.spacing(padding),
+        paddingBottom: theme.spacing(padding)
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading && (0, jsx_runtime_1.jsx)(material_1.Backdrop, __assign({ sx: { color: '#fff', zIndex: function (theme) { return theme.zIndex.drawer + 1; } }, open: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit" }) })) }));
+};
+exports.default = Loader;

package/dist/src/MovaDialog.d.ts

@@ -5,6 +5,7 @@ interface MovaDialogProps {
     fullScreen: boolean;
     open: boolean;
     onClose: () => void;
+    closable?: boolean;
     actions?: React.ReactNode;
     message?: string;
     transition?: "fade";

package/dist/src/MovaDialog.js

@@ -22,7 +22,7 @@ var leaf_green_large_png_1 = __importDefault(require("./assets/images/leaf_green
 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 fullScreen = _a.fullScreen, open = _a.open, onClose = _a.onClose, _b = _a.closable, closable = _b === void 0 ? false : _b, 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":
@@ -41,11 +41,17 @@ var MovaDialog = function (_a) {
     var LeafImageComponent = getLeafImage();
     var purgeLocalState = function () {
     };
-    var handleOnClose = function () {
+    var handleOnBack = 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: {
+    var handleOnClose = function () {
+        if (closable) {
+            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", onClose: handleOnClose, sx: { textAlign: 'center' } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getLeafImage(), style: {
                     position: 'fixed',
                     float: 'left',
                     width: '150px',
@@ -54,6 +60,6 @@ var MovaDialog = function (_a) {
                     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 }))] })));
+                }, 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: handleOnBack, "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/index.ts

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

package/package.json

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

package/src/Loader.tsx

@@ -0,0 +1,38 @@
+import { Backdrop, CircularProgress, useTheme } from "@mui/material";
+import { CSSProperties, FunctionComponent } from "react";
+
+interface LoaderProps {
+    loading:boolean,
+    padding?: number
+}
+
+const Loader: FunctionComponent<LoaderProps> = ({ loading, padding = 3 }) => {
+
+    const theme = useTheme();
+
+    const containerStyle: CSSProperties = {
+        width:'100%',
+        textAlign: 'center',
+        paddingTop: theme.spacing(padding),
+        paddingBottom: theme.spacing(padding)
+    }
+
+    return (
+        <>
+            {loading && <Backdrop
+                sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={loading}
+                >
+                <CircularProgress color="inherit" />
+            </Backdrop>
+            }   
+{/*             {loading &&
+                <div style={containerStyle}>
+                    <CircularProgress />
+                </div>
+            } */}
+        </>
+    );
+}
+
+export default Loader;

package/src/MovaDialog.tsx

@@ -12,6 +12,7 @@ interface MovaDialogProps {
     fullScreen: boolean,
     open: boolean,
     onClose: () => void,
+    closable?: boolean,
     actions?: React.ReactNode,
     message?:string,
     transition?: "fade",
@@ -20,7 +21,7 @@ interface MovaDialogProps {
     titleStyle?: CSSProperties;
 }
 
-const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, children, title, titleStyle, message, leafImageColor, transition, actions}) => {
+const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable = false, children, title, titleStyle, message, leafImageColor, transition, actions}) => {
 
     const getTransition = () => {
         switch(transition){
@@ -50,10 +51,17 @@ const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, children, t
 
     }
 
-    const handleOnClose = () => {
+    const handleOnBack = () => {
         purgeLocalState();
         onClose();
     }
+
+    const handleOnClose = () => {
+        if(closable){
+            purgeLocalState();
+            onClose();
+        }
+    }
     
     return (
         <Dialog
@@ -63,6 +71,7 @@ const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, children, t
             open={open}
             aria-labelledby="garage-dialog-title"
             aria-describedby="garage-dialog-description"
+            onClose={handleOnClose}
             sx={{ textAlign:'center'}}
         >
             <img src={getLeafImage()} style={{
@@ -81,7 +90,7 @@ const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, children, t
                         <IconButton
                             edge="start"
                             color="inherit"
-                            onClick={handleOnClose}
+                            onClick={handleOnBack}
                             aria-label="close"
                         >
                             <BackIcon />