react-sortablejs
Version:
React bindings to [SortableJS](https://github.com/SortableJS/Sortable)
426 lines (408 loc) • 18 kB
JavaScript
var $8zHUo$sortablejs = require("sortablejs");
var $8zHUo$classnames = require("classnames");
var $8zHUo$react = require("react");
var $8zHUo$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", () => $882b6d93070905b3$re_export$Sortable);
$parcel$export(module.exports, "Direction", () => $882b6d93070905b3$re_export$Direction);
$parcel$export(module.exports, "DOMRect", () => $882b6d93070905b3$re_export$DOMRect);
$parcel$export(module.exports, "GroupOptions", () => $882b6d93070905b3$re_export$GroupOptions);
$parcel$export(module.exports, "MoveEvent", () => $882b6d93070905b3$re_export$MoveEvent);
$parcel$export(module.exports, "Options", () => $882b6d93070905b3$re_export$Options);
$parcel$export(module.exports, "PullResult", () => $882b6d93070905b3$re_export$PullResult);
$parcel$export(module.exports, "PutResult", () => $882b6d93070905b3$re_export$PutResult);
$parcel$export(module.exports, "SortableEvent", () => $882b6d93070905b3$re_export$SortableEvent);
$parcel$export(module.exports, "SortableOptions", () => $882b6d93070905b3$re_export$SortableOptions);
$parcel$export(module.exports, "Utils", () => $882b6d93070905b3$re_export$Utils);
$parcel$export(module.exports, "ReactSortable", () => $7fe8e3ea572bda7a$export$11bbed9ee0012c13);
function $eb03e74f8f7db1f3$export$1d0aa160432dfea5(node) {
if (node.parentElement !== null) node.parentElement.removeChild(node);
}
function $eb03e74f8f7db1f3$export$6d240faa51aa562f(parent, newChild, index) {
const refChild = parent.children[index] || null;
parent.insertBefore(newChild, refChild);
}
function $eb03e74f8f7db1f3$export$d7d742816c28cf91(customs) {
$eb03e74f8f7db1f3$export$77f49a256021c8de(customs);
$eb03e74f8f7db1f3$export$a6177d5829f70ebc(customs);
}
function $eb03e74f8f7db1f3$export$77f49a256021c8de(customs) {
customs.forEach((curr)=>$eb03e74f8f7db1f3$export$1d0aa160432dfea5(curr.element));
}
function $eb03e74f8f7db1f3$export$a6177d5829f70ebc(customs) {
customs.forEach((curr)=>{
$eb03e74f8f7db1f3$export$6d240faa51aa562f(curr.parentElement, curr.element, curr.oldIndex);
});
}
function $eb03e74f8f7db1f3$export$4655efe700f887a(evt, list) {
const mode = $eb03e74f8f7db1f3$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 = $eb03e74f8f7db1f3$export$bc06a3af7dc65f53(custom, list);
return customs;
}
function $eb03e74f8f7db1f3$export$c25cf8080bd305ec(normalized, list) {
const a = $eb03e74f8f7db1f3$export$be2da95e6167b0bd(normalized, list);
const b = $eb03e74f8f7db1f3$export$eca851ee65ae17e4(normalized, a);
return b;
}
function $eb03e74f8f7db1f3$export$be2da95e6167b0bd(normalized, list) {
const newList = [
...list
];
normalized.concat().reverse().forEach((curr)=>newList.splice(curr.oldIndex, 1));
return newList;
}
function $eb03e74f8f7db1f3$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 $eb03e74f8f7db1f3$export$1fc0f6205829e19c(evt) {
if (evt.oldIndicies && evt.oldIndicies.length > 0) return "multidrag";
if (evt.swapItem) return "swap";
return "normal";
}
function $eb03e74f8f7db1f3$export$bc06a3af7dc65f53(inputs, list) {
const normalized = inputs.map((curr)=>({
...curr,
item: list[curr.oldIndex]
})).sort((a, b)=>a.oldIndex - b.oldIndex);
return normalized;
}
function $eb03e74f8f7db1f3$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 $7fe8e3ea572bda7a$var$store = {
dragging: null
};
class $7fe8e3ea572bda7a$export$11bbed9ee0012c13 extends (0, $8zHUo$react.Component) {
/* eslint-disable-next-line */ static defaultProps = {
clone: (item)=>item
};
constructor(props){
super(props);
// @todo forward ref this component
this.ref = /*#__PURE__*/ (0, $8zHUo$react.createRef)();
// make all state false because we can't change sortable unless a mouse gesture is made.
const newList = [
...props.list
].map((item)=>Object.assign(item, {
chosen: false,
selected: false
}));
props.setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
(0, ($parcel$interopDefault($8zHUo$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();
(0, ($parcel$interopDefault($8zHUo$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__*/ (0, $8zHUo$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 (0, $8zHUo$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 = (0, ($parcel$interopDefault($8zHUo$classnames)))(prevClassName, {
[selectedClass]: item.selected,
[chosenClass]: item.chosen,
...filtered
});
return /*#__PURE__*/ (0, $8zHUo$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 = (0, $eb03e74f8f7db1f3$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, $7fe8e3ea572bda7a$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, $7fe8e3ea572bda7a$var$store);
}
// SORTABLE DOM HANDLING
onAdd(evt) {
const { list: list , setList: setList , clone: clone } = this.props;
/* eslint-disable-next-line */ const otherList = [
...$7fe8e3ea572bda7a$var$store.dragging.props.list
];
const customs = (0, $eb03e74f8f7db1f3$export$4655efe700f887a)(evt, otherList);
(0, $eb03e74f8f7db1f3$export$77f49a256021c8de)(customs);
const newList = (0, $eb03e74f8f7db1f3$export$eca851ee65ae17e4)(customs, list, evt, clone).map((item)=>Object.assign(item, {
selected: false
}));
setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
}
onRemove(evt) {
const { list: list , setList: setList } = this.props;
const mode = (0, $eb03e74f8f7db1f3$export$1fc0f6205829e19c)(evt);
const customs = (0, $eb03e74f8f7db1f3$export$4655efe700f887a)(evt, list);
(0, $eb03e74f8f7db1f3$export$a6177d5829f70ebc)(customs);
let newList = [
...list
];
// remove state if not in clone mode. otherwise, keep.
if (evt.pullMode !== "clone") newList = (0, $eb03e74f8f7db1f3$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:
(0, ($parcel$interopDefault($8zHUo$tinyinvariant)))(true, `mode "${mode}" cannot clone. Please remove "props.clone" from <ReactSortable/> when using the "${mode}" plugin`);
}
(0, $eb03e74f8f7db1f3$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)=>Object.assign(item, {
selected: false
}));
setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
}
onUpdate(evt) {
const { list: list , setList: setList } = this.props;
const customs = (0, $eb03e74f8f7db1f3$export$4655efe700f887a)(evt, list);
(0, $eb03e74f8f7db1f3$export$77f49a256021c8de)(customs);
(0, $eb03e74f8f7db1f3$export$a6177d5829f70ebc)(customs);
const newList = (0, $eb03e74f8f7db1f3$export$c25cf8080bd305ec)(customs, list);
return setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
}
onStart() {
$7fe8e3ea572bda7a$var$store.dragging = this;
}
onEnd() {
$7fe8e3ea572bda7a$var$store.dragging = null;
}
onChoose(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item, index)=>{
let newItem = item;
if (index === evt.oldIndex) newItem = Object.assign(item, {
chosen: true
});
return newItem;
});
setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
}
onUnchoose(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item, index)=>{
let newItem = item;
if (index === evt.oldIndex) newItem = Object.assign(newItem, {
chosen: false
});
return newItem;
});
setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
}
onSpill(evt) {
const { removeOnSpill: removeOnSpill , revertOnSpill: revertOnSpill } = this.props;
if (removeOnSpill && !revertOnSpill) (0, $eb03e74f8f7db1f3$export$1d0aa160432dfea5)(evt.item);
}
onSelect(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item)=>Object.assign(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, $7fe8e3ea572bda7a$var$store);
}
onDeselect(evt) {
const { list: list , setList: setList } = this.props;
const newList = list.map((item)=>Object.assign(item, {
selected: false
}));
evt.newIndicies.forEach((curr)=>{
const index = curr.index;
if (index === -1) return;
newList[index].selected = true;
});
setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
}
}
var $faefaad95e5fcca0$exports = {};
$parcel$exportWildcard(module.exports, $faefaad95e5fcca0$exports);
//# sourceMappingURL=index.js.map