@m4l/components 9.3.15-JT19092025.beta.1 → 9.3.16-BE091825-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Card/Card.js +49 -0
- package/components/Card/Card.styles.js +56 -0
- package/components/Card/constants.js +17 -0
- package/components/Card/helpers/getSizeSpacing.d.ts +4 -3
- package/components/Card/helpers/getSizeSpacing.js +10 -0
- package/components/Card/index.js +1 -0
- package/components/Card/slots/CardEnum.js +7 -0
- package/components/Card/slots/CardSlots.js +11 -0
- package/components/Card/types.d.ts +5 -3
- package/components/Stepper/hooks/useStepperActions/index.js +3 -21
- package/components/Stepper/subcomponents/StepArea/index.js +0 -4
- package/components/hook-form/RHFormContext/index.d.ts +1 -1
- package/components/hook-form/RHFormContext/index.js +4 -29
- package/components/index.d.ts +1 -0
- package/components/mui_extended/Typography/Typography.js +3 -1
- package/components/mui_extended/Typography/constants.d.ts +4 -0
- package/components/mui_extended/Typography/types.d.ts +6 -0
- package/components/mui_extended/Typography/typography.styles.js +1 -0
- package/index.js +36 -34
- package/package.json +2 -2
- package/components/Stepper/hooks/useDynamicValidation/index.d.ts +0 -9
- package/components/Stepper/hooks/useDynamicValidation/index.js +0 -57
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { C as CardRootStyled } from "./slots/CardSlots.js";
|
|
3
|
+
import { C as CARD_CLASSES } from "./constants.js";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
const Card = (props) => {
|
|
6
|
+
const {
|
|
7
|
+
className,
|
|
8
|
+
variant = "text",
|
|
9
|
+
gap,
|
|
10
|
+
height = "auto",
|
|
11
|
+
children,
|
|
12
|
+
direction = "row",
|
|
13
|
+
justifyContent = "center",
|
|
14
|
+
alignItems = "center",
|
|
15
|
+
selected = false,
|
|
16
|
+
padding,
|
|
17
|
+
...others
|
|
18
|
+
} = props;
|
|
19
|
+
const ownerState = {
|
|
20
|
+
variant,
|
|
21
|
+
gap,
|
|
22
|
+
height,
|
|
23
|
+
direction,
|
|
24
|
+
onClick: !!props.onClick,
|
|
25
|
+
justifyContent,
|
|
26
|
+
alignItems,
|
|
27
|
+
selected,
|
|
28
|
+
padding
|
|
29
|
+
};
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
CardRootStyled,
|
|
32
|
+
{
|
|
33
|
+
ownerState,
|
|
34
|
+
className: clsx(
|
|
35
|
+
CARD_CLASSES.root,
|
|
36
|
+
variant === "outlined" && CARD_CLASSES.outlined,
|
|
37
|
+
variant === "text" && CARD_CLASSES.text,
|
|
38
|
+
selected && CARD_CLASSES.selected,
|
|
39
|
+
className
|
|
40
|
+
),
|
|
41
|
+
role: "card",
|
|
42
|
+
...others,
|
|
43
|
+
children
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
Card as C
|
|
49
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { g as getSizeSpacing } from "./helpers/getSizeSpacing.js";
|
|
2
|
+
const cardStyles = {
|
|
3
|
+
/**
|
|
4
|
+
* Estilos para el contenedor principal del card.
|
|
5
|
+
*/
|
|
6
|
+
root: ({ theme, ownerState }) => {
|
|
7
|
+
const gap = getSizeSpacing(ownerState?.gap, theme);
|
|
8
|
+
const padding = getSizeSpacing(ownerState?.padding, theme);
|
|
9
|
+
return {
|
|
10
|
+
display: "flex",
|
|
11
|
+
justifyContent: ownerState?.justifyContent ?? "center",
|
|
12
|
+
alignItems: ownerState?.alignItems ?? "center",
|
|
13
|
+
flexDirection: ownerState?.direction ?? "column",
|
|
14
|
+
gap,
|
|
15
|
+
padding,
|
|
16
|
+
transition: "all 0.2s ease-in-out",
|
|
17
|
+
width: "100%",
|
|
18
|
+
outline: "unset!important",
|
|
19
|
+
borderRadius: theme.vars.size.borderRadius.r2,
|
|
20
|
+
backgroundColor: theme.palette.background.paper,
|
|
21
|
+
height: ownerState?.height ?? "auto",
|
|
22
|
+
minHeight: ownerState?.height ?? "auto",
|
|
23
|
+
maxHeight: ownerState?.height ?? "auto",
|
|
24
|
+
overflow: "hidden",
|
|
25
|
+
...ownerState?.onClick && {
|
|
26
|
+
cursor: "pointer",
|
|
27
|
+
"&:hover": {
|
|
28
|
+
backgroundColor: theme.vars.palette.background.base
|
|
29
|
+
},
|
|
30
|
+
"&:active": {
|
|
31
|
+
backgroundColor: theme.vars.palette.default.activeOpacity
|
|
32
|
+
},
|
|
33
|
+
"&:focus-visible, &:focus-within": {
|
|
34
|
+
border: theme.vars.size.borderStroke.container,
|
|
35
|
+
borderColor: `${theme.vars.palette.primary.focusVisible}!important`,
|
|
36
|
+
outline: "unset!important"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
...ownerState?.variant === "outlined" && {
|
|
40
|
+
border: theme.vars.size.borderStroke.container,
|
|
41
|
+
borderColor: theme.vars.palette.border.disabled
|
|
42
|
+
},
|
|
43
|
+
...ownerState?.variant === "text" && {
|
|
44
|
+
border: theme.vars.size.borderStroke.container,
|
|
45
|
+
borderColor: "transparent"
|
|
46
|
+
},
|
|
47
|
+
...ownerState?.selected && {
|
|
48
|
+
border: theme.vars.size.borderStroke.container,
|
|
49
|
+
borderColor: theme.vars.palette.primary.enabled
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
export {
|
|
55
|
+
cardStyles as c
|
|
56
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
|
|
2
|
+
import { C as CardSlots } from "./slots/CardEnum.js";
|
|
3
|
+
const CARD_KEY = "M4LCard";
|
|
4
|
+
const CARD_VARIANTS = {
|
|
5
|
+
text: "text",
|
|
6
|
+
outlined: "outlined"
|
|
7
|
+
};
|
|
8
|
+
const COMBINED_CLASSES = {
|
|
9
|
+
...CARD_VARIANTS,
|
|
10
|
+
...CardSlots,
|
|
11
|
+
selected: "selected"
|
|
12
|
+
};
|
|
13
|
+
const CARD_CLASSES = getComponentClasses(CARD_KEY, COMBINED_CLASSES);
|
|
14
|
+
export {
|
|
15
|
+
CARD_CLASSES as C,
|
|
16
|
+
CARD_KEY as a
|
|
17
|
+
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SpacingsCard } from '../types';
|
|
2
|
+
import { Theme } from '@mui/material';
|
|
2
3
|
/**
|
|
3
4
|
* Obtiene el tamaño del gap de la tarjeta.
|
|
4
|
-
* @param
|
|
5
|
+
* @param spacing - El gap de la tarjeta.
|
|
5
6
|
* @returns El tamaño del gap de la tarjeta.
|
|
6
7
|
*/
|
|
7
|
-
export declare const getSizeSpacing: (
|
|
8
|
+
export declare const getSizeSpacing: (spacing: SpacingsCard | number | undefined | null, theme: Theme) => string | number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { styled } from "@mui/material/styles";
|
|
2
|
+
import { a as CARD_KEY } from "../constants.js";
|
|
3
|
+
import { C as CardSlots } from "./CardEnum.js";
|
|
4
|
+
import { c as cardStyles } from "../Card.styles.js";
|
|
5
|
+
const CardRootStyled = styled("div", {
|
|
6
|
+
name: CARD_KEY,
|
|
7
|
+
slot: CardSlots.root
|
|
8
|
+
})(cardStyles?.root);
|
|
9
|
+
export {
|
|
10
|
+
CardRootStyled as C
|
|
11
|
+
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { Theme } from '@mui/material';
|
|
1
|
+
import { Theme } from '@mui/material/styles';
|
|
2
2
|
import { M4LOverridesStyleRules } from '../../@types/augmentations';
|
|
3
3
|
import { CARD_KEY } from './constants';
|
|
4
4
|
import { CardSlots } from './slots/CardEnum';
|
|
5
|
+
import { Density } from '@m4l/styles';
|
|
6
|
+
export type SpacingsCard = number | keyof Density;
|
|
5
7
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
8
|
/**
|
|
7
9
|
* Contenido de la tarjeta.
|
|
@@ -14,11 +16,11 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
14
16
|
/**
|
|
15
17
|
* Espacio entre los elementos de la tarjeta.
|
|
16
18
|
*/
|
|
17
|
-
gap?:
|
|
19
|
+
gap?: SpacingsCard;
|
|
18
20
|
/**
|
|
19
21
|
* Espacio entre los elementos de la tarjeta.
|
|
20
22
|
*/
|
|
21
|
-
padding?:
|
|
23
|
+
padding?: SpacingsCard;
|
|
22
24
|
/**
|
|
23
25
|
* Dirección de la tarjeta.
|
|
24
26
|
*/
|
|
@@ -2,10 +2,8 @@ import { useCallback } from "react";
|
|
|
2
2
|
import { u as useStepper } from "../useStepper/index.js";
|
|
3
3
|
import { useFormContext } from "react-hook-form";
|
|
4
4
|
import { shallow } from "zustand/shallow";
|
|
5
|
-
import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
|
|
6
5
|
function useStepperActions() {
|
|
7
6
|
const { trigger, clearErrors, getValues, reset } = useFormContext();
|
|
8
|
-
const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
|
|
9
7
|
const {
|
|
10
8
|
nextStep,
|
|
11
9
|
prevStep,
|
|
@@ -43,22 +41,9 @@ function useStepperActions() {
|
|
|
43
41
|
if (fieldsToValidate.length === 0) {
|
|
44
42
|
return true;
|
|
45
43
|
}
|
|
46
|
-
|
|
47
|
-
if (!result) {
|
|
48
|
-
activateFieldsValidation(fieldsToValidate);
|
|
49
|
-
}
|
|
50
|
-
return result;
|
|
44
|
+
return await trigger(fieldsToValidate);
|
|
51
45
|
};
|
|
52
46
|
const success = await nextStep(validateFn, formData);
|
|
53
|
-
if (success) {
|
|
54
|
-
const currentStepData = steps[currentStep - 1];
|
|
55
|
-
const fieldsJustValidated = currentStepData?.validationFields || [];
|
|
56
|
-
if (fieldsJustValidated.length > 0) {
|
|
57
|
-
setTimeout(() => {
|
|
58
|
-
clearAllValidation();
|
|
59
|
-
}, 100);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
47
|
if (success && futureFields.length > 0) {
|
|
63
48
|
clearErrors(futureFields);
|
|
64
49
|
setTimeout(() => {
|
|
@@ -77,16 +62,13 @@ function useStepperActions() {
|
|
|
77
62
|
steps,
|
|
78
63
|
currentStep,
|
|
79
64
|
trigger,
|
|
80
|
-
getValues
|
|
81
|
-
activateFieldsValidation,
|
|
82
|
-
clearAllValidation
|
|
65
|
+
getValues
|
|
83
66
|
]);
|
|
84
67
|
const cancelAction = useCallback(() => {
|
|
85
68
|
reset();
|
|
86
69
|
clearErrors();
|
|
87
|
-
clearAllValidation();
|
|
88
70
|
resetStepper();
|
|
89
|
-
}, [reset, clearErrors,
|
|
71
|
+
}, [reset, clearErrors, resetStepper]);
|
|
90
72
|
return { prevStepAction, nextStepAction, cancelAction };
|
|
91
73
|
}
|
|
92
74
|
export {
|
|
@@ -5,12 +5,10 @@ import { u as useStepper } from "../../hooks/useStepper/index.js";
|
|
|
5
5
|
import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
|
|
6
6
|
import { I as Indicator } from "./subcomponents/Inidicator/index.js";
|
|
7
7
|
import { shallow } from "zustand/shallow";
|
|
8
|
-
import { u as useDynamicValidation } from "../../hooks/useDynamicValidation/index.js";
|
|
9
8
|
import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
|
|
10
9
|
function StepArea() {
|
|
11
10
|
const { trigger, clearErrors } = useFormContext();
|
|
12
11
|
const formValues = useWatch();
|
|
13
|
-
const { activateFieldsValidation } = useDynamicValidation();
|
|
14
12
|
const {
|
|
15
13
|
currentStep,
|
|
16
14
|
steps,
|
|
@@ -66,7 +64,6 @@ function StepArea() {
|
|
|
66
64
|
if (!isValid) {
|
|
67
65
|
setCurrentStep(stepOriginalIndex);
|
|
68
66
|
setStepValidationStatus(stepOriginalIndex, false);
|
|
69
|
-
activateFieldsValidation(step.validationFields || []);
|
|
70
67
|
return;
|
|
71
68
|
}
|
|
72
69
|
setStepValidationStatus(stepOriginalIndex, true);
|
|
@@ -79,7 +76,6 @@ function StepArea() {
|
|
|
79
76
|
const isCurrentValid = await trigger(currentStepData.validationFields);
|
|
80
77
|
if (!isCurrentValid) {
|
|
81
78
|
setStepValidationStatus(currentStepOriginalIndex, false);
|
|
82
|
-
activateFieldsValidation(currentStepData.validationFields || []);
|
|
83
79
|
return;
|
|
84
80
|
}
|
|
85
81
|
setStepValidationStatus(currentStepOriginalIndex, true);
|
|
@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
|
|
|
3
3
|
/**
|
|
4
4
|
* TODO: Documentar
|
|
5
5
|
*/
|
|
6
|
-
export declare function useCustomForm({ validationSchema, values, statusLoad, mode
|
|
6
|
+
export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
|
|
7
7
|
/**
|
|
8
8
|
* TODO: Documentar
|
|
9
9
|
*/
|
|
@@ -6,12 +6,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
|
|
|
6
6
|
import { F as FormProviderRoot } from "./styles.js";
|
|
7
7
|
import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
|
|
8
8
|
const classes = RHFormProviderUtilityClasses();
|
|
9
|
-
function useCustomForm({
|
|
10
|
-
validationSchema,
|
|
11
|
-
values,
|
|
12
|
-
statusLoad,
|
|
13
|
-
mode
|
|
14
|
-
}) {
|
|
9
|
+
function useCustomForm({ validationSchema, values, statusLoad, mode }) {
|
|
15
10
|
const formMethods = useForm({
|
|
16
11
|
resolver: yupResolver(validationSchema),
|
|
17
12
|
defaultValues: values,
|
|
@@ -44,31 +39,11 @@ function useCustomForm({
|
|
|
44
39
|
}
|
|
45
40
|
function FormProviderCustom(props) {
|
|
46
41
|
const { children, onSubmit, className, handleSubmit } = props;
|
|
47
|
-
return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(
|
|
48
|
-
FormProviderRoot,
|
|
49
|
-
{
|
|
50
|
-
className: clsx(classes.root, className),
|
|
51
|
-
onSubmit: handleSubmit(onSubmit),
|
|
52
|
-
children
|
|
53
|
-
}
|
|
54
|
-
) });
|
|
42
|
+
return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
|
|
55
43
|
}
|
|
56
44
|
function RHFormProvider(props) {
|
|
57
|
-
const {
|
|
58
|
-
|
|
59
|
-
onSubmit,
|
|
60
|
-
values,
|
|
61
|
-
validationSchema,
|
|
62
|
-
statusLoad = "ready",
|
|
63
|
-
className,
|
|
64
|
-
mode
|
|
65
|
-
} = props;
|
|
66
|
-
const formMethods = useCustomForm({
|
|
67
|
-
validationSchema,
|
|
68
|
-
statusLoad,
|
|
69
|
-
values,
|
|
70
|
-
mode
|
|
71
|
-
});
|
|
45
|
+
const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
|
|
46
|
+
const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
|
|
72
47
|
return /* @__PURE__ */ jsx(
|
|
73
48
|
FormProviderCustom,
|
|
74
49
|
{
|
package/components/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ function Typography(props) {
|
|
|
18
18
|
children,
|
|
19
19
|
disabled,
|
|
20
20
|
ellipsis = false,
|
|
21
|
+
fontFamily = "Inter",
|
|
21
22
|
...other
|
|
22
23
|
} = props;
|
|
23
24
|
const isSkeleton = useModuleSkeleton();
|
|
@@ -30,7 +31,8 @@ function Typography(props) {
|
|
|
30
31
|
skeletonRows,
|
|
31
32
|
variant,
|
|
32
33
|
skeleton: isSkeleton,
|
|
33
|
-
ellipsis
|
|
34
|
+
ellipsis,
|
|
35
|
+
fontFamily
|
|
34
36
|
};
|
|
35
37
|
return /* @__PURE__ */ jsx(
|
|
36
38
|
StyledMUITypography,
|
|
@@ -11,3 +11,7 @@ export declare const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
|
|
|
11
11
|
* Inventario de clases CSS para el componente Typography.
|
|
12
12
|
*/
|
|
13
13
|
export declare const TYPOGRAPHY_CLASSES: Record<string, string>;
|
|
14
|
+
export declare const TYPOGRAPHY_FONTS: {
|
|
15
|
+
Inter: string;
|
|
16
|
+
Jura: string;
|
|
17
|
+
};
|
|
@@ -7,6 +7,7 @@ import { M4LOverridesStyleRules } from '../../../@types/augmentations';
|
|
|
7
7
|
* Define los colores de tipografía disponibles para el componente.
|
|
8
8
|
*/
|
|
9
9
|
export type TypographyColors = 'text.primary' | 'text.secondary' | 'text.disabled' | string;
|
|
10
|
+
export type TypographyFontsFamily = 'Inter' | 'Jura';
|
|
10
11
|
/**
|
|
11
12
|
* Define la propiedades del componente, se une a las capacidades originales de MUI Typography.
|
|
12
13
|
*/
|
|
@@ -47,6 +48,10 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
|
|
|
47
48
|
* Si se activa, el texto se corta y se muestra un elipsis.
|
|
48
49
|
*/
|
|
49
50
|
ellipsis?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Familia de fuentes a usar para el componente.
|
|
53
|
+
*/
|
|
54
|
+
fontFamily?: TypographyFontsFamily;
|
|
50
55
|
}
|
|
51
56
|
/**
|
|
52
57
|
* Define valores de estado necesarios para estilar el componente.
|
|
@@ -59,6 +64,7 @@ export interface TypographyOwnerState {
|
|
|
59
64
|
skeletonRows: TypographyProps['skeletonRows'];
|
|
60
65
|
skeleton: boolean;
|
|
61
66
|
ellipsis: TypographyProps['ellipsis'];
|
|
67
|
+
fontFamily: TypographyProps['fontFamily'];
|
|
62
68
|
}
|
|
63
69
|
/**
|
|
64
70
|
* Agrupa la lista de slots del componente.
|
package/index.js
CHANGED
|
@@ -18,7 +18,8 @@ import { a as a2, A as A6 } from "./components/areas/contexts/AreasContext/index
|
|
|
18
18
|
import { u } from "./components/areas/hooks/useAreas/index.js";
|
|
19
19
|
import { A as A7, a as a3, L as L2, b as b2, g as g3 } from "./components/areas/dictionary.js";
|
|
20
20
|
import { B } from "./components/BaseModule/BaseModule.js";
|
|
21
|
-
import { C } from "./components/
|
|
21
|
+
import { C } from "./components/Card/Card.js";
|
|
22
|
+
import { C as C2 } from "./components/Chip/Chip.js";
|
|
22
23
|
import { A as A8 } from "./components/commercial/AppBarCommercial/index.js";
|
|
23
24
|
import { H } from "./components/commercial/HamburgerMenu/HamburgerMenu.js";
|
|
24
25
|
import { T } from "./components/commercial/TopBar/TopBar.js";
|
|
@@ -29,32 +30,32 @@ import { A as A11 } from "./components/CommonActions/components/ActionIntro/Acti
|
|
|
29
30
|
import { A as A12 } from "./components/CommonActions/components/ActionFormCancel/ActionFormCancel.js";
|
|
30
31
|
import { A as A13 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
|
|
31
32
|
import { D, d, g as g4 } from "./components/CommonActions/dictionary.js";
|
|
32
|
-
import { C as
|
|
33
|
+
import { C as C3 } from "./components/ContainerFlow/ContainerFlow.js";
|
|
33
34
|
import { D as D2 } from "./components/DataGrid/DataGrid.js";
|
|
34
35
|
import { g as g5 } from "./components/DataGrid/dictionary.js";
|
|
35
36
|
import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
|
|
36
37
|
import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
|
|
37
38
|
import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
|
|
38
|
-
import { C as
|
|
39
|
+
import { C as C4 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
|
|
39
40
|
import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
|
|
40
|
-
import { C as
|
|
41
|
+
import { C as C5 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
|
|
41
42
|
import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
|
|
42
|
-
import { C as
|
|
43
|
+
import { C as C6 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
|
|
43
44
|
import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
|
|
44
|
-
import { C as
|
|
45
|
-
import { C as
|
|
45
|
+
import { C as C7 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
|
|
46
|
+
import { C as C8 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
|
|
46
47
|
import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
|
|
47
|
-
import { C as
|
|
48
|
+
import { C as C9 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
|
|
48
49
|
import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
|
|
49
|
-
import { C as
|
|
50
|
+
import { C as C10 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
|
|
50
51
|
import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
|
|
51
|
-
import { C as
|
|
52
|
+
import { C as C11 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
|
|
52
53
|
import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
|
|
53
|
-
import { C as
|
|
54
|
+
import { C as C12 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
|
|
54
55
|
import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
|
|
55
|
-
import { C as
|
|
56
|
+
import { C as C13 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
|
|
56
57
|
import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
|
|
57
|
-
import { C as
|
|
58
|
+
import { C as C14 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
|
|
58
59
|
import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
|
|
59
60
|
import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
|
|
60
61
|
import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
|
|
@@ -77,7 +78,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
|
|
|
77
78
|
import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
|
|
78
79
|
import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
|
|
79
80
|
import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
|
|
80
|
-
import { C as
|
|
81
|
+
import { C as C15 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
|
|
81
82
|
import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
|
|
82
83
|
import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
|
|
83
84
|
import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
|
|
@@ -87,7 +88,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
|
|
|
87
88
|
import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
|
|
88
89
|
import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
|
|
89
90
|
import { B as B5 } from "./components/mui_extended/Button/Button.js";
|
|
90
|
-
import { C as
|
|
91
|
+
import { C as C16 } from "./components/mui_extended/CheckBox/CheckBox.js";
|
|
91
92
|
import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
|
|
92
93
|
import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
|
|
93
94
|
import { S as S4 } from "./components/mui_extended/Select/Select.js";
|
|
@@ -115,10 +116,10 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
|
|
|
115
116
|
import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
|
|
116
117
|
import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
|
|
117
118
|
import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
|
|
118
|
-
import { C as
|
|
119
|
+
import { C as C17, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
|
|
119
120
|
import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
|
|
120
121
|
import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
|
|
121
|
-
import { C as
|
|
122
|
+
import { C as C18 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
|
|
122
123
|
import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
|
|
123
124
|
import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
|
|
124
125
|
import { g as g18 } from "./components/formatters/dictionary.js";
|
|
@@ -265,23 +266,24 @@ export {
|
|
|
265
266
|
B2 as BoxIcon,
|
|
266
267
|
B3 as Breadcrumbs,
|
|
267
268
|
B5 as Button,
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
C5 as
|
|
276
|
-
C6 as
|
|
277
|
-
C7 as
|
|
278
|
-
C8 as
|
|
279
|
-
C9 as
|
|
280
|
-
C10 as
|
|
281
|
-
C11 as
|
|
282
|
-
C12 as
|
|
283
|
-
|
|
284
|
-
|
|
269
|
+
C as Card,
|
|
270
|
+
C16 as CheckBox,
|
|
271
|
+
C2 as Chip,
|
|
272
|
+
C18 as ChipStatusFormatter,
|
|
273
|
+
C15 as CircularProgress,
|
|
274
|
+
C4 as ColumnBooleanFormatter,
|
|
275
|
+
C14 as ColumnChipStatusFormatter,
|
|
276
|
+
C5 as ColumnConcatenatedValueFormatter,
|
|
277
|
+
C6 as ColumnDateFormatter,
|
|
278
|
+
C7 as ColumnIconFormatter,
|
|
279
|
+
C8 as ColumnInteractiveCheckFormatter,
|
|
280
|
+
C9 as ColumnNestedValueFormatter,
|
|
281
|
+
C10 as ColumnPointsFormatter,
|
|
282
|
+
C11 as ColumnPriceFormatter,
|
|
283
|
+
C12 as ColumnSetCheckFormatter,
|
|
284
|
+
C13 as ColumnUncertaintyFormatter,
|
|
285
|
+
C17 as ConcatenatedFormatter,
|
|
286
|
+
C3 as ContainerFlow,
|
|
285
287
|
b3 as DATAGRID_ROW_HEADER_HEIGHTS,
|
|
286
288
|
a4 as DATAGRID_ROW_HEIGHTS,
|
|
287
289
|
e as DATAGRID_SEMANTIC_WIDTHS,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m4l/components",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.16-BE091825-beta.2",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "M4L Components",
|
|
6
6
|
"lint-staged": {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"@googlemaps/js-api-loader": "^1.16.6",
|
|
12
12
|
"@hookform/resolvers": "2.9.11",
|
|
13
13
|
"@m4l/core": "^2.0.0",
|
|
14
|
-
"@m4l/graphics": "
|
|
14
|
+
"@m4l/graphics": "7.1.4-BE091825-beta.2",
|
|
15
15
|
"@m4l/styles": "^7.0.0",
|
|
16
16
|
"@mui/lab": "5.0.0-alpha.173",
|
|
17
17
|
"@mui/material": "5.16.7",
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Hook que simula validación onChange de campos específicos del Stepper, manteniendo el formulario en modo onSubmit para preservar el rendimiento.
|
|
3
|
-
* @returns Objeto con funciones para manejar la validación dinámica
|
|
4
|
-
*/
|
|
5
|
-
export declare function useDynamicValidation(): {
|
|
6
|
-
activateFieldsValidation: (fields: string[]) => void;
|
|
7
|
-
clearAllValidation: () => void;
|
|
8
|
-
activeFields: string[];
|
|
9
|
-
};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { useState, useRef, useEffect, useCallback } from "react";
|
|
2
|
-
import { useFormContext, useWatch } from "react-hook-form";
|
|
3
|
-
function useDynamicValidation() {
|
|
4
|
-
const { trigger } = useFormContext();
|
|
5
|
-
const [activeFields, setActiveFields] = useState([]);
|
|
6
|
-
const watchValues = useWatch({
|
|
7
|
-
name: activeFields.length > 0 ? activeFields : ["__dummy__"]
|
|
8
|
-
});
|
|
9
|
-
const lastValuesRef = useRef({});
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (activeFields.length === 0) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
const currentValues = activeFields.length === 1 ? { [activeFields[0]]: watchValues } : activeFields.reduce((acc, field, index) => {
|
|
15
|
-
acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
|
|
16
|
-
return acc;
|
|
17
|
-
}, {});
|
|
18
|
-
const changedFields = activeFields.filter((field) => {
|
|
19
|
-
const currentValue = currentValues[field];
|
|
20
|
-
const lastValue = lastValuesRef.current[field];
|
|
21
|
-
const hasChanged = JSON.stringify(currentValue) !== JSON.stringify(lastValue);
|
|
22
|
-
if (hasChanged) {
|
|
23
|
-
lastValuesRef.current[field] = currentValue;
|
|
24
|
-
}
|
|
25
|
-
return hasChanged;
|
|
26
|
-
});
|
|
27
|
-
if (changedFields.length > 0) {
|
|
28
|
-
const timeoutId = setTimeout(() => {
|
|
29
|
-
trigger(changedFields);
|
|
30
|
-
}, 100);
|
|
31
|
-
return () => clearTimeout(timeoutId);
|
|
32
|
-
}
|
|
33
|
-
}, [activeFields, trigger, watchValues]);
|
|
34
|
-
const activateFieldsValidation = useCallback((fields) => {
|
|
35
|
-
setActiveFields((prev) => {
|
|
36
|
-
const newFields = fields.filter((field) => !prev.includes(field));
|
|
37
|
-
return [...prev, ...newFields];
|
|
38
|
-
});
|
|
39
|
-
fields.forEach((field) => {
|
|
40
|
-
if (!lastValuesRef.current.hasOwnProperty(field)) {
|
|
41
|
-
lastValuesRef.current[field] = void 0;
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
}, []);
|
|
45
|
-
const clearAllValidation = useCallback(() => {
|
|
46
|
-
setActiveFields([]);
|
|
47
|
-
lastValuesRef.current = {};
|
|
48
|
-
}, []);
|
|
49
|
-
return {
|
|
50
|
-
activateFieldsValidation,
|
|
51
|
-
clearAllValidation,
|
|
52
|
-
activeFields
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
export {
|
|
56
|
-
useDynamicValidation as u
|
|
57
|
-
};
|