react-dialogger 1.1.48 → 1.1.50

package/components/DialogContent.d.ts

@@ -1,22 +1,4 @@
 import * as React from "react";
-import { BaseDialogProps, DialogOptionsType, TDialogCallbackNodeFn } from "../types/DialogTypes";
-import DialogBase from "./DialogBase";
-import { DialogContentFooterReturnType } from "./DialogContenFooter";
-import { FormikProps } from "formik";
-interface IContentProps {
-    body: TDialogCallbackNodeFn;
-    header: TDialogCallbackNodeFn;
-    actions: any;
-    dialogRef: React.RefObject<any>;
-    footerRef: React.RefObject<DialogContentFooterReturnType>;
-    backdropRef: React.RefObject<any>;
-    dialogOptions: DialogOptionsType;
-    dom: HTMLDivElement;
-    keyboardListener: BaseDialogProps['keyboardListener'];
-    dialog: DialogBase<any>;
-}
+import { IContentProps } from "../types/DialogTypes";
 declare const DialogContent: React.FC<IContentProps>;
-export declare const DialogContentContext: React.Context<{
-    formikProps: FormikProps<any>;
-}>;
 export { DialogContent };

package/components/DialogContent.js

@@ -43,119 +43,113 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogContent = exports.DialogContentContext = void 0;
+exports.DialogContent = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_draggable_1 = __importDefault(require("react-draggable"));
 var helpers_1 = require("../helpers");
 var React = __importStar(require("react"));
 var ResizeIcon_1 = __importDefault(require("./icons/ResizeIcon"));
 var notistack_1 = require("notistack");
-var DialogContentHeader_1 = require("./DialogContentHeader");
-var DialogContentBody_1 = require("./DialogContentBody");
-var DialogContenFooter_1 = require("./DialogContenFooter");
-var formik_1 = require("formik");
+var _1 = require("./");
 var react_1 = require("react");
+var helpers_2 = require("../helpers");
+var jumper_animate_1 = require("./utils/effects/jumper-animate");
 var WithSnackbar = function (props) {
     return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
 };
-var 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 };
-};
 var DialogContent = function (_a) {
-    var _b;
-    var _c, _d, _e;
-    var body = _a.body, header = _a.header, actions = _a.actions, dialogRef = _a.dialogRef, footerRef = _a.footerRef, dialogOptions = _a.dialogOptions, dom = _a.dom, backdropRef = _a.backdropRef, keyboardListener = _a.keyboardListener, dialog = _a.dialog;
-    var position = dialogAutoPos();
-    var snackbarRef = React.useRef(null);
-    var _f = React.useState(false), fullscreenMode = _f[0], setFullscreenMode = _f[1];
-    // ✨✨✨✨
-    var dialogBodyRef = (0, react_1.useRef)(null);
+    var _b, _c, _d, _e, _f;
+    var body = _a.body, header = _a.header, actions = _a.actions, dialogRef = _a.dialogRef, headerRef = _a.headerRef, bodyRef = _a.bodyRef, footerRef = _a.footerRef, dialogOptions = _a.dialogOptions, backdropRef = _a.backdropRef, dialog = _a.dialog, resizeableObject = _a.resizeableObject, prevDialogRect = _a.prevDialogRect, snackbarRef = _a.snackbarRef;
+    var _g = React.useState(false), fullscreenMode = _g[0], setFullscreenMode = _g[1];
+    var _h = React.useState(null), rect = _h[0], setRect = _h[1];
     var baseOptions = dialogOptions.base;
-    // dialog.formikProps = formikProps;
-    if (dialogRef.current) {
-        // Öncelikle ref'i al ve input elemanlarını bul
-        var inputElements = 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
-        });
-    }
-    var xKey = position.isMultiple ? "left" : "marginLeft";
-    var yKey = position.isMultiple ? "top" : "marginTop";
     /**
      * default null
-     * eget momoize islemi uygulanmissa read from memory
+     * If memoized, than read values from memory
      * */
     var base = dialogOptions.base;
