react-dialogger 1.1.65 → 1.1.67

package/components/DialogActionBase.js

@@ -96,45 +96,34 @@ var DialogActionBase = /** @class */ (function (_super) {
             return _this._initialClickHandler;
         };
         _this.updateLabel = function (label) {
-            // 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.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.state.options.variant;
         };
         /**
          * @deprecated use Options*/
         _this.updateColor = function (color) {
-            // this._color = color;
-            // 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.state.options.color;
         };
         /**
          * @deprecated use Options*/
         _this.setDisabled = function (disabled) {
-            // this._options.disabled = disabled;
-            // this.forceUpdate();
             _this.setState(function (prevStae) { return (__assign(__assign({}, prevStae), { options: __assign(__assign({}, prevStae.options), { disabled: disabled }) })); });
             return _this;
         };
@@ -155,9 +144,6 @@ var DialogActionBase = /** @class */ (function (_super) {
             return _this;
         };
         _this.setInProcess = function (inProcess) {
-            // 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;
         };
@@ -173,20 +159,12 @@ var DialogActionBase = /** @class */ (function (_super) {
             _this._rippleButtonRef.current.rippleEffect(_this._buttonRef, 19, 8);
             _this._buttonRef.current.click();
         };
-        // public onClickHandler = () => {
-        //     return this._onClick;
-        // }
         _this.render = function () {
-            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: _this.state.options.variant, 
                 // Intent Based
                 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
@@ -256,15 +234,12 @@ var DialogActionBase = /** @class */ (function (_super) {
     Object.defineProperty(DialogActionBase.prototype, "baseDialogAction", {
         get: function () {
             return this._baseDialogAction;
-            // return this;
         },
         enumerable: false,
         configurable: true
     });
     DialogActionBase.prototype.updateOptions = function (options) {
         this.setState(function (prevState) { return (__assign(__assign({}, prevState), { options: __assign(__assign({}, prevState.options), options) })); });
-        // this._options = {...this._options, ...options};
-        // this.forceUpdate();
         return this;
     };
     /**
@@ -277,7 +252,6 @@ var DialogActionBase = /** @class */ (function (_super) {
     };
     Object.defineProperty(DialogActionBase.prototype, "options", {
         get: function () {
-            // return this._options;
             return this.state.options;
         },
         enumerable: false,

package/components/DialogBase.d.ts

@@ -82,7 +82,6 @@ declare class DialogBase<Values extends FormikProps<Values>> extends Component<B
         }) => void;
         close: (key?: string) => void;
     };
-    private Body;
     render: () => import("react/jsx-runtime").JSX.Element;
 }
 export default DialogBase;

package/components/DialogBase.js

@@ -61,7 +61,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var formik_1 = require("formik");
 var React = __importStar(require("react"));
 var lodash_1 = require("lodash");
 var _components_1 = require("./index.js");
@@ -164,18 +163,6 @@ var DialogBase = /** @class */ (function (_super) {
         _this.getDom = function () {
             return _this.props.dom;
         };
-        _this.Body = function (_a) {
-            var body = _a.body;
-            var formikProps = (0, formik_1.useFormik)({
-                initialValues: {},
-                onSubmit: function (values, formikHelpers) { }
-            });
-            console.log('Body_formikProps', formikProps);
-            if (body instanceof Function) {
-                return (0, jsx_runtime_1.jsxs)("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' }, children: ["N", body(_this)] });
-            }
-            return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: body });
-        };
         _this.render = function () {
             console.log('this._prevDialogRect', _this.state.prevDialogRect);
             return (0, jsx_runtime_1.jsx)(_context_1.DialogContentContextProvider
@@ -358,6 +345,7 @@ var DialogBase = /** @class */ (function (_super) {
     };
     // ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
     DialogBase.prototype.componentDidMount = function () {
+        var _this = this;
         var _a, _b, _c;
         // First position take from Global
         var _d = this._dialogOptions.snackbar.anchorOrigin, vertical = _d.vertical, horizontal = _d.horizontal;
@@ -365,7 +353,9 @@ var DialogBase = /** @class */ (function (_super) {
         // Merge user defied positions with global positions!
         this._snackbarAnchor = __assign(__assign(__assign({}, initialAnchor), (((_a = this.props.snackbarAnchor) === null || _a === void 0 ? void 0 : _a.vertical) ? { vertical: this.props.snackbarAnchor.vertical } : {})), (((_b = this.props.snackbarAnchor) === null || _b === void 0 ? void 0 : _b.horizontal) ? { horizontal: this.props.snackbarAnchor.horizontal } : {}));
         if (typeof ((_c = this.props) === null || _c === void 0 ? void 0 : _c.didMountCallback) === "function") {
-            this.props.didMountCallback(this);
+            setTimeout(function () {
+                _this.props.didMountCallback(_this);
+            }, this.dialogOptions.animate === "jumper" ? 300 : 100);
         }
         // accessFrom Property of Parent object Internal->External
         this.accessFrom = "internal";

package/components/DialogContent.js

@@ -62,13 +62,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 _helpers_1 = require("../helpers/index.js");
 var React = __importStar(require("react"));
 var _icons_1 = require("../icons/index.js");
 var notistack_1 = require("notistack");
 var _1 = require("./");
 var react_1 = require("react");
-var _helpers_1 = require("../helpers/index.js");
 var jumper_animate_1 = require("../utils/effects/jumper-animate");
 var _context_1 = require("../context/index.js");
 var DialogContent = function (props) {
@@ -79,7 +78,7 @@ var DialogContent = function (props) {
     var baseOptions = dialogOptions.base;
     var _g = React.useState(false), fullscreenMode = _g[0], setFullscreenMode = _g[1];
     var _h = React.useState(null), rect = _h[0], setRect = _h[1];
-    var bounds = ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) ? (0, helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
+    var bounds = ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
     var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
     var positionSelector = function () {
         var _a;
@@ -130,13 +129,13 @@ var DialogContent = function (props) {
         setTimeout(function () {
             var _a, _b;
             if ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) {
-                if (!helpers_1.InitDialogMemoizeBoundsDeclared) {
+                if (!_helpers_1.InitDialogMemoizeBoundsDeclared) {
                     throw new Error('InitDialogMemoizeBounds is not defined. Please make sure to declare it only once, at the top‑level of your module—outside of App or its render logic.\n' +
                         'InitDialogMemoizeBounds()\n' +
                         'const App() => {...');
                 }
                 var _c = (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(), width = _c.width, height = _c.height, x = _c.x, y = _c.y;
-                (0, helpers_1.dialogRegister)(dialog.dialogOptions.base.id, {
+                (0, _helpers_1.dialogRegister)(dialog.dialogOptions.base.id, {
                     width: width,
                     height: height,
                     x: x,
@@ -155,7 +154,7 @@ var DialogContent = function (props) {
             event.preventDefault();
             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, {
+            (0, _helpers_1.setDialogBounds)(dialogOptions.base.id, {
                 width: width,
                 height: height,
                 x: x,

package/components/DialogContentBody.js

@@ -51,12 +51,8 @@ var Placeholder = function (_a) {
         }, children: placeholder });
 };
 var DialogContentBody = React.forwardRef(function (_a, ref) {
-    // const [localBody, setLocalBody] = React.useState(null);
     var body = _a.body;
     var dialog = (0, react_1.useContext)(_context_1.DialogContentContext).dialog;
-    // useEffect(() => {
-    //     setLocalBody(body(dialog));
-    // }, [body]);
     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)] });
     }

package/components/RippleButton.js

@@ -52,7 +52,6 @@ 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];
     var _c = React.useState(false), isRippling = _c[0], setIsRippling = _c[1];
-    // const buttonRef = React.useRef<HTMLButtonElement>(null)
     React.useEffect(function () {
         if (coords.x !== -1 && coords.y !== -1) {
             setIsRippling(true);
@@ -88,12 +87,11 @@ exports.default = React.forwardRef(function (_a, ref) {
             hexedColor = (0, Colorify_1.colorNameToHex)(hexedColor);
         }
         exclusive = (0, Colorify_1.getButtonColors)(hexedColor);
-        // textColor   = getLuminance(hexedColor);
-        // bgColor     = hexToRGB(hexedColor, disabled ? .5 : 1);
-        //
-        // exclusive.color             = textColor;
-        // exclusive.backgroundColor   = bgColor;
-        console.log('Button_exclusive', exclusive, hexedColor);
+        console.log('Button_variant', variant);
+        if (variant === 'text') {
+            exclusive.backgroundColor = 'inherit';
+            exclusive.color = color; // exclusive.backgroundColor;
+        }
     }
     else {
         exclusive = null;
@@ -105,5 +103,5 @@ exports.default = React.forwardRef(function (_a, ref) {
             setTimeout(function () {
                 onClick && onClick(e);
             }, 200);
-        }, style: __assign(__assign(__assign(__assign(__assign({}, baseStyle), style), { fontFamily: fontFamily }), exclusive), 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) })] }));
+        }, style: __assign(__assign(__assign(__assign(__assign({}, baseStyle), style), exclusive), { fontFamily: fontFamily }), 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/models/DialogAction.js

@@ -18,7 +18,6 @@ var ActionProgress = function () {
     return (0, jsx_runtime_1.jsx)(_components_1.CircularProgress, { size: 20, inProcess: { inProcess: true } });
 };
 exports.ActionProgress = ActionProgress;
-// class DialogAction extends DialogActionBase {
 var DialogAction = /** @class */ (function () {
     function DialogAction(name, options) {
         var _this = this;
@@ -49,7 +48,7 @@ var DialogAction = /** @class */ (function () {
         this._name = name;
         var defaultOptions = {
             label: null,
-            variant: 'contained',
+            variant: 'text',
             color: 'default',
             disabled: false,
             prevDisabled: false
@@ -65,7 +64,7 @@ var DialogAction = /** @class */ (function () {
         configurable: true
     });
     DialogAction.prototype.setIntent = function (intent) {
-        this._intent = intent; // ACTION_INTENTS[intent];
+        this._intent = intent;
         return this;
     };
     DialogAction.prototype.intent = function () {

package/package.json

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

@@ -21,6 +21,7 @@
   border-radius: 9999px;
   opacity: 0.5;
   animation: 0.9s ease 1 forwards ripple-effect;
+  background: rgba(255, 255, 255, 0.8);
 }
 .ripple-button .content {
   position: relative;