@etsoo/react 1.5.58 → 1.5.59
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.js +4 -22
- package/package.json +2 -3
- package/src/mu/DnDList.tsx +5 -69
|
@@ -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.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { DndContext } from '@dnd-kit/core';
|
|
1
2
|
import { DataTypes } from '@etsoo/shared';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
|
4
4
|
/**
|
|
5
5
|
* Drag and drop list
|
|
6
6
|
* https://github.com/atlassian/react-beautiful-dnd
|
|
@@ -21,16 +21,12 @@ export function DnDList(props) {
|
|
|
21
21
|
};
|
|
22
22
|
// Drag end handler
|
|
23
23
|
const onDragEndLocal = (result) => {
|
|
24
|
-
// Dropped outside the list
|
|
25
|
-
if (!result.destination) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
24
|
// Clone
|
|
29
25
|
const newItems = [...items];
|
|
30
26
|
// Removed item
|
|
31
|
-
const [removed] = newItems.splice(result.source.index, 1);
|
|
27
|
+
// const [removed] = newItems.splice(result.source.index, 1);
|
|
32
28
|
// Insert to the destination index
|
|
33
|
-
newItems.splice(result.destination.index, 0, removed);
|
|
29
|
+
// newItems.splice(result.destination.index, 0, removed);
|
|
34
30
|
// Update the state
|
|
35
31
|
changeItems(newItems);
|
|
36
32
|
// Drag end handler
|
|
@@ -108,21 +104,7 @@ export function DnDList(props) {
|
|
|
108
104
|
if (id == null)
|
|
109
105
|
return;
|
|
110
106
|
return (React.createElement("div", { key: id, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
|
|
111
|
-
}))) : (React.createElement(
|
|
112
|
-
React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
|
|
113
|
-
items.map((item, index) => {
|
|
114
|
-
// Id
|
|
115
|
-
const id = DataTypes.convert(item[labelField], 'string');
|
|
116
|
-
if (id == null)
|
|
117
|
-
return;
|
|
118
|
-
return (React.createElement(Draggable, { key: id, draggableId: id, index: index }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
|
|
119
|
-
...getItemStyle(snapshot.isDragging, index),
|
|
120
|
-
...provided
|
|
121
|
-
.draggableProps
|
|
122
|
-
.style
|
|
123
|
-
} }, children(item, index, deleteItem, editItem)))));
|
|
124
|
-
}),
|
|
125
|
-
provided.placeholder)))))),
|
|
107
|
+
}))) : (React.createElement(DndContext, { onDragEnd: onDragEndLocal }))),
|
|
126
108
|
sideRenderer &&
|
|
127
109
|
sideRenderer(false, addItem, addItems, reloadItems)));
|
|
128
110
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/react",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.59",
|
|
4
4
|
"description": "TypeScript ReactJs framework",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -46,6 +46,7 @@
|
|
|
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",
|
|
@@ -58,7 +59,6 @@
|
|
|
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,6 @@
|
|
|
1
|
+
import { DndContext, DragEndEvent } from '@dnd-kit/core';
|
|
1
2
|
import { DataTypes } from '@etsoo/shared';
|
|
2
3
|
import React, { CSSProperties } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
DragDropContext,
|
|
5
|
-
Draggable,
|
|
6
|
-
Droppable,
|
|
7
|
-
DropResult
|
|
8
|
-
} from 'react-beautiful-dnd';
|
|
9
4
|
|
|
10
5
|
/**
|
|
11
6
|
* DnD list props
|
|
@@ -121,20 +116,15 @@ export function DnDList<
|
|
|
121
116
|
};
|
|
122
117
|
|
|
123
118
|
// Drag end handler
|
|
124
|
-
const onDragEndLocal = (result:
|
|
125
|
-
// Dropped outside the list
|
|
126
|
-
if (!result.destination) {
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
|
|
119
|
+
const onDragEndLocal = (result: DragEndEvent) => {
|
|
130
120
|
// Clone
|
|
131
121
|
const newItems = [...items];
|
|
132
122
|
|
|
133
123
|
// Removed item
|
|
134
|
-
const [removed] = newItems.splice(result.source.index, 1);
|
|
124
|
+
// const [removed] = newItems.splice(result.source.index, 1);
|
|
135
125
|
|
|
136
126
|
// Insert to the destination index
|
|
137
|
-
newItems.splice(result.destination.index, 0, removed);
|
|
127
|
+
// newItems.splice(result.destination.index, 0, removed);
|
|
138
128
|
|
|
139
129
|
// Update the state
|
|
140
130
|
changeItems(newItems);
|
|
@@ -259,61 +249,7 @@ export function DnDList<
|
|
|
259
249
|
})}
|
|
260
250
|
</div>
|
|
261
251
|
) : (
|
|
262
|
-
<
|
|
263
|
-
<Droppable droppableId={name}>
|
|
264
|
-
{(provided, snapshot) => (
|
|
265
|
-
<div
|
|
266
|
-
{...provided.droppableProps}
|
|
267
|
-
ref={provided.innerRef}
|
|
268
|
-
style={getListStyle(
|
|
269
|
-
snapshot.isDraggingOver
|
|
270
|
-
)}
|
|
271
|
-
>
|
|
272
|
-
{items.map((item, index) => {
|
|
273
|
-
// Id
|
|
274
|
-
const id = DataTypes.convert(
|
|
275
|
-
item[labelField],
|
|
276
|
-
'string'
|
|
277
|
-
);
|
|
278
|
-
if (id == null) return;
|
|
279
|
-
|
|
280
|
-
return (
|
|
281
|
-
<Draggable
|
|
282
|
-
key={id}
|
|
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>
|
|
252
|
+
<DndContext onDragEnd={onDragEndLocal}></DndContext>
|
|
317
253
|
)}
|
|
318
254
|
</Component>
|
|
319
255
|
{sideRenderer &&
|