@pagopa/selfcare-common-frontend 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -4,8 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.9.0](https://github.com/pagopa/selfcare-common-frontend/compare/v1.8.0...v1.9.0)
+
+- Added LoadingOverlayComponent [`#58`](https://github.com/pagopa/selfcare-common-frontend/pull/58)
+
 #### [v1.8.0](https://github.com/pagopa/selfcare-common-frontend/compare/v1.7.0...v1.8.0)
 
+> 23 March 2022
+
 - dependencies updated [`#57`](https://github.com/pagopa/selfcare-common-frontend/pull/57)
 
 #### [v1.7.0](https://github.com/pagopa/selfcare-common-frontend/compare/v1.6.2...v1.7.0)

package/README.md

@@ -160,6 +160,19 @@ NavigationPath's fields:
 | description | string | Y | The text displayed |
 | onClick | () => void | N | If defined, it will represent the function executed when clicking on the element. Moreover it will be displayed in bold |
 
+## LoadingOverlayComponent
+A component which render an overlay loading
+
+| Prop | Type | Mandatory | Description |
+|------|------|-----------|-------------|
+| open | boolean | Y | if show the loading overlay or not |
+
+NavigationPath's fields:
+| field | Type | Mandatory | Description |
+|------|------|-----------|-------------|
+| description | string | Y | The text displayed |
+| onClick | () => void | N | If defined, it will represent the function executed when clicking on the element. Moreover it will be displayed in bold |
+
 # Utilities
 ## api-utils
 ### onRedirectToLogin: (store: EnhancedStore) => void

package/build.info

@@ -1,2 +1,2 @@
-20220323.2 - selfcare-common-frontend.deploy(24868)
-remotes/origin/SELC-222 b7dc6132c53080df6e0853828ad2a461cd207cd0
+20220324.1 - selfcare-common-frontend.deploy(25017)
+remotes/origin/SELC-222 bf102180bd761ee61eb1da46a98ce596f49d1b52

package/components/Loading/LoadingOverlay.js

@@ -2,26 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const system_1 = require("@mui/system");
-const react_md_spinner_1 = tslib_1.__importDefault(require("react-md-spinner"));
 const react_redux_1 = require("react-redux");
 const appStateSlice_1 = require("../../redux/slices/appStateSlice");
+const LoadingOverlayComponent_1 = tslib_1.__importDefault(require("../LoadingOverlayComponent"));
 /** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
 It allows to draw a loader when an async task to wait is running.
 
 To use this feature you have to put LoadingOverlay in your App as a child of a redux Provider component.
 In order to register the start of an async task you have to use the custom hook useLoading passing the id of the task to await, which will return a setter function used to start and end the loading behavior. */
 function LoadingOverlay() {
-    const theme = (0, material_1.useTheme)();
     const loading = (0, react_redux_1.useSelector)(appStateSlice_1.appStateSelectors.selectLoading);
-    return ((0, jsx_runtime_1.jsx)(material_1.Modal, { open: loading, sx: { outline: 0 }, children: (0, jsx_runtime_1.jsx)(system_1.Box, { sx: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                width: '100px',
-                outline: 0,
-            }, children: (0, jsx_runtime_1.jsx)(react_md_spinner_1.default, { singleColor: theme.palette.primary.main, role: "loadingSpinner" }) }) }));
+    return (0, jsx_runtime_1.jsx)(LoadingOverlayComponent_1.default, { open: loading });
 }
 exports.default = LoadingOverlay;
 //# sourceMappingURL=LoadingOverlay.js.map

package/components/Loading/LoadingOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.js","sourceRoot":"","sources":["../../../src/lib/components/Loading/LoadingOverlay.tsx"],"names":[],"mappings":";;;;AAAA,4CAAgD;AAChD,wCAAkC;AAClC,gFAAyC;AACzC,6CAA0C;AAC1C,oEAAqE;AAErE;;;;kNAIkN;AAClN,SAAwB,cAAc;IACpC,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAC;IACzB,MAAM,OAAO,GAAG,IAAA,yBAAW,EAAC,iCAAiB,CAAC,aAAa,CAAC,CAAC;IAE7D,OAAO,CACL,uBAAC,gBAAK,IAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YACtC,uBAAC,YAAG,IACF,EAAE,EAAE;gBACF,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,KAAK;gBACV,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,CAAC;aACX,YAED,uBAAC,0BAAS,IAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAC,gBAAgB,GAAG,GACxE,GACA,CACT,CAAC;AACJ,CAAC;AAnBD,iCAmBC"}
+{"version":3,"file":"LoadingOverlay.js","sourceRoot":"","sources":["../../../src/lib/components/Loading/LoadingOverlay.tsx"],"names":[],"mappings":";;;;AAAA,6CAA0C;AAC1C,oEAAqE;AACrE,iGAAiE;AAEjE;;;;kNAIkN;AAClN,SAAwB,cAAc;IACpC,MAAM,OAAO,GAAG,IAAA,yBAAW,EAAC,iCAAiB,CAAC,aAAa,CAAC,CAAC;IAE7D,OAAO,uBAAC,iCAAuB,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC;AACpD,CAAC;AAJD,iCAIC"}

package/components/LoadingOverlayComponent.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    open: boolean;
+};
+/** A component which render an overlay loading */
+export default function LoadingOverlayComponent({ open }: Props): JSX.Element;
+export {};

package/components/LoadingOverlayComponent.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const react_md_spinner_1 = tslib_1.__importDefault(require("react-md-spinner"));
+/** A component which render an overlay loading */
+function LoadingOverlayComponent({ open }) {
+    const theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Modal, { open: open, sx: { outline: 0 }, children: (0, jsx_runtime_1.jsx)(system_1.Box, { sx: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: '100px',
+                outline: 0,
+            }, children: (0, jsx_runtime_1.jsx)(react_md_spinner_1.default, { singleColor: theme.palette.primary.main, role: "loadingSpinner" }) }) }));
+}
+exports.default = LoadingOverlayComponent;
+//# sourceMappingURL=LoadingOverlayComponent.js.map

