dry-ux 1.29.0 → 1.31.0

package/dist/helpers/DajaxiceProxy.d.ts

@@ -1,6 +1,10 @@
 declare type Args<T = void> = {
     args: T;
-    skipAuthCheck?: 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>;
@@ -10,11 +14,13 @@ export declare type DajaxiceFn<TArgs = void> = <TResult = any>(args: ArgType<TAr
  * @param authCheck The auth check object. If undefined, it will not check for authentication.
  * @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,52 @@
 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.
  * @returns A type safe proxy for calling Dajaxice functions.
  */
-const DajaxiceProxy = ({ modules, authCheck, }) => new Proxy(modules, {
+const DajaxiceProxy = ({ modules, authCheck, onError, loader: showLoader, }) => new Proxy(modules, {
     get(target, module) {
         return new Proxy({}, {
             get(target, method) {
-                return function ({ args, skipAuthCheck } = {}) {
+                return function ({ args, skip } = {}) {
                     return new Promise((resolve, reject) => {
                         const methodName = window["Dajaxice"][module][method];
+                        const loader = showLoader && !(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,4 @@ 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";

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.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,5 @@ 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; } });

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

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

package/dist/ui-utils/Loader.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+class Loader {
+    constructor() {
+        this.css = `/* Absolute Center Spinner */
+#dry-ux-loader {
+  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-loader:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+#dry-ux-loader:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+#dry-ux-loader: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);
+  }
+}
+`;
+    }
+    get element() {
+        return document.getElementById("dry-ux-loader");
+    }
+    show() {
+        this.addElementsIfNotExists();
+        this.element.style.visibility = "visible";
+    }
+    hide() {
+        if (this.element) {
+            this.element.style.visibility = "hidden";
+        }
+    }
+    addStyles() {
+        let el = document.createElement("style");
+        el.innerText = this.css;
+        document.head.appendChild(el);
+        return el;
+    }
+    addElementsIfNotExists() {
+        if (!document.getElementById("dry-ux-loader-styles")) {
+            this.addStyles();
+        }
+        if (!this.element) {
+            let el = document.createElement("div");
+            el.id = "dry-ux-loader";
+            document.body.appendChild(el);
+        }
+    }
+}
+exports.Loader = Loader;

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

@@ -12,9 +12,9 @@ export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProvi
     constructor(props: any);
     get modalDefaults(): {
         create: any;
-        show: (options: any) => IModalCreate;
+        show: (options: ModalOptions) => IModalCreate;
         getCurrent: () => IModalCreate;
-        showAlert: (content: any) => IModalCreate;
+        showAlert: (content: ModalOptions["content"]) => IModalCreate;
         showConfirm: (options: ModalOptions, onYes: () => void, onNo?: () => void) => IModalCreate;
         showActions: (options: ModalOptions, actions: IUtilModalAction[]) => IModalCreate;
         instances: {

package/dist/ui-utils/UIUtilProvider.js

@@ -33,12 +33,12 @@ class UIUtilProvider extends React.PureComponent {
         this.state = Object.assign(Object.assign({}, defaultState), { modal: this.modalDefaults, alert: this.alertDefaults, loader: this.loaderDefaults });
     }
     get modalDefaults() {
-        return Object.assign(Object.assign({}, defaultState.modal), { create: this.createModal.bind(this), show: options => this.createModal(null, options), getCurrent: () => {
+        return Object.assign(Object.assign({}, defaultState.modal), { create: this.createModal.bind(this), show: (options) => this.createModal(null, options), getCurrent: () => {
                 const { modal: { instances }, } = this.state;
                 const id = Object.keys(instances).find(id => instances[id].shown);
                 return this.getCurrentModal(id);
-            }, showAlert: content => this.createModal(null, {
-                content: React.createElement("h4", { className: "text-center mtop" }, content),
+            }, showAlert: (content) => this.createModal(null, {
+                content: typeof content == "string" ? React.createElement("h4", { className: "text-center mtop" }, content) : content,
                 destroyOnClose: true,
                 closeBtn: true,
                 width: 400,

package/dist/ui-utils/uiUtil.interface.d.ts

@@ -101,7 +101,7 @@ export interface IUIUtilModal {
      * Shows an alert style modal.
      * @param content The content to display in the modal.
      */
-    showAlert: (content: string) => IModalCreate;
+    showAlert: (content: ModalOptions["content"]) => IModalCreate;
     /**
      * Shows a confirm style modal.
      * @param options The options for the modal.

package/package.json

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