react-dialogger 1.1.0

package/README.md

@@ -0,0 +1,303 @@
+# react-araci - Custom Dialog Component Documentation
+
+This documentation explains the configuration of the Custom Dialog Component and how to customize it using initial options with the `useDialogOptions` function. `useDialogOptions` allows you to set the initial options to manage the dialog's appearance and behavior.
+
+## useDialogOptions Hook
+
+`useDialogOptions` is a hook used to set the initial options of a Dialog component. This hook allows you to configure various properties of the dialog, such as the header, footer, size, style, etc.
+
+```Global Dialog Configuration
+The useDialogOptions function is placed at the beginning of the application to define base settings for all dialogs used throughout the app. These settings act as a global configuration, ensuring consistency across all dialog components.
+
+By defining these options globally, you ensure that all dialogs share common behaviors and styling. This approach simplifies managing the appearance and functionality of dialogs, as you only need to modify the base configuration in one place.
+
+Custom Dialog Configurations
+
+Although a global configuration is set by useDialogOptions, each dialog can still be individually customized as needed. You can override the default settings for specific dialogs to meet particular requirements. This flexibility allows you to customize the appearance, behavior, and actions of each dialog instance separately, while still maintaining the benefits of a unified base configuration.
+```
+## Example Usage
+
+Below is an example of customizing a dialog using `useDialogOptions`:
+
+#### useDialogOptions (Base)
+```js
+useDialogOptions({
+    base: {
+        footer: {
+            style: { // Footer custom styles
+                backgroundColor: '#f1f1f1' // Background color for footer
+            }
+        },
+        header: {
+            style: { // Header custom styles
+                backgroundColor: '#333', // Background color for header
+                color: '#fff' // Text color for header
+            }
+        },
+        fullscreen: true, // Enables fullscreen mode for the dialog
+        notifyOnClosing: 'zoom', // Notification method on closing ('zoom' or 'snackbar')
+        headerControllerIcons: {
+            size: 20, // Icon size in header
+            color: 'red' // Icon color in header
+        },
+        style: { // General styles for the dialog
+            borderRadius: '8px', // Round corners for the dialog
+            boxShadow: '0px 5px 15px rgba(0, 0, 0, 0.2)' // Shadow around the dialog
+        },
+        resizeable: true, // Makes the dialog resizable by the user
+        draggable: true, // Allows the dialog to be dragged around the screen
+        closeable: true, // Allows the dialog to be closed
+        initialAnchor: {
+            vertical: 'center', // Vertical position of the dialog ('flex-start', 'center', 'flex-end')
+            horizontal: 'center' // Horizontal position of the dialog ('flex-start', 'center', 'flex-end')
+        },
+        size: {
+            width: 800, // Dialog width in pixels
+            height: 600 // Dialog height in pixels
+        },
+        actions: {
+            disabledOnDialogProcessing: true, // Disables actions when the dialog is processing
+            baseStyle: { // Custom styles for action buttons
+                padding: '5px 20px', // Padding inside action buttons
+                border: '2px solid #ccc', // Border for action buttons
+                boxShadow: '0 0 10px rgba(0, 0, 0, 0.15)' // Shadow for action buttons
+            }
+        }
+    }
+});
+```
+#### useDialogOptions (snackbar)
+```js
+snackbar: {
+    busyMessage: 'On Process, please wait!', // Message displayed during the process
+    maxSnack: 4, // Maximum number of snackbars that can be displayed at once
+    autoHideDuration: 5000, // Time in milliseconds before the snackbar automatically disappears (5000ms = 5 seconds)
+    anchorOrigin: {
+        horizontal: "center", // Horizontal alignment of the snackbar (center, left, right)
+        vertical: "top" // Vertical alignment of the snackbar (top, bottom)
+    }
+}
+```
+
+#### 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
+},
+slotProps: {
+    header: (props: IBaseHeaderProps) => {
+        return {
+            headerName: 'sampleProp' // Custom properties to be passed to the header slot component
+        }
+    },
+        footer: (props: IBaseFooterProps) => {
+        return {
+            footerName: 'Footer' // Custom properties to be passed to the footer slot component
+        }
+    }
+}
+
+// Header Slot Component
+const HeaderSlot = (props: IHeaderProps) => {
+    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>
+        </div>
+        {/**Use futures*/}
+        <DialogHeaderActionsWrapper>
+            <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}} >
+        <span>Collected: Online {props.footerName}</span>
+        <DialogProcessing />
+    </div>;
+}
+
+// Explanation
+// Footer & Header slot props are merged with the custom props inside slotProps.
+// 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
+    dialogOptions: DialogOptionsType; // The options controlling the dialog's behavior
+    dialog?: IDialogRef; // A reference to the dialog component for external control
+}
+
+
+```
+
+#### useDialogOptions (Progress)
+```js
+progress: {
+    size: 20,
+    color: 'red'
+},
+```
+#### useDialogOptions (Backdrop)
+```js
+backdrop: {
+    backgroundColor: '#282828', // The background color of the backdrop (overlay) behind the dialog
+    opacity: 0.6, // The opacity of the backdrop (0 = fully transparent, 1 = fully opaque)
+    hideOnClick: false // Determines whether the backdrop will hide when clicked
+}
+
+
+```
+
+
+# Basic Usage of Custom Dialog Component
+
+This example demonstrates the basic usage of the **Custom Dialog Component** with predefined actions, content, and properties. The dialog can be configured to include actions (buttons), initial values, and custom behaviors for interaction.
+
+## 1. Create Actions
+
+Actions are defined for the dialog buttons (e.g., "Ok" and "Close").
+
+- **Ok Action**: The "Ok" button has a `text` variant and `default` color.
+- **Close Action**: The "Close" button has a `contained` variant and `primary` color.
+
+```javascript
+const okAction = new DialogAction('okAction', {
+    label: 'Ok',
+    variant: 'text',
+    color: 'default'
+});
+okAction.onClick((button, dialog1) => {
+    // Actions when Ok button is clicked
+});
+
+const closeAction = new DialogAction('closeAction', {
+    label: 'Close',
+    variant: 'contained',
+    color: 'primary'
+});
+closeAction.onClick((button, dialog1) => {
+    dialog1.close();  // Closes the dialog when the Close button is clicked
+});
+```
+
+## 2. Create Dialog
+The Dialog component is initialized with optional configuration such as resize and drag capabilities.
+
+```javascript
+const dialog = new Dialog(null, {
+    base: {
+        resizeable: true,  // Dialog can be resized
+        draggable: true    // Dialog can be dragged
+    }
+});
+```
+## 3. Set Header and Body
+You can define the dialog’s header and body content dynamically. The content is set through functions, allowing flexibility in displaying data.
+
+```javascript
+dialog
+    .setHeader(dialog1 => 'Dialog header')  // Set dialog header
+    .setBody(dialog1 => 'Dialog Body')      // Set dialog body content
+```
+
+## 4. Add Actions
+The dialog supports custom actions like the "Ok" and "Close" buttons. These actions are added to the dialog with the addActions method.
+
+```javascript
+    .addActions([
+        okAction,    // Add Ok button action
+        closeAction  // Add Close button action
+    ])
+```
+## 5. Set Initial Values
+You can initialize values for the dialog, such as form fields or other settings. These values will be used throughout the dialog lifecycle.
+
+```javascript
+    .initialValues({
+        my_name: 'Eric',  // Set initial value for name
+        age: 29           // Set initial value for age
+    })
+``` 
+## 6. Show the Dialog
+Finally, the dialog is displayed using the show method. You can define additional logic that runs when the dialog is shown.
+
+```javascript
+    .show(dialog1 => {
+        // Actions when the dialog is shown
+    });
+```
+
+## Using Formik Inside Dialog Body
+
+If **Formik** is used inside the dialog body, its `formikProps` can be linked to the dialog’s internal `formikProps`. This allows access to form properties from anywhere within the dialog.
+
+### Example: Binding Formik to Dialog
+
+```javascript
+dialog.setBody(dialog1 => (
+    <MyComponent>
+        <Formik 
+            initialValues={{
+                my_name: dialog1.values.my_name,
+                age: dialog1.values.age
+            }} 
+            onSubmit={(values, formikHelpers) => {
+                // Form submission logic
+                // This event is triggered via okAction click 🚀
+            }}
+        >
+            {formikProps => {
+                dialog1.formikProps = formikProps; // Bind Formik props to dialog
+
+                return (
+                    <form>
+                        {/* Form content goes here */}
+                    </form>
+                );
+            }}
+        </Formik>
+    </MyComponent>
+));
+
+// Example: Triggering Form Submission from an Action
+
+const okAction = new DialogAction('okAction', {
+    label: 'Ok',
+    variant: 'text',
+    color: 'default'
+});
+
+okAction.onClick((button, dialog1) => {
+    dialog1.formikProps.submitForm(); // 🚀 Trigger form submission via action button
+});
+```
+
+## User Footer Slot 
+
+
+
+## Summary of Basic Usage
+```php
+- **Dialog Initialization**: Create a dialog instance with optional configuration for resize and drag behavior.
+- **Actions**: Define action buttons (Ok, Close) with custom behavior (click handling).
+- **Content**: Dynamically set the dialog header and body content.
+- **⚠ Header Slot Consideration**: `setHeader` will be ignored if a **header slot** is used.
+- **Initial Values**: Set initial values for the dialog’s content (e.g., form fields).
+- **Show Dialog**: Display the dialog and handle any post-display logic.
+
+This basic usage setup enables you to quickly configure and display a custom dialog with dynamic content and actions, making it highly customizable for various use cases in your application.
+```
+
+> **⚠ Important Notice**  
+> 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`**.
+

