react-dialogger 1.1.125 → 1.1.127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -81,7 +81,7 @@ var DialogContent = function (props) {
|
|
|
81
81
|
var baseOptions = dialogOptions.base;
|
|
82
82
|
var _k = React.useState(false), fullscreenMode = _k[0], setFullscreenMode = _k[1];
|
|
83
83
|
var _l = React.useState(null), rect = _l[0], setRect = _l[1];
|
|
84
|
-
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];
|
|
84
|
+
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];
|
|
85
85
|
var bounds = ((_b = dialog.dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
|
|
86
86
|
var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
|
|
87
87
|
var positionSelector = function () {
|
|
@@ -153,23 +153,6 @@ var DialogContent = function (props) {
|
|
|
153
153
|
}, []);
|
|
154
154
|
// TODO Bi dene Zoom + Scale ile drag yapiliyor (Resize eksik) & Memo tam coordine degil!!
|
|
155
155
|
var scale = zoom; //dialogOptions?.scale ?? 1;
|
|
156
|
-
var MIN_ZOOM = 10;
|
|
157
|
-
var MAX_ZOOM = 100;
|
|
158
|
-
function decreaseZoom() {
|
|
159
|
-
setZoom(function (prev) {
|
|
160
|
-
// Önce 0.1 çıkar → sonra yuvarla → sonra clamp ile sınırla
|
|
161
|
-
var newZoom = Math.round(prev - 0.1);
|
|
162
|
-
newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom));
|
|
163
|
-
return newZoom;
|
|
164
|
-
});
|
|
165
|
-
}
|
|
166
|
-
function increaseZoom() {
|
|
167
|
-
setZoom(function (prev) {
|
|
168
|
-
var newZoom = Math.round(prev + 0.1);
|
|
169
|
-
newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom));
|
|
170
|
-
return newZoom;
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
156
|
// Set Zoom
|
|
174
157
|
(0, react_1.useEffect)(function () {
|
|
175
158
|
dialogOptions.scale = zoom;
|
|
@@ -190,7 +173,15 @@ var DialogContent = function (props) {
|
|
|
190
173
|
y: y / scale,
|
|
191
174
|
fullscreen: false
|
|
192
175
|
}, dialogRef);
|
|
193
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", {
|
|
176
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { onBlur: function (event) {
|
|
177
|
+
if (dialog.dialogOptions.backdrop.dimOnInactive) {
|
|
178
|
+
dialogRef.current.classList.add('inactive');
|
|
179
|
+
}
|
|
180
|
+
}, onFocus: function (event) {
|
|
181
|
+
if (dialog.dialogOptions.backdrop.dimOnInactive) {
|
|
182
|
+
dialogRef.current.classList.remove('inactive');
|
|
183
|
+
}
|
|
184
|
+
}, id: "dialog-main", ref: dialogRef, onClick: function (e) {
|
|
194
185
|
e.stopPropagation();
|
|
195
186
|
if (dialog.dialogOptions.backdrop.throughable) {
|
|
196
187
|
var toppest = dialog.props.zFinder();
|
|
@@ -213,14 +204,15 @@ var DialogContent = function (props) {
|
|
|
213
204
|
// @ts-ignore
|
|
214
205
|
dialog.props.keyboardListener(e.key, _this);
|
|
215
206
|
}
|
|
216
|
-
}, 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: [
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
207
|
+
}, 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 &&
|
|
208
|
+
(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 () {
|
|
209
|
+
setZoom(function (prev) { return Number((prev + 0.1).toFixed(2)); }); // 0.6 → 0.7
|
|
210
|
+
}, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.default, { size: 22 }) }), (0, jsx_runtime_1.jsx)("div", { className: "zoom-action", onClick: function (event) {
|
|
211
|
+
setZoom(function (prev) { return Number((prev - 0.1).toFixed(2)); }); // 0.7 → 0.6
|
|
212
|
+
setTimeout(function () {
|
|
213
|
+
event.clientX;
|
|
214
|
+
});
|
|
215
|
+
}, 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) &&
|
|
224
216
|
(0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
|
|
225
217
|
zIndex: parseInt(domZIndex) + 1
|
|
226
218
|
}, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(_icons_1.ResizeIcon, { color: '#286e94' }) }) })] })] }) });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-dialogger",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.127",
|
|
4
4
|
"description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "Sueleyman Topaloglu",
|
package/styles/dialog.css
CHANGED
|
@@ -205,6 +205,10 @@
|
|
|
205
205
|
-ms-user-select: none; /* IE/Edge */
|
|
206
206
|
}
|
|
207
207
|
|
|
208
|
+
.dialog-main.inactive {
|
|
209
|
+
opacity: 0.6 !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
208
212
|
.dialog-main {
|
|
209
213
|
top: 100px;
|
|
210
214
|
box-shadow: 0 0 20px #252525;
|
|
@@ -214,6 +218,7 @@
|
|
|
214
218
|
flex-direction: column;
|
|
215
219
|
overflow: clip;
|
|
216
220
|
pointer-events: auto;
|
|
221
|
+
opacity: 1; /* Başlangıçta 1 */
|
|
217
222
|
}
|
|
218
223
|
.dialog-main .dialog-zoom-root {
|
|
219
224
|
display: flex;
|
package/types/DialogTypes.d.ts
CHANGED
|
@@ -83,8 +83,9 @@ interface IDialogOptionsType {
|
|
|
83
83
|
[k: string]: any;
|
|
84
84
|
};
|
|
85
85
|
scale?: number;
|
|
86
|
+
scaleable?: boolean;
|
|
86
87
|
}
|
|
87
|
-
export type DialogOptionsType = Partial<Pick<IDialogOptionsType, 'base' | 'snackbar' | 'backdrop' | 'slotProps' | 'slot' | 'animate' | 'progress' | 'scale' | 'localText'>>;
|
|
88
|
+
export type DialogOptionsType = Partial<Pick<IDialogOptionsType, 'base' | 'snackbar' | 'backdrop' | 'slotProps' | 'slot' | 'animate' | 'progress' | 'scale' | 'scaleable' | 'localText'>>;
|
|
88
89
|
interface kSlot {
|
|
89
90
|
action?: React.JSXElementConstructor<any>;
|
|
90
91
|
footer?: React.JSXElementConstructor<any>;
|
|
@@ -232,6 +233,7 @@ export interface IBackdropOptions {
|
|
|
232
233
|
opacity?: number;
|
|
233
234
|
hideOnClick?: boolean;
|
|
234
235
|
throughable?: boolean;
|
|
236
|
+
dimOnInactive: boolean;
|
|
235
237
|
}
|
|
236
238
|
export type TNotifyOnClosing = "snackbar" | "zoom" | undefined;
|
|
237
239
|
export type TInitialHolder = any;
|