dry-ux 1.0.0 → 1.5.0

package/dist/helpers/utilities.d.ts

@@ -0,0 +1,4 @@
+export declare const preventDefault: (handler?: (event: any) => void) => (event: any) => void;
+export declare const importScript: (resourceUrl: string, singleton?: boolean) => Promise<void>;
+export declare const importStyleSheet: (resourceUrl: string) => void;
+export declare const useCountdown: (seconds: number, onExpiry: () => void) => number;

package/dist/helpers/utilities.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCountdown = exports.importStyleSheet = exports.importScript = exports.preventDefault = void 0;
+const React = require("react");
+const preventDefault = (handler) => {
+    return (event) => {
+        event.preventDefault();
+        handler && handler(event);
+    };
+};
+exports.preventDefault = preventDefault;
+const importScript = (resourceUrl, singleton = true) => {
+    return new Promise(resolve => {
+        React.useEffect(() => {
+            const script = document.createElement("script");
+            if (!$(`script[src='${resourceUrl}']`).length) {
+                script.src = resourceUrl;
+                script.async = true;
+                script.onload = () => resolve();
+                document.body.appendChild(script);
+            }
+            else {
+                resolve();
+            }
+            return () => !singleton && script.remove();
+        }, []);
+    });
+};
+exports.importScript = importScript;
+const importStyleSheet = (resourceUrl) => {
+    React.useEffect(() => {
+        if (!$(`link[href='${resourceUrl}']`).length) {
+            const link = document.createElement("link");
+            link.href = resourceUrl;
+            link.rel = "stylesheet";
+            link.type = "text/css";
+            document.head.appendChild(link);
+        }
+    }, []);
+};
+exports.importStyleSheet = importStyleSheet;
+const useCountdown = (seconds, onExpiry) => {
+    const [secondsRemaining, setSecondsRemaining] = React.useState(seconds);
+    const interval = setInterval(() => {
+        if (secondsRemaining === 1) {
+            clearInterval(interval);
+            onExpiry();
+        }
+        setSecondsRemaining(secondsRemaining - 1);
+    }, 1000);
+    React.useEffect(() => () => clearInterval(interval));
+    return secondsRemaining;
+};
+exports.useCountdown = useCountdown;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { useUIUtilContext } from "./ui-utils/UIUtilProvider";
+export { DryUXProvider } from "./provider";
+export * from "./helpers/utilities";

package/dist/index.js

