@etsoo/materialui 1.0.94 → 1.0.96
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/lib/ItemList.d.ts +8 -0
- package/lib/ItemList.js +5 -4
- package/package.json +1 -1
- package/src/ItemList.tsx +18 -7
package/lib/ItemList.d.ts
CHANGED
|
@@ -12,6 +12,10 @@ export interface ItemListProps<T extends object, D extends DataTypes.Keys<T>, L
|
|
|
12
12
|
* Style class name
|
|
13
13
|
*/
|
|
14
14
|
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Keep click for all items
|
|
17
|
+
*/
|
|
18
|
+
keepClick?: boolean;
|
|
15
19
|
/**
|
|
16
20
|
* Id field name
|
|
17
21
|
*/
|
|
@@ -20,6 +24,10 @@ export interface ItemListProps<T extends object, D extends DataTypes.Keys<T>, L
|
|
|
20
24
|
* Label field name or callback
|
|
21
25
|
*/
|
|
22
26
|
labelField?: L | ((item: T) => string);
|
|
27
|
+
/**
|
|
28
|
+
* Minimum width
|
|
29
|
+
*/
|
|
30
|
+
minWidth?: number | string;
|
|
23
31
|
/**
|
|
24
32
|
* Button icon
|
|
25
33
|
*/
|
package/lib/ItemList.js
CHANGED
|
@@ -8,7 +8,7 @@ import { DataTypes } from '@etsoo/shared';
|
|
|
8
8
|
export function ItemList(props) {
|
|
9
9
|
var _a;
|
|
10
10
|
// properties destructure
|
|
11
|
-
const { buttonLabel, className, color = 'primary', items, idField = 'id', labelField = 'label', icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
|
|
11
|
+
const { buttonLabel, className, color = 'primary', keepClick = false, items, idField = 'id', labelField = 'label', minWidth, icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
|
|
12
12
|
// Get label
|
|
13
13
|
const getLabel = (item) => {
|
|
14
14
|
var _a;
|
|
@@ -59,11 +59,12 @@ export function ItemList(props) {
|
|
|
59
59
|
return (React.createElement(React.Fragment, null,
|
|
60
60
|
React.createElement(Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler }, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : getLabel(currentItem)),
|
|
61
61
|
React.createElement(Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler },
|
|
62
|
-
title &&
|
|
63
|
-
React.createElement(DialogContent,
|
|
62
|
+
title && React.createElement(DialogTitle, { id: "dialog-title" }, title),
|
|
63
|
+
React.createElement(DialogContent, { sx: { minWidth } },
|
|
64
64
|
React.createElement(List, null, items.map((item) => {
|
|
65
65
|
const id = item[idField];
|
|
66
|
-
return (React.createElement(ListItemButton, { key: id, disabled: id === currentItem[idField]
|
|
66
|
+
return (React.createElement(ListItemButton, { key: id, disabled: id === currentItem[idField] &&
|
|
67
|
+
!keepClick, onClick: () => closeItemHandler(item) },
|
|
67
68
|
React.createElement(ListItemText, null, getLabel(item))));
|
|
68
69
|
}))))));
|
|
69
70
|
}
|
package/package.json
CHANGED
package/src/ItemList.tsx
CHANGED
|
@@ -33,6 +33,11 @@ export interface ItemListProps<
|
|
|
33
33
|
*/
|
|
34
34
|
className?: string;
|
|
35
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Keep click for all items
|
|
38
|
+
*/
|
|
39
|
+
keepClick?: boolean;
|
|
40
|
+
|
|
36
41
|
/**
|
|
37
42
|
* Id field name
|
|
38
43
|
*/
|
|
@@ -43,6 +48,11 @@ export interface ItemListProps<
|
|
|
43
48
|
*/
|
|
44
49
|
labelField?: L | ((item: T) => string);
|
|
45
50
|
|
|
51
|
+
/**
|
|
52
|
+
* Minimum width
|
|
53
|
+
*/
|
|
54
|
+
minWidth?: number | string;
|
|
55
|
+
|
|
46
56
|
/**
|
|
47
57
|
* Button icon
|
|
48
58
|
*/
|
|
@@ -98,9 +108,11 @@ export function ItemList<
|
|
|
98
108
|
buttonLabel,
|
|
99
109
|
className,
|
|
100
110
|
color = 'primary',
|
|
111
|
+
keepClick = false,
|
|
101
112
|
items,
|
|
102
113
|
idField = 'id' as D,
|
|
103
114
|
labelField = 'label' as L,
|
|
115
|
+
minWidth,
|
|
104
116
|
icon,
|
|
105
117
|
onClose,
|
|
106
118
|
selectedValue,
|
|
@@ -183,19 +195,18 @@ export function ItemList<
|
|
|
183
195
|
open={open}
|
|
184
196
|
onClose={closeHandler}
|
|
185
197
|
>
|
|
186
|
-
{title &&
|
|
187
|
-
|
|
188
|
-
{title}
|
|
189
|
-
</DialogTitle>
|
|
190
|
-
)}
|
|
191
|
-
<DialogContent>
|
|
198
|
+
{title && <DialogTitle id="dialog-title">{title}</DialogTitle>}
|
|
199
|
+
<DialogContent sx={{ minWidth }}>
|
|
192
200
|
<List>
|
|
193
201
|
{items.map((item) => {
|
|
194
202
|
const id = item[idField];
|
|
195
203
|
return (
|
|
196
204
|
<ListItemButton
|
|
197
205
|
key={id as unknown as React.Key}
|
|
198
|
-
disabled={
|
|
206
|
+
disabled={
|
|
207
|
+
id === currentItem[idField] &&
|
|
208
|
+
!keepClick
|
|
209
|
+
}
|
|
199
210
|
onClick={() => closeItemHandler(item)}
|
|
200
211
|
>
|
|
201
212
|
<ListItemText>
|