-    var bounds = ((_c = dialogOptions.base) === null || _c === void 0 ? void 0 : _c.memoBounds) ? (0, helpers_1.getDialogBounds)(base) : null;
-    // console.log('MAIN DOM', window.getComputedStyle(this.props.dom).zIndex);
+    var bounds = ((_b = dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, helpers_1.getDialogBounds)(base.id) : null;
     var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
+    // Effect Listener
     (0, react_1.useEffect)(function () {
         var _a;
-        console.log('DialogContent_Runned', '');
-        dialog.props.didMountCallback(dialog, (_a = dialogBodyRef.current) === null || _a === void 0 ? void 0 : _a.formikProps);
+        // State Listener Dialog
+        if (typeof dialog.props.stateListener === "function") {
+            dialog.props.stateListener(dialog.values, dialog);
+        }
+        // State Listener Actions
+        for (var actionKey in dialog._actionRefs) {
+            var action = dialog._actionRefs[actionKey];
+            if (typeof action.current._stateListener === "function") {
+                action.current._stateListener(dialog.values, (_a = dialog._actionRefs[action.current.name]) === null || _a === void 0 ? void 0 : _a.current, dialog);
+            }
+        }
+    }, [dialog === null || dialog === void 0 ? void 0 : dialog.values]);
+    (0, react_1.useEffect)(function () {
+        // setDialogRect();
+        (0, helpers_2.formInputKeyListeners)(dialogRef.current);
+        if (dialog.dialogOptions.animate === 'jumper') {
+            (0, jumper_animate_1.jumperAnimate)(dialogRef.current);
+        }
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var dialogRectSelectors = { xKey: 'marginLeft', yKey: 'marginTop' };
+        if (prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.isMultiple) {
+            dialogRectSelectors = { xKey: 'left', yKey: 'top' };
+        }
+        var _b = bounds !== null && bounds !== void 0 ? bounds : {}, fullscreen = _b.fullscreen, x = _b.x, y = _b.y, restBounds = __rest(_b, ["fullscreen", "x", "y"]);
+        var cssBounds = __assign(__assign(__assign(__assign({}, restBounds), (_a = {}, _a[dialogRectSelectors.xKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.left, _a[dialogRectSelectors.yKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.top, _a)), prevDialogRect.isMultiple ? { position: 'absolute' } : null), { translate: prevDialogRect.isMultiple ? "".concat(5, "px ").concat(5, "px") : 'none' });
+        setRect(__assign({}, bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : cssBounds));
     }, []);
-    // Burda kaldik
     return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: 1, ref: backdropRef, onDrag: function (event, data) {
             event.stopPropagation();
             dialog._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
         }, onStop: function (event, data) {
-            var _a;
+            var _a, _b;
             event.stopPropagation();
             event.preventDefault();
-            console.log('onDragStop', 'fired');
-            var _b = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), width = _b.width, height = _b.height, x = _b.x, y = _b.y;
+            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;
+            console.log('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
+                y: y,
+                fullscreen: false
             }, dialogRef);
         }, children: (0, jsx_runtime_1.jsxs)("div", { id: "dialog-main", ref: dialogRef, onClick: function (e) {
                 e.stopPropagation();
-            }, onKeyDown: function (e) {
-                if (typeof keyboardListener === "function") {
+            }, tabIndex: 0, onKeyDown: function (e) {
+                var target = e.target;
+                if (target.tagName === 'INPUT' ||
+                    target.tagName === 'TEXTAREA' ||
+                    target.isContentEditable) {
+                    return;
+                }
+                if (typeof dialog.props.keyboardListener === "function") {
                     // @ts-ignore
-                    keyboardListener(e.key, _this);
+                    dialog.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: 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(__assign({ alignSelf: baseOptions.initialAnchor.vertical, height: (_d = baseOptions.size.height) !== null && _d !== void 0 ? _d : 'auto' }, typeof baseOptions.size.width === "number" ? { width: baseOptions.size.width } : null), (_b = { outline: 'none' }, _b[yKey] = position.top + 'px', _b[xKey] = position.left + 'px', _b)), baseOptions.style), { fontFamily: (_e = baseOptions.style.fontFamily) !== null && _e !== void 0 ? _e : 'Arial' }), bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : null), children: [(0, jsx_runtime_1.jsx)(DialogContentContextProvider, { initialValues: dialog.values, children: function (formikProps) { return ((0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: snackbarRef, maxSnack: dialogOptions.snackbar.maxSnack, children: [(header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(DialogContentHeader_1.DialogContentHeader, { header: header, dialog: dialog, dialogBodyRef: dialogBodyRef })), (0, jsx_runtime_1.jsx)(DialogContentBody_1.DialogContentBody, { ref: dialogBodyRef, dialog: dialog, body: body, formikProps: formikProps }), (0, jsx_runtime_1.jsx)(DialogContenFooter_1.DialogContentFooter, { dialog: dialog, ref: footerRef, actions: actions })] })); } }), (baseOptions.resizeable) &&
+            }, 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' }), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: snackbarRef, maxSnack: dialogOptions.snackbar.maxSnack, children: [(header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, dialogRef: dialogRef, header: header, dialog: dialog, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, dialog: dialog, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef, dialog: dialog, actions: actions })] }), (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: dialog.Resizeable.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
+                            }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
 };
 exports.DialogContent = DialogContent;
