office-ui-fabric-react/lib-es2015/components/DetailsList/examples/DetailsList.DragDrop.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DetailsList, Selection } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { createListItems } from '@uifabric/example-app-base';
import './DetailsList.DragDrop.Example.scss';
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 Selection();
        _this.state = {
            items: 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, { selection: this._selection },
                React.createElement(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, { "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));
export { DetailsListDragDropExample };
//# sourceMappingURL=DetailsList.DragDrop.Example.js.map