@@ -1,3 +1,22 @@
-export { useUIUtilContext } from "./ui-utils/UIUtilProvider";
-export { DryUXProvider } from "./provider";
-//# sourceMappingURL=index.js.map
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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.DryUXProvider = exports.useUIUtilContext = void 0;
+var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
+Object.defineProperty(exports, "useUIUtilContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
+var provider_1 = require("./provider");
+Object.defineProperty(exports, "DryUXProvider", { enumerable: true, get: function () { return provider_1.DryUXProvider; } });
+__exportStar(require("./helpers/utilities"), exports);

package/dist/provider.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const DryUXProvider: React.NamedExoticComponent<object>;

package/dist/provider.js

@@ -1,7 +1,9 @@
-import * as React from "react";
-import { UIUtilProvider } from "./ui-utils/UIUtilProvider";
-import { UIUtilRenderer } from "./ui-utils/UIUtilRenderer";
-export const DryUXProvider = React.memo(({ children }) => (React.createElement(UIUtilProvider, null,
-    children,
-    React.createElement(UIUtilRenderer, null))));
-//# sourceMappingURL=provider.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DryUXProvider = void 0;
+const React = require("react");
+const UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
+const UIUtilRenderer_1 = require("./ui-utils/UIUtilRenderer");
+exports.DryUXProvider = React.memo(({ children }) => (React.createElement(UIUtilProvider_1.UIUtilProvider, null,
+    children,
+    React.createElement(UIUtilRenderer_1.UIUtilRenderer, null))));

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+interface JQuery {
+    notify(message: string, options: any): JQuery;
+    noty: any;
+}
+interface Window {
+    noty(options: any): JQuery;
+    google: any;
+    InfoBox: any;
+    welcomeMessage: string;
+    isLocal: boolean;
+    devHost: string;
+    $: any;
+}
+declare const $: any;

package/dist/types.js

@@ -1,2 +1 @@
-const $ = window.$;
-//# sourceMappingURL=types.js.map
+const $ = window.$;

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { ModalOptions } from "./uiUtil.interface";
+interface IModalProps {
+    options: ModalOptions;
+    handleClose: () => void;
+    shown: boolean;
+}
+declare const Modal: React.FC<IModalProps & {
+    handleClose: () => void;
+}>;
+export default Modal;

package/dist/ui-utils/Modal.js

@@ -1,22 +1,23 @@
-import * as React from "react";
-import { Button, Modal as BootstrapModal } from "react-bootstrap";
-const Modal = React.memo(({ handleClose, shown, options: { content, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true } }) => {
-    React.useEffect(() => {
-        if (shown) {
-            $(".modal-dialog").css("width", width);
-            $(".modal-backdrop").css("height", $(document).height());
-        }
-    }, [shown, width]);
-    const hide = () => {
-        handleClose();
-        onClose && onClose();
-    };
-    const contentToRender = typeof content == "string" ? React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }) : content;
-    return (React.createElement(BootstrapModal, { onHide: hide, show: shown, animation: true, autoFocus: true, keyboard: false, className: cssClass, backdropStyle: { zIndex: 1040 }, backdrop: "static" },
-        !!title && (React.createElement(BootstrapModal.Header, { closeButton: titleCloseBtn, onHide: hide },
-            React.createElement(BootstrapModal.Title, null, title))),
-        React.createElement(BootstrapModal.Body, null, contentToRender),
-        React.createElement(BootstrapModal.Footer, null, closeBtn && (React.createElement(Button, { bsClass: "btn btn-danger", onClick: hide }, "Close")))));
-});
-export default Modal;
-//# sourceMappingURL=Modal.js.map
+"use strict";
+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, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true } }) => {
+    React.useEffect(() => {
+        if (shown) {
+            $(".modal-dialog").css("width", width);
+            $(".modal-backdrop").css("height", $(document).height());
+        }
+    }, [shown, width]);
+    const hide = () => {
+        handleClose();
+        onClose && onClose();
+    };
+    const contentToRender = typeof content == "string" ? React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }) : content;
+    return (React.createElement(react_bootstrap_1.Modal, { onHide: hide, show: shown, animation: true, autoFocus: true, keyboard: false, className: cssClass, backdropStyle: { zIndex: 1040 }, backdrop: "static" },
+        !!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: hide },
+            React.createElement(react_bootstrap_1.Modal.Title, null, title))),
+        React.createElement(react_bootstrap_1.Modal.Body, null, contentToRender),
+        React.createElement(react_bootstrap_1.Modal.Footer, null, closeBtn && (React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: hide }, "Close")))));
+});
+exports.default = Modal;

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { AlertType, IModalCreate, IUIUtilAlert, IUIUtilLoader, IUIUtilModal, IUtilModalAction, ModalOptions } from "./uiUtil.interface";
+import "../types";
+export interface IUIUtilProviderState {
+    modal: IUIUtilModal;
+    alert: IUIUtilAlert;
+    loader: IUIUtilLoader;
+}
+export declare const UIUtilContext: React.Context<IUIUtilProviderState>;
+export declare const useUIUtilContext: () => IUIUtilProviderState;
+export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProviderState> {
+    constructor(props: any);
+    get modalDefaults(): {
+        create: any;
+        show: (options: any) => IModalCreate;
+        getCurrent: () => IModalCreate;
+        showAlert: (content: any) => IModalCreate;
+        showConfirm: (options: ModalOptions, onYes: () => void, onNo?: () => void) => IModalCreate;
+        showActions: (options: ModalOptions, actions: IUtilModalAction[]) => IModalCreate;
+        instances: {
+            [id: string]: {
+                options: ModalOptions;
+                shown: boolean;
+                handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
+            };
+        };
+    };
+    get alertDefaults(): {
+        show: any;
+        showNoty: any;
+    };
+    get loaderDefaults(): {
+        show: () => void;
+        hide: () => void;
+        shown: boolean;
+    };
+    showNotifyAlert(message: string, alertType: AlertType, position?: string, bindToElement?: any): void;
+    showNoty(message: string, alertType: AlertType): void;
+    toggleModalInstance(id: string, shown: boolean, destroyOnClose?: boolean): void;
+    removeModalInstance(id: string): void;
+    getCurrentModal(id: string): IModalCreate;
+    createModal(id: string, options: ModalOptions): IModalCreate;
+    render(): JSX.Element;
+}