-exports.DialogContentContext = React.createContext(null);
-var DialogContentContextProvider = function (_a) {
-    var children = _a.children, initialValues = _a.initialValues;
-    var formikProps = (0, formik_1.useFormik)({
-        // enableReinitialize: true,
-        initialValues: initialValues,
-        onSubmit: function (values, formikHelpers) {
-            // No Necessary
-        }
-    });
-    return ((0, jsx_runtime_1.jsx)(exports.DialogContentContext.Provider, { value: { formikProps: formikProps }, children: typeof children === "function"
-            ? children(formikProps)
-            : children }));
-};

package/components/DialogContentBody.d.ts

@@ -1,12 +1,10 @@
 import * as React from "react";
-import { TDialogCallbackNodeFn } from "../types/DialogTypes";
+import { TDialogCallbackFn } from "../types/DialogTypes";
 import DialogBase from "./DialogBase";
-import { FormikProps } from "formik";
 interface IContentBodyProps {
-    body: TDialogCallbackNodeFn;
+    body: TDialogCallbackFn;
     dialog: DialogBase<any>;
-    ref: React.RefObject<any>;
-    formikProps: FormikProps<any>;
+    ref?: React.RefObject<any>;
 }
 declare const DialogContentBody: React.FC<IContentBodyProps>;
 export { DialogContentBody };

package/components/DialogContentBody.js

@@ -36,7 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContentBody = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var react_1 = require("react");
 var Placeholder = function (_a) {
     var dialogOptions = _a.dialogOptions, placeholder = _a.placeholder;
     var bgColor = dialogOptions.base.style.backgroundColor ?
@@ -50,33 +49,13 @@ var Placeholder = function (_a) {
         }, children: placeholder });
 };
 var DialogContentBody = React.forwardRef(function (_a, ref) {
-    var body = _a.body, dialog = _a.dialog, formikProps = _a.formikProps;
-    console.log('DialogContentBody', dialog);
-    // const formikProps = useFormik({
-    //     // enableReinitialize: true,
-    //     initialValues: dialog.values,
-    //     onSubmit: (values, formikHelpers) => {
-    //         // No Necessary
-    //     }
-    // });
-    //
-    // useImperativeHandle( ref, () => ({
-    //     formikProps
-    // }));
-    // const {
-    //     formikProps
-    // } = useContext(DialogContentContext);
-    (0, react_1.useEffect)(function () {
-        dialog.props.didMountCallback(dialog, formikProps);
-    }, []);
+    var body = _a.body, dialog = _a.dialog;
     if (body instanceof Function) {
-        return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder }), body(dialog, formikProps)] });
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder }), body(dialog)] });
     }
     return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: dialog.holder ?
-            // this.Placeholder(this._holder)
             (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder })
             :
-                //@ts-ignore
                 body });
 });
 exports.DialogContentBody = DialogContentBody;

