react-dialogger 1.1.0

package/components/DialogBase.js

@@ -0,0 +1,880 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogHeaderFooterContext = void 0;
+var react_1 = require("react");
+var React = __importStar(require("react"));
+var react_draggable_1 = __importDefault(require("react-draggable"));
+var notistack_1 = require("notistack");
+var lodash_isequal_1 = __importDefault(require("lodash.isequal"));
+var lodash_1 = require("lodash");
+var DialogActionBase_1 = __importDefault(require("./DialogActionBase"));
+var client_1 = require("react-dom/client");
+var Resizeable_1 = __importDefault(require("../models/Resizeable"));
+var ResizeIcon_1 = __importDefault(require("./icons/ResizeIcon"));
+var Futures_1 = require("./Futures");
+var WithSnackbar = function (props) {
+    return React.createElement(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack }, props.children);
+};
+var WithHeaderFooterContext = function (props) {
+    return React.createElement(exports.DialogHeaderFooterContext.Provider, { value: __assign({}, props) }, props.children);
+};
+var hexToRgb = function (hex, opacity) {
+    try {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        var colors = {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        };
+        return "rgba(".concat(colors.r, ", ").concat(colors.g, ", ").concat(colors.b, ", ").concat(opacity, ")");
+    }
+    catch (e) {
+        console.warn('Color should be hex string', e.message);
+    }
+    return '';
+};
+exports.DialogHeaderFooterContext = React.createContext(null);
+var DialogBase = /** @class */ (function (_super) {
+    __extends(DialogBase, _super);
+    function DialogBase(props) {
+        if (props === void 0) { props = {}; }
+        var _a;
+        var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
+        _this._dialogTranslate = { lastX: 0, lastY: 0 };
+        _this._shInterval = 300;
+        _this._inProcess = { inProcess: false };
+        // Initialize a ref for each action dynamically
+        _this.initializeActionRef = function (key) {
+            if (!_this._actionRefs.hasOwnProperty(key)) {
+                _this._actionRefs[key] = (0, react_1.createRef)();
+            }
+            // Replace with referenced
+            return _this._actionRefs[key];
+        };
+        /**@deprecate
+         * @see this.state
+         * */
+        _this.getState = function () {
+            return _this.state;
+        };
+        _this.dialogAutoPos = function () {
+            var nodes = Array.from(document.querySelectorAll('.appinsource-dialog-root'));
+            if (nodes.length > 1) {
+                var lastDialog = nodes[nodes.length - 2];
+                var dialogMain = lastDialog.querySelector('#dialog-main');
+                return {
+                    top: (dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect().top) + 10,
+                    left: (dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect().left) + 10,
+                    isMultiple: true
+                };
+            }
+            return { top: 0, left: 0, isMultiple: false };
+        };
+        _this.setInProcess_noRef = function (process, message, holder) {
+            var _a, _b;
+            _this._inProcess = __assign({ inProcess: process }, message ? { message: message } : {});
+            // this.setState( prevState => ({
+            //     ...prevState, inProcess: { inProcess: process, ...message ? {message} : {} }
+            // }));
+            if (!process) {
+                _this._holder = null;
+            }
+            else {
+                if (holder) {
+                    _this._holder = holder;
+                }
+            }
+            if ((_b = (_a = _this._dialogOptions.base) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.disabledOnDialogProcessing) {
+                if (process) {
+                    // Set current disabled of action
+                    _this._actions.forEach(function (action) {
+                        var _a;
+                        // Save the current disabled state before changing it
+                        // const currentDisabled = action.getDisabled();
+                        var currentDisabled = (_a = action.options.disabled) !== null && _a !== void 0 ? _a : action.getDisabled();
+                        console.log('this._actions', currentDisabled, process);
+                        // Set the options with prevDisabled as the current disabled state
+                        if (currentDisabled !== process) {
+                            action
+                                .setOptions(__assign(__assign({}, action.options), { prevDisabled: currentDisabled, disabled: process // Set the new disabled state based on the process
+                             }));
+                        }
+                    });
+                }
+                else {
+                    // Call prevDisabled state from memo
+                    _this._actions.forEach(function (action) {
+                        // Restore the previous disabled state from options
+                        action
+                            .setOptions(__assign(__assign({}, action.options), { disabled: action.options.prevDisabled // Set the new disabled state based on the process
+                         }));
+                    });
+                }
+            }
+            if (!process) {
+                _this.snackbar.close("kInProcess");
+            }
+            _this.forceUpdate();
+            return _this;
+        };
+        _this.setInProcess = function (process, message, holder) {
+            var _a, _b;
+            _this._inProcess = __assign({ inProcess: process }, message ? { message: message } : {});
+            // this.setState( prevState => ({
+            //     ...prevState, inProcess: { inProcess: process, ...message ? {message} : {} }
+            // }));
+            if (!process) {
+                _this._holder = null;
+            }
+            else {
+                if (holder) {
+                    _this._holder = holder;
+                }
+            }
+            if ((_b = (_a = _this._dialogOptions.base) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.disabledOnDialogProcessing) {
+                if (process) {
+                    for (var actionKey in _this._actionRefs) {
+                        var action = _this._actionRefs[actionKey];
+                        // Save the current disabled state before changing it
+                        var currentDisabled = action.current.options.disabled;
+                        console.log('this._actions', currentDisabled, process);
+                        // Set the options with prevDisabled as the current disabled state
+                        if (currentDisabled !== process) {
+                            action.current
+                                .setOptions(__assign(__assign({}, action.current.options), { prevDisabled: currentDisabled, disabled: process // Set the new disabled state based on the process
+                             }));
+                        }
+                    }
+                }
+                else {
+                    for (var actionKey in _this._actionRefs) {
+                        var action = _this._actionRefs[actionKey];
+                        // Restore the previous disabled state from options
+                        // Call prevDisabled state from memo
+                        action.current
+                            .setOptions(__assign(__assign({}, action.current.options), { disabled: action.current.options.prevDisabled // Set the new disabled state based on the process
+                         }));
+                    }
+                }
+            }
+            if (!process) {
+                _this.snackbar.close("kInProcess");
+            }
+            _this.forceUpdate();
+            return _this;
+        };
+        _this.isInProcess = function () {
+            // return this.state.inProcess;
+            return _this._inProcess;
+        };
+        _this.close = function (callbackFn) {
+            var _a;
+            if (_this.isInProcess().inProcess) {
+                var notify = (_a = _this._dialogOptions.base.notifyOnClosing) !== null && _a !== void 0 ? _a : "snackbar";
+                if (notify === "snackbar") {
+                    // this.snackbar.open(this._dialogOptions.snackbar.busyMessage ? this._dialogOptions.snackbar.busyMessage : 'In Process, Please wait...', "warning", "kInProcess");
+                    _this.snackbar.open(_this._dialogOptions.snackbar.busyMessage ? _this._dialogOptions.snackbar.busyMessage : 'In Process, Please wait...', "warning");
+                }
+                else {
+                    _this.baseZoomEffect();
+                }
+                return;
+            }
+            // ReactDOM.unmountComponentAtNode(this.props.dom);
+            var _backdrop = _this._backdropRef.current;
+            var _dialog = _this._dialogRef.current;
+            _backdrop === null || _backdrop === void 0 ? void 0 : _backdrop.classList.remove('dialog-backdrop-show');
+            _backdrop === null || _backdrop === void 0 ? void 0 : _backdrop.classList.add('dialog-backdrop-hide');
+            _dialog === null || _dialog === void 0 ? void 0 : _dialog.classList.remove('show-position-' + _this._dialogOptions.base.initialAnchor.vertical);
+            _dialog === null || _dialog === void 0 ? void 0 : _dialog.classList.add('hide-position-' + _this._dialogOptions.base.initialAnchor.vertical);
+            setTimeout(function () {
+                _this.props.root.unmount();
+                _this.props.dom.remove();
+                // unmountComponentAtNode(this.props.dom);
+                // @deprecated
+                if (typeof _this._onClose === "function") {
+                    _this._onClose();
+                }
+                if (typeof callbackFn === "function") {
+                    callbackFn();
+                }
+            }, _this._shInterval);
+        };
+        _this.focus = function () {
+            if (_this._dialogRef.current) {
+                _this._dialogRef.current.focus();
+            }
+        };
+        _this.orderPositionWithReference = function () {
+            try {
+                if (undefined !== _this._order) {
+                    switch (_this._order.position) {
+                        case "after":
+                            _this.props.dom.before(_this._order.dom);
+                            break;
+                        case "before":
+                            _this.props.dom.after(_this._order.dom);
+                            break;
+                        default: // same
+                    }
+                }
+            }
+            catch (e) {
+                console.error('Error with orderPositionWithReference', e.message);
+            }
+        };
+        /**
+         * @deprecated
+         * @info This method is deprecated and will be removed in a future release.
+         * Please use an alternative approach for setting dialog ordering or layout.
+         * The dialog ordering functionality will be managed differently in future versions.
+         */
+        _this.setOrder = function (position, component) {
+            _this._order = { position: position, dom: component };
+            _this.forceUpdate();
+            return _this;
+        };
+        _this.getDom = function () {
+            return _this.props.dom;
+        };
+        _this.baseZoomEffect = function () {
+            var _a = _this._dialogTranslate, lastX = _a.lastX, lastY = _a.lastY;
+            _this._dialogRef.current.animate([
+                // key frames
+                { transform: "translate(".concat(lastX, "px, ").concat(lastY, "px) scale(1)") },
+                { transform: "translate(".concat(lastX, "px, ").concat(lastY, "px) scale(1.01)") },
+                // { boxShadow: `0 0 20px red`},
+                { transform: "translate(".concat(lastX, "px, ").concat(lastY, "px) scale(1)") }
+            ], {
+                // sync options
+                duration: 300,
+                iterations: 1
+            });
+        };
+        _this.withBackdrop = function (body, header, actions) {
+            _this.orderPositionWithReference();
+            var _a = _this._dialogOptions.backdrop, backgroundColor = _a.backgroundColor, opacity = _a.opacity;
+            var bgCl = hexToRgb(backgroundColor, opacity);
+            return React.createElement("div", { className: "dialog-backdrop dialog-backdrop-show", ref: _this._backdropRef, style: {
+                    justifyContent: _this._dialogOptions.base.initialAnchor.horizontal,
+                    // alignItems: dialogOptions.base.initialAnchor.vertical,
+                    background: bgCl
+                }, onClick: function (e) {
+                    if (_this.state.fullscreenMode)
+                        return;
+                    if (_this._dialogOptions.backdrop.hideOnClick) {
+                        _this.close();
+                        return;
+                    }
+                    _this.baseZoomEffect();
+                } }, _this.Content(body, header, actions));
+        };
+        _this.switchFullScreen = function () {
+            if (!_this.state.fullscreenMode) {
+                _this._dialogRef.current.classList.add('fullscreen');
+            }
+            else {
+                // alert(2);
+                _this._dialogRef.current.classList.remove('fullscreen');
+            }
+            _this._dialogRef.current.classList.add('no-user-select');
+            setTimeout(function () {
+                _this._dialogRef.current.classList.remove('no-user-select');
+            }, 500);
+            _this.setState(function (prevState) { return (__assign(__assign({}, prevState), { fullscreenMode: !_this.state.fullscreenMode })); });
+        };
+        _this.Placeholder = function (placeholder) {
+            var bgColor = _this._dialogOptions.base.style.backgroundColor ?
+                _this._dialogOptions.base.style.backgroundColor : "#FFFFFF";
+            var bg = _this._dialogOptions.base.style.background ?
+                _this._dialogOptions.base.style.background : "#FFFFFF";
+            return React.createElement("div", { className: 'dialog-content-placeholder', style: {
+                    backgroundColor: bgColor,
+                    background: bg,
+                    display: placeholder ? 'flex' : 'none',
+                } }, placeholder);
+        };
+        _this.Header = function (header) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            var CustomHeader = (_a = _this._dialogOptions.slot) === null || _a === void 0 ? void 0 : _a.header;
+            var staticProps = {
+                dialogValues: _this.state.values,
+                dialogOptions: _this._dialogOptions,
+                // apiRef: { current: this as IDialogRef } as RefObject<IDialogRef|IDialogCloseRef>
+                // apiRef: { current: this as IDialogRef }
+                dialog: _this
+            };
+            var headerProps = {};
+            if (_this._dialogOptions.slotProps.header) {
+                headerProps = _this._dialogOptions.slotProps.header(staticProps);
+            }
+            if (_this._dialogOptions.slot.header) {
+                return React.createElement("div", { onDoubleClick: function (event) {
+                        if (_this._fullscreen) {
+                            _this.switchFullScreen();
+                        }
+                    }, style: (_c = (_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : '') },
+                    React.createElement(WithHeaderFooterContext, __assign({}, staticProps),
+                        React.createElement(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this }))));
+            }
+            if (header instanceof Function) {
+                return React.createElement("div", { onDoubleClick: function (event) {
+                        if (_this._fullscreen) {
+                            _this.switchFullScreen();
+                        }
+                    }, style: (_e = (_d = _this._dialogOptions.base) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : '') },
+                    header(_this),
+                    (_this._closeable || _this._fullscreen) &&
+                        React.createElement(WithHeaderFooterContext, { dialog: _this },
+                            React.createElement(Futures_1.DialogHeaderActionsWrapper, null,
+                                _this._fullscreen &&
+                                    React.createElement(Futures_1.DialogFullscreenAction, null),
+                                _this._closeable &&
+                                    React.createElement(Futures_1.DialogCloseAction, null))));
+            }
+            return React.createElement("div", { style: (_g = (_f = _this._dialogOptions.base) === null || _f === void 0 ? void 0 : _f.header) === null || _g === void 0 ? void 0 : _g.style, className: 'drag-handle dialog-header' }, header);
+        };
+        _this.getSize = function () {
+            return _this._dialogSize;
+        };
+        _this.Body = function (body) {
+            if (body instanceof Function) {
+                return React.createElement("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' } },
+                    _this.Placeholder(_this._holder),
+                    body(_this));
+            }
+            return React.createElement("div", { style: { height: '100%', padding: 10 } }, _this._holder ?
+                _this.Placeholder(_this._holder)
+                :
+                    //@ts-ignore
+                    body);
+        };
+        _this.Footer = function (actions) {
+            var _a, _b, _c;
+            var CustomFooter = (_a = _this._dialogOptions.slot) === null || _a === void 0 ? void 0 : _a.footer;
+            var staticProps = {
+                dialogValues: _this.state.values,
+                dialogOptions: _this._dialogOptions,
+                // apiRef: { current: this as IDialogRef } as RefObject<IDialogRef|IDialogCloseRef>
+                // apiRef: { current: this as IDialogRef }
+                dialog: _this
+            };
+            var footerProps = {};
+            if (_this._dialogOptions.slotProps.footer) {
+                footerProps = _this._dialogOptions.slotProps.footer({
+                    dialogValues: _this.state.values,
+                    dialogOptions: _this._dialogOptions,
+                    inProcess: _this.isInProcess()
+                });
+            }
+            console.log('FooterSlot_props_Y', footerProps, staticProps);
+            return React.createElement("div", { className: 'dialog-footer', style: (_c = (_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.footer) === null || _c === void 0 ? void 0 : _c.style },
+                React.createElement("div", null,
+                    React.createElement(WithHeaderFooterContext, __assign({}, staticProps, { dialog: _this }), _this._dialogOptions.slot.footer ?
+                        /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
+                        React.createElement(CustomFooter, __assign({}, staticProps, footerProps))
+                        :
+                            React.createElement(Futures_1.DialogProcessing, null)
+                    /*<CircularProgress size={20} inProcess={this._inProcess} color={this._dialogOptions.progress.color}/>*/
+                    )),
+                _this.Actions(actions));
+        };
+        _this.Actions = function (actions) {
+            return React.createElement("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' } }, actions.map(function (action, index) {
+                // const ref = this.slotActionsRef[index];
+                // const ActionSlot = this._dialogOptions?.slot?.action;
+                // // console.log('ActionSlot',ActionSlot);
+                // if (ActionSlot) {
+                //     return <ActionSlot
+                //         ref={ref}
+                //         key={index.toString()}
+                //         {...this._dialogOptions?.slotProps?.action}
+                //         onClick={ (event: React.MouseEvent) => {
+                //             action._onClickSlot( ref, this );
+                //         }}
+                //         label={action.options.label}
+                //         style={{...this._dialogOptions.slotProps?.action?.style, ...action.options.style }}
+                //     />
+                //
+                // }
+                var referencedAction = _this.initializeActionRef(action.name);
+                // this._actions[action.name] = referencedAction.current
+                return React.createElement(DialogActionBase_1.default, { name: action.name, ref: referencedAction, key: index.toString(), dialogBaseComponent: _this, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), 
+                    // onLoad={ dialogAction => {
+                    //     action.baseDialogAction = dialogAction;
+                    // }}
+                    style: action.options.style, baseStyle: _this._dialogOptions.base.actions.baseStyle, fontFamily: _this._fontFamily, stateListener: action._stateListener });
+            }));
+        };
+        _this.Content = function (body, header, actions) {
+            var _a;
+            var _b, _c;
+            if (_this._dialogRef.current) {
+                // Öncelikle ref'i al ve input elemanlarını bul
+                var inputElements = _this._dialogRef.current.querySelectorAll("input");
+                // Tüm input elemanlarını döngüye al
+                inputElements.forEach(function (input) {
+                    console.log(input); // Her bir input elemanını burada işleyebilirsiniz
+                    // Örneğin, input değerini okuma veya ayarlama
+                    input.addEventListener('keydown', function (e) { return e.key === "Enter" && e.preventDefault(); }); // Değerini boşaltmak için örnek
+                    input.addEventListener('keyup', function (e) { return e.key === "Enter" && e.preventDefault(); }); // Değerini boşaltmak için örnek
+                    input.addEventListener('keypress', function (e) { return e.key === "Enter" && e.preventDefault(); }); // Değerini boşaltmak için örnek
+                });
+            }
+            console.log('Content:', actions);
+            var xKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "left" : "marginLeft";
+            var yKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "top" : "marginTop";
+            return React.createElement(react_draggable_1.default, { disabled: !_this._draggable || _this.state.fullscreenMode, axis: 'both', handle: _this._draggable ? '.drag-handle' : '', scale: 1, ref: _this._backdropRef, onDrag: function (event, data) {
+                    event.stopPropagation();
+                    _this._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
+                } },
+                React.createElement("div", { id: "dialog-main", ref: _this._dialogRef, onClick: function (e) {
+                        e.stopPropagation();
+                    }, onKeyDown: function (e) {
+                        if (typeof _this.props.keyboardListener === "function") {
+                            // @ts-ignore
+                            _this.props.keyboardListener(e.key, _this);
+                        }
+                    }, 
+                    // className={this._dialogSize.width === 'auto' ? 'auto' : `dialog-width-${this._dialogSize.width} dialog-main show-opacity show-position-${this._dialogOptions.base.initialAnchor.vertical}`}
+                    className: _this._dialogOptions.base.size.width === 'auto' ? 'auto' : "dialog-width-".concat(_this._dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(_this._dialogOptions.base.initialAnchor.vertical), style: __assign(__assign(__assign(__assign({ alignSelf: _this._dialogOptions.base.initialAnchor.vertical, height: (_b = _this._dialogOptions.base.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof _this._dialogOptions.base.size.width === "number" ? { width: _this._dialogOptions.base.size.width } : null), (_a = { outline: 'none' }, _a[yKey] = _this.dialogPosFromMultipleDialogs.top + 'px', _a[xKey] = _this.dialogPosFromMultipleDialogs.left + 'px', _a)), _this._dialogOptions.base.style), { fontFamily: _this._fontFamily }) },
+                    React.createElement(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack },
+                        (_this._header || _this._dialogOptions.slot.header) && _this.Header(header),
+                        _this.Body(body),
+                        _this.Footer(actions)),
+                    (_this._dialogOptions.base.resizeable) &&
+                        React.createElement(React.Fragment, null,
+                            React.createElement("div", { className: "resizable-handle", onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown },
+                                React.createElement(ResizeIcon_1.default, { color: '#286e94' })))));
+        };
+        _this.render = function () {
+            return _this.withBackdrop(_this._body, _this._header, _this._actions);
+        };
+        _this.state = __assign(__assign({}, _this._initialState), { fullscreenMode: false, isResizing: false, values: props.initialValues, inProcess: { inProcess: false } });
+        var defaultOptions = {
+            base: {
+                initialAnchor: {
+                    vertical: "flex-start",
+                    horizontal: "center"
+                },
+                size: {
+                    width: "md",
+                    height: "initial"
+                },
+                actions: {
+                    baseStyle: {
+                        padding: '3px 20px',
+                    }
+                }
+            }
+        };
+        _this._dialogOptions = (0, lodash_1.merge)({}, defaultOptions, window["dialogOptions"], props.options);
+        _this._fontFamily = (_a = _this._dialogOptions.base.style.fontFamily) !== null && _a !== void 0 ? _a : 'Arial';
+        _this._header = props.header;
+        _this._body = props.body;
+        _this._actions = props.actions;
+        _this._backdropRef = React.createRef();
+        _this._dialogRef = React.createRef();
+        _this._dialogBodyRef = React.createRef();
+        _this._inProcess = { inProcess: false };
+        _this._snackbarRef = React.createRef();
+        if (props.dialogSize) {
+            _this._dialogSize = props.dialogSize;
+        }
+        else {
+            _this._dialogSize = { width: 'md' };
+        }
+        _this._dialogOptions = (0, lodash_1.merge)({}, {
+            base: {
+                size: _this._dialogSize
+            }
+        }, _this._dialogOptions);
+        // this._draggable = props.draggable ? props.draggable : this._dialogOptions.base.draggable;
+        _this._draggable = typeof _this._dialogOptions.base.draggable === "boolean" ? _this._dialogOptions.base.draggable : true;
+        // this._resizeable = props.resizeable ? props.resizeable : this._dialogOptions.base.resizeable;
+        _this._resizeable = typeof _this._dialogOptions.base.resizeable === "boolean" ? _this._dialogOptions.base.resizeable : false;
+        _this._closeable = typeof _this._dialogOptions.base.closeable === "boolean" ? _this._dialogOptions.base.closeable : false;
+        _this._fullscreen = typeof _this._dialogOptions.base.fullscreen === "boolean" ? _this._dialogOptions.base.fullscreen : false;
+        _this._order = props.order;
+        _this._holder = props.initialHolder;
+        _this._parent = props.parent;
+        _this._onClose = props.onClose;
+        _this.dialogPosFromMultipleDialogs = _this.dialogAutoPos();
+        if (_this._dialogOptions.base.resizeable) {
+            _this._Resizeable = new Resizeable_1.default();
+        }
+        // Initialize _actionRefs as an empty object
+        _this._actionRefs = {};
+        // Initialize Slots
+        // this._slots = this._dialogOptions.base.slots
+        _this._initialValues = props.initialValues;
+        return _this;
+    }
+    Object.defineProperty(DialogBase.prototype, "parent", {
+        get: function () {
+            return this._parent;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogBase.prototype, "fullscreenMode", {
+        get: function () {
+            return this.state.fullscreenMode;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogBase.prototype, "dialogOptions", {
+        get: function () {
+            return this._dialogOptions;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogBase.prototype, "formikProps", {
+        // get state(): T | Readonly<BaseDialogState> {
+        //     return super.state
+        // }
+        get: function () {
+            return this._formikProps;
+        },
+        set: function (value) {
+            this._formikProps = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogBase.prototype, "formikValidate", {
+        get: function () {
+            var _this = this;
+            if (!this.formikProps) {
+                new Error("No any formik Props");
+            }
+            return new Promise(function (resolve, reject) {
+                _this.formikProps.validateForm();
+                setTimeout(function () {
+                    if (Object.keys(_this.formikProps.errors).length) {
+                        reject(_this.formikProps.errors);
+                        return;
+                    }
+                    resolve(_this.formikProps);
+                }, 100);
+                return;
+            });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogBase.prototype, "values", {
+        get: function () {
+            return this.state.values;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DialogBase.prototype.setValues = function (values, callbackFn) {
+        var prevValues = __assign({}, this.state.values);
+        // this.setState( prevState => ({...prevState, values: {...prevValues, ...values}}) );
+        this.setState(function (prevState) { return (__assign(__assign({}, prevState), { values: __assign(__assign({}, prevValues), values) })); }, function () {
+            if (typeof callbackFn === 'function') {
+                callbackFn();
+            }
+        });
+    };
+    DialogBase.prototype.setValue = function (key, values) {
+        this.setState(function (prevState) {
+            var clonedVal = __assign({}, prevState.values);
+            clonedVal[key] = values;
+            return __assign(__assign({}, prevState), { values: clonedVal });
+        });
+    };
+    DialogBase.prototype.componentDidMount = function () {
+        var _this = this;
+        var _a, _b;
+        // İlk konumları global seçeneklerden al
+        var _c = this._dialogOptions.snackbar.anchorOrigin, vertical = _c.vertical, horizontal = _c.horizontal;
+        var initialAnchor = { vertical: vertical, horizontal: horizontal };
+        // Kullanıcı tanımlı konumlar varsa, onları ilk konumlarla birleştir
+        this._snackbarAnchor = __assign(__assign(__assign({}, initialAnchor), (((_a = this.props.snackbarAnchor) === null || _a === void 0 ? void 0 : _a.vertical) ? { vertical: this.props.snackbarAnchor.vertical } : {})), (((_b = this.props.snackbarAnchor) === null || _b === void 0 ? void 0 : _b.horizontal) ? { horizontal: this.props.snackbarAnchor.horizontal } : {}));
+        // didMountCallback varsa, promise ile çağır
+        if (undefined !== this.props.didMountCallback && typeof this.props.didMountCallback === "function") {
+            // @ts-ignore
+            // this.props.didMountCallback( this )
+            new Promise(function (resolve, reject) {
+                try {
+                    setTimeout(function () {
+                        resolve(true);
+                    }, _this._shInterval);
+                }
+                catch (e) {
+                    // fail(e);
+                }
+            }).then(function (completed) {
+                if (completed) {
+                    // @ts-ignore
+                    _this.props.didMountCallback(_this);
+                }
+            });
+        }
+        if (this._dialogRef.current) {
+            this._dialogRef.current.tabIndex = 0; // Odaklanabilir hale getirir
+            this._dialogRef.current.focus();
+            if (this._Resizeable) {
+                this._Resizeable.setContainer(this._dialogRef.current);
+            }
+        }
+        // Initialize SlotsProps
+        // this._slots?.forEach( (slot: any) => {
+        //     this._slotProps[slot.name] = slot;
+        // });
+        // // Callback Slot Props
+        // try{
+        //     this._dialogOptions.base?.slotProps(this._slotProps);
+        // } catch (e){
+        //
+        // }
+        // Parent objesinin accessFrom özelliğini ayarla
+        this.props.parent.accessFrom = "internal";
+    };
+    DialogBase.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
+        /*if(this._dialogRef.current && this._dialogOptions.base.resizeable && !this._Resizeable){
+            console.log('this._Resizeable.onResizeListener', this._Resizeable );
+
+            this._Resizeable.onResizeListener((width, height) => {
+                console.log('this._Resizeable.onResizeListener', width, height );
+                this._dialogRef.current.style.width = width + 'px';
+                this._dialogRef.current.style.height = height + 'px';
+            })
+        }*/
+    };
+    // getSnapshotBeforeUpdate(prevProps: Readonly<BaseDialogProps>, prevState: Readonly<BaseDialogState>): any {
+    // }
+    DialogBase.prototype.componentWillUnmount = function () {
+        if (this._Resizeable) {
+            // Temizlik fonksiyonu
+            this._Resizeable.cleanUp();
+        }
+    };
+    DialogBase.prototype.setState = function (state, callback) {
+        var _this = this;
+        var prevState = this.state;
+        _super.prototype.setState.call(this, state, function () {
+            var _a;
+            // if( typeof this.props.stateListener === "function" && JSON.stringify(prevState) !== JSON.stringify(state)  ){
+            if (typeof _this.props.stateListener === "function" && !(0, lodash_isequal_1.default)(prevState, state)) {
+                _this.props.stateListener(_this.state, _this.state.values, _this);
+            }
+            for (var actionKey in _this._actionRefs) {
+                var action = _this._actionRefs[actionKey];
+                if (typeof action.current._stateListener === "function") {
+                    // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
+                    // When using ref
+                    action.current._stateListener(_this.state, _this.state.values, (_a = _this._actionRefs[action.current.name]) === null || _a === void 0 ? void 0 : _a.current, _this);
+                    // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
+                }
+                // console.log('setStateRunned', action.current._stateListener, action.current.name, this._actionRefs, this );
+            }
+            // this._actions.forEach( action => {
+            //     if( typeof action.getStateListener() === "function" ){
+            //         // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
+            //         // When using ref
+            //         action.getStateListener()( this.state, this.state.values, this._actionRefs[action.name]?.current, this );
+            //         // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
+            //     }
+            // })
+            if (callback) {
+                setTimeout(function () {
+                    callback();
+                }, 100);
+            }
+        });
+    };
+    DialogBase.prototype.setHeader = function (header) {
+        this._header = header;
+        this.forceUpdate();
+        return this;
+    };
+    DialogBase.prototype.setBody = function (body) {
+        this._body = body;
+        this.forceUpdate();
+        return this;
+    };
+    DialogBase.prototype.addActions = function (actions) {
+        this._actions = actions;
+        return this;
+    };
+    DialogBase.prototype.addAction = function (action) {
+        this._actions.push(action);
+        return this;
+    };
+    DialogBase.prototype.stateListener = function (listener) {
+        this._stateListener = listener;
+        return this;
+    };
+    DialogBase.prototype.keyboardListener = function (listener) {
+        this._keyboardListener = listener;
+        return this;
+    };
+    DialogBase.prototype.initialHolder = function (holder) {
+        this._initialHolder = holder;
+        return this;
+    };
+    // protected initialValues<T extends TValues>(values: T): DialogWithValues<T> {
+    //
+    //     this.setState( prevState => {
+    //         return {
+    //             ...prevState, values
+    //         }
+    //     })
+    //     // Burada yeni tipli bir sınıfa dönüyoruz
+    //     return this as unknown as DialogWithValues<T>;
+    // }
+    DialogBase.prototype.onClose = function (callback) {
+        this._onClose = callback;
+        return this;
+    };
+    Object.defineProperty(DialogBase.prototype, "actions", {
+        get: function () {
+            var _this = this;
+            var __actions = {};
+            this._actions.forEach(function (action, index) {
+                // if (!this.slotActionsRef[index]) {
+                //     this.slotActionsRef[index] = createRef();
+                // }
+                var _a, _b;
+                /**
+                 * Herbir action Ref Objecsine atandi Her Ref Objeside BaseDialogActionBase ine baglandi
+                 * inital Actionlar DialogAction i reference aliyor ve buda ic method erisimlerine engel oluyor DialogActionBase in ötelliklerine ulasamiyor o yuzden
+                 * hetBir Action ic Reference ataniyor ve ic referencedeki methodlar disaridan cagirilabiliyor
+                 * */
+                __actions[action.name] = (_b = (_a = _this._actionRefs[action.name]) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : action;
+            });
+            return __actions;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogBase.prototype, "snackbar", {
+        // Reference: https://notistack.com/api-reference#mutual-props
+        get: function () {
+            var _this = this;
+            var _a;
+            var s = (_a = this._snackbarRef) === null || _a === void 0 ? void 0 : _a.current;
+            var sId = Math.random().toString(36).substring(2, 9);
+            var openMe = function (message, severity, key, action, autoHideDuration) {
+                s === null || s === void 0 ? void 0 : s.enqueueSnackbar(message, __assign({ autoHideDuration: autoHideDuration !== undefined ? autoHideDuration : _this._dialogOptions.snackbar.autoHideDuration, variant: severity, 
+                    // maxSnack: this._dialogOptions.snackbar.maxSnack,
+                    key: key !== null && key !== void 0 ? key : sId, anchorOrigin: {
+                        vertical: _this._dialogOptions.snackbar.anchorOrigin.vertical,
+                        horizontal: _this._dialogOptions.snackbar.anchorOrigin.horizontal,
+                    } }, action ? { action: function (key) {
+                        return action(key, s);
+                    } } : {}));
+            };
+            var open = function (message, severity, key, action, autoHideDuration) {
+                openMe(message, severity, key, action, autoHideDuration);
+            };
+            var openX = function (_a) {
+                var message = _a.message, severity = _a.severity, key = _a.key, action = _a.action, autoHideDuration = _a.autoHideDuration;
+                openMe(message, severity, key, action, autoHideDuration);
+            };
+            var close = function (key) {
+                s === null || s === void 0 ? void 0 : s.closeSnackbar(key);
+            };
+            return {
+                open: open,
+                openX: openX,
+                close: close
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DialogBase.prototype.show = function (callback) {
+        console.log('this._actions', this._actions);
+        this._dom = document.createElement('div');
+        this._dom.setAttribute('role', 'presentation');
+        this._dom.classList.add('appinsource-dialog-root');
+        document.body.appendChild(this._dom);
+        var root = (0, client_1.createRoot)(this._dom);
+        var props = {
+            ref: this._innerRef,
+            options: this._dialogOptions,
+            header: this._header,
+            body: this._body,
+            actions: this._actions,
+            stateListener: this._stateListener,
+            dialogSize: this._dialogSize,
+            didMountCallback: callback,
+            keyboardListener: this._keyboardListener,
+            /**Dialog order with Reference Element, like before-after-same reference*/
+            order: this._order,
+            // initialState: this._initialState,
+            // initialValues: this._initialValues,
+            // initialUserProps: this._initialUserProps,
+            initialValues: this._initialValues,
+            initialHolder: this._initialHolder,
+            snackbarAnchor: this._snackbarAnchor,
+            dom: this._dom,
+            parent: this,
+            onClose: this._onClose,
+            root: root,
+        };
+        // @ts-ignore
+        root.render(React.createElement(DialogBase, props));
+    };
+    return DialogBase;
+}(react_1.Component));
+exports.default = DialogBase;