@etsoo/react 1.5.57 → 1.5.60
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/.github/workflows/main.yml +1 -1
- package/lib/mu/DnDList.d.ts +31 -0
- package/lib/mu/DnDList.js +22 -22
- package/package.json +5 -6
- package/src/mu/DnDList.tsx +83 -68
|
@@ -28,7 +28,7 @@ jobs:
|
|
|
28
28
|
# Setup .npmrc file to publish to npm
|
|
29
29
|
- uses: actions/setup-node@v1
|
|
30
30
|
with:
|
|
31
|
-
node-version: '
|
|
31
|
+
node-version: '18.x'
|
|
32
32
|
registry-url: 'https://registry.npmjs.org'
|
|
33
33
|
|
|
34
34
|
# Named after Continuous Integration, installs dependencies directly from package-lock.json
|
package/lib/mu/DnDList.d.ts
CHANGED
|
@@ -1,4 +1,35 @@
|
|
|
1
|
+
import { UniqueIdentifier } from '@dnd-kit/core';
|
|
1
2
|
import React, { CSSProperties } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* DnD list item props
|
|
5
|
+
*/
|
|
6
|
+
export interface DnDItemProps<D extends {}> {
|
|
7
|
+
/**
|
|
8
|
+
* Unique id
|
|
9
|
+
*/
|
|
10
|
+
id: UniqueIdentifier;
|
|
11
|
+
/**
|
|
12
|
+
* Children
|
|
13
|
+
*/
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Item data
|
|
17
|
+
*/
|
|
18
|
+
data?: D;
|
|
19
|
+
/**
|
|
20
|
+
* Disabled or not
|
|
21
|
+
*/
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Inline style
|
|
25
|
+
*/
|
|
26
|
+
style?: CSSProperties;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* DnD list item
|
|
30
|
+
* @param props Props
|
|
31
|
+
*/
|
|
32
|
+
export declare function DnDItem<D extends {}>(props: DnDItemProps<D>): JSX.Element;
|
|
2
33
|
/**
|
|
3
34
|
* DnD list props
|
|
4
35
|
*/
|
package/lib/mu/DnDList.js
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
|
+
import { DndContext, DragOverlay, useDraggable } from '@dnd-kit/core';
|
|
1
2
|
import { DataTypes } from '@etsoo/shared';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
|
|
4
|
+
/**
|
|
5
|
+
* DnD list item
|
|
6
|
+
* @param props Props
|
|
7
|
+
*/
|
|
8
|
+
export function DnDItem(props) {
|
|
9
|
+
const { children, style, ...rest } = props;
|
|
10
|
+
const { attributes, listeners, setNodeRef } = useDraggable(rest);
|
|
11
|
+
return (React.createElement("div", { style: style, ref: setNodeRef, ...listeners, ...attributes }, children));
|
|
12
|
+
}
|
|
4
13
|
/**
|
|
5
14
|
* Drag and drop list
|
|
6
15
|
* https://github.com/atlassian/react-beautiful-dnd
|
|
@@ -21,16 +30,13 @@ export function DnDList(props) {
|
|
|
21
30
|
};
|
|
22
31
|
// Drag end handler
|
|
23
32
|
const onDragEndLocal = (result) => {
|
|
24
|
-
// Dropped outside the list
|
|
25
|
-
if (!result.destination) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
33
|
// Clone
|
|
29
34
|
const newItems = [...items];
|
|
35
|
+
console.log(result);
|
|
30
36
|
// Removed item
|
|
31
|
-
const [removed] = newItems.splice(result.source.index, 1);
|
|
37
|
+
// const [removed] = newItems.splice(result.source.index, 1);
|
|
32
38
|
// Insert to the destination index
|
|
33
|
-
newItems.splice(result.destination.index, 0, removed);
|
|
39
|
+
// newItems.splice(result.destination.index, 0, removed);
|
|
34
40
|
// Update the state
|
|
35
41
|
changeItems(newItems);
|
|
36
42
|
// Drag end handler
|
|
@@ -108,21 +114,15 @@ export function DnDList(props) {
|
|
|
108
114
|
if (id == null)
|
|
109
115
|
return;
|
|
110
116
|
return (React.createElement("div", { key: id, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
|
|
111
|
-
}))) : (React.createElement(
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
...provided
|
|
121
|
-
.draggableProps
|
|
122
|
-
.style
|
|
123
|
-
} }, children(item, index, deleteItem, editItem)))));
|
|
124
|
-
}),
|
|
125
|
-
provided.placeholder)))))),
|
|
117
|
+
}))) : (React.createElement(DndContext, { onDragEnd: onDragEndLocal },
|
|
118
|
+
items.map((item, index) => {
|
|
119
|
+
// Id
|
|
120
|
+
const id = DataTypes.convert(item[labelField], 'string');
|
|
121
|
+
if (id == null)
|
|
122
|
+
return;
|
|
123
|
+
return (React.createElement(DnDItem, { id: id, key: id, data: item, "data-index": index, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
|
|
124
|
+
}),
|
|
125
|
+
React.createElement(DragOverlay, null)))),
|
|
126
126
|
sideRenderer &&
|
|
127
127
|
sideRenderer(false, addItem, addItems, reloadItems)));
|
|
128
128
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/react",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.60",
|
|
4
4
|
"description": "TypeScript ReactJs framework",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -46,19 +46,19 @@
|
|
|
46
46
|
},
|
|
47
47
|
"homepage": "https://github.com/ETSOO/AppReact#readme",
|
|
48
48
|
"dependencies": {
|
|
49
|
+
"@dnd-kit/core": "^6.0.5",
|
|
49
50
|
"@emotion/css": "^11.10.0",
|
|
50
51
|
"@emotion/react": "^11.10.0",
|
|
51
52
|
"@emotion/styled": "^11.10.0",
|
|
52
|
-
"@etsoo/appscript": "^1.2.
|
|
53
|
-
"@etsoo/notificationbase": "^1.1.
|
|
54
|
-
"@etsoo/shared": "^1.1.
|
|
53
|
+
"@etsoo/appscript": "^1.2.72",
|
|
54
|
+
"@etsoo/notificationbase": "^1.1.5",
|
|
55
|
+
"@etsoo/shared": "^1.1.41",
|
|
55
56
|
"@mui/icons-material": "^5.8.4",
|
|
56
57
|
"@mui/material": "^5.9.3",
|
|
57
58
|
"@types/pica": "^9.0.1",
|
|
58
59
|
"@types/pulltorefreshjs": "^0.1.5",
|
|
59
60
|
"@types/react": "^18.0.15",
|
|
60
61
|
"@types/react-avatar-editor": "^12.0.0",
|
|
61
|
-
"@types/react-beautiful-dnd": "^13.1.2",
|
|
62
62
|
"@types/react-dom": "^18.0.6",
|
|
63
63
|
"@types/react-input-mask": "^3.0.1",
|
|
64
64
|
"@types/react-window": "^1.8.5",
|
|
@@ -66,7 +66,6 @@
|
|
|
66
66
|
"pulltorefreshjs": "^0.1.22",
|
|
67
67
|
"react": "^18.2.0",
|
|
68
68
|
"react-avatar-editor": "^13.0.0",
|
|
69
|
-
"react-beautiful-dnd": "^13.1.0",
|
|
70
69
|
"react-dom": "^18.2.0",
|
|
71
70
|
"react-draggable": "^4.4.5",
|
|
72
71
|
"react-imask": "^6.4.2",
|
package/src/mu/DnDList.tsx
CHANGED
|
@@ -1,11 +1,56 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DndContext,
|
|
3
|
+
DragEndEvent,
|
|
4
|
+
DragOverlay,
|
|
5
|
+
UniqueIdentifier,
|
|
6
|
+
useDraggable
|
|
7
|
+
} from '@dnd-kit/core';
|
|
1
8
|
import { DataTypes } from '@etsoo/shared';
|
|
2
9
|
import React, { CSSProperties } from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* DnD list item props
|
|
13
|
+
*/
|
|
14
|
+
export interface DnDItemProps<D extends {}> {
|
|
15
|
+
/**
|
|
16
|
+
* Unique id
|
|
17
|
+
*/
|
|
18
|
+
id: UniqueIdentifier;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Children
|
|
22
|
+
*/
|
|
23
|
+
children: React.ReactNode;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Item data
|
|
27
|
+
*/
|
|
28
|
+
data?: D;
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Disabled or not
|
|
32
|
+
*/
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Inline style
|
|
37
|
+
*/
|
|
38
|
+
style?: CSSProperties;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* DnD list item
|
|
43
|
+
* @param props Props
|
|
44
|
+
*/
|
|
45
|
+
export function DnDItem<D extends {}>(props: DnDItemProps<D>) {
|
|
46
|
+
const { children, style, ...rest } = props;
|
|
47
|
+
const { attributes, listeners, setNodeRef } = useDraggable(rest);
|
|
48
|
+
return (
|
|
49
|
+
<div style={style} ref={setNodeRef} {...listeners} {...attributes}>
|
|
50
|
+
{children}
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
9
54
|
|
|
10
55
|
/**
|
|
11
56
|
* DnD list props
|
|
@@ -121,20 +166,17 @@ export function DnDList<
|
|
|
121
166
|
};
|
|
122
167
|
|
|
123
168
|
// Drag end handler
|
|
124
|
-
const onDragEndLocal = (result:
|
|
125
|
-
// Dropped outside the list
|
|
126
|
-
if (!result.destination) {
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
|
|
169
|
+
const onDragEndLocal = (result: DragEndEvent) => {
|
|
130
170
|
// Clone
|
|
131
171
|
const newItems = [...items];
|
|
132
172
|
|
|
173
|
+
console.log(result);
|
|
174
|
+
|
|
133
175
|
// Removed item
|
|
134
|
-
const [removed] = newItems.splice(result.source.index, 1);
|
|
176
|
+
// const [removed] = newItems.splice(result.source.index, 1);
|
|
135
177
|
|
|
136
178
|
// Insert to the destination index
|
|
137
|
-
newItems.splice(result.destination.index, 0, removed);
|
|
179
|
+
// newItems.splice(result.destination.index, 0, removed);
|
|
138
180
|
|
|
139
181
|
// Update the state
|
|
140
182
|
changeItems(newItems);
|
|
@@ -259,61 +301,34 @@ export function DnDList<
|
|
|
259
301
|
})}
|
|
260
302
|
</div>
|
|
261
303
|
) : (
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
304
|
+
<DndContext onDragEnd={onDragEndLocal}>
|
|
305
|
+
{items.map((item, index) => {
|
|
306
|
+
// Id
|
|
307
|
+
const id = DataTypes.convert(
|
|
308
|
+
item[labelField],
|
|
309
|
+
'string'
|
|
310
|
+
);
|
|
311
|
+
if (id == null) return;
|
|
312
|
+
|
|
313
|
+
return (
|
|
314
|
+
<DnDItem<D>
|
|
315
|
+
id={id}
|
|
316
|
+
key={id}
|
|
317
|
+
data={item}
|
|
318
|
+
data-index={index}
|
|
319
|
+
style={getItemStyle(false, index)}
|
|
271
320
|
>
|
|
272
|
-
{
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
draggableId={id}
|
|
284
|
-
index={index}
|
|
285
|
-
>
|
|
286
|
-
{(provided, snapshot) => (
|
|
287
|
-
<div
|
|
288
|
-
ref={provided.innerRef}
|
|
289
|
-
{...provided.draggableProps}
|
|
290
|
-
{...provided.dragHandleProps}
|
|
291
|
-
style={{
|
|
292
|
-
...getItemStyle(
|
|
293
|
-
snapshot.isDragging,
|
|
294
|
-
index
|
|
295
|
-
),
|
|
296
|
-
...provided
|
|
297
|
-
.draggableProps
|
|
298
|
-
.style
|
|
299
|
-
}}
|
|
300
|
-
>
|
|
301
|
-
{children(
|
|
302
|
-
item,
|
|
303
|
-
index,
|
|
304
|
-
deleteItem,
|
|
305
|
-
editItem
|
|
306
|
-
)}
|
|
307
|
-
</div>
|
|
308
|
-
)}
|
|
309
|
-
</Draggable>
|
|
310
|
-
);
|
|
311
|
-
})}
|
|
312
|
-
{provided.placeholder}
|
|
313
|
-
</div>
|
|
314
|
-
)}
|
|
315
|
-
</Droppable>
|
|
316
|
-
</DragDropContext>
|
|
321
|
+
{children(
|
|
322
|
+
item,
|
|
323
|
+
index,
|
|
324
|
+
deleteItem,
|
|
325
|
+
editItem
|
|
326
|
+
)}
|
|
327
|
+
</DnDItem>
|
|
328
|
+
);
|
|
329
|
+
})}
|
|
330
|
+
<DragOverlay></DragOverlay>
|
|
331
|
+
</DndContext>
|
|
317
332
|
)}
|
|
318
333
|
</Component>
|
|
319
334
|
{sideRenderer &&
|