@etsoo/react 1.4.2 → 1.4.3

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.
Files changed (4) hide show
  1. package/lib/mu/DnDList.d.ts +4 -0
  2. package/lib/mu/DnDList.js +14 -6
  3. package/package.json +1 -1
  4. package/src/mu/DnDList.tsx +20 -5
package/lib/mu/DnDList.d.ts CHANGED
@@ -32,6 +32,10 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
32
32
  * Load data
33
33
  */
34
34
  loadData: (name: string) => PromiseLike<D[]>;
35
+ /**
36
+ * Data change handler
37
+ */
38
+ onChange?: (items: D[]) => void;
35
39
  /**
36
40
  * Top and bottom sides renderer
37
41
  */
package/lib/mu/DnDList.js CHANGED
@@ -9,9 +9,16 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
9
9
  */
10
10
  export function DnDList(props) {
11
11
  // Destruct
12
- const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, sideRenderer } = props;
12
+ const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, sideRenderer } = props;
13
13
  // State
14
14
  const [items, setItems] = React.useState([]);
15
+ const changeItems = (items) => {
16
+ // Possible to alter items with the handler
17
+ if (onChange)
18
+ onChange(items);
19
+ // Update state
20
+ setItems(items);
21
+ };
15
22
  // Drag end handler
16
23
  const onDragEnd = (result) => {
17
24
  // Dropped outside the list
@@ -25,7 +32,7 @@ export function DnDList(props) {
25
32
  // Insert to the destination index
26
33
  newItems.splice(result.destination.index, 0, removed);
27
34
  // Update the state
28
- setItems(newItems);
35
+ changeItems(newItems);
29
36
  };
30
37
  // Add item
31
38
  const addItem = (newItem) => {
@@ -36,7 +43,7 @@ export function DnDList(props) {
36
43
  // Clone
37
44
  const newItems = [newItem, ...items];
38
45
  // Update the state
39
- setItems(newItems);
46
+ changeItems(newItems);
40
47
  return true;
41
48
  };
42
49
  // Edit item
@@ -50,7 +57,7 @@ export function DnDList(props) {
50
57
  // Remove the item
51
58
  newItems.splice(index, 1, newItem);
52
59
  // Update the state
53
- setItems(newItems);
60
+ changeItems(newItems);
54
61
  return true;
55
62
  };
56
63
  // Add items
@@ -66,7 +73,7 @@ export function DnDList(props) {
66
73
  newItems.push(newItem);
67
74
  });
68
75
  // Update the state
69
- setItems(newItems);
76
+ changeItems(newItems);
70
77
  return newItems.length - items.length;
71
78
  };
72
79
  // Delete item
@@ -76,9 +83,10 @@ export function DnDList(props) {
76
83
  // Remove the item
77
84
  newItems.splice(index, 1);
78
85
  // Update the state
79
- setItems(newItems);
86
+ changeItems(newItems);
80
87
  };
81
88
  React.useEffect(() => {
89
+ // Load data
82
90
  loadData(name).then((items) => setItems(items));
83
91
  }, [name]);
84
92
  // Layout
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.2",
3
+ "version": "1.4.3",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/mu/DnDList.tsx CHANGED
@@ -52,6 +52,11 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
52
52
  */
53
53
  loadData: (name: string) => PromiseLike<D[]>;
54
54
 
55
+ /**
56
+ * Data change handler
57
+ */
58
+ onChange?: (items: D[]) => void;
59
+
55
60
  /**
56
61
  * Top and bottom sides renderer
57
62
  */
@@ -87,12 +92,21 @@ export function DnDList<
87
92
  labelField,
88
93
  loadData,
89
94
  name,
95
+ onChange,
90
96
  sideRenderer
91
97
  } = props;
92
98
 
93
99
  // State
94
100
  const [items, setItems] = React.useState<D[]>([]);
95
101
 
102
+ const changeItems = (items: D[]) => {
103
+ // Possible to alter items with the handler
104
+ if (onChange) onChange(items);
105
+
106
+ // Update state
107
+ setItems(items);
108
+ };
109
+
96
110
  // Drag end handler
97
111
  const onDragEnd = (result: DropResult) => {
98
112
  // Dropped outside the list
@@ -110,7 +124,7 @@ export function DnDList<
110
124
  newItems.splice(result.destination.index, 0, removed);
111
125
 
112
126
  // Update the state
113
- setItems(newItems);
127
+ changeItems(newItems);
114
128
  };
115
129
 
116
130
  // Add item
@@ -124,7 +138,7 @@ export function DnDList<
124
138
  const newItems = [newItem, ...items];
125
139
 
126
140
  // Update the state
127
- setItems(newItems);
141
+ changeItems(newItems);
128
142
 
129
143
  return true;
130
144
  };
@@ -143,7 +157,7 @@ export function DnDList<
143
157
  newItems.splice(index, 1, newItem);
144
158
 
145
159
  // Update the state
146
- setItems(newItems);
160
+ changeItems(newItems);
147
161
 
148
162
  return true;
149
163
  };
@@ -166,7 +180,7 @@ export function DnDList<
166
180
  });
167
181
 
168
182
  // Update the state
169
- setItems(newItems);
183
+ changeItems(newItems);
170
184
 
171
185
  return newItems.length - items.length;
172
186
  };
@@ -180,10 +194,11 @@ export function DnDList<
180
194
  newItems.splice(index, 1);
181
195
 
182
196
  // Update the state
183
- setItems(newItems);
197
+ changeItems(newItems);
184
198
  };
185
199
 
186
200
  React.useEffect(() => {
201
+ // Load data
187
202
  loadData(name).then((items) => setItems(items));
188
203
  }, [name]);
189
204