dry-ux 1.2.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/external-dependencies/notify-js/notify.d.ts +2 -0
- package/dist/external-dependencies/notify-js/notify.js +60 -61
- package/dist/external-dependencies/noty/jquery.noty.packaged.d.ts +2 -0
- package/dist/external-dependencies/noty/jquery.noty.packaged.js +1272 -1273
- package/dist/helpers/utilities.d.ts +4 -0
- package/dist/helpers/utilities.js +54 -48
- package/dist/index.d.ts +3 -0
- package/dist/index.js +22 -4
- package/dist/provider.d.ts +2 -0
- package/dist/provider.js +9 -7
- package/dist/types.d.ts +14 -0
- package/dist/types.js +1 -2
- package/dist/ui-utils/Modal.d.ts +11 -0
- package/dist/ui-utils/Modal.js +24 -22
- package/dist/ui-utils/UIUtilProvider.d.ts +44 -0
- package/dist/ui-utils/UIUtilProvider.js +162 -158
- package/dist/ui-utils/UIUtilRenderer.d.ts +2 -0
- package/dist/ui-utils/UIUtilRenderer.js +13 -11
- package/dist/ui-utils/uiUtil.interface.d.ts +48 -0
- package/dist/ui-utils/uiUtil.interface.js +2 -2
- package/package.json +20 -7
- package/dist/external-dependencies/notify-js/notify.js.map +0 -1
- package/dist/external-dependencies/noty/jquery.noty.packaged.js.map +0 -1
- package/dist/helpers/utilities.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/provider.js.map +0 -1
- package/dist/types.js.map +0 -1
- package/dist/ui-utils/Modal.js.map +0 -1
- package/dist/ui-utils/UIUtilProvider.js.map +0 -1
- package/dist/ui-utils/UIUtilRenderer.js.map +0 -1
- package/dist/ui-utils/uiUtil.interface.js.map +0 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const preventDefault: (handler?: (event: any) => void) => (event: any) => void;
|
|
2
|
+
export declare const importScript: (resourceUrl: string, singleton?: boolean) => Promise<void>;
|
|
3
|
+
export declare const importStyleSheet: (resourceUrl: string) => void;
|
|
4
|
+
export declare const useCountdown: (seconds: number, onExpiry: () => void) => number;
|
|
@@ -1,48 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
resolve();
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useCountdown = exports.importStyleSheet = exports.importScript = exports.preventDefault = void 0;
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const preventDefault = (handler) => {
|
|
6
|
+
return (event) => {
|
|
7
|
+
event.preventDefault();
|
|
8
|
+
handler && handler(event);
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
exports.preventDefault = preventDefault;
|
|
12
|
+
const importScript = (resourceUrl, singleton = true) => {
|
|
13
|
+
return new Promise(resolve => {
|
|
14
|
+
React.useEffect(() => {
|
|
15
|
+
const script = document.createElement("script");
|
|
16
|
+
if (!$(`script[src='${resourceUrl}']`).length) {
|
|
17
|
+
script.src = resourceUrl;
|
|
18
|
+
script.async = true;
|
|
19
|
+
script.onload = () => resolve();
|
|
20
|
+
document.body.appendChild(script);
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
resolve();
|
|
24
|
+
}
|
|
25
|
+
return () => !singleton && script.remove();
|
|
26
|
+
}, []);
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
exports.importScript = importScript;
|
|
30
|
+
const importStyleSheet = (resourceUrl) => {
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
if (!$(`link[href='${resourceUrl}']`).length) {
|
|
33
|
+
const link = document.createElement("link");
|
|
34
|
+
link.href = resourceUrl;
|
|
35
|
+
link.rel = "stylesheet";
|
|
36
|
+
link.type = "text/css";
|
|
37
|
+
document.head.appendChild(link);
|
|
38
|
+
}
|
|
39
|
+
}, []);
|
|
40
|
+
};
|
|
41
|
+
exports.importStyleSheet = importStyleSheet;
|
|
42
|
+
const useCountdown = (seconds, onExpiry) => {
|
|
43
|
+
const [secondsRemaining, setSecondsRemaining] = React.useState(seconds);
|
|
44
|
+
const interval = setInterval(() => {
|
|
45
|
+
if (secondsRemaining === 1) {
|
|
46
|
+
clearInterval(interval);
|
|
47
|
+
onExpiry();
|
|
48
|
+
}
|
|
49
|
+
setSecondsRemaining(secondsRemaining - 1);
|
|
50
|
+
}, 1000);
|
|
51
|
+
React.useEffect(() => () => clearInterval(interval));
|
|
52
|
+
return secondsRemaining;
|
|
53
|
+
};
|
|
54
|
+
exports.useCountdown = useCountdown;
|
package/dist/index.d.ts
ADDED
package/dist/index.js
CHANGED
|
@@ -1,4 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.DryUXProvider = exports.useUIUtilContext = void 0;
|
|
18
|
+
var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
|
|
19
|
+
Object.defineProperty(exports, "useUIUtilContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
|
|
20
|
+
var provider_1 = require("./provider");
|
|
21
|
+
Object.defineProperty(exports, "DryUXProvider", { enumerable: true, get: function () { return provider_1.DryUXProvider; } });
|
|
22
|
+
__exportStar(require("./helpers/utilities"), exports);
|
package/dist/provider.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DryUXProvider = void 0;
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
|
|
6
|
+
const UIUtilRenderer_1 = require("./ui-utils/UIUtilRenderer");
|
|
7
|
+
exports.DryUXProvider = React.memo(({ children }) => (React.createElement(UIUtilProvider_1.UIUtilProvider, null,
|
|
8
|
+
children,
|
|
9
|
+
React.createElement(UIUtilRenderer_1.UIUtilRenderer, null))));
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface JQuery {
|
|
2
|
+
notify(message: string, options: any): JQuery;
|
|
3
|
+
noty: any;
|
|
4
|
+
}
|
|
5
|
+
interface Window {
|
|
6
|
+
noty(options: any): JQuery;
|
|
7
|
+
google: any;
|
|
8
|
+
InfoBox: any;
|
|
9
|
+
welcomeMessage: string;
|
|
10
|
+
isLocal: boolean;
|
|
11
|
+
devHost: string;
|
|
12
|
+
$: any;
|
|
13
|
+
}
|
|
14
|
+
declare const $: any;
|
package/dist/types.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
const $ = window.$;
|
|
2
|
-
//# sourceMappingURL=types.js.map
|
|
1
|
+
const $ = window.$;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ModalOptions } from "./uiUtil.interface";
|
|
3
|
+
interface IModalProps {
|
|
4
|
+
options: ModalOptions;
|
|
5
|
+
handleClose: () => void;
|
|
6
|
+
shown: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const Modal: React.FC<IModalProps & {
|
|
9
|
+
handleClose: () => void;
|
|
10
|
+
}>;
|
|
11
|
+
export default Modal;
|
package/dist/ui-utils/Modal.js
CHANGED
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const react_bootstrap_1 = require("react-bootstrap");
|
|
5
|
+
const Modal = React.memo(({ handleClose, shown, options: { content, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true } }) => {
|
|
6
|
+
React.useEffect(() => {
|
|
7
|
+
if (shown) {
|
|
8
|
+
$(".modal-dialog").css("width", width);
|
|
9
|
+
$("[role=dialog]").css("opacity", 1);
|
|
10
|
+
$(".modal-backdrop").css("height", $(document).height());
|
|
11
|
+
}
|
|
12
|
+
}, [shown, width]);
|
|
13
|
+
const hide = () => {
|
|
14
|
+
handleClose();
|
|
15
|
+
onClose && onClose();
|
|
16
|
+
};
|
|
17
|
+
const contentToRender = typeof content == "string" ? React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }) : content;
|
|
18
|
+
return (React.createElement(react_bootstrap_1.Modal, { onHide: hide, show: shown, animation: true, autoFocus: true, keyboard: false, className: cssClass, backdropStyle: { zIndex: 1040, opacity: 0.5 }, backdrop: "static" },
|
|
19
|
+
!!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: hide },
|
|
20
|
+
React.createElement(react_bootstrap_1.Modal.Title, null, title))),
|
|
21
|
+
React.createElement(react_bootstrap_1.Modal.Body, null, contentToRender),
|
|
22
|
+
React.createElement(react_bootstrap_1.Modal.Footer, null, closeBtn && (React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: hide }, "Close")))));
|
|
23
|
+
});
|
|
24
|
+
exports.default = Modal;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { AlertType, IModalCreate, IUIUtilAlert, IUIUtilLoader, IUIUtilModal, IUtilModalAction, ModalOptions } from "./uiUtil.interface";
|
|
3
|
+
import "../types";
|
|
4
|
+
export interface IUIUtilProviderState {
|
|
5
|
+
modal: IUIUtilModal;
|
|
6
|
+
alert: IUIUtilAlert;
|
|
7
|
+
loader: IUIUtilLoader;
|
|
8
|
+
}
|
|
9
|
+
export declare const UIUtilContext: React.Context<IUIUtilProviderState>;
|
|
10
|
+
export declare const useUIUtilContext: () => IUIUtilProviderState;
|
|
11
|
+
export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProviderState> {
|
|
12
|
+
constructor(props: any);
|
|
13
|
+
get modalDefaults(): {
|
|
14
|
+
create: any;
|
|
15
|
+
show: (options: any) => IModalCreate;
|
|
16
|
+
getCurrent: () => IModalCreate;
|
|
17
|
+
showAlert: (content: any) => IModalCreate;
|
|
18
|
+
showConfirm: (options: ModalOptions, onYes: () => void, onNo?: () => void) => IModalCreate;
|
|
19
|
+
showActions: (options: ModalOptions, actions: IUtilModalAction[]) => IModalCreate;
|
|
20
|
+
instances: {
|
|
21
|
+
[id: string]: {
|
|
22
|
+
options: ModalOptions;
|
|
23
|
+
shown: boolean;
|
|
24
|
+
handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
get alertDefaults(): {
|
|
29
|
+
show: any;
|
|
30
|
+
showNoty: any;
|
|
31
|
+
};
|
|
32
|
+
get loaderDefaults(): {
|
|
33
|
+
show: () => void;
|
|
34
|
+
hide: () => void;
|
|
35
|
+
shown: boolean;
|
|
36
|
+
};
|
|
37
|
+
showNotifyAlert(message: string, alertType: AlertType, position?: string, bindToElement?: any): void;
|
|
38
|
+
showNoty(message: string, alertType: AlertType): void;
|
|
39
|
+
toggleModalInstance(id: string, shown: boolean, destroyOnClose?: boolean): void;
|
|
40
|
+
removeModalInstance(id: string): void;
|
|
41
|
+
getCurrentModal(id: string): IModalCreate;
|
|
42
|
+
createModal(id: string, options: ModalOptions): IModalCreate;
|
|
43
|
+
render(): JSX.Element;
|
|
44
|
+
}
|
|
@@ -1,158 +1,162 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
options.content,
|
|
46
|
-
React.createElement("div", { className: "text-center mtop" },
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
this.
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
}
|
|
158
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.UIUtilProvider = exports.useUIUtilContext = exports.UIUtilContext = void 0;
|
|
4
|
+
const React = require("react");
|
|
5
|
+
require("../types");
|
|
6
|
+
const defaultState = {
|
|
7
|
+
modal: {
|
|
8
|
+
show: null,
|
|
9
|
+
create: null,
|
|
10
|
+
instances: {},
|
|
11
|
+
getCurrent: null,
|
|
12
|
+
showAlert: null,
|
|
13
|
+
showConfirm: null,
|
|
14
|
+
showActions: null,
|
|
15
|
+
},
|
|
16
|
+
alert: {
|
|
17
|
+
show: null,
|
|
18
|
+
showNoty: null,
|
|
19
|
+
},
|
|
20
|
+
loader: {
|
|
21
|
+
shown: false,
|
|
22
|
+
show: null,
|
|
23
|
+
hide: null,
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
exports.UIUtilContext = React.createContext(defaultState);
|
|
27
|
+
const useUIUtilContext = () => React.useContext(exports.UIUtilContext);
|
|
28
|
+
exports.useUIUtilContext = useUIUtilContext;
|
|
29
|
+
class UIUtilProvider extends React.PureComponent {
|
|
30
|
+
constructor(props) {
|
|
31
|
+
super(props);
|
|
32
|
+
this.state = Object.assign(Object.assign({}, defaultState), { modal: this.modalDefaults, alert: this.alertDefaults, loader: this.loaderDefaults });
|
|
33
|
+
}
|
|
34
|
+
get modalDefaults() {
|
|
35
|
+
return Object.assign(Object.assign({}, defaultState.modal), { create: this.createModal.bind(this), show: options => this.createModal(null, options), getCurrent: () => {
|
|
36
|
+
const { modal: { instances }, } = this.state;
|
|
37
|
+
const id = Object.keys(instances).find(id => instances[id].shown);
|
|
38
|
+
return this.getCurrentModal(id);
|
|
39
|
+
}, showAlert: content => this.createModal(null, {
|
|
40
|
+
content: React.createElement("h4", { className: "text-center mtop" }, content),
|
|
41
|
+
destroyOnClose: true,
|
|
42
|
+
closeBtn: true,
|
|
43
|
+
width: 400,
|
|
44
|
+
}), showConfirm: (options, onYes, onNo) => this.createModal("confirm", Object.assign(Object.assign({}, options), { content: (React.createElement("div", null,
|
|
45
|
+
options.content,
|
|
46
|
+
React.createElement("div", { className: "text-center mtop" },
|
|
47
|
+
React.createElement("button", { className: "btn btn-success mright", onClick: onYes }, "Yes"),
|
|
48
|
+
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,
|
|
49
|
+
options.content,
|
|
50
|
+
React.createElement("div", { className: "text-center mtop" }, actions.map(({ content, type = "success", closeOnClick, onClick }, index) => (React.createElement("button", { className: `btn btn-${type} mright`, onClick: () => {
|
|
51
|
+
onClick && onClick();
|
|
52
|
+
closeOnClick && this.toggleModalInstance("actions", false, true);
|
|
53
|
+
} }, content)))))) })) });
|
|
54
|
+
}
|
|
55
|
+
get alertDefaults() {
|
|
56
|
+
return {
|
|
57
|
+
show: this.showNotifyAlert.bind(this),
|
|
58
|
+
showNoty: this.showNoty.bind(this),
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
get loaderDefaults() {
|
|
62
|
+
return Object.assign(Object.assign({}, defaultState.loader), { show: () => this.setState({
|
|
63
|
+
loader: Object.assign(Object.assign({}, this.state.loader), { shown: true }),
|
|
64
|
+
}), hide: () => this.setState({
|
|
65
|
+
loader: Object.assign(Object.assign({}, this.state.loader), { shown: false }),
|
|
66
|
+
}) });
|
|
67
|
+
}
|
|
68
|
+
showNotifyAlert(message, alertType, position, bindToElement) {
|
|
69
|
+
Promise.resolve().then(() => require(/* webpackChunkName: "notify" */ "../external-dependencies/notify-js/notify")).then(() => {
|
|
70
|
+
const options = Object.assign(Object.assign({}, (alertType && { className: alertType })), (position && { position }));
|
|
71
|
+
$(".notifyjs-hidable").trigger("click");
|
|
72
|
+
if (bindToElement) {
|
|
73
|
+
$(bindToElement).notify(message, options);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
$.notify(message, options);
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
showNoty(message, alertType) {
|
|
81
|
+
Promise.resolve().then(() => require(/* webpackChunkName: "noty" */ "../external-dependencies/noty/jquery.noty.packaged")).then(() => {
|
|
82
|
+
$.noty.defaults = {
|
|
83
|
+
layout: "topCenter",
|
|
84
|
+
theme: "relax",
|
|
85
|
+
type: "alert",
|
|
86
|
+
text: "",
|
|
87
|
+
dismissQueue: false,
|
|
88
|
+
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
|
|
89
|
+
animation: {
|
|
90
|
+
open: { height: "toggle" },
|
|
91
|
+
close: { height: "toggle" },
|
|
92
|
+
easing: "swing",
|
|
93
|
+
speed: 500, // opening & closing animation speed
|
|
94
|
+
},
|
|
95
|
+
timeout: 4000,
|
|
96
|
+
force: true,
|
|
97
|
+
modal: false,
|
|
98
|
+
maxVisible: 1,
|
|
99
|
+
killer: true,
|
|
100
|
+
closeWith: ["click"],
|
|
101
|
+
callback: {
|
|
102
|
+
onShow: function () { },
|
|
103
|
+
afterShow: function () { },
|
|
104
|
+
onClose: function () { },
|
|
105
|
+
afterClose: function () { },
|
|
106
|
+
onCloseClick: function () { },
|
|
107
|
+
},
|
|
108
|
+
buttons: false, // an array of buttons
|
|
109
|
+
};
|
|
110
|
+
window.noty({ text: message, type: alertType });
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
toggleModalInstance(id, shown, destroyOnClose = false) {
|
|
114
|
+
const { modal: { instances }, } = this.state;
|
|
115
|
+
const instance = instances[id];
|
|
116
|
+
if (!instance) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
// Hide all other instances
|
|
120
|
+
Object.keys(instances).forEach(id => (instances[id].shown = false));
|
|
121
|
+
if (!shown && destroyOnClose && instance.options.destroyOnClose) {
|
|
122
|
+
this.removeModalInstance(id);
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
instance.shown = shown;
|
|
126
|
+
this.setState({
|
|
127
|
+
modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
removeModalInstance(id) {
|
|
132
|
+
const { modal: { instances }, } = this.state;
|
|
133
|
+
delete instances[id];
|
|
134
|
+
this.setState({
|
|
135
|
+
modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
getCurrentModal(id) {
|
|
139
|
+
return {
|
|
140
|
+
show: () => this.toggleModalInstance(id, true),
|
|
141
|
+
hide: () => this.toggleModalInstance(id, false),
|
|
142
|
+
remove: () => this.removeModalInstance(id),
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
createModal(id, options) {
|
|
146
|
+
const { modal: { instances }, } = this.state;
|
|
147
|
+
instances[id] = {
|
|
148
|
+
options,
|
|
149
|
+
shown: false,
|
|
150
|
+
handleClose: this.toggleModalInstance.bind(this),
|
|
151
|
+
};
|
|
152
|
+
this.setState({
|
|
153
|
+
modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
|
|
154
|
+
});
|
|
155
|
+
this.toggleModalInstance(id, true);
|
|
156
|
+
return this.getCurrentModal(id);
|
|
157
|
+
}
|
|
158
|
+
render() {
|
|
159
|
+
return React.createElement(exports.UIUtilContext.Provider, { value: this.state }, this.props.children);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
exports.UIUtilProvider = UIUtilProvider;
|