@m4l/components 9.1.129 → 9.1.131
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/Chip/types.d.ts +2 -2
- package/components/DataGrid/formatters/ColumnBooleanFormatter/index.js +2 -1
- package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.d.ts +10 -0
- package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js +65 -0
- package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/index.js +2 -1
- package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/types.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/useColumnConcatenatedValue.d.ts +9 -0
- package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/useColumnConcatenatedValue.js +49 -0
- package/components/DataGrid/formatters/ColumnDateFormatter/index.js +2 -1
- package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.d.ts +14 -0
- package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js +50 -0
- package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.d.ts +12 -0
- package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js +29 -0
- package/components/DataGrid/formatters/ColumnNestedValueFormatter/index.js +1 -1
- package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts +10 -0
- package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js +37 -0
- package/components/DataGrid/formatters/ColumnPointsFormatter/index.js +3 -1
- package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.d.ts +10 -0
- package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js +35 -0
- package/components/DataGrid/formatters/ColumnPriceFormatter/index.js +3 -1
- package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.d.ts +10 -0
- package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js +48 -0
- package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts +11 -0
- package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js +32 -0
- package/components/DataGrid/formatters/ColumnUncertaintyFormatter/index.js +3 -1
- package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts +11 -0
- package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js +43 -0
- package/components/DataGrid/formatters/index.d.ts +9 -0
- package/components/DataGrid/helpers/getColumnKey.d.ts +13 -0
- package/components/DataGrid/helpers/getColumnKey.js +11 -0
- package/components/DataGrid/styles.js +2 -1
- package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +3 -0
- package/components/DataGrid/tests/ColumnsFormatters.test.d.ts +1 -0
- package/components/DataGrid/types.d.ts +1 -0
- package/components/DynamicSort/DynamicSort.d.ts +4 -1
- package/components/DynamicSort/DynamicSort.styles.js +91 -126
- package/components/DynamicSort/constants.d.ts +0 -1
- package/components/DynamicSort/constants.js +0 -1
- package/components/DynamicSort/icons.d.ts +2 -0
- package/components/DynamicSort/icons.js +6 -0
- package/components/DynamicSort/slots/DynamicSortSlots.d.ts +23 -43
- package/components/DynamicSort/slots/DynamicSortSlots.js +30 -57
- package/components/DynamicSort/slots/SlotsEnum.d.ts +2 -9
- package/components/DynamicSort/slots/SlotsEnum.js +1 -8
- package/components/DynamicSort/store/DynamicSortContext.d.ts +3 -3
- package/components/DynamicSort/store/DynamicSortContext.js +10 -4
- package/components/DynamicSort/store/DynamicSortStore.d.ts +1 -177
- package/components/DynamicSort/store/DynamicSortStore.js +10 -1
- package/components/DynamicSort/store/type.d.ts +186 -0
- package/components/DynamicSort/store/useDynamicSortStore.d.ts +2 -2
- package/components/DynamicSort/subcomponents/AppliedSortChip/AppliedSortChip.d.ts +1 -1
- package/components/DynamicSort/subcomponents/AppliedSortChip/AppliedSortChip.js +18 -20
- package/components/DynamicSort/subcomponents/AppliedSortChip/useAppliedSortChip.d.ts +2 -2
- package/components/DynamicSort/subcomponents/AppliedSortChip/useAppliedSortChip.js +4 -4
- package/components/DynamicSort/subcomponents/AppliedSorts/AppliedSorts.d.ts +1 -1
- package/components/DynamicSort/subcomponents/AppliedSorts/AppliedSorts.js +14 -2
- package/components/DynamicSort/subcomponents/AppliedSorts/useAppliedSorts.d.ts +1 -1
- package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.d.ts +1 -1
- package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js +4 -3
- package/components/DynamicSort/subcomponents/DynamicSortBase/useDynamicSortBase.d.ts +2 -1
- package/components/DynamicSort/subcomponents/DynamicSortBase/useDynamicSortBase.js +2 -1
- package/components/DynamicSort/subcomponents/FieldTypes/DataTypeComponent.d.ts +1 -1
- package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.d.ts +8 -8
- package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.js +11 -14
- package/components/DynamicSort/subcomponents/FieldTypes/StringSort/index.js +16 -12
- package/components/DynamicSort/subcomponents/FieldTypes/fieldFactory.d.ts +1 -1
- package/components/DynamicSort/subcomponents/InputSort/InputSort.d.ts +1 -1
- package/components/DynamicSort/subcomponents/InputSort/InputSort.js +8 -10
- package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.js +9 -8
- package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js +8 -6
- package/components/DynamicSort/subcomponents/SortActions/SortActions.js +8 -9
- package/components/DynamicSort/tests/DynamicSort.test.d.ts +1 -0
- package/components/DynamicSort/types.d.ts +9 -2
- package/components/areas/hooks/index.d.ts +1 -0
- package/components/formatters/BooleanFormatter/BooleanFormatter.d.ts +5 -1
- package/components/formatters/BooleanFormatter/BooleanFormatter.js +23 -17
- package/components/formatters/DateFormatter/DateFormatter.d.ts +2 -1
- package/components/formatters/DateFormatter/DateFormatter.js +4 -4
- package/components/formatters/PriceFormatter/PriceFormatter.js +9 -9
- package/components/formatters/index.d.ts +1 -1
- package/index.js +92 -72
- package/package.json +1 -1
- package/vendor.js +3 -3
- package/components/DynamicSort/DynamicSort.stories.d.ts +0 -21
- package/components/DynamicSort/subcomponents/InputSort/InputSortSkeleton.d.ts +0 -5
- package/components/DynamicSort/subcomponents/InputSort/InputSortSkeleton.js +0 -19
- package/components/DynamicSort/subcomponents/SortActions/SortActionsSkeleton.d.ts +0 -5
- package/components/DynamicSort/subcomponents/SortActions/SortActionsSkeleton.js +0 -12
|
@@ -7,7 +7,7 @@ class StringSortHelpers {
|
|
|
7
7
|
return StringSort;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* getDefaulSort obtiene el valor por defecto de un campo de tipo string
|
|
11
11
|
*/
|
|
12
12
|
getDefaultSort(field, fixed) {
|
|
13
13
|
const defaultOperator = field.defaultOperator;
|
|
@@ -25,31 +25,28 @@ class StringSortHelpers {
|
|
|
25
25
|
return defaultSort;
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* getSortFromFormValue obtiene el valor de un campo de tipo string
|
|
29
29
|
*/
|
|
30
30
|
getSortFromFormValue(formSortValue) {
|
|
31
|
-
const operator = formSortValue.formValueOperator
|
|
31
|
+
const operator = formSortValue.formValueOperator;
|
|
32
32
|
return {
|
|
33
33
|
fieldType: "string",
|
|
34
34
|
operator
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
/**
|
|
38
|
-
*
|
|
38
|
+
* getFormValue obtiene el valor de un campo de tipo string
|
|
39
39
|
*/
|
|
40
|
-
getFormValue(field,
|
|
40
|
+
getFormValue(field, _getLabel, sortValue) {
|
|
41
41
|
const sortValueOperator = sortValue ? sortValue : void 0;
|
|
42
42
|
const operator = sortValueOperator ? sortValueOperator.operator : field.defaultOperator ?? "asc";
|
|
43
43
|
return {
|
|
44
44
|
fieldType: "string",
|
|
45
|
-
formValueOperator:
|
|
46
|
-
operator,
|
|
47
|
-
name: getLabel(getDynamicSortDictionary(`operator_${operator}`))
|
|
48
|
-
}
|
|
45
|
+
formValueOperator: operator
|
|
49
46
|
};
|
|
50
47
|
}
|
|
51
48
|
/**
|
|
52
|
-
*
|
|
49
|
+
* getLabels obtiene las etiquetas de un campo de tipo string
|
|
53
50
|
*/
|
|
54
51
|
getLabels(Sort, getLabel, _formatters, _field) {
|
|
55
52
|
const labelOperator = Sort.operator ? getLabel(getDynamicSortDictionary(`operator_${Sort.operator}`)) : "";
|
|
@@ -59,21 +56,21 @@ class StringSortHelpers {
|
|
|
59
56
|
};
|
|
60
57
|
}
|
|
61
58
|
/**
|
|
62
|
-
*
|
|
59
|
+
* getSchema obtiene el esquema de un campo de tipo string
|
|
63
60
|
*/
|
|
64
61
|
getSchema(getLabel) {
|
|
65
62
|
return Yup.object({
|
|
66
|
-
formValueOperator: Yup.
|
|
63
|
+
formValueOperator: Yup.string().required(getLabel(`dynamic_Sort.error_operator_required`))
|
|
67
64
|
});
|
|
68
65
|
}
|
|
69
66
|
/**
|
|
70
|
-
*
|
|
67
|
+
* verifySort verifica si un campo de tipo string es válido
|
|
71
68
|
*/
|
|
72
69
|
verifySort(Sort, _field) {
|
|
73
70
|
if (typeof Sort.operator !== "string") {
|
|
74
71
|
return false;
|
|
75
72
|
}
|
|
76
|
-
if (SORT_OPERATORS.findIndex((f) => f === Sort.
|
|
73
|
+
if (SORT_OPERATORS.findIndex((f) => f === Sort.operator) === -1) {
|
|
77
74
|
return false;
|
|
78
75
|
}
|
|
79
76
|
return typeof Sort.operator === "string";
|
|
@@ -1,32 +1,36 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
|
-
import { useModuleDictionary } from "@m4l/core";
|
|
3
|
+
import { useModuleDictionary, useEnvironment } from "@m4l/core";
|
|
4
|
+
import { a as ascending, d as descending } from "../../../icons.js";
|
|
4
5
|
import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../../dictionary.js";
|
|
5
|
-
import {
|
|
6
|
+
import { u as useDynamicSortBase } from "../../DynamicSortBase/useDynamicSortBase.js";
|
|
7
|
+
import { R as RHFSelect } from "../../../../hook-form/RHFSelect/RHFSelect.js";
|
|
8
|
+
import { I as Icon } from "../../../../Icon/Icon.js";
|
|
6
9
|
function StringSort() {
|
|
7
10
|
const { getLabel } = useModuleDictionary();
|
|
11
|
+
const { host_static_assets, environment_assets } = useEnvironment();
|
|
12
|
+
const { size } = useDynamicSortBase();
|
|
8
13
|
const optionsYesNo = useMemo(
|
|
9
14
|
() => [
|
|
10
15
|
{
|
|
11
|
-
|
|
12
|
-
|
|
16
|
+
id: "asc",
|
|
17
|
+
label: getLabel(getDynamicSortDictionary(`label_ascending`)),
|
|
18
|
+
startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${ascending}` })
|
|
13
19
|
},
|
|
14
20
|
{
|
|
15
|
-
|
|
16
|
-
|
|
21
|
+
id: "desc",
|
|
22
|
+
label: getLabel(getDynamicSortDictionary(`label_descending`)),
|
|
23
|
+
startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${descending}` })
|
|
17
24
|
}
|
|
18
25
|
],
|
|
19
|
-
[getLabel]
|
|
26
|
+
[getLabel, host_static_assets, environment_assets]
|
|
20
27
|
);
|
|
21
28
|
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
|
|
22
|
-
|
|
29
|
+
RHFSelect,
|
|
23
30
|
{
|
|
31
|
+
size,
|
|
24
32
|
name: "formValueOperator",
|
|
25
|
-
type: "text",
|
|
26
|
-
autoComplete: "off",
|
|
27
33
|
options: optionsYesNo,
|
|
28
|
-
getOptionLabel: (option) => option.name,
|
|
29
|
-
isOptionEqualToValue: (option, value) => option.operator === value.operator,
|
|
30
34
|
label: getLabel(getDynamicSortDictionary(DICCTIONARY.input_placeholder))
|
|
31
35
|
}
|
|
32
36
|
) });
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FieldType } from '../../types';
|
|
2
2
|
import { StringSortHelpers } from './StringSort/helpers';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Factory que retorna el helper correspondiente al tipo de campo
|
|
5
5
|
*/
|
|
6
6
|
export declare function fieldFactory(type: FieldType): StringSortHelpers;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { u as useInputSort } from "./useInputSort.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
|
|
4
|
+
import { c as InputSortStyled, d as InputSortIconStyled, e as InputSortInputSkeletonStyled, f as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
|
|
5
5
|
import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
|
|
6
6
|
const InputSort = () => {
|
|
7
7
|
const {
|
|
@@ -13,18 +13,16 @@ const InputSort = () => {
|
|
|
13
13
|
sortFields,
|
|
14
14
|
selectedFieldIndex
|
|
15
15
|
} = useInputSort();
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
/* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, ownerState: {} }),
|
|
21
|
-
/* @__PURE__ */ jsx(
|
|
16
|
+
const { ownerState, size } = useDynamicSortBase();
|
|
17
|
+
return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: { ...ownerState }, children: [
|
|
18
|
+
/* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, size, ownerState: { ...ownerState } }),
|
|
19
|
+
isSkeleton ? /* @__PURE__ */ jsx(InputSortInputSkeletonStyled, { ownerState: { ...ownerState }, variant: "rounded" }) : /* @__PURE__ */ jsx(
|
|
22
20
|
InputSortInputStyled,
|
|
23
21
|
{
|
|
24
22
|
type: "text",
|
|
25
23
|
value: inputData,
|
|
26
24
|
placeholder: inputPlaceHolder,
|
|
27
|
-
ownerState: {},
|
|
25
|
+
ownerState: { ...ownerState },
|
|
28
26
|
...inputHandlersProps
|
|
29
27
|
}
|
|
30
28
|
),
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
|
|
3
|
-
import {
|
|
3
|
+
import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
|
|
4
|
+
import { P as PopoverMenuStyled, g as PopoverMenuItemStyled, h as PopoverMenuItemIconStyled } from "../../slots/DynamicSortSlots.js";
|
|
4
5
|
function PopoverMenuFields(props) {
|
|
5
6
|
const { fields, selectFieldIndex } = props;
|
|
6
7
|
const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
|
|
8
|
+
const { size } = useDynamicSortBase();
|
|
7
9
|
return /* @__PURE__ */ jsx(
|
|
8
10
|
PopoverMenuStyled,
|
|
9
11
|
{
|
|
@@ -16,17 +18,16 @@ function PopoverMenuFields(props) {
|
|
|
16
18
|
onClose: handleClosePopover,
|
|
17
19
|
anchorEl: fnAnchorEl?.(),
|
|
18
20
|
ownerState: {},
|
|
19
|
-
children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */
|
|
21
|
+
children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsx(
|
|
20
22
|
PopoverMenuItemStyled,
|
|
21
23
|
{
|
|
24
|
+
startIcon: /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { size, src: field.urlIcon, ownerState: {} }),
|
|
25
|
+
label: getItemLabel(field),
|
|
22
26
|
dense: true,
|
|
27
|
+
size,
|
|
23
28
|
selected: index === selectFieldIndex,
|
|
24
29
|
onClick: (event) => handleOpenPopUpClickItem(event, field),
|
|
25
|
-
ownerState: {}
|
|
26
|
-
children: [
|
|
27
|
-
/* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { src: field.urlIcon, ownerState: {} }),
|
|
28
|
-
/* @__PURE__ */ jsx(PopoverMenuItemLabelStyled, { ownerState: {}, children: getItemLabel(field) })
|
|
29
|
-
]
|
|
30
|
+
ownerState: {}
|
|
30
31
|
},
|
|
31
32
|
`menu_action_${getItemLabel(field)}`
|
|
32
33
|
))
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { u as
|
|
2
|
+
import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
|
|
3
3
|
import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
|
|
4
|
-
import {
|
|
4
|
+
import { u as usePopoverSort } from "./usePopoverSort.js";
|
|
5
|
+
import { i as PopoverStyled, j as PopoverHeaderStyled, k as PopoverHeaderIconStyled, l as PopoverHeaderTitleStyled, m as PopoverContainerFieldsStyled, n as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
|
|
5
6
|
import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
|
|
6
7
|
import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
|
|
7
8
|
import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
|
|
@@ -20,6 +21,7 @@ function PopoverSort() {
|
|
|
20
21
|
statusLoad,
|
|
21
22
|
canRender
|
|
22
23
|
} = usePopoverSort();
|
|
24
|
+
const { size } = useDynamicSortBase();
|
|
23
25
|
if (!canRender) {
|
|
24
26
|
return null;
|
|
25
27
|
}
|
|
@@ -45,13 +47,13 @@ function PopoverSort() {
|
|
|
45
47
|
statusLoad,
|
|
46
48
|
children: [
|
|
47
49
|
/* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
|
|
48
|
-
field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
|
|
49
|
-
/* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
|
|
50
|
+
field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, size, ownerState: {} }),
|
|
51
|
+
/* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, ownerState: {}, children: labelField })
|
|
50
52
|
] }),
|
|
51
53
|
/* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
|
|
52
54
|
/* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
|
|
53
|
-
/* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
|
|
54
|
-
/* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
|
|
55
|
+
/* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose, skeletonWidth: "68px" }),
|
|
56
|
+
/* @__PURE__ */ jsx(ActionIntro, { size, skeletonWidth: "64px" })
|
|
55
57
|
] })
|
|
56
58
|
]
|
|
57
59
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { u as useSortActions } from "./useSortActions.js";
|
|
3
|
-
import { S as SortActionsSkeleton } from "./SortActionsSkeleton.js";
|
|
4
3
|
import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
|
|
5
|
-
import {
|
|
4
|
+
import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
|
|
5
|
+
import { o as ActionsStyled, p as ActionsClearButtonStyled, q as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
|
|
6
6
|
function SortActions() {
|
|
7
7
|
const {
|
|
8
|
-
isSkeleton,
|
|
9
8
|
sortIconUrl,
|
|
10
9
|
clearIconUrl,
|
|
11
10
|
canShowRemoveAction,
|
|
@@ -14,14 +13,13 @@ function SortActions() {
|
|
|
14
13
|
sortButtonDictionaryTooltip,
|
|
15
14
|
ownerState
|
|
16
15
|
} = useSortActions();
|
|
17
|
-
|
|
18
|
-
return /* @__PURE__ */ jsx(ActionsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(SortActionsSkeleton, {}) });
|
|
19
|
-
}
|
|
16
|
+
const { size } = useDynamicSortBase();
|
|
20
17
|
return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
|
|
21
18
|
canShowRemoveAction && /* @__PURE__ */ jsx(
|
|
22
19
|
ActionsClearButtonStyled,
|
|
23
20
|
{
|
|
24
|
-
|
|
21
|
+
size,
|
|
22
|
+
icon: clearIconUrl,
|
|
25
23
|
onClick: onClickClearSorts,
|
|
26
24
|
dictionaryTooltipId: getDynamicSortDictionary(DICCTIONARY.tooltip_clear_sort),
|
|
27
25
|
ownerState: {}
|
|
@@ -30,7 +28,8 @@ function SortActions() {
|
|
|
30
28
|
/* @__PURE__ */ jsx(
|
|
31
29
|
ActionsSubmitButtonStyled,
|
|
32
30
|
{
|
|
33
|
-
|
|
31
|
+
size,
|
|
32
|
+
icon: sortIconUrl,
|
|
34
33
|
"aria-label": "settings",
|
|
35
34
|
dictionaryTooltipId: sortButtonDictionaryTooltip,
|
|
36
35
|
onClick: onClickSort,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Theme } from '@mui/material/styles';
|
|
2
2
|
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
3
|
+
import { Sizes } from '@m4l/styles';
|
|
3
4
|
import { Maybe } from '@m4l/core';
|
|
4
5
|
import { DYNAMIC_SORT_KEY_COMPONENT } from './constants';
|
|
5
6
|
import { DynamicSortSlots } from './slots';
|
|
@@ -85,11 +86,11 @@ export type FormOperand = FormOperandString;
|
|
|
85
86
|
*/
|
|
86
87
|
export interface FormSortValueBase {
|
|
87
88
|
fieldType: FieldType;
|
|
88
|
-
formValueOperator:
|
|
89
|
+
formValueOperator: StringOperator;
|
|
89
90
|
}
|
|
90
91
|
export interface FormSortValueString extends FormSortValueBase {
|
|
91
92
|
fieldType: 'string';
|
|
92
|
-
formValueOperator:
|
|
93
|
+
formValueOperator: StringOperator;
|
|
93
94
|
}
|
|
94
95
|
/**
|
|
95
96
|
* Valor de un filtro sobrecargado para cada tipo de dato
|
|
@@ -129,6 +130,8 @@ export interface DynamicSortProps {
|
|
|
129
130
|
onChangeSorts?: OnChangeSorts;
|
|
130
131
|
/** Key único para necesario para las pruebas del componente. */
|
|
131
132
|
dataTestId?: string;
|
|
133
|
+
/** Propiedad para las variantes de tamaño */
|
|
134
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
132
135
|
}
|
|
133
136
|
/**
|
|
134
137
|
* Interface que define la variables que se van a usar en clases del componente
|
|
@@ -158,6 +161,10 @@ export interface OwnerState {
|
|
|
158
161
|
* "isEmpty" Define si existen sorts aplicados
|
|
159
162
|
*/
|
|
160
163
|
isEmpty: boolean;
|
|
164
|
+
/**
|
|
165
|
+
* Propiedad para las variantes de tamaño
|
|
166
|
+
*/
|
|
167
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
161
168
|
}
|
|
162
169
|
export interface DynamicSortOwnerState extends DynamicSortProps, OwnerState {
|
|
163
170
|
}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { BooleanFormatterProps } from './types';
|
|
2
|
+
import { BooleanFormatterProps, PresentationType } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* TODO: crearlo aparte como un helper
|
|
5
|
+
*/
|
|
6
|
+
export declare function getFormatBoolean(presentationType: PresentationType, value: boolean | undefined, getLabel: (key: string) => string): string;
|
|
3
7
|
/**
|
|
4
8
|
* BooleanFormatter
|
|
5
9
|
* A component for formatting boolean values (`true` or `false`) into various presentation styles such as text or checkbox.
|
|
@@ -8,29 +8,34 @@ import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
|
|
|
8
8
|
import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
|
|
9
9
|
import { B as BooleanFormatterIconStyled, a as BooleanFormatterRootStyled } from "./slots/BooleanFormatterSlots.js";
|
|
10
10
|
import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
|
|
11
|
+
function getFormatBoolean(presentationType, value = false, getLabel) {
|
|
12
|
+
if (presentationType === "string_yes_no") {
|
|
13
|
+
return value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO);
|
|
14
|
+
}
|
|
15
|
+
if (presentationType === "string_true_false") {
|
|
16
|
+
return value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE);
|
|
17
|
+
}
|
|
18
|
+
return "";
|
|
19
|
+
}
|
|
11
20
|
function BooleanFormatter(props) {
|
|
12
|
-
const { presentationType, value, Component = BooleanFormatterRootStyled, dataTestId, className, componentProps } = props;
|
|
21
|
+
const { presentationType, value = false, Component = BooleanFormatterRootStyled, dataTestId, className, componentProps } = props;
|
|
13
22
|
const { getLabel } = useModuleDictionary();
|
|
14
23
|
const { host_static_assets, environment_assets } = useEnvironment();
|
|
15
|
-
const final_value = value ?? false;
|
|
16
24
|
const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
|
|
17
25
|
const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
|
|
18
|
-
const ownerState = { value
|
|
26
|
+
const ownerState = { value };
|
|
19
27
|
const memoComponent = useMemo(() => {
|
|
20
|
-
if (presentationType === "
|
|
21
|
-
return
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
28
|
+
if (presentationType === "check") {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
BooleanFormatterIconStyled,
|
|
31
|
+
{
|
|
32
|
+
ownerState,
|
|
33
|
+
src: value ? srcCheckTrue : srcCheckFalse
|
|
34
|
+
}
|
|
35
|
+
);
|
|
25
36
|
}
|
|
26
|
-
return
|
|
27
|
-
|
|
28
|
-
{
|
|
29
|
-
ownerState,
|
|
30
|
-
src: final_value ? srcCheckTrue : srcCheckFalse
|
|
31
|
-
}
|
|
32
|
-
);
|
|
33
|
-
}, [final_value, getLabel, presentationType, srcCheckTrue, srcCheckFalse]);
|
|
37
|
+
return getFormatBoolean(presentationType, value, getLabel);
|
|
38
|
+
}, [value, getLabel, presentationType, srcCheckTrue, srcCheckFalse]);
|
|
34
39
|
if (Component === React.Fragment) {
|
|
35
40
|
return memoComponent;
|
|
36
41
|
}
|
|
@@ -47,5 +52,6 @@ function BooleanFormatter(props) {
|
|
|
47
52
|
);
|
|
48
53
|
}
|
|
49
54
|
export {
|
|
50
|
-
BooleanFormatter as B
|
|
55
|
+
BooleanFormatter as B,
|
|
56
|
+
getFormatBoolean as g
|
|
51
57
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { DateFormatter as DateFormatterType } from '@m4l/graphics';
|
|
2
3
|
import { DateFormatterProps, PresentationType } from './types';
|
|
3
4
|
declare type Maybe<T> = T | undefined | null;
|
|
4
5
|
/**
|
|
@@ -8,7 +9,7 @@ declare type Maybe<T> = T | undefined | null;
|
|
|
8
9
|
* @param format Formato
|
|
9
10
|
* @returns string
|
|
10
11
|
*/
|
|
11
|
-
export declare function
|
|
12
|
+
export declare function getFormatDate(presentationType: PresentationType, value: Maybe<Date | string | number>, dateFormatter: DateFormatterType, format?: string): string;
|
|
12
13
|
/**
|
|
13
14
|
* DateFormatter
|
|
14
15
|
* A component for formatting date values into various presentation styles such as text or custom wrappers.
|
|
@@ -7,8 +7,7 @@ import clsx from "clsx";
|
|
|
7
7
|
import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
|
|
8
8
|
import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
|
|
9
9
|
import { D as DATE_FORMATTER_KEY_COMPONENT } from "./constants.js";
|
|
10
|
-
function
|
|
11
|
-
const { dateFormatter } = useFormatter();
|
|
10
|
+
function getFormatDate(presentationType, value, dateFormatter, format) {
|
|
12
11
|
let finalFormat = format || dateFormatter.datetimeFormat;
|
|
13
12
|
let result;
|
|
14
13
|
let resultDate;
|
|
@@ -49,7 +48,8 @@ function DateFormatter(props) {
|
|
|
49
48
|
className,
|
|
50
49
|
componentProps
|
|
51
50
|
} = props;
|
|
52
|
-
const
|
|
51
|
+
const { dateFormatter } = useFormatter();
|
|
52
|
+
const formattedDate = getFormatDate(presentationType, value, dateFormatter, format);
|
|
53
53
|
const memoComponent = useMemo(() => {
|
|
54
54
|
return formattedDate;
|
|
55
55
|
}, [formattedDate]);
|
|
@@ -69,5 +69,5 @@ function DateFormatter(props) {
|
|
|
69
69
|
}
|
|
70
70
|
export {
|
|
71
71
|
DateFormatter as D,
|
|
72
|
-
|
|
72
|
+
getFormatDate as g
|
|
73
73
|
};
|
|
@@ -12,16 +12,16 @@ import { u as useComponentSize } from "../../../hooks/useComponentSize/useCompon
|
|
|
12
12
|
function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
|
|
13
13
|
let result = "";
|
|
14
14
|
const value = getPropertyByString(obProps, fieldValue);
|
|
15
|
-
if (isNaN(Number(value))) {
|
|
16
|
-
return Number("").toLocaleString(navigator.language, {
|
|
17
|
-
currency,
|
|
18
|
-
style: "currency",
|
|
19
|
-
currencyDisplay: "symbol",
|
|
20
|
-
useGrouping: true,
|
|
21
|
-
maximumFractionDigits: decimalDigits
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
15
|
try {
|
|
16
|
+
if (isNaN(Number(value))) {
|
|
17
|
+
return Number("").toLocaleString(navigator.language, {
|
|
18
|
+
currency,
|
|
19
|
+
style: "currency",
|
|
20
|
+
currencyDisplay: "symbol",
|
|
21
|
+
useGrouping: true,
|
|
22
|
+
maximumFractionDigits: decimalDigits
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
25
|
result = Number(value).toLocaleString(navigator.language, {
|
|
26
26
|
currency,
|
|
27
27
|
style: "currency",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { BooleanFormatter } from './BooleanFormatter/BooleanFormatter';
|
|
2
|
-
export {
|
|
2
|
+
export { getFormatDate, DateFormatter } from './DateFormatter/DateFormatter';
|
|
3
3
|
export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter/UncertaintyFormatter';
|
|
4
4
|
export { PointsFormatter, getFormatPoints } from './PointsFormatter/PointsFormatter';
|
|
5
5
|
export { getFormatConcatenated, ConcatenatedFormatter } from './ConcatenatedFormatter/ConcatenatedFormatter';
|