@arquimedes.co/eureka-forms 2.0.27 → 2.0.28

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -48,13 +48,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useState } from 'react';
 import styles from './ColumnForm.module.css';
-import Loader from '../../../Shared/Loader/Loader';
 import React from 'react';
 import Terms from '../../Terms/Terms';
 import { useFormContext } from 'react-hook-form';
 import { useAppSelector } from '../../../hooks';
 import Section from '../../Section/Section';
 import CustomContext from '../../../Contexts/CustomContext';
+import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
 function ColumnForm(_a) {
     var _this = this;
     var onSubmit = _a.onSubmit, customSubmitBtns = _a.customSubmitBtns;
@@ -90,13 +90,6 @@ function ColumnForm(_a) {
             }
         });
     }); }, []);
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), previous.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), next.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [!customSubmitBtns && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: submit, style: {
-                                background: formStyle.primaryColor,
-                                color: formStyle.primaryContrastColor,
-                            }, disabled: loading }, { children: [_jsx("div", __assign({ style: {
-                                        visibility: loading
-                                            ? 'hidden'
-                                            : 'visible',
-                                    } }, { children: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar' })), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] })) }))), customSubmitBtns === null || customSubmitBtns === void 0 ? void 0 : customSubmitBtns(submit, loading)] }))] })));
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), previous.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), next.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [!customSubmitBtns && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsx(CustomBtn, { onClick: submit, width: "calc(100% - 70px)", label: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) }))), customSubmitBtns === null || customSubmitBtns === void 0 ? void 0 : customSubmitBtns(submit, loading)] }))] })));
 }
 export default ColumnForm;

package/dist/Form/FormTypes/ColumnForm/ColumnForm.module.css

@@ -17,31 +17,3 @@
     width: 200px;
     max-width: calc(100% - 40px);
 }
-
-.submitBtn {
-    border-radius: 20px;
-    padding: 15px 10px;
-    width: calc(100% - 30px);
-    margin: 0 auto 0 auto;
-    font-size: 1.4rem;
-    cursor: pointer;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border: none;
-    position: relative;
-}
-.submitBtn[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-}
-
-.loaderContainer {
-    top: 0px;
-    bottom: 0px;
-    right: 0px;
-    left: 0px;
-    position: absolute;
-}

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -48,7 +48,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useState } from 'react';
 import styles from './StepperForm.module.css';