package/components/DialogContentFooter.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { DialogContentFooterReturnType, IContentFooterProps } from "../types/DialogActionTypes";
+declare const DialogContentFooter: React.ForwardRefExoticComponent<IContentFooterProps & React.RefAttributes<DialogContentFooterReturnType>>;
+export { DialogContentFooter };

package/components/{DialogContenFooter.js → DialogContentFooter.js}

@@ -43,38 +43,19 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContentFooter = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 var react_1 = require("react");
-var DialogBase_1 = require("./DialogBase");
-var Futures_1 = require("./Futures");
-var DialogActionBase_1 = __importDefault(require("./DialogActionBase"));
-var Actions = function (_a) {
-    var actions = _a.actions, dialog = _a.dialog;
-    var dialogOptions = dialog.dialogOptions;
-    console.log('Actions', actions);
-    return (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: actions.map(function (action, index) {
-            var referencedAction = dialog.initializeActionRef(action.name);
-            // this._actions[action.name] = referencedAction.current
-            return (0, jsx_runtime_1.jsx)(DialogActionBase_1.default, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), 
-                // onLoad={ dialogAction => {
-                //     action.baseDialogAction = dialogAction;
-                // }}
-                style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener }, index.toString());
-        }) });
-};
+var Features_1 = require("./Features");
+var context_1 = require("../context");
+var _1 = require("./");
 var DialogContentFooter = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c, _d;
     var actions = _a.actions, dialog = _a.dialog;
-    var state = dialog.state, dialogOptions = dialog.dialogOptions;
-    console.log('DialogContentHeader', dialog);
-    var baseOptions = dialogOptions.base;
+    var dialogOptions = dialog.dialogOptions;
     var CustomFooter = (_b = dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.footer;
     // Imperative handle
     var _e = React.useState(false), inProcess = _e[0], setInProcess = _e[1];
@@ -85,28 +66,20 @@ var DialogContentFooter = (0, react_1.forwardRef)(function (_a, ref) {
         setProcessing: setProcessing,
         inProcess: inProcess
     }); });
-    // console.log('processingListener', this._processingListener);
-    if (typeof dialog._processingListener === "function") {
-        dialog._processingListener(inProcess);
-    }
     var staticProps = {
-        dialogValues: dialog.state.values,
         dialogOptions: dialogOptions,
         dialog: _this
     };
     var footerProps = {};
     if (dialogOptions.slotProps.footer) {
         footerProps = dialogOptions.slotProps.footer({
-            dialogValues: dialog.state.values,
             dialogOptions: dialogOptions,
             inProcess: dialog.isInProcess()
         });
     }
-    console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
-    return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-footer', style: (_d = (_c = dialogOptions.base) === null || _c === void 0 ? void 0 : _c.footer) === null || _d === void 0 ? void 0 : _d.style, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(DialogBase_1.WithHeaderFooterContext, __assign({}, staticProps, { dialog: dialog, children: dialogOptions.slot.footer ?
-                        /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
+    return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-footer', style: (_d = (_c = dialogOptions.base) === null || _c === void 0 ? void 0 : _c.footer) === null || _d === void 0 ? void 0 : _d.style, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(context_1.WithHeaderFooterContext, __assign({}, staticProps, { dialog: dialog, children: dialogOptions.slot.footer ?
                         (0, jsx_runtime_1.jsx)(CustomFooter, __assign({}, staticProps, footerProps))
                         :
-                            (0, jsx_runtime_1.jsx)(Futures_1.DialogProcessing, {}) })) }), (0, jsx_runtime_1.jsx)(Actions, { dialog: dialog, actions: actions })] });
+                            (0, jsx_runtime_1.jsx)(Features_1.DialogProcessing, {}) })) }), (0, jsx_runtime_1.jsx)(_1.Actions, { dialog: dialog, actions: actions })] });
 });
 exports.DialogContentFooter = DialogContentFooter;

package/components/DialogContentHeader.d.ts

@@ -1,13 +1,13 @@
-import { TDialogCallbackNodeFn } from "../types/DialogTypes";
+import { TDialogCallbackFn } from "../types/DialogTypes";
 import * as React from "react";
 import DialogBase from "./DialogBase";
