react-dialogger 1.1.47 → 1.1.48
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/components/DialogBase.d.ts +1 -1
- package/components/DialogBase.js +12 -15
- package/components/DialogContent.d.ts +3 -2
- package/components/DialogContent.js +25 -12
- package/components/DialogContentBody.d.ts +3 -0
- package/components/DialogContentBody.js +56 -4
- package/components/DialogContentHeader.d.ts +4 -0
- package/components/DialogContentHeader.js +20 -8
- package/package.json +1 -1
- package/types/DialogTypes.d.ts +2 -1
|
@@ -29,7 +29,7 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
|
|
|
29
29
|
protected readonly _snackbarRef: RefObject<any>;
|
|
30
30
|
protected _dialogSize: IDialogSize;
|
|
31
31
|
protected _holder?: TInitialHolder;
|
|
32
|
-
protected
|
|
32
|
+
protected _formikProps: FormikProps<any>;
|
|
33
33
|
_dialogTranslate: {
|
|
34
34
|
lastX: number;
|
|
35
35
|
lastY: number;
|
package/components/DialogBase.js
CHANGED
|
@@ -65,9 +65,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
65
65
|
exports.DialogHeaderFooterContext = exports.WithHeaderFooterContext = void 0;
|
|
66
66
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
67
67
|
var react_1 = require("react");
|
|
68
|
-
// import {JSX} from "react";
|
|
69
|
-
// import {FormikProps} from "../types/FormikProps";
|
|
70
|
-
var formik_1 = require("formik");
|
|
71
68
|
var React = __importStar(require("react"));
|
|
72
69
|
var react_draggable_1 = __importDefault(require("react-draggable"));
|
|
73
70
|
var notistack_1 = require("notistack");
|
|
@@ -352,7 +349,7 @@ var DialogBase = /** @class */ (function (_super) {
|
|
|
352
349
|
return;
|
|
353
350
|
}
|
|
354
351
|
_this.baseZoomEffect();
|
|
355
|
-
}, children: (0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { body: body, header: header, actions: actions, dialogRef: _this._dialogRef, footerRef: _this._footerRef, backdropRef: _this._backdropRef, dialogOptions: _this.dialogOptions, dom: _this._dom, keyboardListener: _this._keyboardListener, dialog: _this
|
|
352
|
+
}, children: (0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { body: body, header: header, actions: actions, dialogRef: _this._dialogRef, footerRef: _this._footerRef, backdropRef: _this._backdropRef, dialogOptions: _this.dialogOptions, dom: _this._dom, keyboardListener: _this._keyboardListener, dialog: _this }) });
|
|
356
353
|
};
|
|
357
354
|
_this.switchFullScreen = function () {
|
|
358
355
|
if (!_this.state.fullscreenMode) {
|
|
@@ -538,16 +535,16 @@ var DialogBase = /** @class */ (function (_super) {
|
|
|
538
535
|
};
|
|
539
536
|
// TODO Content
|
|
540
537
|
_this.Content = function (_a) {
|
|
538
|
+
// this._formikProps = useFormik({
|
|
539
|
+
// enableReinitialize: true,
|
|
540
|
+
// initialValues: this._initialValues,
|
|
541
|
+
// onSubmit: (values, formikHelpers) => {
|
|
542
|
+
// // No Necessary
|
|
543
|
+
// }
|
|
544
|
+
// });
|
|
541
545
|
var _b;
|
|
542
546
|
var _c, _d;
|
|
543
547
|
var body = _a.body, header = _a.header, actions = _a.actions;
|
|
544
|
-
_this._formikProps.current = (0, formik_1.useFormik)({
|
|
545
|
-
enableReinitialize: true,
|
|
546
|
-
initialValues: _this._initialValues,
|
|
547
|
-
onSubmit: function (values, formikHelpers) {
|
|
548
|
-
// No Necessary
|
|
549
|
-
}
|
|
550
|
-
});
|
|
551
548
|
if (_this._dialogRef.current) {
|
|
552
549
|
// Öncelikle ref'i al ve input elemanlarını bul
|
|
553
550
|
var inputElements = _this._dialogRef.current.querySelectorAll("input");
|
|
@@ -683,7 +680,6 @@ var DialogBase = /** @class */ (function (_super) {
|
|
|
683
680
|
var base = _this._dialogOptions.base;
|
|
684
681
|
var memoBounds = base.memoBounds;
|
|
685
682
|
_this._storedBounds = ((_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, helpers_1.getDialogBounds)(base) : null;
|
|
686
|
-
_this._formikProps = (0, react_1.createRef)();
|
|
687
683
|
return _this;
|
|
688
684
|
}
|
|
689
685
|
Object.defineProperty(DialogBase.prototype, "parent", {
|
|
@@ -726,10 +722,10 @@ var DialogBase = /** @class */ (function (_super) {
|
|
|
726
722
|
// return super.state
|
|
727
723
|
// }
|
|
728
724
|
get: function () {
|
|
729
|
-
return this._formikProps
|
|
725
|
+
return this._formikProps;
|
|
730
726
|
},
|
|
731
727
|
set: function (value) {
|
|
732
|
-
this._formikProps
|
|
728
|
+
this._formikProps = value;
|
|
733
729
|
},
|
|
734
730
|
enumerable: false,
|
|
735
731
|
configurable: true
|
|
@@ -821,7 +817,8 @@ var DialogBase = /** @class */ (function (_super) {
|
|
|
821
817
|
}).then(function (completed) {
|
|
822
818
|
if (completed) {
|
|
823
819
|
// @ts-ignore
|
|
824
|
-
|
|
820
|
+
// this.props.didMountCallback( this )
|
|
821
|
+
// didMount (show) Callback fired by DialogContent->useEffect
|
|
825
822
|
}
|
|
826
823
|
});
|
|
827
824
|
}
|
|
@@ -14,8 +14,9 @@ interface IContentProps {
|
|
|
14
14
|
dom: HTMLDivElement;
|
|
15
15
|
keyboardListener: BaseDialogProps['keyboardListener'];
|
|
16
16
|
dialog: DialogBase<any>;
|
|
17
|
-
initialValues: BaseDialogProps['initialValues'];
|
|
18
|
-
formikProps: React.RefObject<FormikProps<any>>;
|
|
19
17
|
}
|
|
20
18
|
declare const DialogContent: React.FC<IContentProps>;
|
|
19
|
+
export declare const DialogContentContext: React.Context<{
|
|
20
|
+
formikProps: FormikProps<any>;
|
|
21
|
+
}>;
|
|
21
22
|
export { DialogContent };
|
|
@@ -48,7 +48,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
48
48
|
};
|
|
49
49
|
var _this = this;
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
|
-
exports.DialogContent = void 0;
|
|
51
|
+
exports.DialogContent = exports.DialogContentContext = void 0;
|
|
52
52
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
53
53
|
var react_draggable_1 = __importDefault(require("react-draggable"));
|
|
54
54
|
var helpers_1 = require("../helpers");
|
|
@@ -59,6 +59,7 @@ var DialogContentHeader_1 = require("./DialogContentHeader");
|
|
|
59
59
|
var DialogContentBody_1 = require("./DialogContentBody");
|
|
60
60
|
var DialogContenFooter_1 = require("./DialogContenFooter");
|
|
61
61
|
var formik_1 = require("formik");
|
|
62
|
+
var react_1 = require("react");
|
|
62
63
|
var WithSnackbar = function (props) {
|
|
63
64
|
return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
|
|
64
65
|
};
|
|
@@ -78,18 +79,13 @@ var dialogAutoPos = function () {
|
|
|
78
79
|
var DialogContent = function (_a) {
|
|
79
80
|
var _b;
|
|
80
81
|
var _c, _d, _e;
|
|
81
|
-
var body = _a.body, header = _a.header, actions = _a.actions, dialogRef = _a.dialogRef, footerRef = _a.footerRef, dialogOptions = _a.dialogOptions, dom = _a.dom, backdropRef = _a.backdropRef, keyboardListener = _a.keyboardListener, dialog = _a.dialog
|
|
82
|
+
var body = _a.body, header = _a.header, actions = _a.actions, dialogRef = _a.dialogRef, footerRef = _a.footerRef, dialogOptions = _a.dialogOptions, dom = _a.dom, backdropRef = _a.backdropRef, keyboardListener = _a.keyboardListener, dialog = _a.dialog;
|
|
82
83
|
var position = dialogAutoPos();
|
|
83
84
|
var snackbarRef = React.useRef(null);
|
|
84
85
|
var _f = React.useState(false), fullscreenMode = _f[0], setFullscreenMode = _f[1];
|
|
86
|
+
// ✨✨✨✨
|
|
87
|
+
var dialogBodyRef = (0, react_1.useRef)(null);
|
|
85
88
|
var baseOptions = dialogOptions.base;
|
|
86
|
-
formikProps.current = (0, formik_1.useFormik)({
|
|
87
|
-
// enableReinitialize: true,
|
|
88
|
-
initialValues: initialValues,
|
|
89
|
-
onSubmit: function (values, formikHelpers) {
|
|
90
|
-
// No Necessary
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
89
|
// dialog.formikProps = formikProps;
|
|
94
90
|
if (dialogRef.current) {
|
|
95
91
|
// Öncelikle ref'i al ve input elemanlarını bul
|
|
@@ -113,6 +109,11 @@ var DialogContent = function (_a) {
|
|
|
113
109
|
var bounds = ((_c = dialogOptions.base) === null || _c === void 0 ? void 0 : _c.memoBounds) ? (0, helpers_1.getDialogBounds)(base) : null;
|
|
114
110
|
// console.log('MAIN DOM', window.getComputedStyle(this.props.dom).zIndex);
|
|
115
111
|
var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
|
|
112
|
+
(0, react_1.useEffect)(function () {
|
|
113
|
+
var _a;
|
|
114
|
+
console.log('DialogContent_Runned', '');
|
|
115
|
+
dialog.props.didMountCallback(dialog, (_a = dialogBodyRef.current) === null || _a === void 0 ? void 0 : _a.formikProps);
|
|
116
|
+
}, []);
|
|
116
117
|
// Burda kaldik
|
|
117
118
|
return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: 1, ref: backdropRef, onDrag: function (event, data) {
|
|
118
119
|
event.stopPropagation();
|
|
@@ -138,11 +139,23 @@ var DialogContent = function (_a) {
|
|
|
138
139
|
}
|
|
139
140
|
},
|
|
140
141
|
// className={this._dialogSize.width === 'auto' ? 'auto' : `dialog-width-${this._dialogSize.width} dialog-main show-opacity show-position-${this._dialogOptions.base.initialAnchor.vertical}`}
|
|
141
|
-
className: baseOptions.size.width === 'auto' ? 'auto' : "dialog-width-".concat(dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(baseOptions.initialAnchor.vertical), style: __assign(__assign(__assign(__assign(__assign({ alignSelf: baseOptions.initialAnchor.vertical, height: (_d = baseOptions.size.height) !== null && _d !== void 0 ? _d : 'auto' }, typeof baseOptions.size.width === "number" ? { width: baseOptions.size.width } : null), (_b = { outline: 'none' }, _b[yKey] = position.top + 'px', _b[xKey] = position.left + 'px', _b)), baseOptions.style), { fontFamily: (_e = baseOptions.style.fontFamily) !== null && _e !== void 0 ? _e : 'Arial' }), bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : null), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: snackbarRef, maxSnack: dialogOptions.snackbar.maxSnack, children: [(header || dialogOptions.slot.header) && (0, jsx_runtime_1.jsx)(DialogContentHeader_1.DialogContentHeader, { header: header,
|
|
142
|
-
// dialogOptions={dialogOptions}
|
|
143
|
-
dialog: dialog }), (0, jsx_runtime_1.jsx)(DialogContentBody_1.DialogContentBody, { dialog: dialog, body: body }), (0, jsx_runtime_1.jsx)(DialogContenFooter_1.DialogContentFooter, { dialog: dialog, ref: footerRef, actions: actions })] }), (baseOptions.resizeable) &&
|
|
142
|
+
className: baseOptions.size.width === 'auto' ? 'auto' : "dialog-width-".concat(dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(baseOptions.initialAnchor.vertical), style: __assign(__assign(__assign(__assign(__assign({ alignSelf: baseOptions.initialAnchor.vertical, height: (_d = baseOptions.size.height) !== null && _d !== void 0 ? _d : 'auto' }, typeof baseOptions.size.width === "number" ? { width: baseOptions.size.width } : null), (_b = { outline: 'none' }, _b[yKey] = position.top + 'px', _b[xKey] = position.left + 'px', _b)), baseOptions.style), { fontFamily: (_e = baseOptions.style.fontFamily) !== null && _e !== void 0 ? _e : 'Arial' }), bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : null), children: [(0, jsx_runtime_1.jsx)(DialogContentContextProvider, { initialValues: dialog.values, children: function (formikProps) { return ((0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: snackbarRef, maxSnack: dialogOptions.snackbar.maxSnack, children: [(header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(DialogContentHeader_1.DialogContentHeader, { header: header, dialog: dialog, dialogBodyRef: dialogBodyRef })), (0, jsx_runtime_1.jsx)(DialogContentBody_1.DialogContentBody, { ref: dialogBodyRef, dialog: dialog, body: body, formikProps: formikProps }), (0, jsx_runtime_1.jsx)(DialogContenFooter_1.DialogContentFooter, { dialog: dialog, ref: footerRef, actions: actions })] })); } }), (baseOptions.resizeable) &&
|
|
144
143
|
(0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
|
|
145
144
|
zIndex: parseInt(domZIndex) + 1
|
|
146
145
|
}, onMouseDown: dialog.Resizeable.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
|
|
147
146
|
};
|
|
148
147
|
exports.DialogContent = DialogContent;
|
|
148
|
+
exports.DialogContentContext = React.createContext(null);
|
|
149
|
+
var DialogContentContextProvider = function (_a) {
|
|
150
|
+
var children = _a.children, initialValues = _a.initialValues;
|
|
151
|
+
var formikProps = (0, formik_1.useFormik)({
|
|
152
|
+
// enableReinitialize: true,
|
|
153
|
+
initialValues: initialValues,
|
|
154
|
+
onSubmit: function (values, formikHelpers) {
|
|
155
|
+
// No Necessary
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
return ((0, jsx_runtime_1.jsx)(exports.DialogContentContext.Provider, { value: { formikProps: formikProps }, children: typeof children === "function"
|
|
159
|
+
? children(formikProps)
|
|
160
|
+
: children }));
|
|
161
|
+
};
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { TDialogCallbackNodeFn } from "../types/DialogTypes";
|
|
3
3
|
import DialogBase from "./DialogBase";
|
|
4
|
+
import { FormikProps } from "formik";
|
|
4
5
|
interface IContentBodyProps {
|
|
5
6
|
body: TDialogCallbackNodeFn;
|
|
6
7
|
dialog: DialogBase<any>;
|
|
8
|
+
ref: React.RefObject<any>;
|
|
9
|
+
formikProps: FormikProps<any>;
|
|
7
10
|
}
|
|
8
11
|
declare const DialogContentBody: React.FC<IContentBodyProps>;
|
|
9
12
|
export { DialogContentBody };
|
|
@@ -1,7 +1,42 @@
|
|
|
1
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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
2
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
36
|
exports.DialogContentBody = void 0;
|
|
4
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var react_1 = require("react");
|
|
5
40
|
var Placeholder = function (_a) {
|
|
6
41
|
var dialogOptions = _a.dialogOptions, placeholder = _a.placeholder;
|
|
7
42
|
var bgColor = dialogOptions.base.style.backgroundColor ?
|
|
@@ -14,11 +49,28 @@ var Placeholder = function (_a) {
|
|
|
14
49
|
display: placeholder ? 'flex' : 'none',
|
|
15
50
|
}, children: placeholder });
|
|
16
51
|
};
|
|
17
|
-
var DialogContentBody = function (_a) {
|
|
18
|
-
var body = _a.body, dialog = _a.dialog;
|
|
52
|
+
var DialogContentBody = React.forwardRef(function (_a, ref) {
|
|
53
|
+
var body = _a.body, dialog = _a.dialog, formikProps = _a.formikProps;
|
|
19
54
|
console.log('DialogContentBody', dialog);
|
|
55
|
+
// const formikProps = useFormik({
|
|
56
|
+
// // enableReinitialize: true,
|
|
57
|
+
// initialValues: dialog.values,
|
|
58
|
+
// onSubmit: (values, formikHelpers) => {
|
|
59
|
+
// // No Necessary
|
|
60
|
+
// }
|
|
61
|
+
// });
|
|
62
|
+
//
|
|
63
|
+
// useImperativeHandle( ref, () => ({
|
|
64
|
+
// formikProps
|
|
65
|
+
// }));
|
|
66
|
+
// const {
|
|
67
|
+
// formikProps
|
|
68
|
+
// } = useContext(DialogContentContext);
|
|
69
|
+
(0, react_1.useEffect)(function () {
|
|
70
|
+
dialog.props.didMountCallback(dialog, formikProps);
|
|
71
|
+
}, []);
|
|
20
72
|
if (body instanceof Function) {
|
|
21
|
-
return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder }), body(dialog)] });
|
|
73
|
+
return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder }), body(dialog, formikProps)] });
|
|
22
74
|
}
|
|
23
75
|
return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: dialog.holder ?
|
|
24
76
|
// this.Placeholder(this._holder)
|
|
@@ -26,5 +78,5 @@ var DialogContentBody = function (_a) {
|
|
|
26
78
|
:
|
|
27
79
|
//@ts-ignore
|
|
28
80
|
body });
|
|
29
|
-
};
|
|
81
|
+
});
|
|
30
82
|
exports.DialogContentBody = DialogContentBody;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { TDialogCallbackNodeFn } from "../types/DialogTypes";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import DialogBase from "./DialogBase";
|
|
4
|
+
import { FormikProps } from "formik";
|
|
4
5
|
interface IContentHeaderProps {
|
|
5
6
|
header: TDialogCallbackNodeFn;
|
|
6
7
|
dialog: DialogBase<any>;
|
|
8
|
+
dialogBodyRef: React.RefObject<{
|
|
9
|
+
formikProps: FormikProps<any>;
|
|
10
|
+
}>;
|
|
7
11
|
}
|
|
8
12
|
declare const DialogContentHeader: React.FC<IContentHeaderProps>;
|
|
9
13
|
export { DialogContentHeader };
|
|
@@ -16,11 +16,20 @@ exports.DialogContentHeader = void 0;
|
|
|
16
16
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
17
|
var Futures_1 = require("./Futures");
|
|
18
18
|
var DialogBase_1 = require("./DialogBase");
|
|
19
|
+
var react_1 = require("react");
|
|
20
|
+
var DialogContent_1 = require("./DialogContent");
|
|
19
21
|
var DialogContentHeader = function (_a) {
|
|
20
|
-
var _b, _c, _d, _e;
|
|
21
|
-
var header = _a.header, dialog = _a.dialog;
|
|
22
|
+
var _b, _c, _d, _e, _f;
|
|
23
|
+
var header = _a.header, dialog = _a.dialog, dialogBodyRef = _a.dialogBodyRef;
|
|
22
24
|
var state = dialog.state, dialogOptions = dialog.dialogOptions;
|
|
23
|
-
|
|
25
|
+
// const [formikProps, setFormikProps] = React.useState<FormikProps<any>>(null);
|
|
26
|
+
//
|
|
27
|
+
//
|
|
28
|
+
// useEffect(() => {
|
|
29
|
+
// console.log('DialogContentHeader_X', dialogBodyRef);
|
|
30
|
+
// setFormikProps(dialogBodyRef.current.formikProps);
|
|
31
|
+
// }, [dialogBodyRef, dialogBodyRef.current?.formikProps?.values]);
|
|
32
|
+
var formikProps = (0, react_1.useContext)(DialogContent_1.DialogContentContext).formikProps;
|
|
24
33
|
var baseOptions = dialogOptions.base;
|
|
25
34
|
var CustomHeader = (_b = dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.header;
|
|
26
35
|
var staticProps = {
|
|
@@ -28,9 +37,11 @@ var DialogContentHeader = function (_a) {
|
|
|
28
37
|
dialogOptions: dialogOptions,
|
|
29
38
|
dialog: dialog
|
|
30
39
|
};
|
|
31
|
-
var headerProps = {
|
|
40
|
+
var headerProps = {
|
|
41
|
+
formikProps: (_c = dialogBodyRef.current) === null || _c === void 0 ? void 0 : _c.formikProps
|
|
42
|
+
};
|
|
32
43
|
if (dialogOptions.slotProps.header) {
|
|
33
|
-
headerProps = dialogOptions.slotProps.header(staticProps);
|
|
44
|
+
headerProps = __assign(__assign({}, headerProps), dialogOptions.slotProps.header(staticProps));
|
|
34
45
|
}
|
|
35
46
|
if (dialogOptions.slot.header) {
|
|
36
47
|
return (0, jsx_runtime_1.jsx)("div", { onDoubleClick: function (event) {
|
|
@@ -38,18 +49,19 @@ var DialogContentHeader = function (_a) {
|
|
|
38
49
|
if ((_a = dialog === null || dialog === void 0 ? void 0 : dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.fullscreen) {
|
|
39
50
|
dialog.switchFullScreen();
|
|
40
51
|
}
|
|
41
|
-
}, style: (
|
|
52
|
+
}, style: (_d = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _d === void 0 ? void 0 : _d.style, className: "dialog-header ".concat(baseOptions.draggable && !dialog.state.fullscreenMode ? 'drag-handle' : ''), children: (0, jsx_runtime_1.jsx)(DialogBase_1.WithHeaderFooterContext, { dialog: dialog, children: (0, jsx_runtime_1.jsx)(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this })) }) });
|
|
42
53
|
}
|
|
54
|
+
console.log('DialogContentHeader_formikProps', formikProps);
|
|
43
55
|
if (header instanceof Function) {
|
|
44
56
|
return (0, jsx_runtime_1.jsxs)("div", { onDoubleClick: function (event) {
|
|
45
57
|
if (baseOptions.fullscreen) {
|
|
46
58
|
dialog.switchFullScreen();
|
|
47
59
|
}
|
|
48
|
-
}, style: (
|
|
60
|
+
}, style: (_e = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _e === void 0 ? void 0 : _e.style, className: "dialog-header ".concat(baseOptions.draggable && !dialog.state.fullscreenMode ? 'drag-handle' : ''), children: [header(dialog, formikProps), (baseOptions.closeable || baseOptions.fullscreen) &&
|
|
49
61
|
(0, jsx_runtime_1.jsx)(DialogBase_1.WithHeaderFooterContext, { dialog: dialog, children: (0, jsx_runtime_1.jsxs)(Futures_1.DialogHeaderActionsWrapper, { children: [baseOptions.fullscreen &&
|
|
50
62
|
(0, jsx_runtime_1.jsx)(Futures_1.DialogFullscreenAction, {}), baseOptions.closeable &&
|
|
51
63
|
(0, jsx_runtime_1.jsx)(Futures_1.DialogCloseAction, {}), (0, jsx_runtime_1.jsx)(Futures_1.DialogInfoAction, {})] }) })] });
|
|
52
64
|
}
|
|
53
|
-
return (0, jsx_runtime_1.jsx)("div", { style: (
|
|
65
|
+
return (0, jsx_runtime_1.jsx)("div", { style: (_f = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _f === void 0 ? void 0 : _f.style, className: 'drag-handle dialog-header', children: header });
|
|
54
66
|
};
|
|
55
67
|
exports.DialogContentHeader = DialogContentHeader;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-dialogger",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.48",
|
|
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/types/DialogTypes.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import { DialogAction } from "../models/DialogAction";
|
|
|
4
4
|
import Dialog from "../models/Dialog";
|
|
5
5
|
import { ITypeHeight, ITypeWidth } from "./SizePosTypes";
|
|
6
6
|
import DialogBase from "../components/DialogBase";
|
|
7
|
+
import { FormikProps } from "formik";
|
|
7
8
|
export interface TBaseDialogState {
|
|
8
9
|
[K: string]: any;
|
|
9
10
|
}
|
|
@@ -121,7 +122,7 @@ export interface IStateDef extends Pick<BaseDialogState, "values" | "fullscreenM
|
|
|
121
122
|
export interface IListenerDialogDef extends Omit<IDialogDef, "state" | "values" | "setValues"> {
|
|
122
123
|
}
|
|
123
124
|
export type TDialogStateListenerCallbackType = (state: IStateDef, values: DialogValues, dialog: IListenerDialogDef) => void;
|
|
124
|
-
type TDialogCallbackFn<T> = (dialog?: IDialogDef) => T;
|
|
125
|
+
type TDialogCallbackFn<T> = (dialog?: IDialogDef, formikProps?: FormikProps<any>) => T;
|
|
125
126
|
export type TDialogCallbackNodeFn = TDialogCallbackFn<string | React.ReactElement<any>> | React.ReactNode | React.JSX.Element;
|
|
126
127
|
export type TDialogCallbackVoidFn = TDialogCallbackFn<void>;
|
|
127
128
|
export interface IDialogDef extends Omit<Partial<Pick<DialogBase<any>, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'switchFullScreen' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus' | 'setOrder' | 'setBody' | 'onResize' | 'processingListener'>>, 'switchFullScreen'> {
|