package/components/CircularProgress.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { IInProcess } from "../types/types";
+declare const _default: ({ size, color, inProcess }: {
+    color?: string;
+    inProcess: IInProcess;
+    size: number;
+}) => React.JSX.Element;
+export default _default;

package/components/CircularProgress.js

@@ -0,0 +1,50 @@
+"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);
+    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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+exports.default = (function (_a) {
+    var size = _a.size, color = _a.color, inProcess = _a.inProcess;
+    if (inProcess === null || inProcess === void 0 ? void 0 : inProcess.inProcess) {
+        return React.createElement("div", { style: { display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' } },
+            React.createElement("span", { className: "circular-root", style: __assign({ display: 'flex', flex: 1, width: size, height: size }, color ? { color: color } : {}), role: "progressbar" },
+                React.createElement("svg", { className: "circular", viewBox: "22 22 44 44" },
+                    React.createElement("circle", { className: "circular-circle", cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6" }))),
+            inProcess.message
+                &&
+                    React.createElement("span", { style: { fontStyle: 'normal', fontSize: 12 } }, inProcess.message));
+    }
+    return React.createElement(React.Fragment, null);
+});

package/components/DialogActionBase.d.ts

@@ -0,0 +1,44 @@
+import { Component } from "react";
+import * as React from "react";
+import DialogBase from "./DialogBase";
+import { ActionProps, ActionState, DialogActionType, TBVariant, TBColor, DialogActionOptionsType, TDialogStateListenerForActionCallbackType } from "../types/DialogActionTypes";
+declare class DialogActionBase extends Component<ActionProps, ActionState> {
+    get dialogBaseComponent(): DialogBase;
+    protected _options: DialogActionOptionsType;
+    _stateListener: TDialogStateListenerForActionCallbackType;
+    protected _baseDialogAction?: DialogActionBase;
+    protected _name: string;
+    protected _onClick: ActionProps['onClick'];
+    private readonly _dialogBaseComponent;
+    protected _inProcess: ActionProps['inProcess'];
+    private readonly _buttonRef;
+    private readonly _rippleButtonRef;
+    private readonly _initialClickHandler;
+    constructor(props?: Readonly<ActionProps>);
+    get name(): string;
+    componentDidMount(): void;
+    get baseDialogAction(): DialogActionBase;
+    getInitialClickHandler: () => DialogActionType;
+    setOptions(options: DialogActionOptionsType): this;
+    get options(): DialogActionOptionsType;
+    setLabel: (label: string) => DialogActionBase;
+    getLabel(): string;
+    protected onClick(callback: DialogActionType): DialogActionBase;
+    setVariant: (variant: TBVariant) => DialogActionBase;
+    getVariant: () => TBVariant;
+    setColor: (color: TBColor) => DialogActionBase;
+    getColor: () => TBColor;
+    setDisabled: (disabled: boolean) => DialogActionBase;
+    /**
+     * @deprecated
+     * @see use isDisabled */
+    getDisabled: () => boolean;
+    isDisabled: () => boolean;
+    setInProcess: (inProcess: boolean) => DialogActionBase;
+    isInProcess: () => boolean;
+    remove: () => void;
+    click: () => void;
+    onClickHandler: () => DialogActionType;
+    render: () => React.JSX.Element;
+}
+export default DialogActionBase;

package/components/DialogActionBase.js

@@ -0,0 +1,222 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+    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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var React = __importStar(require("react"));
+var RippleButton_1 = __importDefault(require("./RippleButton"));
+var CircularProgress_1 = __importDefault(require("./CircularProgress"));
+var DialogActionBase = /** @class */ (function (_super) {
+    __extends(DialogActionBase, _super);
+    function DialogActionBase(props) {
+        if (props === void 0) { props = {}; }
+        var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
+        _this._options = {
+            label: 'Button label',
+            variant: 'contained',
+            color: 'primary',
+            disabled: false,
+            prevDisabled: false
+        };
+        _this.getInitialClickHandler = function () {
+            return _this._initialClickHandler;
+        };
+        _this.setLabel = function (label) {
+            _this._options.label = label;
+            _this.forceUpdate();
+            return _this;
+        };
+        _this.setVariant = function (variant) {
+            _this._options.variant = variant;
+            _this.forceUpdate();
+            return _this;
+        };
+        _this.getVariant = function () {
+            return _this._options.variant;
+        };
+        _this.setColor = function (color) {
+            // this._color = color;
+            _this._options.color = color;
+            _this.forceUpdate();
+            return _this;
+        };
+        _this.getColor = function () {
+            return _this._options.color;
+        };
+        _this.setDisabled = function (disabled) {
+            _this._options.disabled = disabled;
+            _this.forceUpdate();
+            return _this;
+        };
+        /**
+         * @deprecated
+         * @see use isDisabled */
+        _this.getDisabled = function () {
+            return _this._options.disabled;
+        };
+        _this.isDisabled = function () {
+            return _this._options.disabled;
+        };
+        _this.setInProcess = function (inProcess) {
+            _this._inProcess = inProcess;
+            _this._options.disabled = inProcess;
+            _this.forceUpdate();
+            return _this;
+        };
+        _this.isInProcess = function () {
+            var _a;
+            if (((_a = _this.props.dialogBaseComponent) === null || _a === void 0 ? void 0 : _a.parent.accessFrom) === "internal") {
+                return _this._inProcess;
+            }
+            return _this._inProcess;
+        };
+        _this.remove = function () {
+            _this._buttonRef.current.remove();
+        };
+        _this.click = function () {
+            // @ts-ignore
+            _this._rippleButtonRef.current.rippleEffect(_this._buttonRef, 19, 8);
+            _this._buttonRef.current.click();
+        };
+        _this.onClickHandler = function () {
+            return _this._onClick;
+        };
+        _this.render = function () {
+            console.log('this._options.style.render', _this._options);
+            return React.createElement(RippleButton_1.default, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
+                    if (_this._options.disabled || _this.isInProcess())
+                        return;
+                    // @ts-ignore
+                    _this._onClick(_this, _this._dialogBaseComponent);
+                }, style: _this._options.style, baseStyle: _this.props.baseStyle, fontFamily: _this.props.fontFamily }, function (buttonRef) {
+                if (buttonRef) {
+                    if (!_this.isInProcess()) {
+                        buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
+                    }
+                }
+                return React.createElement(React.Fragment, null,
+                    React.createElement(CircularProgress_1.default, { size: 15, inProcess: { inProcess: _this.isInProcess() } }),
+                    !_this.isInProcess() &&
+                        _this._options.label);
+            });
+        };
+        _this._options = props.options;
+        // this._label = props.label;
+        _this._onClick = props.onClick;
+        // Register Click Handler by init
+        _this._initialClickHandler = props.onClick;
+        _this._dialogBaseComponent = props.dialogBaseComponent;
+        _this._inProcess = props.inProcess;
+        _this.state = {
+            coords: { x: -1, y: -1 },
+            isRippling: false
+        };
+        _this._buttonRef = React.createRef();
+        _this._rippleButtonRef = React.createRef();
+        _this._initialClickHandler = null;
+        _this._name = props.name;
+        _this._stateListener = props.stateListener;
+        return _this;
+    }
+    Object.defineProperty(DialogActionBase.prototype, "dialogBaseComponent", {
+        get: function () {
+            return this._dialogBaseComponent;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogActionBase.prototype, "name", {
+        get: function () {
+            return this._name;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DialogActionBase.prototype.componentDidMount = function () {
+        if (undefined !== this.props.onLoad && typeof this.props.onLoad === "function") {
+            this.props.onLoad(this);
+        }
+    };
+    Object.defineProperty(DialogActionBase.prototype, "baseDialogAction", {
+        get: function () {
+            return this._baseDialogAction;
+            // return this;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DialogActionBase.prototype.setOptions = function (options) {
+        console.log(23);
+        console.log('setOptions-XAA', JSON.stringify(options));
+        this._options = __assign(__assign({}, this._options), options);
+        this.forceUpdate();
+        return this;
+    };
+    Object.defineProperty(DialogActionBase.prototype, "options", {
+        get: function () {
+            return this._options;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DialogActionBase.prototype.getLabel = function () {
+        return this._options.label;
+    };
+    DialogActionBase.prototype.onClick = function (callback) {
+        // @ts-ignore
+        this._onClick = callback; // callback( this, this._dialogBaseComponent );
+        return this;
+    };
+    return DialogActionBase;
+}(react_1.Component));
+exports.default = DialogActionBase;