@m4l/components 0.1.80 → 0.1.82
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/@types/export.d.ts +9 -1
- package/components/AccountPopover/AccountPopover.d.ts +21 -0
- package/components/AccountPopover/classes/types.d.ts +1 -1
- package/components/AccountPopover/{index.00d1d15f.js → index.0ba26726.js} +68 -72
- package/components/AccountPopover/subcomponents/MyAvatar/index.d.ts +2 -2
- package/components/AccountPopover/subcomponents/MyAvatar/types.d.ts +7 -0
- package/components/AccountPopover/subcomponents/PopOver/index.d.ts +6 -0
- package/components/AccountPopover/subcomponents/PopOver/types.d.ts +5 -4
- package/components/AccountPopover/types.d.ts +3 -4
- package/components/AppBar/{index.c85b100d.js → index.fadcefc6.js} +7 -7
- package/components/CommonActions/components/ActionCancel/{index.1051a117.js → index.6cf96d04.js} +2 -2
- package/components/CommonActions/components/ActionFormCancel/{index.a0d727b2.js → index.a0335cbf.js} +15 -15
- package/components/CommonActions/components/ActionFormIntro/{index.a20dc88d.js → index.273b1b9f.js} +2 -2
- package/components/CommonActions/components/ActionIntro/{index.bfe3256c.js → index.856df8ef.js} +2 -2
- package/components/CommonActions/components/Actions/{index.19d67bc6.js → index.5abb6ac4.js} +13 -13
- package/components/DataGrid/classes/index.d.ts +1 -0
- package/components/DataGrid/classes/types.d.ts +1 -0
- package/components/DataGrid/constants.d.ts +1 -0
- package/components/DataGrid/{index.2f175eba.js → index.03ad08af.js} +28 -681
- package/components/DataGrid/subcomponents/Actions/index.db54ec98.js +621 -0
- package/components/DataGrid/subcomponents/editors/TextEditor/index.91380a55.js +64 -0
- package/components/DynamicFilter/constants.d.ts +1 -1
- package/components/DynamicFilter/{index.c1f9d560.js → index.9b72180b.js} +28 -28
- package/components/GridLayout/GridLayout.d.ts +1 -0
- package/components/GridLayout/classes/index.d.ts +4 -0
- package/components/GridLayout/classes/types.d.ts +17 -0
- package/components/GridLayout/constants.d.ts +26 -0
- package/components/GridLayout/{index.a792aacb.js → index.76bccc4f.js} +322 -575
- package/components/GridLayout/index.d.ts +4 -3
- package/components/GridLayout/subcomponents/Griditem/index.01fc14c3.js +370 -0
- package/components/GridLayout/subcomponents/Griditem/index.d.ts +9 -0
- package/components/GridLayout/subcomponents/Griditem/types.d.ts +103 -0
- package/components/GridLayout/subcomponents/Responsive/helper.d.ts +10 -0
- package/components/GridLayout/subcomponents/Responsive/index.d.ts +15 -2
- package/components/GridLayout/{Responsive/index.1671380a.js → subcomponents/Responsive/index.e589d8bf.js} +95 -139
- package/components/GridLayout/subcomponents/Responsive/responsiveUtils.d.ts +3 -6
- package/components/GridLayout/subcomponents/Responsive/types.d.ts +114 -33
- package/components/GridLayout/{WidthProvider/index.9a26dfe4.js → subcomponents/WidthProvider/index.50dafd87.js} +5 -5
- package/components/GridLayout/subcomponents/WidthProvider/index.d.ts +4 -5
- package/components/GridLayout/types.d.ts +83 -18
- package/components/GridLayout/utils.d.ts +15 -12
- package/components/HelperText/{index.6ef76993.js → index.6c3adb40.js} +7 -7
- package/components/Icon/{index.9fcd1476.js → index.2414ff25.js} +1 -1
- package/components/LanguagePopover/{index.1564bd08.js → index.66e11634.js} +7 -7
- package/components/ModalDialog/{index.fbc4cd71.js → index.4dc1c8ed.js} +4 -4
- package/components/NavLink/{index.6c9c2588.js → index.5859e048.js} +7 -7
- package/components/ObjectLogs/{index.eab1c15f.js → index.51de2deb.js} +17 -17
- package/components/PaperForm/{index.ba38a0bd.js → index.f931dc02.js} +1 -1
- package/components/Period/{index.26071a16.js → index.4fd9df2a.js} +14 -14
- package/components/PropertyValue/{index.18d3c0fd.js → index.1b09f426.js} +1 -1
- package/components/ScrollBar/{index.bbe48f4d.js → index.d4410cb5.js} +5 -0
- package/components/SideBar/{index.2f497e6c.js → index.72564ef2.js} +11 -6
- package/components/animate/AnimatedScroll/animatedScroll.d.ts +3 -0
- package/components/animate/AnimatedScroll/index.d.ts +1 -0
- package/components/animate/AnimatedScroll/types.d.ts +5 -0
- package/components/animate/index.4e9774a6.js +150 -0
- package/components/animate/index.d.ts +1 -0
- package/components/areas/components/AreasAdmin/{index.7a0dabbe.js → index.f011d49d.js} +60 -49
- package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/PanelWindowPopUp/index.d.ts +1 -1
- package/components/areas/components/AreasViewer/{index.fd49f06c.js → index.51a52736.js} +41 -153
- package/components/areas/components/{index.7756928a.js → index.f496660b.js} +11 -11
- package/components/areas/contexts/AreasContext/helper.d.ts +2 -2
- package/components/areas/contexts/AreasContext/{index.0a08a08b.js → index.9820bc7f.js} +12 -6
- package/components/areas/contexts/AreasContext/types.d.ts +4 -4
- package/components/areas/contexts/{index.b303b664.js → index.361acb6f.js} +1 -1
- package/components/areas/hooks/useAreas/{index.c6eb2569.js → index.b403f383.js} +1 -1
- package/components/areas/{index.6e67d89a.js → index.eacab372.js} +11 -11
- package/components/formatters/BooleanFormatter/{index.e8de8e4c.js → index.32de0803.js} +1 -1
- package/components/formatters/{index.67aeb049.js → index.d16d2331.js} +2 -2
- package/components/hook-form/RHFAutocomplete/{index.d1bbb015.js → index.6edb51b1.js} +8 -8
- package/components/hook-form/RHFAutocompleteAsync/{index.f9a9ef48.js → index.c2ca5c66.js} +1 -1
- package/components/hook-form/RHFCheckbox/{index.7b4a21d7.js → index.c6c3933b.js} +8 -8
- package/components/hook-form/RHFDateTime/{index.46cf616e.js → index.3add0fa4.js} +8 -8
- package/components/hook-form/RHFPeriod/{index.ce513149.js → index.72edef4d.js} +2 -2
- package/components/hook-form/RHFTextField/{index.f7ee202c.js → index.20daa95e.js} +3 -3
- package/components/hook-form/RHFUpload/{index.1befd5bb.js → index.cc5adc15.js} +8 -8
- package/components/modal/{WindowBase.7e19843e.js → WindowBase.4016485b.js} +9 -9
- package/components/modal/{WindowConfirm.12a9608a.js → WindowConfirm.f148e495.js} +16 -16
- package/components/modal/{index.b0a7236c.js → index.e9fece72.js} +13 -13
- package/components/mui_extended/Accordion/{index.a6447bf8.js → index.42cef1c7.js} +3 -3
- package/components/mui_extended/Avatar/types.d.ts +3 -1
- package/components/mui_extended/Button/classes/types.d.ts +3 -0
- package/components/mui_extended/Button/{index.4288f9fc.js → index.40af964e.js} +8 -3
- package/components/mui_extended/Button/types.d.ts +2 -1
- package/components/mui_extended/IconButton/{index.12f1a3c3.js → index.a318316e.js} +1 -1
- package/components/mui_extended/MenuActions/{index.43a2e1ae.js → index.f6bfdd40.js} +2 -2
- package/components/mui_extended/Pager/classes/index.d.ts +12 -0
- package/components/mui_extended/Pager/classes/types.d.ts +12 -4
- package/components/mui_extended/Pager/{index.82e89328.js → index.da26e9d4.js} +114 -62
- package/components/mui_extended/Pager/subcomponents/CustomTablePagination/index.d.ts +3 -0
- package/components/mui_extended/Pager/subcomponents/CustomTablePagination/types.d.ts +12 -0
- package/components/mui_extended/Pager/{components → subcomponents}/PagerActions/types.d.ts +2 -0
- package/components/mui_extended/Tab/{index.c39a6681.js → index.0d5f96e6.js} +1 -1
- package/components/mui_extended/{index.d78bde19.js → index.f6a356b9.js} +7 -7
- package/contexts/ModalContext/{index.89805978.js → index.efc1135a.js} +1 -1
- package/contexts/RHFormContext/{index.fe175bab.js → index.b9266262.js} +1 -1
- package/hooks/useModal/{index.e1c5c31e.js → index.9b0cc3fe.js} +1 -1
- package/index.js +92 -88
- package/package.json +1 -2
- package/{vendor.f57d47a7.js → vendor.88ed58a5.js} +51 -48
- package/components/AccountPopover/subcomponents/MyAvatar/createAvatar.d.ts +0 -4
- package/components/GridLayout/subcomponents/GridItem/index.d.ts +0 -26
- package/components/GridLayout/subcomponents/GridItem/types.d.ts +0 -78
- package/components/animate/index.1f8eadd4.js +0 -66
- /package/components/mui_extended/Pager/{components → subcomponents}/PagerActions/index.d.ts +0 -0
|
@@ -1,53 +1,23 @@
|
|
|
1
|
+
import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.4dc1c8ed.js";
|
|
2
|
+
import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.da26e9d4.js";
|
|
1
3
|
import { styled } from "@mui/material/styles";
|
|
2
|
-
import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect
|
|
4
|
+
import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } from "react";
|
|
3
5
|
import { S as SELECT_COLUMN_KEY, u as useRowSelection, a as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.d46d625e.js";
|
|
4
6
|
import { useDrag, useDrop, DndProvider } from "react-dnd";
|
|
5
7
|
import { HTML5Backend } from "react-dnd-html5-backend";
|
|
6
|
-
import { SvgIcon, Checkbox, InputBase,
|
|
7
|
-
import { jsx, jsxs
|
|
8
|
-
import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString
|
|
9
|
-
import {
|
|
10
|
-
import { g as getPagerComponentsDictionary, P as Pager } from "../mui_extended/Pager/index.82e89328.js";
|
|
11
|
-
import { I as IconButton } from "../mui_extended/IconButton/index.12f1a3c3.js";
|
|
8
|
+
import { SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
|
|
11
|
+
import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.db54ec98.js";
|
|
12
12
|
import { unstable_composeClasses } from "@mui/base";
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import "
|
|
17
|
-
import "../
|
|
18
|
-
import { useResponsiveDesktop } from "@m4l/graphics";
|
|
19
|
-
import "../Icon/index.9fcd1476.js";
|
|
13
|
+
import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
|
|
14
|
+
import { g as getNameDataTestId } from "../../vendor.88ed58a5.js";
|
|
15
|
+
import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.32de0803.js";
|
|
16
|
+
import "@m4l/graphics";
|
|
17
|
+
import "../Icon/index.2414ff25.js";
|
|
20
18
|
import "clsx";
|
|
21
|
-
import "../modal/index.b0a7236c.js";
|
|
22
|
-
import { A as Actions$1 } from "../CommonActions/components/Actions/index.19d67bc6.js";
|
|
23
|
-
import "react-hook-form";
|
|
24
|
-
import "@mui/material/Button";
|
|
25
|
-
import "../mui_extended/Button/index.4288f9fc.js";
|
|
26
|
-
import "zustand";
|
|
27
|
-
import "../areas/contexts/AreasContext/index.0a08a08b.js";
|
|
28
|
-
import "../areas/components/AreasAdmin/index.7a0dabbe.js";
|
|
29
|
-
import "zustand/shallow";
|
|
30
|
-
import "../ScrollBar/index.bbe48f4d.js";
|
|
31
|
-
import "../mui_extended/Accordion/index.a6447bf8.js";
|
|
32
|
-
import "../mui_extended/Typography/index.443590d6.js";
|
|
33
|
-
import "../mui_extended/Avatar/index.75e6ed57.js";
|
|
34
|
-
import "react-router-dom";
|
|
35
|
-
import "../mui_extended/CheckBox.5f6c78b0.js";
|
|
36
|
-
import "../mui_extended/Badge/index.cad260fe.js";
|
|
37
|
-
import "../Image/index.c18ebf5a.js";
|
|
38
|
-
import "@mui/lab";
|
|
39
|
-
import "../mui_extended/Popover/index.9f35d0eb.js";
|
|
40
|
-
import "../mui_extended/Tab/index.c39a6681.js";
|
|
41
|
-
import "../mui_extended/Tooltip/index.5a795dcd.js";
|
|
42
|
-
import "../areas/components/AreasViewer/index.fd49f06c.js";
|
|
43
|
-
import "../LinearProgressIndeterminate/index.60dabc06.js";
|
|
44
|
-
import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
|
|
45
|
-
import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
|
|
46
|
-
import { W as WindowBase } from "../modal/WindowBase.7e19843e.js";
|
|
47
|
-
import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.fbc4cd71.js";
|
|
48
|
-
import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.e8de8e4c.js";
|
|
49
19
|
import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
|
|
50
|
-
import { C as ConcatenatedFormatter } from "../formatters/index.
|
|
20
|
+
import { C as ConcatenatedFormatter } from "../formatters/index.d16d2331.js";
|
|
51
21
|
const DataGridRoot = styled("div")(({
|
|
52
22
|
theme
|
|
53
23
|
}) => ({
|
|
@@ -560,48 +530,6 @@ const getDragHeaderRenderer = (handleColumnsReorder) => {
|
|
|
560
530
|
}
|
|
561
531
|
return HeaderRenderer2;
|
|
562
532
|
};
|
|
563
|
-
const ACTIONS_COLUMN_KEY = "actions-row";
|
|
564
|
-
function ActionsFormatter(props) {
|
|
565
|
-
const {
|
|
566
|
-
rowActionsGetter,
|
|
567
|
-
classes
|
|
568
|
-
} = useDataGrid();
|
|
569
|
-
const theme = useTheme();
|
|
570
|
-
if (rowActionsGetter === void 0) {
|
|
571
|
-
return /* @__PURE__ */ jsx(Fragment, {});
|
|
572
|
-
}
|
|
573
|
-
return /* @__PURE__ */ jsx(MenuActions, {
|
|
574
|
-
arrowType: "top-left",
|
|
575
|
-
objItem: props.row,
|
|
576
|
-
menuActions: rowActionsGetter,
|
|
577
|
-
className: classes.actionsFormatter,
|
|
578
|
-
menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
|
|
579
|
-
marginTop: 1,
|
|
580
|
-
marginLeft: "-11px",
|
|
581
|
-
anchorOrigin: {
|
|
582
|
-
vertical: "bottom",
|
|
583
|
-
horizontal: "left"
|
|
584
|
-
},
|
|
585
|
-
transformOrigin: {
|
|
586
|
-
vertical: "top",
|
|
587
|
-
horizontal: "left"
|
|
588
|
-
}
|
|
589
|
-
});
|
|
590
|
-
}
|
|
591
|
-
const ActionsColumn = {
|
|
592
|
-
key: ACTIONS_COLUMN_KEY,
|
|
593
|
-
name: getActionLabel(),
|
|
594
|
-
width: 60,
|
|
595
|
-
withFilter: false,
|
|
596
|
-
resizable: true,
|
|
597
|
-
sortable: false,
|
|
598
|
-
frozen: true,
|
|
599
|
-
type: "custom",
|
|
600
|
-
formatter: ActionsFormatter
|
|
601
|
-
};
|
|
602
|
-
function getActionLabel() {
|
|
603
|
-
return "";
|
|
604
|
-
}
|
|
605
533
|
const WrapperSkeleton = styled("div")(() => ({
|
|
606
534
|
display: "flex",
|
|
607
535
|
width: "100%",
|
|
@@ -879,70 +807,6 @@ function Table(props) {
|
|
|
879
807
|
})
|
|
880
808
|
});
|
|
881
809
|
}
|
|
882
|
-
function Filter() {
|
|
883
|
-
const {
|
|
884
|
-
activeFilters,
|
|
885
|
-
setActiveFilters
|
|
886
|
-
} = useFilters();
|
|
887
|
-
const {
|
|
888
|
-
host_static_assets,
|
|
889
|
-
environment_assets
|
|
890
|
-
} = useEnvironment();
|
|
891
|
-
const {
|
|
892
|
-
classes
|
|
893
|
-
} = useDataGrid();
|
|
894
|
-
const toggleIcon = () => {
|
|
895
|
-
setActiveFilters(!activeFilters);
|
|
896
|
-
};
|
|
897
|
-
return /* @__PURE__ */ jsx(IconButton, {
|
|
898
|
-
dictionaryTooltipId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
|
|
899
|
-
className: classes.actionFilter,
|
|
900
|
-
onClick: toggleIcon,
|
|
901
|
-
"aria-label": "filter",
|
|
902
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
|
|
903
|
-
});
|
|
904
|
-
}
|
|
905
|
-
const WrapperColumnsConfig = styled("div")(({ theme }) => ({
|
|
906
|
-
color: theme.palette.text.primary,
|
|
907
|
-
position: "relative",
|
|
908
|
-
display: "flex",
|
|
909
|
-
flexDirection: "column",
|
|
910
|
-
height: "100%",
|
|
911
|
-
width: "100%"
|
|
912
|
-
}));
|
|
913
|
-
styled("div")(({ theme }) => ({
|
|
914
|
-
color: theme.palette.text.primary,
|
|
915
|
-
fontSize: theme.typography.h4.fontSize
|
|
916
|
-
}));
|
|
917
|
-
const DivSelColumns = styled("div")(({ theme }) => ({
|
|
918
|
-
...theme.typography.subtitle2,
|
|
919
|
-
color: theme.palette.text.primary,
|
|
920
|
-
padding: `${theme.spacing(3)} ${theme.spacing(1)}`
|
|
921
|
-
}));
|
|
922
|
-
const WrapperDataGrid = styled("div")(() => ({
|
|
923
|
-
position: "relative",
|
|
924
|
-
display: "flex",
|
|
925
|
-
flexDirection: "column",
|
|
926
|
-
flexGrow: 1
|
|
927
|
-
}));
|
|
928
|
-
styled("div")(() => ({
|
|
929
|
-
display: "flex",
|
|
930
|
-
flexDirection: "row"
|
|
931
|
-
}));
|
|
932
|
-
const ColumnActions = styled("div")(({ theme }) => ({
|
|
933
|
-
paddingTop: theme.spacing(3),
|
|
934
|
-
display: "flex",
|
|
935
|
-
flexDirection: "row"
|
|
936
|
-
}));
|
|
937
|
-
styled("div")(({ theme }) => ({
|
|
938
|
-
paddingTop: theme.spacing(3),
|
|
939
|
-
display: "flex",
|
|
940
|
-
flexDirection: "row",
|
|
941
|
-
justifyContent: "flex-end",
|
|
942
|
-
"& > button": {
|
|
943
|
-
marginLeft: "10px"
|
|
944
|
-
}
|
|
945
|
-
}));
|
|
946
810
|
const componentName = "M4LDataGrid";
|
|
947
811
|
const dataGridClasses = generateUtilityClasses(componentName, [
|
|
948
812
|
"root",
|
|
@@ -966,6 +830,7 @@ const dataGridClasses = generateUtilityClasses(componentName, [
|
|
|
966
830
|
"formatterColumn",
|
|
967
831
|
"skeletonFormatter",
|
|
968
832
|
"actionsFormatter",
|
|
833
|
+
"actionsConfigContainer",
|
|
969
834
|
"withActions"
|
|
970
835
|
]);
|
|
971
836
|
function getDataGridUtilityClass(slot) {
|
|
@@ -993,445 +858,14 @@ const dataGridUtilityClasses = (ownerState) => {
|
|
|
993
858
|
columnsConfigActions: ["columnsConfigActions"],
|
|
994
859
|
formatterColumn: ["formatterColumn"],
|
|
995
860
|
skeletonFormatter: ["skeletonFormatter"],
|
|
996
|
-
actionsFormatter: ["actionsFormatter"]
|
|
861
|
+
actionsFormatter: ["actionsFormatter"],
|
|
862
|
+
actionsConfigContainer: ["actionsConfigContainer"]
|
|
997
863
|
};
|
|
998
864
|
const composedClasses = unstable_composeClasses(slots, getDataGridUtilityClass, {});
|
|
999
865
|
return {
|
|
1000
866
|
...composedClasses
|
|
1001
867
|
};
|
|
1002
868
|
};
|
|
1003
|
-
function FormatterColumn(props) {
|
|
1004
|
-
const {
|
|
1005
|
-
row,
|
|
1006
|
-
onRowChange,
|
|
1007
|
-
column
|
|
1008
|
-
} = props;
|
|
1009
|
-
const handleChange = () => {
|
|
1010
|
-
const newRow = {
|
|
1011
|
-
...row
|
|
1012
|
-
};
|
|
1013
|
-
newRow[column.key] = !row[column.key];
|
|
1014
|
-
onRowChange(newRow);
|
|
1015
|
-
};
|
|
1016
|
-
return /* @__PURE__ */ jsx(Checkbox, {
|
|
1017
|
-
size: "small",
|
|
1018
|
-
checked: row[column.key],
|
|
1019
|
-
onChange: handleChange,
|
|
1020
|
-
className: dataGridClasses.formatterColumn
|
|
1021
|
-
});
|
|
1022
|
-
}
|
|
1023
|
-
function getRowsFromColumnsConfig(columnsConfig) {
|
|
1024
|
-
return columnsConfig.filter((column) => !column.hidden).map((column) => ({
|
|
1025
|
-
key: column.key,
|
|
1026
|
-
name: column.name,
|
|
1027
|
-
visible: column.visible === void 0 ? true : column.visible,
|
|
1028
|
-
frozen: column.frozen === void 0 ? false : column.frozen,
|
|
1029
|
-
originalIndex: column.orginalIndex,
|
|
1030
|
-
originalFrozen: column.originalFrozen,
|
|
1031
|
-
originalVisible: column.originalVisible
|
|
1032
|
-
}));
|
|
1033
|
-
}
|
|
1034
|
-
const ColumnsConfig = forwardRef((props, ref) => {
|
|
1035
|
-
const refdata_grid = useRef(null);
|
|
1036
|
-
const {
|
|
1037
|
-
onCloseSettings,
|
|
1038
|
-
columnsConfig,
|
|
1039
|
-
onChangeColumnsConfig,
|
|
1040
|
-
classes
|
|
1041
|
-
} = props;
|
|
1042
|
-
const {
|
|
1043
|
-
getLabel
|
|
1044
|
-
} = useModuleDictionary();
|
|
1045
|
-
const [isInit, setIsInit] = useState(true);
|
|
1046
|
-
const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
|
|
1047
|
-
const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
|
|
1048
|
-
const divRef = useRef(null);
|
|
1049
|
-
const {
|
|
1050
|
-
host_static_assets,
|
|
1051
|
-
environment_assets
|
|
1052
|
-
} = useEnvironment();
|
|
1053
|
-
useImperativeHandle(ref, () => ({
|
|
1054
|
-
onClickIntro: handleIntro,
|
|
1055
|
-
current: divRef.current
|
|
1056
|
-
}));
|
|
1057
|
-
const columnsdata_grid = useMemo(() => [{
|
|
1058
|
-
key: "name",
|
|
1059
|
-
name: getLabel("data_grid.settings_column_name"),
|
|
1060
|
-
width: 200,
|
|
1061
|
-
resizable: true,
|
|
1062
|
-
type: "string"
|
|
1063
|
-
}, {
|
|
1064
|
-
key: "originalIndex",
|
|
1065
|
-
name: getLabel("data_grid.settings_column_position"),
|
|
1066
|
-
width: 50,
|
|
1067
|
-
type: "number",
|
|
1068
|
-
cellClass: "rdg-cell-align-center"
|
|
1069
|
-
}, {
|
|
1070
|
-
key: "visible",
|
|
1071
|
-
name: getLabel("data_grid.settings_column_visible"),
|
|
1072
|
-
width: 80,
|
|
1073
|
-
type: "boolean",
|
|
1074
|
-
formatter: FormatterColumn,
|
|
1075
|
-
cellClass: "rdg-cell-align-center"
|
|
1076
|
-
}, {
|
|
1077
|
-
key: "frozen",
|
|
1078
|
-
name: getLabel("data_grid.settings_column_frozen"),
|
|
1079
|
-
width: 80,
|
|
1080
|
-
type: "boolean",
|
|
1081
|
-
formatter: FormatterColumn,
|
|
1082
|
-
cellClass: "rdg-cell-align-center"
|
|
1083
|
-
}], [getLabel]);
|
|
1084
|
-
const checkAll = () => {
|
|
1085
|
-
setRows(rows.map((row) => ({
|
|
1086
|
-
...row,
|
|
1087
|
-
visible: true
|
|
1088
|
-
})));
|
|
1089
|
-
};
|
|
1090
|
-
const unCheckAll = () => {
|
|
1091
|
-
setRows(rows.map((row) => ({
|
|
1092
|
-
...row,
|
|
1093
|
-
visible: false
|
|
1094
|
-
})));
|
|
1095
|
-
};
|
|
1096
|
-
const restoreAll = () => {
|
|
1097
|
-
setRows(rows.map((row) => ({
|
|
1098
|
-
...row,
|
|
1099
|
-
visible: row.originalVisible,
|
|
1100
|
-
frozen: row.originalFrozen,
|
|
1101
|
-
index: row.originalIndex
|
|
1102
|
-
})).sort((a, b) => a.index - b.index));
|
|
1103
|
-
};
|
|
1104
|
-
useEffect(() => {
|
|
1105
|
-
if (isInit === false) {
|
|
1106
|
-
setRows(getRowsFromColumnsConfig(columnsConfig));
|
|
1107
|
-
}
|
|
1108
|
-
setIsInit(false);
|
|
1109
|
-
}, [columnsConfig]);
|
|
1110
|
-
const rowSelectedIndex = useMemo(() => {
|
|
1111
|
-
let rowIndex = -1;
|
|
1112
|
-
if (selRows.size !== 1)
|
|
1113
|
-
return rowIndex;
|
|
1114
|
-
const iterator = selRows.entries();
|
|
1115
|
-
const entry = iterator.next().value[1];
|
|
1116
|
-
rowIndex = rows.findIndex((row) => row.key === entry);
|
|
1117
|
-
return rowIndex;
|
|
1118
|
-
}, [rows, selRows]);
|
|
1119
|
-
const handleMoveFirst = () => {
|
|
1120
|
-
if (rowSelectedIndex === -1)
|
|
1121
|
-
return -1;
|
|
1122
|
-
const newRows = [...rows];
|
|
1123
|
-
newRows.splice(rowSelectedIndex, 1);
|
|
1124
|
-
newRows.splice(0, 0, rows[rowSelectedIndex]);
|
|
1125
|
-
refdata_grid.current?.selectCell({
|
|
1126
|
-
idx: 0,
|
|
1127
|
-
rowIdx: 0
|
|
1128
|
-
});
|
|
1129
|
-
setRows(newRows);
|
|
1130
|
-
};
|
|
1131
|
-
const handleMoveLast = () => {
|
|
1132
|
-
if (rowSelectedIndex === -1)
|
|
1133
|
-
return -1;
|
|
1134
|
-
const newRows = [...rows];
|
|
1135
|
-
newRows.splice(rowSelectedIndex, 1);
|
|
1136
|
-
newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
|
|
1137
|
-
refdata_grid.current?.selectCell({
|
|
1138
|
-
idx: 0,
|
|
1139
|
-
rowIdx: newRows.length - 1
|
|
1140
|
-
});
|
|
1141
|
-
setRows(newRows);
|
|
1142
|
-
};
|
|
1143
|
-
const handleMoveUpDownd = (position) => {
|
|
1144
|
-
if (rowSelectedIndex === -1)
|
|
1145
|
-
return -1;
|
|
1146
|
-
const newRows = [...rows];
|
|
1147
|
-
const element = newRows[rowSelectedIndex];
|
|
1148
|
-
newRows.splice(rowSelectedIndex, 1);
|
|
1149
|
-
newRows.splice(rowSelectedIndex + position, 0, element);
|
|
1150
|
-
refdata_grid.current?.selectCell({
|
|
1151
|
-
idx: 0,
|
|
1152
|
-
rowIdx: rowSelectedIndex + position
|
|
1153
|
-
});
|
|
1154
|
-
setRows(newRows);
|
|
1155
|
-
};
|
|
1156
|
-
const getColumnConfigByKey2 = (key) => {
|
|
1157
|
-
const rowIndexFinded = rows.findIndex((row) => row.key === key);
|
|
1158
|
-
if (rowIndexFinded > -1) {
|
|
1159
|
-
return {
|
|
1160
|
-
visible: rows[rowIndexFinded].visible,
|
|
1161
|
-
frozen: rows[rowIndexFinded].frozen
|
|
1162
|
-
};
|
|
1163
|
-
}
|
|
1164
|
-
return void 0;
|
|
1165
|
-
};
|
|
1166
|
-
const getRowIndex = (column) => {
|
|
1167
|
-
const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
|
|
1168
|
-
if (rowIndexFinded > -1) {
|
|
1169
|
-
return rowIndexFinded;
|
|
1170
|
-
}
|
|
1171
|
-
return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
|
|
1172
|
-
};
|
|
1173
|
-
const handleIntro = () => {
|
|
1174
|
-
const newColumnsConfig = columnsConfig.map((columnConfig) => {
|
|
1175
|
-
const newColumnConfig = {
|
|
1176
|
-
...columnConfig
|
|
1177
|
-
};
|
|
1178
|
-
if (!columnConfig.hidden) {
|
|
1179
|
-
const columnConfigRow = getColumnConfigByKey2(columnConfig.key);
|
|
1180
|
-
if (columnConfigRow) {
|
|
1181
|
-
newColumnConfig.visible = columnConfigRow.visible;
|
|
1182
|
-
newColumnConfig.frozen = columnConfigRow.frozen;
|
|
1183
|
-
}
|
|
1184
|
-
}
|
|
1185
|
-
return newColumnConfig;
|
|
1186
|
-
}).sort((a, b) => getRowIndex(a) - getRowIndex(b));
|
|
1187
|
-
onChangeColumnsConfig(newColumnsConfig);
|
|
1188
|
-
onCloseSettings();
|
|
1189
|
-
};
|
|
1190
|
-
const onInternalSelectedRowsChange = () => {
|
|
1191
|
-
};
|
|
1192
|
-
const onInternalRowsChange = (newRows) => {
|
|
1193
|
-
setRows(newRows);
|
|
1194
|
-
};
|
|
1195
|
-
const onRowClick = (row) => {
|
|
1196
|
-
if (selRows.has(row.key))
|
|
1197
|
-
return;
|
|
1198
|
-
const mySet = /* @__PURE__ */ new Set([row.key]);
|
|
1199
|
-
setSelRows(mySet);
|
|
1200
|
-
};
|
|
1201
|
-
return /* @__PURE__ */ jsxs(WrapperColumnsConfig, {
|
|
1202
|
-
ref: divRef,
|
|
1203
|
-
className: classes.columnsConfigContainer,
|
|
1204
|
-
children: [/* @__PURE__ */ jsx(DivSelColumns, {
|
|
1205
|
-
className: classes.columnsLabelSetColumns,
|
|
1206
|
-
children: getLabel("data_grid.settings_sel_columns")
|
|
1207
|
-
}), /* @__PURE__ */ jsx(WrapperDataGrid, {
|
|
1208
|
-
className: classes.columnsConfigContent,
|
|
1209
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
1210
|
-
className: classes.wrapperDataGridCss,
|
|
1211
|
-
children: /* @__PURE__ */ jsx(DataGrid$1, {
|
|
1212
|
-
className: classes.columnsConfigGrid,
|
|
1213
|
-
ref: refdata_grid,
|
|
1214
|
-
columns: columnsdata_grid,
|
|
1215
|
-
rows,
|
|
1216
|
-
onRowsChange: onInternalRowsChange,
|
|
1217
|
-
selectedRows: selRows,
|
|
1218
|
-
onSelectedRowsChange: onInternalSelectedRowsChange,
|
|
1219
|
-
onRowClick,
|
|
1220
|
-
rowKeyGetter: (row) => row.key,
|
|
1221
|
-
cellNavigationMode: "CHANGE_ROW",
|
|
1222
|
-
defaultColumnOptions: {
|
|
1223
|
-
resizable: true,
|
|
1224
|
-
sortable: true
|
|
1225
|
-
}
|
|
1226
|
-
})
|
|
1227
|
-
})
|
|
1228
|
-
}), /* @__PURE__ */ jsxs(ColumnActions, {
|
|
1229
|
-
className: classes.columnsConfigActions,
|
|
1230
|
-
children: [/* @__PURE__ */ jsx(IconButton, {
|
|
1231
|
-
dictionaryTooltipId: "data_grid.settings_move_first",
|
|
1232
|
-
onClick: handleMoveFirst,
|
|
1233
|
-
"aria-label": "move first place",
|
|
1234
|
-
disabled: rowSelectedIndex < 1,
|
|
1235
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
|
|
1236
|
-
}), /* @__PURE__ */ jsx(IconButton, {
|
|
1237
|
-
dictionaryTooltipId: "data_grid.settings_move_up",
|
|
1238
|
-
onClick: () => handleMoveUpDownd(-1),
|
|
1239
|
-
"aria-label": "move up place",
|
|
1240
|
-
disabled: rowSelectedIndex < 1,
|
|
1241
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
|
|
1242
|
-
}), /* @__PURE__ */ jsx(IconButton, {
|
|
1243
|
-
dictionaryTooltipId: "data_grid.settings_move_last",
|
|
1244
|
-
onClick: handleMoveLast,
|
|
1245
|
-
"aria-label": "move last place",
|
|
1246
|
-
disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
|
|
1247
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
|
|
1248
|
-
}), /* @__PURE__ */ jsx(IconButton, {
|
|
1249
|
-
dictionaryTooltipId: "data_grid.settings_move_down",
|
|
1250
|
-
onClick: () => handleMoveUpDownd(1),
|
|
1251
|
-
"aria-label": "move down place",
|
|
1252
|
-
disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
|
|
1253
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
|
|
1254
|
-
}), /* @__PURE__ */ jsx(IconButton, {
|
|
1255
|
-
dictionaryTooltipId: "data_grid.settings_visible_all",
|
|
1256
|
-
onClick: checkAll,
|
|
1257
|
-
"aria-label": "check visible all",
|
|
1258
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
|
|
1259
|
-
}), /* @__PURE__ */ jsx(IconButton, {
|
|
1260
|
-
dictionaryTooltipId: "data_grid.settings_no_visible_all",
|
|
1261
|
-
onClick: unCheckAll,
|
|
1262
|
-
"aria-label": "un check all",
|
|
1263
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
|
|
1264
|
-
}), /* @__PURE__ */ jsx(IconButton, {
|
|
1265
|
-
dictionaryTooltipId: "data_grid.settings_restore",
|
|
1266
|
-
onClick: restoreAll,
|
|
1267
|
-
"aria-label": "Restore columns",
|
|
1268
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
|
|
1269
|
-
})]
|
|
1270
|
-
})]
|
|
1271
|
-
});
|
|
1272
|
-
});
|
|
1273
|
-
ColumnsConfig.displayName = "ColumnsConfig";
|
|
1274
|
-
function Settings() {
|
|
1275
|
-
const {
|
|
1276
|
-
openModal,
|
|
1277
|
-
closeModal
|
|
1278
|
-
} = useModal();
|
|
1279
|
-
const {
|
|
1280
|
-
columnsConfig,
|
|
1281
|
-
onChangeColumnsConfig
|
|
1282
|
-
} = useDataGrid();
|
|
1283
|
-
const {
|
|
1284
|
-
getLabel
|
|
1285
|
-
} = useModuleDictionary();
|
|
1286
|
-
const {
|
|
1287
|
-
host_static_assets,
|
|
1288
|
-
environment_assets
|
|
1289
|
-
} = useEnvironment();
|
|
1290
|
-
const {
|
|
1291
|
-
classes
|
|
1292
|
-
} = useDataGrid();
|
|
1293
|
-
const ref = useRef(null);
|
|
1294
|
-
const onCloseSettings = useCallback(() => {
|
|
1295
|
-
closeModal();
|
|
1296
|
-
}, [closeModal]);
|
|
1297
|
-
const onClickIntro = useCallback(() => {
|
|
1298
|
-
if (ref.current?.onClickIntro) {
|
|
1299
|
-
ref.current?.onClickIntro();
|
|
1300
|
-
}
|
|
1301
|
-
}, []);
|
|
1302
|
-
const onClickSettings = useCallback(() => {
|
|
1303
|
-
openModal({
|
|
1304
|
-
initialWidth: 500,
|
|
1305
|
-
initialHeigth: 680,
|
|
1306
|
-
window: /* @__PURE__ */ jsxs(WindowBase, {
|
|
1307
|
-
title: getLabel("data_grid.settings_title"),
|
|
1308
|
-
children: [/* @__PURE__ */ jsx(ColumnsConfig, {
|
|
1309
|
-
ref,
|
|
1310
|
-
columnsConfig,
|
|
1311
|
-
onChangeColumnsConfig,
|
|
1312
|
-
onCloseSettings,
|
|
1313
|
-
classes
|
|
1314
|
-
}), /* @__PURE__ */ jsxs(Actions$1, {
|
|
1315
|
-
children: [/* @__PURE__ */ jsx(ActionCancel, {
|
|
1316
|
-
onClick: closeModal
|
|
1317
|
-
}), /* @__PURE__ */ jsx(ActionIntro, {
|
|
1318
|
-
onClick: onClickIntro
|
|
1319
|
-
})]
|
|
1320
|
-
})]
|
|
1321
|
-
})
|
|
1322
|
-
});
|
|
1323
|
-
}, [closeModal, columnsConfig, getLabel, onChangeColumnsConfig, onCloseSettings, openModal, onClickIntro]);
|
|
1324
|
-
return /* @__PURE__ */ jsx(IconButton, {
|
|
1325
|
-
className: classes.actionSettings,
|
|
1326
|
-
dictionaryTooltipId: "data_grid.tooltip_settings",
|
|
1327
|
-
onClick: onClickSettings,
|
|
1328
|
-
"aria-label": "settings",
|
|
1329
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
|
|
1330
|
-
});
|
|
1331
|
-
}
|
|
1332
|
-
function RowsCount() {
|
|
1333
|
-
const {
|
|
1334
|
-
rowsCount,
|
|
1335
|
-
classes
|
|
1336
|
-
} = useDataGrid();
|
|
1337
|
-
const {
|
|
1338
|
-
getLabel
|
|
1339
|
-
} = useModuleDictionary();
|
|
1340
|
-
const isSkeleton = useModuleSkeleton();
|
|
1341
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1342
|
-
className: classes.rowsCount,
|
|
1343
|
-
children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
|
|
1344
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
1345
|
-
className: classes.rowsCountLabel,
|
|
1346
|
-
children: getLabel("data_grid.rows")
|
|
1347
|
-
}), /* @__PURE__ */ jsx("div", {
|
|
1348
|
-
className: classes.rowsCountValue,
|
|
1349
|
-
children: rowsCount
|
|
1350
|
-
})]
|
|
1351
|
-
}) : /* @__PURE__ */ jsxs(Fragment, {
|
|
1352
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
1353
|
-
className: classes.rowsCountLabel,
|
|
1354
|
-
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
1355
|
-
variant: "text",
|
|
1356
|
-
width: "40px",
|
|
1357
|
-
height: "16px"
|
|
1358
|
-
})
|
|
1359
|
-
}), /* @__PURE__ */ jsx("div", {
|
|
1360
|
-
className: classes.rowsCountValue,
|
|
1361
|
-
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
1362
|
-
variant: "text",
|
|
1363
|
-
width: "20px",
|
|
1364
|
-
height: "16px"
|
|
1365
|
-
})
|
|
1366
|
-
})]
|
|
1367
|
-
})
|
|
1368
|
-
});
|
|
1369
|
-
}
|
|
1370
|
-
function Density() {
|
|
1371
|
-
const {
|
|
1372
|
-
host_static_assets,
|
|
1373
|
-
environment_assets
|
|
1374
|
-
} = useEnvironment();
|
|
1375
|
-
const {
|
|
1376
|
-
rowHeights,
|
|
1377
|
-
currentRowHeightVariant,
|
|
1378
|
-
setRowHeightVariant,
|
|
1379
|
-
classes
|
|
1380
|
-
} = useDataGrid();
|
|
1381
|
-
const {
|
|
1382
|
-
getLabel
|
|
1383
|
-
} = useModuleDictionary();
|
|
1384
|
-
const menuActions = useMemo(() => {
|
|
1385
|
-
if (typeof rowHeights === "number") {
|
|
1386
|
-
return [];
|
|
1387
|
-
}
|
|
1388
|
-
return [{
|
|
1389
|
-
urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
|
|
1390
|
-
onClick: () => setRowHeightVariant("compact"),
|
|
1391
|
-
disabled: currentRowHeightVariant === "compact",
|
|
1392
|
-
dictionaryField: "data_grid.density_compact"
|
|
1393
|
-
}, {
|
|
1394
|
-
urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
|
|
1395
|
-
onClick: () => setRowHeightVariant("standard"),
|
|
1396
|
-
disabled: currentRowHeightVariant === "standard",
|
|
1397
|
-
dictionaryField: "data_grid.density_standard"
|
|
1398
|
-
}, {
|
|
1399
|
-
urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
|
|
1400
|
-
onClick: () => setRowHeightVariant("confortable"),
|
|
1401
|
-
disabled: currentRowHeightVariant === "confortable",
|
|
1402
|
-
dictionaryField: "data_grid.density_confortable"
|
|
1403
|
-
}];
|
|
1404
|
-
}, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment_assets]);
|
|
1405
|
-
const theme = useTheme();
|
|
1406
|
-
const currenViewIcon = useMemo(() => {
|
|
1407
|
-
if (currentRowHeightVariant === "compact") {
|
|
1408
|
-
return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
|
|
1409
|
-
}
|
|
1410
|
-
if (currentRowHeightVariant === "standard") {
|
|
1411
|
-
return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
|
|
1412
|
-
}
|
|
1413
|
-
return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
|
|
1414
|
-
}, [currentRowHeightVariant, host_static_assets, environment_assets]);
|
|
1415
|
-
if (menuActions.length === 0) {
|
|
1416
|
-
return /* @__PURE__ */ jsx(Fragment, {});
|
|
1417
|
-
}
|
|
1418
|
-
return /* @__PURE__ */ jsx(MenuActions, {
|
|
1419
|
-
arrowType: "right-top",
|
|
1420
|
-
className: classes.actionDensityPopover,
|
|
1421
|
-
menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
|
|
1422
|
-
anchorOrigin: {
|
|
1423
|
-
vertical: "top",
|
|
1424
|
-
horizontal: "left"
|
|
1425
|
-
},
|
|
1426
|
-
transformOrigin: {
|
|
1427
|
-
vertical: "top",
|
|
1428
|
-
horizontal: "right"
|
|
1429
|
-
},
|
|
1430
|
-
menuActions,
|
|
1431
|
-
urlIcon: currenViewIcon,
|
|
1432
|
-
toolTip: getLabel("data_grid.tooltip_density")
|
|
1433
|
-
});
|
|
1434
|
-
}
|
|
1435
869
|
function getDataGridComponentsDictionary() {
|
|
1436
870
|
return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
|
|
1437
871
|
}
|
|
@@ -1440,41 +874,10 @@ const dictionary = {
|
|
|
1440
874
|
LABEL_ROWS_PER_PAGE: "pager.rows_per_page",
|
|
1441
875
|
LABEL_OF: "pager.of"
|
|
1442
876
|
};
|
|
1443
|
-
function Actions(props) {
|
|
1444
|
-
const isDesktop = useResponsiveDesktop();
|
|
1445
|
-
const {
|
|
1446
|
-
rowHeights,
|
|
1447
|
-
classes
|
|
1448
|
-
} = useDataGrid();
|
|
1449
|
-
const isSkeleton = useModuleSkeleton();
|
|
1450
|
-
const {
|
|
1451
|
-
getLabel
|
|
1452
|
-
} = useModuleDictionary();
|
|
1453
|
-
const {
|
|
1454
|
-
withRowsCount = true,
|
|
1455
|
-
withPager = true,
|
|
1456
|
-
pagerOptions,
|
|
1457
|
-
withSettings = true,
|
|
1458
|
-
settingsProps,
|
|
1459
|
-
withLocalFilters
|
|
1460
|
-
} = props;
|
|
1461
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
1462
|
-
className: classes.actions,
|
|
1463
|
-
children: [withRowsCount && isDesktop && /* @__PURE__ */ jsx(RowsCount, {}), withPager && pagerOptions && /* @__PURE__ */ jsx(Pager, {
|
|
1464
|
-
...pagerOptions,
|
|
1465
|
-
totalRecords: pagerOptions.totalRecords,
|
|
1466
|
-
isSkeleton,
|
|
1467
|
-
isDesktop,
|
|
1468
|
-
labelRows: getLabel(dictionary.LABEL_ROWS_PER_PAGE),
|
|
1469
|
-
labelOf: getLabel(dictionary.LABEL_OF)
|
|
1470
|
-
}), typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}), withLocalFilters && /* @__PURE__ */ jsx(Filter, {}), withSettings && /* @__PURE__ */ jsx(Settings, {
|
|
1471
|
-
...settingsProps
|
|
1472
|
-
})]
|
|
1473
|
-
});
|
|
1474
|
-
}
|
|
1475
877
|
const DATAGRID_TEST_ID = "m4ldatagrid";
|
|
1476
878
|
const PREFIX_TEST_ATTRIBUTE = "data-testid";
|
|
1477
879
|
const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
|
|
880
|
+
const DATAGRID_PREFIX_NAME = "M4LDataGrid";
|
|
1478
881
|
function DataGrid(props) {
|
|
1479
882
|
const {
|
|
1480
883
|
id,
|
|
@@ -1492,7 +895,7 @@ function DataGrid(props) {
|
|
|
1492
895
|
initialRowHeightVariant,
|
|
1493
896
|
checkedRows,
|
|
1494
897
|
onCheckedRowsChange,
|
|
1495
|
-
dataTestId
|
|
898
|
+
dataTestId = ""
|
|
1496
899
|
} = props;
|
|
1497
900
|
const ownerState = {
|
|
1498
901
|
actionsProps,
|
|
@@ -1504,7 +907,7 @@ function DataGrid(props) {
|
|
|
1504
907
|
className: classes.root,
|
|
1505
908
|
...process.env.NODE_ENV !== "production" ? {
|
|
1506
909
|
[TEST_PROP_COLUMNS]: JSON.stringify(columns),
|
|
1507
|
-
[
|
|
910
|
+
[TEST_PROP_ID]: getNameDataTestId(DATAGRID_PREFIX_NAME, "root", dataTestId)
|
|
1508
911
|
} : {},
|
|
1509
912
|
children: /* @__PURE__ */ jsx(DataGridProvider, {
|
|
1510
913
|
id: props.id,
|
|
@@ -1580,64 +983,6 @@ function columnConcatenatedValuesFormatter(props) {
|
|
|
1580
983
|
});
|
|
1581
984
|
};
|
|
1582
985
|
}
|
|
1583
|
-
const Input = styled("input")(() => ({
|
|
1584
|
-
appearance: "none",
|
|
1585
|
-
boxSizing: "border-box",
|
|
1586
|
-
inlineSize: "100%",
|
|
1587
|
-
blockSize: "100%",
|
|
1588
|
-
paddingBlock: "0",
|
|
1589
|
-
verticalAlign: "top",
|
|
1590
|
-
textAlign: "right",
|
|
1591
|
-
color: "var(--rdg-color)",
|
|
1592
|
-
backgroundColor: "var(--rdg-background-color)",
|
|
1593
|
-
fontFamily: "inherit",
|
|
1594
|
-
"&:focus": {
|
|
1595
|
-
outline: "none"
|
|
1596
|
-
},
|
|
1597
|
-
"&::placeholder": {
|
|
1598
|
-
color: "#999",
|
|
1599
|
-
opacity: "1"
|
|
1600
|
-
}
|
|
1601
|
-
}));
|
|
1602
|
-
function autoFocusAndSelect(input) {
|
|
1603
|
-
input?.focus();
|
|
1604
|
-
input?.select();
|
|
1605
|
-
}
|
|
1606
|
-
function TextEditor({
|
|
1607
|
-
row,
|
|
1608
|
-
column,
|
|
1609
|
-
onRowChange,
|
|
1610
|
-
onClose
|
|
1611
|
-
}) {
|
|
1612
|
-
return /* @__PURE__ */ jsx(Input, {
|
|
1613
|
-
className: "rdg-text-editor",
|
|
1614
|
-
ref: autoFocusAndSelect,
|
|
1615
|
-
value: row[column.key],
|
|
1616
|
-
onChange: (event) => onRowChange({
|
|
1617
|
-
...row,
|
|
1618
|
-
[column.key]: event.target.value
|
|
1619
|
-
}),
|
|
1620
|
-
onBlur: () => onClose(true)
|
|
1621
|
-
});
|
|
1622
|
-
}
|
|
1623
|
-
function NumberEditor({
|
|
1624
|
-
row,
|
|
1625
|
-
column,
|
|
1626
|
-
onRowChange,
|
|
1627
|
-
onClose
|
|
1628
|
-
}) {
|
|
1629
|
-
return /* @__PURE__ */ jsx(Input, {
|
|
1630
|
-
className: "rdg-text-editor",
|
|
1631
|
-
ref: autoFocusAndSelect,
|
|
1632
|
-
type: "number",
|
|
1633
|
-
value: row[column.key],
|
|
1634
|
-
onChange: (event) => onRowChange({
|
|
1635
|
-
...row,
|
|
1636
|
-
[column.key]: event.target.value !== "" ? Number(event.target.value) : ""
|
|
1637
|
-
}),
|
|
1638
|
-
onBlur: () => onClose(true)
|
|
1639
|
-
});
|
|
1640
|
-
}
|
|
1641
986
|
const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
|
|
1642
987
|
const rowsFinded = [];
|
|
1643
988
|
if (set) {
|
|
@@ -1657,11 +1002,13 @@ const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
|
|
|
1657
1002
|
};
|
|
1658
1003
|
export {
|
|
1659
1004
|
DataGrid as D,
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
getDataGridRowsFromSet as
|
|
1663
|
-
|
|
1664
|
-
columnBooleanFormatter as
|
|
1665
|
-
|
|
1666
|
-
getDataGridComponentsDictionary as g
|
|
1005
|
+
useFilters as a,
|
|
1006
|
+
dictionary as b,
|
|
1007
|
+
getDataGridRowsFromSet as c,
|
|
1008
|
+
dataGridClasses as d,
|
|
1009
|
+
columnBooleanFormatter as e,
|
|
1010
|
+
columnDateFormatter as f,
|
|
1011
|
+
getDataGridComponentsDictionary as g,
|
|
1012
|
+
columnConcatenatedValuesFormatter as h,
|
|
1013
|
+
useDataGrid as u
|
|
1667
1014
|
};
|