define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/MarqueeSelection", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/utilities/exampleData", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/Toggle", "./DetailsList.DragDrop.Example.scss"], function (require, exports, tslib_1, React, Link_1, DetailsList_1, MarqueeSelection_1, DetailsList_2, exampleData_1, TextField_1, Toggle_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var _draggedItem = null;
    var _draggedIndex = -1;
    var _items;
    var _columns;
    var DetailsListDragDropExample = /** @class */ (function (_super) {
        tslib_1.__extends(DetailsListDragDropExample, _super);
        function DetailsListDragDropExample(props) {
            var _this = _super.call(this, props) || this;
            _this._handleColumnReorder = function (draggedIndex, targetIndex) {
                var draggedItems = _this.state.columns[draggedIndex];
                var newColumns = _this.state.columns.slice();
                // insert before the dropped item
                newColumns.splice(draggedIndex, 1);
                newColumns.splice(targetIndex, 0, draggedItems);
                _this.setState({ columns: newColumns });
            };
            _this._onChangeStartCountText = function (event, text) {
                _this.setState({ frozenColumnCountFromStart: text });
            };
            _this._onChangeEndCountText = function (event, text) {
                _this.setState({ frozenColumnCountFromEnd: text });
            };
            _this._onChangeColumnReorderEnabled = function (ev, checked) {
                _this.setState({ isColumnReorderEnabled: checked });
            };
            _this._onRenderItemColumn = _this._onRenderItemColumn.bind(_this);
            _this._handleColumnReorder = _this._handleColumnReorder.bind(_this);
            _this._getColumnReorderOptions = _this._getColumnReorderOptions.bind(_this);
            _this._onChangeColumnReorderEnabled = _this._onChangeColumnReorderEnabled.bind(_this);
            _this._onChangeStartCountText = _this._onChangeStartCountText.bind(_this);
            _this._onChangeEndCountText = _this._onChangeEndCountText.bind(_this);
            _this._selection = new DetailsList_1.Selection();
            _items = _items || exampleData_1.createListItems(10, 0);
            _columns = DetailsList_2.buildColumns(_items, true);
            _this.state = {
                items: exampleData_1.createListItems(10),
                columns: _columns,
                isColumnReorderEnabled: false,
                frozenColumnCountFromStart: '1',
                frozenColumnCountFromEnd: '0'
            };
            return _this;
        }
        DetailsListDragDropExample.prototype.render = function () {
            var _a = this.state, items = _a.items, selectionDetails = _a.selectionDetails, columns = _a.columns, isColumnReorderEnabled = _a.isColumnReorderEnabled, frozenColumnCountFromStart = _a.frozenColumnCountFromStart, frozenColumnCountFromEnd = _a.frozenColumnCountFromEnd;
            return (React.createElement("div", { className: 'detailsListDragDropExample' },
                React.createElement(Toggle_1.Toggle, { label: 'Enable Column Reorder', checked: isColumnReorderEnabled, onChange: this._onChangeColumnReorderEnabled, onText: 'Enabled', offText: 'Disabled' }),
                React.createElement(TextField_1.TextField, { label: 'Number of Left frozen columns:', onGetErrorMessage: this._validateNumber, value: frozenColumnCountFromStart, onChange: this._onChangeStartCountText }),
                React.createElement(TextField_1.TextField, { label: 'Number of Right frozen columns:', onGetErrorMessage: this._validateNumber, value: frozenColumnCountFromEnd, onChange: this._onChangeEndCountText }),
                React.createElement("div", null, selectionDetails),
                React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
                    React.createElement(DetailsList_1.DetailsList, { setKey: 'items', items: items, columns: columns, selection: this._selection, selectionPreservedOnEmptyClick: true, onItemInvoked: this._onItemInvoked, onRenderItemColumn: this._onRenderItemColumn, dragDropEvents: this._getDragDropEvents(), columnReorderOptions: this.state.isColumnReorderEnabled ? this._getColumnReorderOptions() : undefined, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items" }))));
        };
        DetailsListDragDropExample.prototype._getColumnReorderOptions = function () {
            return {
                frozenColumnCountFromStart: parseInt(this.state.frozenColumnCountFromStart, 10),
                frozenColumnCountFromEnd: parseInt(this.state.frozenColumnCountFromEnd, 10),
                handleColumnReorder: this._handleColumnReorder
            };
        };
        DetailsListDragDropExample.prototype._validateNumber = function (value) {
            return isNaN(Number(value)) ? "The value should be a number, actual is " + value + "." : '';
        };
        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