package/components/LoadingOverlayComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlayComponent.js","sourceRoot":"","sources":["../../src/lib/components/LoadingOverlayComponent.tsx"],"names":[],"mappings":";;;;AAAA,4CAAgD;AAChD,wCAAkC;AAClC,gFAAyC;AAMzC,kDAAkD;AAClD,SAAwB,uBAAuB,CAAC,EAAE,IAAI,EAAS;IAC7D,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAEzB,OAAO,CACL,uBAAC,gBAAK,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YACnC,uBAAC,YAAG,IACF,EAAE,EAAE;gBACF,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,KAAK;gBACV,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,CAAC;aACX,YAED,uBAAC,0BAAS,IAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAC,gBAAgB,GAAG,GACxE,GACA,CACT,CAAC;AACJ,CAAC;AAlBD,0CAkBC"}

package/index.d.ts

@@ -6,8 +6,26 @@ export { default as FilterModal } from './components/FilterModal';
 export { default as SessionModal } from './components/SessionModal';
 export { default as TitleBox } from './components/TitleBox';
 export { default as Toast } from './components/Toast';
+export { default as ToastWrapper } from './components/ToastWrapper';
 export { default as EndingPage } from './components/EndingPage';
+export { default as LoadingOverlayComponent } from './components/LoadingOverlayComponent';
+export { default as NavigationBar } from './components/NavigationBar';
+export { default as CheckIllustrationIcon } from './components/icons/CheckIllustrationIcon';
+export { default as ConfirmIcon } from './components/icons/ConfirmIcon';
+export { default as ErrorIcon } from './components/icons/ErrorIcon';
+export { default as FaultIcon } from './components/icons/FaultIcon';
+export { default as PagoPaIcon } from './components/icons/PagoPaIcon';
+export { default as PagoPaMiniIcon } from './components/icons/PagoPaMiniIcon';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+export { default as useErrorDispatcher } from './hooks/useErrorDispatcher';
 export { default as LoadingOverlay } from './components/Loading/LoadingOverlay';
+export { default as useLoading } from './hooks/useLoading';
 export { default as UserNotifyHandle } from './components/UserNotifyHandle';
