@arquimedes.co/eureka-forms 2.0.32-test → 2.0.34-test

package/dist/cjs/FormSteps/Step.js

@@ -0,0 +1,114 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormStepTypes_1 = __importDefault(require("../constants/FormStepTypes"));
+const SelectorStep_1 = __importDefault(require("./SelectorStep/SelectorStep"));
+const SeparatorStep_1 = __importDefault(require("./SeparatorStep/SeparatorStep"));
+const TextInputStep_1 = __importDefault(require("./TextInputStep/TextInputStep"));
+const TitleStep_1 = __importDefault(require("./TitleStep/TitleStep"));
+const ClassifierSelectorStep_1 = __importDefault(require("./ClassifierSelectorStep/ClassifierSelectorStep"));
+const TextAreaStep_1 = __importDefault(require("./TextAreaStep/TextAreaStep"));
+const DatePickerStep_1 = __importDefault(require("./DatePickerStep/DatePickerStep"));
+const FileUploadStep_1 = __importDefault(require("./FileUploadStep/FileUploadStep"));
+const MaterialCheckBoxStep_1 = __importDefault(require("./CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep"));
+const CBRStepMapper_1 = __importDefault(require("./CBRStepMapper"));
+const RatingStep_1 = __importDefault(require("./RatingStep/RatingStep"));
+const AYFStepMapper_1 = __importDefault(require("./AYFStepMapper"));
+const EntityValuePickerStep_1 = __importDefault(require("./EntityValueStep/EntityValuePickerStep"));
+const MapperStep_1 = __importDefault(require("./MapperStep/MapperStep"));
+const CollapsibleStep_1 = __importDefault(require("./CollapsibleStep/CollapsibleStep"));
+const ApiSelectorStep_1 = __importDefault(require("./ApiSelectorStep/ApiSelectorStep"));
+const CustomStep_1 = __importDefault(require("./CustomStep"));
+const hooks_1 = require("../hooks");
+const react_1 = require("react");
+const CustomContext_1 = __importDefault(require("../Contexts/CustomContext"));
+const StepHooks_1 = require("./StepHooks");
+function StepComponent(_a) {
+    var _b;
+    var { step } = _a, props = __rest(_a, ["step"]);
+    if (!step) {
+        console.error('Step not found!', step);
+        return (0, jsx_runtime_1.jsx)("div", {});
+    }
+    const { postview, partial } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const { customSteps } = (0, react_1.useContext)(CustomContext_1.default);
+    const originalValue = (0, hooks_1.useAppSelector)((state) => (0, StepHooks_1.selectOriginalValue)(state, step));
+    const customStep = customSteps[step.type];
+    const editable = props.editable ? (_b = step.editable) !== null && _b !== void 0 ? _b : true : false;
+    if ((postview || !editable) &&
+        (partial || step.partial) &&
+        originalValue === undefined) {
+        return (0, jsx_runtime_1.jsx)("div", {});
+    }
+    if (customStep) {
+        return ((0, jsx_runtime_1.jsx)(CustomStep_1.default, Object.assign({}, props, { step: step, editable: editable, customStep: customStep })));
+    }
+    switch (step.type) {
+        case FormStepTypes_1.default.TITLE: {
+            return ((0, jsx_runtime_1.jsx)(TitleStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.SELECTOR: {
+            return ((0, jsx_runtime_1.jsx)(SelectorStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.CHECKBOX: {
+            return ((0, jsx_runtime_1.jsx)(MaterialCheckBoxStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.CLASSIFIER_SELECTOR: {
+            return ((0, jsx_runtime_1.jsx)(ClassifierSelectorStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.TEXTAREA: {
+            return ((0, jsx_runtime_1.jsx)(TextAreaStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.TEXTINPUT: {
+            return ((0, jsx_runtime_1.jsx)(TextInputStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.DATEPICKER: {
+            return ((0, jsx_runtime_1.jsx)(DatePickerStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.SEPARATOR: {
+            return ((0, jsx_runtime_1.jsx)(SeparatorStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.FILEUPLOAD: {
+            return ((0, jsx_runtime_1.jsx)(FileUploadStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.RATING: {
+            return ((0, jsx_runtime_1.jsx)(RatingStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.COLLAPSIBLE: {
+            return ((0, jsx_runtime_1.jsx)(CollapsibleStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.ENTITYVALUEPICKER: {
+            return ((0, jsx_runtime_1.jsx)(EntityValuePickerStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.API_SELECTOR: {
+            return ((0, jsx_runtime_1.jsx)(ApiSelectorStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        case FormStepTypes_1.default.MAPPER: {
+            return ((0, jsx_runtime_1.jsx)(MapperStep_1.default, Object.assign({}, props, { step: step, editable: editable })));
+        }
+        default:
+            break;
+    }
+    if (step.type.startsWith('CBR')) {
+        return ((0, jsx_runtime_1.jsx)(CBRStepMapper_1.default, Object.assign({}, props, { step: step, editable: editable })));
+    }
+    else if (step.type.startsWith('AYF')) {
+        return ((0, jsx_runtime_1.jsx)(AYFStepMapper_1.default, Object.assign({}, props, { step: step, editable: editable })));
+    }
+    return (0, jsx_runtime_1.jsx)("div", {});
+}
+exports.default = StepComponent;

package/dist/cjs/FormSteps/StepFunctions.js

@@ -0,0 +1,257 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcSubSteps = exports.iterateNestedSteps = exports.calcDefaultValue = exports.calcStepWidth = exports.calcFillerSize = void 0;
+const FormStepTypes_1 = require("../constants/FormStepTypes");
+const CBRFormStepTypes_1 = __importDefault(require("../constants/CBRFormStepTypes"));
+const AYFFormStepTypes_1 = __importDefault(require("../constants/AYFFormStepTypes"));
+const DraftFunctions_1 = require("../Utils/DraftFunctions");
+function calcFillerSize(step, steps, values, size) {
+    var _a;
+    const maxSize = (_a = step.maxSize) !== null && _a !== void 0 ? _a : size.blockNum;
+    if (maxSize < size.blockNum) {
+        const tsize = recursivelyCheckOpenSize(step.id, steps, values);
+        const stepSize = maxSize - tsize;
+        return (size.blockSize * stepSize + size.spacingSize * (stepSize - 1) + 20);
+    }
+    else {
+        return 0;
+    }
+}
+exports.calcFillerSize = calcFillerSize;
+function recursivelyCheckOpenSize(idStep, steps, values) {
+    const step = steps[idStep];
+    const value = values[idStep];
+    switch (step.type) {
+        case FormStepTypes_1.StepTypes.SELECTOR: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options.find((option) => option.value === value.value);
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === FormStepTypes_1.OptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        const temp = recursivelyCheckOpenSize(pStepId, steps, values);
+                        optionSize += temp;
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case FormStepTypes_1.StepTypes.CLASSIFIER_SELECTOR: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options[value];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === FormStepTypes_1.ClassifierOptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case FormStepTypes_1.StepTypes.ENTITYVALUEPICKER: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options[value];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === FormStepTypes_1.EntityValueOptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case FormStepTypes_1.StepTypes.API_SELECTOR: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options[value];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === FormStepTypes_1.ApiSelectorOptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case FormStepTypes_1.StepTypes.CHECKBOX: {
+            let size = step.size;
+            const stepSteps = value ? step.steps : step.uncheckedSteps;
+            let optionSize = 0;
+            for (const pStepId of stepSteps !== null && stepSteps !== void 0 ? stepSteps : []) {
+                optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+            }
+            size += optionSize;
+            return size;
+        }
+        case FormStepTypes_1.StepTypes.DATEPICKER:
+        case FormStepTypes_1.StepTypes.TEXTINPUT: {
+            return step.size;
+        }
+        default:
+            return 4;
+    }
+}
+const calcStepWidth = (stepSize, size) => {
+    return size.blockSize * stepSize + size.spacingSize * (stepSize - 1);
+};
+exports.calcStepWidth = calcStepWidth;
+const calcDefaultValue = (step) => {
+    var _a, _b;
+    switch (step.type) {
+        case FormStepTypes_1.StepTypes.CHECKBOX:
+            return (_a = step.defaultValue) !== null && _a !== void 0 ? _a : false;
+        case FormStepTypes_1.StepTypes.TITLE:
+            return undefined;
+        case FormStepTypes_1.StepTypes.SELECTOR:
+            if (step.defaultValue)
+                return ((_b = step.options.find((option) => option.value === step.defaultValue)) !== null && _b !== void 0 ? _b : '');
+            return '';
+        case FormStepTypes_1.StepTypes.TEXTINPUT:
+        case FormStepTypes_1.StepTypes.CLASSIFIER_SELECTOR:
+            return '';
+        case FormStepTypes_1.StepTypes.TEXTAREA:
+            if (step.hasTextEditor)
+                return (0, DraftFunctions_1.getRawText)();
+            else
+                return '';
+        case FormStepTypes_1.StepTypes.RATING:
+        case FormStepTypes_1.StepTypes.DATEPICKER:
+        case FormStepTypes_1.StepTypes.API_SELECTOR:
+        case FormStepTypes_1.StepTypes.ENTITYVALUEPICKER:
+            return null;
+        case FormStepTypes_1.StepTypes.MAPPER:
+        case FormStepTypes_1.StepTypes.FILEUPLOAD:
+        case CBRFormStepTypes_1.default.CBR_INCIDENCIAS:
+            return [];
+        case FormStepTypes_1.StepTypes.COLLAPSIBLE:
+            return false;
+        case FormStepTypes_1.StepTypes.SEPARATOR:
+        default:
+            return undefined;
+    }
+};
+exports.calcDefaultValue = calcDefaultValue;
+const iterateNestedSteps = (idStep, steps, iteration) => {
+    const step = steps[idStep];
+    iteration(step);
+    if (step.type === FormStepTypes_1.StepTypes.MAPPER) {
+        for (const idStep of step.rootSteps) {
+            (0, exports.iterateNestedSteps)(idStep, step.steps, iteration);
+        }
+    }
+    else {
+        for (const idSubStep of (0, exports.calcSubSteps)(step.id, steps)) {
+            (0, exports.iterateNestedSteps)(idSubStep, steps, iteration);
+        }
+    }
+};
+exports.iterateNestedSteps = iterateNestedSteps;
+/**
+ * Utility function to calc the substeps of a step
+ * @param step step to calc the substeps
+ * @param idModifier optional modifier for the ids of the substeps and all other properties
+ * @returns list of the ids of the substeps of the step, if modifier returns modified steps
+ */
+const calcSubSteps = (idStep, allSteps, idModifier) => {
+    var _a;
+    const step = allSteps[idStep];
+    const subSteps = [];
+    if (!step)
+        return [];
+    const handleSteps = (steps) => {
+        for (let i = 0; i < steps.length; i++) {
+            const idSubStep = steps[i];
+            if (idModifier)
+                steps[i] = idModifier(steps[i]);
+            subSteps.push(idSubStep, ...(0, exports.calcSubSteps)(idSubStep, allSteps, idModifier));
+        }
+    };
+    switch (step.type) {
+        case FormStepTypes_1.StepTypes.SELECTOR: {
+            for (const option of step.options) {
+                if (option.type === FormStepTypes_1.OptionTypes.NESTED) {
+                    handleSteps(option.steps);
+                }
+            }
+            break;
+        }
+        case FormStepTypes_1.StepTypes.CLASSIFIER_SELECTOR:
+            for (const idOption of Object.keys(step.options)) {
+                const option = step.options[idOption];
+                if (option.type === FormStepTypes_1.ClassifierOptionTypes.NESTED) {
+                    handleSteps(option.steps);
+                }
+            }
+            break;
+        case FormStepTypes_1.StepTypes.RATING:
+            if (step.nestedSteps) {
+                for (const steps of step.nestedSteps) {
+                    handleSteps(steps);
+                }
+            }
+            break;
+        case FormStepTypes_1.StepTypes.COLLAPSIBLE: {
+            handleSteps(step.steps);
+            break;
+        }
+        case FormStepTypes_1.StepTypes.CHECKBOX: {
+            if (step.steps)
+                handleSteps(step.steps);
+            if (step.uncheckedSteps)
+                handleSteps(step.uncheckedSteps);
+            break;
+        }
+        case FormStepTypes_1.StepTypes.ENTITYVALUEPICKER:
+            if (idModifier) {
+                for (const path of step.path) {
+                    if (path.type === FormStepTypes_1.EntityValueDataTypes.STEP) {
+                        path.idStep = idModifier(path.idStep);
+                    }
+                }
+                for (const filter of step.filters) {
+                    if (filter.type === FormStepTypes_1.EntityValueDataTypes.STEP) {
+                        filter.idStep = idModifier(filter.idStep);
+                    }
+                }
+            }
+            for (const idOption of Object.keys((_a = step.options) !== null && _a !== void 0 ? _a : {})) {
+                const option = step.options[idOption];
+                if (option.type === FormStepTypes_1.EntityValueOptionTypes.NESTED) {
+                    handleSteps(option.steps);
+                }
+            }
+            break;
+        case CBRFormStepTypes_1.default.CBR_LOCATIVAS:
+            {
+                const elementStep = step;
+                if (elementStep.subStep) {
+                    if (idModifier)
+                        elementStep.subStep = idModifier(elementStep.subStep);
+                    subSteps.push(elementStep.subStep);
+                }
+            }
+            break;
+        case AYFFormStepTypes_1.default.AYF_ICA_CITY: {
+            const cityStep = step;
+            if (cityStep.idNitStep) {
+                if (idModifier)
+                    cityStep.idNitStep = idModifier(cityStep.idNitStep);
+                subSteps.push(cityStep.idNitStep);
+            }
+            break;
+        }
+        default:
+            break;
+    }
+    return subSteps;
+};
+exports.calcSubSteps = calcSubSteps;

package/dist/cjs/FormSteps/StepHooks.js

@@ -0,0 +1,131 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormStep = exports.selectDependencies = exports.useStepDependency = exports.selectOriginalValue = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const SiteSlice_1 = require("../States/SiteSlice");
+const toolkit_1 = require("@reduxjs/toolkit");
+const StepFunctions_1 = require("./StepFunctions");
+const react_hook_form_1 = require("react-hook-form");
+const StepFiller_1 = require("./Utils/@StepFiller/StepFiller");
+const selectIsDependency = (0, toolkit_1.createSelector)([
+    (state) => state.site.dependencies,
+    (state, step) => step,
+], (dependencies, step) => {
+    return dependencies[step.id] !== undefined;
+});
+exports.selectOriginalValue = (0, toolkit_1.createSelector)([
+    (state) => state.site.values,
+    (state, step) => step,
+], (values, step) => { var _a; return (_a = values.sections[step.idSection]) === null || _a === void 0 ? void 0 : _a[step.id]; });
+const useStepDependency = (step, defaultValue) => {
+    var _a;
+    const isDependency = (0, hooks_1.useAppSelector)((state) => selectIsDependency(state, step));
+    const originalValue = (0, hooks_1.useAppSelector)((state) => (0, exports.selectOriginalValue)(state, step));
+    const dispatch = (0, hooks_1.useAppDispatch)();
+    (0, react_1.useEffect)(() => {
+        if (isDependency && !originalValue && defaultValue) {
+            dispatch((0, SiteSlice_1.setStepDependency)({
+                step,
+                value: defaultValue,
+            }));
+        }
+        return () => {
+            dispatch((0, SiteSlice_1.clearDependency)(step));
+        };
+    }, [isDependency]);
+    const handleStepDep = (0, react_1.useCallback)((value) => {
+        if (!isDependency)
+            return;
+        dispatch((0, SiteSlice_1.setStepDependency)({
+            step,
+            value: value !== null && value !== void 0 ? value : null,
+        }));
+    }, [step.id, step.type, isDependency]);
+    return {
+        handleStepDep,
+        isDependency,
+        originalValue: (_a = originalValue !== null && originalValue !== void 0 ? originalValue : defaultValue) !== null && _a !== void 0 ? _a : (0, StepFunctions_1.calcDefaultValue)(step),
+    };
+};
+exports.useStepDependency = useStepDependency;
+exports.selectDependencies = (0, toolkit_1.createSelector)([
+    (state) => state.site.dependencies,
+    (state, step) => step,
+    (state, step, form) => form,
+], (dependencies, step, form) => {
+    const invalids = [];
+    let emptyDep = false;
+    /** Show deep error changes even if not in dependencies */
+    for (const idDep of calcDeepDependencies(step.id, form)) {
+        const dependency = dependencies[idDep];
+        if ((dependency === null || dependency === void 0 ? void 0 : dependency.value) === null && form.steps[idDep]) {
+            invalids.push(idDep);
+        }
+        if (dependency === null || dependency === void 0 ? void 0 : dependency.empty)
+            emptyDep = true;
+    }
+    return { invalids, emptyDep };
+});
+const calcDeepDependencies = (idStep, form, deps = []) => {
+    const step = form.steps[idStep];
+    if (step === null || step === void 0 ? void 0 : step.dependencies) {
+        for (const dep of step.dependencies) {
+            if (!deps.includes(dep)) {
+                deps.push(...calcDeepDependencies(dep, form, deps), dep);
+            }
+        }
+    }
+    return deps;
+};
+const useFormStep = (step, { rules, debounce, sizeChange, defaultValue }) => {
+    const [timer, setTimer] = (0, react_1.useState)();
+    const { isDependency, handleStepDep, originalValue } = (0, exports.useStepDependency)(step, defaultValue);
+    const _a = (0, react_hook_form_1.useController)({
+        name: step.id,
+        rules,
+        shouldUnregister: true,
+        defaultValue: originalValue,
+    }), _b = _a.field, { ref, value, onChange: fieldOnChange } = _b, field = __rest(_b, ["ref", "value", "onChange"]), { fieldState: { error } } = _a;
+    const handleSizeChange = (0, react_1.useContext)(StepFiller_1.SizeChangeContext);
+    const onChange = (0, react_1.useCallback)((value) => {
+        if (isDependency) {
+            if (debounce) {
+                try {
+                    clearTimeout(timer);
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                setTimer(setTimeout(() => {
+                    handleStepDep(value);
+                    setTimer(undefined);
+                }, 1000));
+            }
+            else {
+                handleStepDep(value);
+            }
+        }
+        fieldOnChange(value);
+        if (sizeChange)
+            handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
+    }, [handleStepDep, isDependency, fieldOnChange]);
+    return {
+        ref,
+        value,
+        onChange,
+        error,
+        field,
+    };
+};
+exports.useFormStep = useFormStep;

package/dist/cjs/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js

@@ -0,0 +1,142 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MaterialTextAreaStep_module_css_1 = __importDefault(require("./MaterialTextAreaStep.module.css"));
+const react_hook_form_1 = require("react-hook-form");
+const react_draft_wysiwyg_1 = require("react-draft-wysiwyg"); //Load programatically only if step has editor
+require("react-draft-wysiwyg/dist/react-draft-wysiwyg.css");
+require("./DraftEditor.css");
+const react_1 = require("react");
+const core_1 = require("@material-ui/core");
+const hooks_1 = require("../../../hooks");
+const StepHooks_1 = require("../../StepHooks");
+const draft_js_1 = require("draft-js");
+const DraftFunctions_1 = require("../../../Utils/DraftFunctions");
+function TextAreaStep({ step, editable }) {
+    var _a;
+    const { formStyle, postview } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const [hovering, setHovering] = (0, react_1.useState)(false);
+    const [focus, setFocus] = (0, react_1.useState)(false);
+    const [timer, setTimer] = (0, react_1.useState)();
+    const { handleStepDep, originalValue, isDependency } = (0, StepHooks_1.useStepDependency)(step, (0, DraftFunctions_1.getRawText)());
+    const _b = (0, react_hook_form_1.useController)({
+        name: step.id,
+        shouldUnregister: true,
+        rules: step.required
+            ? {
+                validate: (editorState) => editorState.getCurrentContent().hasText(),
+            }
+            : {},
+        defaultValue: draft_js_1.EditorState.createWithContent((0, draft_js_1.convertFromRaw)(originalValue)),
+    }), _c = _b.field, { ref, onChange } = _c, field = __rest(_c, ["ref", "onChange"]), { fieldState: { error } } = _b;
+    const handleChange = (0, react_1.useCallback)((value) => {
+        if (isDependency) {
+            try {
+                clearTimeout(timer);
+                // eslint-disable-next-line no-empty
+            }
+            catch (e) { }
+            setTimer(setTimeout(() => {
+                handleStepDep(value.getCurrentContent().getPlainText());
+                setTimer(undefined);
+            }, 1000));
+        }
+        onChange(value);
+    }, [handleStepDep, isDependency, onChange]);
+    const calcStyle = () => {
+        const backgroundColor = formStyle.stepBackgroundColor;
+        if (focus) {
+            return {
+                border: '2px solid ' + formStyle.primaryColor,
+                marginTop: -1,
+                marginLeft: -1,
+                marginBottom: 0,
+                backgroundColor,
+            };
+        }
+        else if (hovering) {
+            return {
+                border: '1px solid ' + formStyle.primaryColor,
+                backgroundColor,
+            };
+        }
+        else {
+            return {
+                border: '1px solid ' + formStyle.outlineColor,
+                backgroundColor,
+            };
+        }
+    };
+    const canEdit = editable && !postview;
+    const value = field.value;
+    let editorClassName = MaterialTextAreaStep_module_css_1.default.editor;
+    if (!value.getCurrentContent().hasText()) {
+        if (value.getCurrentContent().getBlockMap().first().getType() !==
+            'unstyled') {
+            editorClassName += ' RichEditor-hidePlaceholder';
+        }
+    }
+    if (!canEdit) {
+        editorClassName += ' postview-editor';
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialTextAreaStep_module_css_1.default.textEditorContainer, style: {
+            pageBreakInside: 'avoid',
+            '--eureka-outline': formStyle.outlineColor,
+            '--eureka-primary': formStyle.primaryColor,
+        } }, { children: [step.label && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialTextAreaStep_module_css_1.default.textEditorLabel, style: {
+                    color: error
+                        ? formStyle.errorColor
+                        : formStyle.textColor,
+                } }, { children: [step.label, " ", step.required ? ' *' : ''] }))), (0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, Object.assign({ mouseEvent: "onMouseDown", onClickAway: () => {
+                    if (canEdit) {
+                        setFocus(false);
+                    }
+                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: postview
+                        ? MaterialTextAreaStep_module_css_1.default.postViewContainer + ' EF-DraftContainer'
+                        : MaterialTextAreaStep_module_css_1.default.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: () => {
+                        if (canEdit) {
+                            setHovering(true);
+                        }
+                    }, onMouseLeave: () => {
+                        if (canEdit) {
+                            setHovering(false);
+                        }
+                    }, onClick: () => {
+                        if (canEdit) {
+                            setFocus(true);
+                        }
+                    }, "data-testid": step.id }, { children: (0, jsx_runtime_1.jsx)(react_draft_wysiwyg_1.Editor, Object.assign({}, field, { editorRef: ref, onFocus: () => {
+                            setFocus(true);
+                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorState: value, editorClassName: editorClassName, wrapperClassName: MaterialTextAreaStep_module_css_1.default.wrapper, placeholder: (_a = step.description) !== null && _a !== void 0 ? _a : '', toolbar: {
+                            options: ['inline', 'list', 'history'],
+                            inline: {
+                                options: [
+                                    'bold',
+                                    'italic',
+                                    'underline',
+                                    'strikethrough',
+                                ],
+                            },
+                            list: {
+                                options: ['unordered'],
+                            },
+                        } })) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialTextAreaStep_module_css_1.default.errorMsg, style: {
+                    color: formStyle.errorColor,
+                    height: !postview && editable ? '0.75rem' : 0,
+                } }, { children: !!error && 'Este campo es obligatorio' }))] })));
+}
+exports.default = TextAreaStep;

package/dist/cjs/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RoundedTextField_1 = __importDefault(require("../../../Shared/RoundedTextField/RoundedTextField"));
+const MaterialTextAreaStep_module_css_1 = __importDefault(require("./MaterialTextAreaStep.module.css"));
+const hooks_1 = require("../../../hooks");
+const StepHooks_1 = require("../../StepHooks");
+function TextAreaStep({ step, editable, maxLength, }) {
+    var _a, _b;
+    const { formStyle, postview, partial } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const { ref, value, onChange, error, field } = (0, StepHooks_1.useFormStep)(step, {
+        debounce: true,
+        defaultValue: '',
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const canEdit = editable && !postview;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialTextAreaStep_module_css_1.default.container, style: {
+            paddingBottom: step.required || step.description || !!error
+                ? '0px'
+                : '5px',
+        } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialTextAreaStep_module_css_1.default.erkTextArea }, { children: (0, jsx_runtime_1.jsx)(RoundedTextField_1.default, Object.assign({}, field, { inputRef: ref, value: value, onChange: (e) => onChange(e.target.value), "data-testid": step.id, maxLength: maxLength, label: step.label, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: (_b = (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : step.description) !== null && _b !== void 0 ? _b : (step.required ? ' ' : null), error: !!error })) })), postview && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialTextAreaStep_module_css_1.default.print }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [step.label, ":"] }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: MaterialTextAreaStep_module_css_1.default.printContainer, style: {
+                            backgroundColor: formStyle.stepBackgroundColor,
+                            borderColor: formStyle.outlineColor,
+                        } }, { children: value }))] })))] })));
+}
+exports.default = TextAreaStep;