react-sortablejs - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

dist/index.es.js

@@ -89,9 +89,9 @@ import { createElement, Children, cloneElement, createRef, Component } from 'react';
 /**
- * @summary Inserts a `newChild` inside the `parent` at index number `position`
- * @param parent
- * @param newChild
- * @param position a number that is not negative
+ * Inserts the `newChild` node at the given index in a parent
+ * @param parent The parent HTML Element.
+ * @param newChild A HTML eement to add as a child of the parent.
+ * @param index index of the parent to place the new child in.
  */
-function insertNodeAt(parent, newChild, position) {
-    var refChild = position === 0 ? parent.children[0] : parent.children[position - 1];
+function insertNodeAt(parent, newChild, index) {
+    var refChild = parent.children[index] || null;
     parent.insertBefore(newChild, refChild);
@@ -132,3 +132,3 @@ }
         if (plugins) {
-            if (plugins instanceof Array)
+            if (Array.isArray(plugins))
                 Sortable$1.mount.apply(Sortable$1, __spread(plugins));
@@ -184,9 +184,3 @@ else
     });
-    /**  const { plugins } = props;
-      // mount plugins if any
-      if (plugins) {
-        if (plugins instanceof Array) Sortable.mount(...plugins);
-        else Sortable.mount(plugins);
-      }
-    }Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
+    /** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
     ReactSortable.prototype.makeOptions = function () {
@@ -230,2 +224,3 @@ var _this = this;
             // calls state change
+            //@ts-ignore - until @types multidrag item is in
             _this[evtName](evt);
@@ -260,3 +255,2 @@ };
     ReactSortable.prototype.onRemove = function (evt) {
-        //@ts-ignore - pullMode not in types. Request made.
         var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, clone = evt.clone, pullMode = evt.pullMode;
@@ -279,10 +273,76 @@ insertNodeAt(from, item, oldIndex);
     ReactSortable.prototype.onUpdate = function (evt) {
-        var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, newIndex = evt.newIndex;
-        removeNode(item);
-        insertNodeAt(from, item, oldIndex);
-        var _a = this.props, list = _a.list, setList = _a.setList;
-        var newState = __spread(list);
-        var _b = __read(newState.splice(oldIndex, 1), 1), oldItem = _b[0];
-        newState.splice(newIndex, 0, oldItem);
-        setList(newState, this.sortable, store);
+        var mode = (function () {
+            if (evt.oldIndicies.length > 0)
+                return "multidrag";
+            if (evt.swapItem)
+                return "swap";
+            return "normal";
+        })();
+        switch (mode) {
+            case "normal": {
+                removeNode(evt.item);
+                insertNodeAt(evt.from, evt.item, evt.oldIndex);
+                var _a = this.props, list = _a.list, setList = _a.setList;
+                var newState = __spread(list);
+                var _b = __read(newState.splice(evt.oldIndex, 1), 1), oldItem = _b[0];
+                newState.splice(evt.newIndex, 0, oldItem);
+                return setList(newState, this.sortable, store);
+            }
+            case "swap": {
+                // item that was dragged
+                removeNode(evt.item);
+                insertNodeAt(evt.from, evt.item, evt.oldIndex);
+                // item that was landed on for the swap
+                removeNode(evt.swapItem);
+                insertNodeAt(evt.from, evt.swapItem, evt.newIndex);
+                var _c = this.props, list = _c.list, setList = _c.setList;
+                var newState_1 = __spread(list);
+                var customs = [
+                    {
+                        element: evt.item,
+                        oldIndex: evt.oldIndex,
+                        newIndex: evt.newIndex
+                    },
+                    {
+                        element: evt.swapItem,
+                        oldIndex: evt.newIndex,
+                        newIndex: evt.oldIndex
+                    }
+                ]
+                    .map(function (curr) { return (__assign(__assign({}, curr), { item: newState_1[curr.oldIndex] })); })
+                    .sort(function (a, b) { return a.oldIndex - b.oldIndex; });
+                // DOM element management
+                customs.forEach(function (curr) { return removeNode(curr.element); });
+                customs.forEach(function (curr) {
+                    return insertNodeAt(evt.from, curr.element, curr.oldIndex);
+                });
+                customs.reverse().forEach(function (curr) { return newState_1.splice(curr.oldIndex, 1); });
+                customs.forEach(function (curr) { return newState_1.splice(curr.newIndex, 0, curr.item); });
+                return setList(newState_1, this.sortable, store);
+            }
+            case "multidrag": {
+                var newOldIndices = evt.oldIndicies.map(function (curr, index) { return ({
+                    element: curr.multiDragElement,
+                    oldIndex: curr.index,
+                    newIndex: evt.newIndicies[index].index
+                }); });
+                // DOM element management
+                newOldIndices.forEach(function (curr) { return removeNode(curr.element); });
+                newOldIndices.forEach(function (curr) {
+                    return insertNodeAt(evt.from, curr.element, curr.oldIndex);
+                });
+                var _d = this.props, list = _d.list, setList = _d.setList;
+                var newState_2 = __spread(list);
+                newOldIndices
+                    // remove old items in state, starting from the end.
+                    .reverse()
+                    .map(function (curr) { return (__assign(__assign({}, curr), { item: newState_2.splice(curr.oldIndex, 1).pop() })); })
+                    // insert new items, starting from the front.
+                    .reverse()
+                    .forEach(function (curr) {
+                    newState_2.splice(curr.newIndex, 0, curr.item);
+                });
+                return setList(newState_2, this.sortable, store);
+            }
+        }
     };
@@ -310,3 +370,2 @@ /** Called when the dragging starts */
         var oldIndex = evt.oldIndex, newIndex = evt.newIndex;
