dry-ux 1.30.0 → 1.32.0

package/dist/helpers/DajaxiceProxy.d.ts

@@ -1,6 +1,11 @@
 declare type Args<T = void> = {
     args: T;
-    skipAuthCheck?: boolean;
+    loader?: boolean;
+    skip?: {
+        authCheck?: boolean;
+        errorHandler?: boolean;
+        loader?: boolean;
+    };
 };
 declare type ArgType<T> = T extends void ? Omit<Args, "args"> | void : Args<T>;
 export declare type DajaxiceFn<TArgs = void> = <TResult = any>(args: ArgType<TArgs>) => Promise<TResult>;
@@ -8,13 +13,17 @@ export declare type DajaxiceFn<TArgs = void> = <TResult = any>(args: ArgType<TAr
  * This function is used to create a type safe proxy for the Dajaxice functions.
  * @param modules: The modules object from the Dajaxice generated file.
  * @param authCheck The auth check object. If undefined, it will not check for authentication.
+ * @param onError: Default handler for error
+ * @param loader: If true, it will show a loader when a Dajaxice function is called.
  * @returns A type safe proxy for calling Dajaxice functions.
  */
-export declare const DajaxiceProxy: <TModule>({ modules, authCheck, }: {
+export declare const DajaxiceProxy: <TModule>({ modules, authCheck, onError, loader, }: {
     modules: TModule;
     authCheck?: {
         url: string;
         redirectUrl: string;
     };
+    onError?: (error: any) => void;
+    loader?: boolean;
 }) => TModule;
 export {};

package/dist/helpers/DajaxiceProxy.js

@@ -2,28 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DajaxiceProxy = void 0;
 const utilities_1 = require("./utilities");
+const Loader_1 = require("../ui-utils/Loader");
 /**
  * This function is used to create a type safe proxy for the Dajaxice functions.
  * @param modules: The modules object from the Dajaxice generated file.
  * @param authCheck The auth check object. If undefined, it will not check for authentication.
+ * @param onError: Default handler for error
+ * @param loader: If true, it will show a loader when a Dajaxice function is called.
  * @returns A type safe proxy for calling Dajaxice functions.
  */
-const DajaxiceProxy = ({ modules, authCheck, }) => new Proxy(modules, {
+const DajaxiceProxy = ({ modules, authCheck, onError, loader: showLoaderGlobal, }) => new Proxy(modules, {
     get(target, module) {
         return new Proxy({}, {
             get(target, method) {
-                return function ({ args, skipAuthCheck } = {}) {
+                return function ({ args, skip, loader: showLoaderLocal, } = {}) {
                     return new Promise((resolve, reject) => {
                         const methodName = window["Dajaxice"][module][method];
+                        const loader = (showLoaderGlobal || showLoaderLocal) && !(skip === null || skip === void 0 ? void 0 : skip.loader) ? new Loader_1.Loader() : undefined;
+                        const hideLoader = () => {
+                            try {
+                                loader === null || loader === void 0 ? void 0 : loader.hide();
+                            }
+                            catch (e) { }
+                        };
                         if (methodName) {
-                            const fn = () => methodName(resolve, args, {
-                                error_callback: reject,
+                            const handleError = (e) => {
+                                try {
+                                    !(skip === null || skip === void 0 ? void 0 : skip.errorHandler) && (onError === null || onError === void 0 ? void 0 : onError(e));
+                                }
+                                catch (e) { }
+                                hideLoader();
+                                reject(e);
+                            };
+                            const handleSuccess = (result) => {
+                                hideLoader();
+                                resolve(result);
+                            };
+                            const fn = () => methodName(handleSuccess, args, {
+                                error_callback: handleError,
                             });
-                            if (skipAuthCheck || !authCheck) {
+                            try {
+                                loader === null || loader === void 0 ? void 0 : loader.show();
+                            }
+                            catch (e) { }
+                            if ((skip === null || skip === void 0 ? void 0 : skip.authCheck) || !authCheck) {
                                 fn();
                             }
                             else {
-                                (0, utilities_1.fnWithAuthCheck)(fn, authCheck.url, authCheck.redirectUrl).catch(reject);
+                                (0, utilities_1.fnWithAuthCheck)(fn, authCheck.url, authCheck.redirectUrl).catch(handleError);
                             }
                         }
                         else {

package/dist/index.d.ts

@@ -9,3 +9,5 @@ export { flatten, unflatten } from "./helpers/flat";
 export { DajaxiceFn, DajaxiceProxy } from "./helpers/DajaxiceProxy";
 export { ErrorBoundary } from "./error/ErrorBoundary";
 export { ErrorScreen } from "./error/ErrorScreen";
+export { Loader } from "./ui-utils/Loader";
+export { Spinner } from "./ui-utils/Spinner";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
+exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
 var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 Object.defineProperty(exports, "useDryUxContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
 Object.defineProperty(exports, "DryUXContext", { enumerable: true, get: function () { return UIUtilProvider_1.UIUtilContext; } });
@@ -37,3 +37,7 @@ var ErrorBoundary_1 = require("./error/ErrorBoundary");
 Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return ErrorBoundary_1.ErrorBoundary; } });
 var ErrorScreen_1 = require("./error/ErrorScreen");
 Object.defineProperty(exports, "ErrorScreen", { enumerable: true, get: function () { return ErrorScreen_1.ErrorScreen; } });
+var Loader_1 = require("./ui-utils/Loader");
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_1.Loader; } });
+var Spinner_1 = require("./ui-utils/Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });

package/dist/ui-utils/Loader.d.ts

@@ -0,0 +1,8 @@
+export declare class Loader {
+    private readonly spinnerStyles;
+    private readonly elementId;
+    get element(): HTMLElement;
+    show(): void;
+    hide(): void;
+    private addElementsIfNotExists;
+}

package/dist/ui-utils/Loader.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+const SpinnerStyles_1 = require("./SpinnerStyles");
+class Loader {
+    constructor() {
+        this.spinnerStyles = new SpinnerStyles_1.SpinnerStyles();
+        this.elementId = "dry-ux-loader";
+    }
+    get element() {
+        return document.getElementById(this.elementId);
+    }
+    show() {
+        this.addElementsIfNotExists();
+        this.element.style.visibility = "visible";
+    }
+    hide() {
+        if (this.element) {
+            this.element.style.visibility = "hidden";
+        }
+    }
+    addElementsIfNotExists() {
+        this.spinnerStyles.add();
+        if (!this.element) {
+            let el = document.createElement("div");
+            el.id = this.elementId;
+            el.className = "dry-ux-spinner fullscreen";
+            document.body.appendChild(el);
+        }
+    }
+}
+exports.Loader = Loader;

package/dist/ui-utils/Spinner.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const Spinner: React.MemoExoticComponent<() => JSX.Element>;

package/dist/ui-utils/Spinner.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const React = require("react");
+const SpinnerStyles_1 = require("./SpinnerStyles");
+exports.Spinner = React.memo(() => {
+    React.useEffect(() => {
+        const spinnerStyles = new SpinnerStyles_1.SpinnerStyles();
+        spinnerStyles.add();
+    }, []);
+    return React.createElement("div", { className: "dry-ux-spinner" });
+});

package/dist/ui-utils/SpinnerStyles.d.ts

@@ -0,0 +1,5 @@
+export declare class SpinnerStyles {
+    private readonly css;
+    private readonly id;
+    add(): HTMLStyleElement;
+}

package/dist/ui-utils/SpinnerStyles.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerStyles = void 0;
+class SpinnerStyles {
+    constructor() {
+        this.css = `
+        /* Absolute Center Spinner */
+        .dry-ux-spinner.fullscreen {
+          position: fixed;
+          z-index: 999;
+          height: 2em;
+          width: 2em;
+          overflow: show;
+          margin: auto;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          visibility: hidden;
+        }
+        
+        /* Transparent Overlay */
+        .dry-ux-spinner.fullscreen:before {
+          content: '';
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0,0,0,0.3);
+        }
+        
+        .dry-ux-spinner:not(.fullscreen) {
+          padding: 20px
+        }
+        
+        /* :not(:required) hides these rules from IE9 and below */
+        .dry-ux-spinner:not(:required) {
+          /* hide "loading..." text */
+          font: 0/0 a;
+          color: transparent;
+          text-shadow: none;
+          background-color: transparent;
+          border: 0;
+        }
+        
+        .dry-ux-spinner:not(:required):after {
+          content: '';
+          display: block;
+          font-size: 10px;
+          width: 1em;
+          height: 1em;
+          margin-top: -0.5em;
+          -webkit-animation: spinner 1500ms infinite linear;
+          -moz-animation: spinner 1500ms infinite linear;
+          -ms-animation: spinner 1500ms infinite linear;
+          -o-animation: spinner 1500ms infinite linear;
+          animation: spinner 1500ms infinite linear;
+          border-radius: 0.5em;
+          -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+          box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+        }
+        
+        /* Animation */
+        
+        @-webkit-keyframes spinner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            -o-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            -o-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+        @-moz-keyframes spinner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            -o-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            -o-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+        @-o-keyframes spinner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            -o-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            -o-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+        @keyframes spinner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            -o-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            -o-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+`;
+        this.id = "dry-ux-loader-styles";
+    }
+    add() {
+        if (!document.getElementById(this.id)) {
+            let el = document.createElement("style");
+            el.innerText = this.css;
+            el.id = this.id;
+            document.head.appendChild(el);
+            return el;
+        }
+    }
+}
+exports.SpinnerStyles = SpinnerStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "description": "",
   "main": "dist/index",
   "scripts": {