react-dialogger 1.1.127 → 1.1.129

package/README.md

@@ -123,6 +123,22 @@ Custom Dialog Configurations
 
 Although a global configuration is set by useDialogOptions, each dialog can still be individually customized as needed. You can override the default settings for specific dialogs to meet particular requirements. This flexibility allows you to customize the appearance, behavior, and actions of each dialog instance separately, while still maintaining the benefits of a unified base configuration.
 ```
+
+## New feature 
+```
+backdrop: {
+    dimOnInactive: boolean
+},
+scaleable: boolean,
+```
+#### Explanations:
+* <b>backdrop.dimOnInactive</b>: 
+When set to true, the dialog will dim the background when it becomes inactive. This makes it easier for the user to identify which dialog is currently active.
+* <b>scaleable</b>: 
+When set to true, the dialog becomes resizable, allowing the user to change its size. When this feature is enabled, resizing handles will appear around the dialog.
+
+
+
 ## Example Usage
 
 Below is an example of customizing a dialog using `baseDialogOptions`:

package/components/DialogContent.js

@@ -74,16 +74,16 @@ var appLogger_1 = require("../helpers/appLogger");
 var PlusIcon_1 = __importDefault(require("../icons/PlusIcon"));
 var MinusIcon_1 = __importDefault(require("../icons/MinusIcon"));
 var DialogContent = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var firstUpdate = React.useRef(true);
-    var _j = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _j.dialog, dialogRef = _j.dialogRef, prevDialogRect = _j.prevDialogRect, backdropRef = _j.backdropRef, snackbarRef = _j.snackbarRef, footerRef = _j.footerRef, bodyRef = _j.bodyRef, headerRef = _j.headerRef, resizeableObject = _j.resizeableObject, body = _j.body;
+    var _k = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _k.dialog, dialogRef = _k.dialogRef, prevDialogRect = _k.prevDialogRect, backdropRef = _k.backdropRef, snackbarRef = _k.snackbarRef, footerRef = _k.footerRef, bodyRef = _k.bodyRef, headerRef = _k.headerRef, resizeableObject = _k.resizeableObject, body = _k.body;
     var dialogOptions = dialog.dialogOptions;
     var baseOptions = dialogOptions.base;
-    var _k = React.useState(false), fullscreenMode = _k[0], setFullscreenMode = _k[1];
-    var _l = React.useState(null), rect = _l[0], setRect = _l[1];
-    var _m = React.useState(((_a = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _a !== void 0 ? _a : 1)), zoom = _m[0], setZoom = _m[1];
-    var bounds = ((_b = dialog.dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
+    var _l = React.useState(false), fullscreenMode = _l[0], setFullscreenMode = _l[1];
+    var _m = React.useState(null), rect = _m[0], setRect = _m[1];
+    var bounds = ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
     var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
+    var _o = React.useState(((_b = bounds === null || bounds === void 0 ? void 0 : bounds.scale) !== null && _b !== void 0 ? _b : ((_c = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _c !== void 0 ? _c : 1))), zoom = _o[0], setZoom = _o[1];
     var positionSelector = function () {
         var _a;
         var dialogRectSelectors = { xKey: 'marginLeft', yKey: 'marginTop' };
@@ -151,13 +151,16 @@ var DialogContent = function (props) {
             dialogRef.current = null;
         };
     }, []);
-    // TODO Bi dene Zoom + Scale ile drag yapiliyor (Resize eksik) & Memo tam coordine degil!!
-    var scale = zoom; //dialogOptions?.scale ?? 1;
     // Set Zoom
     (0, react_1.useEffect)(function () {
+        var _a, _b;
         dialogOptions.scale = zoom;
+        if (((_a = dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) && ((_b = dialogOptions.base) === null || _b === void 0 ? void 0 : _b.id)) {
+            // const gb = getDialogBounds(dialogOptions.base.id)
+            (0, _helpers_1.setDialogBounds)(dialogOptions.base.id, __assign(__assign({}, bounds), { scale: zoom }), dialogRef);
+        }
     }, [zoom]);
-    return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: scale, nodeRef: dialogRef, onDrag: function (event, data) {
+    return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: zoom, nodeRef: dialogRef, onDrag: function (event, data) {
             event.stopPropagation();
             dialog._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
         }, onStop: function (event, data) {
@@ -167,10 +170,10 @@ var DialogContent = function (props) {
             var _c = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), width = _c.width, height = _c.height, x = _c.x, y = _c.y;
             (0, appLogger_1.appLog)('onDragStop', 'fired', (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect());
             (0, _helpers_1.setDialogBounds)(dialogOptions.base.id, {
-                width: width / scale,
-                height: height / scale,
-                x: x / scale,
-                y: y / scale,
+                width: width / zoom,
+                height: height / zoom,
+                x: x / zoom,
+                y: y / zoom,
                 fullscreen: false
             }, dialogRef);
         }, children: (0, jsx_runtime_1.jsxs)("div", { onBlur: function (event) {
@@ -204,7 +207,7 @@ var DialogContent = function (props) {
                     // @ts-ignore
                     dialog.props.keyboardListener(e.key, _this);
                 }
-            }, 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({ height: (_c = baseOptions.size.height) !== null && _c !== void 0 ? _c : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_d = baseOptions.style.fontFamily) !== null && _d !== void 0 ? _d : 'Arial' }), rect), { alignSelf: (_e = baseOptions.initialAnchor.vertical) !== null && _e !== void 0 ? _e : 'flex-start', justifySelf: (_f = baseOptions.initialAnchor.horizontal) !== null && _f !== void 0 ? _f : 'flex-start', zoom: scale !== null && scale !== void 0 ? scale : 1, overflow: 'unset' }), children: [dialog.dialogOptions.scaleable &&
+            }, 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({ height: (_d = baseOptions.size.height) !== null && _d !== void 0 ? _d : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_e = baseOptions.style.fontFamily) !== null && _e !== void 0 ? _e : 'Arial' }), rect), { alignSelf: (_f = baseOptions.initialAnchor.vertical) !== null && _f !== void 0 ? _f : 'flex-start', justifySelf: (_g = baseOptions.initialAnchor.horizontal) !== null && _g !== void 0 ? _g : 'flex-start', zoom: zoom !== null && zoom !== void 0 ? zoom : 1, overflow: 'unset' }), children: [dialog.dialogOptions.scaleable &&
                     (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-zoom-root', style: { width: 36 }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'dialog-zoom-wrapper', children: [(0, jsx_runtime_1.jsx)("div", { className: "zoom-action", onClick: function () {
                                             setZoom(function (prev) { return Number((prev + 0.1).toFixed(2)); }); // 0.6 → 0.7
                                         }, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.default, { size: 22 }) }), (0, jsx_runtime_1.jsx)("div", { className: "zoom-action", onClick: function (event) {
@@ -212,7 +215,7 @@ var DialogContent = function (props) {
                                             setTimeout(function () {
                                                 event.clientX;
                                             });
-                                        }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider, { ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, style: __assign({ width: 'min-content' }, (_h = (_g = dialog.dialogOptions) === null || _g === void 0 ? void 0 : _g.snackbar) === null || _h === void 0 ? void 0 : _h.style), children: [(dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) &&
+                                        }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider, { ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, style: __assign({ width: 'min-content' }, (_j = (_h = dialog.dialogOptions) === null || _h === void 0 ? void 0 : _h.snackbar) === null || _j === void 0 ? void 0 : _j.style), children: [(dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) &&
                             (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
                                         zIndex: parseInt(domZIndex) + 1
                                     }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(_icons_1.ResizeIcon, { color: '#286e94' }) }) })] })] }) });

package/helpers/dialogBoundsMemoize.js

@@ -78,7 +78,7 @@ var setDialogBounds = function (dialogId, bounds, dialogRef) {
         // Save to RAM
         initDialogMemoizeBounds_1.registeredDialogs.set(combined.join('-'), {
             id: combined.join('-'),
-            bounds: bounds
+            bounds: __assign(__assign({}, (0, exports.getDialogBounds)(dialogId)), bounds)
         });
         /**
          * const myMap = new Map();
@@ -92,7 +92,7 @@ var setDialogBounds = function (dialogId, bounds, dialogRef) {
          *
          * */
         // Save to Store
-        (0, appLogger_1.appLog)('registeredDialogs', initDialogMemoizeBounds_1.registeredDialogs);
+        // console.log('registeredDialogs', registeredDialogs);
         try {
             window.localStorage.setItem(initDialogMemoizeBounds_1.BOUNDS_STORE_KEY, JSON.stringify(Array.from(initDialogMemoizeBounds_1.registeredDialogs)));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.127",
+  "version": "1.1.129",
   "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/BoundTypes.d.ts

@@ -5,6 +5,7 @@ export interface IDialogBoundsDef {
     x: number;
     y: number;
     fullscreen: boolean;
+    scale?: number;
 }
 export interface IDialogBoundDef {
     id: IDialogBoundsMemoKey;

package/types/DialogTypes.d.ts

@@ -233,7 +233,7 @@ export interface IBackdropOptions {
     opacity?: number;
     hideOnClick?: boolean;
     throughable?: boolean;
-    dimOnInactive: boolean;
+    dimOnInactive?: boolean;
 }
 export type TNotifyOnClosing = "snackbar" | "zoom" | undefined;
 export type TInitialHolder = any;