-        console.log({ oldIndex: oldIndex, newIndex: newIndex });
         // append the class name the classes of the item
@@ -313,0 +372,0 @@ // do it on the item?

dist/index.js

@@ -95,9 +95,9 @@ 'use strict';
 /**
- * @summary Inserts a `newChild` inside the `parent` at index number `position`
- * @param parent
- * @param newChild
- * @param position a number that is not negative
+ * Inserts the `newChild` node at the given index in a parent
+ * @param parent The parent HTML Element.
+ * @param newChild A HTML eement to add as a child of the parent.
+ * @param index index of the parent to place the new child in.
  */
-function insertNodeAt(parent, newChild, position) {
-    var refChild = position === 0 ? parent.children[0] : parent.children[position - 1];
+function insertNodeAt(parent, newChild, index) {
+    var refChild = parent.children[index] || null;
     parent.insertBefore(newChild, refChild);
@@ -138,3 +138,3 @@ }
         if (plugins) {
-            if (plugins instanceof Array)
+            if (Array.isArray(plugins))
                 Sortable$1__default.mount.apply(Sortable$1__default, __spread(plugins));
@@ -190,9 +190,3 @@ else
     });
-    /**  const { plugins } = props;
-      // mount plugins if any
-      if (plugins) {
-        if (plugins instanceof Array) Sortable.mount(...plugins);
-        else Sortable.mount(plugins);
-      }
-    }Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
+    /** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
     ReactSortable.prototype.makeOptions = function () {
@@ -236,2 +230,3 @@ var _this = this;
             // calls state change
+            //@ts-ignore - until @types multidrag item is in
             _this[evtName](evt);
@@ -266,3 +261,2 @@ };
     ReactSortable.prototype.onRemove = function (evt) {
-        //@ts-ignore - pullMode not in types. Request made.
         var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, clone = evt.clone, pullMode = evt.pullMode;
@@ -285,10 +279,76 @@ insertNodeAt(from, item, oldIndex);
     ReactSortable.prototype.onUpdate = function (evt) {
-        var item = evt.item, from = evt.from, oldIndex = evt.oldIndex, newIndex = evt.newIndex;
-        removeNode(item);
-        insertNodeAt(from, item, oldIndex);
-        var _a = this.props, list = _a.list, setList = _a.setList;
-        var newState = __spread(list);
-        var _b = __read(newState.splice(oldIndex, 1), 1), oldItem = _b[0];
-        newState.splice(newIndex, 0, oldItem);
-        setList(newState, this.sortable, store);
+        var mode = (function () {
+            if (evt.oldIndicies.length > 0)
+                return "multidrag";
+            if (evt.swapItem)
+                return "swap";
+            return "normal";
+        })();
+        switch (mode) {
+            case "normal": {
+                removeNode(evt.item);
+                insertNodeAt(evt.from, evt.item, evt.oldIndex);
+                var _a = this.props, list = _a.list, setList = _a.setList;
+                var newState = __spread(list);
+                var _b = __read(newState.splice(evt.oldIndex, 1), 1), oldItem = _b[0];
+                newState.splice(evt.newIndex, 0, oldItem);
+                return setList(newState, this.sortable, store);
+            }
+            case "swap": {
+                // item that was dragged
+                removeNode(evt.item);
+                insertNodeAt(evt.from, evt.item, evt.oldIndex);
+                // item that was landed on for the swap
+                removeNode(evt.swapItem);
+                insertNodeAt(evt.from, evt.swapItem, evt.newIndex);
+                var _c = this.props, list = _c.list, setList = _c.setList;
+                var newState_1 = __spread(list);
+                var customs = [
+                    {
+                        element: evt.item,
+                        oldIndex: evt.oldIndex,
+                        newIndex: evt.newIndex
+                    },
+                    {
+                        element: evt.swapItem,
+                        oldIndex: evt.newIndex,
+                        newIndex: evt.oldIndex
+                    }
+                ]
+                    .map(function (curr) { return (__assign(__assign({}, curr), { item: newState_1[curr.oldIndex] })); })
+                    .sort(function (a, b) { return a.oldIndex - b.oldIndex; });
+                // DOM element management
+                customs.forEach(function (curr) { return removeNode(curr.element); });
+                customs.forEach(function (curr) {
+                    return insertNodeAt(evt.from, curr.element, curr.oldIndex);
+                });
+                customs.reverse().forEach(function (curr) { return newState_1.splice(curr.oldIndex, 1); });
+                customs.forEach(function (curr) { return newState_1.splice(curr.newIndex, 0, curr.item); });
+                return setList(newState_1, this.sortable, store);
+            }
+            case "multidrag": {
+                var newOldIndices = evt.oldIndicies.map(function (curr, index) { return ({
+                    element: curr.multiDragElement,
+                    oldIndex: curr.index,
+                    newIndex: evt.newIndicies[index].index
+                }); });
+                // DOM element management
+                newOldIndices.forEach(function (curr) { return removeNode(curr.element); });
+                newOldIndices.forEach(function (curr) {
+                    return insertNodeAt(evt.from, curr.element, curr.oldIndex);
+                });
+                var _d = this.props, list = _d.list, setList = _d.setList;
+                var newState_2 = __spread(list);
+                newOldIndices
+                    // remove old items in state, starting from the end.
+                    .reverse()
+                    .map(function (curr) { return (__assign(__assign({}, curr), { item: newState_2.splice(curr.oldIndex, 1).pop() })); })
+                    // insert new items, starting from the front.
+                    .reverse()
+                    .forEach(function (curr) {
+                    newState_2.splice(curr.newIndex, 0, curr.item);
+                });
+                return setList(newState_2, this.sortable, store);
+            }
+        }
     };
@@ -316,3 +376,2 @@ /** Called when the dragging starts */
         var oldIndex = evt.oldIndex, newIndex = evt.newIndex;