-import { FormikProps } from "formik";
+import { IDialogBoundsDef } from "../types/BoundTypes";
 interface IContentHeaderProps {
-    header: TDialogCallbackNodeFn;
+    header: TDialogCallbackFn;
     dialog: DialogBase<any>;
-    dialogBodyRef: React.RefObject<{
-        formikProps: FormikProps<any>;
-    }>;
+    ref: React.RefObject<any>;
+    dialogRef: React.RefObject<any>;
+    bounds: IDialogBoundsDef;
 }
 declare const DialogContentHeader: React.FC<IContentHeaderProps>;
 export { DialogContentHeader };

package/components/DialogContentHeader.js

@@ -10,58 +10,100 @@ var __assign = (this && this.__assign) || function () {
     };
     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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContentHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Futures_1 = require("./Futures");
-var DialogBase_1 = require("./DialogBase");
+var Features_1 = require("./Features");
+var React = __importStar(require("react"));
 var react_1 = require("react");
-var DialogContent_1 = require("./DialogContent");
-var DialogContentHeader = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var header = _a.header, dialog = _a.dialog, dialogBodyRef = _a.dialogBodyRef;
-    var state = dialog.state, dialogOptions = dialog.dialogOptions;
-    // const [formikProps, setFormikProps] = React.useState<FormikProps<any>>(null);
-    //
-    //
-    // useEffect(() => {
-    //     console.log('DialogContentHeader_X', dialogBodyRef);
-    //     setFormikProps(dialogBodyRef.current.formikProps);
-    // }, [dialogBodyRef, dialogBodyRef.current?.formikProps?.values]);
-    var formikProps = (0, react_1.useContext)(DialogContent_1.DialogContentContext).formikProps;
+var helpers_1 = require("../helpers");
+var context_1 = require("../context");
+var DialogContentHeader = React.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e;
+    var header = _a.header, dialog = _a.dialog, dialogRef = _a.dialogRef, bounds = _a.bounds;
+    var dialogOptions = dialog.dialogOptions;
+    var _f = React.useState(bounds === null || bounds === void 0 ? void 0 : bounds.fullscreen), fullscreen = _f[0], setFullscreen = _f[1];
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        setFullscreen: setFullscreen,
+        fullscreen: fullscreen
+    }); });
+    (0, react_1.useEffect)(function () {
+        if (fullscreen) {
+            dialogRef.current.classList.add('fullscreen');
+        }
+        else {
+            dialogRef.current.classList.remove('fullscreen');
+        }
+        dialogRef.current.classList.add('no-user-select');
+        setTimeout(function () {
+            dialogRef.current.classList.remove('no-user-select');
+        }, 300);
+    }, [fullscreen]);
     var baseOptions = dialogOptions.base;
     var CustomHeader = (_b = dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.header;
     var staticProps = {
-        dialogValues: state.values,
         dialogOptions: dialogOptions,
         dialog: dialog
     };
-    var headerProps = {
-        formikProps: (_c = dialogBodyRef.current) === null || _c === void 0 ? void 0 : _c.formikProps
-    };
-    if (dialogOptions.slotProps.header) {
-        headerProps = __assign(__assign({}, headerProps), dialogOptions.slotProps.header(staticProps));
-    }
     if (dialogOptions.slot.header) {
+        var headerProps = dialogOptions.slotProps.header ? __assign({}, dialogOptions.slotProps.header(staticProps)) : {};
         return (0, jsx_runtime_1.jsx)("div", { onDoubleClick: function (event) {
                 var _a;
                 if ((_a = dialog === null || dialog === void 0 ? void 0 : dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.fullscreen) {
-                    dialog.switchFullScreen();
+                    setFullscreen(!fullscreen);
                 }
-            }, style: (_d = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _d === void 0 ? void 0 : _d.style, className: "dialog-header ".concat(baseOptions.draggable && !dialog.state.fullscreenMode ? 'drag-handle' : ''), children: (0, jsx_runtime_1.jsx)(DialogBase_1.WithHeaderFooterContext, { dialog: dialog, children: (0, jsx_runtime_1.jsx)(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this })) }) });
+            }, style: (_c = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _c === void 0 ? void 0 : _c.style, className: "dialog-header ".concat(baseOptions.draggable && !dialog.state.fullscreenMode ? 'drag-handle' : ''), children: (0, jsx_runtime_1.jsx)(context_1.WithHeaderFooterContext, { dialog: dialog, children: (0, jsx_runtime_1.jsx)(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this })) }) });
     }
