8000 [bugfix component] handlers now use util functions to manage DOM and … · andrewvmail/react-sortablejs@28dcb8b · GitHub
[go: up one dir, main page]
Skip to content

Commit 28dcb8b

Browse files< 10000 /div>
author
Wayne Van Son
committed
[bugfix component] handlers now use util functions to manage DOM and state
1 parent 7c299f5 commit 28dcb8b

File tree

1 file changed

+55
-66
lines changed

1 file changed

+55
-66
lines changed

‎src/react-sortable.tsx

Lines changed: 55 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -211,81 +211,70 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
211211

212212
// SORTABLE DOM HANDLING
213213

214-
/** Called when an element is dropped into the list from another list */
215-
onAdd(evt: SortableEvent) {
214+
onAdd(evt: MultiDragEvent) {
216215
const { list, setList } = this.props;
217-
removeNode(evt.item);
218-
219-
const newState: T[] = [...list];
220-
const newItem = store.dragging!.props.list[evt.oldIndex!];
221-
newState.splice(evt.newIndex!, 0, newItem);
222-
setList(newState, this.sortable, store);
216+
const otherList = [...store.dragging!.props.list];
217+
const customs = createCustoms(evt, otherList);
218+
removeNodes(customs);
219+
const newList = handleStateAdd(customs, list);
220+
setList(newList, this.sortable, store);
223221
}
224222

225-
/** Called when an element is removed from the list into another list */
226-
onRemove(evt: SortableEvent) {
227-
const { item, from, oldIndex, clone, pullMode } = evt;
228-
insertNodeAt(from, item, oldIndex!);
223+
onRemove(evt: MultiDragEvent) {
229224
const { list, setList } = this.props;
230-
const newState: T[] = [...list];
231-
if (pullMode === "clone") {
232-
removeNode(clone);
233-
225+
const mode = getMode(evt);
226+
const customs = createCustoms(evt, list);
227+
insertNodes(customs);
228+
229+
let newList = [...list];
230+
// remove state if not in clone mode. otherwise, keep.
231+
if (evt.pullMode !== "clone") newList = handleStateRemove(customs, newList);
232+
// if clone, it doesn't really remove. instead it clones in place.
233+
// @todo -
234+
else {
235+
// switch used to get the clone
236+
let customClones = customs;
237+
switch (mode) {
238+
case "multidrag":
239+
customClones = customs.map((item, index) => ({
240+
...item,
241+
element: evt.clones[index]
242+
}));
243+
break;
244+
case "normal":
245+
customClones = customs.map((item, index) => ({
246+
...item,
247+
element: evt.clone
248+
}));
249+
break;
250+
case "swap":
251+
default: {
234252
invariant(
235253
true,
236254
`mode "${mode}" cannot clone. Please remove "props.clone" from <ReactSortable/> when using the "${mode}" plugin`
237255
);
238-
239-
newState.splice(oldIndex!, 0, newItem);
240-
setList(newState, this.sortable, store);
241-
return;
256+
}
257+
}
258+
removeNodes(customClones);
259+
260+
// replace selected items with cloned items
261+
customs.forEach(curr => {
262+
const index = curr.oldIndex;
263+
const newItem = this.props.clone!(curr.item, evt);
264+
newList.splice(index, 1, newItem);
265+
});
242266
}
243-
newState.splice(oldIndex!, 1);
244-
setList(newState, this.sortable, store);
267+
268+
// remove item.selected from list
269+
newList = newList.map(item => ({ ...item, selected: false }));
270+
setList(newList, this.sortable, store);
245271
}
246272

247-
/** Called when sorting is changed within the same list */
248273
onUpdate(evt: MultiDragEvent) {
249-
const mode = getMode(evt);
250-
const parentElement = { parentElement: evt.from };
251-
let custom: Input[] = [];
252-
switch (mode) {
253-
case "normal":
254-
const item = {
255-
element: evt.item,
256-
newIndex: evt.newIndex!,
257-
oldIndex: evt.oldIndex!,
258-
parentElement: evt.from
259-
};
260-
custom = [item];
261-
break;
262-
case "swap":
263-
const drag: Input = {
264-
element: evt.item,
265-
oldIndex: evt.oldIndex!,
266-
newIndex: evt.newIndex!,
267-
...parentElement
268-
};
269-
const swap: Input = {
270-
element: evt.swapItem!,
271-
oldIndex: evt.newIndex!,
272-
newIndex: evt.oldIndex!,
273-
...parentElement
274-
};
275-
custom = [drag, swap];
276-
break;
277-
case "multidrag":
278-
custom = evt.oldIndicies.map<Input>((curr, index) => ({
279-
element: curr.multiDragElement,
280-
oldIndex: curr.index,
281-
newIndex: evt.newIndicies[index].index,
282-
...parentElement
283-
}));
284-
break;
285-
}
286274
const { list, setList } = this.props;
287-
const customs = createNormalized(custom, list);
288-
handleDOMChanges(customs);
275+
const customs = createCustoms(evt, list);
276+
removeNodes(customs);
277+
insertNodes(customs);
289278
const newList = handleStateChanges(customs, list);
290279
return setList(newList, this.sortable, store);
291280
}
@@ -320,20 +309,20 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
320309
if (removeOnSpill && !revertOnSpill) removeNode(evt.item);
321310
}
322311

323-
onSelect(evt: SortableEvent) {
312+
onSelect(evt: MultiDragEvent) {
324313
const { list, setList } = this.props;
325314
const newList = [...list].map(item => ({ ...item, selected: false }));
326-
(evt as MultiDragEvent).newIndicies.forEach(curr => {
315+
evt.newIndicies.forEach(curr => {
327316
const index = curr.index;
328317
newList[index].selected = true;
329318
});
330319
setList(newList, this.sortable, store);
331320
}
332321

333-
onDeselect(evt: SortableEvent) {
322+
onDeselect(evt: MultiDragEvent) {
334323
const { list, setList } = this.props;
335324
const newList = [...list].map(item => ({ ...item, selected: false }));
336-
(evt as MultiDragEvent).newIndicies.forEach(curr => {
325+
evt.oldIndicies.forEach(curr => {
337326
const index = curr.index;
338327
newList[index].selected = true;
339328
});

0 commit comments

Comments
 (0)
0