dry-ux 1.58.0 → 1.60.0

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

@@ -1,9 +1,11 @@
 import * as React from "react";
-import { PopUpOptions } from "./UIUtil.interface";
+import { Content, PopUpOptions } from "./UIUtil.interface";
+import "./overlay.css";
 export interface IModalProps {
     options: PopUpOptions;
     handleClose: () => void;
     shown: boolean;
+    overlay: Content;
     config: {
         styles?: {
             [selector: string]: React.CSSProperties;

package/dist/ui-utils/Modal.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_bootstrap_1 = require("react-bootstrap");
-const Modal = React.memo(({ handleClose, shown, options: { content, footerContent, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, }, config: { defaultModalStyles = false, styles = {}, setBackdropHeight = true, centered: globalCentered, onOpen, onClose: globalOnClose, }, }) => {
+require("./overlay.css");
+const Modal = React.memo(({ handleClose, shown, overlay, options: { content, footerContent, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, }, config: { defaultModalStyles = false, styles = {}, setBackdropHeight = true, centered: globalCentered, onOpen, onClose: globalOnClose, }, }) => {
     const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
+    const modalRef = React.useRef(null);
     const applyStyles = React.useCallback(() => {
         document.querySelectorAll(".modal-dialog").forEach((el) => {
             el.style.width = typeof width == "number" ? `${width}px` : width;
@@ -50,7 +52,9 @@ const Modal = React.memo(({ handleClose, shown, options: { content, footerConten
     };
     const contentToRender = typeof content == "string" ? React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }) : content;
     const showFooter = closeBtn || footerContent;
-    return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, className: cssClass, backdropStyle: { zIndex: 1040, opacity: 0.5 }, backdrop: "static" },
+    return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, ref: modalRef, className: cssClass, backdropStyle: { zIndex: 1040, opacity: 0.5 }, backdrop: "static" },
+        overlay && (React.createElement("div", { className: "dry-ux-overlay" },
+            React.createElement("div", { className: "dry-ux-overlay-content" }, overlay))),
         !!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: onHide },
             React.createElement(react_bootstrap_1.Modal.Title, null, title))),
         React.createElement(react_bootstrap_1.Modal.Body, null, contentToRender),

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

@@ -1,3 +1,4 @@
+export type Content = JSX.Element | string;
 export type PopUp = {
     /**
      * Hides the modal.
@@ -11,16 +12,29 @@ export type PopUp = {
      * Removes the modal.
      */
     remove: () => void;
+    /**
+     * The overlay for the modal.
+     */
+    overlay: {
+        /**
+         * Shows the overlay.
+         */
+        show: (content: Content) => void;
+        /**
+         * Hides the overlay.
+         */
+        hide: () => void;
+    };
 };
 export type PopUpOptions = {
     /**
      * The content of the modal.
      */
-    content: JSX.Element | string;
+    content: Content;
     /**
      * Footer content of the modal.
      */
-    footerContent?: JSX.Element | string;
+    footerContent?: Content;
     /**
      * The class to apply to the modal.
      */
@@ -32,7 +46,7 @@ export type PopUpOptions = {
     /**
      * The title of the modal.
      */
-    title?: JSX.Element | string;
+    title?: Content;
     /**
      * If true, the modal will have a close button in the title bar.
      */
@@ -63,7 +77,7 @@ export type PopUpAction = {
     /**
      * The content to display in the modal.
      */
-    content: JSX.Element | string;
+    content: Content;
     /**
      * The type of button to display.
      */
@@ -76,6 +90,10 @@ export type PopUpAction = {
      * If true, the modal will be closed when the button is clicked.
      */
     closeOnClick?: boolean;
+    /**
+     * If set, confirm overlay will be shown before the action is executed.
+     */
+    confirm?: Content;
 };
 export type UIUtilModal = {
     /**
@@ -96,6 +114,7 @@ export type UIUtilModal = {
         [id: string]: {
             options: PopUpOptions;
             shown: boolean;
+            overlay?: Content;
             handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
         };
     };
@@ -107,7 +126,7 @@ export type UIUtilModal = {
      * Shows an alert style modal.
      * @param content The content to display in the modal.
      */
-    showAlert: (content: PopUpOptions["content"], onClose?: PopUpOptions["onClose"]) => PopUp;
+    showAlert: (content: Content, onClose?: PopUpOptions["onClose"]) => PopUp;
     /**
      * Shows a confirm style modal.
      * @param options The options for the modal.

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IUIUtilLoader, UIUtilModal, PopUp, PopUpAction, PopUpOptions, UIUtilPrompt } from "./UIUtil.interface";
+import { IUIUtilLoader, UIUtilModal, PopUp, PopUpAction, PopUpOptions, UIUtilPrompt, Content } from "./UIUtil.interface";
 import "../types";
 export interface IUIUtilProviderState {
     modal: UIUtilModal;
@@ -11,18 +11,20 @@ export declare const UIUtilContext: React.Context<IUIUtilProviderState>;
 export declare const useUIUtilContext: () => IUIUtilProviderState;
 export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProviderState> {
     private readonly loader;
+    private readonly modalId;
     constructor(props: any);
     get modalDefaults(): {
         create: any;
         show: (options: PopUpOptions) => PopUp;
         getCurrent: () => PopUp;
-        showAlert: (content: PopUpOptions["content"], onClose?: PopUpOptions["onClose"]) => PopUp;
+        showAlert: (content: Content, onClose?: PopUpOptions["onClose"]) => PopUp;
         showConfirm: (options: PopUpOptions, onYes: () => void, onNo?: () => void) => PopUp;
         showActions: (options: PopUpOptions, actions: PopUpAction[]) => PopUp;
         instances: {
             [id: string]: {
                 options: PopUpOptions;
                 shown: boolean;
+                overlay?: Content;
                 handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
             };
         };
@@ -44,11 +46,14 @@ export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProvi
             [id: string]: {
                 options: PopUpOptions;
                 shown: boolean;
+                overlay?: Content;
                 handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
             };
         };
     };
     toggleModalInstance(id: string, shown: boolean, destroyOnClose?: boolean): void;
+    toggleModalOverlay(id: string, content?: JSX.Element | string): void;
+    getModalActionButtons(actions: PopUpAction[]): React.JSX.Element[];
     removeModalInstance(id: string): void;
     getCurrentModal(id: string): PopUp;
     createModal(id: string, options: PopUpOptions): PopUp;

package/dist/ui-utils/UIUtilProvider.js

@@ -38,6 +38,10 @@ class UIUtilProvider extends React.PureComponent {
     constructor(props) {
         super(props);
         this.loader = Loader_1.Loader.getInstance();
+        this.modalId = {
+            actions: "actions",
+            confirm: "confirm",
+        };
         this.state = Object.assign(Object.assign({}, defaultState), { modal: this.modalDefaults, customLoader: this.customLoaderDefaults, loader: this.loaderDefaults, prompt: this.promptDefaults });
     }
     get modalDefaults() {
@@ -51,15 +55,12 @@ class UIUtilProvider extends React.PureComponent {
                 closeBtn: true,
                 width: 400,
                 onClose,
-            }), showConfirm: (options, onYes, onNo) => this.createModal("confirm", Object.assign(Object.assign({}, options), { footerContent: (React.createElement(React.Fragment, null,
+            }), showConfirm: (options, onYes, onNo) => this.createModal(this.modalId.confirm, Object.assign(Object.assign({}, options), { footerContent: (React.createElement(React.Fragment, null,
                     options.footerContent,
                     React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-success mright", onClick: onYes }, "Yes"),
-                    React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: () => (onNo ? onNo() : this.toggleModalInstance("confirm", false, true)) }, "No"))) })), showActions: (options, actions) => this.createModal("actions", Object.assign(Object.assign({}, options), { footerContent: (React.createElement(React.Fragment, null,
+                    React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: () => onNo ? onNo() : this.toggleModalInstance(this.modalId.confirm, false, true) }, "No"))) })), showActions: (options, actions) => this.createModal(this.modalId.actions, Object.assign(Object.assign({}, options), { footerContent: (React.createElement(React.Fragment, null,
                     options.footerContent,
-                    actions.map(({ content, type = "success", closeOnClick, onClick }, index) => (React.createElement(react_bootstrap_1.Button, { bsClass: `btn btn-${type} mright`, onClick: () => {
-                            onClick && onClick();
-                            closeOnClick && this.toggleModalInstance("actions", false, true);
-                        } }, content))))) })) });
+                    this.getModalActionButtons(actions))) })) });
     }
     get customLoaderDefaults() {
         return Object.assign(Object.assign({}, defaultState.customLoader), { show: () => this.setState({
@@ -79,6 +80,7 @@ class UIUtilProvider extends React.PureComponent {
             } });
     }
     toggleModalInstance(id, shown, destroyOnClose = false) {
+        var _a, _b;
         const { modal: { instances }, } = this.state;
         const instance = instances[id];
         if (!instance) {
@@ -86,6 +88,9 @@ class UIUtilProvider extends React.PureComponent {
         }
         // Hide all other instances
         Object.keys(instances).forEach(id => (instances[id].shown = false));
+        if (!shown) {
+            (_b = (_a = instance.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
         if (!shown && destroyOnClose && instance.options.destroyOnClose) {
             this.removeModalInstance(id);
         }
@@ -96,8 +101,46 @@ class UIUtilProvider extends React.PureComponent {
             });
         }
     }
+    toggleModalOverlay(id, content) {
+        const { modal: { instances }, } = this.state;
+        instances[id].overlay = content;
+        this.setState({
+            modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
+        });
+    }
+    getModalActionButtons(actions) {
+        return actions.map(({ content, type = "success", closeOnClick, onClick, confirm }, index) => (React.createElement(react_bootstrap_1.Button, { bsClass: `btn btn-${type} mright`, onClick: () => {
+                const triggerClick = () => {
+                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                    closeOnClick && this.toggleModalInstance(this.modalId.actions, false, true);
+                };
+                if (!!confirm) {
+                    this.toggleModalOverlay(this.modalId.actions, React.createElement("div", { style: { minWidth: 200 } },
+                        React.createElement("div", { style: {
+                                fontWeight: "bold",
+                                fontSize: 18,
+                                paddingLeft: 5,
+                            } }, "Confirm"),
+                        React.createElement("hr", { style: { margin: 5 } }),
+                        React.createElement("div", null, typeof confirm == "string" ? (React.createElement("h4", { className: "text-center", style: { margin: 10 } }, confirm)) : (confirm)),
+                        React.createElement("hr", { style: { margin: 5 } }),
+                        React.createElement("div", { style: { textAlign: "right" } },
+                            React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-success", style: { marginRight: 10 }, onClick: () => {
+                                    triggerClick();
+                                    this.toggleModalOverlay(this.modalId.actions);
+                                } }, "Yes"),
+                            React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: () => this.toggleModalOverlay(this.modalId.actions) }, "No"))));
+                }
+                else {
+                    triggerClick();
+                }
+            } }, content)));
+    }
     removeModalInstance(id) {
+        var _a, _b;
         const { modal: { instances }, } = this.state;
+        const instance = instances[id];
+        (_b = (_a = instance.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
         delete instances[id];
         this.setState({
             modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
@@ -108,6 +151,10 @@ class UIUtilProvider extends React.PureComponent {
             show: () => this.toggleModalInstance(id, true),
             hide: () => this.toggleModalInstance(id, false),
             remove: () => this.removeModalInstance(id),
+            overlay: {
+                show: (content) => this.toggleModalOverlay(id, content),
+                hide: () => this.toggleModalOverlay(id),
+            },
         };
     }
     createModal(id, options) {

package/dist/ui-utils/UIUtilRenderer.js

@@ -7,7 +7,7 @@ const Modal_1 = require("./Modal");
 exports.UIUtilRenderer = React.memo(({ modalConfig = {} }) => {
     const { modal } = (0, UIUtilProvider_1.useUIUtilContext)();
     return (React.createElement(React.Fragment, null, Object.keys(modal.instances).map(id => {
-        const { shown, options, handleClose } = modal.instances[id];
-        return (React.createElement(Modal_1.default, { key: id, shown: shown, options: options, handleClose: () => handleClose(id, false, true), config: modalConfig }));
+        const { shown, options, handleClose, overlay } = modal.instances[id];
+        return (React.createElement(Modal_1.default, { key: id, shown: shown, overlay: overlay, options: options, handleClose: () => handleClose(id, false, true), config: modalConfig }));
     })));
 });

package/package.json

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