Socket
Socket
Sign inDemoInstall

react-sortablejs

Package Overview
Dependencies
Maintainers
4
Versions
48
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sortablejs - npm Package Compare versions

Comparing version 6.0.0 to 6.0.3

3

dist/index.d.ts
import { CSSProperties, ForwardRefExoticComponent, ReactHTML, RefAttributes, Component } from "react";
import { MoveEvent, Options, SortableEvent } from "sortablejs";
import Sortable, { MoveEvent, Options, SortableEvent } from "sortablejs";
/**

@@ -84,2 +84,3 @@ * Construct a type with the properties of T except for those in type K.

componentDidMount(): void;
componentDidUpdate(prevProps: ReactSortableProps<T>): void;
render(): JSX.Element;

@@ -86,0 +87,0 @@ /** Appends the `sortable` property to this component */

444

dist/index.js

@@ -1,2 +0,444 @@

var e=g(require("tiny-invariant")),t=require("react"),n=t.Children,r=t.cloneElement,o=t.Component,i=t.createElement,l=t.createRef,a=g(require("classnames")),c=require("sortablejs"),s=g(c);exports.Sortable=s;var u=c.Direction;exports.Direction=u;var f=c.DOMRect;exports.DOMRect=f;var p=c.GroupOptions;exports.GroupOptions=p;var d=c.MoveEvent;exports.MoveEvent=d;var b=c.Options;exports.Options=b;var y=c.PullResult;exports.PullResult=y;var v=c.PutResult;exports.PutResult=v;var h=c.SortableEvent;exports.SortableEvent=h;var m=c.SortableOptions;exports.SortableOptions=m;var O=c.Utils;function g(e){return e&&e.__esModule?e.default:e}function w(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function S(e){return function(e){if(Array.isArray(e))return j(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return j(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return j(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function x(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?x(Object(n),!0).forEach((function(t){P(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):x(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function P(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e){null!==e.parentElement&&e.parentElement.removeChild(e)}function k(e){e.forEach((function(e){return E(e.element)}))}function C(e){e.forEach((function(e){var t,n,r,o;t=e.parentElement,n=e.element,r=e.oldIndex,o=t.children[r]||null,t.insertBefore(n,o)}))}function D(e,t){var n=M(e),r={parentElement:e.from},o=[];switch(n){case"normal":o=[{element:e.item,newIndex:e.newIndex,oldIndex:e.oldIndex,parentElement:e.from}];break;case"swap":o=[I({element:e.item,oldIndex:e.oldIndex,newIndex:e.newIndex},r),I({element:e.swapItem,oldIndex:e.newIndex,newIndex:e.oldIndex},r)];break;case"multidrag":o=e.oldIndicies.map((function(t,n){return I({element:t.multiDragElement,oldIndex:t.index,newIndex:e.newIndicies[n].index},r)}))}return function(e,t){return e.map((function(e){return I(I({},e),{},{item:t[e.oldIndex]})})).sort((function(e,t){return e.oldIndex-t.oldIndex}))}(o,t)}function A(e,t){var n=S(t);return e.concat().reverse().forEach((function(e){return n.splice(e.oldIndex,1)})),n}function R(e,t,n,r){var o=S(t);return e.forEach((function(e){var t=r&&n&&r(e.item,n);o.splice(e.newIndex,0,t||e.item)})),o}function M(e){return e.oldIndicies&&e.oldIndicies.length>0?"multidrag":e.swapItem?"swap":"normal"}function U(e){return(U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function L(e){return function(e){if(Array.isArray(e))return _(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return _(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function H(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?H(Object(n),!0).forEach((function(t){B(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):H(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function q(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function T(e,t){return(T=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function F(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=$(e);if(t){var o=$(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return G(this,n)}}function G(e,t){return!t||"object"!==U(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function $(e){return($=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function B(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}exports.Utils=O;var J={dragging:null},z=function(t){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&T(e,t)}(d,o);var c,u,f,p=F(d);function d(t){var n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,d),(n=p.call(this,t)).ref=l();var r=t.list.map((function(e){return N(N({},e),{},{chosen:!1,selected:!1})}));return t.setList(r,n.sortable,J),e(!t.plugins,'\nPlugins prop is no longer supported.\nInstead, mount it with "Sortable.mount(new MultiDrag())"\nPlease read the updated README.md at https://github.com/SortableJS/react-sortablejs.\n '),n}return c=d,(u=[{key:"componentDidMount",value:function(){if(null!==this.ref.current){var e=this.makeOptions();s.create(this.ref.current,e)}}},{key:"render",value:function(){var e=this.props,t=e.tag,n={style:e.style,className:e.className,id:e.id};return i(t&&null!==t?t:"div",N({ref:this.ref},n),this.getChildren())}},{key:"getChildren",value:function(){var e=this.props,t=e.children,o=e.dataIdAttr,i=e.selectedClass,l=void 0===i?"sortable-selected":i,c=e.chosenClass,s=void 0===c?"sortable-chosen":c,u=(e.dragClass,e.fallbackClass,e.ghostClass,e.swapClass,e.filter),f=void 0===u?"sortable-filter":u,p=e.list;if(!t||null==t)return null;var d=o||"data-id";return n.map(t,(function(e,t){var n,o,i=p[t],c=e.props.className,u="string"==typeof f&&B({},f.replace(".",""),!!i.filtered),b=a(c,N((B(n={},l,i.selected),B(n,s,i.chosen),n),u));return r(e,(B(o={},d,e.key),B(o,"className",b),o))}))}},{key:"makeOptions",value:function(){var e,t=this,n=((e=this.props).list,e.setList,e.children,e.tag,e.style,e.className,e.clone,e.onAdd,e.onChange,e.onChoose,e.onClone,e.onEnd,e.onFilter,e.onRemove,e.onSort,e.onStart,e.onUnchoose,e.onUpdate,e.onMove,e.onSpill,e.onSelect,e.onDeselect,w(e,["list","setList","children","tag","style","className","clone","onAdd","onChange","onChoose","onClone","onEnd","onFilter","onRemove","onSort","onStart","onUnchoose","onUpdate","onMove","onSpill","onSelect","onDeselect"]));return["onAdd","onChoose","onDeselect","onEnd","onRemove","onSelect","onSpill","onStart","onUnchoose","onUpdate"].forEach((function(e){return n[e]=t.prepareOnHandlerPropAndDOM(e)})),["onChange","onClone","onFilter","onSort"].forEach((function(e){return n[e]=t.prepareOnHandlerProp(e)})),N(N({},n),{},{onMove:function(e,n){var r=t.props.onMove,o=e.willInsertAfter||-1;if(!r)return o;var i=r(e,n,t.sortable,J);return void 0!==i&&i}})}},{key:"prepareOnHandlerPropAndDOM",value:function(e){var t=this;return function(n){t.callOnHandlerProp(n,e),t[e](n)}}},{key:"prepareOnHandlerProp",value:function(e){var t=this;return function(n){t.callOnHandlerProp(n,e)}}},{key:"callOnHandlerProp",value:function(e,t){var n=this.props[t];n&&n(e,this.sortable,J)}},{key:"onAdd",value:function(e){var t=this.props,n=t.list,r=t.setList,o=t.clone,i=D(e,L(J.dragging.props.list));k(i),r(R(i,n,e,o).map((function(e){return N(N({},e),{},{selected:!1})})),this.sortable,J)}},{key:"onRemove",value:function(t){var n=this,r=this.props,o=r.list,i=r.setList,l=M(t),a=D(t,o);C(a);var c=L(o);if("clone"!==t.pullMode)c=A(a,c);else{var s=a;switch(l){case"multidrag":s=a.map((function(e,n){return N(N({},e),{},{element:t.clones[n]})}));break;case"normal":s=a.map((function(e){return N(N({},e),{},{element:t.clone})}));break;case"swap":default:e(!0,'mode "'.concat(l,'" cannot clone. Please remove "props.clone" from <ReactSortable/> when using the "').concat(l,'" plugin'))}k(s),a.forEach((function(e){var r=e.oldIndex,o=n.props.clone(e.item,t);c.splice(r,1,o)}))}i(c=c.map((function(e){return N(N({},e),{},{selected:!1})})),this.sortable,J)}},{key:"onUpdate",value:function(e){var t=this.props,n=t.list,r=t.setList,o=D(e,n);return k(o),C(o),r(function(e,t){return R(e,A(e,t))}(o,n),this.sortable,J)}},{key:"onStart",value:function(){J.dragging=this}},{key:"onEnd",value:function(){J.dragging=null}},{key:"onChoose",value:function(e){var t=this.props,n=t.list;(0,t.setList)(n.map((function(t,n){return n===e.oldIndex?N(N({},t),{},{chosen:!0}):t})),this.sortable,J)}},{key:"onUnchoose",value:function(e){var t=this.props,n=t.list;(0,t.setList)(n.map((function(t,n){return n===e.oldIndex?N(N({},t),{},{chosen:!1}):t})),this.sortable,J)}},{key:"onSpill",value:function(e){var t=this.props,n=t.removeOnSpill,r=t.revertOnSpill;n&&!r&&E(e.item)}},{key:"onSelect",value:function(e){var t=this.props,n=t.list,r=t.setList,o=n.map((function(e){return N(N({},e),{},{selected:!1})}));e.newIndicies.forEach((function(t){var n=t.index;if(-1===n)return console.log('"'.concat(e.type,'" had indice of "').concat(t.index,"\", which is probably -1 and doesn't usually happen here.")),void console.log(e);o[n].selected=!0})),r(o,this.sortable,J)}},{key:"onDeselect",value:function(e){var t=this.props,n=t.list,r=t.setList,o=n.map((function(e){return N(N({},e),{},{selected:!1})}));e.newIndicies.forEach((function(e){var t=e.index;-1!==t&&(o[t].selected=!0)})),r(o,this.sortable,J)}},{key:"sortable",get:function(){var e=this.ref.current;if(null===e)return null;var t=Object.keys(e).find((function(e){return e.includes("Sortable")}));return t?e[t]:null}}])&&q(c.prototype,u),f&&q(c,f),d}();exports.ReactSortable=z,B(z,"defaultProps",{clone:function(e){return e}});
var $1ZQrD$sortablejs = require("sortablejs");
var $1ZQrD$classnames = require("classnames");
var $1ZQrD$react = require("react");
var $1ZQrD$tinyinvariant = require("tiny-invariant");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$exportWildcard(dest, source) {
Object.keys(source).forEach(function(key) {
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
return;
}
Object.defineProperty(dest, key, {
enumerable: true,
get: function get() {
return source[key];
}
});
});
return dest;
}
$parcel$export(module.exports, "Sortable", () => $5e2f01247a5d6f10$re_export$Sortable);
$parcel$export(module.exports, "Direction", () => $5e2f01247a5d6f10$re_export$Direction);
$parcel$export(module.exports, "DOMRect", () => $5e2f01247a5d6f10$re_export$DOMRect);
$parcel$export(module.exports, "GroupOptions", () => $5e2f01247a5d6f10$re_export$GroupOptions);
$parcel$export(module.exports, "MoveEvent", () => $5e2f01247a5d6f10$re_export$MoveEvent);
$parcel$export(module.exports, "Options", () => $5e2f01247a5d6f10$re_export$Options);
$parcel$export(module.exports, "PullResult", () => $5e2f01247a5d6f10$re_export$PullResult);
$parcel$export(module.exports, "PutResult", () => $5e2f01247a5d6f10$re_export$PutResult);
$parcel$export(module.exports, "SortableEvent", () => $5e2f01247a5d6f10$re_export$SortableEvent);
$parcel$export(module.exports, "SortableOptions", () => $5e2f01247a5d6f10$re_export$SortableOptions);
$parcel$export(module.exports, "Utils", () => $5e2f01247a5d6f10$re_export$Utils);
$parcel$export(module.exports, "ReactSortable", () => $c99785ec5604a382$export$11bbed9ee0012c13);
function $38186c783ba0d7b3$export$1d0aa160432dfea5(node) {
if (node.parentElement !== null) node.parentElement.removeChild(node);
}
function $38186c783ba0d7b3$export$6d240faa51aa562f(parent, newChild, index) {
const refChild = parent.children[index] || null;
parent.insertBefore(newChild, refChild);
}
function $38186c783ba0d7b3$export$d7d742816c28cf91(customs) {
$38186c783ba0d7b3$export$77f49a256021c8de(customs);
$38186c783ba0d7b3$export$a6177d5829f70ebc(customs);
}
function $38186c783ba0d7b3$export$77f49a256021c8de(customs) {
customs.forEach((curr)=>$38186c783ba0d7b3$export$1d0aa160432dfea5(curr.element)
);
}
function $38186c783ba0d7b3$export$a6177d5829f70ebc(customs) {
customs.forEach((curr)=>{
$38186c783ba0d7b3$export$6d240faa51aa562f(curr.parentElement, curr.element, curr.oldIndex);
});
}
function $38186c783ba0d7b3$export$4655efe700f887a(evt, list) {
const mode = $38186c783ba0d7b3$export$1fc0f6205829e19c(evt);
const parentElement = {
parentElement: evt.from
};
let custom = [];
switch(mode){
case "normal":
/* eslint-disable */ const item = {
element: evt.item,
newIndex: evt.newIndex,
oldIndex: evt.oldIndex,
parentElement: evt.from
};
custom = [
item
];
break;
case "swap":
const drag = {
element: evt.item,
oldIndex: evt.oldIndex,
newIndex: evt.newIndex,
...parentElement
};
const swap = {
element: evt.swapItem,
oldIndex: evt.newIndex,
newIndex: evt.oldIndex,
...parentElement
};
custom = [
drag,
swap
];
break;
case "multidrag":
custom = evt.oldIndicies.map((curr, index)=>({
element: curr.multiDragElement,
oldIndex: curr.index,
newIndex: evt.newIndicies[index].index,
...parentElement
})
);
break;
}
/* eslint-enable */ const customs = $38186c783ba0d7b3$export$bc06a3af7dc65f53(custom, list);
return customs;
}
function $38186c783ba0d7b3$export$c25cf8080bd305ec(normalized, list) {
const a = $38186c783ba0d7b3$export$be2da95e6167b0bd(normalized, list);
const b = $38186c783ba0d7b3$export$eca851ee65ae17e4(normalized, a);
return b;
}
function $38186c783ba0d7b3$export$be2da95e6167b0bd(normalized, list) {
const newList = [
...list
];
normalized.concat().reverse().forEach((curr)=>newList.splice(curr.oldIndex, 1)
);
return newList;
}
function $38186c783ba0d7b3$export$eca851ee65ae17e4(normalized, list, evt, clone) {
const newList = [
...list
];
normalized.forEach((curr)=>{
const newItem = clone && evt && clone(curr.item, evt);
newList.splice(curr.newIndex, 0, newItem || curr.item);
});
return newList;
}
function $38186c783ba0d7b3$export$1fc0f6205829e19c(evt) {
if (evt.oldIndicies && evt.oldIndicies.length > 0) return "multidrag";
if (evt.swapItem) return "swap";
return "normal";
}
function $38186c783ba0d7b3$export$bc06a3af7dc65f53(inputs, list) {
const normalized = inputs.map((curr)=>({
...curr,
item: list[curr.oldIndex]
})
).sort((a, b)=>a.oldIndex - b.oldIndex
);
return normalized;
}
function $38186c783ba0d7b3$export$7553c81e62e31b7e(props) {
/* eslint-disable */ const { list: // react sortable props
list , setList: setList , children: children , tag: tag , style: style , className: className , clone: clone , onAdd: // sortable options that have methods we want to overwrite
onAdd , onChange: onChange , onChoose: onChoose , onClone: onClone , onEnd: onEnd , onFilter: onFilter , onRemove: onRemove , onSort: onSort , onStart: onStart , onUnchoose: onUnchoose , onUpdate: onUpdate , onMove: onMove , onSpill: onSpill , onSelect: onSelect , onDeselect: onDeselect , ...options } = props;
/* eslint-enable */ return options;
}
/** Holds a global reference for which react element is being dragged */ // @todo - use context to manage this. How does one use 2 different providers?
const $c99785ec5604a382$var$store = {
dragging: null
};
class $c99785ec5604a382$export$11bbed9ee0012c13 extends $1ZQrD$react.Component {
constructor(props){
super(props);
// @todo forward ref this component
this.ref = /*#__PURE__*/ $1ZQrD$react.createRef();
// make all state false because we can't change sortable unless a mouse gesture is made.
const newList = props.list.map((item)=>({
...item,
chosen: false,
selected: false
})
);
props.setList(newList, this.sortable, $c99785ec5604a382$var$store);
($parcel$interopDefault($1ZQrD$tinyinvariant))(//@ts-expect-error: Doesn't exist. Will deprecate soon.
!props.plugins, `
Plugins prop is no longer supported.
Instead, mount it with "Sortable.mount(new MultiDrag())"
Please read the updated README.md at https://github.com/SortableJS/react-sortablejs.
`);
}
componentDidMount() {
if (this.ref.current === null) return;
const newOptions = this.makeOptions();
($parcel$interopDefault($1ZQrD$sortablejs)).create(this.ref.current, newOptions);
}
componentDidUpdate(prevProps) {
if (prevProps.disabled !== this.props.disabled && this.sortable) this.sortable.option("disabled", this.props.disabled);
}
render() {
const { tag: tag , style: style , className: className , id: id } = this.props;
const classicProps = {
style: style,
className: className,
id: id
};
// if no tag, default to a `div` element.
const newTag = !tag || tag === null ? "div" : tag;
return(/*#__PURE__*/ $1ZQrD$react.createElement(newTag, {
// @todo - find a way (perhaps with the callback) to allow AntD components to work
ref: this.ref,
...classicProps
}, this.getChildren()));
}
getChildren() {
const { children: children , dataIdAttr: dataIdAttr , selectedClass: selectedClass = "sortable-selected" , chosenClass: chosenClass = "sortable-chosen" , dragClass: /* eslint-disable */ dragClass = "sortable-drag" , fallbackClass: fallbackClass = "sortable-falback" , ghostClass: ghostClass = "sortable-ghost" , swapClass: swapClass = "sortable-swap-highlight" , filter: /* eslint-enable */ filter = "sortable-filter" , list: list , } = this.props;
// if no children, don't do anything.
if (!children || children == null) return null;
const dataid = dataIdAttr || "data-id";
/* eslint-disable-next-line */ return $1ZQrD$react.Children.map(children, (child, index)=>{
if (child === undefined) return undefined;
const item = list[index] || {
};
const { className: prevClassName } = child.props;
// @todo - handle the function if avalable. I don't think anyone will be doing this soon.
const filtered = typeof filter === "string" && {
[filter.replace(".", "")]: !!item.filtered
};
const className = ($parcel$interopDefault($1ZQrD$classnames))(prevClassName, {
[selectedClass]: item.selected,
[chosenClass]: item.chosen,
...filtered
});
return(/*#__PURE__*/ $1ZQrD$react.cloneElement(child, {
[dataid]: child.key,
className: className
}));
});
}
/** Appends the `sortable` property to this component */ get sortable() {
const el = this.ref.current;
if (el === null) return null;
const key = Object.keys(el).find((k)=>k.includes("Sortable")
);
if (!key) return null;
//@ts-expect-error: fix me.
return el[key];
}
/** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */ makeOptions() {
const DOMHandlers = [
"onAdd",
"onChoose",
"onDeselect",
"onEnd",
"onRemove",
"onSelect",
"onSpill",
"onStart",
"onUnchoose",
"onUpdate",
];
const NonDOMHandlers = [
"onChange",
"onClone",
"onFilter",
"onSort",
];
const newOptions = $38186c783ba0d7b3$export$7553c81e62e31b7e(this.props);
DOMHandlers.forEach((name)=>newOptions[name] = this.prepareOnHandlerPropAndDOM(name)
);
NonDOMHandlers.forEach((name)=>newOptions[name] = this.prepareOnHandlerProp(name)
);
/** onMove has 2 arguments and needs to be handled seperately. */ const onMove1 = (evt, originalEvt)=>{
const { onMove: onMove } = this.props;
const defaultValue = evt.willInsertAfter || -1;
if (!onMove) return defaultValue;
const result = onMove(evt, originalEvt, this.sortable, $c99785ec5604a382$var$store);
if (typeof result === "undefined") return false;
return result;
};
return {
...newOptions,
onMove: onMove1
};
}
/** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop & an `on[Handler]` ReactSortable method. */ prepareOnHandlerPropAndDOM(evtName) {
return (evt)=>{
// call the component prop
this.callOnHandlerProp(evt, evtName);
// calls state change
//@ts-expect-error: until @types multidrag item is in
this[evtName](evt);
};
}
/** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop */ prepareOnHandlerProp(evtName) {
return (evt)=>{
// call the component prop
this.callOnHandlerProp(evt, evtName);
};
}
/** Calls the `props.on[Handler]` function */ callOnHandlerProp(evt, evtName) {
const propEvent = this.props[evtName];
if (propEvent) propEvent(evt, this.sortable, $c99785ec5604a382$var$store);
}
// SORTABLE DOM HANDLING
onAdd(evt) {
const { list: list , setList: setList , clone: clone } = this.props;
/* eslint-disable-next-line */ const otherList = [
...$c99785ec5604a382$var$store.dragging.props.list
];
const customs = $38186c783ba0d7b3$export$4655efe700f887a(evt, otherList);
$38186c783ba0d7b3$export$77f49a256021c8de(customs);
const newList = $38186c783ba0d7b3$export$eca851ee65ae17e4(customs, list, evt, clone).map((item)=>({
...item,
selected: false
})
);
setList(newList, this.sortable, $c99785ec5604a382$var$store);
}
onRemove(evt) {
const { list: list , setList: setList } = this.props;
const mode = $38186c783ba0d7b3$export$1fc0f6205829e19c(evt);
const customs = $38186c783ba0d7b3$export$4655efe700f887a(evt, list);
$38186c783ba0d7b3$export$a6177d5829f70ebc(customs);
let newList = [
...list
];
// remove state if not in clone mode. otherwise, keep.
if (evt.pullMode !== "clone") newList = $38186c783ba0d7b3$export$be2da95e6167b0bd(customs, newList);
else {
// switch used to get the clone
let customClones = customs;
switch(mode){
case "multidrag":
customClones = customs.map((item, index)=>({
...item,
element: evt.clones[index]
})
);
break;
case "normal":
customClones = customs.map((item)=>({
...item,
element: evt.clone
})
);
break;
case "swap":
default:
($parcel$interopDefault($1ZQrD$tinyinvariant))(true, `mode "${mode}" cannot clone. Please remove "props.clone" from <ReactSortable/> when using the "${mode}" plugin`);
}
$38186c783ba0d7b3$export$77f49a256021c8de(customClones);
// replace selected items with cloned items
customs.forEach((curr)=>{
const index = curr.oldIndex;
/* eslint-disable-next-line */ const newItem = this.props.clone(curr.item, evt);
newList.splice(index, 1, newItem);
});
}
// remove item.selected from list
newList = newList.map((item)=>({
...item,
selected: false
})
);
setList(newList, this.sortable, $c99785ec5604a382$var$store);
}
onUpdate(evt) {
const { list: list , setList: setList } = this.props;
const customs = $38186c783ba0d7b3$export$4655efe700f887a(evt, list);
$38186c783ba0d7b3$export$77f49a256021c8de(customs);
$38186c783ba0d7b3$export$a6177d5829f70ebc(customs);
const newList = $38186c783ba0d7b3$export$c25cf8080bd305ec(customs, list);
return setList(newList, this.sortable, $c99785ec5604a382$var$store);
}
onStart() {
$c99785ec5604a382$var$store.dragging = this;
}
onEnd() {
$c99785ec5604a382$var$store.dragging = null;
}
onChoose(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item, index)=>{
if (index === evt.oldIndex) return {
...item,
chosen: true
};
return item;
});
setList(newList, this.sortable, $c99785ec5604a382$var$store);
}
onUnchoose(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item, index)=>{
if (index === evt.oldIndex) return {
...item,
chosen: false
};
return item;
});
setList(newList, this.sortable, $c99785ec5604a382$var$store);
}
onSpill(evt) {
const { removeOnSpill: removeOnSpill , revertOnSpill: revertOnSpill } = this.props;
if (removeOnSpill && !revertOnSpill) $38186c783ba0d7b3$export$1d0aa160432dfea5(evt.item);
}
onSelect(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item)=>({
...item,
selected: false
})
);
evt.newIndicies.forEach((curr)=>{
const index = curr.index;
if (index === -1) {
console.log(`"${evt.type}" had indice of "${curr.index}", which is probably -1 and doesn't usually happen here.`);
console.log(evt);
return;
}
newList[index].selected = true;
});
setList(newList, this.sortable, $c99785ec5604a382$var$store);
}
onDeselect(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item)=>({
...item,
selected: false
})
);
evt.newIndicies.forEach((curr)=>{
const index = curr.index;
if (index === -1) return;
newList[index].selected = true;
});
setList(newList, this.sortable, $c99785ec5604a382$var$store);
}
}
$c99785ec5604a382$export$11bbed9ee0012c13.defaultProps = {
clone: (item)=>item
};
var $926f150b8c018491$exports = {};
$parcel$exportWildcard(module.exports, $926f150b8c018491$exports);
//# sourceMappingURL=index.js.map

157

package.json
{
"name": "react-sortablejs",
"version": "6.0.3",
"author": {

@@ -7,10 +8,13 @@ "name": "Wayne Van Son",

},
"repository": {
"type": "git",
"url": "https://github.com/SortableJS/react-sortablejs.git"
},
"license": "MIT",
"version": "6.0.0",
"private": false,
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {

@@ -20,11 +24,74 @@ "commit": "cz",

"build": "yarn build:parcel",
"build:storybook": "build-storybook",
"build:parcel": "parcel build ./src/index.ts",
"serve": "npm-run-all --parallel serve:*",
"serve:parcel": "parcel watch ./src/index.ts",
"serve:storybook": "start-storybook -p 6006",
"style": "yarn style:format && yarn style:lint",
"style:format": "prettier -w src",
"style:lint": "eslint src/**"
"format": "npm-run-all format:*",
"format:eslint": "yarn lint --fix",
"format:prettier": "prettier --write \"src/**.{js,ts}\"",
"lint": "eslint \"src/**.{js,ts}\"",
"phoenix": "rm -rf ./node_modules && rm -f yarn.lock && yarn install --prefer-online"
},
"peerDependencies": {
"@types/sortablejs": "1",
"react": ">=16.9.0",
"react-dom": ">=16.9.0",
"sortablejs": "1"
},
"dependencies": {
"classnames": "2.3.1",
"tiny-invariant": "1.2.0"
},
"devDependencies": {
"@commitlint/cli": "11",
"@commitlint/config-conventional": "11",
"@parcel/packager-ts": "2.2.0",
"@parcel/transformer-typescript-types": "2.2.0",
"@semantic-release/changelog": "5",
"@semantic-release/git": "9",
"@types/classnames": "^2.2.10",
"@types/jest": "^26.0.14",
"@types/node": "14.11.2",
"@types/react": ">=16.9.0",
"@types/react-dom": ">=16.9.0",
"@types/sortablejs": "1",
"@typescript-eslint/eslint-plugin": "4.33",
"@typescript-eslint/parser": "4.33",
"commitizen": "4",
"cz-conventional-changelog": "3",
"eslint": "7",
"eslint-plugin-react": "7",
"husky": "4.3",
"jest": "26",
"lint-staged": "10",
"npm-run-all": "4",
"parcel": "2",
"prettier": "2.5",
"react": ">=16.9.0",
"react-dom": ">=16.9.0",
"semantic-release": "17",
"sortablejs": "1",
"ts-jest": "26",
"ts-node": "9",
"typescript": "4"
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "yarn lint-staged",
"pre-push": "yarn build"
}
},
"lint-staged": {
"*.{ts}": "yarn format"
},
"release": {

@@ -35,10 +102,3 @@ "plugins": [

"@semantic-release/changelog",
[
"@semantic-release/github",
{
"assets": [
"dist/**"
]
}
],
"@semantic-release/github",
"@semantic-release/npm",

@@ -56,68 +116,3 @@ "@semantic-release/git",

]
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "yarn style && yarn build",
"pre-push": "yarn style && yarn build"
}
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},
"peerDependencies": {
"@types/sortablejs": "^1.10.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"sortablejs": "^1.10.0"
},
"dependencies": {
"classnames": "^2.2.6",
"tiny-invariant": "^1.1.0"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@semantic-release/changelog": "^5.0.1",
"@semantic-release/git": "^9.0.0",
"@storybook/addon-actions": "^6.0.22",
"@storybook/addon-essentials": "^6.0.22",
"@storybook/addon-links": "^6.0.22",
"@storybook/react": "^6.0.22",
"@types/classnames": "^2.2.10",
"@types/jest": "^26.0.14",
"@types/node": "14.11.2",
"@types/react": "16.9.49",
"@types/react-dom": "16.9.8",
"@types/sortablejs": "^1.10.0",
"@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0",
"commitizen": "^4.2.1",
"copy-dir": "^1.3.0",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^7.10.0",
"eslint-plugin-react": "^7.21.2",
"husky": "^4.3.0",
"jest": "^26.4.2",
"npm-run-all": "^4.1.5",
"parcel": "^2.0.0-beta.1",
"prettier": "^2.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-is": "^16.13.1",
"semantic-release": "^17.1.2",
"sortablejs": "^1.10.0",
"storybook": "^6.0.22",
"ts-jest": "^26.4.0",
"ts-node": "^9.0.0",
"typescript": "^4.0.3"
}
}

6

README.md

@@ -7,2 +7,4 @@ # `react-sortablejs`

Please note that this is not considered ready for production, as there are still a number of bugs being sent through.
## Features

@@ -12,3 +14,3 @@

`sortablejs` and `@types/sortbalejs` are peer dependencies. The latter only used if intellisense/typescript is desired.
`sortablejs` and `@types/sortablejs` are peer dependencies. The latter only used if intellisense/typescript is desired.

@@ -103,3 +105,3 @@ ```shell

You must mount mount the plugin with sortable **ONCE ONLY**.
You must mount the plugin with sortable **ONCE ONLY**.

@@ -106,0 +108,0 @@ ```tsx

CHANGELOG.md
dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc