react-dialogger 1.1.129 → 1.1.131

package/components/DialogBase.d.ts

@@ -53,7 +53,7 @@ declare class DialogBase<V, I> extends Component<BaseDialogProps<V, I>, BaseDial
     get accessFrom(): TAccessFrom;
     initializeActionRef: (key: string) => RefObject<DialogActionBase>;
     get dialogOptions(): DialogOptionsType;
-    get holder(): DialogOptionsType;
+    get holder(): DialogOptionsType['slot']['loader'];
     get formikProps(): FormikProps<any>;
     set formikProps(value: FormikProps<any>);
     get formikValidate(): Promise<DialogFormikAdapter<any>>;

package/components/DialogBase.js

@@ -69,7 +69,7 @@ var _context_1 = require("../context/index.js");
 var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
     function DialogBase(props) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         var _this = _super.call(this, props) || this;
         // ✨✨✨✨✨✨✨✨✨✨✨
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
@@ -238,13 +238,13 @@ var DialogBase = /** @class */ (function (_super) {
         _this._bodyRef = React.createRef();
         _this._inProcess = { inProcess: false };
         _this._snackbarRef = React.createRef();
-        _this._holder = props.initialHolder;
+        _this._holder = (_c = (_b = (_a = props.initialOptions) === null || _a === void 0 ? void 0 : _a.slot) === null || _b === void 0 ? void 0 : _b.loader) !== null && _c !== void 0 ? _c : props === null || props === void 0 ? void 0 : props.initialHolder;
         // Initialize _actionRefs as an empty object
         _this._actionRefs = {};
         _this._parent = props.parent;
         _this._dialogWithBackDropRef = (0, react_1.createRef)();
-        _this._processingListeners = (_a = props.processingListeners) !== null && _a !== void 0 ? _a : [];
-        _this._abortedListeners = (_b = props.abortedListeners) !== null && _b !== void 0 ? _b : [];
+        _this._processingListeners = (_d = props.processingListeners) !== null && _d !== void 0 ? _d : [];
+        _this._abortedListeners = (_e = props.abortedListeners) !== null && _e !== void 0 ? _e : [];
         _this._initialValues = props.initialValues;
         return _this;
     }

package/components/DialogContent.js

@@ -176,7 +176,7 @@ var DialogContent = function (props) {
                 y: y / zoom,
                 fullscreen: false
             }, dialogRef);
-        }, children: (0, jsx_runtime_1.jsxs)("div", { onBlur: function (event) {
+        }, children: (0, jsx_runtime_1.jsx)("div", { onBlur: function (event) {
                 if (dialog.dialogOptions.backdrop.dimOnInactive) {
                     dialogRef.current.classList.add('inactive');
                 }
@@ -207,17 +207,21 @@ 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: (_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) {
-                                            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' }, (_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' }) }) })] })] }) });
+            }, 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: 'hidden' }), children: (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider
+            // domRoot={document.getElementById('mirsak')}
+            , { 
+                // domRoot={document.getElementById('mirsak')}
+                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.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)), "%"] })] }), (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/components/DialogContentBody.js

@@ -1,4 +1,15 @@
 "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);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -50,6 +61,64 @@ var Placeholder = function (_a) {
             display: placeholder ? 'flex' : 'none',
         }, children: placeholder });
 };
+// /**
+//  * @deprecated gereksiz render */
+// const PlaceholderWrapper_: React.FC<{dialog: IDialogApiDef, dialogOptions: DialogOptionsType, children: React.ReactNode}> = ({dialog, dialogOptions, children}) => {
+//     const bgColor = dialogOptions.base.style.backgroundColor ?
+//         dialogOptions.base.style.backgroundColor : "#FFFFFF";
+//     const bg = dialogOptions.base.style.background ?
+//         dialogOptions.base.style.background : "#FFFFFF";
+//
+//     const [inProcess, setInProcess] = React.useState<any>();
+//
+//     React.useEffect(() => {
+//         dialog.processingListener( inProcess => {
+//             setInProcess(dialog.isInProcess);
+//         })
+//     }, []);
+//
+//     const LoaderSlotElement = children ? React.isValidElement(children)
+//         ? React.cloneElement( children as React.ReactElement<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+//             ...dialog.dialogOptions.slotProps.loader,
+//             dialog
+//         })
+//         : React.createElement(children as unknown as React.JSXElementConstructor<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+//             ...dialog.dialogOptions.slotProps.loader,
+//             dialog
+//         }) : null
+//
+//     console.log('PlaceholderWrapper', dialog.isInProcess().message)
+//
+//     return <div className={'dialog-content-placeholder'} style={{
+//         backgroundColor: bgColor,
+//         background: bg,
+//         display: "flex"
+//     }}>
+//         {/*{children}*/}
+//         {LoaderSlotElement}
+//     </div>
+// }
+var PlaceholderWrapper = function (_a) {
+    var _b;
+    var dialog = _a.dialog, dialogOptions = _a.dialogOptions, children = _a.children;
+    var _c = React.useState(dialog.isInProcess()), inProcess = _c[0], setInProcess = _c[1];
+    React.useEffect(function () {
+        var unsubscribe = dialog.processingListener(function () {
+            setInProcess(dialog.isInProcess());
+        });
+        // return () => (unsubscribe as any)?.()
+    }, [dialog]);
+    var initialElement = React.useState(function () {
+        if (!children)
+            return null;
+        return React.isValidElement(children) ? children : React.createElement(children, {});
+    })[0];
+    var LoaderSlotElement = initialElement
+        ? React.cloneElement(initialElement, __assign(__assign({}, dialog.dialogOptions.slotProps.loader), { values: dialog.values, inProcess: dialog.isInProcess() }))
+        : null;
+    var backgroundColor = (_b = dialogOptions.base.style.backgroundColor) !== null && _b !== void 0 ? _b : "#FFFFFF";
+    return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-content-placeholder', style: { display: inProcess.inProcess ? 'flex' : 'none', backgroundColor: backgroundColor }, children: LoaderSlotElement });
+};
 // const DialogContentBody: React.FC<IContentBodyProps> = React.forwardRef(({
 //         body
 // }, ref ) => {