+export { default as useUserNotify } from './hooks/useUserNotify';
 export { default as UnloadEventHandler } from './components/UnloadEventHandler';
+export { useUnloadEventInterceptor, useUnloadEventInterceptorAndActivate, useUnloadEventOnExit, useUnloadEventLogout, } from './hooks/useUnloadEventInterceptor';
+export { default as withLogin } from './decorators/withLogin';
+export { useLogin } from './hooks/useLogin';
+export { default as withRetrievedValue } from './decorators/withRetrievedValue';
+export { default as useReduxCachedValue } from './hooks/useReduxCachedValue';
+export { default as useFakePagination } from './hooks/useFakePagination';

package/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnloadEventHandler = exports.UserNotifyHandle = exports.LoadingOverlay = exports.ErrorBoundary = exports.EndingPage = exports.Toast = exports.TitleBox = exports.SessionModal = exports.FilterModal = exports.CustomPagination = exports.CustomAvatar = exports.Footer = exports.Header = void 0;
+exports.useFakePagination = exports.useReduxCachedValue = exports.withRetrievedValue = exports.useLogin = exports.withLogin = exports.useUnloadEventLogout = exports.useUnloadEventOnExit = exports.useUnloadEventInterceptorAndActivate = exports.useUnloadEventInterceptor = exports.UnloadEventHandler = exports.useUserNotify = exports.UserNotifyHandle = exports.useLoading = exports.LoadingOverlay = exports.useErrorDispatcher = exports.ErrorBoundary = exports.PagoPaMiniIcon = exports.PagoPaIcon = exports.FaultIcon = exports.ErrorIcon = exports.ConfirmIcon = exports.CheckIllustrationIcon = exports.NavigationBar = exports.LoadingOverlayComponent = exports.EndingPage = exports.ToastWrapper = exports.Toast = exports.TitleBox = exports.SessionModal = exports.FilterModal = exports.CustomPagination = exports.CustomAvatar = exports.Footer = exports.Header = void 0;
 var Header_1 = require("./components/Header/Header");
 Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
 var Footer_1 = require("./components/Footer/Footer");
@@ -20,14 +20,53 @@ var TitleBox_1 = require("./components/TitleBox");
 Object.defineProperty(exports, "TitleBox", { enumerable: true, get: function () { return __importDefault(TitleBox_1).default; } });
 var Toast_1 = require("./components/Toast");
 Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return __importDefault(Toast_1).default; } });
+var ToastWrapper_1 = require("./components/ToastWrapper");
+Object.defineProperty(exports, "ToastWrapper", { enumerable: true, get: function () { return __importDefault(ToastWrapper_1).default; } });
 var EndingPage_1 = require("./components/EndingPage");
 Object.defineProperty(exports, "EndingPage", { enumerable: true, get: function () { return __importDefault(EndingPage_1).default; } });
+var LoadingOverlayComponent_1 = require("./components/LoadingOverlayComponent");
+Object.defineProperty(exports, "LoadingOverlayComponent", { enumerable: true, get: function () { return __importDefault(LoadingOverlayComponent_1).default; } });
+var NavigationBar_1 = require("./components/NavigationBar");
+Object.defineProperty(exports, "NavigationBar", { enumerable: true, get: function () { return __importDefault(NavigationBar_1).default; } });
+var CheckIllustrationIcon_1 = require("./components/icons/CheckIllustrationIcon");
+Object.defineProperty(exports, "CheckIllustrationIcon", { enumerable: true, get: function () { return __importDefault(CheckIllustrationIcon_1).default; } });
+var ConfirmIcon_1 = require("./components/icons/ConfirmIcon");
+Object.defineProperty(exports, "ConfirmIcon", { enumerable: true, get: function () { return __importDefault(ConfirmIcon_1).default; } });
+var ErrorIcon_1 = require("./components/icons/ErrorIcon");
+Object.defineProperty(exports, "ErrorIcon", { enumerable: true, get: function () { return __importDefault(ErrorIcon_1).default; } });
+var FaultIcon_1 = require("./components/icons/FaultIcon");
+Object.defineProperty(exports, "FaultIcon", { enumerable: true, get: function () { return __importDefault(FaultIcon_1).default; } });
+var PagoPaIcon_1 = require("./components/icons/PagoPaIcon");
+Object.defineProperty(exports, "PagoPaIcon", { enumerable: true, get: function () { return __importDefault(PagoPaIcon_1).default; } });
+var PagoPaMiniIcon_1 = require("./components/icons/PagoPaMiniIcon");
+Object.defineProperty(exports, "PagoPaMiniIcon", { enumerable: true, get: function () { return __importDefault(PagoPaMiniIcon_1).default; } });
 var ErrorBoundary_1 = require("./components/ErrorBoundary/ErrorBoundary");
 Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_1).default; } });
