react-dialogger 1.1.56 → 1.1.59

package/components/Actions.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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Actions = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,13 +18,13 @@ var Actions = function (_a) {
     var actions = _a.actions, dialog = _a.dialog;
     var dialogOptions = dialog.dialogOptions;
     return (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: actions.map(function (action, index) {
-            console.log('Actions_action', action, action.getIntent());
+            console.log('Actions_action', __assign(__assign({}, action.options), action.getIntent()));
             var referencedAction = dialog.initializeActionRef(action.name);
-            return (0, jsx_runtime_1.jsx)(_components_1.DialogActionBase, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, options: action.options, 
+            return (0, jsx_runtime_1.jsx)(_components_1.DialogActionBase, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, 
                 //onClick={ action.onClickHandler() }
                 onClick: action._onCLick, 
                 // inProcess={action.isInProcess()}
-                style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener, intent: action.getIntent() }, index.toString());
+                style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener, options: action.options, intent: action.getIntent() }, index.toString());
         }) });
 };
 exports.Actions = Actions;

package/components/DialogActionBase.d.ts

@@ -21,9 +21,9 @@ declare class DialogActionBase extends Component<ActionProps, ActionState> {
     getInitialClickHandler: () => DialogActionType;
     updateOptions(options: DialogActionOptionsType): this;
     /**
-     * use updateOptions
-     * @deprecated
-     * @link updateOptions */
+     * @deprecated Use `updateOptions` instead.
+     * For more info, see: updateOptions
+     */
     setOptions(options: DialogActionOptionsType): this;
     get options(): DialogActionOptionsType;
     updateLabel: (label: string) => DialogActionBase;
@@ -56,7 +56,6 @@ declare class DialogActionBase extends Component<ActionProps, ActionState> {
     isInProcess: () => boolean;
     remove: () => void;
     click: () => void;
-    onClickHandler: () => DialogActionType;
     render: () => import("react/jsx-runtime").JSX.Element;
 }
 export default DialogActionBase;

package/components/DialogActionBase.js

@@ -67,6 +67,7 @@ var DialogActionBase = /** @class */ (function (_super) {
     __extends(DialogActionBase, _super);
     function DialogActionBase(props) {
         if (props === void 0) { props = {}; }
+        var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
         _this._options = {
             label: 'Button label',
@@ -80,65 +81,74 @@ var DialogActionBase = /** @class */ (function (_super) {
             return _this._initialClickHandler;
         };
         _this.updateLabel = function (label) {
-            _this._options.label = label;
-            _this.forceUpdate();
+            // this._options.label = label;
+            // this.forceUpdate();
+            _this.setState(function (prevStae) { return (__assign(__assign({}, prevStae), { options: __assign(__assign({}, prevStae.options), { label: label }) })); });
             return _this;
         };
         /**
          * @deprecated use Options*/
         _this.updateVariant = function (variant) {
-            _this._options.variant = variant;
-            _this.forceUpdate();
+            // this._options.variant = variant;
+            // this.forceUpdate();
+            _this.setState(function (prevStae) { return (__assign(__assign({}, prevStae), { options: __assign(__assign({}, prevStae.options), { variant: variant }) })); });
             return _this;
         };
         /**
          * @deprecated use Options*/
         _this.getVariant = function () {
-            return _this._options.variant;
+            // return this._options.variant;
+            return _this.state.options.variant;
         };
         /**
          * @deprecated use Options*/
         _this.updateColor = function (color) {
             // this._color = color;
-            _this._options.color = color;
-            _this.forceUpdate();
+            // this._options.color = color;
+            // this.forceUpdate();
+            _this.setState(function (prevState) { return (__assign(__assign({}, prevState), { options: __assign(__assign({}, prevState.options), { color: color }) })); });
             return _this;
         };
         /**
          * @deprecated use Options*/
         _this.getColor = function () {
-            return _this._options.color;
+            // return this._options.color;
+            return _this.state.options.color;
         };
         /**
          * @deprecated use Options*/
         _this.setDisabled = function (disabled) {
-            _this._options.disabled = disabled;
-            _this.forceUpdate();
+            // this._options.disabled = disabled;
+            // this.forceUpdate();
+            _this.setState(function (prevStae) { return (__assign(__assign({}, prevStae), { options: __assign(__assign({}, prevStae.options), { disabled: disabled }) })); });
             return _this;
         };
         /**
          * @deprecated
          * @see use isDisabled */
         _this.getDisabled = function () {
-            return _this._options.disabled;
+            // return this._options.disabled;
+            return _this.state.options.disabled;
         };
         /**
          * @deprecated use Options*/
         _this.isDisabled = function () {
-            return _this._options.disabled;
+            return _this.state.options.disabled;
         };
         _this.updateIntent = function (intent) {
             _this.setState(function (prevState) { return (__assign(__assign({}, _this.state), { intent: intent })); });
             return _this;
         };
         _this.setInProcess = function (inProcess) {
-            _this._inProcess = inProcess;
-            _this._options.disabled = inProcess;
-            _this.forceUpdate();
+            // this._inProcess = inProcess;
+            // this._options.disabled = inProcess;
+            // this.forceUpdate();
+            _this.setState(function (prevState) { return (__assign(__assign({}, prevState), { options: __assign(__assign({}, prevState.options), { disabled: inProcess }), inProcess: inProcess })); });
             return _this;
         };
         _this.isInProcess = function () {
-            return _this._inProcess;
+            // return this._inProcess;
+            return _this.state.inProcess;
         };
         _this.remove = function () {
             _this._buttonRef.current.remove();
@@ -148,25 +158,25 @@ var DialogActionBase = /** @class */ (function (_super) {
             _this._rippleButtonRef.current.rippleEffect(_this._buttonRef, 19, 8);
             _this._buttonRef.current.click();
         };
-        _this.onClickHandler = function () {
-            return _this._onClick;
-        };
+        // public onClickHandler = () => {
+        //     return this._onClick;
+        // }
         _this.render = function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            console.log('Dialog_Action_Base_render', _this._options, _this._intent);
-            // Set as default converted from action name prop
-            var converted = (_b = (_a = _this.props.name) === null || _a === void 0 ? void 0 : _a.replace(/action/i, '')) !== null && _b !== void 0 ? _b : _this.props.name;
-            _this._options.label = (_g = ((_f = (_e = (_d = (_c = _this.props.dialogBaseComponent) === null || _c === void 0 ? void 0 : _c.dialogOptions) === null || _d === void 0 ? void 0 : _d.localText) === null || _e === void 0 ? void 0 : _e[converted]) !== null && _f !== void 0 ? _f : converted)) !== null && _g !== void 0 ? _g : 'Button';
+            console.log('Dialog_Action_Base_render', _this.state.options, _this._intent);
+            // // Set as default converted from action name prop
+            // const converted = this.props.name?.replace(/action/i, '') ?? this.props.name;
+            // this._options.label = (this.props.dialogBaseComponent?.dialogOptions?.localText?.[converted] ?? converted) ?? 'Button';
             return (0, jsx_runtime_1.jsx)(_components_1.RippleButton, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, 
                 // Intent Based
-                variant: (_k = (_j = (_h = _this.state) === null || _h === void 0 ? void 0 : _h.intent) === null || _j === void 0 ? void 0 : _j.variant) !== null && _k !== void 0 ? _k : _this._options.variant, 
+                variant: _this.state.options.variant, 
                 // Intent Based
-                color: (_o = (_m = (_l = _this.state) === null || _l === void 0 ? void 0 : _l.intent) === null || _m === void 0 ? void 0 : _m.color) !== null && _o !== void 0 ? _o : _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
-                    if (_this._options.disabled || _this.isInProcess())
+                color: _this.state.options.color, disabled: _this.state.options.disabled, onClick: function (e) {
+                    // if(this.state.options.disabled || this.isInProcess() ) return;
+                    if (_this.state.options.disabled || _this.state.inProcess)
                         return;
                     // @ts-ignore
                     _this._onClick(_this, _this._dialogBaseComponent);
-                }, style: _this._options.style, baseStyle: _this.props.baseStyle, fontFamily: _this.props.fontFamily, children: function (buttonRef) {
+                }, style: _this.state.options.style, baseStyle: _this.props.baseStyle, fontFamily: _this.props.fontFamily, children: function (buttonRef) {
                     if (buttonRef) {
                         if (!_this.isInProcess()) {
                             buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
@@ -181,7 +191,7 @@ var DialogActionBase = /** @class */ (function (_super) {
                      * Daha temiz, daha kısa
                      */
                     return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(_components_1.CircularProgress, { size: 15, inProcess: { inProcess: _this.isInProcess() } }), !_this.isInProcess() &&
-                                _this.options.label] });
+                                _this.state.options.label] });
                 } });
         };
         _this._options = props.options;
@@ -191,10 +201,14 @@ var DialogActionBase = /** @class */ (function (_super) {
         _this._initialClickHandler = props.onClick;
         _this._dialogBaseComponent = props.dialogBaseComponent;
         _this._inProcess = props.inProcess;
+        var converted = (_b = (_a = props.name) === null || _a === void 0 ? void 0 : _a.replace(/action/i, '')) !== null && _b !== void 0 ? _b : props.name;
+        var label = (_g = ((_f = (_e = (_d = (_c = _this.props.dialogBaseComponent) === null || _c === void 0 ? void 0 : _c.dialogOptions) === null || _d === void 0 ? void 0 : _d.localText) === null || _e === void 0 ? void 0 : _e[converted]) !== null && _f !== void 0 ? _f : converted)) !== null && _g !== void 0 ? _g : 'Button';
         _this.state = {
             coords: { x: -1, y: -1 },
             isRippling: false,
-            intent: props.intent
+            // intent: props.intent,
+            options: __assign(__assign(__assign({}, props.options), props.intent), { label: label }),
+            inProcess: false
         };
         _this._buttonRef = React.createRef();
         _this._rippleButtonRef = React.createRef();
@@ -231,27 +245,30 @@ var DialogActionBase = /** @class */ (function (_super) {
         configurable: true
     });
     DialogActionBase.prototype.updateOptions = function (options) {
-        this._options = __assign(__assign({}, this._options), options);
-        this.forceUpdate();
+        this.setState(function (prevState) { return (__assign(__assign({}, prevState), { options: options })); });
+        // this._options = {...this._options, ...options};
+        // this.forceUpdate();
         return this;
     };
     /**
-     * use updateOptions
-     * @deprecated
-     * @link updateOptions */
+     * @deprecated Use `updateOptions` instead.
+     * For more info, see: updateOptions
+     */
     DialogActionBase.prototype.setOptions = function (options) {
         this.updateOptions(options);
         return this;
     };
     Object.defineProperty(DialogActionBase.prototype, "options", {
         get: function () {
-            return this._options;
+            // return this._options;
+            return this.state.options;
         },
         enumerable: false,
         configurable: true
     });
     DialogActionBase.prototype.getLabel = function () {
-        return this._options.label;
+        // return this._options.label;
+        return this.state.options.label;
     };
     DialogActionBase.prototype.onClick = function (callback) {
         // @ts-ignore

package/components/DialogBase.d.ts

@@ -20,7 +20,7 @@ declare class DialogBase<Values extends FormikProps<Values>> extends Component<B
     protected _actions: DialogAction[];
     protected _dialogSize: IDialogSize;
     protected _holder?: TInitialHolder;
-    protected _formikProps: DialogFormikAdapter<any>;
+    protected _formikProps: FormikProps<any>;
     protected readonly _backdropRef: RefObject<any>;
     protected readonly _dialogRef: RefObject<any>;
     protected readonly _dialogBodyRef: RefObject<any>;
@@ -52,8 +52,8 @@ declare class DialogBase<Values extends FormikProps<Values>> extends Component<B
     initializeActionRef: (key: string) => RefObject<DialogActionBase>;
     get dialogOptions(): DialogOptionsType;
     get holder(): DialogOptionsType;
-    get formikProps(): DialogFormikAdapter<any>;
-    set formikProps(value: DialogFormikAdapter<any>);
+    get formikProps(): FormikProps<any>;
+    set formikProps(value: FormikProps<any>);
     get formikValidate(): Promise<DialogFormikAdapter<any>>;
     set inlineFormikProps(inlineFormikProps: IFormikAdapter);
     get values(): IFormikAdapter['values'];

package/components/DialogContent.js

@@ -73,6 +73,7 @@ var jumper_animate_1 = require("../utils/effects/jumper-animate");
 var _context_1 = require("../context/index.js");
 var DialogContent = function (props) {
     var _a, _b, _c, _d, _e;
+    var firstUpdate = React.useRef(true);
     var _f = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _f.dialog, dialogRef = _f.dialogRef, prevDialogRect = _f.prevDialogRect, backdropRef = _f.backdropRef, snackbarRef = _f.snackbarRef, footerRef = _f.footerRef, resizeableObject = _f.resizeableObject, body = _f.body;
     var dialogOptions = dialog.dialogOptions;
     var baseOptions = dialogOptions.base;
@@ -92,19 +93,25 @@ var DialogContent = function (props) {
     };
     // Effect Listener
     (0, react_1.useEffect)(function () {
-        var _a;
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+            return; // ilk render'ı atla
+        }
         // State Listener Dialog
         if (typeof dialog.props.stateListener === "function") {
             dialog.props.stateListener(dialog.values, dialog);
         }
+        // console.log('DialogContent_actions_refs', dialog._actionRefs);
         // 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);
+            // const action =  dialog._actionRefs[actionKey];
+            var actionRef = dialog.initializeActionRef(actionKey);
+            if (typeof actionRef.current._stateListener === "function") {
+                console.log('DialogContent_actions_ref', actionRef.current._stateListener);
+                actionRef.current._stateListener(dialog.values, actionRef === null || actionRef === void 0 ? void 0 : actionRef.current, dialog);
             }
         }
-    }, [dialog === null || dialog === void 0 ? void 0 : dialog.values]);
+    }, [dialog.values, dialog._actionRefs]);
     // Listener & Animate
     (0, react_1.useEffect)(function () {
         // setDialogRect();

package/components/RippleButton.js

@@ -47,6 +47,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 var react_1 = require("react");
+var _helpers_1 = require("../helpers/index.js");
+var hexToRgb_1 = require("../helpers/hexToRgb");
 exports.default = React.forwardRef(function (_a, ref) {
     var variant = _a.variant, color = _a.color, children = _a.children, disabled = _a.disabled, onClick = _a.onClick, style = _a.style, baseStyle = _a.baseStyle, innerRef = _a.innerRef, fontFamily = _a.fontFamily;
     var _b = React.useState({ x: -1, y: -1 }), coords = _b[0], setCoords = _b[1];
@@ -76,7 +78,18 @@ exports.default = React.forwardRef(function (_a, ref) {
     (0, react_1.useImperativeHandle)(innerRef, function () { return ({
         rippleEffect: rippleEffect
     }); });
-    console.log('Ripple_button_style', style);
+    var namedColors = ["primary", "success", "error", "warning", "info", "secondary", "default"];
+    var isNamedColor = namedColors.includes(color);
+    var localColor = null;
+    if (!isNamedColor) {
+        // Like Yellow
+        localColor = color;
+        if (!(0, hexToRgb_1.isHexColor)(localColor)) {
+            localColor = (0, hexToRgb_1.colorNameToHex)(localColor);
+        }
+        localColor = (0, _helpers_1.hexToRgb)(localColor, disabled ? .5 : 1);
+    }
+    console.log('Ripple_button_style', localColor);
     return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, disabled: disabled, className: "ripple-button ripple-button-".concat(variant, " ripple-button-").concat(color, " ").concat(disabled ? 'ripple-button-disabled' : ''), onClick: function (e) {
             //@ts-ignore
             var rect = e.target.getBoundingClientRect();
@@ -84,5 +97,5 @@ exports.default = React.forwardRef(function (_a, ref) {
             setTimeout(function () {
                 onClick && onClick(e);
             }, 200);
-        }, style: __assign(__assign(__assign({}, baseStyle), style), { fontFamily: fontFamily }), children: [isRippling && (0, jsx_runtime_1.jsx)("span", { className: "ripple", style: { left: coords.x, top: coords.y } }), (0, jsx_runtime_1.jsx)("span", { className: "content", children: children(ref.current) })] }));
+        }, style: __assign(__assign(__assign(__assign(__assign({}, baseStyle), style), { fontFamily: fontFamily }), localColor ? { backgroundColor: localColor } : null), variant === 'text' ? { border: "none" } : null), children: [isRippling && (0, jsx_runtime_1.jsx)("span", { className: "ripple", style: { left: coords.x, top: coords.y } }), (0, jsx_runtime_1.jsx)("span", { className: "content", children: children(ref.current) })] }));
 });

package/helpers/hexToRgb.d.ts

@@ -1,2 +1,5 @@
 declare const hexToRgb: (hex: string, opacity: number) => string;
-export { hexToRgb };
+export type HexColor = `#${string}`;
+declare function isHexColor(color: string): color is HexColor;
+declare function colorNameToHex(colorName: string): string | null;
+export { hexToRgb, colorNameToHex, isHexColor };

package/helpers/hexToRgb.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hexToRgb = void 0;
+exports.colorNameToHex = colorNameToHex;
+exports.isHexColor = isHexColor;
 var hexToRgb = function (hex, opacity) {
     try {
         var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -17,3 +19,13 @@ var hexToRgb = function (hex, opacity) {
     return '';
 };
 exports.hexToRgb = hexToRgb;
+function isHexColor(color) {
+    return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color);
+}
+function colorNameToHex(colorName) {
+    var ctx = document.createElement("canvas").getContext("2d");
+    if (!ctx)
+        return null;
+    ctx.fillStyle = colorName;
+    return ctx.fillStyle; // canvas, renk ismini hex'e çevirir
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.56",
+  "version": "1.1.59",
   "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/styles/dialog.action.css

@@ -10,6 +10,7 @@
   width: auto;
   transition: width 1s;
   display: inline-block;
+  border: none;
 }
 .ripple-button .ripple {
   width: 20px;
@@ -50,14 +51,14 @@
 }
 
 .ripple-button-outlined {
-  border-width: 1px;
+  border-width: 1px !important;
   border-style: solid;
   box-shadow: 0 0 2px #a8a8a8;
   background: none !important;
 }
 
 .ripple-button-text {
-  border: none;
+  border: none !important;
   background: none !important;
 }
 

package/types/DialogActionTypes.d.ts

@@ -5,9 +5,7 @@ import { DialogAction, ACTION_INTENTS } from "../models/index.js";
 import { CSSProperties } from "react";
 export type ActionDialogDef = Omit<IDialogApiDef, 'switchFullScreen'>;
 export type ActionDef = Pick<DialogAction, 'onClick' | 'setOptions' | 'name'>;
-export type ActionBaseDef = Pick<DialogActionBase, 'updateOptions' | 
-/**@deprecated use updateOptions*/
-'setOptions' | 'setInProcess' | 'getLabel' | 'options' | 'click' | 'remove' | 'name'>;
+export type ActionBaseDef = Pick<InstanceType<typeof DialogActionBase>, 'updateOptions' | 'updateColor' | 'updateVariant' | 'updateLabel' | 'updateIntent' | 'setOptions' | 'setInProcess' | 'getLabel' | 'options' | 'click' | 'remove' | 'name'>;
 export interface IDialogActionDef extends ActionBaseDef {
 }
 export type DialogActionType = (button: ActionBaseDef, dialog: Omit<IDialogApiDef, 'switchFullScreen'>) => void;
@@ -50,10 +48,11 @@ export interface ActionProps {
 export interface ActionState {
     isRippling: boolean;
     coords: ICoords;
-    intent: ActionIntent;
+    options?: DialogActionOptionsType;
+    inProcess?: ActionProps['inProcess'];
 }
 export type TBVariant = "contained" | "outlined" | "text";
-export type TBColor = "primary" | "success" | "error" | "warning" | "info" | "secondary" | "default";
+export type TBColor = "primary" | "success" | "error" | "warning" | "info" | "secondary" | "default" | CSSProperties['color'];
 export type DialogActionOptionsType = {
     label?: string;
     variant?: TBVariant;
@@ -63,7 +62,7 @@ export type DialogActionOptionsType = {
     style?: React.CSSProperties;
     baseStyle?: React.CSSProperties;
 };
-type TListenerButtonType = Pick<DialogActionBase, Exclude<keyof ActionDef, 'onClick' | 'getStateListener' | 'name' | 'setOptions'>>;
+type TListenerButtonType = Pick<DialogActionBase, Exclude<keyof ActionBaseDef, 'onClick' | 'getStateListener' | 'name'>>;
 export type TDialogStateListenerForActionCallbackType = (values: TValues, button: TListenerButtonType, dialog: IListenerDialogDef) => void;
 export interface IContentFooterProps {
 }

package/types/DialogTypes.d.ts

@@ -18,7 +18,7 @@ export interface BaseDialogState {
     prevDialogRect: WithBackdrop['prevDialogRect'];
     body: TDialogCallbackFn;
 }
-export interface DialogFormikAdapter<Values> {
+export interface DialogFormikAdapter<Values> extends Omit<FormikProps<any>, 'values' | 'setValues' | 'setFieldValue' | 'validateForm' | 'errors'> {
     values: Values;
     setValues(values: Values): void;
     setFieldValue(field: keyof Values | string, value: any): void;