@@ -67,11 +136,22 @@ var DialogContentBody = React.forwardRef(function (_a, ref) {
         setProcessing: setProcessing,
         inProcess: inProcess
     }); });
+    // const LoaderSlotElement = dialog.holder ? React.isValidElement(dialog.holder)
+    //     ? React.cloneElement( dialog.holder as React.ReactElement<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+    //         ...dialog.dialogOptions.slotProps.loader,
+    //         dialog
+    //     })
+    //     : React.createElement(dialog.holder as JSXElementConstructor<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+    //         ...dialog.dialogOptions.slotProps.loader,
+    //         dialog
+    //     }) : null
+    console.log('LoaderSlotElement', dialog.isInProcess());
     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)] });
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(PlaceholderWrapper, { dialog: dialog, dialogOptions: dialog.dialogOptions, children: dialog.holder }), body(dialog)] });
     }
     return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: dialog.holder ?
-            (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder })
+            // <Placeholder dialogOptions={dialog.dialogOptions} placeholder={dialog.holder} />
+            (0, jsx_runtime_1.jsx)(PlaceholderWrapper, { dialog: dialog, dialogOptions: dialog.dialogOptions, children: dialog.holder })
             :
                 body });
 });

package/models/Dialog.d.ts

@@ -37,6 +37,7 @@ declare class Dialog<V, I> {
     stateListener(listener: TDialogStateListenerCallbackType): this;
     processingListener(listener: (inProcess: boolean) => void): this;
     onAbort(callbackFn: TDialogCallbackFn<V, I, void>): this;
+    /**@deprecated use slot.loader instead */
     initialHolder(holder: TInitialHolder): this;
     keyboardListener(listener: (key: string, dialog: IDialogApiDef) => void): this;
     resizeListener(listener: (size: IDialogSize, dialog: IDialogApiDef) => void): this;

package/models/Dialog.js

@@ -155,6 +155,7 @@ var Dialog = /** @class */ (function () {
         this._abortedListeners.push(callbackFn);
         return this;
     };
+    /**@deprecated use slot.loader instead */
     Dialog.prototype.initialHolder = function (holder) {
         this._initialHolder = holder;
         return this;

package/models/baseDialogOptions.js

@@ -76,7 +76,7 @@ var BASE_DIALOG_OPTIONS = {
         busyMessage: "Please wait...",
     },
     slot: {
-        action: undefined,
+        action: undefined
     },
     slotProps: {
         action: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.129",
+  "version": "1.1.131",
   "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

@@ -41,6 +41,7 @@ export interface BaseDialogProps<V extends Record<string, any>, I> {
     didMountCallback?: TDialogCallbackFn<V, I, void>;
     dialogSize?: IDialogSize;
     stateListener: TDialogStateListenerCallbackType;
+    /**@deprecated use slot.loader instead */
     initialHolder: TInitialHolder;
     snackbarAnchor?: ISnackbarAnchor;
     dom: HTMLDivElement;
@@ -90,6 +91,7 @@ interface kSlot {
     action?: React.JSXElementConstructor<any>;
     footer?: React.JSXElementConstructor<any>;
     header?: React.JSXElementConstructor<any>;
+    loader?: React.JSXElementConstructor<any>;
 }
 interface kSlotProps {
     action?: {
@@ -98,7 +100,11 @@ interface kSlotProps {
     };
     footer?: Record<string, any>;
     header?: Record<string, any>;
+    loader?: Record<string, any>;
 }
+export type DialogSlotLoaderProps = kSlotProps['loader'] & Pick<IDialogApiDef, 'values'> & {
+    processing: IInProcess;
+};
 export interface IBaseDialogOptions {
     closeable?: boolean;
     initialAnchor?: IDialogAnchor;
@@ -236,7 +242,7 @@ export interface IBackdropOptions {
     dimOnInactive?: boolean;
 }
 export type TNotifyOnClosing = "snackbar" | "zoom" | undefined;
-export type TInitialHolder = any;
+export type TInitialHolder = kSlot['loader'];
 export type TLoaderHolder = any;
 export interface IInProcess {
     inProcess: boolean;