@movalib/movalib-commons 1.0.0 → 1.0.2

package/PV_README.md

@@ -0,0 +1,15 @@
+# 1. build this movalib commons lib
+
+### `npm build`
+
+# 2. publish this movalib commons lib (public)
+
+### `npm login`
+### `npm publish --access=public`
+
+# 3. publish this movalib commons lib (private)
+
+Make shure that "private=true" in your package.json
+
+### `npm login`
+### `npm publish --access=restricted`

package/dist/MovaSnackbar.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'react';
+interface MovaSnackbarProps {
+    snackbar: {
+        open: boolean;
+        message: string;
+        severity: 'success' | 'info' | 'warning' | 'error' | undefined;
+    };
+    setSnackbar: (snackbar: {
+        open: boolean;
+        message: string;
+        severity: 'success' | 'info' | 'warning' | 'error' | undefined;
+    }) => void;
+}
+declare const MovaSnackbar: FunctionComponent<MovaSnackbarProps>;
+export default MovaSnackbar;

package/dist/MovaSnackbar.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const MovaSnackbar = ({ snackbar, setSnackbar }) => {
+    /**
+     * Gestion de la fermeture de la snackbar. Si la raison de cette fermeture est
+     * un clic en dehors de la zone de contenu on intercepte et annule la fermeture 'clickaway'.
+     * @param event Evénnement de fermeture
+     * @param reason Origine de l'événnement de fermeture
+     * @returns
+     */
+    const handleClose = (event, reason) => {
+        if (reason === 'clickaway')
+            return;
+        setSnackbar({ open: false, message: '', severity: undefined });
+    };
+    const handleCloseAlert = (event) => {
+        setSnackbar({ open: false, message: '', severity: undefined });
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Snackbar, Object.assign({ open: snackbar.open, autoHideDuration: 5000, onClose: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: snackbar.severity, variant: "filled", sx: { width: '100%' }, action: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", "aria-label": "close", color: "inherit", onClick: handleCloseAlert }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, { fontSize: "small" }) })) }) }, { children: snackbar.message })) })));
+};
+exports.default = MovaSnackbar;

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default as TestButton } from './TestButton';
+export { default as MovaSnackBar } from './MovaSnackbar';

package/dist/index.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestButton = void 0;
+exports.MovaSnackBar = exports.TestButton = void 0;
 // src/index.ts
 var TestButton_1 = require("./TestButton");
 Object.defineProperty(exports, "TestButton", { enumerable: true, get: function () { return __importDefault(TestButton_1).default; } });
+var MovaSnackbar_1 = require("./MovaSnackbar");
+Object.defineProperty(exports, "MovaSnackBar", { enumerable: true, get: function () { return __importDefault(MovaSnackbar_1).default; } });

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
   "scripts": {
     "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf dist node_modules package-lock.json"
   },
   "keywords": [],
   "author": "",
@@ -17,6 +18,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@mui/material": "^5.13.5",
+    "@mui/icons-material": "^5.11.16",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "typescript": "^4.9.5"

package/src/MovaSnackbar.tsx

@@ -0,0 +1,65 @@
+// MovaSnackbar.tsx
+import React, { FunctionComponent } from 'react';
+import { Snackbar, Alert, IconButton, SnackbarCloseReason } from '@mui/material';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+
+interface MovaSnackbarProps {
+  snackbar: {
+    open: boolean;
+    message: string;
+    severity: 'success' | 'info' | 'warning' | 'error' | undefined;
+  };
+  setSnackbar: (snackbar: {
+    open: boolean;
+    message: string;
+    severity: 'success' | 'info' | 'warning' | 'error' | undefined;
+  }) => void;
+}
+
+const MovaSnackbar: FunctionComponent<MovaSnackbarProps> = ({ snackbar, setSnackbar }) => {
+
+  /**
+   * Gestion de la fermeture de la snackbar. Si la raison de cette fermeture est
+   * un clic en dehors de la zone de contenu on intercepte et annule la fermeture 'clickaway'.
+   * @param event Evénnement de fermeture
+   * @param reason Origine de l'événnement de fermeture
+   * @returns 
+   */
+  const handleClose = (event: globalThis.Event | React.SyntheticEvent<any, globalThis.Event>, 
+    reason: SnackbarCloseReason) => {
+    
+      if (reason === 'clickaway') return;
+
+      setSnackbar({ open: false, message: '', severity: undefined });
+  };
+
+  const handleCloseAlert = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setSnackbar({ open: false, message: '', severity: undefined });
+  };
+
+  return (
+    <Snackbar open={snackbar.open} autoHideDuration={5000} onClose={handleClose}>
+      <Alert severity={snackbar.severity} variant="filled" sx={{ width: '100%' }}
+        action={
+            <>
+              {/* TODO : possiblité d'annuler l'action qui vient d'avoir lieu */}
+            {/*   <Button color="inherit" size="small" onClick={handleCancelAction}>
+                Annuler
+              </Button> */}
+              <IconButton
+                size="small"
+                aria-label="close"
+                color="inherit"
+                onClick={handleCloseAlert}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </>
+        }>
+        {snackbar.message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default MovaSnackbar;

package/src/index.ts

@@ -1,2 +1,3 @@
 // src/index.ts
 export { default as TestButton } from './TestButton';
+export { default as MovaSnackBar } from './MovaSnackbar';