react-dialogger 1.1.48 → 1.1.50
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/README.md +2 -1
- package/components/Actions.d.ts +7 -0
- package/components/Actions.js +17 -0
- package/components/DialogActionBase.d.ts +10 -0
- package/components/DialogActionBase.js +13 -11
- package/components/DialogBase.d.ts +42 -109
- package/components/DialogBase.js +104 -762
- package/components/DialogContent.d.ts +1 -19
- package/components/DialogContent.js +66 -72
- package/components/DialogContentBody.d.ts +3 -5
- package/components/DialogContentBody.js +2 -23
- package/components/DialogContentFooter.d.ts +4 -0
- package/components/{DialogContenFooter.js → DialogContentFooter.js} +6 -33
- package/components/DialogContentHeader.d.ts +6 -6
- package/components/DialogContentHeader.js +74 -32
- package/components/DialogWithBackdropWrapper.d.ts +4 -0
- package/components/DialogWithBackdropWrapper.js +72 -0
- package/components/Features/DialogCloseAction.js +18 -0
- package/components/Features/DialogFullscreenAction.js +24 -0
- package/components/{Futures → Features}/DialogInfoAction.js +8 -11
- package/components/Features/DialogProcessing.js +14 -0
- package/components/RippleButton.d.ts +2 -2
- package/components/RippleButton.js +1 -3
- package/components/index.d.ts +9 -0
- package/components/index.js +24 -0
- package/components/utils/effects/jumper-animate.d.ts +2 -0
- package/components/utils/effects/jumper-animate.js +36 -0
- package/context/index.d.ts +3 -0
- package/context/index.js +54 -0
- package/{models → helpers}/Resizeable.d.ts +2 -2
- package/{models → helpers}/Resizeable.js +23 -11
- package/helpers/dialogBoundsMemoize.d.ts +5 -5
- package/helpers/dialogBoundsMemoize.js +82 -77
- package/helpers/dialogRectAuto.d.ts +3 -0
- package/helpers/dialogRectAuto.js +21 -0
- package/helpers/formInputKeyListeners.d.ts +2 -0
- package/helpers/formInputKeyListeners.js +18 -0
- package/helpers/hexToRgb.d.ts +2 -0
- package/helpers/hexToRgb.js +19 -0
- package/helpers/index.d.ts +1 -0
- package/helpers/index.js +3 -1
- package/helpers/initDialogMemoizeBounds.d.ts +7 -2
- package/helpers/initDialogMemoizeBounds.js +19 -14
- package/index.d.ts +3 -4
- package/index.js +12 -15
- package/models/Dialog.d.ts +30 -35
- package/models/Dialog.js +112 -99
- package/models/DialogAction.d.ts +1 -39
- package/models/DialogAction.js +2 -171
- package/models/baseDialogOptions.d.ts +5 -0
- package/models/baseDialogOptions.js +63 -0
- package/models/index.d.ts +3 -0
- package/models/index.js +13 -0
- package/package.json +1 -1
- package/styles/dialog.css +1 -2
- package/{helpers → types}/BoundTypes.d.ts +4 -1
- package/types/DialogActionTypes.d.ts +14 -6
- package/types/DialogTypes.d.ts +81 -31
- package/types/SizePosTypes.d.ts +3 -2
- package/types/index.d.ts +1 -1
- package/types/types.d.ts +1 -0
- package/components/DialogContenFooter.d.ts +0 -13
- package/components/Futures/DialogCloseAction.js +0 -30
- package/components/Futures/DialogFullscreenAction.js +0 -37
- package/components/Futures/DialogProcessing.js +0 -18
- package/hooks/useDialogOptions.d.ts +0 -3
- package/hooks/useDialogOptions.js +0 -82
- /package/components/{Futures → Features}/DialogCloseAction.d.ts +0 -0
- /package/components/{Futures → Features}/DialogFullscreenAction.d.ts +0 -0
- /package/components/{Futures → Features}/DialogHeaderActionsWrapper.d.ts +0 -0
- /package/components/{Futures → Features}/DialogHeaderActionsWrapper.js +0 -0
- /package/components/{Futures → Features}/DialogInfoAction.d.ts +0 -0
- /package/components/{Futures → Features}/DialogProcessing.d.ts +0 -0
- /package/components/{Futures → Features}/index.d.ts +0 -0
- /package/components/{Futures → Features}/index.js +0 -0
- /package/{helpers → types}/BoundTypes.js +0 -0
package/helpers/index.d.ts
CHANGED
package/helpers/index.js
CHANGED
|
@@ -14,9 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.registeredDialogs = exports.InitDialogMemoizeBoundsDeclared = exports.InitDialogMemoizeBounds = void 0;
|
|
17
|
+
exports.formInputKeyListeners = exports.registeredDialogs = exports.InitDialogMemoizeBoundsDeclared = exports.InitDialogMemoizeBounds = void 0;
|
|
18
18
|
var initDialogMemoizeBounds_1 = require("./initDialogMemoizeBounds");
|
|
19
19
|
Object.defineProperty(exports, "InitDialogMemoizeBounds", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBounds; } });
|
|
20
20
|
Object.defineProperty(exports, "InitDialogMemoizeBoundsDeclared", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBoundsDeclared; } });
|
|
21
21
|
Object.defineProperty(exports, "registeredDialogs", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.registeredDialogs; } });
|
|
22
22
|
__exportStar(require("./dialogBoundsMemoize"), exports);
|
|
23
|
+
var formInputKeyListeners_1 = require("./formInputKeyListeners");
|
|
24
|
+
Object.defineProperty(exports, "formInputKeyListeners", { enumerable: true, get: function () { return formInputKeyListeners_1.formInputKeyListeners; } });
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare let registeredDialogs:
|
|
1
|
+
import { IDialogBoundsMemoKey, RegisteredDialogsMap } from "../types/BoundTypes";
|
|
2
|
+
export declare let registeredDialogs: RegisteredDialogsMap;
|
|
3
3
|
export declare let InitDialogMemoizeBoundsDeclared: boolean;
|
|
4
4
|
export declare const BOUNDS_STORE_KEY: IDialogBoundsMemoKey;
|
|
5
|
+
/**
|
|
6
|
+
* Fire by first load the page
|
|
7
|
+
* This should be in App level
|
|
8
|
+
* Create first records
|
|
9
|
+
* */
|
|
5
10
|
export declare const InitDialogMemoizeBounds: () => void;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.InitDialogMemoizeBounds = exports.BOUNDS_STORE_KEY = exports.InitDialogMemoizeBoundsDeclared = exports.registeredDialogs = void 0;
|
|
4
|
-
//
|
|
5
|
-
exports.registeredDialogs =
|
|
4
|
+
// export let registeredDialogs: IDialogBoundDef[] = [];
|
|
5
|
+
exports.registeredDialogs = new Map();
|
|
6
6
|
exports.InitDialogMemoizeBoundsDeclared = false;
|
|
7
7
|
exports.BOUNDS_STORE_KEY = 'react-super-dialog';
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Fire by first load the page
|
|
10
|
+
* This should be in App level
|
|
11
|
+
* Create first records
|
|
12
|
+
* */
|
|
10
13
|
var InitDialogMemoizeBounds = function () {
|
|
11
14
|
var boundStoreExists = function () {
|
|
12
15
|
try {
|
|
@@ -17,22 +20,24 @@ var InitDialogMemoizeBounds = function () {
|
|
|
17
20
|
}
|
|
18
21
|
};
|
|
19
22
|
var createBoundStore = function () {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
console.log(e);
|
|
26
|
-
}
|
|
23
|
+
try {
|
|
24
|
+
window.localStorage.setItem(exports.BOUNDS_STORE_KEY, JSON.stringify([]));
|
|
25
|
+
}
|
|
26
|
+
catch (e) {
|
|
27
|
+
console.log(e);
|
|
27
28
|
}
|
|
28
29
|
};
|
|
29
30
|
var readFromStore = function () {
|
|
30
|
-
|
|
31
|
+
if (!boundStoreExists) {
|
|
32
|
+
createBoundStore();
|
|
33
|
+
}
|
|
31
34
|
var boundsRaw = window.localStorage.getItem(exports.BOUNDS_STORE_KEY);
|
|
35
|
+
// console.log('boundsRaw', boundStoreExists, JSON.parse(boundsRaw));
|
|
32
36
|
var boundsArray = boundsRaw ? JSON.parse(boundsRaw) : [];
|
|
33
|
-
|
|
37
|
+
console.log('readFromStore-0', boundsArray);
|
|
38
|
+
return new Map(boundsArray.map(function (d) { return [d[0], d[1]]; }));
|
|
34
39
|
};
|
|
35
|
-
console.log('readFromStore', readFromStore());
|
|
40
|
+
console.log('readFromStore', window.localStorage.getItem(exports.BOUNDS_STORE_KEY), readFromStore());
|
|
36
41
|
// Set this on App level
|
|
37
42
|
exports.registeredDialogs = readFromStore();
|
|
38
43
|
exports.InitDialogMemoizeBoundsDeclared = true;
|
package/index.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import './styles/dialog.scss';
|
|
2
2
|
import './styles/dialog.action.scss';
|
|
3
3
|
import './styles/circular-progress.scss';
|
|
4
|
-
export { default as Dialog } from "./models/Dialog";
|
|
5
4
|
export { default } from "./models/Dialog";
|
|
6
|
-
export { DialogProcessing, DialogCloseAction, DialogFullscreenAction, DialogHeaderActionsWrapper, DialogInfoAction } from "./components/
|
|
7
|
-
export { DialogAction, ActionProgress } from "./models
|
|
8
|
-
export { useDialogOptions } from "./hooks/useDialogOptions";
|
|
5
|
+
export { DialogProcessing, DialogCloseAction, DialogFullscreenAction, DialogHeaderActionsWrapper, DialogInfoAction } from "./components/Features";
|
|
6
|
+
export { DialogAction, ActionProgress, baseDialogOptions } from "./models";
|
|
9
7
|
export { InitDialogMemoizeBounds } from "./helpers/initDialogMemoizeBounds";
|
|
8
|
+
export { IDialogApiDef } from './types/DialogTypes';
|
package/index.js
CHANGED
|
@@ -3,26 +3,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.InitDialogMemoizeBounds = exports.
|
|
6
|
+
exports.InitDialogMemoizeBounds = exports.baseDialogOptions = exports.ActionProgress = exports.DialogAction = exports.DialogInfoAction = exports.DialogHeaderActionsWrapper = exports.DialogFullscreenAction = exports.DialogCloseAction = exports.DialogProcessing = exports.default = void 0;
|
|
7
7
|
require("./styles/dialog.css");
|
|
8
8
|
require("./styles/dialog.action.css");
|
|
9
9
|
require("./styles/circular-progress.css");
|
|
10
10
|
// Models
|
|
11
11
|
var Dialog_1 = require("./models/Dialog");
|
|
12
|
-
Object.defineProperty(exports, "
|
|
13
|
-
var
|
|
14
|
-
Object.defineProperty(exports, "
|
|
15
|
-
|
|
16
|
-
Object.defineProperty(exports, "
|
|
17
|
-
Object.defineProperty(exports, "
|
|
18
|
-
Object.defineProperty(exports, "
|
|
19
|
-
|
|
20
|
-
Object.defineProperty(exports, "
|
|
21
|
-
|
|
22
|
-
Object.defineProperty(exports, "
|
|
23
|
-
Object.defineProperty(exports, "ActionProgress", { enumerable: true, get: function () { return DialogAction_1.ActionProgress; } });
|
|
12
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Dialog_1).default; } });
|
|
13
|
+
var Features_1 = require("./components/Features");
|
|
14
|
+
Object.defineProperty(exports, "DialogProcessing", { enumerable: true, get: function () { return Features_1.DialogProcessing; } });
|
|
15
|
+
Object.defineProperty(exports, "DialogCloseAction", { enumerable: true, get: function () { return Features_1.DialogCloseAction; } });
|
|
16
|
+
Object.defineProperty(exports, "DialogFullscreenAction", { enumerable: true, get: function () { return Features_1.DialogFullscreenAction; } });
|
|
17
|
+
Object.defineProperty(exports, "DialogHeaderActionsWrapper", { enumerable: true, get: function () { return Features_1.DialogHeaderActionsWrapper; } });
|
|
18
|
+
Object.defineProperty(exports, "DialogInfoAction", { enumerable: true, get: function () { return Features_1.DialogInfoAction; } });
|
|
19
|
+
var models_1 = require("./models");
|
|
20
|
+
Object.defineProperty(exports, "DialogAction", { enumerable: true, get: function () { return models_1.DialogAction; } });
|
|
21
|
+
Object.defineProperty(exports, "ActionProgress", { enumerable: true, get: function () { return models_1.ActionProgress; } });
|
|
22
|
+
Object.defineProperty(exports, "baseDialogOptions", { enumerable: true, get: function () { return models_1.baseDialogOptions; } });
|
|
24
23
|
// Hooks
|
|
25
|
-
var useDialogOptions_1 = require("./hooks/useDialogOptions");
|
|
26
|
-
Object.defineProperty(exports, "useDialogOptions", { enumerable: true, get: function () { return useDialogOptions_1.useDialogOptions; } });
|
|
27
24
|
var initDialogMemoizeBounds_1 = require("./helpers/initDialogMemoizeBounds");
|
|
28
25
|
Object.defineProperty(exports, "InitDialogMemoizeBounds", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBounds; } });
|
package/models/Dialog.d.ts
CHANGED
|
@@ -1,47 +1,42 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { DialogAction } from "./DialogAction";
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
import { TInitialHolder, DialogValues } from "../types/types";
|
|
4
|
+
import { IDialogSize, TDialogStateListenerCallbackType, DialogOptionsType, IDialogApiDef, TDialogCallbackVoidFn, TDialogCallbackFn } from "../types/DialogTypes";
|
|
5
|
+
interface DialogProps {
|
|
6
|
+
setHeader(header: TDialogCallbackFn): Dialog;
|
|
7
|
+
}
|
|
8
|
+
declare class Dialog implements DialogProps {
|
|
9
|
+
private _processingListener;
|
|
10
|
+
private _stateListener;
|
|
11
|
+
private _keyboardListener;
|
|
12
|
+
private _resizeListener;
|
|
13
|
+
private _initialHolder;
|
|
14
|
+
private _header;
|
|
15
|
+
private _body;
|
|
16
|
+
private _actions;
|
|
17
|
+
private _dialogSize;
|
|
18
|
+
private readonly _dialogOptions?;
|
|
19
|
+
private _snackbarAnchor;
|
|
20
|
+
private _initialValues;
|
|
21
|
+
private _headerRef;
|
|
22
|
+
private readonly _apiRef;
|
|
23
|
+
private _onCloseCallback;
|
|
24
|
+
constructor(dialogRef?: React.RefObject<IDialogApiDef | undefined | null> | null, options?: DialogOptionsType);
|
|
25
|
+
setHeader(header: TDialogCallbackFn): this;
|
|
26
|
+
setBody(body: TDialogCallbackFn): this;
|
|
18
27
|
addActions(actions: Array<DialogAction>): this;
|
|
19
28
|
addAction(action: DialogAction): this;
|
|
20
29
|
/**
|
|
21
30
|
* Only from init */
|
|
22
31
|
stateListener(listener: TDialogStateListenerCallbackType): this;
|
|
23
|
-
|
|
24
|
-
setSize: (size: IDialogSize) => this;
|
|
25
|
-
/**
|
|
26
|
-
* @deprecated
|
|
27
|
-
* @info Dialog ordering after of before Reference Dom Element
|
|
28
|
-
* This method is deprecated and will be removed in a future release.
|
|
29
|
-
* Please use an alternative approach for setting dialog ordering or layout.
|
|
30
|
-
* The dialog ordering functionality will be managed differently in future versions.
|
|
31
|
-
*/
|
|
32
|
-
setOrder: (position: ComponentOrderPositions, component: HTMLElement) => this;
|
|
33
|
-
/**
|
|
34
|
-
* @deprecated
|
|
35
|
-
* @link initialValues */
|
|
36
|
-
initialState(state: {
|
|
37
|
-
[k: string]: any;
|
|
38
|
-
}): this;
|
|
32
|
+
processingListener(listener: (inProcess: boolean) => void): this;
|
|
39
33
|
initialValues(values: DialogValues): this;
|
|
40
34
|
initialHolder(holder: TInitialHolder): this;
|
|
41
|
-
|
|
35
|
+
keyboardListener(listener: (key: string, dialog: IDialogApiDef) => void): this;
|
|
36
|
+
resizeListener(listener: (size: IDialogSize, dialog: IDialogApiDef) => void): this;
|
|
42
37
|
onClose(callback: TDialogCallbackVoidFn): this;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
show
|
|
38
|
+
private highestZ;
|
|
39
|
+
private createDom;
|
|
40
|
+
show(callback?: TDialogCallbackVoidFn): void;
|
|
46
41
|
}
|
|
47
42
|
export default Dialog;
|
package/models/Dialog.js
CHANGED
|
@@ -1,128 +1,122 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
8
37
|
};
|
|
9
|
-
return function (
|
|
10
|
-
if (
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
15
44
|
};
|
|
16
45
|
})();
|
|
17
46
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
47
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
48
|
};
|
|
20
49
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
var React = __importStar(require("react"));
|
|
21
51
|
var DialogBase_1 = __importDefault(require("../components/DialogBase"));
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
// This property holds a callback function that listens to state changes within the dialog. It is used to track or respond to changes in dialog state.
|
|
25
|
-
// private _stateListener: TDialogStateListenerCallbackType;
|
|
26
|
-
// This property stores the initial state of the dialog, which could include default settings or values before any interactions.
|
|
27
|
-
// private _initialState: TBaseDialogState;
|
|
28
|
-
// private _initialValues: TInitialValues<any>;
|
|
29
|
-
// This property represents the initial holder of the dialog. It is used before the dialog is shown, typically to manage resources or prepare the dialog for display (like loading animations or initial data).
|
|
30
|
-
// private _initialHolder: TInitialHolder;
|
|
31
|
-
// This property indicates where the dialog is accessed from, such as from a button or menu item, providing context about its origin.
|
|
32
|
-
// private _accessFrom: TAccessFrom;
|
|
33
|
-
// This property refers to the DOM element that will represent the dialog container on the web page. It is a `div` element dynamically created when the dialog is displayed.
|
|
34
|
-
// private _dom: HTMLDivElement;
|
|
35
|
-
// This property holds a function to handle keyboard events. It listens for key presses and performs actions based on the key and the current state of the dialog.
|
|
36
|
-
// private _keyboardListener: (key: string, dialog: Dialog) => void;
|
|
37
|
-
// This is a React reference (`RefObject`) used to access the dialog instance or DOM element directly within React components. It provides a way to interact with the DOM element programmatically without triggering re-renders.
|
|
38
|
-
// private readonly _innerRef: React.RefObject<any>;
|
|
39
|
-
// initialValues = ( values: T ): this => {
|
|
40
|
-
// this._initialValues = values;
|
|
41
|
-
// return this;
|
|
42
|
-
// }
|
|
52
|
+
var client_1 = require("react-dom/client");
|
|
53
|
+
var Dialog = /** @class */ (function () {
|
|
43
54
|
function Dialog(dialogRef, options) {
|
|
44
|
-
var _this =
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
55
|
+
var _this = this;
|
|
56
|
+
this._headerRef = React.createRef();
|
|
57
|
+
this.highestZ = function () {
|
|
58
|
+
var presentationElements = document.querySelectorAll('div[data-family="presentation"]');
|
|
59
|
+
var highest = 1201;
|
|
60
|
+
presentationElements.forEach(function (element) {
|
|
61
|
+
var z = parseInt(window.getComputedStyle(element).zIndex, 10);
|
|
62
|
+
if (!isNaN(z) && z > highest) {
|
|
63
|
+
highest = z;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
return highest + 1;
|
|
49
67
|
};
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
68
|
+
this.createDom = function () {
|
|
69
|
+
console.log('this._actions', _this._actions);
|
|
70
|
+
var dom = document.createElement('div');
|
|
71
|
+
dom.setAttribute('role', 'presentation');
|
|
72
|
+
dom.setAttribute('data-type', 'dialog');
|
|
73
|
+
dom.setAttribute('data-family', 'presentation');
|
|
74
|
+
dom.classList.add('react-guzzle-root');
|
|
75
|
+
dom.style.setProperty('z-index', String(_this.highestZ()));
|
|
76
|
+
// Find root element
|
|
77
|
+
var rootElement = document.getElementById('root');
|
|
78
|
+
// const AppElement = rootElement.firstElementChild;
|
|
79
|
+
if (rootElement) {
|
|
80
|
+
rootElement.appendChild(dom);
|
|
81
|
+
// AppElement.prepend(this._dom);
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
document.body.appendChild(dom);
|
|
85
|
+
}
|
|
86
|
+
return dom;
|
|
66
87
|
};
|
|
67
88
|
if (dialogRef) {
|
|
68
|
-
|
|
89
|
+
this._apiRef = dialogRef;
|
|
69
90
|
}
|
|
70
91
|
if (options) {
|
|
71
|
-
|
|
92
|
+
this._dialogOptions = options;
|
|
72
93
|
}
|
|
73
|
-
return _this;
|
|
74
94
|
}
|
|
75
|
-
/**
|
|
76
|
-
* @deprecated
|
|
77
|
-
* @see dialogOptions.snackbar.anchorOrigin */
|
|
78
|
-
Dialog.prototype.snackbarAnchor = function (anchor) {
|
|
79
|
-
this._snackbarAnchor = anchor;
|
|
80
|
-
return this;
|
|
81
|
-
};
|
|
82
|
-
Object.defineProperty(Dialog.prototype, "accessFrom", {
|
|
83
|
-
get: function () {
|
|
84
|
-
return this._accessFrom;
|
|
85
|
-
},
|
|
86
|
-
set: function (accessFrom) {
|
|
87
|
-
this._accessFrom = accessFrom;
|
|
88
|
-
},
|
|
89
|
-
enumerable: false,
|
|
90
|
-
configurable: true
|
|
91
|
-
});
|
|
92
95
|
Dialog.prototype.setHeader = function (header) {
|
|
93
|
-
|
|
96
|
+
this._header = header;
|
|
94
97
|
return this;
|
|
95
98
|
};
|
|
96
|
-
// setBody = ( body: CallbackFn['NodeFn'] ): Dialog => {
|
|
97
99
|
Dialog.prototype.setBody = function (body) {
|
|
98
|
-
|
|
99
|
-
return this;
|
|
100
|
-
};
|
|
101
|
-
Dialog.prototype.setFormik = function (formik) {
|
|
102
|
-
this.formikProps = formik;
|
|
100
|
+
this._body = body;
|
|
103
101
|
return this;
|
|
104
102
|
};
|
|
105
103
|
Dialog.prototype.addActions = function (actions) {
|
|
106
|
-
|
|
104
|
+
this._actions = actions;
|
|
107
105
|
return this;
|
|
108
106
|
};
|
|
109
107
|
Dialog.prototype.addAction = function (action) {
|
|
110
|
-
|
|
108
|
+
this._actions.push(action);
|
|
111
109
|
return this;
|
|
112
110
|
};
|
|
113
111
|
/**
|
|
114
112
|
* Only from init */
|
|
115
113
|
Dialog.prototype.stateListener = function (listener) {
|
|
116
|
-
|
|
114
|
+
this._stateListener = listener;
|
|
117
115
|
return this;
|
|
118
116
|
};
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
// initialState = ( state: TBaseDialogState ): this => {
|
|
123
|
-
Dialog.prototype.initialState = function (state) {
|
|
124
|
-
console.warn('Dialog Warning', 'initialState not more supported, replace this with initialValues');
|
|
125
|
-
this._initialState = state;
|
|
117
|
+
Dialog.prototype.processingListener = function (listener) {
|
|
118
|
+
// @ts-ignore
|
|
119
|
+
this._processingListener = listener;
|
|
126
120
|
return this;
|
|
127
121
|
};
|
|
128
122
|
Dialog.prototype.initialValues = function (values) {
|
|
@@ -130,21 +124,40 @@ var Dialog = /** @class */ (function (_super) {
|
|
|
130
124
|
return this;
|
|
131
125
|
};
|
|
132
126
|
Dialog.prototype.initialHolder = function (holder) {
|
|
133
|
-
|
|
134
|
-
return this;
|
|
135
|
-
};
|
|
136
|
-
Dialog.prototype.onClose = function (callback) {
|
|
137
|
-
_super.prototype.onClose.call(this, callback);
|
|
127
|
+
this._initialHolder = holder;
|
|
138
128
|
return this;
|
|
139
129
|
};
|
|
140
130
|
Dialog.prototype.keyboardListener = function (listener) {
|
|
141
|
-
|
|
131
|
+
this._keyboardListener = listener;
|
|
142
132
|
return this;
|
|
143
133
|
};
|
|
144
134
|
Dialog.prototype.resizeListener = function (listener) {
|
|
145
|
-
|
|
135
|
+
this._resizeListener = listener;
|
|
146
136
|
return this;
|
|
147
137
|
};
|
|
138
|
+
Dialog.prototype.onClose = function (callback) {
|
|
139
|
+
this._onCloseCallback = callback;
|
|
140
|
+
return this;
|
|
141
|
+
};
|
|
142
|
+
Dialog.prototype.show = function (callback) {
|
|
143
|
+
var dom = this.createDom();
|
|
144
|
+
var root = (0, client_1.createRoot)(dom);
|
|
145
|
+
var props = __assign(__assign({
|
|
146
|
+
// Initials
|
|
147
|
+
initialOptions: this._dialogOptions, initialValues: this._initialValues, didMountCallback: callback,
|
|
148
|
+
// Component contents
|
|
149
|
+
header: this._header, body: this._body, actions: this._actions,
|
|
150
|
+
// Refs
|
|
151
|
+
headerRef: this._headerRef,
|
|
152
|
+
// Listeners
|
|
153
|
+
stateListener: this._stateListener, keyboardListener: this._keyboardListener, resizeListener: this._resizeListener,
|
|
154
|
+
// Others
|
|
155
|
+
dialogSize: this._dialogSize, initialHolder: this._initialHolder, snackbarAnchor: this._snackbarAnchor, root: root, dom: dom, parent: this }, this._apiRef ? { ref: this._apiRef } : null), { onClose: this._onCloseCallback });
|
|
156
|
+
// @ts-ignore
|
|
157
|
+
root.render(React.createElement(DialogBase_1.default, props));
|
|
158
|
+
};
|
|
148
159
|
return Dialog;
|
|
149
|
-
}(
|
|
160
|
+
}());
|
|
150
161
|
exports.default = Dialog;
|
|
162
|
+
// const dialog = new Dialog();
|
|
163
|
+
// dialog.
|
package/models/DialogAction.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TDialogStateListenerForActionCallbackType, DialogActionOptionsType,
|
|
1
|
+
import { TDialogStateListenerForActionCallbackType, DialogActionOptionsType, DialogActionType } from "../types/DialogActionTypes";
|
|
2
2
|
import DialogActionBase from "../components/DialogActionBase";
|
|
3
3
|
declare const ActionProgress: () => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export { ActionProgress };
|
|
@@ -7,47 +7,9 @@ declare class DialogAction extends DialogActionBase {
|
|
|
7
7
|
setOptions: (options: DialogActionOptionsType) => this;
|
|
8
8
|
get options(): DialogActionOptionsType;
|
|
9
9
|
get name(): string;
|
|
10
|
-
/**
|
|
11
|
-
* @deprecated
|
|
12
|
-
* @see DialogActionOptionsType
|
|
13
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
14
|
-
setLabel: (label: string) => DialogAction;
|
|
15
|
-
getLabel: () => string;
|
|
16
10
|
onClick: (callback: DialogActionType) => this;
|
|
17
|
-
/**
|
|
18
|
-
* @deprecated
|
|
19
|
-
* @see onClickHandler */
|
|
20
|
-
getAction(): DialogActionType;
|
|
21
|
-
/**
|
|
22
|
-
* @deprecated
|
|
23
|
-
* @see DialogActionOptionsType
|
|
24
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
25
|
-
setVariant: (variant: TBVariant) => this;
|
|
26
|
-
getVariant: () => TBVariant;
|
|
27
|
-
/**
|
|
28
|
-
* @deprecated
|
|
29
|
-
* @see DialogActionOptionsType
|
|
30
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
31
|
-
setColor: (color: TBColor) => this;
|
|
32
|
-
getColor: () => TBColor;
|
|
33
11
|
/**
|
|
34
12
|
* Only from init */
|
|
35
13
|
stateListener: (listener: TDialogStateListenerForActionCallbackType) => this;
|
|
36
|
-
set baseDialogAction(baseDialogAction: DialogActionBase);
|
|
37
|
-
setInProcess: (inProcess: ActionProps["inProcess"]) => this;
|
|
38
|
-
/**
|
|
39
|
-
* @deprecated
|
|
40
|
-
* @see isInProcess*/
|
|
41
|
-
getInProcess: () => boolean;
|
|
42
|
-
isInProcess: () => boolean;
|
|
43
|
-
/**
|
|
44
|
-
* @deprecated
|
|
45
|
-
* @see DialogActionOptionsType
|
|
46
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
47
|
-
setDisabled: (disabled: boolean) => this;
|
|
48
|
-
getDisabled: () => boolean;
|
|
49
|
-
isDisabled: () => boolean;
|
|
50
|
-
remove: () => void;
|
|
51
|
-
click: () => void;
|
|
52
14
|
}
|
|
53
15
|
export { DialogAction };
|