-        console.log({ oldIndex: oldIndex, newIndex: newIndex });
         // append the class name the classes of the item
@@ -319,0 +378,0 @@ // do it on the item?

dist/react-sortable.d.ts

 import { Component, ReactElement } from "react";
 import Sortable, { Options, SortableEvent } from "sortablejs";
-import { AllMethodsExceptMove, HandledMethodNames, ReactSortableProps, ItemInterface } from "./types";
+import { AllMethodsExceptMove, HandledMethodNames, ItemInterface, ReactSortableProps } from "./types";
 /**
@@ -18,9 +18,3 @@ * React is built for synchornizing data with the browser.
     private get sortable();
-    /**  const { plugins } = props;
-      // mount plugins if any
-      if (plugins) {
-        if (plugins instanceof Array) Sortable.mount(...plugins);
-        else Sortable.mount(plugins);
-      }
-    }Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
+    /** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
     makeOptions(): Options;
@@ -38,3 +32,3 @@ /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop & an `on[Handler]` ReactSortable method.  */
     /** Called when sorting is changed within the same list */
-    onUpdate(evt: SortableEvent): void;
+    onUpdate(evt: MultiDragEvent): void;
     /** Called when the dragging starts */
@@ -53,2 +47,12 @@ onStart(evt: SortableEvent): void;
 }
+interface MultiIndices {
+    multiDragElement: HTMLElement;
+    index: number;
+}
+interface MultiDragEvent extends SortableEvent {
+    oldIndicies: MultiIndices[];
+    newIndicies: MultiIndices[];
+    swapItem: HTMLElement | null;
+}
+export {};
 //# sourceMappingURL=react-sortable.d.ts.map

dist/util.d.ts

@@ -10,8 +10,8 @@ import { PropsWithChildren } from "react";
 /**
- * @summary Inserts a `newChild` inside the `parent` at index number `position`
- * @param parent
- * @param newChild
- * @param position a number that is not negative
+ * Inserts the `newChild` node at the given index in a parent
+ * @param parent The parent HTML Element.
+ * @param newChild A HTML eement to add as a child of the parent.
+ * @param index index of the parent to place the new child in.
  */
-export declare function insertNodeAt(parent: HTMLElement, newChild: HTMLElement, position: number): void;
+export declare function insertNodeAt(parent: HTMLElement, newChild: HTMLElement, index: number): void;
 /**
@@ -18,0 +18,0 @@ * Removes the following group of properties from `props`,

package.json

@@ -8,3 +8,3 @@ {
   "license": "MIT",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": false,
@@ -11,0 +11,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55888

increased by13.04%

Lines of code

911

increased by15.46%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes