@guardian/threads
Version:
71 lines • 3.5 kB
JavaScript
import { __extends, __spreadArrays } from "tslib";
import React, { Component } from 'react';
import styles from './SortableList.module.css';
var getPath = function (draggableIndex, dragTargetIndex) {
var path = [];
var isGoingDown = false;
if (draggableIndex !== dragTargetIndex && dragTargetIndex >= 0) {
isGoingDown = draggableIndex < dragTargetIndex;
var diff = isGoingDown
? dragTargetIndex - draggableIndex
: draggableIndex - dragTargetIndex;
for (var i = 0; i < diff; i++) {
path.push(isGoingDown ? dragTargetIndex - i : dragTargetIndex + i);
}
}
return { isGoingDown: isGoingDown, path: path };
};
var SortableList = /** @class */ (function (_super) {
__extends(SortableList, _super);
function SortableList() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
blocks: [],
draggedIndexAt: -1,
dragTargetIndexAt: -1,
};
_this.draggableHeight = 20;
return _this;
}
SortableList.prototype.onDragOver = function (dragTargetIndexAt) {
this.setState({ dragTargetIndexAt: dragTargetIndexAt });
};
SortableList.prototype.onDragStart = function (draggedIndexAt) {
this.setState({ draggedIndexAt: draggedIndexAt });
};
SortableList.prototype.onDragEnd = function (draggedIndexAt, dragTargetIndexAt) {
this.setState({
dragTargetIndexAt: -1,
draggedIndexAt: -1,
});
var spliced = __spreadArrays(this.props.children);
spliced.splice.apply(spliced, __spreadArrays([dragTargetIndexAt, 0], spliced.splice(draggedIndexAt, 1)));
this.props.onUpdate(draggedIndexAt, dragTargetIndexAt, spliced);
};
SortableList.prototype.render = function () {
var _this = this;
var _a = this.state, draggedIndexAt = _a.draggedIndexAt, dragTargetIndexAt = _a.dragTargetIndexAt;
var _b = this.props, children = _b.children, className = _b.className, hasOwnDragRegion = _b.hasOwnDragRegion;
var _c = getPath(draggedIndexAt, dragTargetIndexAt), isGoingDown = _c.isGoingDown, path = _c.path;
var displacement = isGoingDown
? "translateY(-" + this.draggableHeight + "px)"
: "translateY(" + this.draggableHeight + "px)";
return children.map(function (item, index) {
return (React.createElement("div", { key: item.key ? item.key : undefined, draggable: !hasOwnDragRegion, className: [styles.root, className].filter(function (_) { return _ !== null; }).join(' '), "data-is-dragged": draggedIndexAt === index, ref: function (divElement) {
if (divElement && draggedIndexAt === index)
_this.draggableHeight = divElement.offsetHeight;
}, "data-displace": path.includes(index) ? displacement : 'none', "data-animation": draggedIndexAt >= 0, style: {
transform: path.includes(index) ? displacement : undefined,
}, onDragEnd: function () {
_this.onDragEnd(draggedIndexAt, dragTargetIndexAt);
}, onDragStart: function () {
_this.onDragStart(index);
}, onDragOver: function () {
_this.onDragOver(index);
} }, item));
});
};
return SortableList;
}(Component));
export { SortableList };
//# sourceMappingURL=SortableList.js.map