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

package/src/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.tsx

@@ -0,0 +1,209 @@
+import styles from './MaterialTextAreaStep.module.css';
+import { useController } from 'react-hook-form';
+import { Editor } from 'react-draft-wysiwyg'; //Load programatically only if step has editor
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import './DraftEditor.css';
+import { TextAreaStepProps } from '../TextAreaStep';
+import React, { useCallback, useState } from 'react';
+import { ClickAwayListener } from '@material-ui/core';
+import { useAppSelector } from '../../../hooks';
+import { useStepDependency } from '../../StepHooks';
+import { EditorState, convertFromRaw } from 'draft-js';
+import { getRawText } from '../../../Utils/DraftFunctions';
+
+export interface Payload {
+    text: string;
+    draft: any;
+}
+
+function TextAreaStep({ step, editable }: TextAreaStepProps): JSX.Element {
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+
+    const [hovering, setHovering] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [timer, setTimer] = useState<ReturnType<typeof setTimeout>>();
+
+    const { handleStepDep, originalValue, isDependency } = useStepDependency(
+        step,
+        getRawText()
+    );
+
+    const {
+        field: { ref, onChange, ...field },
+        fieldState: { error },
+    } = useController({
+        name: step.id,
+        shouldUnregister: true,
+        rules: step.required
+            ? {
+                  validate: (editorState: any): boolean =>
+                      editorState.getCurrentContent().hasText(),
+              }
+            : {},
+        defaultValue: EditorState.createWithContent(
+            convertFromRaw(originalValue)
+        ),
+    });
+
+    const handleChange = useCallback(
+        (value): void => {
+            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 = (): React.CSSProperties => {
+        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 as EditorState;
+    let editorClassName = styles.editor;
+    if (!value.getCurrentContent().hasText()) {
+        if (
+            value.getCurrentContent().getBlockMap().first().getType() !==
+            'unstyled'
+        ) {
+            editorClassName += ' RichEditor-hidePlaceholder';
+        }
+    }
+
+    if (!canEdit) {
+        editorClassName += ' postview-editor';
+    }
+
+    return (
+        <div
+            className={styles.textEditorContainer}
+            style={
+                {
+                    pageBreakInside: 'avoid',
+                    '--eureka-outline': formStyle.outlineColor,
+                    '--eureka-primary': formStyle.primaryColor,
+                } as React.CSSProperties
+            }
+        >
+            {step.label && (
+                <div
+                    className={styles.textEditorLabel}
+                    style={{
+                        color: error
+                            ? formStyle.errorColor
+                            : formStyle.textColor,
+                    }}
+                >
+                    {step.label} {step.required ? ' *' : ''}
+                </div>
+            )}
+            <ClickAwayListener
+                mouseEvent="onMouseDown"
+                onClickAway={(): void => {
+                    if (canEdit) {
+                        setFocus(false);
+                    }
+                }}
+            >
+                <div
+                    className={
+                        postview
+                            ? styles.postViewContainer + ' EF-DraftContainer'
+                            : styles.textContainer + ' EF-DraftContainer'
+                    }
+                    style={calcStyle()}
+                    onMouseEnter={(): void => {
+                        if (canEdit) {
+                            setHovering(true);
+                        }
+                    }}
+                    onMouseLeave={(): void => {
+                        if (canEdit) {
+                            setHovering(false);
+                        }
+                    }}
+                    onClick={(): void => {
+                        if (canEdit) {
+                            setFocus(true);
+                        }
+                    }}
+                    data-testid={step.id}
+                >
+                    <Editor
+                        {...field}
+                        editorRef={ref}
+                        onFocus={(): void => {
+                            setFocus(true);
+                        }}
+                        readOnly={!canEdit}
+                        stripPastedStyles
+                        onEditorStateChange={handleChange}
+                        toolbarClassName={
+                            !canEdit ? ' postview-editor-toolbar' : ''
+                        }
+                        editorState={value}
+                        editorClassName={editorClassName}
+                        wrapperClassName={styles.wrapper}
+                        placeholder={step.description ?? ''}
+                        toolbar={{
+                            options: ['inline', 'list', 'history'],
+                            inline: {
+                                options: [
+                                    'bold',
+                                    'italic',
+                                    'underline',
+                                    'strikethrough',
+                                ],
+                            },
+                            list: {
+                                options: ['unordered'],
+                            },
+                        }}
+                    />
+                </div>
+            </ClickAwayListener>
+
+            <div
+                className={styles.errorMsg}
+                style={{
+                    color: formStyle.errorColor,
+                    height: !postview && editable ? '0.75rem' : 0,
+                }}
+            >
+                {!!error && 'Este campo es obligatorio'}
+            </div>
+        </div>
+    );
+}
+
+export default TextAreaStep;

package/src/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css

@@ -0,0 +1,84 @@
+.container,
+.textEditorContainer {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    padding-top: 5px;
+    width: calc(100% - 20px);
+}
+
+.textEditorContainer {
+    max-width: '100%';
+    display: flex;
+    flex-direction: column;
+}
+.postViewContainer {
+    height: fit-content;
+    border-radius: 15px;
+    min-height: 265px;
+    width: 100%;
+    position: relative;
+    margin-bottom: 1px;
+    overflow: hidden;
+}
+.textContainer {
+    height: 100%;
+    border-radius: 15px;
+    height: 265px;
+    width: 100%;
+    position: relative;
+    margin-bottom: 1px;
+    overflow: hidden;
+}
+
+.editor {
+    margin: -5px 10px 0 10px;
+    height: calc(100% - 22px) !important;
+}
+
+.wrapper {
+    height: 100%;
+    border-radius: 15px;
+}
+
+.errorMsg {
+    margin-top: 4px;
+    margin-bottom: 5px;
+    margin-left: 14px;
+    font-size: 0.75rem;
+    height: 0.75rem;
+}
+
+.textEditorLabel {
+    margin-left: 5px;
+    margin-bottom: 2px;
+    font-size: 1rem;
+}
+.print {
+    display: none;
+}
+.printContainer {
+    border-radius: 10px;
+    border: 1px solid black;
+    padding: 6px 12px;
+    width: calc(100% - 2);
+    font-size: 1rem;
+    min-height: 50px;
+    margin: 0px;
+}
+.erkTextArea {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+}
+
+@media print {
+    .print {
+        display: block;
+    }
+    .erkTextArea {
+        display: none !important;
+    }
+}

package/src/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.tsx

@@ -0,0 +1,89 @@
+import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
+import styles from './MaterialTextAreaStep.module.css';
+import { TextAreaStepProps } from '../TextAreaStep';
+import React from 'react';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+
+export interface Payload {
+    text: string;
+    draft: any;
+}
+
+function TextAreaStep({
+    step,
+    editable,
+    maxLength,
+}: TextAreaStepProps): JSX.Element {
+    const { formStyle, postview, partial } = useAppSelector(
+        (state) => state.global
+    );
+
+    const { ref, value, onChange, error, field } = useFormStep<string>(step, {
+        debounce: true,
+        defaultValue: '',
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+
+    const canEdit = editable && !postview;
+
+    return (
+        <div
+            className={styles.container}
+            style={{
+                paddingBottom:
+                    step.required || step.description || !!error
+                        ? '0px'
+                        : '5px',
+            }}
+        >
+            <div className={styles.erkTextArea}>
+                <RoundedTextField
+                    {...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
+                    minRows={postview && partial ? undefined : 4}
+                    focusColor={formStyle.primaryColor}
+                    outlineColor={formStyle.outlineColor}
+                    textColor={formStyle.textColor}
+                    errorColor={formStyle.errorColor}
+                    backgroundColor={formStyle.stepBackgroundColor}
+                    helperTextColor={formStyle.descriptionTextColor}
+                    helperText={
+                        error?.message ??
+                        step.description ??
+                        (step.required ? ' ' : null)
+                    }
+                    error={!!error}
+                />
+            </div>
+            {/* TODO: Revisar esto que putas */}
+            {postview && (
+                <div className={styles.print}>
+                    <div>{step.label}:</div>
+                    <p
+                        className={styles.printContainer}
+                        style={{
+                            backgroundColor: formStyle.stepBackgroundColor,
+                            borderColor: formStyle.outlineColor,
+                        }}
+                    >
+                        {value}
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default TextAreaStep;

package/src/FormSteps/TextAreaStep/TextAreaStep.tsx

@@ -0,0 +1,23 @@
+import { useAppSelector } from '../../hooks';
+import { TextArea } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import { StepProps } from '../Step';
+import MaterialTextAreaStep from './MaterialTextAreaStep/MaterialTextAreaStep';
+import MaterialTextAreaEditorStep from './MaterialTextAreaStep/MaterialTextAreaEditorStep';
+export interface TextAreaStepProps extends StepProps {
+    /** The TextAreaStep to display */
+    step: TextArea;
+    maxLength?: number;
+}
+function TextAreaStep(props: TextAreaStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            if (props.step.hasTextEditor)
+                return <MaterialTextAreaEditorStep {...props} />;
+            else return <MaterialTextAreaStep {...props} />;
+        }
+    }
+}
+export default TextAreaStep;

package/src/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.module.css

@@ -0,0 +1,9 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+}

package/src/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.tsx

@@ -0,0 +1,80 @@
+import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
+import styles from './MaterialTextInputStep.module.css';
+import { TextInputStepProps } from '../TextInputStep';
+import { calcStepWidth } from '../../StepFunctions';
+import { useContext } from 'react';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+function TextInputStep({
+    icon,
+    step,
+    editable,
+    maxLength,
+    defaultValue,
+    validation = step.validation,
+}: TextInputStepProps): JSX.Element {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+
+    const { ref, value, onChange, error, field } = useFormStep<string>(step, {
+        defaultValue: defaultValue ?? '',
+        debounce: true,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+            pattern: validation
+                ? {
+                      value: new RegExp(
+                          validation.type === 'EMAIL'
+                              ? // eslint-disable-next-line no-control-regex
+                                /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
+                              : validation.value
+                      ),
+                      message: validation.message,
+                  }
+                : undefined,
+        },
+    });
+
+    return (
+        <div
+            className={styles.container}
+            style={{
+                width:
+                    currentBreakPoint <= step.size
+                        ? '100%'
+                        : calcStepWidth(step.size, form.size),
+                minHeight:
+                    step.description ||
+                    (!postview && editable && (step.required || validation))
+                        ? '55px'
+                        : '43px',
+            }}
+        >
+            <RoundedTextField
+                {...field}
+                inputRef={ref}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                maxLength={maxLength}
+                data-testid={step.id}
+                label={step.label}
+                cantEdit={!editable || postview}
+                required={step.required}
+                fontWeight={400}
+                focusColor={formStyle.primaryColor}
+                outlineColor={formStyle.outlineColor}
+                textColor={formStyle.textColor}
+                errorColor={formStyle.errorColor}
+                backgroundColor={formStyle.stepBackgroundColor}
+                helperText={error?.message ?? step.description}
+                helperTextColor={formStyle.descriptionTextColor}
+                error={!!error}
+                icon={step.showIcon ? icon : undefined}
+            ></RoundedTextField>
+        </div>
+    );
+}
+
+export default TextInputStep;

package/src/FormSteps/TextInputStep/TextInputStep.tsx

@@ -0,0 +1,28 @@
+import { TextInput } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialTextInputStep from './MaterialTextInputStep/MaterialTextInputStep';
+import { StepProps } from '../Step';
+import { useAppSelector } from '../../hooks';
+export interface TextInputStepProps extends StepProps {
+    /** The TextInputStep to display */
+    step: TextInput;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** Default value to display */
+    defaultValue?: string;
+    /** Custom Validation to display */
+    validation?: TextInput['validation'];
+    /** Custom step Max char length */
+    maxLength?: number;
+}
+function TextInputStep(props: TextInputStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialTextInputStep {...props} />;
+        }
+    }
+}
+export default TextInputStep;

package/src/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.module.css

@@ -0,0 +1,18 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - 20px);
+    padding: 5px 10px;
+}
+
+.titleLbl {
+    font-size: 24px;
+    font-weight: 600;
+    cursor: default;
+}
+
+.descriptionPar {
+    font-size: 16px;
+    white-space: pre-wrap;
+    cursor: default;
+}

package/src/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.tsx

@@ -0,0 +1,64 @@
+import { calcStepWidth } from '../../StepFunctions';
+import { TitleStepProps } from '../TitleStep';
+import styles from './MaterialTitleStep.module.css';
+import { useAppSelector } from '../../../hooks';
+import FormContext from '../../../Contexts/FormContext';
+import { useContext } from 'react';
+import { useFormStep } from '../../StepHooks';
+function TitleStep({ step }: TitleStepProps): JSX.Element {
+    const { value } = useFormStep<
+        | {
+              title: string;
+              description: string | null;
+          }
+        | undefined
+    >(step, {
+        defaultValue: undefined,
+    });
+
+    const title = value?.title ?? step.title;
+    const description = value?.description ?? step.description;
+
+    const { formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const size = step.size ?? form.size.blockNum;
+    return (
+        <div
+            className={styles.container}
+            style={{
+                color: formStyle.textColor,
+                width:
+                    widthStats.currentBreakPoint <= size
+                        ? '100%'
+                        : calcStepWidth(size, form.size),
+            }}
+        >
+            {title && (
+                <div
+                    className={styles.titleLbl}
+                    style={{
+                        textAlign:
+                            widthStats.isMobile &&
+                            widthStats.currentBreakPoint <= size
+                                ? 'center'
+                                : 'start',
+                    }}
+                >
+                    {title}
+                </div>
+            )}
+            {description && (
+                <p
+                    className={styles.descriptionPar}
+                    style={{
+                        margin: title ? '10px 0px' : '0px 0px 5px 0px',
+                    }}
+                >
+                    {description}
+                </p>
+            )}
+        </div>
+    );
+}
+export default TitleStep;

package/src/FormSteps/TitleStep/TitleStep.tsx

@@ -0,0 +1,21 @@
+import { Title } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialTitleStep from './MaterialTitleStep/MaterialTitleStep';
+import { StepProps } from '../Step';
+import { useAppSelector } from '../../hooks';
+
+export interface TitleStepProps extends StepProps {
+    /** The TitleStep to display */
+    step: Title;
+}
+function TitleStep(props: TitleStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialTitleStep {...props} />;
+        }
+    }
+}
+export default TitleStep;

package/src/FormSteps/Utils/@StepFiller/StepFiller.module.css

@@ -0,0 +1,16 @@
+.firstLvlContainer {
+    max-width: 100%;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.smallSeparator {
+    height: 0;
+    max-width: 100%;
+    flex-basis: 0;
+}
+
+.separator {
+    flex-basis: 100%;
+    height: 0;
+}