office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
70 lines • 4.08 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/MarqueeSelection", "@uifabric/example-app-base", "./DetailsList.DragDrop.Example.scss"], function (require, exports, tslib_1, React, Link_1, DetailsList_1, MarqueeSelection_1, example_app_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _draggedItem = null;
var _draggedIndex = -1;
var DetailsListDragDropExample = /** @class */ (function (_super) {
tslib_1.__extends(DetailsListDragDropExample, _super);
function DetailsListDragDropExample(props) {
var _this = _super.call(this, props) || this;
_this._onRenderItemColumn = _this._onRenderItemColumn.bind(_this);
_this._selection = new DetailsList_1.Selection();
_this.state = {
items: example_app_base_1.createListItems(10)
};
return _this;
}
DetailsListDragDropExample.prototype.render = function () {
var _a = this.state, items = _a.items, selectionDetails = _a.selectionDetails;
return (React.createElement("div", { className: 'detailsListDragDropExample' },
React.createElement("div", null, selectionDetails),
React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
React.createElement(DetailsList_1.DetailsList, { setKey: 'items', items: items, selection: this._selection, selectionPreservedOnEmptyClick: true, onItemInvoked: this._onItemInvoked, onRenderItemColumn: this._onRenderItemColumn, dragDropEvents: this._getDragDropEvents() }))));
};
DetailsListDragDropExample.prototype._getDragDropEvents = function () {
var _this = this;
return {
canDrop: function (dropContext, dragContext) { return true; },
canDrag: function (item) { return true; },
onDragEnter: function (item, event) { return 'dragEnter'; },
onDragLeave: function (item, event) { return; },
onDrop: function (item, event) {
if (_draggedItem) {
_this._insertBeforeItem(item);
}
},
onDragStart: function (item, itemIndex, selectedItems, event) {
_draggedItem = item;
_draggedIndex = itemIndex;
},
onDragEnd: function (item, event) {
_draggedItem = null;
_draggedIndex = -1;
},
};
};
DetailsListDragDropExample.prototype._onItemInvoked = function (item) {
alert("Item invoked: " + item.name);
};
DetailsListDragDropExample.prototype._onRenderItemColumn = function (item, index, column) {
if (column.key === 'name') {
return React.createElement(Link_1.Link, { "data-selection-invoke": true }, item[column.key]);
}
return item[column.key];
};
DetailsListDragDropExample.prototype._insertBeforeItem = function (item) {
var draggedItems = this._selection.isIndexSelected(_draggedIndex) ? this._selection.getSelection() : [_draggedItem];
var items = this.state.items.filter(function (i) { return draggedItems.indexOf(i) === -1; });
var insertIndex = items.indexOf(item);
// if dragging/dropping on itself, index will be 0.
if (insertIndex === -1) {
insertIndex = 0;
}
items.splice.apply(items, [insertIndex, 0].concat(draggedItems));
this.setState({ items: items });
};
return DetailsListDragDropExample;
}(React.Component));
exports.DetailsListDragDropExample = DetailsListDragDropExample;
});
//# sourceMappingURL=DetailsList.DragDrop.Example.js.map