react-dialogger 1.1.48 → 1.1.49
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 +101 -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 +29 -36
- package/models/Dialog.js +108 -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/models/DialogAction.js
CHANGED
|
@@ -32,9 +32,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
32
32
|
exports.DialogAction = exports.ActionProgress = void 0;
|
|
33
33
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
34
34
|
var DialogActionBase_1 = __importDefault(require("../components/DialogActionBase"));
|
|
35
|
-
var
|
|
35
|
+
var components_1 = require("../components");
|
|
36
36
|
var ActionProgress = function () {
|
|
37
|
-
return (0, jsx_runtime_1.jsx)(
|
|
37
|
+
return (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { size: 20, inProcess: { inProcess: true } });
|
|
38
38
|
};
|
|
39
39
|
exports.ActionProgress = ActionProgress;
|
|
40
40
|
var DialogAction = /** @class */ (function (_super) {
|
|
@@ -42,168 +42,19 @@ var DialogAction = /** @class */ (function (_super) {
|
|
|
42
42
|
function DialogAction(name, options) {
|
|
43
43
|
var _this = _super.call(this) || this;
|
|
44
44
|
_this.setOptions = function (options) {
|
|
45
|
-
var _a;
|
|
46
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
47
|
-
_this._baseDialogAction.setOptions(options);
|
|
48
|
-
return _this;
|
|
49
|
-
}
|
|
50
|
-
// this._label = label;
|
|
51
45
|
_this._options = options;
|
|
52
46
|
return _this;
|
|
53
47
|
};
|
|
54
|
-
/**
|
|
55
|
-
* @deprecated
|
|
56
|
-
* @see DialogActionOptionsType
|
|
57
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
58
|
-
_this.setLabel = function (label) {
|
|
59
|
-
var _a;
|
|
60
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
61
|
-
_this._baseDialogAction.setLabel(label);
|
|
62
|
-
return _this;
|
|
63
|
-
}
|
|
64
|
-
if (_this._options) {
|
|
65
|
-
_this._options.label = label; // _options'ın başlatıldığını varsayarak erişim
|
|
66
|
-
}
|
|
67
|
-
else {
|
|
68
|
-
console.error('DialogAction _options is not initialized');
|
|
69
|
-
}
|
|
70
|
-
return _this;
|
|
71
|
-
};
|
|
72
|
-
_this.getLabel = function () {
|
|
73
|
-
var _a;
|
|
74
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
75
|
-
return _this._baseDialogAction.getLabel();
|
|
76
|
-
}
|
|
77
|
-
return _this._options.label;
|
|
78
|
-
};
|
|
79
48
|
_this.onClick = function (callback) {
|
|
80
49
|
_super.prototype.onClick.call(_this, callback);
|
|
81
50
|
return _this;
|
|
82
51
|
};
|
|
83
|
-
/**
|
|
84
|
-
* @deprecated
|
|
85
|
-
* @see DialogActionOptionsType
|
|
86
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
87
|
-
_this.setVariant = function (variant) {
|
|
88
|
-
var _a;
|
|
89
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
90
|
-
_this._baseDialogAction.setVariant(variant);
|
|
91
|
-
return _this;
|
|
92
|
-
}
|
|
93
|
-
if (_this._options) {
|
|
94
|
-
_this._options.variant = variant; // _options'ın başlatıldığını varsayarak erişim
|
|
95
|
-
}
|
|
96
|
-
else {
|
|
97
|
-
console.error('DialogAction _options is not initialized');
|
|
98
|
-
}
|
|
99
|
-
return _this;
|
|
100
|
-
};
|
|
101
|
-
_this.getVariant = function () {
|
|
102
|
-
var _a;
|
|
103
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
104
|
-
return _this._baseDialogAction.getVariant();
|
|
105
|
-
}
|
|
106
|
-
return _this._options.variant;
|
|
107
|
-
};
|
|
108
|
-
/**
|
|
109
|
-
* @deprecated
|
|
110
|
-
* @see DialogActionOptionsType
|
|
111
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
112
|
-
_this.setColor = function (color) {
|
|
113
|
-
var _a;
|
|
114
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
115
|
-
_this._baseDialogAction.setColor(color);
|
|
116
|
-
return _this;
|
|
117
|
-
}
|
|
118
|
-
if (_this._options) {
|
|
119
|
-
_this._options.color = color; // _options'ın başlatıldığını varsayarak erişim
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
console.error('DialogAction _options is not initialized');
|
|
123
|
-
}
|
|
124
|
-
return _this;
|
|
125
|
-
};
|
|
126
|
-
_this.getColor = function () {
|
|
127
|
-
var _a;
|
|
128
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
129
|
-
return _this._baseDialogAction.getColor();
|
|
130
|
-
}
|
|
131
|
-
return _this._options.color;
|
|
132
|
-
};
|
|
133
52
|
/**
|
|
134
53
|
* Only from init */
|
|
135
54
|
_this.stateListener = function (listener) {
|
|
136
55
|
_this._stateListener = listener;
|
|
137
56
|
return _this;
|
|
138
57
|
};
|
|
139
|
-
_this.setInProcess = function (inProcess) {
|
|
140
|
-
var _a;
|
|
141
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
142
|
-
_this._baseDialogAction.setInProcess(inProcess);
|
|
143
|
-
return _this;
|
|
144
|
-
}
|
|
145
|
-
_this._inProcess = inProcess;
|
|
146
|
-
return _this;
|
|
147
|
-
};
|
|
148
|
-
/**
|
|
149
|
-
* @deprecated
|
|
150
|
-
* @see isInProcess*/
|
|
151
|
-
_this.getInProcess = function () {
|
|
152
|
-
var _a;
|
|
153
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
154
|
-
return _this._baseDialogAction.isInProcess();
|
|
155
|
-
}
|
|
156
|
-
return _this._inProcess;
|
|
157
|
-
};
|
|
158
|
-
_this.isInProcess = function () {
|
|
159
|
-
var _a;
|
|
160
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
161
|
-
return _this._baseDialogAction.isInProcess();
|
|
162
|
-
}
|
|
163
|
-
return _this._inProcess;
|
|
164
|
-
};
|
|
165
|
-
/**
|
|
166
|
-
* @deprecated
|
|
167
|
-
* @see DialogActionOptionsType
|
|
168
|
-
* @info Define this prop inside new DialogAction('varName', {>here<})*/
|
|
169
|
-
_this.setDisabled = function (disabled) {
|
|
170
|
-
var _a, _b;
|
|
171
|
-
console.error('DialogAction _options is not initialized', (_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom);
|
|
172
|
-
if (((_b = _this._baseDialogAction) === null || _b === void 0 ? void 0 : _b.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
173
|
-
_this._baseDialogAction.setDisabled(disabled);
|
|
174
|
-
return _this;
|
|
175
|
-
}
|
|
176
|
-
if (_this._options) {
|
|
177
|
-
_this._options.disabled = disabled; // _options'ın başlatıldığını varsayarak erişim
|
|
178
|
-
}
|
|
179
|
-
else {
|
|
180
|
-
console.error('DialogAction _options is not initialized');
|
|
181
|
-
}
|
|
182
|
-
return _this;
|
|
183
|
-
};
|
|
184
|
-
_this.getDisabled = function () {
|
|
185
|
-
var _a;
|
|
186
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
187
|
-
return _this._baseDialogAction.getDisabled();
|
|
188
|
-
}
|
|
189
|
-
return _this._options.disabled;
|
|
190
|
-
};
|
|
191
|
-
_this.isDisabled = function () {
|
|
192
|
-
var _a;
|
|
193
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
194
|
-
return _this._baseDialogAction.isDisabled();
|
|
195
|
-
}
|
|
196
|
-
return _this._options.disabled;
|
|
197
|
-
};
|
|
198
|
-
_this.remove = function () {
|
|
199
|
-
var _a;
|
|
200
|
-
if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
201
|
-
_this._baseDialogAction.remove();
|
|
202
|
-
}
|
|
203
|
-
};
|
|
204
|
-
_this.click = function () {
|
|
205
|
-
_this._baseDialogAction.click();
|
|
206
|
-
};
|
|
207
58
|
_this._name = name;
|
|
208
59
|
var defaultOptions = {
|
|
209
60
|
label: 'Button',
|
|
@@ -217,10 +68,6 @@ var DialogAction = /** @class */ (function (_super) {
|
|
|
217
68
|
}
|
|
218
69
|
Object.defineProperty(DialogAction.prototype, "options", {
|
|
219
70
|
get: function () {
|
|
220
|
-
var _a;
|
|
221
|
-
if (((_a = this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
|
|
222
|
-
return this._baseDialogAction.options;
|
|
223
|
-
}
|
|
224
71
|
return this._options;
|
|
225
72
|
},
|
|
226
73
|
enumerable: false,
|
|
@@ -233,22 +80,6 @@ var DialogAction = /** @class */ (function (_super) {
|
|
|
233
80
|
enumerable: false,
|
|
234
81
|
configurable: true
|
|
235
82
|
});
|
|
236
|
-
/**
|
|
237
|
-
* @deprecated
|
|
238
|
-
* @see onClickHandler */
|
|
239
|
-
DialogAction.prototype.getAction = function () {
|
|
240
|
-
return this._onClick;
|
|
241
|
-
};
|
|
242
|
-
Object.defineProperty(DialogAction.prototype, "baseDialogAction", {
|
|
243
|
-
// getStateListener(): TDialogStateListenerForActionCallbackType {
|
|
244
|
-
// return super.getStateListener();
|
|
245
|
-
// }
|
|
246
|
-
set: function (baseDialogAction) {
|
|
247
|
-
this._baseDialogAction = baseDialogAction;
|
|
248
|
-
},
|
|
249
|
-
enumerable: false,
|
|
250
|
-
configurable: true
|
|
251
|
-
});
|
|
252
83
|
return DialogAction;
|
|
253
84
|
}(DialogActionBase_1.default));
|
|
254
85
|
exports.DialogAction = DialogAction;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.baseDialogOptions = void 0;
|
|
15
|
+
/**
|
|
16
|
+
* BASE (immutable template)
|
|
17
|
+
*/
|
|
18
|
+
var BASE_DIALOG_OPTIONS = {
|
|
19
|
+
backdrop: {
|
|
20
|
+
backgroundColor: "#282828",
|
|
21
|
+
opacity: 0.6,
|
|
22
|
+
hideOnClick: false,
|
|
23
|
+
},
|
|
24
|
+
base: {
|
|
25
|
+
style: {
|
|
26
|
+
backgroundColor: "white",
|
|
27
|
+
boxShadow: "0 0 20px #000000",
|
|
28
|
+
},
|
|
29
|
+
closeable: false,
|
|
30
|
+
about: false,
|
|
31
|
+
initialAnchor: { vertical: "flex-start", horizontal: "center" },
|
|
32
|
+
draggable: false,
|
|
33
|
+
size: { width: 'min-content', height: 300 }
|
|
34
|
+
},
|
|
35
|
+
animate: 'none',
|
|
36
|
+
progress: {
|
|
37
|
+
color: "red",
|
|
38
|
+
size: 30,
|
|
39
|
+
},
|
|
40
|
+
snackbar: {
|
|
41
|
+
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
42
|
+
autoHideDuration: 3000,
|
|
43
|
+
maxSnack: 3,
|
|
44
|
+
busyMessage: "Please wait...",
|
|
45
|
+
},
|
|
46
|
+
slot: {
|
|
47
|
+
action: undefined,
|
|
48
|
+
},
|
|
49
|
+
slotProps: {
|
|
50
|
+
action: {},
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
window["dialogOptions"] = structuredClone(BASE_DIALOG_OPTIONS);
|
|
54
|
+
/**
|
|
55
|
+
* Deep + safe merge
|
|
56
|
+
*/
|
|
57
|
+
var baseDialogOptions = function (options) {
|
|
58
|
+
var _a, _b;
|
|
59
|
+
if (options === void 0) { options = {}; }
|
|
60
|
+
var base = structuredClone(BASE_DIALOG_OPTIONS);
|
|
61
|
+
window["dialogOptions"] = __assign(__assign(__assign({}, base), options), { backdrop: __assign(__assign({}, base.backdrop), options.backdrop), base: __assign(__assign(__assign({}, base.base), options.base), { style: __assign(__assign({}, base.base.style), (_a = options.base) === null || _a === void 0 ? void 0 : _a.style) }), progress: __assign(__assign({}, base.progress), options.progress), snackbar: __assign(__assign(__assign({}, base.snackbar), options.snackbar), { anchorOrigin: __assign(__assign({}, base.snackbar.anchorOrigin), (_b = options.snackbar) === null || _b === void 0 ? void 0 : _b.anchorOrigin) }), slot: __assign(__assign({}, base.slot), options.slot), slotProps: __assign(__assign({}, base.slotProps), options.slotProps) });
|
|
62
|
+
};
|
|
63
|
+
exports.baseDialogOptions = baseDialogOptions;
|
package/models/index.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.baseDialogOptions = exports.default = exports.ActionProgress = exports.DialogAction = void 0;
|
|
7
|
+
var DialogAction_1 = require("./DialogAction");
|
|
8
|
+
Object.defineProperty(exports, "DialogAction", { enumerable: true, get: function () { return DialogAction_1.DialogAction; } });
|
|
9
|
+
Object.defineProperty(exports, "ActionProgress", { enumerable: true, get: function () { return DialogAction_1.ActionProgress; } });
|
|
10
|
+
var Dialog_1 = require("./Dialog");
|
|
11
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Dialog_1).default; } });
|
|
12
|
+
var baseDialogOptions_1 = require("./baseDialogOptions");
|
|
13
|
+
Object.defineProperty(exports, "baseDialogOptions", { enumerable: true, get: function () { return baseDialogOptions_1.baseDialogOptions; } });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-dialogger",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.49",
|
|
4
4
|
"description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "Sueleyman Topaloglu",
|
package/styles/dialog.css
CHANGED
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
width: 100%;
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
|
-
.
|
|
176
|
+
.react-guzzle-root {
|
|
177
177
|
position: fixed;
|
|
178
178
|
right: 0;
|
|
179
179
|
bottom: 0;
|
|
@@ -248,7 +248,6 @@
|
|
|
248
248
|
color: #CCCCCC;
|
|
249
249
|
}
|
|
250
250
|
.dialog-main .dialog-header .fullscreen-icon-wrapper {
|
|
251
|
-
display: flex;
|
|
252
251
|
justify-items: center;
|
|
253
252
|
align-items: center;
|
|
254
253
|
cursor: pointer;
|
|
@@ -4,8 +4,11 @@ export interface IDialogBoundsDef {
|
|
|
4
4
|
height: number;
|
|
5
5
|
x: number;
|
|
6
6
|
y: number;
|
|
7
|
+
fullscreen: boolean;
|
|
7
8
|
}
|
|
8
9
|
export interface IDialogBoundDef {
|
|
9
|
-
id:
|
|
10
|
+
id: IDialogBoundsMemoKey;
|
|
10
11
|
bounds: IDialogBoundsDef;
|
|
11
12
|
}
|
|
13
|
+
export type IDialogIdentificationType = string | number;
|
|
14
|
+
export type RegisteredDialogsMap = Map<IDialogBoundsMemoKey, IDialogBoundDef>;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { IDialogDef, IListenerDialogDef, IStateDef } from "./DialogTypes";
|
|
1
|
+
import { IDialogApiDef, IListenerDialogDef } from "./DialogTypes";
|
|
3
2
|
import { TValues, ICoords } from "./types";
|
|
4
3
|
import DialogBase from "../components/DialogBase";
|
|
5
4
|
import DialogActionBase from "../components/DialogActionBase";
|
|
6
5
|
import { CSSProperties } from "react";
|
|
7
6
|
import * as React from "react";
|
|
8
|
-
|
|
9
|
-
export type
|
|
7
|
+
import { DialogAction } from "../models";
|
|
8
|
+
export type ActionDialogDef = Omit<IDialogApiDef, 'switchFullScreen'>;
|
|
9
|
+
export type ActionDef = Pick<DialogAction, 'onClick' | 'setInProcess' | 'getLabel' | 'getColor' | 'getVariant' | 'isDisabled' | 'setOptions' | 'isInProcess' | 'setLabel' | 'name'>;
|
|
10
10
|
export type ActionBaseDef = Pick<DialogActionBase, 'setOptions' | 'setInProcess' | 'getLabel' | 'options' | 'click' | 'remove'>;
|
|
11
11
|
export interface IDialogActionDef extends ActionBaseDef {
|
|
12
12
|
}
|
|
13
|
-
export type DialogActionType = (button: ActionBaseDef, dialog: Omit<
|
|
13
|
+
export type DialogActionType = (button: ActionBaseDef, dialog: Omit<IDialogApiDef, 'switchFullScreen'>) => void;
|
|
14
14
|
export interface ActionProps {
|
|
15
15
|
name: string;
|
|
16
16
|
options?: DialogActionOptionsType;
|
|
@@ -62,5 +62,13 @@ export type DialogActionOptionsType = {
|
|
|
62
62
|
baseStyle?: React.CSSProperties;
|
|
63
63
|
};
|
|
64
64
|
type TListenerButtonType = Pick<DialogActionBase, Exclude<keyof ActionDef, 'onClick' | 'getStateListener' | 'name'>>;
|
|
65
|
-
export type TDialogStateListenerForActionCallbackType = (
|
|
65
|
+
export type TDialogStateListenerForActionCallbackType = (values: TValues, button: TListenerButtonType, dialog: IListenerDialogDef) => void;
|
|
66
|
+
export interface IContentFooterProps {
|
|
67
|
+
dialog: DialogBase<any>;
|
|
68
|
+
actions?: DialogAction[];
|
|
69
|
+
}
|
|
70
|
+
export interface DialogContentFooterReturnType {
|
|
71
|
+
setProcessing: React.Dispatch<React.SetStateAction<boolean>>;
|
|
72
|
+
inProcess: boolean;
|
|
73
|
+
}
|
|
66
74
|
export {};
|
package/types/DialogTypes.d.ts
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IBackdropOptions, IDialogAnchor, IInProcess, ISnackbarAnchor, TInitialHolder, TNotifyOnClosing, DialogValues, TValues, BaseDialogDOMRect } from "./types";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { DialogAction } from "../models/DialogAction";
|
|
4
3
|
import Dialog from "../models/Dialog";
|
|
5
4
|
import { ITypeHeight, ITypeWidth } from "./SizePosTypes";
|
|
6
5
|
import DialogBase from "../components/DialogBase";
|
|
7
6
|
import { FormikProps } from "formik";
|
|
7
|
+
import { RefObject } from "react";
|
|
8
|
+
import { DialogAction } from "../models";
|
|
9
|
+
import { Resizeable } from "../helpers/Resizeable";
|
|
10
|
+
import { DialogContentFooterReturnType } from "./DialogActionTypes";
|
|
11
|
+
import { SnackbarKey, VariantType } from "notistack";
|
|
8
12
|
export interface TBaseDialogState {
|
|
9
13
|
[K: string]: any;
|
|
10
14
|
}
|
|
@@ -13,50 +17,46 @@ export interface BaseDialogState {
|
|
|
13
17
|
values: DialogValues;
|
|
14
18
|
inProcess: IInProcess;
|
|
15
19
|
fullscreenMode?: boolean;
|
|
20
|
+
prevDialogRect: WithBackdrop['prevDialogRect'];
|
|
16
21
|
}
|
|
17
22
|
export interface BaseDialogProps {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
header?: TDialogCallbackNodeFn;
|
|
23
|
+
initialOptions?: DialogOptionsType;
|
|
24
|
+
body: TDialogCallbackFn;
|
|
25
|
+
header?: TDialogCallbackFn;
|
|
22
26
|
actions?: Array<DialogAction>;
|
|
23
|
-
dialogSize?: IDialogSize;
|
|
24
27
|
didMountCallback?: TDialogCallbackVoidFn;
|
|
28
|
+
dialogSize?: IDialogSize;
|
|
25
29
|
stateListener: TDialogStateListenerCallbackType;
|
|
26
|
-
order?: ComponentOrderType;
|
|
27
|
-
/**@deprecated use initialValues*/
|
|
28
|
-
initialUserProps: TUserProps;
|
|
29
30
|
initialValues: DialogValues;
|
|
30
31
|
initialHolder: TInitialHolder;
|
|
31
|
-
/**
|
|
32
|
-
* @deprecated
|
|
33
|
-
* @see dialogOptions.snackbar.anchorOrigin */
|
|
34
32
|
snackbarAnchor?: ISnackbarAnchor;
|
|
35
33
|
dom: HTMLDivElement;
|
|
36
34
|
parent?: Dialog;
|
|
37
35
|
onClose?: TDialogCallbackVoidFn;
|
|
38
36
|
root?: any;
|
|
39
|
-
keyboardListener: (key: string, dialog:
|
|
40
|
-
resizeListener?: (size: IDialogSize, dialog:
|
|
37
|
+
keyboardListener: (key: string, dialog: IDialogApiDef) => void;
|
|
38
|
+
resizeListener?: (size: IDialogSize, dialog: IDialogApiDef) => void;
|
|
41
39
|
}
|
|
42
40
|
export interface IDialogSize {
|
|
43
41
|
width?: ITypeWidth | number;
|
|
44
42
|
height?: ITypeHeight | number;
|
|
43
|
+
rect?: DOMRect;
|
|
45
44
|
}
|
|
46
45
|
interface IDialogOptionsType {
|
|
47
|
-
backdrop
|
|
48
|
-
base
|
|
49
|
-
progress
|
|
50
|
-
snackbar
|
|
46
|
+
backdrop: IBackdropOptions;
|
|
47
|
+
base: IBaseDialogOptions;
|
|
48
|
+
progress: IBaseDialogProgressOptions;
|
|
49
|
+
snackbar: {
|
|
51
50
|
anchorOrigin?: ISnackbarAnchor;
|
|
52
51
|
autoHideDuration?: number | null;
|
|
53
52
|
maxSnack?: number;
|
|
54
53
|
busyMessage?: string;
|
|
55
54
|
};
|
|
55
|
+
animate: 'jumper' | 'none';
|
|
56
56
|
slot?: kSlot;
|
|
57
57
|
slotProps?: kSlotProps;
|
|
58
58
|
}
|
|
59
|
-
export type DialogOptionsType = Partial<IDialogOptionsType
|
|
59
|
+
export type DialogOptionsType = Partial<Pick<IDialogOptionsType, 'base' | 'snackbar' | 'backdrop' | 'slotProps' | 'slot' | 'animate' | 'progress'>>;
|
|
60
60
|
interface kSlot {
|
|
61
61
|
action?: React.JSXElementConstructor<any>;
|
|
62
62
|
footer?: React.JSXElementConstructor<any>;
|
|
@@ -76,6 +76,7 @@ export interface IBaseDialogOptions {
|
|
|
76
76
|
draggable?: boolean;
|
|
77
77
|
resizeable?: boolean;
|
|
78
78
|
fullscreen?: boolean;
|
|
79
|
+
about?: boolean;
|
|
79
80
|
header?: {
|
|
80
81
|
style?: React.CSSProperties;
|
|
81
82
|
};
|
|
@@ -113,24 +114,73 @@ export interface IBaseHeaderProps extends BaseDialogSlotProps {
|
|
|
113
114
|
type HeaderSlotProps = ReturnType<NonNullable<kSlotProps['header']>>;
|
|
114
115
|
export type IHeaderProps = IBaseHeaderProps & HeaderSlotProps;
|
|
115
116
|
export interface BaseDialogSlotProps {
|
|
116
|
-
dialogValues: DialogValues;
|
|
117
117
|
dialogOptions: DialogOptionsType;
|
|
118
|
-
dialog?:
|
|
118
|
+
dialog?: IDialogApiDef;
|
|
119
119
|
}
|
|
120
120
|
export interface IStateDef extends Pick<BaseDialogState, "values" | "fullscreenMode" | "inProcess"> {
|
|
121
121
|
}
|
|
122
|
-
export interface IListenerDialogDef extends Omit<
|
|
122
|
+
export interface IListenerDialogDef extends Omit<IDialogApiDef, "state" | "values" | "setValues"> {
|
|
123
123
|
}
|
|
124
|
-
export type TDialogStateListenerCallbackType = (
|
|
125
|
-
type TDialogCallbackFn<T> = (dialog
|
|
126
|
-
export type
|
|
124
|
+
export type TDialogStateListenerCallbackType = (values: FormikProps<any>['values'], dialog: IListenerDialogDef) => void;
|
|
125
|
+
export type TDialogCallbackFn<T = React.ReactNode> = (dialog: IDialogApiDef) => T;
|
|
126
|
+
export type TDialogHeader = TDialogCallbackFn | React.ReactNode | React.JSX.Element;
|
|
127
127
|
export type TDialogCallbackVoidFn = TDialogCallbackFn<void>;
|
|
128
|
-
export interface
|
|
129
|
-
/** @deprecated Deprecated, use setValues instead. */
|
|
130
|
-
switchFullScreen?: DialogBase<any>['switchFullScreen'];
|
|
131
|
-
/** @deprecated Deprecated, never use. */
|
|
132
|
-
setOrder?: DialogBase<any>['setOrder'];
|
|
128
|
+
export interface IDialogApiDef extends Pick<DialogBase<any>, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus'> {
|
|
133
129
|
}
|
|
134
130
|
export interface IDialogCloseRef extends Pick<DialogBase<any>, 'close'> {
|
|
135
131
|
}
|
|
132
|
+
interface OpenArgs {
|
|
133
|
+
message: any;
|
|
134
|
+
severity: VariantType;
|
|
135
|
+
key?: string;
|
|
136
|
+
anchor?: {
|
|
137
|
+
v?: 'top' | 'bottom';
|
|
138
|
+
h?: 'right' | 'center' | 'left';
|
|
139
|
+
};
|
|
140
|
+
content?: (key?: SnackbarKey, message?: any) => React.ReactNode;
|
|
141
|
+
actions?: Array<{
|
|
142
|
+
label: string;
|
|
143
|
+
variant?: "contained" | "outlined" | "text";
|
|
144
|
+
color?: "primary" | "success" | "error" | "warning" | "info";
|
|
145
|
+
onClick?: (snackKey?: SnackbarKey, event?: React.MouseEvent) => void;
|
|
146
|
+
}>;
|
|
147
|
+
}
|
|
148
|
+
export interface IDialogSnackbar {
|
|
149
|
+
open: (message: OpenArgs['message'], severity?: OpenArgs['severity'], key?: OpenArgs['key'], anchor?: OpenArgs['anchor'], content?: OpenArgs['content'], actions?: OpenArgs['actions']) => void;
|
|
150
|
+
close: (key: SnackbarKey) => void;
|
|
151
|
+
}
|
|
152
|
+
export interface WithBackdrop {
|
|
153
|
+
ref: React.RefObject<any>;
|
|
154
|
+
body: TDialogCallbackFn;
|
|
155
|
+
header: TDialogCallbackFn;
|
|
156
|
+
actions?: DialogAction[];
|
|
157
|
+
dialog: DialogBase<any>;
|
|
158
|
+
backdropRef: RefObject<any>;
|
|
159
|
+
initialValues: Partial<TValues>;
|
|
160
|
+
dialogRef: RefObject<any>;
|
|
161
|
+
headerRef: RefObject<any>;
|
|
162
|
+
bodyRef: RefObject<any>;
|
|
163
|
+
footerRef: RefObject<any>;
|
|
164
|
+
prevDialogRect?: BaseDialogDOMRect;
|
|
165
|
+
snackbarRef: React.RefObject<any>;
|
|
166
|
+
}
|
|
167
|
+
export interface DialogWithBackdropWrapperRefProps {
|
|
168
|
+
baseZoomEffect: () => void;
|
|
169
|
+
formikProps?: FormikProps<any>;
|
|
170
|
+
}
|
|
171
|
+
export interface IContentProps {
|
|
172
|
+
body: TDialogCallbackFn;
|
|
173
|
+
header: TDialogCallbackFn;
|
|
174
|
+
actions: DialogAction[];
|
|
175
|
+
dialogRef: React.RefObject<any>;
|
|
176
|
+
headerRef: React.RefObject<any>;
|
|
177
|
+
bodyRef: React.RefObject<any>;
|
|
178
|
+
footerRef: React.RefObject<DialogContentFooterReturnType>;
|
|
179
|
+
backdropRef: React.RefObject<any>;
|
|
180
|
+
dialogOptions: DialogOptionsType;
|
|
181
|
+
dialog: DialogBase<any>;
|
|
182
|
+
resizeableObject?: Resizeable | null;
|
|
183
|
+
prevDialogRect: WithBackdrop['prevDialogRect'];
|
|
184
|
+
snackbarRef: WithBackdrop['snackbarRef'];
|
|
185
|
+
}
|
|
136
186
|
export {};
|
package/types/SizePosTypes.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
export type
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
|
+
export type ITypeWidth = "xs" | "sm" | "md" | "lg" | "xl" | "auto" | CSSProperties['width'];
|
|
3
|
+
export type ITypeHeight = CSSProperties['height'];
|
|
3
4
|
export type TSnackbarHorizontal = "left" | "center" | "right";
|
|
4
5
|
export type TSnackbarVertical = "top" | "bottom";
|
|
5
6
|
export type TFlexPos = "flex-start" | "center" | "flex-end";
|
package/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { IFooterProps, IHeaderProps, IBaseFooterProps, IBaseHeaderProps, IDialogCloseRef,
|
|
1
|
+
export { IFooterProps, IHeaderProps, IBaseFooterProps, IBaseHeaderProps, IDialogCloseRef, IDialogApiDef, // <-- Required
|
|
2
2
|
IDialogSize } from "./DialogTypes";
|
|
3
3
|
export { DialogValues } from "./types";
|
|
4
4
|
export { ActionDef, ActionDialogDef, // <-- Action -> Dialog dialog of action
|
package/types/types.d.ts
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import DialogBase from "./DialogBase";
|
|
3
|
-
import { DialogAction } from "../models/DialogAction";
|
|
4
|
-
interface IContentFooterProps {
|
|
5
|
-
dialog: DialogBase<any>;
|
|
6
|
-
actions?: DialogAction[];
|
|
7
|
-
}
|
|
8
|
-
export interface DialogContentFooterReturnType {
|
|
9
|
-
setProcessing: React.Dispatch<React.SetStateAction<boolean>>;
|
|
10
|
-
inProcess: boolean;
|
|
11
|
-
}
|
|
12
|
-
declare const DialogContentFooter: React.ForwardRefExoticComponent<IContentFooterProps & React.RefAttributes<DialogContentFooterReturnType>>;
|
|
13
|
-
export { DialogContentFooter };
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.DialogCloseAction = void 0;
|
|
7
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
var CloseIcon_1 = __importDefault(require("../icons/CloseIcon"));
|
|
9
|
-
var react_1 = require("react");
|
|
10
|
-
var DialogBase_1 = require("../DialogBase");
|
|
11
|
-
// const DialogCloseAction = ({dialog}:{dialog: React.RefObject<IDialogRef> | undefined}) => {
|
|
12
|
-
// const DialogCloseAction = ({dialog, newProps}:{dialog: IDialogDef | undefined, newProps?: any}) => {
|
|
13
|
-
var DialogCloseAction = function () {
|
|
14
|
-
var _a, _b, _c, _d, _e, _f;
|
|
15
|
-
var dialog = (0, react_1.useContext)(DialogBase_1.DialogHeaderFooterContext).dialog;
|
|
16
|
-
console.log('DialogCloseAction_dialog', dialog);
|
|
17
|
-
// console.log('DialogCloseAction_props', dialogHeaderContext);
|
|
18
|
-
// return <div className={'close-icon-wrapper'} onClick={event => apiRef.current.close()} >
|
|
19
|
-
return (0, jsx_runtime_1.jsx)("div", { className: 'close-icon-wrapper', onClick: function (event) {
|
|
20
|
-
// props.dialog.close()
|
|
21
|
-
dialog.close();
|
|
22
|
-
}, children: (0, jsx_runtime_1.jsx)(CloseIcon_1.default
|
|
23
|
-
// size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
|
|
24
|
-
// color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
|
|
25
|
-
, {
|
|
26
|
-
// size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
|
|
27
|
-
// color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
|
|
28
|
-
size: (_c = (_b = (_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.headerControllerIcons) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 24, color: (_f = (_e = (_d = dialog.dialogOptions.base) === null || _d === void 0 ? void 0 : _d.headerControllerIcons) === null || _e === void 0 ? void 0 : _e.color) !== null && _f !== void 0 ? _f : null }) });
|
|
29
|
-
};
|
|
30
|
-
exports.DialogCloseAction = DialogCloseAction;
|