package/dist/ui-utils/UIUtilProvider.js

@@ -1,158 +1,162 @@
-import * as React from "react";
-import "../types";
-const defaultState = {
-    modal: {
-        show: null,
-        create: null,
-        instances: {},
-        getCurrent: null,
-        showAlert: null,
-        showConfirm: null,
-        showActions: null,
-    },
-    alert: {
-        show: null,
-        showNoty: null,
-    },
-    loader: {
-        shown: false,
-        show: null,
-        hide: null,
-    },
-};
-export const UIUtilContext = React.createContext(defaultState);
-export const useUIUtilContext = () => React.useContext(UIUtilContext);
-export class UIUtilProvider extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        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: () => {
-                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),
-                destroyOnClose: true,
-                closeBtn: true,
-                width: 400,
-            }), showConfirm: (options, onYes, onNo) => this.createModal("confirm", Object.assign(Object.assign({}, options), { content: (React.createElement("div", null,
-                    options.content,
-                    React.createElement("div", { className: "text-center mtop" },
-                        React.createElement("button", { className: "btn btn-success mright", onClick: onYes }, "Yes"),
-                        React.createElement("button", { className: "btn btn-danger", onClick: () => (onNo ? onNo() : this.toggleModalInstance("confirm", false, true)) }, "No")))) })), showActions: (options, actions) => this.createModal("actions", Object.assign(Object.assign({}, options), { content: (React.createElement("div", null,
-                    options.content,
-                    React.createElement("div", { className: "text-center mtop" }, actions.map(({ content, type = "success", closeOnClick, onClick }, index) => (React.createElement("button", { className: `btn btn-${type} mright`, onClick: () => {
-                            onClick && onClick();
-                            closeOnClick && this.toggleModalInstance("actions", false, true);
-                        } }, content)))))) })) });
-    }
-    get alertDefaults() {
-        return {
-            show: this.showNotifyAlert.bind(this),
-            showNoty: this.showNoty.bind(this),
-        };
-    }
-    get loaderDefaults() {
-        return Object.assign(Object.assign({}, defaultState.loader), { show: () => this.setState({
-                loader: Object.assign(Object.assign({}, this.state.loader), { shown: true }),
-            }), hide: () => this.setState({
-                loader: Object.assign(Object.assign({}, this.state.loader), { shown: false }),
-            }) });
-    }
-    showNotifyAlert(message, alertType, position, bindToElement) {
-        import(/* webpackChunkName: "notify" */ "../external-dependencies/notify-js/notify").then(() => {
-            const options = Object.assign(Object.assign({}, (alertType && { className: alertType })), (position && { position }));
-            $(".notifyjs-hidable").trigger("click");
-            if (bindToElement) {
-                $(bindToElement).notify(message, options);
-            }
-            else {
-                $.notify(message, options);
-            }
-        });
-    }
-    showNoty(message, alertType) {
-        import(/* webpackChunkName: "noty" */ "../external-dependencies/noty/jquery.noty.packaged").then(() => {
-            $.noty.defaults = {
-                layout: "topCenter",
-                theme: "relax",
-                type: "alert",
-                text: "",
-                dismissQueue: false,
-                template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
-                animation: {
-                    open: { height: "toggle" },
-                    close: { height: "toggle" },
-                    easing: "swing",
-                    speed: 500, // opening & closing animation speed
-                },
-                timeout: 4000,
-                force: true,
-                modal: false,
-                maxVisible: 1,
-                killer: true,
-                closeWith: ["click"],
-                callback: {
-                    onShow: function () { },
-                    afterShow: function () { },
-                    onClose: function () { },
-                    afterClose: function () { },
-                    onCloseClick: function () { },
-                },
-                buttons: false, // an array of buttons
-            };
-            window.noty({ text: message, type: alertType });
-        });
-    }
-    toggleModalInstance(id, shown, destroyOnClose = false) {
-        const { modal: { instances }, } = this.state;
-        const instance = instances[id];
-        if (!instance) {
-            return;
-        }
-        // Hide all other instances
-        Object.keys(instances).forEach(id => (instances[id].shown = false));
-        if (!shown && destroyOnClose && instance.options.destroyOnClose) {
-            this.removeModalInstance(id);
-        }
-        else {
-            instance.shown = shown;
-            this.setState({
-                modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
-            });
-        }
-    }
-    removeModalInstance(id) {
-        const { modal: { instances }, } = this.state;
-        delete instances[id];
-        this.setState({
-            modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
-        });
-    }
-    getCurrentModal(id) {
-        return {
-            show: () => this.toggleModalInstance(id, true),
-            hide: () => this.toggleModalInstance(id, false),
-            remove: () => this.removeModalInstance(id),
-        };
-    }
-    createModal(id, options) {
-        const { modal: { instances }, } = this.state;
-        instances[id] = {
-            options,
-            shown: false,
-            handleClose: this.toggleModalInstance.bind(this),
-        };
-        this.setState({
-            modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
-        });
-        this.toggleModalInstance(id, true);
-        return this.getCurrentModal(id);
-    }
-    render() {
-        return React.createElement(UIUtilContext.Provider, { value: this.state }, this.props.children);
-    }
-}
-//# sourceMappingURL=UIUtilProvider.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIUtilProvider = exports.useUIUtilContext = exports.UIUtilContext = void 0;
+const React = require("react");
+require("../types");
+const defaultState = {
+    modal: {
+        show: null,
+        create: null,
+        instances: {},
+        getCurrent: null,
+        showAlert: null,
+        showConfirm: null,
+        showActions: null,
+    },
+    alert: {
+        show: null,
+        showNoty: null,
+    },
+    loader: {
+        shown: false,
+        show: null,
+        hide: null,
+    },
+};
+exports.UIUtilContext = React.createContext(defaultState);
+const useUIUtilContext = () => React.useContext(exports.UIUtilContext);
+exports.useUIUtilContext = useUIUtilContext;
+class UIUtilProvider extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        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: () => {
+                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),
+                destroyOnClose: true,
+                closeBtn: true,
+                width: 400,
+            }), showConfirm: (options, onYes, onNo) => this.createModal("confirm", Object.assign(Object.assign({}, options), { content: (React.createElement("div", null,
+                    options.content,
+                    React.createElement("div", { className: "text-center mtop" },
+                        React.createElement("button", { className: "btn btn-success mright", onClick: onYes }, "Yes"),
+                        React.createElement("button", { className: "btn btn-danger", onClick: () => (onNo ? onNo() : this.toggleModalInstance("confirm", false, true)) }, "No")))) })), showActions: (options, actions) => this.createModal("actions", Object.assign(Object.assign({}, options), { content: (React.createElement("div", null,
+                    options.content,
+                    React.createElement("div", { className: "text-center mtop" }, actions.map(({ content, type = "success", closeOnClick, onClick }, index) => (React.createElement("button", { className: `btn btn-${type} mright`, onClick: () => {
+                            onClick && onClick();
+                            closeOnClick && this.toggleModalInstance("actions", false, true);
+                        } }, content)))))) })) });
+    }
+    get alertDefaults() {
+        return {
+            show: this.showNotifyAlert.bind(this),
+            showNoty: this.showNoty.bind(this),
+        };
+    }
+    get loaderDefaults() {
+        return Object.assign(Object.assign({}, defaultState.loader), { show: () => this.setState({
+                loader: Object.assign(Object.assign({}, this.state.loader), { shown: true }),
+            }), hide: () => this.setState({
+                loader: Object.assign(Object.assign({}, this.state.loader), { shown: false }),
+            }) });
+    }
+    showNotifyAlert(message, alertType, position, bindToElement) {
+        Promise.resolve().then(() => require(/* webpackChunkName: "notify" */ "../external-dependencies/notify-js/notify")).then(() => {
+            const options = Object.assign(Object.assign({}, (alertType && { className: alertType })), (position && { position }));
+            $(".notifyjs-hidable").trigger("click");
+            if (bindToElement) {
+                $(bindToElement).notify(message, options);
+            }
+            else {
+                $.notify(message, options);
+            }
+        });
+    }
+    showNoty(message, alertType) {
+        Promise.resolve().then(() => require(/* webpackChunkName: "noty" */ "../external-dependencies/noty/jquery.noty.packaged")).then(() => {
+            $.noty.defaults = {
+                layout: "topCenter",
+                theme: "relax",
+                type: "alert",
+                text: "",
+                dismissQueue: false,
+                template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
+                animation: {
+                    open: { height: "toggle" },
+                    close: { height: "toggle" },
+                    easing: "swing",
+                    speed: 500, // opening & closing animation speed
+                },
+                timeout: 4000,
+                force: true,
+                modal: false,
+                maxVisible: 1,
+                killer: true,
+                closeWith: ["click"],
+                callback: {
+                    onShow: function () { },
+                    afterShow: function () { },
+                    onClose: function () { },
+                    afterClose: function () { },
+                    onCloseClick: function () { },
+                },
+                buttons: false, // an array of buttons
+            };
+            window.noty({ text: message, type: alertType });
+        });
+    }
+    toggleModalInstance(id, shown, destroyOnClose = false) {
+        const { modal: { instances }, } = this.state;
+        const instance = instances[id];
+        if (!instance) {
+            return;
+        }
+        // Hide all other instances
+        Object.keys(instances).forEach(id => (instances[id].shown = false));
+        if (!shown && destroyOnClose && instance.options.destroyOnClose) {
+            this.removeModalInstance(id);
+        }
+        else {
+            instance.shown = shown;
+            this.setState({
+                modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
+            });
+        }
+    }
+    removeModalInstance(id) {
+        const { modal: { instances }, } = this.state;
+        delete instances[id];
+        this.setState({
+            modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
+        });
+    }
+    getCurrentModal(id) {
+        return {
+            show: () => this.toggleModalInstance(id, true),
+            hide: () => this.toggleModalInstance(id, false),
+            remove: () => this.removeModalInstance(id),
+        };
+    }
+    createModal(id, options) {
+        const { modal: { instances }, } = this.state;
+        instances[id] = {
+            options,
+            shown: false,
+            handleClose: this.toggleModalInstance.bind(this),
+        };
+        this.setState({
+            modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
+        });
+        this.toggleModalInstance(id, true);
+        return this.getCurrentModal(id);
+    }
+    render() {
+        return React.createElement(exports.UIUtilContext.Provider, { value: this.state }, this.props.children);
+    }
+}
+exports.UIUtilProvider = UIUtilProvider;

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

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

package/dist/ui-utils/UIUtilRenderer.js

@@ -1,11 +1,13 @@
-import * as React from "react";
-import { useUIUtilContext } from "./UIUtilProvider";
-import Modal from "./Modal";
-export const UIUtilRenderer = React.memo(() => {
-    const { modal } = useUIUtilContext();
-    return (React.createElement(React.Fragment, null, Object.keys(modal.instances).map(id => {
-        const { shown, options, handleClose } = modal.instances[id];
-        return (React.createElement(Modal, { key: id, shown: shown, options: options, handleClose: () => handleClose(id, false, true) }));
-    })));
-});
-//# sourceMappingURL=UIUtilRenderer.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIUtilRenderer = void 0;
+const React = require("react");
+const UIUtilProvider_1 = require("./UIUtilProvider");
+const Modal_1 = require("./Modal");
+exports.UIUtilRenderer = React.memo(() => {
+    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) }));
+    })));
+});