+var useErrorDispatcher_1 = require("./hooks/useErrorDispatcher");
+Object.defineProperty(exports, "useErrorDispatcher", { enumerable: true, get: function () { return __importDefault(useErrorDispatcher_1).default; } });
 var LoadingOverlay_1 = require("./components/Loading/LoadingOverlay");
 Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return __importDefault(LoadingOverlay_1).default; } });
+var useLoading_1 = require("./hooks/useLoading");
+Object.defineProperty(exports, "useLoading", { enumerable: true, get: function () { return __importDefault(useLoading_1).default; } });
 var UserNotifyHandle_1 = require("./components/UserNotifyHandle");
 Object.defineProperty(exports, "UserNotifyHandle", { enumerable: true, get: function () { return __importDefault(UserNotifyHandle_1).default; } });
+var useUserNotify_1 = require("./hooks/useUserNotify");
+Object.defineProperty(exports, "useUserNotify", { enumerable: true, get: function () { return __importDefault(useUserNotify_1).default; } });
 var UnloadEventHandler_1 = require("./components/UnloadEventHandler");
 Object.defineProperty(exports, "UnloadEventHandler", { enumerable: true, get: function () { return __importDefault(UnloadEventHandler_1).default; } });
+var useUnloadEventInterceptor_1 = require("./hooks/useUnloadEventInterceptor");
+Object.defineProperty(exports, "useUnloadEventInterceptor", { enumerable: true, get: function () { return useUnloadEventInterceptor_1.useUnloadEventInterceptor; } });
+Object.defineProperty(exports, "useUnloadEventInterceptorAndActivate", { enumerable: true, get: function () { return useUnloadEventInterceptor_1.useUnloadEventInterceptorAndActivate; } });
+Object.defineProperty(exports, "useUnloadEventOnExit", { enumerable: true, get: function () { return useUnloadEventInterceptor_1.useUnloadEventOnExit; } });
+Object.defineProperty(exports, "useUnloadEventLogout", { enumerable: true, get: function () { return useUnloadEventInterceptor_1.useUnloadEventLogout; } });
+var withLogin_1 = require("./decorators/withLogin");
+Object.defineProperty(exports, "withLogin", { enumerable: true, get: function () { return __importDefault(withLogin_1).default; } });
+var useLogin_1 = require("./hooks/useLogin");
+Object.defineProperty(exports, "useLogin", { enumerable: true, get: function () { return useLogin_1.useLogin; } });
+var withRetrievedValue_1 = require("./decorators/withRetrievedValue");
+Object.defineProperty(exports, "withRetrievedValue", { enumerable: true, get: function () { return __importDefault(withRetrievedValue_1).default; } });
+var useReduxCachedValue_1 = require("./hooks/useReduxCachedValue");
+Object.defineProperty(exports, "useReduxCachedValue", { enumerable: true, get: function () { return __importDefault(useReduxCachedValue_1).default; } });
+var useFakePagination_1 = require("./hooks/useFakePagination");
+Object.defineProperty(exports, "useFakePagination", { enumerable: true, get: function () { return __importDefault(useFakePagination_1).default; } });
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":";;;;;;AAAA,qDAA+D;AAAtD,iHAAA,OAAO,OAAU;AAC1B,qDAA+D;AAAtD,iHAAA,OAAO,OAAU;AAC1B,0DAAoE;AAA3D,6HAAA,OAAO,OAAgB;AAChC,kEAA4E;AAAnE,qIAAA,OAAO,OAAoB;AACpC,wDAAkE;AAAzD,2HAAA,OAAO,OAAe;AAC/B,0DAAoE;AAA3D,6HAAA,OAAO,OAAgB;AAChC,kDAA4D;AAAnD,qHAAA,OAAO,OAAY;AAC5B,4CAAsD;AAA7C,+GAAA,OAAO,OAAS;AACzB,sDAAgE;AAAvD,yHAAA,OAAO,OAAc;AAE9B,0EAAoF;AAA3E,+HAAA,OAAO,OAAiB;AACjC,sEAAgF;AAAvE,iIAAA,OAAO,OAAkB;AAClC,kEAA4E;AAAnE,qIAAA,OAAO,OAAoB;AACpC,sEAAgF;AAAvE,yIAAA,OAAO,OAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":";;;;;;AAAA,qDAA+D;AAAtD,iHAAA,OAAO,OAAU;AAC1B,qDAA+D;AAAtD,iHAAA,OAAO,OAAU;AAC1B,0DAAoE;AAA3D,6HAAA,OAAO,OAAgB;AAChC,kEAA4E;AAAnE,qIAAA,OAAO,OAAoB;AACpC,wDAAkE;AAAzD,2HAAA,OAAO,OAAe;AAC/B,0DAAoE;AAA3D,6HAAA,OAAO,OAAgB;AAChC,kDAA4D;AAAnD,qHAAA,OAAO,OAAY;AAC5B,4CAAsD;AAA7C,+GAAA,OAAO,OAAS;AACzB,0DAAoE;AAA3D,6HAAA,OAAO,OAAgB;AAChC,sDAAgE;AAAvD,yHAAA,OAAO,OAAc;AAC9B,gFAA0F;AAAjF,mJAAA,OAAO,OAA2B;AAC3C,4DAAsE;AAA7D,+HAAA,OAAO,OAAiB;AAEjC,kFAA4F;AAAnF,+IAAA,OAAO,OAAyB;AACzC,8DAAwE;AAA/D,2HAAA,OAAO,OAAe;AAC/B,0DAAoE;AAA3D,uHAAA,OAAO,OAAa;AAC7B,0DAAoE;AAA3D,uHAAA,OAAO,OAAa;AAC7B,4DAAsE;AAA7D,yHAAA,OAAO,OAAc;AAC9B,oEAA8E;AAArE,iIAAA,OAAO,OAAkB;AAElC,0EAAoF;AAA3E,+HAAA,OAAO,OAAiB;AACjC,iEAA2E;AAAlE,yIAAA,OAAO,OAAsB;AAEtC,sEAAgF;AAAvE,iIAAA,OAAO,OAAkB;AAClC,iDAA2D;AAAlD,yHAAA,OAAO,OAAc;AAE9B,kEAA4E;AAAnE,qIAAA,OAAO,OAAoB;AACpC,uDAAiE;AAAxD,+HAAA,OAAO,OAAiB;AAEjC,sEAAgF;AAAvE,yIAAA,OAAO,OAAsB;AACtC,+EAK2C;AAJzC,sIAAA,yBAAyB,OAAA;AACzB,iJAAA,oCAAoC,OAAA;AACpC,iIAAA,oBAAoB,OAAA;AACpB,iIAAA,oBAAoB,OAAA;AAGtB,oDAA8D;AAArD,uHAAA,OAAO,OAAa;AAC7B,6CAA4C;AAAnC,oGAAA,QAAQ,OAAA;AAEjB,sEAAgF;AAAvE,yIAAA,OAAO,OAAsB;AACtC,mEAA6E;AAApE,2IAAA,OAAO,OAAuB;AAEvC,+DAAyE;AAAhE,uIAAA,OAAO,OAAqB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagopa/selfcare-common-frontend",
   "description": "Shared React components for the pagopa selfcare project",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "license": "MIT",
   "repository": "https://github.com/pagopa/selfcare-common-frontend",
   "author": "https://www.pagopa.gov.it",