-    console.log('DialogContentHeader_formikProps', formikProps);
     if (header instanceof Function) {
         return (0, jsx_runtime_1.jsxs)("div", { onDoubleClick: function (event) {
                 if (baseOptions.fullscreen) {
-                    dialog.switchFullScreen();
+                    if (bounds) {
+                        (0, helpers_1.setDialogBounds)(dialog.dialogOptions.base.id, __assign(__assign({}, bounds), { fullscreen: !fullscreen }), dialogRef);
+                    }
+                    setFullscreen(!fullscreen);
+                    event.stopPropagation();
+                    event.preventDefault();
                 }
-            }, style: (_e = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _e === void 0 ? void 0 : _e.style, className: "dialog-header ".concat(baseOptions.draggable && !dialog.state.fullscreenMode ? 'drag-handle' : ''), children: [header(dialog, formikProps), (baseOptions.closeable || baseOptions.fullscreen) &&
-                    (0, jsx_runtime_1.jsx)(DialogBase_1.WithHeaderFooterContext, { dialog: dialog, children: (0, jsx_runtime_1.jsxs)(Futures_1.DialogHeaderActionsWrapper, { children: [baseOptions.fullscreen &&
-                                    (0, jsx_runtime_1.jsx)(Futures_1.DialogFullscreenAction, {}), baseOptions.closeable &&
-                                    (0, jsx_runtime_1.jsx)(Futures_1.DialogCloseAction, {}), (0, jsx_runtime_1.jsx)(Futures_1.DialogInfoAction, {})] }) })] });
+            }, style: (_d = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _d === void 0 ? void 0 : _d.style, className: "dialog-header ".concat(baseOptions.draggable && !fullscreen ? 'drag-handle' : ''), children: [header(dialog), (baseOptions.closeable || baseOptions.fullscreen) &&
+                    (0, jsx_runtime_1.jsx)(context_1.WithHeaderFooterContext, { dialog: dialog, fullscreen: fullscreen, setFullscreen: setFullscreen, children: (0, jsx_runtime_1.jsxs)(Features_1.DialogHeaderActionsWrapper, { children: [baseOptions.fullscreen &&
+                                    (0, jsx_runtime_1.jsx)(Features_1.DialogFullscreenAction, {}), baseOptions.closeable &&
+                                    (0, jsx_runtime_1.jsx)(Features_1.DialogCloseAction, {}), baseOptions.about &&
+                                    (0, jsx_runtime_1.jsx)(Features_1.DialogInfoAction, {})] }) })] });
     }
-    return (0, jsx_runtime_1.jsx)("div", { style: (_f = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _f === void 0 ? void 0 : _f.style, className: 'drag-handle dialog-header', children: header });
-};
+    return (0, jsx_runtime_1.jsx)("div", { style: (_e = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _e === void 0 ? void 0 : _e.style, className: 'drag-handle dialog-header', children: header });
+});
 exports.DialogContentHeader = DialogContentHeader;

package/components/DialogWithBackdropWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DialogWithBackdropWrapperRefProps, WithBackdrop } from "../types/DialogTypes";
+declare const DialogWithBackdropWrapper: React.ForwardRefExoticComponent<Omit<WithBackdrop, "ref"> & React.RefAttributes<DialogWithBackdropWrapperRefProps>>;
+export { DialogWithBackdropWrapper };

