@etsoo/materialui 1.5.61 → 1.5.62
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/cjs/DnDList.js +20 -21
- package/lib/mjs/DnDList.js +20 -21
- package/package.json +7 -7
- package/src/DnDList.tsx +25 -24
package/lib/cjs/DnDList.js
CHANGED
|
@@ -65,8 +65,10 @@ function DnDList(props) {
|
|
|
65
65
|
setItems(props.items);
|
|
66
66
|
}, [props.items]);
|
|
67
67
|
const doFormChange = react_1.default.useCallback((newItems) => {
|
|
68
|
-
if (onFormChange)
|
|
69
|
-
|
|
68
|
+
if (onFormChange) {
|
|
69
|
+
const locals = Array.isArray(newItems) ? newItems : items;
|
|
70
|
+
onFormChange(locals);
|
|
71
|
+
}
|
|
70
72
|
}, [items, onFormChange]);
|
|
71
73
|
const changeItems = react_1.default.useCallback((newItems) => {
|
|
72
74
|
// Possible to alter items with the handler
|
|
@@ -153,38 +155,27 @@ function DnDList(props) {
|
|
|
153
155
|
]);
|
|
154
156
|
});
|
|
155
157
|
}, []);
|
|
156
|
-
const doChange = react_1.default.useCallback(() => doFormChange(), []);
|
|
157
158
|
const setupDiv = (div, clearup = false) => {
|
|
158
159
|
// Inputs
|
|
159
160
|
div
|
|
160
161
|
.querySelectorAll("input")
|
|
161
162
|
.forEach((input) => clearup
|
|
162
|
-
? input.removeEventListener("change",
|
|
163
|
-
: input.addEventListener("change",
|
|
163
|
+
? input.removeEventListener("change", doFormChange)
|
|
164
|
+
: input.addEventListener("change", doFormChange));
|
|
164
165
|
// Textareas
|
|
165
166
|
div
|
|
166
167
|
.querySelectorAll("textarea")
|
|
167
168
|
.forEach((input) => clearup
|
|
168
|
-
? input.removeEventListener("change",
|
|
169
|
-
: input.addEventListener("change",
|
|
169
|
+
? input.removeEventListener("change", doFormChange)
|
|
170
|
+
: input.addEventListener("change", doFormChange));
|
|
170
171
|
// Select
|
|
171
172
|
div
|
|
172
173
|
.querySelectorAll("select")
|
|
173
174
|
.forEach((input) => clearup
|
|
174
|
-
? input.removeEventListener("change",
|
|
175
|
-
: input.addEventListener("change",
|
|
175
|
+
? input.removeEventListener("change", doFormChange)
|
|
176
|
+
: input.addEventListener("change", doFormChange));
|
|
176
177
|
};
|
|
177
|
-
const divRef = react_1.default.useRef(
|
|
178
|
-
react_1.default.useEffect(() => {
|
|
179
|
-
if (divRef.current) {
|
|
180
|
-
setupDiv(divRef.current);
|
|
181
|
-
}
|
|
182
|
-
return () => {
|
|
183
|
-
if (divRef.current) {
|
|
184
|
-
setupDiv(divRef.current, true);
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
}, []);
|
|
178
|
+
const divRef = react_1.default.useRef();
|
|
188
179
|
if (dnd == null) {
|
|
189
180
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: "100%", height: height });
|
|
190
181
|
}
|
|
@@ -233,7 +224,15 @@ function DnDList(props) {
|
|
|
233
224
|
return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
|
|
234
225
|
}) }) }) }));
|
|
235
226
|
if (onFormChange) {
|
|
236
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref:
|
|
227
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: (div) => {
|
|
228
|
+
if (div && divRef.current != div) {
|
|
229
|
+
if (divRef.current) {
|
|
230
|
+
setupDiv(divRef.current, true);
|
|
231
|
+
}
|
|
232
|
+
divRef.current = div;
|
|
233
|
+
setupDiv(div);
|
|
234
|
+
}
|
|
235
|
+
}, children: children }));
|
|
237
236
|
}
|
|
238
237
|
return children;
|
|
239
238
|
}
|
package/lib/mjs/DnDList.js
CHANGED
|
@@ -57,8 +57,10 @@ export function DnDList(props) {
|
|
|
57
57
|
setItems(props.items);
|
|
58
58
|
}, [props.items]);
|
|
59
59
|
const doFormChange = React.useCallback((newItems) => {
|
|
60
|
-
if (onFormChange)
|
|
61
|
-
|
|
60
|
+
if (onFormChange) {
|
|
61
|
+
const locals = Array.isArray(newItems) ? newItems : items;
|
|
62
|
+
onFormChange(locals);
|
|
63
|
+
}
|
|
62
64
|
}, [items, onFormChange]);
|
|
63
65
|
const changeItems = React.useCallback((newItems) => {
|
|
64
66
|
// Possible to alter items with the handler
|
|
@@ -145,38 +147,27 @@ export function DnDList(props) {
|
|
|
145
147
|
]);
|
|
146
148
|
});
|
|
147
149
|
}, []);
|
|
148
|
-
const doChange = React.useCallback(() => doFormChange(), []);
|
|
149
150
|
const setupDiv = (div, clearup = false) => {
|
|
150
151
|
// Inputs
|
|
151
152
|
div
|
|
152
153
|
.querySelectorAll("input")
|
|
153
154
|
.forEach((input) => clearup
|
|
154
|
-
? input.removeEventListener("change",
|
|
155
|
-
: input.addEventListener("change",
|
|
155
|
+
? input.removeEventListener("change", doFormChange)
|
|
156
|
+
: input.addEventListener("change", doFormChange));
|
|
156
157
|
// Textareas
|
|
157
158
|
div
|
|
158
159
|
.querySelectorAll("textarea")
|
|
159
160
|
.forEach((input) => clearup
|
|
160
|
-
? input.removeEventListener("change",
|
|
161
|
-
: input.addEventListener("change",
|
|
161
|
+
? input.removeEventListener("change", doFormChange)
|
|
162
|
+
: input.addEventListener("change", doFormChange));
|
|
162
163
|
// Select
|
|
163
164
|
div
|
|
164
165
|
.querySelectorAll("select")
|
|
165
166
|
.forEach((input) => clearup
|
|
166
|
-
? input.removeEventListener("change",
|
|
167
|
-
: input.addEventListener("change",
|
|
167
|
+
? input.removeEventListener("change", doFormChange)
|
|
168
|
+
: input.addEventListener("change", doFormChange));
|
|
168
169
|
};
|
|
169
|
-
const divRef = React.useRef(
|
|
170
|
-
React.useEffect(() => {
|
|
171
|
-
if (divRef.current) {
|
|
172
|
-
setupDiv(divRef.current);
|
|
173
|
-
}
|
|
174
|
-
return () => {
|
|
175
|
-
if (divRef.current) {
|
|
176
|
-
setupDiv(divRef.current, true);
|
|
177
|
-
}
|
|
178
|
-
};
|
|
179
|
-
}, []);
|
|
170
|
+
const divRef = React.useRef();
|
|
180
171
|
if (dnd == null) {
|
|
181
172
|
return _jsx(Skeleton, { variant: "rectangular", width: "100%", height: height });
|
|
182
173
|
}
|
|
@@ -225,7 +216,15 @@ export function DnDList(props) {
|
|
|
225
216
|
return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
|
|
226
217
|
}) }) }) }));
|
|
227
218
|
if (onFormChange) {
|
|
228
|
-
return (_jsx("div", { style: { width: "100%" }, ref:
|
|
219
|
+
return (_jsx("div", { style: { width: "100%" }, ref: (div) => {
|
|
220
|
+
if (div && divRef.current != div) {
|
|
221
|
+
if (divRef.current) {
|
|
222
|
+
setupDiv(divRef.current, true);
|
|
223
|
+
}
|
|
224
|
+
divRef.current = div;
|
|
225
|
+
setupDiv(div);
|
|
226
|
+
}
|
|
227
|
+
}, children: children }));
|
|
229
228
|
}
|
|
230
229
|
return children;
|
|
231
230
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.62",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/mjs/index.js",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"@dnd-kit/sortable": "^10.0.0",
|
|
41
41
|
"@emotion/react": "^11.14.0",
|
|
42
42
|
"@emotion/styled": "^11.14.0",
|
|
43
|
-
"@etsoo/appscript": "^1.6.
|
|
44
|
-
"@etsoo/notificationbase": "^1.1.
|
|
45
|
-
"@etsoo/react": "^1.8.
|
|
46
|
-
"@etsoo/shared": "^1.2.
|
|
43
|
+
"@etsoo/appscript": "^1.6.39",
|
|
44
|
+
"@etsoo/notificationbase": "^1.1.63",
|
|
45
|
+
"@etsoo/react": "^1.8.49",
|
|
46
|
+
"@etsoo/shared": "^1.2.75",
|
|
47
47
|
"@mui/icons-material": "^7.1.1",
|
|
48
48
|
"@mui/material": "^7.1.1",
|
|
49
49
|
"@mui/x-data-grid": "^8.5.1",
|
|
@@ -81,9 +81,9 @@
|
|
|
81
81
|
"@types/react-dom": "^18.3.7",
|
|
82
82
|
"@types/react-input-mask": "^3.0.6",
|
|
83
83
|
"@types/react-window": "^1.8.8",
|
|
84
|
-
"@vitejs/plugin-react": "^4.5.
|
|
84
|
+
"@vitejs/plugin-react": "^4.5.2",
|
|
85
85
|
"jsdom": "^26.1.0",
|
|
86
86
|
"typescript": "^5.8.3",
|
|
87
|
-
"vitest": "^3.2.
|
|
87
|
+
"vitest": "^3.2.3"
|
|
88
88
|
}
|
|
89
89
|
}
|
package/src/DnDList.tsx
CHANGED
|
@@ -231,8 +231,11 @@ export function DnDList<
|
|
|
231
231
|
}, [props.items]);
|
|
232
232
|
|
|
233
233
|
const doFormChange = React.useCallback(
|
|
234
|
-
(newItems?: D[]) => {
|
|
235
|
-
if (onFormChange)
|
|
234
|
+
(newItems?: D[] | Event) => {
|
|
235
|
+
if (onFormChange) {
|
|
236
|
+
const locals = Array.isArray(newItems) ? newItems : items;
|
|
237
|
+
onFormChange(locals);
|
|
238
|
+
}
|
|
236
239
|
},
|
|
237
240
|
[items, onFormChange]
|
|
238
241
|
);
|
|
@@ -380,16 +383,14 @@ export function DnDList<
|
|
|
380
383
|
);
|
|
381
384
|
}, []);
|
|
382
385
|
|
|
383
|
-
const doChange = React.useCallback(() => doFormChange(), []);
|
|
384
|
-
|
|
385
386
|
const setupDiv = (div: HTMLDivElement, clearup: boolean = false) => {
|
|
386
387
|
// Inputs
|
|
387
388
|
div
|
|
388
389
|
.querySelectorAll("input")
|
|
389
390
|
.forEach((input) =>
|
|
390
391
|
clearup
|
|
391
|
-
? input.removeEventListener("change",
|
|
392
|
-
: input.addEventListener("change",
|
|
392
|
+
? input.removeEventListener("change", doFormChange)
|
|
393
|
+
: input.addEventListener("change", doFormChange)
|
|
393
394
|
);
|
|
394
395
|
|
|
395
396
|
// Textareas
|
|
@@ -397,8 +398,8 @@ export function DnDList<
|
|
|
397
398
|
.querySelectorAll("textarea")
|
|
398
399
|
.forEach((input) =>
|
|
399
400
|
clearup
|
|
400
|
-
? input.removeEventListener("change",
|
|
401
|
-
: input.addEventListener("change",
|
|
401
|
+
? input.removeEventListener("change", doFormChange)
|
|
402
|
+
: input.addEventListener("change", doFormChange)
|
|
402
403
|
);
|
|
403
404
|
|
|
404
405
|
// Select
|
|
@@ -406,24 +407,12 @@ export function DnDList<
|
|
|
406
407
|
.querySelectorAll("select")
|
|
407
408
|
.forEach((input) =>
|
|
408
409
|
clearup
|
|
409
|
-
? input.removeEventListener("change",
|
|
410
|
-
: input.addEventListener("change",
|
|
410
|
+
? input.removeEventListener("change", doFormChange)
|
|
411
|
+
: input.addEventListener("change", doFormChange)
|
|
411
412
|
);
|
|
412
413
|
};
|
|
413
414
|
|
|
414
|
-
const divRef = React.useRef<HTMLDivElement>(
|
|
415
|
-
|
|
416
|
-
React.useEffect(() => {
|
|
417
|
-
if (divRef.current) {
|
|
418
|
-
setupDiv(divRef.current);
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
return () => {
|
|
422
|
-
if (divRef.current) {
|
|
423
|
-
setupDiv(divRef.current, true);
|
|
424
|
-
}
|
|
425
|
-
};
|
|
426
|
-
}, []);
|
|
415
|
+
const divRef = React.useRef<HTMLDivElement>();
|
|
427
416
|
|
|
428
417
|
if (dnd == null) {
|
|
429
418
|
return <Skeleton variant="rectangular" width="100%" height={height} />;
|
|
@@ -517,7 +506,19 @@ export function DnDList<
|
|
|
517
506
|
|
|
518
507
|
if (onFormChange) {
|
|
519
508
|
return (
|
|
520
|
-
<div
|
|
509
|
+
<div
|
|
510
|
+
style={{ width: "100%" }}
|
|
511
|
+
ref={(div) => {
|
|
512
|
+
if (div && divRef.current != div) {
|
|
513
|
+
if (divRef.current) {
|
|
514
|
+
setupDiv(divRef.current, true);
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
divRef.current = div;
|
|
518
|
+
setupDiv(div);
|
|
519
|
+
}
|
|
520
|
+
}}
|
|
521
|
+
>
|
|
521
522
|
{children}
|
|
522
523
|
</div>
|
|
523
524
|
);
|