react-dialogger 1.1.124 → 1.1.126

package/components/DialogContent.js

@@ -71,15 +71,18 @@ var react_1 = require("react");
 var jumper_animate_1 = require("../utils/effects/jumper-animate");
 var _context_1 = require("../context/index.js");
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var firstUpdate = React.useRef(true);
-    var _h = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _h.dialog, dialogRef = _h.dialogRef, prevDialogRect = _h.prevDialogRect, backdropRef = _h.backdropRef, snackbarRef = _h.snackbarRef, footerRef = _h.footerRef, bodyRef = _h.bodyRef, headerRef = _h.headerRef, resizeableObject = _h.resizeableObject, body = _h.body;
+    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 dialogOptions = dialog.dialogOptions;
     var baseOptions = dialogOptions.base;
-    var _j = React.useState(false), fullscreenMode = _j[0], setFullscreenMode = _j[1];
-    var _k = React.useState(null), rect = _k[0], setRect = _k[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 _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 domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
     var positionSelector = function () {
         var _a;
@@ -148,7 +151,13 @@ var DialogContent = function (props) {
             dialogRef.current = null;
         };
     }, []);
-    return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: 1, nodeRef: dialogRef, onDrag: function (event, data) {
+    // 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 () {
+        dialogOptions.scale = zoom;
+    }, [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) {
             event.stopPropagation();
             dialog._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
         }, onStop: function (event, data) {
@@ -158,13 +167,13 @@ 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,
-                height: height,
-                x: x,
-                y: y,
+                width: width / scale,
+                height: height / scale,
+                x: x / scale,
+                y: y / scale,
                 fullscreen: false
             }, dialogRef);
-        }, children: (0, jsx_runtime_1.jsx)("div", { id: "dialog-main", ref: dialogRef, onClick: function (e) {
+        }, children: (0, jsx_runtime_1.jsxs)("div", { id: "dialog-main", ref: dialogRef, onClick: function (e) {
                 e.stopPropagation();
                 if (dialog.dialogOptions.backdrop.throughable) {
                     var toppest = dialog.props.zFinder();
@@ -187,9 +196,17 @@ 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: (_b = baseOptions.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_c = baseOptions.style.fontFamily) !== null && _c !== void 0 ? _c : 'Arial' }), rect), { alignSelf: (_d = baseOptions.initialAnchor.vertical) !== null && _d !== void 0 ? _d : 'flex-start', justifySelf: (_e = baseOptions.initialAnchor.horizontal) !== null && _e !== void 0 ? _e : 'flex-start' }), children: (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider, { ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, style: __assign({ width: 'min-content' }, (_g = (_f = dialog.dialogOptions) === null || _f === void 0 ? void 0 : _f.snackbar) === null || _g === void 0 ? void 0 : _g.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' }) }) })] }) }) });
+            }, 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 &&
+                    (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) {
+                                            setZoom(function (prev) { return Number((prev - 0.1).toFixed(2)); }); // 0.7 → 0.6
+                                            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) &&
+                            (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' }) }) })] })] }) });
 };
 exports.DialogContent = DialogContent;

package/helpers/Resizeable.js

@@ -41,6 +41,7 @@ var Resizeable = /** @class */ (function () {
             _this.init();
         };
         this.resizeHandleMouseMove = function (e) {
+            var _a;
             if (!_this.isResizing || !_this._container.current)
                 return;
             if (!_this._container.current) {
@@ -55,8 +56,9 @@ var Resizeable = /** @class */ (function () {
             if (typeof _this._onResizeListener === "function") {
                 _this._onResizeListener(_this._width, _this._height, rect);
             }
-            _this._container.current.style.width = _this._width + 'px';
-            _this._container.current.style.height = _this._height + 'px';
+            var scale = ((_a = _this._dialogOptions) !== null && _a !== void 0 ? _a : { scale: 1 }).scale;
+            _this._container.current.style.width = (_this._width / scale) + 'px';
+            _this._container.current.style.height = (_this._height / scale) + 'px';
         };
         this.init = function () {
             if (_this.isResizing) {

package/icons/MinusIcon.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ size, color }: {
+    size?: number;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/icons/MinusIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+exports.default = (function (_a) {
+    var size = _a.size, color = _a.color;
+    return (0, jsx_runtime_1.jsx)("div", { className: 'close-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null), children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) });
+});

package/icons/PlusIcon.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ size, color }: {
+    size?: number;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/icons/PlusIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+exports.default = (function (_a) {
+    var size = _a.size, color = _a.color;
+    return (0, jsx_runtime_1.jsx)("div", { className: 'close-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null), children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) });
+});

package/models/baseDialogOptions.js

@@ -34,6 +34,8 @@ var BASE_DIALOG_OPTIONS = {
         opacity: 0.6,
         hideOnClick: false,
     },
+    scaleable: false,
+    scale: 1,
     base: {
         style: {
             backgroundColor: "white",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.124",
+  "version": "1.1.126",
   "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/styles/dialog.css

@@ -215,6 +215,28 @@
   overflow: clip;
   pointer-events: auto;
 }
+.dialog-main .dialog-zoom-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 11px;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  position: absolute;
+  top: 4px;
+  /* height: 120px; */
+  right: -40px;
+  /* width: 80px; */
+  background: rgba(0, 0, 0, 0.1);
+  border: 1px solid #CCC;
+  border-radius: 32px;
+}
+.dialog-main .dialog-zoom-root .dialog-zoom-wrapper .zoom-action {
+  cursor: pointer;
+}
+.dialog-main .dialog-zoom-root .dialog-zoom-label {
+  transform: rotate(-90deg);
+}
 .dialog-main .actions-wrapper {
   display: flex;
   flex-direction: row;
@@ -293,6 +315,7 @@
   align-items: center;
   justify-content: space-between;
   flex: 0;
+  overflow: hidden;
 }
 .dialog-main .resizable-handle {
   position: absolute;

package/types/DialogTypes.d.ts

@@ -82,8 +82,10 @@ interface IDialogOptionsType {
         busyMessage?: string;
         [k: string]: any;
     };
+    scale?: number;
+    scaleable?: boolean;
 }
-export type DialogOptionsType = Partial<Pick<IDialogOptionsType, 'base' | 'snackbar' | 'backdrop' | 'slotProps' | 'slot' | 'animate' | 'progress' | 'localText'>>;
+export type DialogOptionsType = Partial<Pick<IDialogOptionsType, 'base' | 'snackbar' | 'backdrop' | 'slotProps' | 'slot' | 'animate' | 'progress' | 'scale' | 'scaleable' | 'localText'>>;
 interface kSlot {
     action?: React.JSXElementConstructor<any>;
     footer?: React.JSXElementConstructor<any>;