package/components/DialogWithBackdropWrapper.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogWithBackdropWrapper = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DialogContent_1 = require("./DialogContent");
+var hexToRgb_1 = require("../helpers/hexToRgb");
+var Resizeable_1 = require("../helpers/Resizeable");
+var formik_1 = require("formik");
+var resizeManager = function (dialogRef, dialog) {
+    var _a;
+    dialogRef.current ? dialogRef.current.tabIndex = 0 : undefined; // Odaklanabilir hale getirir
+    (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    if (!(dialog === null || dialog === void 0 ? void 0 : dialog.props.initialOptions.base.resizeable))
+        return;
+    var rs = new Resizeable_1.Resizeable();
+    rs.setContainer(dialogRef, dialog.props.initialOptions);
+    rs.onResizeListener(function (width, height, rect) {
+        var _a;
+        if (typeof ((_a = dialog.props) === null || _a === void 0 ? void 0 : _a.resizeListener) === "function") {
+            dialog.props.resizeListener({ width: width, height: height, rect: rect }, dialog);
+        }
+    });
+    return rs;
+};
+var DialogWithBackdropWrapper = (0, react_1.forwardRef)(function (_a, ref) {
+    var body = _a.body, header = _a.header, actions = _a.actions, dialog = _a.dialog, dialogRef = _a.dialogRef, headerRef = _a.headerRef, bodyRef = _a.bodyRef, backdropRef = _a.backdropRef, footerRef = _a.footerRef, prevDialogRect = _a.prevDialogRect, snackbarRef = _a.snackbarRef;
+    var resizeableObject = (0, react_1.useState)(resizeManager(dialogRef, dialog))[0];
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        baseZoomEffect: baseZoomEffect
+    }); });
+    dialog.inlineFormikProps = (0, formik_1.useFormik)({
+        initialValues: dialog.props.initialValues,
+        onSubmit: function (values, formikHelpers) { }
+    });
+    // Call only on initialize
+    (0, react_1.useEffect)(function () {
+        return function () {
+            resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.cleanUp();
+        };
+    }, []);
+    var baseZoomEffect = function () {
+        var _a = dialog.dialogTranslate, lastX = _a.lastX, lastY = _a.lastY;
+        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
+        });
+    };
+    var _b = dialog.dialogOptions.backdrop, backgroundColor = _b.backgroundColor, opacity = _b.opacity;
+    var bgCl = (0, hexToRgb_1.hexToRgb)(backgroundColor, opacity);
+    return (0, jsx_runtime_1.jsx)("div", { className: "dialog-backdrop dialog-backdrop-show", ref: backdropRef, style: {
+            justifyContent: dialog.dialogOptions.base.initialAnchor.horizontal,
+            // alignItems: dialogOptions.base.initialAnchor.vertical,
+            background: bgCl
+        }, onClick: function (e) {
+            if (dialog.state.fullscreenMode)
+                return;
+            if (dialog.dialogOptions.backdrop.hideOnClick) {
+                dialog.close();
+                return;
+            }
+            baseZoomEffect();
+        }, children: (0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { body: body, header: header, actions: actions, dialogRef: dialogRef, headerRef: headerRef, bodyRef: bodyRef, footerRef: footerRef, backdropRef: backdropRef, dialogOptions: dialog.dialogOptions, dialog: dialog, resizeableObject: resizeableObject, prevDialogRect: prevDialogRect, snackbarRef: snackbarRef }) });
+});
+exports.DialogWithBackdropWrapper = DialogWithBackdropWrapper;

package/components/Features/DialogCloseAction.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogCloseAction = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CloseIcon_1 = __importDefault(require("../icons/CloseIcon"));
+var react_1 = require("react");
+var context_1 = require("../../context");
+var DialogCloseAction = function () {
+    var _a, _b, _c, _d, _e, _f;
+    var dialog = (0, react_1.useContext)(context_1.DialogHeaderFooterContext).dialog;
+    return (0, jsx_runtime_1.jsx)("div", { className: 'close-icon-wrapper', onClick: function (event) {
+            dialog.close();
+        }, children: (0, jsx_runtime_1.jsx)(CloseIcon_1.default, { size: (_c = (_b = (_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.headerControllerIcons) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 24, color: (_f = (_e = (_d = dialog.dialogOptions.base) === null || _d === void 0 ? void 0 : _d.headerControllerIcons) === null || _e === void 0 ? void 0 : _e.color) !== null && _f !== void 0 ? _f : null }) });
+};
+exports.DialogCloseAction = DialogCloseAction;