@m4l/components 9.2.60 → 9.2.61
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.js +17 -3
- package/components/DataGrid/Datagrid.styles.js +72 -20
- package/components/DataGrid/constants.d.ts +2 -0
- package/components/DataGrid/constants.js +7 -3
- package/components/DataGrid/contexts/DataGridContext/index.js +77 -30
- package/components/DataGrid/contexts/DataGridContext/types.d.ts +5 -2
- package/components/DataGrid/dictionary.d.ts +8 -0
- package/components/DataGrid/dictionary.js +26 -17
- package/components/DataGrid/icons.d.ts +7 -0
- package/components/DataGrid/icons.js +8 -1
- package/components/DataGrid/slots/DataGridEnum.d.ts +7 -1
- package/components/DataGrid/slots/DataGridEnum.js +6 -0
- package/components/DataGrid/slots/DataGridSlot.d.ts +6 -0
- package/components/DataGrid/slots/DataGridSlot.js +35 -5
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Filter/index.js +9 -1
- package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts +3 -1
- package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.js +9 -2
- package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts +6 -0
- package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js +262 -0
- package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.d.ts +6 -4
- package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +35 -20
- package/components/DataGrid/subcomponents/Table/index.js +97 -34
- package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js +1 -1
- package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts +1 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js +79 -4
- package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.d.ts +5 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js +146 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.d.ts +1 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.js +1 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/types.d.ts +131 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js +1 -1
- package/components/DataGrid/subcomponents/editors/TextEditor/index.js +1 -1
- package/components/DataGrid/tests/HeaderRenderClick.test.d.ts +1 -0
- package/components/DataGrid/tests/useHeaderMenuActions.test.d.ts +1 -0
- package/components/DataGrid/types.d.ts +53 -0
- package/components/DynamicFilter/store/DynamicFilterContext.js +63 -23
- package/components/DynamicFilter/subcomponents/PopoverFilter/usePopoverFilter.d.ts +3 -3
- package/components/DynamicFilter/types.d.ts +3 -0
- package/components/DynamicSort/DynamicSort.js +10 -6
- package/components/DynamicSort/store/DynamicSortContext.js +96 -67
- package/components/DynamicSort/store/DynamicSortStore.js +53 -4
- package/components/DynamicSort/store/types.d.ts +11 -0
- package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.d.ts +3 -3
- package/components/DynamicSort/types.d.ts +4 -0
- package/components/NumberInput/hooks/useNumberInput/useNumberInput.js +0 -2
- package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js +0 -5
- package/components/hook-form/RHFormContext/index.d.ts +1 -1
- package/components/mui_extended/CheckBox/CheckBox.styles.js +2 -1
- package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.d.ts +3 -0
- package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js +334 -88
- package/index.js +7 -7
- package/package.json +1 -1
- package/storybook/components/DataGrid/DataGrid.stories.d.ts +22 -0
- package/storybook/components/DataGrid/MswHandles.d.ts +1 -0
- package/storybook/components/DataGrid/helpers/filterFieldsSeedData.d.ts +5 -0
- package/storybook/components/DataGrid/helpers/getRows.d.ts +4 -0
- package/storybook/components/DataGrid/helpers/getRowsWithBackendSimulation.d.ts +9 -0
- package/storybook/components/DataGrid/helpers/sortsSeedData.d.ts +5 -0
- package/storybook/components/DataGrid/helpers/types.d.ts +1 -0
- package/storybook/components/DataGrid/helpers/useSeed.d.ts +3 -0
- package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts +2 -0
- package/storybook/components/ObjectLogs/ObjectLogs.stories.d.ts +2 -2
|
@@ -5,17 +5,31 @@ import { useDrag, useDrop } from "react-dnd";
|
|
|
5
5
|
import { HeaderRenderer } from "react-data-grid";
|
|
6
6
|
import { u as useFocusRef } from "../hooks/useFocusRef.js";
|
|
7
7
|
import { u as useFilters } from "../../../hooks/useFilters.js";
|
|
8
|
-
import { m as
|
|
8
|
+
import { N as NameColumnIconStyled, m as NameColumnStyled, I as IconColumnStyled, n as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, o as DraggableWrapperInputBaseStyled, p as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
|
|
9
9
|
import { p as pathIcons } from "../../../icons.js";
|
|
10
10
|
import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
|
|
11
|
+
import { I as Icon } from "../../../../Icon/Icon.js";
|
|
11
12
|
function DraggableHeaderRenderer(props) {
|
|
12
|
-
const {
|
|
13
|
+
const {
|
|
14
|
+
onColumnsReorder,
|
|
15
|
+
column,
|
|
16
|
+
isCellSelected,
|
|
17
|
+
openPopover,
|
|
18
|
+
onSort,
|
|
19
|
+
...others
|
|
20
|
+
} = props;
|
|
13
21
|
const { ref, tabIndex } = useFocusRef(isCellSelected);
|
|
14
22
|
const { getLabel } = useModuleDictionary();
|
|
15
|
-
const { size, classes } = useDataGrid();
|
|
23
|
+
const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
|
|
16
24
|
const { host_static_assets, environment_assets } = useEnvironment();
|
|
17
25
|
const { activeFilters, filters, onChangeFilter } = useFilters();
|
|
18
26
|
const [filter, setFilter] = useState(filters?.get(column.key) || "");
|
|
27
|
+
const currentExternalSort = externalSortSettings?.sortsApplied?.find(
|
|
28
|
+
(s) => s.columnKey === column.key
|
|
29
|
+
);
|
|
30
|
+
const currentExternalFilter = externalFilterSettings?.filtersApplied?.find(
|
|
31
|
+
(f) => f.columnKey === column.key
|
|
32
|
+
);
|
|
19
33
|
const [{ isDragging }, drag] = useDrag({
|
|
20
34
|
type: "COLUMN_DRAG",
|
|
21
35
|
item: { key: column.key },
|
|
@@ -44,6 +58,39 @@ function DraggableHeaderRenderer(props) {
|
|
|
44
58
|
}
|
|
45
59
|
setFilter(e.target.value);
|
|
46
60
|
};
|
|
61
|
+
const getSortIcon = (direction) => direction === "asc" ? `${host_static_assets}/${environment_assets}/${pathIcons.sortAsc}` : `${host_static_assets}/${environment_assets}/${pathIcons.sortDesc}`;
|
|
62
|
+
const getColumnIcons = () => {
|
|
63
|
+
const icons = [];
|
|
64
|
+
if (currentExternalSort) {
|
|
65
|
+
const sortIconPath = getSortIcon(currentExternalSort.direction);
|
|
66
|
+
icons.push(
|
|
67
|
+
/* @__PURE__ */ jsx(
|
|
68
|
+
Icon,
|
|
69
|
+
{
|
|
70
|
+
src: sortIconPath,
|
|
71
|
+
size: "small",
|
|
72
|
+
color: "text.secondary"
|
|
73
|
+
},
|
|
74
|
+
"sort-icon"
|
|
75
|
+
)
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
if (currentExternalFilter?.isValid) {
|
|
79
|
+
const filterIconPath = `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`;
|
|
80
|
+
icons.push(
|
|
81
|
+
/* @__PURE__ */ jsx(
|
|
82
|
+
Icon,
|
|
83
|
+
{
|
|
84
|
+
src: filterIconPath,
|
|
85
|
+
size: "small",
|
|
86
|
+
color: "text.secondary"
|
|
87
|
+
},
|
|
88
|
+
"filter-icon"
|
|
89
|
+
)
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
return icons.length > 0 ? icons : null;
|
|
93
|
+
};
|
|
47
94
|
useEffect(() => {
|
|
48
95
|
if (!activeFilters) {
|
|
49
96
|
setFilter("");
|
|
@@ -53,6 +100,15 @@ function DraggableHeaderRenderer(props) {
|
|
|
53
100
|
if (newColumn.withinHeaderRenderer) {
|
|
54
101
|
newColumn.name = newColumn.withinHeaderRenderer(props);
|
|
55
102
|
}
|
|
103
|
+
if (!newColumn.withinHeaderRenderer) {
|
|
104
|
+
const columnIcons = getColumnIcons();
|
|
105
|
+
if (columnIcons) {
|
|
106
|
+
newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
|
|
107
|
+
/* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
|
|
108
|
+
/* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
|
|
109
|
+
] });
|
|
110
|
+
}
|
|
111
|
+
}
|
|
56
112
|
return /* @__PURE__ */ jsxs(
|
|
57
113
|
DraggableHeaderRootStyled,
|
|
58
114
|
{
|
|
@@ -66,7 +122,26 @@ function DraggableHeaderRenderer(props) {
|
|
|
66
122
|
backgroundColor: isOver ? "#ececec" : void 0
|
|
67
123
|
},
|
|
68
124
|
children: [
|
|
69
|
-
/* @__PURE__ */ jsx(
|
|
125
|
+
/* @__PURE__ */ jsx(
|
|
126
|
+
ButtonHeaderActionsStyled,
|
|
127
|
+
{
|
|
128
|
+
role: "button",
|
|
129
|
+
"aria-label": `header-column-button-${column.key}`,
|
|
130
|
+
onClick: (e) => {
|
|
131
|
+
openPopover?.(e.currentTarget, column.key);
|
|
132
|
+
},
|
|
133
|
+
children: /* @__PURE__ */ jsx(
|
|
134
|
+
HeaderRenderer,
|
|
135
|
+
{
|
|
136
|
+
column: newColumn,
|
|
137
|
+
isCellSelected,
|
|
138
|
+
onSort: () => {
|
|
139
|
+
},
|
|
140
|
+
...others
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
}
|
|
144
|
+
),
|
|
70
145
|
activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsxs(DraggableWrapperInputBaseStyled, { children: [
|
|
71
146
|
/* @__PURE__ */ jsx(
|
|
72
147
|
IconSearchStyled,
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { HeaderRenderClickProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Componente que renderiza un menú de acciones para un encabezado de columna en un DataGrid.
|
|
4
|
+
*/
|
|
5
|
+
export declare function HeaderRenderClick(props: HeaderRenderClickProps): import("react/jsx-runtime").JSX.Element;
|
package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useMemo, useEffect, useCallback } from "react";
|
|
3
|
+
import { useModuleDictionary } from "@m4l/core";
|
|
4
|
+
import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
|
|
5
|
+
import { M as MenuListStyled, q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
|
|
6
|
+
import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
|
|
7
|
+
import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
|
|
8
|
+
import { D as DICTIONARY } from "../../../../dictionary.js";
|
|
9
|
+
import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
|
|
10
|
+
import { u as useFilters } from "../../../../hooks/useFilters.js";
|
|
11
|
+
function HeaderRenderClick(props) {
|
|
12
|
+
const {
|
|
13
|
+
menuActions,
|
|
14
|
+
size = "medium",
|
|
15
|
+
externalOpen,
|
|
16
|
+
onOpen,
|
|
17
|
+
objItem = {},
|
|
18
|
+
actionKey,
|
|
19
|
+
className,
|
|
20
|
+
arrowType = "right-top",
|
|
21
|
+
paperProps = {},
|
|
22
|
+
slots = {},
|
|
23
|
+
...other
|
|
24
|
+
} = props;
|
|
25
|
+
const { getLabel } = useModuleDictionary();
|
|
26
|
+
const { activeFilters } = useFilters();
|
|
27
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
28
|
+
const resolvedAnchorEl = externalOpen ?? anchorEl;
|
|
29
|
+
const open = typeof externalOpen !== "undefined" ? Boolean(externalOpen) : Boolean(anchorEl);
|
|
30
|
+
const ownerState = useMemo(
|
|
31
|
+
() => ({
|
|
32
|
+
selected: open
|
|
33
|
+
}),
|
|
34
|
+
[open]
|
|
35
|
+
);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
if (!open) {
|
|
38
|
+
setAnchorEl(null);
|
|
39
|
+
}
|
|
40
|
+
}, [open]);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (onOpen) {
|
|
43
|
+
onOpen(open);
|
|
44
|
+
}
|
|
45
|
+
}, [open, onOpen]);
|
|
46
|
+
const handleOpenClose = useCallback(() => {
|
|
47
|
+
setAnchorEl(null);
|
|
48
|
+
if (onOpen) {
|
|
49
|
+
onOpen(false);
|
|
50
|
+
}
|
|
51
|
+
}, [onOpen]);
|
|
52
|
+
const handleClick = useCallback(
|
|
53
|
+
(e, menuAction) => {
|
|
54
|
+
e.stopPropagation();
|
|
55
|
+
setAnchorEl(null);
|
|
56
|
+
if (onOpen) {
|
|
57
|
+
onOpen(false);
|
|
58
|
+
}
|
|
59
|
+
menuAction.onClick && menuAction.onClick(e);
|
|
60
|
+
},
|
|
61
|
+
[onOpen]
|
|
62
|
+
);
|
|
63
|
+
const renderMenuContent = useCallback(() => {
|
|
64
|
+
let processedActions = [];
|
|
65
|
+
let finalActions = [];
|
|
66
|
+
if (menuActions) {
|
|
67
|
+
if (typeof menuActions === "function") {
|
|
68
|
+
processedActions = menuActions(objItem);
|
|
69
|
+
} else {
|
|
70
|
+
processedActions = menuActions;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
if (Array.isArray(processedActions)) {
|
|
74
|
+
finalActions = processedActions;
|
|
75
|
+
}
|
|
76
|
+
if (finalActions.length === 0) {
|
|
77
|
+
return /* @__PURE__ */ jsx(
|
|
78
|
+
MenuItem,
|
|
79
|
+
{
|
|
80
|
+
disabled: true,
|
|
81
|
+
role: "menu-no-actions",
|
|
82
|
+
label: getLabel(DICTIONARY.NO_ACTIONS_LABEL)
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
return /* @__PURE__ */ jsx(MenuListStyled, { ownerState: {}, children: finalActions.map((menuAction, index) => {
|
|
87
|
+
const key = actionKey ?? index;
|
|
88
|
+
switch (menuAction.type ?? "menuItem") {
|
|
89
|
+
case "divider":
|
|
90
|
+
return /* @__PURE__ */ jsx(
|
|
91
|
+
MenuDivider,
|
|
92
|
+
{
|
|
93
|
+
variant: "solid",
|
|
94
|
+
size
|
|
95
|
+
},
|
|
96
|
+
`divider-${key}`
|
|
97
|
+
);
|
|
98
|
+
case "customNode":
|
|
99
|
+
return menuAction.customNode;
|
|
100
|
+
case "menuItem":
|
|
101
|
+
return /* @__PURE__ */ jsx(
|
|
102
|
+
MenuItem,
|
|
103
|
+
{
|
|
104
|
+
size,
|
|
105
|
+
...menuAction,
|
|
106
|
+
label: menuAction.label ?? getLabel(DICTIONARY.NO_ACTIONS_LABEL),
|
|
107
|
+
onClick: menuAction.onClick ? (e) => handleClick(e, menuAction) : void 0,
|
|
108
|
+
"aria-label": menuAction.type === "menuItem" && menuAction.dataTestId ? menuAction.dataTestId : "header-render-click-menu-item"
|
|
109
|
+
},
|
|
110
|
+
`${DATAGRID_HEADER_RENDER_CLICK_KEY}${menuAction.label ?? key}`
|
|
111
|
+
);
|
|
112
|
+
default:
|
|
113
|
+
return null;
|
|
114
|
+
}
|
|
115
|
+
}) });
|
|
116
|
+
}, [menuActions, size, objItem, getLabel, actionKey, handleClick]);
|
|
117
|
+
return /* @__PURE__ */ jsx(HeaderRenderClickStyled, { className, ownerState: { ownerState }, children: open && /* @__PURE__ */ jsx(
|
|
118
|
+
Popover,
|
|
119
|
+
{
|
|
120
|
+
id: "Popover",
|
|
121
|
+
open,
|
|
122
|
+
anchorEl: resolvedAnchorEl,
|
|
123
|
+
onClose: handleOpenClose,
|
|
124
|
+
arrowType,
|
|
125
|
+
...other,
|
|
126
|
+
slots: { ...slots },
|
|
127
|
+
slotProps: {
|
|
128
|
+
paper: {
|
|
129
|
+
...paperProps,
|
|
130
|
+
sx: {
|
|
131
|
+
mt: !activeFilters ? 0.3 : 6.5,
|
|
132
|
+
...paperProps?.sx
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
disableAutoFocus: true,
|
|
137
|
+
disableEnforceFocus: true,
|
|
138
|
+
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
139
|
+
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
140
|
+
children: renderMenuContent()
|
|
141
|
+
}
|
|
142
|
+
) });
|
|
143
|
+
}
|
|
144
|
+
export {
|
|
145
|
+
HeaderRenderClick as H
|
|
146
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './HeaderRenderClick';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { Sizes, ComponentPalletColor } from '@m4l/styles';
|
|
3
|
+
import { PopoverProps } from '../../../../../mui_extended/Popover/types';
|
|
4
|
+
import { MenuItemProps } from '../../../../../mui_extended/MenuItem/types';
|
|
5
|
+
import { ComponentNameToClassKey, PaperProps, SxProps } from '@mui/material';
|
|
6
|
+
import { Theme } from '@mui/material/styles';
|
|
7
|
+
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
8
|
+
export type MenuTypes = 'menuItem' | 'divider' | 'loader' | 'customNode';
|
|
9
|
+
interface BaseMenuAction {
|
|
10
|
+
type?: MenuTypes;
|
|
11
|
+
}
|
|
12
|
+
export interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> {
|
|
13
|
+
type?: 'menuItem';
|
|
14
|
+
onClick?: (arg?: any) => void;
|
|
15
|
+
customNode?: never;
|
|
16
|
+
error?: boolean;
|
|
17
|
+
dataTestId?: string;
|
|
18
|
+
}
|
|
19
|
+
interface DividerAction extends BaseMenuAction {
|
|
20
|
+
type: 'divider';
|
|
21
|
+
label?: never;
|
|
22
|
+
onClick?: never;
|
|
23
|
+
customNode?: never;
|
|
24
|
+
error?: never;
|
|
25
|
+
}
|
|
26
|
+
interface CustomNodeAction extends BaseMenuAction {
|
|
27
|
+
type: 'customNode';
|
|
28
|
+
customNode: ReactNode;
|
|
29
|
+
label?: never;
|
|
30
|
+
onClick?: never;
|
|
31
|
+
error?: never;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Define una acción del menú, con propiedades heredadas de `MenuItemProps`.
|
|
35
|
+
* [onClick] - Función opcional a ejecutar al hacer clic en la acción del menú.
|
|
36
|
+
* [error] - Indicador de error en la acción del menú.
|
|
37
|
+
*/
|
|
38
|
+
export type MenuAction = MenuItemAction | DividerAction | CustomNodeAction;
|
|
39
|
+
export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anchorEl'> {
|
|
40
|
+
/**
|
|
41
|
+
* Tamaño opcional del menú (pequeño o mediano).
|
|
42
|
+
*/
|
|
43
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
44
|
+
/**
|
|
45
|
+
* Objeto personalizado a pasar al componente.
|
|
46
|
+
*/
|
|
47
|
+
objItem?: any;
|
|
48
|
+
/**
|
|
49
|
+
* Acciones del menú, puede ser un array o una función que genere acciones.
|
|
50
|
+
*/
|
|
51
|
+
menuActions: MenuAction[] | ((row: any) => MenuAction[]);
|
|
52
|
+
/**
|
|
53
|
+
* Texto del tooltip opcional.
|
|
54
|
+
*/
|
|
55
|
+
toolTip?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Elemento opcional que se renderiza al final de la lista del menú.
|
|
58
|
+
*/
|
|
59
|
+
endListElement?: ReactElement;
|
|
60
|
+
/**
|
|
61
|
+
* Estilos personalizados para las acciones del menú.
|
|
62
|
+
*/
|
|
63
|
+
menuActionSx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
|
|
64
|
+
/**
|
|
65
|
+
* Contenido del `Badge` si está presente.
|
|
66
|
+
*/
|
|
67
|
+
badgeContent?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Elemento externo para abrir el menú.
|
|
70
|
+
*/
|
|
71
|
+
externalOpen?: HTMLDivElement | null;
|
|
72
|
+
/**
|
|
73
|
+
* Función externa para cerrar el menú.
|
|
74
|
+
*/
|
|
75
|
+
externalClose?: (element: null | HTMLDivElement) => void;
|
|
76
|
+
/**
|
|
77
|
+
* Tipo de flecha del menú.
|
|
78
|
+
*/
|
|
79
|
+
disabled?: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* The components used for each slot inside.
|
|
82
|
+
* @default {}
|
|
83
|
+
*/
|
|
84
|
+
slots?: {
|
|
85
|
+
root?: React.ElementType;
|
|
86
|
+
paper?: React.ElementType;
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* Propiedad objeto que se usa para poder editar las propiedades del paper o agregar estilos desde su sx
|
|
90
|
+
*/
|
|
91
|
+
paperProps?: PaperProps;
|
|
92
|
+
/**
|
|
93
|
+
* Propiedad checked
|
|
94
|
+
*/
|
|
95
|
+
checked?: boolean;
|
|
96
|
+
/**
|
|
97
|
+
* Propiedad checkable para el menú
|
|
98
|
+
*/
|
|
99
|
+
checkable?: boolean;
|
|
100
|
+
/**
|
|
101
|
+
* Propiedad para agregar un node al menú
|
|
102
|
+
*/
|
|
103
|
+
customNode?: ReactNode;
|
|
104
|
+
/**
|
|
105
|
+
* Define el color del componente.
|
|
106
|
+
*/
|
|
107
|
+
color?: Extract<ComponentPalletColor, 'primary'>;
|
|
108
|
+
/**
|
|
109
|
+
* Define la clave de la acción.
|
|
110
|
+
*/
|
|
111
|
+
actionKey?: string;
|
|
112
|
+
/**
|
|
113
|
+
* agrega un header al menú
|
|
114
|
+
*/
|
|
115
|
+
header?: ReactNode;
|
|
116
|
+
/**
|
|
117
|
+
* agrega un footer al menú
|
|
118
|
+
*/
|
|
119
|
+
footer?: ReactNode;
|
|
120
|
+
/**
|
|
121
|
+
* Define el tipo de flecha del menú.
|
|
122
|
+
*/
|
|
123
|
+
onOpen?: (param: boolean) => void;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Estado del propietario para `HeaderRenderClick`.
|
|
127
|
+
*/
|
|
128
|
+
export interface HeaderRenderClickOwnerState {
|
|
129
|
+
selected: boolean;
|
|
130
|
+
}
|
|
131
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useRowSelection, SelectCellFormatter } from "react-data-grid";
|
|
3
3
|
import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
|
|
4
|
-
import {
|
|
4
|
+
import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
|
|
5
5
|
const filterColumnClassName = "filter-cell";
|
|
6
6
|
const filterHeight = 35;
|
|
7
7
|
function SelectGroupFormatter(props) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { r as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
|
|
3
3
|
function autoFocusAndSelect(input) {
|
|
4
4
|
input?.focus();
|
|
5
5
|
input?.select();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -13,6 +13,7 @@ export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
|
|
|
13
13
|
export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
|
|
14
14
|
export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
|
|
15
15
|
export declare type ColumnAlign = 'left' | 'center' | 'right';
|
|
16
|
+
export declare type FieldPresence = 'initialized' | 'fixed' | 'optional';
|
|
16
17
|
export declare interface GridRow {
|
|
17
18
|
id: number;
|
|
18
19
|
}
|
|
@@ -61,10 +62,62 @@ export interface ChangeUserColumn<T extends KeyUserColumns = KeyUserColumns> {
|
|
|
61
62
|
userConfig: IGridConfig[T];
|
|
62
63
|
}
|
|
63
64
|
export type OnChangeUserColumns = (props: ChangeUserColumn) => void;
|
|
65
|
+
export type SortApplied = {
|
|
66
|
+
columnKey: string;
|
|
67
|
+
removable: boolean;
|
|
68
|
+
direction: Lowercase<SortDirection>;
|
|
69
|
+
};
|
|
70
|
+
export type SortAction = 'add' | 'remove';
|
|
71
|
+
export type SortChangeAdd = {
|
|
72
|
+
action: 'add';
|
|
73
|
+
columnKey: string;
|
|
74
|
+
direction: Lowercase<SortDirection>;
|
|
75
|
+
};
|
|
76
|
+
export type SortChangeRemove = {
|
|
77
|
+
action: 'remove';
|
|
78
|
+
columnKey: string;
|
|
79
|
+
};
|
|
80
|
+
export type SortChangeEvent = SortChangeAdd | SortChangeRemove;
|
|
81
|
+
export interface SortSettings {
|
|
82
|
+
sortsColumns: string[];
|
|
83
|
+
sortsApplied: SortApplied[];
|
|
84
|
+
onChange: (event: SortChangeEvent) => void;
|
|
85
|
+
}
|
|
86
|
+
/**---------------------------------------------------------------- */
|
|
87
|
+
export type FilterChangeAdd = {
|
|
88
|
+
action: 'add';
|
|
89
|
+
columnKey: string;
|
|
90
|
+
};
|
|
91
|
+
export type FilterChangeOpenPopover = {
|
|
92
|
+
action: 'openPopoverMenuFields';
|
|
93
|
+
};
|
|
94
|
+
export type FilterChangeEvent = FilterChangeAdd | FilterChangeOpenPopover;
|
|
95
|
+
interface FilterColumn {
|
|
96
|
+
name: string;
|
|
97
|
+
multiple: boolean;
|
|
98
|
+
}
|
|
99
|
+
export type FilterApplied = {
|
|
100
|
+
columnKey: string;
|
|
101
|
+
isValid: boolean;
|
|
102
|
+
};
|
|
103
|
+
export interface FilterSettings {
|
|
104
|
+
filterColumns: FilterColumn[];
|
|
105
|
+
filtersApplied: FilterApplied[];
|
|
106
|
+
onChange: (event: FilterChangeEvent) => void;
|
|
107
|
+
}
|
|
108
|
+
/**--------------------Termina tipado de filtros-------------------------------------------- */
|
|
64
109
|
export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
|
|
65
110
|
id: string;
|
|
66
111
|
withActions?: boolean;
|
|
67
112
|
columns: readonly Column<TRow, TSummaryRow>[];
|
|
113
|
+
/**
|
|
114
|
+
* Propiedad que define la configuración de los sorts aplicados.
|
|
115
|
+
*/
|
|
116
|
+
externalSortSettings?: SortSettings;
|
|
117
|
+
/**
|
|
118
|
+
* Propiedad que define la configuración de los filtros aplicados.
|
|
119
|
+
*/
|
|
120
|
+
externalFilterSettings?: FilterSettings;
|
|
68
121
|
rows: TRow[];
|
|
69
122
|
initialRowHeightVariant?: RowHeightVariants;
|
|
70
123
|
rowHeaderHeights?: RowHeights;
|
|
@@ -33,29 +33,32 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
|
|
|
33
33
|
const isSkeleton = useModuleSkeleton();
|
|
34
34
|
const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
|
|
35
35
|
if (!dynamicFilterStoreRef.current) {
|
|
36
|
-
dynamicFilterStoreRef.current = createDynamicFilterStore(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
dynamicFilterStoreRef.current = createDynamicFilterStore(
|
|
37
|
+
{
|
|
38
|
+
allField: {
|
|
39
|
+
...ALL_FIELD,
|
|
40
|
+
urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
|
|
41
|
+
},
|
|
42
|
+
withAllField,
|
|
43
|
+
fields,
|
|
44
|
+
automatic,
|
|
45
|
+
getLabel,
|
|
46
|
+
dataTestId,
|
|
47
|
+
size,
|
|
48
|
+
storeId,
|
|
49
|
+
visibleRefresh,
|
|
50
|
+
ownerState: {
|
|
51
|
+
isSkeleton,
|
|
52
|
+
isDirty: false,
|
|
53
|
+
inEdition: false,
|
|
54
|
+
isValid: true,
|
|
55
|
+
isMobile: !isDesktop,
|
|
56
|
+
isEmpty: true,
|
|
57
|
+
size
|
|
58
|
+
}
|
|
40
59
|
},
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
automatic,
|
|
44
|
-
getLabel,
|
|
45
|
-
dataTestId,
|
|
46
|
-
size,
|
|
47
|
-
storeId,
|
|
48
|
-
visibleRefresh,
|
|
49
|
-
ownerState: {
|
|
50
|
-
isSkeleton,
|
|
51
|
-
isDirty: false,
|
|
52
|
-
inEdition: false,
|
|
53
|
-
isValid: true,
|
|
54
|
-
isMobile: !isDesktop,
|
|
55
|
-
isEmpty: true,
|
|
56
|
-
size
|
|
57
|
-
}
|
|
58
|
-
}, storeDevtoolsEnabled);
|
|
60
|
+
storeDevtoolsEnabled
|
|
61
|
+
);
|
|
59
62
|
dynamicFilterStoreRef.current.getState().actions.init(initialAppliedFilters);
|
|
60
63
|
}
|
|
61
64
|
const fireOnChangeFilters = useStore(
|
|
@@ -63,8 +66,45 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
|
|
|
63
66
|
(state) => state.actions.fireOnChangeFilters,
|
|
64
67
|
shallow
|
|
65
68
|
);
|
|
69
|
+
const openPopoverMenuFields = useStore(
|
|
70
|
+
dynamicFilterStoreRef.current,
|
|
71
|
+
(state) => state.actions.openPopoverMenuFields,
|
|
72
|
+
shallow
|
|
73
|
+
);
|
|
74
|
+
const showPopoverFilterForAdd = useStore(
|
|
75
|
+
dynamicFilterStoreRef.current,
|
|
76
|
+
(state) => state.actions.showPopoverFilterForAdd,
|
|
77
|
+
shallow
|
|
78
|
+
);
|
|
79
|
+
const addExternalFilter = (columnKey) => {
|
|
80
|
+
try {
|
|
81
|
+
const state = dynamicFilterStoreRef.current?.getState();
|
|
82
|
+
if (!state) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
const field = state.actions.getFieldByName(columnKey);
|
|
86
|
+
const isFilterApplied = state.appliedFilters.some(
|
|
87
|
+
(filter) => filter.field.name === columnKey && filter.isSet
|
|
88
|
+
);
|
|
89
|
+
const isFilterMultiple = field.multiple;
|
|
90
|
+
if (isFilterApplied && !isFilterMultiple) {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
showPopoverFilterForAdd(field);
|
|
94
|
+
} catch (error) {
|
|
95
|
+
throw new Error(`Error al agregar el filtro externo: ${error}`);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
const getCurrentFilters = useStore(
|
|
99
|
+
dynamicFilterStoreRef.current,
|
|
100
|
+
(state) => () => state.appliedFilters,
|
|
101
|
+
shallow
|
|
102
|
+
);
|
|
66
103
|
useImperativeHandle(ref, () => ({
|
|
67
|
-
fireOnChangeFilter: fireOnChangeFilters
|
|
104
|
+
fireOnChangeFilter: fireOnChangeFilters,
|
|
105
|
+
openPopoverMenuFields,
|
|
106
|
+
addExternalFilter,
|
|
107
|
+
getCurrentFilters
|
|
68
108
|
}));
|
|
69
109
|
const countOnChangeFiltersApplied = useStore(
|
|
70
110
|
dynamicFilterStoreRef.current,
|
|
@@ -17,11 +17,11 @@ declare function usePopoverFilter(): {
|
|
|
17
17
|
filterFormValue: FormFilterValue;
|
|
18
18
|
formFilter: FormFilterFieldApplied;
|
|
19
19
|
popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
|
|
20
|
-
[x: string]: import('yup').ObjectSchema
|
|
20
|
+
[x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
|
|
21
21
|
}, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
|
|
22
|
-
[x: string]: import('yup').ObjectSchema
|
|
22
|
+
[x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
|
|
23
23
|
}>, import('yup/lib/object').AssertsShape<{
|
|
24
|
-
[x: string]: import('yup').ObjectSchema
|
|
24
|
+
[x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
|
|
25
25
|
}>> | undefined;
|
|
26
26
|
statusLoad: "initial" | "reload_values_provider" | "ready";
|
|
27
27
|
};
|
|
@@ -354,5 +354,8 @@ export type DynamicFilterSlotsType = keyof typeof DynamicFilterSlots;
|
|
|
354
354
|
export type DynamicFilterStyles = M4LOverridesStyleRules<DynamicFilterSlotsType, 'M4LDynamicFilter', Theme>;
|
|
355
355
|
export interface DynamicFilterRef {
|
|
356
356
|
fireOnChangeFilter: () => void;
|
|
357
|
+
openPopoverMenuFields: () => void;
|
|
358
|
+
addExternalFilter: (columnKey: string) => void;
|
|
359
|
+
getCurrentFilters: () => FilterFieldApplied[];
|
|
357
360
|
}
|
|
358
361
|
export {};
|
|
@@ -3,13 +3,17 @@ import { useFlagsPresent, CommonFlags } from "@m4l/core";
|
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import { D as DynamicSortProvider } from "./store/DynamicSortContext.js";
|
|
5
5
|
import { D as DynamicSortBase } from "./subcomponents/DynamicSortBase/DynamicSortBase.js";
|
|
6
|
-
const DynamicSort = forwardRef(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
const DynamicSort = forwardRef(
|
|
7
|
+
(props, ref) => {
|
|
8
|
+
const hasPresentFlags = useFlagsPresent([
|
|
9
|
+
CommonFlags.FLAG_DICTIONARY_LOADED
|
|
10
|
+
]);
|
|
11
|
+
if (!hasPresentFlags) {
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
|
|
10
15
|
}
|
|
11
|
-
|
|
12
|
-
});
|
|
16
|
+
);
|
|
13
17
|
export {
|
|
14
18
|
DynamicSort as D
|
|
15
19
|
};
|