-import Loader from '../../../Shared/Loader/Loader';
 import Terms from '../../Terms/Terms';
 import { useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
@@ -57,6 +56,7 @@ import CustomContext from '../../../Contexts/CustomContext';
 import * as SiteReducer from '../../../States/SiteSlice';
 import { getAppState } from '../../../Utils/store';
 import { IdFormContext } from '../../../App/App';
+import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
 function StepperForm(_a) {
     var _this = this;
     var onSubmit = _a.onSubmit, scrollToTop = _a.scrollToTop;
@@ -112,18 +112,8 @@ function StepperForm(_a) {
     }); }, [next]);
     if (!idCurrent)
         return _jsx(_Fragment, {});
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), _jsx(Section, { idSection: idCurrent }, idCurrent), next.length === 0 && _jsx(Terms, {}), _jsxs("div", __assign({ className: styles.btnsContainer }, { children: [previous.length > 0 && (_jsxs("button", __assign({ "data-testid": "form__back", className: styles.formBtn, onClick: handlePrevious, style: {
-                            background: formStyle.primaryColor,
-                            color: formStyle.primaryContrastColor,
-                        }, disabled: !!loading }, { children: [_jsx("div", __assign({ style: {
-                                    visibility: loading === 'BACK' ? 'hidden' : 'visible',
-                                } }, { children: "Volver" })), loading === 'BACK' && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] }))), (next.length > 0 || (!postview && editable)) && (_jsxs("button", __assign({ "data-testid": "form__submit", className: styles.formBtn, onClick: handleNext, style: {
-                            background: formStyle.primaryColor,
-                            color: formStyle.primaryContrastColor,
-                        }, disabled: !!loading }, { children: [_jsx("div", __assign({ style: {
-                                    visibility: loading === 'NEXT' ? 'hidden' : 'visible',
-                                } }, { children: next.length > 0
-                                    ? 'Siguiente'
-                                    : sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar' })), loading === 'NEXT' && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] })))] }))] })));
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), _jsx(Section, { idSection: idCurrent }, idCurrent), next.length === 0 && _jsx(Terms, {}), _jsxs("div", __assign({ className: styles.btnsContainer }, { children: [previous.length > 0 && (_jsx(CustomBtn, { label: "Volver", "data-testid": "form__back", onClick: handlePrevious, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'BACK' })), (next.length > 0 || (!postview && editable)) && (_jsx(CustomBtn, { label: next.length > 0
+                            ? 'Siguiente'
+                            : sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar', "data-testid": "form__submit", onClick: handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'NEXT' }))] }))] })));
 }
 export default StepperForm;

package/dist/Form/FormTypes/StepperForm/StepperForm.module.css

@@ -24,30 +24,3 @@
     justify-content: center;
     gap: 10px 20px;
 }
-
-.formBtn {
-    max-width: 100%;
-    border-radius: 20px;
-    padding: 15px 20px;
-    font-size: 1.4rem;
-    cursor: pointer;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border: none;
-    position: relative;
-}
-.formBtn[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-}
-
-.loaderContainer {
-    top: 0px;
-    bottom: 0px;
-    right: 0px;
-    left: 0px;
-    position: absolute;
-}

package/dist/Shared/CustomBtn/CustomBtn.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface CustomBtnProps {
+    label: string;
+    'data-testid'?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    backgroundColor?: string;
+    color?: string;
+    width?: string;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare function CustomBtn({ label, onClick, backgroundColor, color, loading, disabled, width, ...others }: CustomBtnProps): JSX.Element;
+export default CustomBtn;

package/dist/Shared/CustomBtn/CustomBtn.js

@@ -0,0 +1,102 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styles from './CustomBtn.module.css';
+import Loader from '../Loader/Loader';
+function CustomBtn(_a) {
+    var _this = this;
+    var label = _a.label, onClick = _a.onClick, backgroundColor = _a.backgroundColor, color = _a.color, _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.width, width = _d === void 0 ? 'fit-content' : _d, others = __rest(_a, ["label", "onClick", "backgroundColor", "color", "loading", "disabled", "width"]);
+    var _e = useState(undefined), coords = _e[0], setCoords = _e[1];
+    useEffect(function () {
+        if (coords)
+            setCoords(undefined);
+    }, [label]);
+    return (_jsxs("button", __assign({ className: styles.customBtn, style: {
+            width: width,
+            background: backgroundColor,
+            color: color,
+        }, "data-testid": others['data-testid'], disabled: disabled || loading, onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var rect;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        rect = e.target.getBoundingClientRect();
+                        setCoords({
+                            x: e.clientX - rect.left,
+                            y: e.clientY - rect.top,
+                        });
+                        setTimeout(function () { return setCoords(undefined); }, 600);
+                        return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 200); })];
+                    case 1:
+                        _a.sent();
+                        onClick && onClick(e);
+                        return [2 /*return*/];
+                }
+            });
+        }); } }, { children: [coords ? (_jsx("span", { className: styles.ripple, style: {
+                    backgroundColor: color,
+                    left: coords.x,
+                    top: coords.y,
+                } })) : (_jsx(_Fragment, {})), _jsx("div", __assign({ style: {
+                    visibility: loading ? 'hidden' : 'visible',
+                    margin: '0px 10px',
+                } }, { children: label })), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: color, position: "unset" }) })))] })));
+}
+export default CustomBtn;

package/dist/Shared/CustomBtn/CustomBtn.module.css

@@ -0,0 +1,57 @@
+.customBtn {
+    max-width: 100%;
+    border-radius: 20px;
+    padding: 15px 30px;
+    font-size: 1.4rem;
+    cursor: pointer;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: none;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.customBtn[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.ripple {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    display: block;
+    content: '';
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 1s ease 1 forwards ripple-effect;
+}
+
+@keyframes ripple-effect {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(10);
+        opacity: 0.375;
+    }
+    100% {
+        transform: scale(35);
+        opacity: 0;
+    }
+}
+
+.loaderContainer {
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    left: 0px;
+    position: absolute;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "2.0.27",
+    "version": "2.0.28",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",