react-dialogger 1.1.96 → 1.1.98

package/README.md

@@ -88,18 +88,24 @@ baseDialogOptions({
 ```
 
 #### useDialogOptions (Slot & Slot Props)
+
 ```js
 slot: {
     header: HeaderSlot, // Slot for the header, can be a custom component or template
-    footer: FooterSlot // Slot for the footer, can be a custom component or template
-},
+        footer
+:
+    FooterSlot // Slot for the footer, can be a custom component or template
+}
+,
 slotProps: {
     header: (props: IBaseHeaderProps) => {
         return {
             headerName: 'sampleProp' // Custom properties to be passed to the header slot component
         }
     },
-        footer: (props: IBaseFooterProps) => {
+        footer
+:
+    (props: IBaseFooterProps) => {
         return {
             footerName: 'Footer' // Custom properties to be passed to the footer slot component
         }
@@ -108,28 +114,39 @@ slotProps: {
 
 // Header Slot Component
 const HeaderSlot = (props: IHeaderProps) => {
-    const { headerName } = props;
+    const {headerName} = props;
     return <div style={{display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'space-between'}}>
         <div>
             {headerName}
             {/**values.name is dynamic by updated state than will trigger re-render*/}
-            <span style={{fontSize: '12px', fontWeight: 'bold', color: "cyan", fontStyle: "italic"}}>{props.values.name}</span>
+            <span style={{
+                fontSize: '12px',
+                fontWeight: 'bold',
+                color: "cyan",
+                fontStyle: "italic"
+            }}>{props.values.name}</span>
         </div>
         {/**Use futures*/}
         <DialogHeaderActionsWrapper>
-            <DialogFullscreenAction />
-            <DialogCloseAction />
+            <DialogFullscreenAction/>
+            <DialogCloseAction/>
         </DialogHeaderActionsWrapper>
     </div>;
 }
 
 // Footer Slot Component
 const FooterSlot = (props: IFooterProps) => {
-    
+
     const {footerName, inProcess} = props;
-    return <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', columnGap: 2}} >
+    return <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        columnGap: 2
+    }}>
         <span>Collected: Online {props.footerName}</span>
-        <DialogProcessing />
+        <DialogProcessing/>
     </div>;
 }
 
@@ -138,10 +155,13 @@ const FooterSlot = (props: IFooterProps) => {
 // These custom props are then passed to the respective slot components, allowing dynamic and flexible content injection.
 // The base dialog props (e.g., dialogValues, dialogOptions) are still accessible, and users can merge their own custom props as needed.
 
-export interface BaseDialogSlotProps {
-    dialogValues: TValues; // The values that the dialog holds
+export
+interface
+BaseDialogSlotProps
+{
+    dialogValues: DValues; // The values that the dialog holds
     dialogOptions: DialogOptionsType; // The options controlling the dialog's behavior
-    dialog?: IDialogRef; // A reference to the dialog component for external control
+    dialog ? : IDialogRef; // A reference to the dialog component for external control
 }
 
 

package/components/DialogBase.d.ts

@@ -1,12 +1,12 @@
 import { Component, RefObject } from 'react';
 import { FormikProps } from "formik";
 import { DialogActionBase } from "./index.js";
-import { BaseDialogProps, BaseDialogState, IDialogSize, DialogOptionsType, TDialogCallbackFn, TDialogCallbackVoidFn, WithBackdrop, IDialogSnackbar, IInProcess, TInitialHolder, ISnackbarAnchor, TSeverity, DialogValues, TAccessFrom, ActionApiDef, DialogContentFooterReturnType, DialogFormikAdapter } from "../types/index.js";
+import { BaseDialogProps, BaseDialogState, IDialogSize, DialogOptionsType, TDialogCallbackFn, TDialogCallbackVoidFn, WithBackdrop, IDialogSnackbar, IInProcess, TInitialHolder, ISnackbarAnchor, TSeverity, TAccessFrom, ActionApiDef, DialogContentFooterReturnType, DialogFormikAdapter, DialogHandlers, DialogHandlerFn, DialogValues, DialogValue } from "../types/index.js";
 import Dialog, { DialogAction } from "../models/index.js";
 interface IFormikAdapter extends Pick<FormikProps<any>, 'setValues' | 'setFieldValue' | 'values'> {
 }
 type FeatureType = Partial<Record<string, any>>;
-declare class DialogBase<Values extends FormikProps<Values>> extends Component<BaseDialogProps, BaseDialogState> {
+declare class DialogBase<Values extends DialogValues<Record<string, any>>> extends Component<BaseDialogProps, BaseDialogState> {
     _dialogTranslate: {
         lastX: number;
         lastY: number;
@@ -29,21 +29,27 @@ declare class DialogBase<Values extends FormikProps<Values>> extends Component<B
     protected _onClose: TDialogCallbackVoidFn;
     protected _shInterval: number;
     protected _snackbarAnchor: ISnackbarAnchor;
-    protected _initialValues: DialogValues;
+    protected _initialValues: DialogValues<Values>;
+    protected _parent: Dialog<Values>;
+    protected _handlers: DialogHandlers;
     private _inProcess;
     private _footerRef;
     protected _headerRef: RefObject<DialogContentFooterReturnType>;
     private readonly _dialogWithBackDropRef;
-    protected readonly _parent: Dialog;
     private _accessFrom;
     private readonly _processingListeners;
     private readonly _abortedListeners;
-    constructor(props?: Readonly<BaseDialogProps>);
+    constructor(props: BaseDialogProps & {
+        initialValues: DialogValues<Values>;
+        parent: Dialog<Values>;
+    });
     private T;
     private readonly _features;
+    get handlers(): DialogHandlers;
+    addHandler(key: string, handler: DialogHandlerFn): void;
     addFeature(key: string, value: any): void;
     getFeature(key: string): FeatureType;
-    get parent(): Dialog;
+    get parent(): Dialog<Values>;
     get dialogTranslate(): {
         lastX: number;
         lastY: number;
@@ -58,8 +64,8 @@ declare class DialogBase<Values extends FormikProps<Values>> extends Component<B
     get formikValidate(): Promise<DialogFormikAdapter<any>>;
     set inlineFormikProps(inlineFormikProps: IFormikAdapter);
     get values(): IFormikAdapter['values'];
-    setValue(key: string, value: any): void;
-    setValues(values: IFormikAdapter['values'], callbackFn?: () => void): void;
+    setValue(key: string, value: DialogValue): void;
+    setValues(values: DialogValues<Values>, callbackFn?: () => void): void;
     componentDidMount(): void;
     setInProcess: (process: boolean, message?: string, holder?: TInitialHolder) => this;
     isInProcess: () => IInProcess;

package/components/DialogBase.js

@@ -68,8 +68,9 @@ var _helpers_1 = require("../helpers/index.js");
 var _context_1 = require("../context/index.js");
 var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
+    // constructor(props: Readonly<BaseDialogProps> = {} as Readonly<BaseDialogProps>) {
+    // constructor(props: BaseDialogProps) {
     function DialogBase(props) {
-        if (props === void 0) { props = {}; }
         var _a, _b;
         var _this = _super.call(this, props) || this;
         // ✨✨✨✨✨✨✨✨✨✨✨
@@ -161,11 +162,11 @@ var DialogBase = /** @class */ (function (_super) {
                 }, 50);
             };
             setTimeout(function () {
-                var _a, _b, _c, _d;
-                if (_this._footerRef.current.inProcess && !_this.state.aborted) {
-                    var notify = (_a = _this._dialogOptions.base.notifyOnClosing) !== null && _a !== void 0 ? _a : "snackbar";
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                if (((_b = (_a = _this._footerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.inProcess) && !_this.state.aborted) {
+                    var notify = (_e = (_d = (_c = _this._dialogOptions) === null || _c === void 0 ? void 0 : _c.base) === null || _d === void 0 ? void 0 : _d.notifyOnClosing) !== null && _e !== void 0 ? _e : "snackbar";
                     if (notify === "snackbar") {
-                        var busyMessage = (_d = (_c = (_b = _this._dialogOptions) === null || _b === void 0 ? void 0 : _b.localText) === null || _c === void 0 ? void 0 : _c.busyMessage) !== null && _d !== void 0 ? _d : 'In Process, Please wait...';
+                        var busyMessage = (_h = (_g = (_f = _this._dialogOptions) === null || _f === void 0 ? void 0 : _f.localText) === null || _g === void 0 ? void 0 : _g.busyMessage) !== null && _h !== void 0 ? _h : 'In Process, Please wait...';
                         _this.snackbar.open(busyMessage, "warning", null, function (key, snackbarRef) {
                             var _a, _b, _c;
                             return (0, jsx_runtime_1.jsx)(_components_1.DialogActionBase, { name: 'force_close', onClick: handleAbort, options: {
@@ -176,19 +177,20 @@ var DialogBase = /** @class */ (function (_super) {
                         });
                     }
                     else {
-                        _this._dialogWithBackDropRef.current.baseZoomEffect();
+                        (_k = (_j = _this._dialogWithBackDropRef) === null || _j === void 0 ? void 0 : _j.current) === null || _k === void 0 ? void 0 : _k.baseZoomEffect();
                     }
                     return;
                 }
                 _this.kill(callbackFn);
-                if (typeof _this.props.onClose === "function") {
+                if (typeof ((_l = _this.props) === null || _l === void 0 ? void 0 : _l.onClose) === "function") {
                     _this.props.onClose(_this);
                 }
             }, 150);
         };
         _this.focus = function () {
-            if (_this._dialogRef.current) {
-                _this._dialogRef.current.focus();
+            var _a, _b, _c;
+            if ((_a = _this._dialogRef) === null || _a === void 0 ? void 0 : _a.current) {
+                (_c = (_b = _this._dialogRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
             }
         };
         _this.getDom = function () {
@@ -254,13 +256,30 @@ var DialogBase = /** @class */ (function (_super) {
         // Initialize _actionRefs as an empty object
         _this._actionRefs = {};
         _this._initialValues = props.initialValues;
-        _this._dialogWithBackDropRef = (0, react_1.createRef)();
         _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._features = [];
+        _this._handlers = props.handlers;
         return _this;
     }
+    Object.defineProperty(DialogBase.prototype, "handlers", {
+        get: function () {
+            return this._handlers;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DialogBase.prototype.addHandler = function (key, handler) {
+        if (!key) {
+            throw new Error('Handler key is required');
+        }
+        if (typeof handler !== 'function') {
+            throw new Error("Handler \"".concat(key, "\" must be a function"));
+        }
+        this._handlers[key] = handler;
+    };
     DialogBase.prototype.addFeature = function (key, value) {
         this._features[key] = value;
     };
@@ -349,6 +368,7 @@ var DialogBase = /** @class */ (function (_super) {
     Object.defineProperty(DialogBase.prototype, "values", {
         // ✨✨✨✨✨✨✨✨✨✨✨
         get: function () {
+            // get values(): DialogValues<Values> {
             return this._inlineFormikProps.values;
             // UseImperative
             // return this._dialogWithBackDropRef?.current?.formikProps.values;
@@ -364,6 +384,7 @@ var DialogBase = /** @class */ (function (_super) {
         // this._dialogWithBackDropRef?.current?.formikProps?.setFieldValue(key, value);
     };
     // ✨✨✨✨✨✨✨✨✨✨✨
+    // public setValues(values: IFormikAdapter['values'], callbackFn?: () => void): void {
     DialogBase.prototype.setValues = function (values, callbackFn) {
         this._inlineFormikProps.setValues(values);
         // UseImperative

package/models/Dialog.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { DialogAction } from "./DialogAction";
-import { TInitialHolder, DialogValues, IDialogSize, TDialogStateListenerCallbackType, DialogOptionsType, IDialogApiDef, TDialogCallbackVoidFn, TDialogCallbackFn } from "../types/index.js";
-declare class Dialog {
+import { TInitialHolder, IDialogSize, TDialogStateListenerCallbackType, DialogOptionsType, IDialogApiDef, TDialogCallbackVoidFn, TDialogCallbackFn, DialogHandlers, ModelDialogValues } from "../types/index.js";
+declare class Dialog<Values extends ModelDialogValues<Record<string, any>>> {
     private readonly _processingListeners;
     private readonly _abortedListeners;
     private _stateListener;
@@ -15,6 +15,13 @@ declare class Dialog {
     private readonly _dialogOptions?;
     private _snackbarAnchor;
     private _initialValues;
+    /**
+     * Move Fucntions
+     * behavior
+     * Fonksiyon taşıdığını net anlatıyor
+     * UI / Dialog / Form bağlamında alışıldık
+     * */
+    private _handlers;
     private _headerRef;
     private readonly _apiRef;
     private _onCloseCallback;
@@ -28,7 +35,8 @@ declare class Dialog {
     stateListener(listener: TDialogStateListenerCallbackType): this;
     processingListener(listener: (inProcess: boolean) => void): this;
     onAbort(callbackFn: TDialogCallbackFn<void>): this;
-    initialValues(values: DialogValues): this;
+    initialValues(values: ModelDialogValues<Values>): this;
+    handlers(handlers: DialogHandlers): this;
     initialHolder(holder: TInitialHolder): this;
     keyboardListener(listener: (key: string, dialog: IDialogApiDef) => void): this;
     resizeListener(listener: (size: IDialogSize, dialog: IDialogApiDef) => void): this;

package/models/Dialog.js

@@ -132,6 +132,10 @@ var Dialog = /** @class */ (function () {
         this._initialValues = values;
         return this;
     };
+    Dialog.prototype.handlers = function (handlers) {
+        this._handlers = handlers;
+        return this;
+    };
     Dialog.prototype.initialHolder = function (holder) {
         this._initialHolder = holder;
         return this;
@@ -153,7 +157,7 @@ var Dialog = /** @class */ (function () {
         var root = (0, client_1.createRoot)(dom);
         var props = __assign(__assign({ 
             // Initials
-            initialOptions: this._dialogOptions, initialValues: this._initialValues, didMountCallback: callback, 
+            initialOptions: this._dialogOptions, initialValues: this._initialValues, handlers: this._handlers, didMountCallback: callback, 
             // Component contents
             header: this._header, body: this._body, actions: this._actions, 
             // Refs

package/package.json

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

@@ -1,4 +1,4 @@
-import { IDialogApiDef, IListenerDialogDef, TValues, ICoords } from "./index.js";
+import { IDialogApiDef, IListenerDialogDef, ICoords } from "./index.js";
 import { DialogBase, DialogActionBase } from "../components/index.js";
 import * as React from "react";
 import { DialogAction } from "../models/index.js";
@@ -63,7 +63,7 @@ export type DialogActionOptionsType = {
     baseStyle?: React.CSSProperties;
 };
 type TListenerButtonType = Pick<DialogActionBase, Exclude<keyof ActionApiDef, 'onClick' | 'getStateListener' | 'name'>>;
-export type TDialogStateListenerForActionCallbackType = (values: TValues, button: TListenerButtonType, dialog: IListenerDialogDef) => void;
+export type TDialogStateListenerForActionCallbackType = (values: Record<string, any>, button: TListenerButtonType, dialog: IListenerDialogDef) => void;
 export interface IContentFooterProps {
 }
 export interface DialogContentFooterReturnType {

package/types/DialogTypes.d.ts

@@ -12,7 +12,7 @@ export interface TBaseDialogState {
 }
 export interface BaseDialogState {
     /**@deprecated use FormikProps Values*/
-    values: DialogValues;
+    values: DialogValues<Record<string, any>>;
     inProcess: IInProcess;
     fullscreenMode?: boolean;
     prevDialogRect: WithBackdrop['prevDialogRect'];
@@ -39,11 +39,12 @@ export interface BaseDialogProps {
     didMountCallback?: TDialogCallbackVoidFn;
     dialogSize?: IDialogSize;
     stateListener: TDialogStateListenerCallbackType;
-    initialValues: DialogValues;
+    initialValues: DialogValues<Record<string, any>>;
+    handlers: DialogHandlers;
     initialHolder: TInitialHolder;
     snackbarAnchor?: ISnackbarAnchor;
     dom: HTMLDivElement;
-    parent?: Dialog;
+    parent?: DialogValues<Record<string, any>>;
     onClose?: TDialogCallbackVoidFn;
     root?: any;
     keyboardListener: (key: string, dialog: IDialogApiDef) => void;
@@ -147,7 +148,7 @@ export type TDialogStateListenerCallbackType = (values: FormikProps<any>['values
 export type TDialogCallbackFn<T = React.ReactNode | React.ReactElement> = (dialog: IDialogApiDef) => T;
 export type TDialogHeader = TDialogCallbackFn | React.ReactNode | React.JSX.Element;
 export type TDialogCallbackVoidFn = TDialogCallbackFn<void>;
-export interface IDialogApiDef extends Pick<DialogBase<any>, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus' | 'updateBody' | 'processingListener' | 'addFeature' | 'getFeature' | 'onAbort'> {
+export interface IDialogApiDef extends Pick<DialogBase<any>, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus' | 'updateBody' | 'processingListener' | 'addFeature' | 'getFeature' | 'onAbort' | 'handlers'> {
 }
 export interface IDialogCloseRef extends Pick<DialogBase<any>, 'close'> {
 }
@@ -178,7 +179,7 @@ export interface WithBackdrop {
     actions?: DialogAction[];
     dialog: DialogBase<any>;
     backdropRef: RefObject<any>;
-    initialValues: Partial<TValues>;
+    initialValues: Partial<Record<string, any>>;
     dialogRef: RefObject<any>;
     headerRef: RefObject<any>;
     bodyRef: RefObject<any>;
@@ -244,8 +245,15 @@ export type TInitialValues<T extends Record<string, any>> = T;
 export type TUserProps = {
     [K: string]: any;
 };
-export type TValues = Record<string, any>;
-export type DialogValues = Partial<TValues>;
+export type DialogValue = string | number | any[] | {
+    [k: string]: string | number | any[];
+};
+export type ModelDialogValues<T> = {
+    [K in keyof T]: DialogValue;
+};
+export type DialogValues<T> = ModelDialogValues<T>;
+export type DialogHandlerFn = (...args: any[]) => any;
+export type DialogHandlers = Record<string, DialogHandlerFn>;
 export interface BaseDialogDOMRect {
     height?: number;
     width?: number;
@@ -269,6 +277,6 @@ export interface ICoords {
     y: number;
 }
 export interface DialogProps {
-    setHeader(header: TDialogCallbackFn): Dialog;
+    setHeader(header: TDialogCallbackFn): Dialog<Record<string, any>>;
 }
 export {};