Skip to content

Commit 30391b7

Browse files
author
Wayne Van Son
committed
[dist] rebuild for new version
1 parent 95df0dd commit 30391b7

File tree

7 files changed

+187
-65
lines changed

7 files changed

+187
-65
lines changed

‎dist/index.es.js‎

Lines changed: 83 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,13 @@ function removeNode(node) {
8686
node.parentElement.removeChild(node);
8787
}
8888
/**
89-
* @summary Inserts a `newChild` inside the `parent` at index number `position`
90-
* @param parent
91-
* @param newChild
92-
* @param position a number that is not negative
89+
* Inserts the `newChild` node at the given index in a parent
90+
* @param parent The parent HTML Element.
91+
* @param newChild A HTML eement to add as a child of the parent.
92+
* @param index index of the parent to place the new child in.
9393
*/
94-
function insertNodeAt(parent, newChild, position) {
95-
var refChild = position === 0 ? parent.children[0] : parent.children[position - 1];
94+
function insertNodeAt(parent, newChild, index) {
95+
var refChild = parent.children[index] || null;
9696
parent.insertBefore(newChild, refChild);
9797
}
9898
// todo:
@@ -128,7 +128,7 @@ var ReactSortable = /** @class */ (function (_super) {
128128
var plugins = props.plugins;
129129
// mount plugins if any
130130
if (plugins) {
131-
if (plugins instanceof Array)
131+
if (Array.isArray(plugins))
132132
Sortable$1.mount.apply(Sortable$1, __spread(plugins));
133133
else
134134
Sortable$1.mount(plugins);
@@ -179,13 +179,7 @@ var ReactSortable = /** @class */ (function (_super) {
179179
enumerable: true,
180180
configurable: true
181181
});
182-
/** const { plugins } = props;
183-
// mount plugins if any
184-
if (plugins) {
185-
if (plugins instanceof Array) Sortable.mount(...plugins);
186-
else Sortable.mount(plugins);
187-
}
188-
}Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
182+
/** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
189183
ReactSortable.prototype.makeOptions = function () {
190184
var _this = this;
191185
var DOMHandlers = [
@@ -224,6 +218,7 @@ var ReactSortable = /** @class */ (function (_super) {
224218
// call the component prop
225219
_this.callOnHandlerProp(evt, evtName);
226220
// calls state change
221+
//@ts-ignore - until @types multidrag item is in
227222
_this[evtName](evt);
228223
};
229224
};
@@ -253,7 +248,6 @@ var ReactSortable = /** @class */ (function (_super) {
253248
};
254249
/** Called when an element is removed from the list into another list */
255250
ReactSortable.prototype.onRemove = function (evt) {
256-
//@ts-ignore - pullMode not in types. Request made.
257251
var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, clone = evt.clone, pullMode = evt.pullMode;
258252
insertNodeAt(from, item, oldIndex);
259253
var _a = this.props, list = _a.list, setList = _a.setList;
@@ -271,14 +265,80 @@ var ReactSortable = /** @class */ (function (_super) {
271265
};
272266
/** Called when sorting is changed within the same list */
273267
ReactSortable.prototype.onUpdate = function (evt) {
274-
var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, newIndex = evt.newIndex;
275-
removeNode(item);
276-
insertNodeAt(from, item, oldIndex);
277-
var _a = this.props, list = _a.list, setList = _a.setList;
278-
var newState = __spread(list);
279-
var _b = __read(newState.splice(oldIndex, 1), 1), oldItem = _b[0];
280-
newState.splice(newIndex, 0, oldItem);
281-
setList(newState, this.sortable, store);
268+
var mode = (function () {
269+
if (evt.oldIndicies.length > 0)
270+
return "multidrag";
271+
if (evt.swapItem)
272+
return "swap";
273+
return "normal";
274+
})();
275+
switch (mode) {
276+
case "normal": {
277+
removeNode(evt.item);
278+
insertNodeAt(evt.from, evt.item, evt.oldIndex);
279+
var _a = this.props, list = _a.list, setList = _a.setList;
280+
var newState = __spread(list);
281+
var _b = __read(newState.splice(evt.oldIndex, 1), 1), oldItem = _b[0];
282+
newState.splice(evt.newIndex, 0, oldItem);
283+
return setList(newState, this.sortable, store);
284+
}
285+
case "swap": {
286+
// item that was dragged
287+
removeNode(evt.item);
288+
insertNodeAt(evt.from, evt.item, evt.oldIndex);
289+
// item that was landed on for the swap
290+
removeNode(evt.swapItem);
291+
insertNodeAt(evt.from, evt.swapItem, evt.newIndex);
292+
var _c = this.props, list = _c.list, setList = _c.setList;
293+
var newState_1 = __spread(list);
294+
var customs = [
295+
{
296+
element: evt.item,
297+
oldIndex: evt.oldIndex,
298+
newIndex: evt.newIndex
299+
},
300+
{
301+
element: evt.swapItem,
302+
oldIndex: evt.newIndex,
303+
newIndex: evt.oldIndex
304+
}
305+
]
306+
.map(function (curr) { return (__assign(__assign({}, curr), { item: newState_1[curr.oldIndex] })); })
307+
.sort(function (a, b) { return a.oldIndex - b.oldIndex; });
308+
// DOM element management
309+
customs.forEach(function (curr) { return removeNode(curr.element); });
310+
customs.forEach(function (curr) {
311+
return insertNodeAt(evt.from, curr.element, curr.oldIndex);
312+
});
313+
customs.reverse().forEach(function (curr) { return newState_1.splice(curr.oldIndex, 1); });
314+
customs.forEach(function (curr) { return newState_1.splice(curr.newIndex, 0, curr.item); });
315+
return setList(newState_1, this.sortable, store);
316+
}
317+
case "multidrag": {
318+
var newOldIndices = evt.oldIndicies.map(function (curr, index) { return ({
319+
element: curr.multiDragElement,
320+
oldIndex: curr.index,
321+
newIndex: evt.newIndicies[index].index
322+
}); });
323+
// DOM element management
324+
newOldIndices.forEach(function (curr) { return removeNode(curr.element); });
325+
newOldIndices.forEach(function (curr) {
326+
return insertNodeAt(evt.from, curr.element, curr.oldIndex);
327+
});
328+
var _d = this.props, list = _d.list, setList = _d.setList;
329+
var newState_2 = __spread(list);
330+
newOldIndices
331+
// remove old items in state, starting from the end.
332+
.reverse()
333+
.map(function (curr) { return (__assign(__assign({}, curr), { item: newState_2.splice(curr.oldIndex, 1).pop() })); })
334+
// insert new items, starting from the front.
335+
.reverse()
336+
.forEach(function (curr) {
337+
newState_2.splice(curr.newIndex, 0, curr.item);
338+
});
339+
return setList(newState_2, this.sortable, store);
340+
}
341+
}
282342
};
283343
/** Called when the dragging starts */
284344
ReactSortable.prototype.onStart = function (evt) {
@@ -301,7 +361,6 @@ var ReactSortable = /** @class */ (function (_super) {
301361
/** @todo */
302362
ReactSortable.prototype.onSelect = function (evt) {
303363
var oldIndex = evt.oldIndex, newIndex = evt.newIndex;
304-
console.log({ oldIndex: oldIndex, newIndex: newIndex });
305364
// append the class name the classes of the item
306365
// do it on the item?
307366
// a seperate state?

‎dist/index.js‎

Lines changed: 83 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -92,13 +92,13 @@ function removeNode(node) {
9292
node.parentElement.removeChild(node);
9393
}
9494
/**
95-
* @summary Inserts a `newChild` inside the `parent` at index number `position`
96-
* @param parent
97-
* @param newChild
98-
* @param position a number that is not negative
95+
* Inserts the `newChild` node at the given index in a parent
96+
* @param parent The parent HTML Element.
97+
* @param newChild A HTML eement to add as a child of the parent.
98+
* @param index index of the parent to place the new child in.
9999
*/
100-
function insertNodeAt(parent, newChild, position) {
101-
var refChild = position === 0 ? parent.children[0] : parent.children[position - 1];
100+
function insertNodeAt(parent, newChild, index) {
101+
var refChild = parent.children[index] || null;
102102
parent.insertBefore(newChild, refChild);
103103
}
104104
// todo:
@@ -134,7 +134,7 @@ var ReactSortable = /** @class */ (function (_super) {
134134
var plugins = props.plugins;
135135
// mount plugins if any
136136
if (plugins) {
137-
if (plugins instanceof Array)
137+
if (Array.isArray(plugins))
138138
Sortable$1__default.mount.apply(Sortable$1__default, __spread(plugins));
139139
else
140140
Sortable$1__default.mount(plugins);
@@ -185,13 +185,7 @@ var ReactSortable = /** @class */ (function (_super) {
185185
enumerable: true,
186186
configurable: true
187187
});
188-
/** const { plugins } = props;
189-
// mount plugins if any
190-
if (plugins) {
191-
if (plugins instanceof Array) Sortable.mount(...plugins);
192-
else Sortable.mount(plugins);
193-
}
194-
}Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
188+
/** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
195189
ReactSortable.prototype.makeOptions = function () {
196190
var _this = this;
197191
var DOMHandlers = [
@@ -230,6 +224,7 @@ var ReactSortable = /** @class */ (function (_super) {
230224
// call the component prop
231225
_this.callOnHandlerProp(evt, evtName);
232226
// calls state change
227+
//@ts-ignore - until @types multidrag item is in
233228
_this[evtName](evt);
234229
};
235230
};
@@ -259,7 +254,6 @@ var ReactSortable = /** @class */ (function (_super) {
259254
};
260255
/** Called when an element is removed from the list into another list */
261256
ReactSortable.prototype.onRemove = function (evt) {
262-
//@ts-ignore - pullMode not in types. Request made.
263257
var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, clone = evt.clone, pullMode = evt.pullMode;
264258
insertNodeAt(from, item, oldIndex);
265259
var _a = this.props, list = _a.list, setList = _a.setList;
@@ -277,14 +271,80 @@ var ReactSortable = /** @class */ (function (_super) {
277271
};
278272
/** Called when sorting is changed within the same list */
279273
ReactSortable.prototype.onUpdate = function (evt) {
280-
var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, newIndex = evt.newIndex;
281-
removeNode(item);
282-
insertNodeAt(from, item, oldIndex);
283-
var _a = this.props, list = _a.list, setList = _a.setList;
284-
var newState = __spread(list);
285-
var _b = __read(newState.splice(oldIndex, 1), 1), oldItem = _b[0];
286-
newState.splice(newIndex, 0, oldItem);
287-
setList(newState, this.sortable, store);
274+
var mode = (function () {
275+
if (evt.oldIndicies.length > 0)
276+
return "multidrag";
277+
if (evt.swapItem)
278+
return "swap";
279+
return "normal";
280+
})();
281+
switch (mode) {
282+
case "normal": {
283+
removeNode(evt.item);
284+
insertNodeAt(evt.from, evt.item, evt.oldIndex);
285+
var _a = this.props, list = _a.list, setList = _a.setList;
286+
var newState = __spread(list);
287+
var _b = __read(newState.splice(evt.oldIndex, 1), 1), oldItem = _b[0];
288+
newState.splice(evt.newIndex, 0, oldItem);
289+
return setList(newState, this.sortable, store);
290+
}
291+
case "swap": {
292+
// item that was dragged
293+
removeNode(evt.item);
294+
insertNodeAt(evt.from, evt.item, evt.oldIndex);
295+
// item that was landed on for the swap
296+
removeNode(evt.swapItem);
297+
insertNodeAt(evt.from, evt.swapItem, evt.newIndex);
298+
var _c = this.props, list = _c.list, setList = _c.setList;
299+
var newState_1 = __spread(list);
300+
var customs = [
301+
{
302+
element: evt.item,
303+
oldIndex: evt.oldIndex,
304+
newIndex: evt.newIndex
305+
},
306+
{
307+
element: evt.swapItem,
308+
oldIndex: evt.newIndex,
309+
newIndex: evt.oldIndex
310+
}
311+
]
312+
.map(function (curr) { return (__assign(__assign({}, curr), { item: newState_1[curr.oldIndex] })); })
313+
.sort(function (a, b) { return a.oldIndex - b.oldIndex; });
314+
// DOM element management
315+
customs.forEach(function (curr) { return removeNode(curr.element); });
316+
customs.forEach(function (curr) {
317+
return insertNodeAt(evt.from, curr.element, curr.oldIndex);
318+
});
319+
customs.reverse().forEach(function (curr) { return newState_1.splice(curr.oldIndex, 1); });
320+
customs.forEach(function (curr) { return newState_1.splice(curr.newIndex, 0, curr.item); });
321+
return setList(newState_1, this.sortable, store);
322+
}
323+
case "multidrag": {
324+
var newOldIndices = evt.oldIndicies.map(function (curr, index) { return ({
325+
element: curr.multiDragElement,
326+
oldIndex: curr.index,
327+
newIndex: evt.newIndicies[index].index
328+
}); });
329+
// DOM element management
330+
newOldIndices.forEach(function (curr) { return removeNode(curr.element); });
331+
newOldIndices.forEach(function (curr) {
332+
return insertNodeAt(evt.from, curr.element, curr.oldIndex);
333+
});
334+
var _d = this.props, list = _d.list, setList = _d.setList;
335+
var newState_2 = __spread(list);
336+
newOldIndices
337+
// remove old items in state, starting from the end.
338+
.reverse()
339+
.map(function (curr) { return (__assign(__assign({}, curr), { item: newState_2.splice(curr.oldIndex, 1).pop() })); })
340+
// insert new items, starting from the front.
341+
.reverse()
342+
.forEach(function (curr) {
343+
newState_2.splice(curr.newIndex, 0, curr.item);
344+
});
345+
return setList(newState_2, this.sortable, store);
346+
}
347+
}
288348
};
289349
/** Called when the dragging starts */
290350
ReactSortable.prototype.onStart = function (evt) {
@@ -307,7 +367,6 @@ var ReactSortable = /** @class */ (function (_super) {
307367
/** @todo */
308368
ReactSortable.prototype.onSelect = function (evt) {
309369
var oldIndex = evt.oldIndex, newIndex = evt.newIndex;
310-
console.log({ oldIndex: oldIndex, newIndex: newIndex });
311370
// append the class name the classes of the item
312371
// do it on the item?
313372
// a seperate state?

‎dist/react-sortable.d.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, ReactElement } from "react";
22
import Sortable, { Options, SortableEvent } from "sortablejs";
3-
import { AllMethodsExceptMove, HandledMethodNames, ReactSortableProps, ItemInterface } from "./types";
3+
import { AllMethodsExceptMove, HandledMethodNames, ItemInterface, ReactSortableProps } from "./types";
44
/**
55
* React is built for synchornizing data with the browser.
66
*
@@ -15,13 +15,7 @@ export declare class ReactSortable<T extends ItemInterface> extends Component<Re
1515
private getChildren;
1616
/** Appends the `sortable` property to this component */
1717
private get sortable();
18-
/** const { plugins } = props;
19-
// mount plugins if any
20-
if (plugins) {
21-
if (plugins instanceof Array) Sortable.mount(...plugins);
22-
else Sortable.mount(plugins);
23-
}
24-
}Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
18+
/** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
2519
makeOptions(): Options;
2620
/** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop & an `on[Handler]` ReactSortable method. */
2721
prepareOnHandlerPropAndDOM(evtName: HandledMethodNames): (evt: Sortable.SortableEvent) => void;
@@ -34,7 +28,7 @@ export declare class ReactSortable<T extends ItemInterface> extends Component<Re
3428
/** Called when an element is removed from the list into another list */
3529
onRemove(evt: SortableEvent): void;
3630
/** Called when sorting is changed within the same list */
37-
onUpdate(evt: SortableEvent): void;
31+
onUpdate(evt: MultiDragEvent): void;
3832
/** Called when the dragging starts */
3933
onStart(evt: SortableEvent): void;
4034
/** Called when the dragging ends */
@@ -48,4 +42,14 @@ export declare class ReactSortable<T extends ItemInterface> extends Component<Re
4842
/** @todo */
4943
onDeselect(evt: SortableEvent): void;
5044
}
45+
interface MultiIndices {
46+
multiDragElement: HTMLElement;
47+
index: number;
48+
}
49+
interface MultiDragEvent extends SortableEvent {
50+
oldIndicies: MultiIndices[];
51+
newIndicies: MultiIndices[];
52+
swapItem: HTMLElement | null;
53+
}
54+
export {};
5155
//# sourceMappingURL=react-sortable.d.ts.map

0 commit comments

Comments
 (0)