@gridsuite/commons-ui 0.64.2 → 0.64.4
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/dist/components/CheckBoxList/check-box-list-item.d.ts +4 -0
- package/dist/components/CheckBoxList/check-box-list-item.js +33 -0
- package/dist/components/CheckBoxList/check-box-list-items.d.ts +4 -0
- package/dist/components/CheckBoxList/check-box-list-items.js +163 -0
- package/dist/components/CheckBoxList/check-box-list-type.d.ts +59 -0
- package/dist/components/CheckBoxList/check-box-list-type.js +1 -0
- package/dist/components/CheckBoxList/check-box-list.d.ts +4 -0
- package/dist/components/CheckBoxList/check-box-list.js +47 -0
- package/dist/components/CheckBoxList/clickable-check-box-item.d.ts +4 -0
- package/dist/components/CheckBoxList/clickable-check-box-item.js +13 -0
- package/dist/components/CheckBoxList/clickable-row-item.d.ts +4 -0
- package/dist/components/CheckBoxList/clickable-row-item.js +22 -0
- package/dist/components/CheckBoxList/draggable-check-box-list-item.d.ts +4 -0
- package/dist/components/CheckBoxList/draggable-check-box-list-item.js +51 -0
- package/dist/components/CheckBoxList/draggable-clickable-check-box-item.d.ts +4 -0
- package/dist/components/CheckBoxList/draggable-clickable-check-box-item.js +51 -0
- package/dist/components/CheckBoxList/draggable-clickable-row-item.d.ts +4 -0
- package/dist/components/CheckBoxList/draggable-clickable-row-item.js +52 -0
- package/dist/components/CheckBoxList/index.d.ts +3 -0
- package/dist/components/CheckBoxList/index.js +4 -0
- package/dist/components/FlatParameters/FlatParameters.js +5 -3
- package/dist/components/MultipleSelectionDialog/MultipleSelectionDialog.d.ts +5 -12
- package/dist/components/MultipleSelectionDialog/MultipleSelectionDialog.js +15 -55
- package/dist/components/filter/filter-creation-dialog.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/utils/ElementType.d.ts +1 -0
- package/dist/utils/ElementType.js +1 -0
- package/dist/utils/types.d.ts +2 -0
- package/package.json +3 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { CheckBoxListItemProps } from './check-box-list-type';
|
|
2
|
+
|
|
3
|
+
export declare function CheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, divider, isCheckboxClickableOnly, ...props }: CheckBoxListItemProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default CheckBoxListItem;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { ListItem } from "@mui/material";
|
|
4
|
+
import { ClickableCheckBoxItem } from "./clickable-check-box-item.js";
|
|
5
|
+
import { ClickableRowItem } from "./clickable-row-item.js";
|
|
6
|
+
function CheckBoxListItem({
|
|
7
|
+
item,
|
|
8
|
+
sx,
|
|
9
|
+
secondaryAction,
|
|
10
|
+
getItemId,
|
|
11
|
+
divider,
|
|
12
|
+
isCheckboxClickableOnly,
|
|
13
|
+
...props
|
|
14
|
+
}) {
|
|
15
|
+
const [hover, setHover] = useState("");
|
|
16
|
+
return /* @__PURE__ */ jsx(
|
|
17
|
+
ListItem,
|
|
18
|
+
{
|
|
19
|
+
secondaryAction: secondaryAction == null ? void 0 : secondaryAction(item, hover),
|
|
20
|
+
sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkboxList },
|
|
21
|
+
onMouseEnter: () => setHover(getItemId(item)),
|
|
22
|
+
onMouseLeave: () => setHover(""),
|
|
23
|
+
disablePadding: !isCheckboxClickableOnly,
|
|
24
|
+
disableGutters: true,
|
|
25
|
+
divider,
|
|
26
|
+
children: isCheckboxClickableOnly ? /* @__PURE__ */ jsx(ClickableCheckBoxItem, { ...props }) : /* @__PURE__ */ jsx(ClickableRowItem, { ...props })
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
export {
|
|
31
|
+
CheckBoxListItem,
|
|
32
|
+
CheckBoxListItem as default
|
|
33
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { CheckBoxListItemsProps } from './check-box-list-type';
|
|
2
|
+
|
|
3
|
+
export declare function CheckBoxListItems<T>({ items, selectedItems, onSelectionChange, getItemId, sx, secondaryAction, enableSecondaryActionOnHover, addSelectAllCheckbox, selectAllCheckBoxLabel, getItemLabel, isDisabled, isDndDragAndDropActive, isDragDisable, divider, isCheckboxClickableOnly, ...props }: CheckBoxListItemsProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default CheckBoxListItems;
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Draggable } from "react-beautiful-dnd";
|
|
3
|
+
import { useCallback, useMemo } from "react";
|
|
4
|
+
import { List, ListItem, ListItemButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
|
|
5
|
+
import { FormattedMessage } from "react-intl";
|
|
6
|
+
import { CheckBoxListItem } from "./check-box-list-item.js";
|
|
7
|
+
import { OverflowableText } from "../OverflowableText/overflowable-text.js";
|
|
8
|
+
import { DraggableCheckBoxListItem } from "./draggable-check-box-list-item.js";
|
|
9
|
+
function CheckBoxListItems({
|
|
10
|
+
items,
|
|
11
|
+
selectedItems,
|
|
12
|
+
onSelectionChange,
|
|
13
|
+
getItemId,
|
|
14
|
+
sx,
|
|
15
|
+
secondaryAction,
|
|
16
|
+
enableSecondaryActionOnHover,
|
|
17
|
+
addSelectAllCheckbox,
|
|
18
|
+
selectAllCheckBoxLabel,
|
|
19
|
+
getItemLabel,
|
|
20
|
+
isDisabled,
|
|
21
|
+
isDndDragAndDropActive,
|
|
22
|
+
isDragDisable,
|
|
23
|
+
divider,
|
|
24
|
+
isCheckboxClickableOnly,
|
|
25
|
+
...props
|
|
26
|
+
}) {
|
|
27
|
+
const handleOnchange = useCallback(
|
|
28
|
+
(newValues) => {
|
|
29
|
+
if (onSelectionChange) {
|
|
30
|
+
onSelectionChange(newValues);
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
[onSelectionChange]
|
|
34
|
+
);
|
|
35
|
+
const toggleSelectAll = useCallback(() => {
|
|
36
|
+
if (selectedItems.length !== items.length) {
|
|
37
|
+
handleOnchange(items);
|
|
38
|
+
} else {
|
|
39
|
+
handleOnchange([]);
|
|
40
|
+
}
|
|
41
|
+
}, [selectedItems, handleOnchange, items]);
|
|
42
|
+
const toggleSelection = useCallback(
|
|
43
|
+
(elementToToggleId) => {
|
|
44
|
+
const element = items == null ? void 0 : items.find((v) => getItemId(v) === elementToToggleId);
|
|
45
|
+
if (element === void 0) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const elementSelected = selectedItems.find((v) => getItemId(v) === elementToToggleId);
|
|
49
|
+
const newValues = [...selectedItems];
|
|
50
|
+
if (elementSelected === void 0) {
|
|
51
|
+
newValues.push(element);
|
|
52
|
+
handleOnchange(newValues);
|
|
53
|
+
} else {
|
|
54
|
+
handleOnchange(newValues.filter((v) => getItemId(v) !== elementToToggleId));
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
[items, selectedItems, getItemId, handleOnchange]
|
|
58
|
+
);
|
|
59
|
+
const isChecked = useCallback(
|
|
60
|
+
(item) => selectedItems.map((v) => getItemId(v)).includes(getItemId(item)),
|
|
61
|
+
[selectedItems, getItemId]
|
|
62
|
+
);
|
|
63
|
+
const handleSecondaryAction = (item, hover) => {
|
|
64
|
+
if (!secondaryAction) {
|
|
65
|
+
return null;
|
|
66
|
+
}
|
|
67
|
+
if (!enableSecondaryActionOnHover) {
|
|
68
|
+
return secondaryAction(item);
|
|
69
|
+
}
|
|
70
|
+
if (hover === getItemId(item)) {
|
|
71
|
+
return secondaryAction(item);
|
|
72
|
+
}
|
|
73
|
+
return null;
|
|
74
|
+
};
|
|
75
|
+
const selectAllLabel = useMemo(
|
|
76
|
+
() => selectAllCheckBoxLabel ?? "multiple_selection_dialog/selectAll",
|
|
77
|
+
[selectAllCheckBoxLabel]
|
|
78
|
+
);
|
|
79
|
+
return /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, ...props, children: [
|
|
80
|
+
addSelectAllCheckbox && /* @__PURE__ */ jsx(
|
|
81
|
+
ListItem,
|
|
82
|
+
{
|
|
83
|
+
disablePadding: true,
|
|
84
|
+
divider,
|
|
85
|
+
sx: {
|
|
86
|
+
"&:not(:last-child)": {
|
|
87
|
+
borderBottom: "2px solid"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
children: /* @__PURE__ */ jsxs(ListItemButton, { onClick: toggleSelectAll, sx: { paddingLeft: 0 }, children: [
|
|
91
|
+
/* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx(
|
|
92
|
+
Checkbox,
|
|
93
|
+
{
|
|
94
|
+
sx: { paddingLeft: 0 },
|
|
95
|
+
checked: selectedItems.length !== 0,
|
|
96
|
+
indeterminate: selectedItems.length > 0 && selectedItems.length !== items.length
|
|
97
|
+
}
|
|
98
|
+
) }),
|
|
99
|
+
/* @__PURE__ */ jsx(ListItemText, { sx: { display: "flex" }, disableTypography: true, children: /* @__PURE__ */ jsx(
|
|
100
|
+
OverflowableText,
|
|
101
|
+
{
|
|
102
|
+
text: /* @__PURE__ */ jsx(FormattedMessage, { id: selectAllLabel, defaultMessage: selectAllLabel })
|
|
103
|
+
}
|
|
104
|
+
) })
|
|
105
|
+
] })
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
items == null ? void 0 : items.map((item, index) => {
|
|
109
|
+
const label = getItemLabel ? getItemLabel(item) : getItemId(item);
|
|
110
|
+
const disabled = isDisabled ? isDisabled(item) : false;
|
|
111
|
+
const addDivider = divider && index < items.length - 1;
|
|
112
|
+
if (isDndDragAndDropActive) {
|
|
113
|
+
return /* @__PURE__ */ jsx(
|
|
114
|
+
Draggable,
|
|
115
|
+
{
|
|
116
|
+
draggableId: getItemId(item),
|
|
117
|
+
index,
|
|
118
|
+
isDragDisabled: isDragDisable,
|
|
119
|
+
children: (provided) => /* @__PURE__ */ jsx(
|
|
120
|
+
DraggableCheckBoxListItem,
|
|
121
|
+
{
|
|
122
|
+
item,
|
|
123
|
+
checked: isChecked(item),
|
|
124
|
+
label,
|
|
125
|
+
onClick: () => toggleSelection(getItemId(item)),
|
|
126
|
+
sx,
|
|
127
|
+
disabled,
|
|
128
|
+
getItemId,
|
|
129
|
+
secondaryAction: handleSecondaryAction,
|
|
130
|
+
isDragDisable,
|
|
131
|
+
provided,
|
|
132
|
+
divider: addDivider,
|
|
133
|
+
isCheckboxClickableOnly
|
|
134
|
+
},
|
|
135
|
+
getItemId(item)
|
|
136
|
+
)
|
|
137
|
+
},
|
|
138
|
+
getItemId(item)
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
return /* @__PURE__ */ jsx(
|
|
142
|
+
CheckBoxListItem,
|
|
143
|
+
{
|
|
144
|
+
item,
|
|
145
|
+
checked: isChecked(item),
|
|
146
|
+
label,
|
|
147
|
+
onClick: () => toggleSelection(getItemId(item)),
|
|
148
|
+
disabled,
|
|
149
|
+
getItemId,
|
|
150
|
+
sx,
|
|
151
|
+
secondaryAction: handleSecondaryAction,
|
|
152
|
+
divider: addDivider,
|
|
153
|
+
isCheckboxClickableOnly
|
|
154
|
+
},
|
|
155
|
+
getItemId(item)
|
|
156
|
+
);
|
|
157
|
+
})
|
|
158
|
+
] }, "droppable-checkbox-list");
|
|
159
|
+
}
|
|
160
|
+
export {
|
|
161
|
+
CheckBoxListItems,
|
|
162
|
+
CheckBoxListItems as default
|
|
163
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { SxProps } from '@mui/system';
|
|
2
|
+
import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
|
|
3
|
+
import { default as React } from 'react';
|
|
4
|
+
|
|
5
|
+
export interface CheckBoxListItemSxProps {
|
|
6
|
+
checkBoxIcon?: SxProps;
|
|
7
|
+
label?: SxProps;
|
|
8
|
+
checkboxList?: SxProps;
|
|
9
|
+
checkboxButton?: SxProps;
|
|
10
|
+
checkbox?: SxProps;
|
|
11
|
+
}
|
|
12
|
+
export interface CheckBoxListItemProps<T> {
|
|
13
|
+
item: T;
|
|
14
|
+
sx?: CheckBoxListItemSxProps;
|
|
15
|
+
label: string;
|
|
16
|
+
onClick: () => void;
|
|
17
|
+
secondaryAction?: (item: T, hover: string) => React.ReactElement | null;
|
|
18
|
+
getItemId: (item: T) => string;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
divider?: boolean;
|
|
21
|
+
checked: boolean;
|
|
22
|
+
isCheckboxClickableOnly?: boolean;
|
|
23
|
+
}
|
|
24
|
+
export interface DraggableCheckBoxListItemProps<T> extends CheckBoxListItemProps<T> {
|
|
25
|
+
isDragDisable?: boolean;
|
|
26
|
+
provided: DraggableProvided;
|
|
27
|
+
}
|
|
28
|
+
export interface CheckBoxListItemsProps<T> {
|
|
29
|
+
items: T[];
|
|
30
|
+
selectedItems: T[];
|
|
31
|
+
onSelectionChange?: (selectedItems: T[]) => void;
|
|
32
|
+
getItemId: (item: T) => string;
|
|
33
|
+
getItemLabel?: (item: T) => string;
|
|
34
|
+
secondaryAction?: (item: T) => React.ReactElement | null;
|
|
35
|
+
enableSecondaryActionOnHover?: boolean;
|
|
36
|
+
isDisabled?: (item: T) => boolean;
|
|
37
|
+
addSelectAllCheckbox?: boolean;
|
|
38
|
+
selectAllCheckBoxLabel?: string;
|
|
39
|
+
sx?: CheckBoxListItemSxProps;
|
|
40
|
+
isDndDragAndDropActive?: boolean;
|
|
41
|
+
isDragDisable?: boolean;
|
|
42
|
+
divider?: boolean;
|
|
43
|
+
isCheckboxClickableOnly?: boolean;
|
|
44
|
+
}
|
|
45
|
+
export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
|
|
46
|
+
onDragStart?: (dragStart: DragStart) => void;
|
|
47
|
+
onDragEnd?: (dropResult: DropResult) => void;
|
|
48
|
+
}
|
|
49
|
+
export interface ClickableItemProps {
|
|
50
|
+
sx?: CheckBoxListItemSxProps;
|
|
51
|
+
label: string;
|
|
52
|
+
onClick: () => void;
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
checked: boolean;
|
|
55
|
+
}
|
|
56
|
+
export interface DraggableClickableItemProps extends ClickableItemProps {
|
|
57
|
+
provided: DraggableProvided;
|
|
58
|
+
isHighlighted: boolean;
|
|
59
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { CheckboxListProps } from './check-box-list-type';
|
|
2
|
+
|
|
3
|
+
export declare function CheckboxList<T>({ isDndDragAndDropActive, onDragStart, onDragEnd, isDragDisable, ...props }: CheckboxListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default CheckboxList;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Box } from "@mui/material";
|
|
4
|
+
import { DragDropContext, Droppable } from "react-beautiful-dnd";
|
|
5
|
+
import { CheckBoxListItems } from "./check-box-list-items.js";
|
|
6
|
+
function CheckboxList({
|
|
7
|
+
isDndDragAndDropActive = false,
|
|
8
|
+
onDragStart,
|
|
9
|
+
onDragEnd,
|
|
10
|
+
isDragDisable = false,
|
|
11
|
+
...props
|
|
12
|
+
}) {
|
|
13
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
14
|
+
const checkBoxField = /* @__PURE__ */ jsx(
|
|
15
|
+
CheckBoxListItems,
|
|
16
|
+
{
|
|
17
|
+
isDndDragAndDropActive,
|
|
18
|
+
isDragDisable: isDragDisable || isDragging,
|
|
19
|
+
...props
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
return isDndDragAndDropActive ? /* @__PURE__ */ jsx(
|
|
23
|
+
DragDropContext,
|
|
24
|
+
{
|
|
25
|
+
onDragEnd: (dropResult) => {
|
|
26
|
+
if (onDragEnd) {
|
|
27
|
+
onDragEnd(dropResult);
|
|
28
|
+
}
|
|
29
|
+
setIsDragging(false);
|
|
30
|
+
},
|
|
31
|
+
onDragStart: (dragStart) => {
|
|
32
|
+
if (onDragStart) {
|
|
33
|
+
onDragStart(dragStart);
|
|
34
|
+
}
|
|
35
|
+
setIsDragging(true);
|
|
36
|
+
},
|
|
37
|
+
children: /* @__PURE__ */ jsx(Droppable, { droppableId: "droppable-checkbox-list", isDropDisabled: isDragDisable, children: (provided) => /* @__PURE__ */ jsxs(Box, { ...provided.droppableProps, ref: provided.innerRef, children: [
|
|
38
|
+
checkBoxField,
|
|
39
|
+
provided.placeholder
|
|
40
|
+
] }) })
|
|
41
|
+
}
|
|
42
|
+
) : checkBoxField;
|
|
43
|
+
}
|
|
44
|
+
export {
|
|
45
|
+
CheckboxList,
|
|
46
|
+
CheckboxList as default
|
|
47
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ListItemIcon, Checkbox, ListItemText } from "@mui/material";
|
|
3
|
+
import { OverflowableText } from "../OverflowableText/overflowable-text.js";
|
|
4
|
+
function ClickableCheckBoxItem({ sx, label, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
6
|
+
/* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
|
|
7
|
+
/* @__PURE__ */ jsx(ListItemText, { sx: { display: "flex" }, disableTypography: true, children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label }) })
|
|
8
|
+
] });
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
ClickableCheckBoxItem,
|
|
12
|
+
ClickableCheckBoxItem as default
|
|
13
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ListItemButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
|
|
3
|
+
import { OverflowableText } from "../OverflowableText/overflowable-text.js";
|
|
4
|
+
function ClickableRowItem({ sx, disabled, label, onClick, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsxs(ListItemButton, { sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkboxButton }, disabled, onClick, children: [
|
|
6
|
+
/* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
|
|
7
|
+
/* @__PURE__ */ jsx(
|
|
8
|
+
ListItemText,
|
|
9
|
+
{
|
|
10
|
+
sx: {
|
|
11
|
+
display: "flex"
|
|
12
|
+
},
|
|
13
|
+
disableTypography: true,
|
|
14
|
+
children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
|
|
15
|
+
}
|
|
16
|
+
)
|
|
17
|
+
] });
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
ClickableRowItem,
|
|
21
|
+
ClickableRowItem as default
|
|
22
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { DraggableCheckBoxListItemProps } from './check-box-list-type';
|
|
2
|
+
|
|
3
|
+
export declare function DraggableCheckBoxListItem<T>({ item, sx, secondaryAction, getItemId, isDragDisable, provided, divider, isCheckboxClickableOnly, ...props }: DraggableCheckBoxListItemProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default DraggableCheckBoxListItem;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { ListItem } from "@mui/material";
|
|
4
|
+
import { DraggableClickableCheckBoxItem } from "./draggable-clickable-check-box-item.js";
|
|
5
|
+
import { DraggableClickableRowItem } from "./draggable-clickable-row-item.js";
|
|
6
|
+
function DraggableCheckBoxListItem({
|
|
7
|
+
item,
|
|
8
|
+
sx,
|
|
9
|
+
secondaryAction,
|
|
10
|
+
getItemId,
|
|
11
|
+
isDragDisable,
|
|
12
|
+
provided,
|
|
13
|
+
divider,
|
|
14
|
+
isCheckboxClickableOnly,
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
const [hover, setHover] = useState("");
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
ListItem,
|
|
20
|
+
{
|
|
21
|
+
secondaryAction: secondaryAction == null ? void 0 : secondaryAction(item, hover),
|
|
22
|
+
sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkboxList },
|
|
23
|
+
onMouseEnter: () => setHover(getItemId(item)),
|
|
24
|
+
onMouseLeave: () => setHover(""),
|
|
25
|
+
disablePadding: !isCheckboxClickableOnly,
|
|
26
|
+
disableGutters: true,
|
|
27
|
+
divider,
|
|
28
|
+
ref: provided.innerRef,
|
|
29
|
+
...provided.draggableProps,
|
|
30
|
+
children: isCheckboxClickableOnly ? /* @__PURE__ */ jsx(
|
|
31
|
+
DraggableClickableCheckBoxItem,
|
|
32
|
+
{
|
|
33
|
+
provided,
|
|
34
|
+
isHighlighted: hover === getItemId(item) && !isDragDisable,
|
|
35
|
+
...props
|
|
36
|
+
}
|
|
37
|
+
) : /* @__PURE__ */ jsx(
|
|
38
|
+
DraggableClickableRowItem,
|
|
39
|
+
{
|
|
40
|
+
provided,
|
|
41
|
+
isHighlighted: hover === getItemId(item) && !isDragDisable,
|
|
42
|
+
...props
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
export {
|
|
49
|
+
DraggableCheckBoxListItem,
|
|
50
|
+
DraggableCheckBoxListItem as default
|
|
51
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { DraggableClickableItemProps } from './check-box-list-type';
|
|
2
|
+
|
|
3
|
+
export declare function DraggableClickableCheckBoxItem({ sx, disabled, provided, isHighlighted, label, ...props }: DraggableClickableItemProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default DraggableClickableCheckBoxItem;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { IconButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
|
|
3
|
+
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
|
4
|
+
import { OverflowableText } from "../OverflowableText/overflowable-text.js";
|
|
5
|
+
const styles = {
|
|
6
|
+
dragIcon: (theme) => ({
|
|
7
|
+
padding: "unset",
|
|
8
|
+
border: theme.spacing(0),
|
|
9
|
+
borderRadius: theme.spacing(0),
|
|
10
|
+
zIndex: 90
|
|
11
|
+
})
|
|
12
|
+
};
|
|
13
|
+
function DraggableClickableCheckBoxItem({
|
|
14
|
+
sx,
|
|
15
|
+
disabled,
|
|
16
|
+
provided,
|
|
17
|
+
isHighlighted,
|
|
18
|
+
label,
|
|
19
|
+
...props
|
|
20
|
+
}) {
|
|
21
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
22
|
+
/* @__PURE__ */ jsx(
|
|
23
|
+
IconButton,
|
|
24
|
+
{
|
|
25
|
+
...provided.dragHandleProps,
|
|
26
|
+
size: "small",
|
|
27
|
+
sx: {
|
|
28
|
+
opacity: isHighlighted ? "1" : "0",
|
|
29
|
+
padding: "unset",
|
|
30
|
+
...styles.dragIcon
|
|
31
|
+
},
|
|
32
|
+
children: /* @__PURE__ */ jsx(DragIndicatorIcon, { spacing: 0 })
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
/* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
|
|
36
|
+
/* @__PURE__ */ jsx(
|
|
37
|
+
ListItemText,
|
|
38
|
+
{
|
|
39
|
+
sx: {
|
|
40
|
+
display: "flex"
|
|
41
|
+
},
|
|
42
|
+
disableTypography: true,
|
|
43
|
+
children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
] });
|
|
47
|
+
}
|
|
48
|
+
export {
|
|
49
|
+
DraggableClickableCheckBoxItem,
|
|
50
|
+
DraggableClickableCheckBoxItem as default
|
|
51
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { DraggableClickableItemProps } from './check-box-list-type';
|
|
2
|
+
|
|
3
|
+
export declare function DraggableClickableRowItem({ sx, disabled, onClick, provided, isHighlighted, label, ...props }: DraggableClickableItemProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default DraggableClickableRowItem;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ListItemButton, IconButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
|
|
3
|
+
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
|
4
|
+
import { OverflowableText } from "../OverflowableText/overflowable-text.js";
|
|
5
|
+
const styles = {
|
|
6
|
+
dragIcon: (theme) => ({
|
|
7
|
+
padding: "unset",
|
|
8
|
+
border: theme.spacing(0),
|
|
9
|
+
borderRadius: theme.spacing(0),
|
|
10
|
+
zIndex: 90
|
|
11
|
+
})
|
|
12
|
+
};
|
|
13
|
+
function DraggableClickableRowItem({
|
|
14
|
+
sx,
|
|
15
|
+
disabled,
|
|
16
|
+
onClick,
|
|
17
|
+
provided,
|
|
18
|
+
isHighlighted,
|
|
19
|
+
label,
|
|
20
|
+
...props
|
|
21
|
+
}) {
|
|
22
|
+
return /* @__PURE__ */ jsxs(ListItemButton, { sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkboxButton }, disabled, onClick, children: [
|
|
23
|
+
/* @__PURE__ */ jsx(
|
|
24
|
+
IconButton,
|
|
25
|
+
{
|
|
26
|
+
...provided.dragHandleProps,
|
|
27
|
+
size: "small",
|
|
28
|
+
sx: {
|
|
29
|
+
opacity: isHighlighted ? "1" : "0",
|
|
30
|
+
padding: "unset",
|
|
31
|
+
...styles.dragIcon
|
|
32
|
+
},
|
|
33
|
+
children: /* @__PURE__ */ jsx(DragIndicatorIcon, { spacing: 0 })
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
|
|
37
|
+
/* @__PURE__ */ jsx(
|
|
38
|
+
ListItemText,
|
|
39
|
+
{
|
|
40
|
+
sx: {
|
|
41
|
+
display: "flex"
|
|
42
|
+
},
|
|
43
|
+
disableTypography: true,
|
|
44
|
+
children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
|
|
45
|
+
}
|
|
46
|
+
)
|
|
47
|
+
] });
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
DraggableClickableRowItem,
|
|
51
|
+
DraggableClickableRowItem as default
|
|
52
|
+
};
|
|
@@ -247,11 +247,13 @@ function FlatParameters({
|
|
|
247
247
|
/* @__PURE__ */ jsx(
|
|
248
248
|
MultipleSelectionDialog,
|
|
249
249
|
{
|
|
250
|
-
|
|
250
|
+
items: allOptions,
|
|
251
251
|
titleId: getSelectionDialogName(param.name),
|
|
252
252
|
open: openSelector,
|
|
253
|
-
|
|
254
|
-
|
|
253
|
+
getItemLabel: (option) => getTranslatedValue(param.name, option),
|
|
254
|
+
getItemId: (o) => o,
|
|
255
|
+
selectedItems: fieldValue,
|
|
256
|
+
addSelectAllCheckbox: true,
|
|
255
257
|
handleClose: () => setOpenSelector(false),
|
|
256
258
|
handleValidate: (selectedOptions) => {
|
|
257
259
|
onFieldChange(selectedOptions, param);
|
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
5
|
-
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
6
|
-
*/
|
|
7
|
-
export interface MultipleSelectionDialogProps {
|
|
8
|
-
options: string[];
|
|
9
|
-
selectedOptions: string[];
|
|
1
|
+
import { CheckboxListProps } from '../CheckBoxList/check-box-list-type';
|
|
2
|
+
|
|
3
|
+
export interface MultipleSelectionDialogProps<T> extends CheckboxListProps<T> {
|
|
10
4
|
open: boolean;
|
|
11
|
-
getOptionLabel: (option: string) => string;
|
|
12
5
|
handleClose: () => void;
|
|
13
|
-
handleValidate: (
|
|
6
|
+
handleValidate: (options: T[]) => void;
|
|
14
7
|
titleId: string;
|
|
15
8
|
}
|
|
16
|
-
declare function MultipleSelectionDialog({
|
|
9
|
+
declare function MultipleSelectionDialog<T>({ open, handleClose, handleValidate, selectedItems, titleId, ...props }: MultipleSelectionDialogProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
17
10
|
export default MultipleSelectionDialog;
|
|
@@ -1,67 +1,27 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Dialog, DialogTitle, DialogContent,
|
|
2
|
+
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material";
|
|
3
3
|
import { FormattedMessage } from "react-intl";
|
|
4
4
|
import { useState } from "react";
|
|
5
|
+
import { CheckboxList } from "../CheckBoxList/check-box-list.js";
|
|
5
6
|
function MultipleSelectionDialog({
|
|
6
|
-
options,
|
|
7
|
-
selectedOptions,
|
|
8
7
|
open,
|
|
9
|
-
getOptionLabel,
|
|
10
8
|
handleClose,
|
|
11
9
|
handleValidate,
|
|
12
|
-
|
|
10
|
+
selectedItems,
|
|
11
|
+
titleId,
|
|
12
|
+
...props
|
|
13
13
|
}) {
|
|
14
|
-
const [selectedIds, setSelectedIds] = useState(
|
|
15
|
-
|
|
16
|
-
if (selectedIds.length !== options.length) {
|
|
17
|
-
setSelectedIds(options);
|
|
18
|
-
} else {
|
|
19
|
-
setSelectedIds([]);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
const handleOptionSelection = (option) => {
|
|
23
|
-
setSelectedIds((oldValues) => {
|
|
24
|
-
if (oldValues.includes(option)) {
|
|
25
|
-
return oldValues.filter((o) => o !== option);
|
|
26
|
-
}
|
|
27
|
-
return [...oldValues, option];
|
|
28
|
-
});
|
|
29
|
-
};
|
|
30
|
-
return /* @__PURE__ */ jsxs(Dialog, { open, children: [
|
|
14
|
+
const [selectedIds, setSelectedIds] = useState(selectedItems ?? []);
|
|
15
|
+
return /* @__PURE__ */ jsxs(Dialog, { open, fullWidth: true, children: [
|
|
31
16
|
/* @__PURE__ */ jsx(DialogTitle, { children: titleId }),
|
|
32
|
-
/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
checked: selectedIds.length === options.length,
|
|
41
|
-
indeterminate: !!selectedIds.length && selectedIds.length !== options.length,
|
|
42
|
-
onChange: handleSelectAll
|
|
43
|
-
}
|
|
44
|
-
)
|
|
45
|
-
}
|
|
46
|
-
) }),
|
|
47
|
-
/* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(List, { children: options.map((option) => {
|
|
48
|
-
const optionId = option;
|
|
49
|
-
const label = getOptionLabel(option);
|
|
50
|
-
return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
|
|
51
|
-
FormControlLabel,
|
|
52
|
-
{
|
|
53
|
-
label,
|
|
54
|
-
control: /* @__PURE__ */ jsx(
|
|
55
|
-
Checkbox,
|
|
56
|
-
{
|
|
57
|
-
checked: selectedIds.includes(optionId),
|
|
58
|
-
onChange: () => handleOptionSelection(optionId)
|
|
59
|
-
}
|
|
60
|
-
)
|
|
61
|
-
}
|
|
62
|
-
) }, optionId);
|
|
63
|
-
}) }) })
|
|
64
|
-
] }) }),
|
|
17
|
+
/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
|
|
18
|
+
CheckboxList,
|
|
19
|
+
{
|
|
20
|
+
selectedItems: selectedIds,
|
|
21
|
+
onSelectionChange: (values) => setSelectedIds(values),
|
|
22
|
+
...props
|
|
23
|
+
}
|
|
24
|
+
) }),
|
|
65
25
|
/* @__PURE__ */ jsxs(DialogActions, { children: [
|
|
66
26
|
/* @__PURE__ */ jsx(Button, { onClick: () => handleClose(), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "multiple_selection_dialog/cancel" }) }),
|
|
67
27
|
/* @__PURE__ */ jsx(Button, { onClick: () => handleValidate(selectedIds), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "multiple_selection_dialog/validate" }) })
|
|
@@ -3,7 +3,7 @@ import { UUID } from 'crypto';
|
|
|
3
3
|
|
|
4
4
|
export interface FilterCreationDialogProps {
|
|
5
5
|
open: boolean;
|
|
6
|
-
onClose: () => void;
|
|
6
|
+
onClose: (e?: unknown, nextSelectedDirectoryId?: string | null) => void;
|
|
7
7
|
activeDirectory?: UUID;
|
|
8
8
|
elementExists?: ElementExistsType;
|
|
9
9
|
language?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export type { OverflowableTextProps } from './components/OverflowableText';
|
|
|
24
24
|
export { ElementSearchDialog } from './components/ElementSearchDialog';
|
|
25
25
|
export type { ElementSearchDialogProps } from './components/ElementSearchDialog';
|
|
26
26
|
export { default as FlatParameters } from './components/FlatParameters';
|
|
27
|
+
export { default as CheckboxList } from './components/CheckBoxList/check-box-list';
|
|
27
28
|
export type { FlatParametersProps, Parameter } from './components/FlatParameters';
|
|
28
29
|
export { default as ExpandableGroup } from './components/ExpandableGroup';
|
|
29
30
|
export type { ExpandableGroupProps } from './components/ExpandableGroup';
|
package/dist/index.js
CHANGED
|
@@ -17,6 +17,7 @@ import { default as default10 } from "./components/ElementSearchDialog/tag-rende
|
|
|
17
17
|
import { ElementSearchInput } from "./components/ElementSearchDialog/element-search-input.js";
|
|
18
18
|
import { default as default11 } from "./components/ElementSearchDialog/use-element-search.js";
|
|
19
19
|
import { FlatParameters } from "./components/FlatParameters/FlatParameters.js";
|
|
20
|
+
import { CheckboxList } from "./components/CheckBoxList/check-box-list.js";
|
|
20
21
|
import { default as default12 } from "./components/ExpandableGroup/expandable-group.js";
|
|
21
22
|
import { default as default13 } from "./components/MultipleSelectionDialog/MultipleSelectionDialog.js";
|
|
22
23
|
import { default as default14 } from "./components/dialogs/custom-mui-dialog.js";
|
|
@@ -137,6 +138,7 @@ export {
|
|
|
137
138
|
default53 as CardErrorBoundary,
|
|
138
139
|
ChangeWays,
|
|
139
140
|
default68 as CheckboxInput,
|
|
141
|
+
CheckboxList,
|
|
140
142
|
default88 as CountriesInput,
|
|
141
143
|
default84 as CriteriaBasedFilterEditionDialog,
|
|
142
144
|
default18 as CriteriaBasedForm,
|
|
@@ -6,6 +6,7 @@ export declare enum ElementType {
|
|
|
6
6
|
CASE = "CASE",
|
|
7
7
|
FILTER = "FILTER",
|
|
8
8
|
MODIFICATION = "MODIFICATION",
|
|
9
|
+
PARAMETERS = "PARAMETERS",
|
|
9
10
|
CONTINGENCY_LIST = "CONTINGENCY_LIST",
|
|
10
11
|
VOLTAGE_INIT_PARAMETERS = "VOLTAGE_INIT_PARAMETERS",
|
|
11
12
|
SECURITY_ANALYSIS_PARAMETERS = "SECURITY_ANALYSIS_PARAMETERS",
|
|
@@ -4,6 +4,7 @@ var ElementType = /* @__PURE__ */ ((ElementType2) => {
|
|
|
4
4
|
ElementType2["CASE"] = "CASE";
|
|
5
5
|
ElementType2["FILTER"] = "FILTER";
|
|
6
6
|
ElementType2["MODIFICATION"] = "MODIFICATION";
|
|
7
|
+
ElementType2["PARAMETERS"] = "PARAMETERS";
|
|
7
8
|
ElementType2["CONTINGENCY_LIST"] = "CONTINGENCY_LIST";
|
|
8
9
|
ElementType2["VOLTAGE_INIT_PARAMETERS"] = "VOLTAGE_INIT_PARAMETERS";
|
|
9
10
|
ElementType2["SECURITY_ANALYSIS_PARAMETERS"] = "SECURITY_ANALYSIS_PARAMETERS";
|
package/dist/utils/types.d.ts
CHANGED
|
@@ -20,6 +20,8 @@ export type ElementAttributes = {
|
|
|
20
20
|
parentUuid: null | UUID;
|
|
21
21
|
specificMetadata: Record<string, object>;
|
|
22
22
|
uploading?: boolean;
|
|
23
|
+
hasMetadata?: boolean;
|
|
24
|
+
subtype?: string;
|
|
23
25
|
};
|
|
24
26
|
export type Equipment = typeof Substation | typeof Line | typeof Generator | typeof Load | typeof Battery | typeof SVC | typeof DanglingLine | typeof LCC | typeof VSC | typeof Hvdc | typeof BusBar | typeof TwoWindingTransfo | typeof ThreeWindingTransfo | typeof ShuntCompensator | typeof VoltageLevel;
|
|
25
27
|
export type EquipmentType = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridsuite/commons-ui",
|
|
3
|
-
"version": "0.64.
|
|
3
|
+
"version": "0.64.4",
|
|
4
4
|
"description": "common react components for gridsuite applications",
|
|
5
5
|
"engines": {
|
|
6
6
|
"npm": ">=9",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"memoize-one": "^6.0.0",
|
|
38
38
|
"oidc-client": "^1.11.5",
|
|
39
39
|
"prop-types": "^15.8.1",
|
|
40
|
+
"react-beautiful-dnd": "^13.1.1",
|
|
40
41
|
"react-csv-downloader": "^3.1.0",
|
|
41
42
|
"react-dnd": "^16.0.1",
|
|
42
43
|
"react-dnd-html5-backend": "^16.0.1",
|
|
@@ -89,6 +90,7 @@
|
|
|
89
90
|
"@types/node": "^18.19.31",
|
|
90
91
|
"@types/prop-types": "^15.7.12",
|
|
91
92
|
"@types/react": "^18.2.75",
|
|
93
|
+
"@types/react-beautiful-dnd": "^13.1.8",
|
|
92
94
|
"@types/react-dom": "^18.2.24",
|
|
93
95
|
"@types/react-resizable": "^3.0.7",
|
|
94
96
|
"@types/react-virtualized": "^9.21.29",
|