react-dialogger 1.1.22 → 1.1.23

package/components/DialogBase.d.ts

@@ -64,6 +64,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
      * which is not assignable to that type.
      * */
     private readonly _fontFamily;
+    private _storedBounds;
     constructor(props?: Readonly<BaseDialogProps>);
     get fullscreenMode(): boolean;
     private initializeActionRef;
@@ -81,7 +82,6 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     private dialogAutoPos;
     componentDidMount(): void;
     onResize(callbackFn: (size: IDialogSize, dialog: IDialogDef) => void): void;
-    componentDidUpdate(prevProps: Readonly<BaseDialogProps>, prevState: Readonly<BaseDialogState>, snapshot?: any): void;
     componentWillUnmount(): void;
     setState<K extends keyof BaseDialogState>(state: ((prevState: Readonly<BaseDialogState>, props: Readonly<BaseDialogProps>) => (Pick<BaseDialogState, K> | BaseDialogState | null)) | Pick<BaseDialogState, K> | BaseDialogState | null, callback?: () => void): void;
     protected setHeader(header: TDialogCallbackNodeFn): DialogBase;

package/components/DialogBase.js

@@ -65,6 +65,8 @@ 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");
+// Bounds methods
+var helpers_1 = require("../helpers");
 var WithSnackbar = function (props) {
     return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
 };
@@ -87,11 +89,12 @@ var hexToRgb = function (hex, opacity) {
     return '';
 };
 exports.DialogHeaderFooterContext = React.createContext(null);
