@m4l/components 9.2.62 → 9.2.63-JT14072025.beta.1
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/DataGrid/Datagrid.styles.js +43 -12
- package/components/DataGrid/formatters/ColumnBooleanFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js +2 -3
- package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js +5 -4
- package/components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js +11 -4
- package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnDateFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnDateFormatter/formatter.js +13 -4
- package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnIconFormatter/formatter.d.ts +3 -1
- package/components/DataGrid/formatters/ColumnIconFormatter/formatter.js +7 -43
- package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.d.ts +8 -0
- package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.js +58 -0
- package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.d.ts +7 -0
- package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.js +19 -0
- package/components/DataGrid/formatters/ColumnIconFormatter/types.d.ts +10 -3
- package/components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.d.ts +2 -2
- package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/types.d.ts +2 -2
- package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js +4 -3
- package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.js +13 -5
- package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.js +11 -4
- package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.d.ts +2 -2
- package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js +1 -1
- package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts +1 -1
- package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.d.ts +2 -1
- package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js +15 -6
- package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts +1 -1
- package/components/DataGrid/index.d.ts +1 -1
- package/components/DataGrid/slots/DataGridEnum.d.ts +3 -0
- package/components/DataGrid/slots/DataGridEnum.js +6 -1
- package/components/DataGrid/slots/DataGridSlot.d.ts +6 -0
- package/components/DataGrid/slots/DataGridSlot.js +24 -19
- package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js +1 -1
- package/components/DataGrid/subcomponents/HeaderActions/index.js +1 -1
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.js +2 -1
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js +1 -1
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js +5 -6
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettings/index.js +1 -1
- package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts +2 -2
- package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts +2 -2
- package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js +17 -7
- package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +9 -7
- package/components/DataGrid/subcomponents/Table/index.d.ts +3 -1
- package/components/DataGrid/subcomponents/Table/index.js +40 -10
- package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js +1 -1
- package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.d.ts +2 -2
- package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts +2 -2
- package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js +24 -10
- package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js +2 -2
- package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js +7 -7
- package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts +3 -3
- package/components/DataGrid/subcomponents/editors/TextEditor/index.js +1 -1
- package/components/DataGrid/types.d.ts +8 -6
- package/components/NumberInput/hooks/useNumberInput/useNumberInput.js +0 -2
- package/components/ObjectLogs/ObjectLogs.styles.js +2 -1
- package/components/ObjectLogs/slots/ObjectLogsEnum.d.ts +1 -0
- package/components/ObjectLogs/slots/ObjectLogsEnum.js +1 -0
- package/components/ObjectLogs/slots/ObjectLogsSlots.d.ts +3 -0
- package/components/ObjectLogs/slots/ObjectLogsSlots.js +7 -2
- package/components/areas/contexts/AreasContext/store.js +2 -2
- package/components/formatters/BooleanFormatter/BooleanFormatter.js +7 -4
- package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js +9 -1
- package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.d.ts +2 -1
- package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.js +1 -0
- package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts +3 -0
- package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js +6 -1
- package/components/formatters/BooleanFormatter/types.d.ts +1 -1
- package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js +0 -5
- package/components/mui_extended/MenuItem/MenuItem.js +2 -1
- package/components/mui_extended/MenuItem/types.d.ts +4 -0
- package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js +1 -1
- package/package.json +2 -2
- package/storybook/components/DataGrid/DataGrid.stories.d.ts +8 -0
- package/storybook/components/DataGrid/helpers/icons.d.ts +6 -0
- package/storybook/components/DataGrid/helpers/types.d.ts +14 -2
- package/storybook/components/DataGrid/helpers/useColumns.d.ts +2 -1
- package/storybook/components/DataGrid/helpers/useSeed.d.ts +1 -1
- package/helpers/getFieldValueWithRow.js +0 -10
|
@@ -335,6 +335,7 @@ const dataGridStyles = {
|
|
|
335
335
|
alignItems: "center",
|
|
336
336
|
textOverflow: "inline",
|
|
337
337
|
gridTemplateColumns: "auto",
|
|
338
|
+
padding: "0 8px",
|
|
338
339
|
...getTypographyStyles(
|
|
339
340
|
theme.generalSettings.isMobile,
|
|
340
341
|
ownerState?.size || "medium",
|
|
@@ -400,15 +401,20 @@ const dataGridStyles = {
|
|
|
400
401
|
},
|
|
401
402
|
"& .m4l_icon": {
|
|
402
403
|
height: "100%"
|
|
404
|
+
},
|
|
405
|
+
'&[role="columnheader"]': {
|
|
406
|
+
'&[aria-colindex="1"]': {
|
|
407
|
+
borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
|
|
408
|
+
}
|
|
403
409
|
}
|
|
404
410
|
},
|
|
405
411
|
'& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
|
|
406
412
|
...theme.colorSchemes.finalTheme.typography.bodyDens,
|
|
407
413
|
//ajuste de contenido filtro del DataGrid
|
|
408
414
|
width: "100%",
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
415
|
+
whiteSpace: "nowrap",
|
|
416
|
+
overflow: "hidden",
|
|
417
|
+
textOverflow: "ellipsis",
|
|
412
418
|
...getTypographyStyles(
|
|
413
419
|
theme.generalSettings.isMobile,
|
|
414
420
|
ownerState?.size || "medium",
|
|
@@ -446,6 +452,7 @@ const dataGridStyles = {
|
|
|
446
452
|
textAlign: "start",
|
|
447
453
|
display: "inline",
|
|
448
454
|
justifyContent: "center",
|
|
455
|
+
alignContent: "center",
|
|
449
456
|
alignItems: "center",
|
|
450
457
|
'&:not([role="columnheader"])': {
|
|
451
458
|
"& > div:first-of-type": {
|
|
@@ -466,6 +473,7 @@ const dataGridStyles = {
|
|
|
466
473
|
},
|
|
467
474
|
"& .rdg-cell.rdg-cell-align-right": {
|
|
468
475
|
textAlign: "right",
|
|
476
|
+
alignContent: "center",
|
|
469
477
|
'&:not([role="columnheader"])': {
|
|
470
478
|
"& > div:first-of-type": {
|
|
471
479
|
marginLeft: "auto"
|
|
@@ -474,17 +482,14 @@ const dataGridStyles = {
|
|
|
474
482
|
}
|
|
475
483
|
},
|
|
476
484
|
'& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
|
|
477
|
-
textAlign: "start"
|
|
478
|
-
display: "inline",
|
|
479
|
-
justifyContent: "center",
|
|
480
|
-
alignItems: "center"
|
|
485
|
+
textAlign: "start"
|
|
481
486
|
},
|
|
482
487
|
'& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
|
|
483
|
-
textAlign: "center"
|
|
484
|
-
alignContent: "center"
|
|
488
|
+
textAlign: "center"
|
|
485
489
|
},
|
|
486
490
|
'& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
|
|
487
|
-
textAlign: "right"
|
|
491
|
+
textAlign: "right",
|
|
492
|
+
paddingRight: theme.vars.size.baseSpacings.sp3
|
|
488
493
|
},
|
|
489
494
|
// Estilado de la ultima celda congelada
|
|
490
495
|
"& .rdg-row .rdg-cell-frozen-last:after": {
|
|
@@ -577,6 +582,7 @@ const dataGridStyles = {
|
|
|
577
582
|
alignItems: "center",
|
|
578
583
|
backgroundColor: theme.vars.palette.default.enabled,
|
|
579
584
|
padding: theme.vars.size.baseSpacings.sp1,
|
|
585
|
+
marginBottom: theme.vars.size.baseSpacings.sp2,
|
|
580
586
|
gap: theme.vars.size.baseSpacings.sp1,
|
|
581
587
|
borderRadius: theme.vars.size.borderRadius.r1,
|
|
582
588
|
...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
|
|
@@ -665,11 +671,36 @@ const dataGridStyles = {
|
|
|
665
671
|
/**
|
|
666
672
|
* Estilos para el contenedor del boton de acciones del header
|
|
667
673
|
*/
|
|
668
|
-
buttonHeaderActions: () => ({
|
|
674
|
+
buttonHeaderActions: ({ theme }) => ({
|
|
669
675
|
display: "flex",
|
|
670
676
|
alignItems: "center",
|
|
671
677
|
justifyContent: "space-between",
|
|
672
|
-
width: "100%"
|
|
678
|
+
width: "100%",
|
|
679
|
+
cursor: "pointer",
|
|
680
|
+
height: "100%",
|
|
681
|
+
"> span": {
|
|
682
|
+
display: "flex",
|
|
683
|
+
alignItems: "center",
|
|
684
|
+
justifyContent: "space-between",
|
|
685
|
+
width: "100%",
|
|
686
|
+
"& svg": {
|
|
687
|
+
width: "8px",
|
|
688
|
+
height: "8px",
|
|
689
|
+
color: theme.vars.palette.chips.default.contained.backgroundColorTone
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
}),
|
|
693
|
+
/**
|
|
694
|
+
* Estilos para el formatter de iconos
|
|
695
|
+
*/
|
|
696
|
+
columnIconFormatter: ({ theme }) => ({
|
|
697
|
+
display: "flex",
|
|
698
|
+
alignItems: "center",
|
|
699
|
+
justifyContent: "center",
|
|
700
|
+
gap: theme.vars.size.baseSpacings.sp2,
|
|
701
|
+
minWidth: "max-content",
|
|
702
|
+
overflow: "visible",
|
|
703
|
+
flexWrap: "nowrap"
|
|
673
704
|
})
|
|
674
705
|
};
|
|
675
706
|
export {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColumnBooleanFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Función para formatear un booleano en una columna de un DataGrid
|
|
4
5
|
*/
|
|
5
|
-
export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (
|
|
6
|
+
export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getPropertyByString } from "@m4l/core";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
|
|
5
4
|
import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
|
|
6
5
|
function ColumnBooleanFormatter(props) {
|
|
7
6
|
const { fieldValue, presentationType, Component = React.Fragment } = props;
|
|
8
|
-
return (
|
|
9
|
-
const valueMaybeString = getPropertyByString(
|
|
7
|
+
return (renderProps) => {
|
|
8
|
+
const valueMaybeString = getPropertyByString(renderProps.row, fieldValue);
|
|
10
9
|
let fixedValue;
|
|
11
10
|
if (typeof valueMaybeString === "boolean") {
|
|
12
11
|
fixedValue = valueMaybeString;
|
|
@@ -3,7 +3,7 @@ import { ColumnBooleanFormatterProps } from './types';
|
|
|
3
3
|
* Hook function that return the formatter, filter and customSort for a boolean column
|
|
4
4
|
*/
|
|
5
5
|
export declare const useColumnBoolean: <TRow>(props: ColumnBooleanFormatterProps<TRow>) => {
|
|
6
|
-
formatter: (
|
|
6
|
+
formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
customFilter: (row: TRow, value: string) => boolean;
|
|
8
8
|
customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
|
|
9
9
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ColumnChipStatusFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Formatter para mostrar un chip de estado en una columna de un DataGrid
|
|
4
5
|
* @param props - Propiedades del formatter
|
|
5
6
|
* @returns Componente ChipStatusFormatter
|
|
6
7
|
*/
|
|
7
|
-
export declare const ColumnChipStatusFormatter: (props: ColumnChipStatusFormatterProps<
|
|
8
|
+
export declare const ColumnChipStatusFormatter: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getPropertyByString } from "@m4l/core";
|
|
3
|
-
import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
|
|
4
3
|
import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
|
|
5
4
|
import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
|
|
6
5
|
import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
|
|
7
6
|
const ColumnChipStatusFormatter = (props) => {
|
|
8
7
|
const { fieldStatus, fieldLabel, statusesColors, fallbackColor } = props;
|
|
9
|
-
return (
|
|
10
|
-
const
|
|
11
|
-
const
|
|
8
|
+
return (renderProps) => {
|
|
9
|
+
const cleanFieldStatus = fieldStatus.toString().startsWith("row.") ? fieldStatus.toString().substring(4) : fieldStatus.toString();
|
|
10
|
+
const cleanFieldLabel = typeof fieldLabel === "string" && fieldLabel.startsWith("row.") ? fieldLabel.substring(4) : fieldLabel;
|
|
11
|
+
const status = getNullGuard(getPropertyByString(renderProps.row, cleanFieldStatus));
|
|
12
|
+
const label = typeof cleanFieldLabel === "string" ? getNullGuard(getPropertyByString(renderProps.row, cleanFieldLabel)) : typeof fieldLabel === "function" ? fieldLabel(renderProps.row, status) : "";
|
|
12
13
|
return /* @__PURE__ */ jsx(
|
|
13
14
|
ChipStatusFormatter,
|
|
14
15
|
{
|
|
@@ -3,7 +3,7 @@ import { ColumnChipStatusFormatterProps } from './types';
|
|
|
3
3
|
* Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
|
|
4
4
|
*/
|
|
5
5
|
export declare const useColumnChipStatus: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => {
|
|
6
|
-
formatter: (
|
|
6
|
+
formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
customFilter: (row: TRow, value: string | number) => boolean;
|
|
8
8
|
customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
|
|
9
9
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColumnConcatenatedValuesFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Function to DataGrid that concatenates an array of strings
|
|
4
5
|
*/
|
|
5
|
-
export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (
|
|
6
|
+
export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getPropertyByString } from "@m4l/core";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
|
|
5
4
|
import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
|
|
6
5
|
function ColumnConcatenatedValuesFormatter(props) {
|
|
7
6
|
const { fieldValue, fieldSeparator, Component = React.Fragment } = props;
|
|
8
|
-
return (
|
|
7
|
+
return (renderProps) => {
|
|
8
|
+
const rowData = renderProps.row;
|
|
9
9
|
const values = fieldValue.map((element) => {
|
|
10
|
-
const valueMaybeString = getPropertyByString(
|
|
10
|
+
const valueMaybeString = getPropertyByString(rowData, element);
|
|
11
11
|
let fixedValue;
|
|
12
12
|
if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
|
|
13
13
|
fixedValue = valueMaybeString.toString();
|
|
@@ -16,7 +16,14 @@ function ColumnConcatenatedValuesFormatter(props) {
|
|
|
16
16
|
}
|
|
17
17
|
return fixedValue;
|
|
18
18
|
});
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
19
|
+
return /* @__PURE__ */ jsx(
|
|
20
|
+
ConcatenatedFormatter,
|
|
21
|
+
{
|
|
22
|
+
values,
|
|
23
|
+
separator: fieldSeparator,
|
|
24
|
+
Component
|
|
25
|
+
}
|
|
26
|
+
);
|
|
20
27
|
};
|
|
21
28
|
}
|
|
22
29
|
export {
|
|
@@ -3,7 +3,7 @@ import { ColumnConcatenatedValuesFormatterProps } from './types';
|
|
|
3
3
|
* Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
|
|
4
4
|
*/
|
|
5
5
|
export declare const useColumnConcatenatedValues: <TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>) => {
|
|
6
|
-
formatter: (
|
|
6
|
+
formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
customFilter: (row: TRow, value: string) => boolean;
|
|
8
8
|
customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
|
|
9
9
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColumnDateFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Function to format a date in a column of a DataGrid
|
|
4
5
|
*/
|
|
5
|
-
export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (
|
|
6
|
+
export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,19 +1,28 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getPropertyByString } from "@m4l/core";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
|
|
5
4
|
import { D as DateFormatter } from "../../../formatters/DateFormatter/DateFormatter.js";
|
|
6
5
|
function ColumnDateFormatter(props) {
|
|
7
6
|
const { fieldValue, presentationType, Component = React.Fragment } = props;
|
|
8
|
-
return (
|
|
9
|
-
const valueMaybeDateStringNumber = getPropertyByString(
|
|
7
|
+
return (formatterProps) => {
|
|
8
|
+
const valueMaybeDateStringNumber = getPropertyByString(
|
|
9
|
+
formatterProps.row,
|
|
10
|
+
fieldValue
|
|
11
|
+
);
|
|
10
12
|
let fixedValue;
|
|
11
13
|
if (typeof valueMaybeDateStringNumber === "string" || typeof valueMaybeDateStringNumber === "number" || valueMaybeDateStringNumber instanceof Date) {
|
|
12
14
|
fixedValue = valueMaybeDateStringNumber;
|
|
13
15
|
} else {
|
|
14
16
|
fixedValue = "";
|
|
15
17
|
}
|
|
16
|
-
return /* @__PURE__ */ jsx(
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
DateFormatter,
|
|
20
|
+
{
|
|
21
|
+
presentationType,
|
|
22
|
+
value: fixedValue,
|
|
23
|
+
Component
|
|
24
|
+
}
|
|
25
|
+
);
|
|
17
26
|
};
|
|
18
27
|
}
|
|
19
28
|
export {
|
|
@@ -8,7 +8,7 @@ export declare const useCustomDateFilter: <TRow>(props: ColumnDateFormatterProps
|
|
|
8
8
|
* customFilter and customSort of a date column
|
|
9
9
|
*/
|
|
10
10
|
export declare const useColumnDate: <TRow>(props: ColumnDateFormatterProps<TRow>) => {
|
|
11
|
-
formatter: (
|
|
11
|
+
formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
customFilter: (row: TRow, value: string) => boolean;
|
|
13
13
|
customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
|
|
14
14
|
};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { ColumnIconFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Function to format an icon in a column of a DataGrid
|
|
5
|
+
* @template TRow - Tipo de datos de la fila
|
|
4
6
|
*/
|
|
5
|
-
export declare function ColumnIconFormatter(props: ColumnIconFormatterProps): (
|
|
7
|
+
export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,49 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import { C as COLUMN_ICON_KEY_COMPONENT } from "./constants.js";
|
|
4
|
-
import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
|
|
5
|
-
import { I as IconStyled } from "../../../ObjectLogs/slots/ObjectLogsSlots.js";
|
|
1
|
+
import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
|
|
2
|
+
import { r as renderIcon } from "./helpers/renderIcon.js";
|
|
6
3
|
function ColumnIconFormatter(props) {
|
|
7
4
|
const { getIconProps } = props;
|
|
8
|
-
return (
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
tooltip,
|
|
13
|
-
dataTestId,
|
|
14
|
-
Component,
|
|
15
|
-
componentProps
|
|
16
|
-
} = getIconProps(rowData);
|
|
17
|
-
const iconStyle = onClick ? { style: { cursor: "pointer" } } : {};
|
|
18
|
-
if (Component && Component !== React.Fragment) {
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
Component,
|
|
21
|
-
{
|
|
22
|
-
...componentProps,
|
|
23
|
-
...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
|
|
24
|
-
children: /* @__PURE__ */ jsx(
|
|
25
|
-
IconStyled,
|
|
26
|
-
{
|
|
27
|
-
src: iconUrl,
|
|
28
|
-
onClick,
|
|
29
|
-
tooltipContent: tooltip,
|
|
30
|
-
instaceDataTestId: dataTestId,
|
|
31
|
-
...iconStyle
|
|
32
|
-
}
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
);
|
|
5
|
+
return (renderProps) => {
|
|
6
|
+
const iconProps = getIconProps(renderProps.row);
|
|
7
|
+
if (Array.isArray(iconProps)) {
|
|
8
|
+
return renderMultipleIcons(iconProps);
|
|
36
9
|
}
|
|
37
|
-
return
|
|
38
|
-
IconStyled,
|
|
39
|
-
{
|
|
40
|
-
src: iconUrl,
|
|
41
|
-
onClick,
|
|
42
|
-
tooltipContent: tooltip,
|
|
43
|
-
instaceDataTestId: dataTestId,
|
|
44
|
-
...iconStyle
|
|
45
|
-
}
|
|
46
|
-
);
|
|
10
|
+
return renderIcon(iconProps);
|
|
47
11
|
};
|
|
48
12
|
}
|
|
49
13
|
export {
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ColumnIconResponse } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Helper que renderiza un único icono
|
|
4
|
+
* @param iconConfig - Configuración del icono
|
|
5
|
+
* @param key - Clave opcional para listas
|
|
6
|
+
* @returns Componente de icono renderizado
|
|
7
|
+
*/
|
|
8
|
+
export declare function renderIcon(iconConfig: ColumnIconResponse, key?: number): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { C as COLUMN_ICON_KEY_COMPONENT } from "../constants.js";
|
|
4
|
+
import { g as getPropDataTestId } from "../../../../../test/getNameDataTestId.js";
|
|
5
|
+
import { I as IconClickeableStyled, a as IconStyled } from "../../../../ObjectLogs/slots/ObjectLogsSlots.js";
|
|
6
|
+
function renderIcon(iconConfig, key) {
|
|
7
|
+
const {
|
|
8
|
+
iconUrl,
|
|
9
|
+
onClick,
|
|
10
|
+
tooltip,
|
|
11
|
+
dataTestId,
|
|
12
|
+
Component,
|
|
13
|
+
componentProps,
|
|
14
|
+
color,
|
|
15
|
+
visible,
|
|
16
|
+
size
|
|
17
|
+
} = iconConfig;
|
|
18
|
+
if (visible === false) {
|
|
19
|
+
return /* @__PURE__ */ jsx(Fragment, { children: "-" });
|
|
20
|
+
}
|
|
21
|
+
const IconComponent = onClick ? IconClickeableStyled : IconStyled;
|
|
22
|
+
if (Component && Component !== React.Fragment) {
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
Component,
|
|
25
|
+
{
|
|
26
|
+
...componentProps,
|
|
27
|
+
...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
|
|
28
|
+
children: /* @__PURE__ */ jsx(
|
|
29
|
+
IconComponent,
|
|
30
|
+
{
|
|
31
|
+
src: iconUrl,
|
|
32
|
+
...onClick && { onClick },
|
|
33
|
+
tooltipContent: tooltip,
|
|
34
|
+
instaceDataTestId: dataTestId,
|
|
35
|
+
color,
|
|
36
|
+
size
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
},
|
|
40
|
+
key
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
IconComponent,
|
|
45
|
+
{
|
|
46
|
+
src: iconUrl,
|
|
47
|
+
...onClick && { onClick },
|
|
48
|
+
tooltipContent: tooltip,
|
|
49
|
+
instaceDataTestId: dataTestId,
|
|
50
|
+
color,
|
|
51
|
+
size
|
|
52
|
+
},
|
|
53
|
+
key
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
export {
|
|
57
|
+
renderIcon as r
|
|
58
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ColumnIconResponse } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Helper que renderiza múltiples iconos
|
|
4
|
+
* @param iconsConfig - Array de configuraciones de iconos
|
|
5
|
+
* @returns Componente contenedor con múltiples iconos
|
|
6
|
+
*/
|
|
7
|
+
export declare function renderMultipleIcons(iconsConfig: ColumnIconResponse[]): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { a as ColumnIconFormatterStyled } from "../../../slots/DataGridSlot.js";
|
|
3
|
+
import { r as renderIcon } from "./renderIcon.js";
|
|
4
|
+
function renderMultipleIcons(iconsConfig) {
|
|
5
|
+
if (!iconsConfig || iconsConfig.length === 0) {
|
|
6
|
+
return /* @__PURE__ */ jsx(Fragment, { children: "-" });
|
|
7
|
+
}
|
|
8
|
+
const visibleIcons = iconsConfig.filter((icon) => icon.visible !== false);
|
|
9
|
+
if (visibleIcons.length === 0) {
|
|
10
|
+
return /* @__PURE__ */ jsx(Fragment, { children: "-" });
|
|
11
|
+
}
|
|
12
|
+
if (visibleIcons.length === 1) {
|
|
13
|
+
return renderIcon(visibleIcons[0]);
|
|
14
|
+
}
|
|
15
|
+
return /* @__PURE__ */ jsx(ColumnIconFormatterStyled, { children: visibleIcons.map((iconConfig, index) => renderIcon(iconConfig, index)) });
|
|
16
|
+
}
|
|
17
|
+
export {
|
|
18
|
+
renderMultipleIcons as r
|
|
19
|
+
};
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { DeepKeyOf } from '../../../../utils/types';
|
|
3
|
+
import { Theme } from '@mui/material';
|
|
4
|
+
export type IconColorDeep = DeepKeyOf<Theme['vars']['palette']> | string;
|
|
1
5
|
export type ColumnIconResponse = {
|
|
2
6
|
iconUrl: string;
|
|
3
7
|
tooltip?: string;
|
|
4
8
|
onClick?: () => void;
|
|
5
9
|
Component?: React.ElementType;
|
|
6
10
|
dataTestId?: string;
|
|
7
|
-
componentProps?: React.ComponentPropsWithoutRef<
|
|
11
|
+
componentProps?: React.ComponentPropsWithoutRef<React.ElementType>;
|
|
12
|
+
visible?: boolean;
|
|
13
|
+
color?: IconColorDeep;
|
|
14
|
+
size?: 'small' | 'medium';
|
|
8
15
|
};
|
|
9
|
-
export interface ColumnIconFormatterProps {
|
|
10
|
-
getIconProps: (obRowProps:
|
|
16
|
+
export interface ColumnIconFormatterProps<TRow> {
|
|
17
|
+
getIconProps: (obRowProps: TRow) => ColumnIconResponse | ColumnIconResponse[];
|
|
11
18
|
}
|
|
@@ -3,6 +3,6 @@ import { ColumnIconFormatterProps } from './types';
|
|
|
3
3
|
* Función helper que retorna
|
|
4
4
|
* el formatter de la columna
|
|
5
5
|
*/
|
|
6
|
-
export declare const useColumnIcon: (props: ColumnIconFormatterProps) => {
|
|
7
|
-
formatter: (
|
|
6
|
+
export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<TRow>) => {
|
|
7
|
+
formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export type ColumnInteractiveCheckFormatterProps<Row> =
|
|
1
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
|
+
export type ColumnInteractiveCheckFormatterProps<Row> = RenderCellProps<Row>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColumnNestedValueFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Function to format a nested value in a column of a DataGrid
|
|
4
5
|
*/
|
|
5
|
-
export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (
|
|
6
|
+
export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getPropertyByString } from "@m4l/core";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
|
|
5
4
|
import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
|
|
6
5
|
function ColumnNestedValueFormatter(props) {
|
|
7
6
|
const { fieldValue, Component = React.Fragment } = props;
|
|
8
|
-
return (
|
|
9
|
-
const property = getNullGuard(
|
|
7
|
+
return (formatterProps) => {
|
|
8
|
+
const property = getNullGuard(
|
|
9
|
+
getPropertyByString(formatterProps.row, fieldValue)
|
|
10
|
+
);
|
|
10
11
|
const value = typeof property === "object" ? JSON.stringify(property) : property;
|
|
11
12
|
return /* @__PURE__ */ jsx(Component, { children: value });
|
|
12
13
|
};
|
|
@@ -4,7 +4,7 @@ import { ColumnNestedValueFormatterProps } from './types';
|
|
|
4
4
|
* of the column for ColumnNestedValueFormatter.
|
|
5
5
|
*/
|
|
6
6
|
export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
|
|
7
|
-
formatter: (
|
|
7
|
+
formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
customFilter: (row: TRow, value: string) => any;
|
|
9
9
|
customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
|
|
10
10
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColumnPointsFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Formatter for column points in DataGrid
|
|
4
5
|
*/
|
|
5
|
-
export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (
|
|
6
|
+
export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { P as PointsFormatter } from "../../../formatters/PointsFormatter/PointsFormatter.js";
|
|
4
|
-
import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
|
|
5
4
|
function ColumnPointsFormatter(props) {
|
|
6
5
|
const { Component = React.Fragment } = props;
|
|
7
|
-
const fieldValue =
|
|
8
|
-
const fieldUnit =
|
|
9
|
-
return (
|
|
10
|
-
return /* @__PURE__ */ jsx(
|
|
6
|
+
const fieldValue = props.fieldValue;
|
|
7
|
+
const fieldUnit = props.fieldUnit;
|
|
8
|
+
return (formatterProps) => {
|
|
9
|
+
return /* @__PURE__ */ jsx(
|
|
10
|
+
PointsFormatter,
|
|
11
|
+
{
|
|
12
|
+
obProps: formatterProps.row,
|
|
13
|
+
...props,
|
|
14
|
+
fieldValue,
|
|
15
|
+
fieldUnit,
|
|
16
|
+
Component
|
|
17
|
+
}
|
|
18
|
+
);
|
|
11
19
|
};
|
|
12
20
|
}
|
|
13
21
|
export {
|
|
@@ -4,7 +4,7 @@ import { ColumnPointsFormatterProps } from './types';
|
|
|
4
4
|
* return formatter, customFilter and customSort.
|
|
5
5
|
*/
|
|
6
6
|
export declare const useColumnPoints: <TRow>(props: ColumnPointsFormatterProps<TRow>) => {
|
|
7
|
-
formatter: (
|
|
7
|
+
formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
customFilter: (row: TRow, value: string) => boolean;
|
|
9
9
|
customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
|
|
10
10
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColumnPriceFormatterProps } from './types';
|
|
2
|
+
import { RenderCellProps } from 'react-data-grid';
|
|
2
3
|
/**
|
|
3
4
|
* Formatter for column price in DataGrid
|
|
4
5
|
*/
|
|
5
|
-
export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (
|
|
6
|
+
export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { P as PriceFormatter } from "../../../formatters/PriceFormatter/PriceFormatter.js";
|
|
4
|
-
import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
|
|
5
4
|
function ColumnPriceFormatter(props) {
|
|
6
5
|
const { Component = React.Fragment } = props;
|
|
7
|
-
const fieldValue =
|
|
8
|
-
return (
|
|
9
|
-
return /* @__PURE__ */ jsx(
|
|
6
|
+
const fieldValue = props.fieldValue;
|
|
7
|
+
return (formatterProps) => {
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
PriceFormatter,
|
|
10
|
+
{
|
|
11
|
+
obProps: formatterProps.row,
|
|
12
|
+
...props,
|
|
13
|
+
fieldValue,
|
|
14
|
+
Component
|
|
15
|
+
}
|
|
16
|
+
);
|
|
10
17
|
};
|
|
11
18
|
}
|
|
12
19
|
export {
|
|
@@ -4,7 +4,7 @@ import { ColumnPriceFormatterProps } from './types';
|
|
|
4
4
|
* Returns formatter, customFilter and customSort.
|
|
5
5
|
*/
|
|
6
6
|
export declare const useColumnPrice: <TRow>(props: ColumnPriceFormatterProps<TRow>) => {
|
|
7
|
-
formatter: (
|
|
7
|
+
formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
customFilter: (row: TRow, value: string) => boolean;
|
|
9
9
|
customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
|
|
10
10
|
};
|