dry-ux 1.31.0 → 1.33.0

package/dist/helpers/DajaxiceProxy.d.ts

@@ -1,5 +1,6 @@
 declare type Args<T = void> = {
     args: T;
+    loader?: boolean;
     skip?: {
         authCheck?: boolean;
         errorHandler?: boolean;
@@ -12,6 +13,8 @@ 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, onError, loader, }: {

package/dist/helpers/DajaxiceProxy.js

@@ -7,16 +7,18 @@ 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, onError, loader: showLoader, }) => 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, skip } = {}) {
+                return function ({ args, skip, loader: showLoaderLocal, } = {}) {
                     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 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();

package/dist/index.d.ts

@@ -10,3 +10,4 @@ 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.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;
+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; } });
@@ -39,3 +39,5 @@ 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

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

package/dist/ui-utils/Loader.js

@@ -1,132 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
+const SpinnerStyles_1 = require("./SpinnerStyles");
 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);
-  }
-}
-`;
+        this.spinnerStyles = new SpinnerStyles_1.SpinnerStyles();
+        this.elementId = "dry-ux-loader";
     }
     get element() {
-        return document.getElementById("dry-ux-loader");
+        return document.getElementById(this.elementId);
     }
     show() {
         this.addElementsIfNotExists();
@@ -137,19 +19,12 @@ class Loader {
             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();
-        }
+        this.spinnerStyles.add();
         if (!this.element) {
             let el = document.createElement("div");
-            el.id = "dry-ux-loader";
+            el.id = this.elementId;
+            el.className = "dry-ux-spinner fullscreen";
             document.body.appendChild(el);
         }
     }

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,145 @@
+"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;
+          display: inline-block;
+        }
+        
+        /* :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.31.0",
+  "version": "1.33.0",
   "description": "",
   "main": "dist/index",
   "scripts": {