+// export const DialogContext = React.createContext(null);
 var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
     function DialogBase(props) {
         if (props === void 0) { props = {}; }
-        var _a;
+        var _a, _b;
         var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
         _this._shInterval = 300;
@@ -297,6 +300,7 @@ var DialogBase = /** @class */ (function (_super) {
             return _this._dialogSize;
         };
         _this.baseZoomEffect = function () {
+            console.log('this._dialogTranslate', _this._dialogTranslate);
             var _a = _this._dialogTranslate, lastX = _a.lastX, lastY = _a.lastY;
             _this._dialogRef.current.animate([
                 // key frames
@@ -521,9 +525,26 @@ var DialogBase = /** @class */ (function (_super) {
             console.log('Content:', actions);
             var xKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "left" : "marginLeft";
             var yKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "top" : "marginTop";
+            /**
+             * default null
+             * eget momoize islemi uygulanmissa read from memory
+             * */
+            var bounds = _this._storedBounds;
             return (0, jsx_runtime_1.jsx)(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 };
+                }, onStop: function (event, data) {
+                    var _a;
+                    event.stopPropagation();
+                    event.preventDefault();
+                    console.log('onDragStop', 'fired');
+                    var _b = (_a = _this._dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), width = _b.width, height = _b.height, x = _b.x, y = _b.y;
+                    (0, helpers_1.setDialogBounds)(_this._dialogOptions.base.id, {
+                        width: width,
+                        height: height,
+                        x: x,
+                        y: y
+                    }, _this._dialogRef);
                 }, children: (0, jsx_runtime_1.jsxs)("div", { id: "dialog-main", ref: _this._dialogRef, onClick: function (e) {
                         e.stopPropagation();
                     }, onKeyDown: function (e) {
@@ -533,9 +554,13 @@ var DialogBase = /** @class */ (function (_super) {
                         }
                     }, 
                     // 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 }), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack, children: [(_this._header || _this._dialogOptions.slot.header) && _this.Header(header), _this.Body(body), (0, jsx_runtime_1.jsx)(_this.Footer, { ref: _this._footeRef, actions: actions })] }), (_this._dialogOptions.base.resizeable) &&
+                    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(__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 }), bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : null), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack, children: [(_this._header || _this._dialogOptions.slot.header) && _this.Header(header), _this.Body(body), (0, jsx_runtime_1.jsx)(_this.Footer, { ref: _this._footeRef, actions: actions })] }), (_this._dialogOptions.base.resizeable) &&
                             (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
         };
+        // render = () => {
+        //
+        //     return this.withBackdrop(this._body, this._header, this._actions)
+        // }
         _this.render = function () {
             return _this.withBackdrop(_this._body, _this._header, _this._actions);
         };
@@ -598,6 +623,10 @@ var DialogBase = /** @class */ (function (_super) {
         // this._slots = this._dialogOptions.base.slots
         _this._initialValues = props.initialValues;
         _this._resizeListenersStore = [];
+        // Fetch Initial Dialog Bounds
+        var base = _this._dialogOptions.base;
+        var memoBounds = base.memoBounds;
+        _this._storedBounds = ((_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, helpers_1.getDialogBounds)(base) : null;
         return _this;
     }
     Object.defineProperty(DialogBase.prototype, "parent", {
@@ -680,9 +709,10 @@ var DialogBase = /** @class */ (function (_super) {
     };
     DialogBase.prototype.componentDidMount = function () {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c, _d;
+        console.log('clalisan componentDidMount');
         // İlk konumları global seçeneklerden al
-        var _c = this._dialogOptions.snackbar.anchorOrigin, vertical = _c.vertical, horizontal = _c.horizontal;
+        var _e = this._dialogOptions.snackbar.anchorOrigin, vertical = _e.vertical, horizontal = _e.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 } : {}));
@@ -710,7 +740,7 @@ var DialogBase = /** @class */ (function (_super) {
             this._dialogRef.current.tabIndex = 0; // Odaklanabilir hale getirir
             this._dialogRef.current.focus();
             if (this._Resizeable) {
-                this._Resizeable.setContainer(this._dialogRef.current);
+                this._Resizeable.setContainer(this._dialogRef, this._dialogOptions);
                 this._Resizeable.onResizeListener(function (width, height) {
                     if (typeof _this.props.resizeListener === "function") {
                         _this._resizeListenersStore.push(_this.props.resizeListener);
@@ -736,6 +766,28 @@ var DialogBase = /** @class */ (function (_super) {
         // }
         // Parent objesinin accessFrom özelliğini ayarla
         this.props.parent.accessFrom = "internal";
+        // Check This
+        try {
+            var t = window.localStorage.getItem('react-super-dialog');
+            console.log('Parsed Bounds Store', JSON.parse(t));
+        }
+        catch (e) {
+        }
+        // Register Dialog Bounds
+        if ((_c = this._dialogOptions.base) === null || _c === void 0 ? void 0 : _c.memoBounds) {
+            if (!helpers_1.InitDialogMemoizeBoundsDeclared) {
+                throw new Error('InitDialogMemoizeBounds is not defined. Please make sure to declare it only once, at the top‑level of your module—outside of App or its render logic.\n' +
+                    'InitDialogMemoizeBounds()\n' +
+                    'const App() => {...');
+            }
+            var _f = (_d = this._dialogRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect(), width = _f.width, height = _f.height, x = _f.x, y = _f.y;
+            (0, helpers_1.dialogRegister)(this._dialogOptions.base, {
+                width: width,
+                height: height,
+                x: x,
+                y: y
+            });
+        }
     };
     DialogBase.prototype.onResize = function (callbackFn) {
         if (typeof callbackFn === "function") {
@@ -743,32 +795,8 @@ var DialogBase = /** @class */ (function (_super) {
             // Bu olay overwite olmasinin onune gecer
             // Cunku en sonku callback calistirildigi icin ornedin header ve
             this._resizeListenersStore.push(callbackFn);
-            // if(this._Resizeable){
-            //     this._Resizeable.onResizeListener((width, height) => {
-            //         // @ts-ignore
-            //         callbackFn({width, height}, this);
-            //     });
-            // }
         }
     };
-    // onResize: (callbackFn: (size: IDialogSize, dialog: IDialogDef) => void){
-    //     if(typeof callbackFn === "function"){
-    //
-    //     }
-    // }
-    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
@@ -921,8 +949,10 @@ var DialogBase = /** @class */ (function (_super) {
         this._dom.classList.add('appinsource-dialog-root');
         // Find root element
         var rootElement = document.getElementById('root');
+        var AppElement = rootElement.firstElementChild;
         if (rootElement) {
-            rootElement.appendChild(this._dom);
+            // rootElement.appendChild(this._dom);
+            AppElement.prepend(this._dom);
         }
         else {
             document.body.appendChild(this._dom);

package/components/dialogBoundsMemoize.d.ts

@@ -0,0 +1,20 @@
+import { IBaseDialogOptions } from "../types/DialogTypes";
+/**
+ * RAM den okuyoruz...
+ * */
+declare const dialogInStore: (options: IBaseDialogOptions) => IDialogBoundDef | undefined;
+declare const dialogRegister: (options: IBaseDialogOptions, initialBounds: IDialogBoundsDef) => IDialogBoundsDef;
+declare const getDialogBounds: (options: IBaseDialogOptions) => IDialogBoundsDef | undefined;
+declare const setDialogBounds: (dialogId: string, bounds: IDialogBoundsDef, dialogRef: React.RefObject<any>) => void;
+export { dialogRegister, getDialogBounds, setDialogBounds, dialogInStore };
+export type IDialogBoundsMemoKey = string | number;
+export interface IDialogBoundsDef {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+export interface IDialogBoundDef {
+    id: string;
+    bounds: IDialogBoundsDef;
+}

package/components/dialogBoundsMemoize.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogInStore = exports.setDialogBounds = exports.getDialogBounds = exports.dialogRegister = void 0;
+var initDialogMemoizeBounds_1 = require("../hooks/initDialogMemoizeBounds");
+var BOUNDS_STORE_KEY = 'react-super-dialog';
+// const boundStoreExists = () => {
+//     try{
+//         return !!window.localStorage.getItem(BOUNDS_STORE_KEY);
+//     } catch (e){
+//         return false;
+//     }
+// }
+// const createBoundStore = () => {
+//     if (!boundStoreExists()) {
+//         try{
+//             window.localStorage.setItem(BOUNDS_STORE_KEY, JSON.stringify([]));
+//         } catch (e){
+//             console.log(e);
+//         }
+//     }
+// }
+/**
+ * RAM den okuyoruz...
+ * */
+var dialogInStore = function (options) {
+    var stores = initDialogMemoizeBounds_1.registeredDialogs;
+    console.log('dialogInStoreX1', stores);
+    if (!stores)
+        return undefined;
+    var parsedStores = stores; // JSON.parse(stores);
+    var foundedStore = parsedStores.find(function (store) { return store.id === options.id; });
+    return foundedStore;
+};
+exports.dialogInStore = dialogInStore;
+var dialogRegister = function (options, initialBounds) {
+    console.log('Regsister fired!!!', options);
+    if (dialogInStore(options))
+        return;
+    if (!options.id) {
+        throw new Error('Dialog bounds can not be memoized. Dialog id is required.');
+    }
+    // createBoundStore();
+    var newBounds = {
+        id: options.id,
+        bounds: {
+            width: initialBounds.width,
+            height: initialBounds.height,
+            x: initialBounds.x,
+            y: initialBounds.y + 100
+        }
+    };
+    var foundedDialog = initDialogMemoizeBounds_1.registeredDialogs.find(function (b) { return b.id === options.id; });
+    console.log('foundedDialog', foundedDialog);
+    if (!foundedDialog) {
+        initDialogMemoizeBounds_1.registeredDialogs.push(newBounds);
+    }
+    console.log('foundedDialog_2', initDialogMemoizeBounds_1.registeredDialogs);
+    // Register to Cookie
+    try {
+        window.localStorage.setItem(BOUNDS_STORE_KEY, JSON.stringify(initDialogMemoizeBounds_1.registeredDialogs));
+    }
+    catch (e) {
+        console.log(e);
+    }
+    // registeredDialogs.push(newBounds);
+    console.log('Dialog_Bounds, initialBounds-A', initialBounds);
+    var bounds = getDialogBounds(options);
+    return bounds;
+};
+exports.dialogRegister = dialogRegister;
+var getDialogBounds = function (options) {
+    var dialog = dialogInStore(options);
+    if (!options.id) {
+        throw new Error('Dialog bounds can not be memoized. Dialog id is required.');
+    }
+    // Eget local vaiable icinde bulunamassa localStorage'dan al
+    if (!dialog) {
+        var boundsRaw = window.localStorage.getItem(BOUNDS_STORE_KEY);
+        var boundsArray = boundsRaw ? JSON.parse(boundsRaw) : [];
+        var founded = boundsArray.find(function (b) { return b.id === options.id; });
+        if (founded) {
+            return {
+                width: founded.bounds.width,
+                height: founded.bounds.height,
+                x: founded.bounds.x,
+                y: founded.bounds.y
+            };
+        }
+    }
+    if (dialog) {
+        return {
+            width: dialog.bounds.width,
+            height: dialog.bounds.height,
+            x: dialog.bounds.x,
+            y: dialog.bounds.y
+        };
+    }
+    return undefined;
+};
+exports.getDialogBounds = getDialogBounds;
+var setDialogBounds = function (dialogId, bounds, dialogRef) {
+    var newBounds = {
+        id: dialogId,
+        bounds: bounds
+    };
+    var founded = initDialogMemoizeBounds_1.registeredDialogs.find(function (b) { return b.id === dialogId; });
+    if (founded) {
+        founded.bounds = bounds;
+        try {
+            window.localStorage.setItem(BOUNDS_STORE_KEY, JSON.stringify(initDialogMemoizeBounds_1.registeredDialogs));
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
+};
+exports.setDialogBounds = setDialogBounds;

package/helpers/BoundTypes.d.ts

@@ -0,0 +1,11 @@
+export type IDialogBoundsMemoKey = string;
+export interface IDialogBoundsDef {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+export interface IDialogBoundDef {
+    id: string;
+    bounds: IDialogBoundsDef;
+}

package/helpers/BoundTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/helpers/dialogBoundsMemoize.d.ts

@@ -0,0 +1,5 @@
+import { IDialogBoundsDef } from "./BoundTypes";
+import { IBaseDialogOptions } from "../types/DialogTypes";
+export declare const dialogRegister: (options: IBaseDialogOptions, initialBounds: IDialogBoundsDef) => IDialogBoundsDef;
+export declare const getDialogBounds: (options: IBaseDialogOptions) => IDialogBoundsDef | undefined;
+export declare const setDialogBounds: (dialogId: string, bounds: IDialogBoundsDef, dialogRef: React.RefObject<any>) => void;

package/helpers/dialogBoundsMemoize.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDialogBounds = exports.getDialogBounds = exports.dialogRegister = void 0;
+// import {registeredDialogs} from "../hooks/initDialogMemoizeBounds";
+var initDialogMemoizeBounds_1 = require("./initDialogMemoizeBounds");
+// const BOUNDS_STORE_KEY: IDialogBoundsMemoKey = 'react-super-dialog';
+// const boundStoreExists = () => {
+//     try{
+//         return !!window.localStorage.getItem(BOUNDS_STORE_KEY);
+//     } catch (e){
+//         return false;
+//     }
+// }
+// const createBoundStore = () => {
+//     if (!boundStoreExists()) {
+//         try{
+//             window.localStorage.setItem(BOUNDS_STORE_KEY, JSON.stringify([]));
+//         } catch (e){
+//             console.log(e);
+//         }
+//     }
+// }
+/**
+ * RAM den okuyoruz...
+ * */
+var dialogInStore = function (options) {
+    var stores = initDialogMemoizeBounds_1.registeredDialogs;
+    console.log('dialogInStoreX1', stores);
+    if (!stores)
+        return undefined;
+    var parsedStores = stores; // JSON.parse(stores);
+    var foundedStore = parsedStores.find(function (store) { return store.id === options.id; });
+    return foundedStore;
+};
+var dialogRegister = function (options, initialBounds) {
+    console.log('Regsister fired!!!', options);
+    if (dialogInStore(options))
+        return;
+    if (!options.id) {
+        throw new Error('Dialog bounds can not be memoized. Dialog id is required.');
+    }
+    // createBoundStore();
+    var newBounds = {
+        id: options.id,
+        bounds: {
+            width: initialBounds.width,
+            height: initialBounds.height,
+            x: initialBounds.x,
+            y: initialBounds.y + 100
+        }
+    };
+    var foundedDialog = initDialogMemoizeBounds_1.registeredDialogs.find(function (b) { return b.id === options.id; });
+    console.log('foundedDialog', foundedDialog);
+    if (!foundedDialog) {
+        initDialogMemoizeBounds_1.registeredDialogs.push(newBounds);
+    }
+    console.log('foundedDialog_2', initDialogMemoizeBounds_1.registeredDialogs);
+    // Register to Cookie
+    try {
+        window.localStorage.setItem(initDialogMemoizeBounds_1.BOUNDS_STORE_KEY, JSON.stringify(initDialogMemoizeBounds_1.registeredDialogs));
+    }
+    catch (e) {
+        console.log(e);
+    }
+    // registeredDialogs.push(newBounds);
+    console.log('Dialog_Bounds, initialBounds-A', initialBounds);
+    var bounds = (0, exports.getDialogBounds)(options);
+    return bounds;
+};
+exports.dialogRegister = dialogRegister;
+var getDialogBounds = function (options) {
+    var dialog = dialogInStore(options);
+    if (!options.id) {
+        throw new Error('Dialog bounds can not be memoized. Dialog id is required.');
+    }
+    // Eget local vaiable icinde bulunamassa localStorage'dan al
+    if (!dialog) {
+        var boundsRaw = window.localStorage.getItem(initDialogMemoizeBounds_1.BOUNDS_STORE_KEY);
+        var boundsArray = boundsRaw ? JSON.parse(boundsRaw) : [];
+        var founded = boundsArray.find(function (b) { return b.id === options.id; });
+        if (founded) {
+            return {
+                width: founded.bounds.width,
+                height: founded.bounds.height,
+                x: founded.bounds.x,
+                y: founded.bounds.y
+            };
+        }
+    }
+    if (dialog) {
+        return {
+            width: dialog.bounds.width,
+            height: dialog.bounds.height,
+            x: dialog.bounds.x,
+            y: dialog.bounds.y
+        };
+    }
+    return undefined;
+};
+exports.getDialogBounds = getDialogBounds;
+var setDialogBounds = function (dialogId, bounds, dialogRef) {
+    var newBounds = {
+        id: dialogId,
+        bounds: bounds
+    };
+    var founded = initDialogMemoizeBounds_1.registeredDialogs.find(function (b) { return b.id === dialogId; });
+    if (founded) {
+        founded.bounds = bounds;
+        try {
+            window.localStorage.setItem(initDialogMemoizeBounds_1.BOUNDS_STORE_KEY, JSON.stringify(initDialogMemoizeBounds_1.registeredDialogs));
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
+};
+exports.setDialogBounds = setDialogBounds;

package/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export { InitDialogMemoizeBounds, InitDialogMemoizeBoundsDeclared, registeredDialogs } from "./initDialogMemoizeBounds";
+export * from "./dialogBoundsMemoize";

package/helpers/index.js

@@ -0,0 +1,22 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registeredDialogs = exports.InitDialogMemoizeBoundsDeclared = exports.InitDialogMemoizeBounds = void 0;
+var initDialogMemoizeBounds_1 = require("./initDialogMemoizeBounds");
+Object.defineProperty(exports, "InitDialogMemoizeBounds", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBounds; } });
+Object.defineProperty(exports, "InitDialogMemoizeBoundsDeclared", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBoundsDeclared; } });
+Object.defineProperty(exports, "registeredDialogs", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.registeredDialogs; } });
+__exportStar(require("./dialogBoundsMemoize"), exports);

package/helpers/initDialogMemoizeBounds.d.ts

@@ -0,0 +1,5 @@
+import { IDialogBoundDef, IDialogBoundsMemoKey } from "./BoundTypes";
+export declare let registeredDialogs: IDialogBoundDef[];
+export declare let InitDialogMemoizeBoundsDeclared: boolean;
+export declare const BOUNDS_STORE_KEY: IDialogBoundsMemoKey;
+export declare const InitDialogMemoizeBounds: () => void;

package/helpers/initDialogMemoizeBounds.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitDialogMemoizeBounds = exports.BOUNDS_STORE_KEY = exports.InitDialogMemoizeBoundsDeclared = exports.registeredDialogs = void 0;
+// Sayfa ilk yuklendiginde calisacak
+exports.registeredDialogs = [];
+exports.InitDialogMemoizeBoundsDeclared = false;
+exports.BOUNDS_STORE_KEY = 'react-super-dialog';
+// Bu App level sevyesinde olmali
+// ILk Kayitlari olusturuyoruz
+var InitDialogMemoizeBounds = function () {
+    var boundStoreExists = function () {
+        try {
+            return !!window.localStorage.getItem(exports.BOUNDS_STORE_KEY);
+        }
+        catch (e) {
+            return false;
+        }
+    };
+    var createBoundStore = function () {
+        if (!boundStoreExists()) {
+            try {
+                window.localStorage.setItem(exports.BOUNDS_STORE_KEY, JSON.stringify([]));
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
+    };
+    var readFromStore = function () {
+        createBoundStore();
+        var boundsRaw = window.localStorage.getItem(exports.BOUNDS_STORE_KEY);
+        var boundsArray = boundsRaw ? JSON.parse(boundsRaw) : [];
+        return boundsArray;
+    };
+    console.log('readFromStore', readFromStore());
+    // Set this on App level
+    exports.registeredDialogs = readFromStore();
+    exports.InitDialogMemoizeBoundsDeclared = true;
+};
+exports.InitDialogMemoizeBounds = InitDialogMemoizeBounds;

package/hooks/initDialogMemoizeBounds.d.ts

@@ -0,0 +1,4 @@
+import { IDialogBoundDef } from "../components/dialogBoundsMemoize";
+export declare let registeredDialogs: IDialogBoundDef[];
+export declare let initDialogMemoizeBoundsDeclared: boolean;
+export declare const initDialogMemoizeBounds: () => void;

package/hooks/initDialogMemoizeBounds.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initDialogMemoizeBounds = exports.initDialogMemoizeBoundsDeclared = exports.registeredDialogs = void 0;
+// Sayfa ilk yuklendiginde calisacak
+exports.registeredDialogs = [];
+exports.initDialogMemoizeBoundsDeclared = false;
+// Bu App level sevyesinde olmali
+var initDialogMemoizeBounds = function () {
+    var BOUNDS_STORE_KEY = 'react-super-dialog';
+    var boundStoreExists = function () {
+        try {
+            return !!window.localStorage.getItem(BOUNDS_STORE_KEY);
+        }
+        catch (e) {
+            return false;
+        }
+    };
+    var createBoundStore = function () {
+        if (!boundStoreExists()) {
+            try {
+                window.localStorage.setItem(BOUNDS_STORE_KEY, JSON.stringify([]));
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
+    };
+    var readFromStore = function () {
+        createBoundStore();
+        var boundsRaw = window.localStorage.getItem(BOUNDS_STORE_KEY);
+        var boundsArray = boundsRaw ? JSON.parse(boundsRaw) : [];
+        return boundsArray;
+    };
+    console.log('readFromStore', readFromStore());
+    // Set this on App level
+    exports.registeredDialogs = readFromStore();
+    exports.initDialogMemoizeBoundsDeclared = true;
+};
+exports.initDialogMemoizeBounds = initDialogMemoizeBounds;

package/hooks/useDialogMemoizeBounds.d.ts

@@ -0,0 +1 @@
+export declare const useDialogMemoizeBounds: () => void;

package/hooks/useDialogMemoizeBounds.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogMemoizeBounds = void 0;
+// Sayfa ilk yuklendiginde calisacak
+var registeredDialogs = [];
+// Bu App level sevyesinde olmali
+var useDialogMemoizeBounds = function () {
+    var BOUNDS_STORE_KEY = 'react-super-dialog';
+    var boundStoreExists = function () {
+        try {
+            return !!window.localStorage.getItem(BOUNDS_STORE_KEY);
+        }
+        catch (e) {
+            return false;
+        }
+    };
+    var createBoundStore = function () {
+        if (!boundStoreExists()) {
+            try {
+                window.localStorage.setItem(BOUNDS_STORE_KEY, JSON.stringify([]));
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
+    };
+    var readFromStore = function () {
+        createBoundStore();
+        var boundsRaw = window.localStorage.getItem(BOUNDS_STORE_KEY);
+        var boundsArray = boundsRaw ? JSON.parse(boundsRaw) : [];
+        return boundsArray;
+    };
+    console.log('readFromStore', readFromStore());
+    // Set this on App level
+    registeredDialogs = readFromStore();
+};
+exports.useDialogMemoizeBounds = useDialogMemoizeBounds;

package/index.d.ts

@@ -6,3 +6,4 @@ export { default } from "./models/Dialog";
 export { DialogProcessing, DialogCloseAction, DialogFullscreenAction, DialogHeaderActionsWrapper, DialogInfoAction } from "./components/Futures";
 export { DialogAction, ActionProgress } from "./models/DialogAction";
 export { useDialogOptions } from "./hooks/useDialogOptions";
+export { InitDialogMemoizeBounds } from "./helpers/initDialogMemoizeBounds";

package/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDialogOptions = exports.ActionProgress = exports.DialogAction = exports.DialogInfoAction = exports.DialogHeaderActionsWrapper = exports.DialogFullscreenAction = exports.DialogCloseAction = exports.DialogProcessing = exports.default = exports.Dialog = void 0;
+exports.InitDialogMemoizeBounds = exports.useDialogOptions = exports.ActionProgress = exports.DialogAction = exports.DialogInfoAction = exports.DialogHeaderActionsWrapper = exports.DialogFullscreenAction = exports.DialogCloseAction = exports.DialogProcessing = exports.default = exports.Dialog = void 0;
 require("./styles/dialog.css");
 require("./styles/dialog.action.css");
 require("./styles/circular-progress.css");
@@ -24,3 +24,5 @@ Object.defineProperty(exports, "ActionProgress", { enumerable: true, get: functi
 // Hooks
 var useDialogOptions_1 = require("./hooks/useDialogOptions");
 Object.defineProperty(exports, "useDialogOptions", { enumerable: true, get: function () { return useDialogOptions_1.useDialogOptions; } });
+var initDialogMemoizeBounds_1 = require("./helpers/initDialogMemoizeBounds");
+Object.defineProperty(exports, "InitDialogMemoizeBounds", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBounds; } });

package/models/Resizeable.d.ts

@@ -1,4 +1,5 @@
 import { MouseEvent } from "react";
+import { DialogOptionsType } from "../types/DialogTypes";
 declare class Resizeable {
     onResizeListener: (callbackFn: (width: number, height: number) => void) => void;
     get width(): number;
@@ -10,8 +11,9 @@ declare class Resizeable {
     private _container;
     private _width;
     private _height;
+    private _dialogOptions;
     constructor();
-    setContainer: (container: HTMLElement) => void;
+    setContainer: (container: React.RefObject<HTMLDivElement>, options: DialogOptionsType) => void;
     private resizeHandleMouseUp;
     resizeHandleMouseDown: () => void;
     resizeHandleMouseMove: (e: MouseEvent) => void;

package/models/Resizeable.js

@@ -1,32 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var helpers_1 = require("../helpers");
 var Resizeable = /** @class */ (function () {
     function Resizeable() {
         var _this = this;
         this.onResizeListener = function (callbackFn) {
             _this._onResizeListener = callbackFn;
         };
-        this.setContainer = function (container) {
+        this.setContainer = function (container, options) {
             _this._container = container;
+            _this._dialogOptions = options;
         };
         this.resizeHandleMouseUp = function () {
-            console.log('handleMouseUp', false);
-            _this._container.classList.remove('no-select-on-resize');
+            // console.log('handleMouseUp', false);
+            _this._container.current.classList.remove('no-select-on-resize');
             _this.isResizing = false;
+            // Bounds case
+            var container = _this._container.current;
+            var _a = container === null || container === void 0 ? void 0 : container.getBoundingClientRect(), width = _a.width, height = _a.height, x = _a.x, y = _a.y;
+            (0, helpers_1.setDialogBounds)(_this._dialogOptions.base.id, { width: width, height: height, x: x, y: y }, _this._container);
         };
         this.resizeHandleMouseDown = function () {
             console.log('resizeHandleMouseDown', true);
             _this.isResizing = true;
-            _this._container.classList.add('no-select-on-resize');
+            _this._container.current.classList.add('no-select-on-resize');
             _this.init();
         };
         this.resizeHandleMouseMove = function (e) {
-            if (!_this.isResizing || !_this._container)
+            if (!_this.isResizing || !_this._container.current)
                 return;
-            if (!_this._container) {
+            if (!_this._container.current) {
                 throw new Error('Please define container');
             }
-            var container = _this._container;
+            var container = _this._container.current;
             var newWidth = e.clientX - (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) + 10;
             var newHeight = e.clientY - (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().top) + 10;
             _this._width = Math.max(newWidth, 100); // Minimum genişlik
@@ -34,8 +40,8 @@ var Resizeable = /** @class */ (function () {
             if (typeof _this._onResizeListener === "function") {
                 _this._onResizeListener(_this._width, _this._height);
             }
-            _this._container.style.width = _this._width + 'px';
-            _this._container.style.height = _this._height + 'px';
+            _this._container.current.style.width = _this._width + 'px';
+            _this._container.current.style.height = _this._height + 'px';
         };
         this.init = function () {
             if (_this.isResizing) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "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",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",

package/types/DialogTypes.d.ts

@@ -83,6 +83,11 @@ export interface IBaseDialogOptions {
     style?: React.CSSProperties;
     size?: IDialogSize;
     notifyOnClosing?: TNotifyOnClosing;
+    /**
+     * Momoize dialog sized and position
+     * */
+    memoBounds?: boolean;
+    id?: string;
     actions?: {
         disabledOnDialogProcessing?: boolean;
         baseStyle?: React.CSSProperties;