define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/Image", "office-ui-fabric-react/lib/DetailsList"], function (require, exports, tslib_1, React, example_app_base_1, Link_1, Image_1, DetailsList_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var _items;
    var DetailsListCustomColumnsExample = /** @class */ (function (_super) {
        tslib_1.__extends(DetailsListCustomColumnsExample, _super);
        function DetailsListCustomColumnsExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onColumnClick = function (event, column) {
                var columns = _this.state.columns;
                var sortedItems = _this.state.sortedItems;
                var isSortedDescending = column.isSortedDescending;
                // If we've sorted this column, flip it.
                if (column.isSorted) {
                    isSortedDescending = !isSortedDescending;
                }
                // Sort the items.
                sortedItems = sortedItems.concat([]).sort(function (a, b) {
                    var firstValue = a[column.fieldName || ''];
                    var secondValue = b[column.fieldName || ''];
                    if (isSortedDescending) {
                        return firstValue > secondValue ? -1 : 1;
                    }
                    else {
                        return firstValue > secondValue ? 1 : -1;
                    }
                });
                // Reset the items and columns to match the state.
                _this.setState({
                    sortedItems: sortedItems,
                    columns: columns.map(function (col) {
                        col.isSorted = (col.key === column.key);
                        if (col.isSorted) {
                            col.isSortedDescending = isSortedDescending;
                        }
                        return col;
                    })
                });
            };
            _items = _items || example_app_base_1.createListItems(500);
            _this.state = {
                sortedItems: _items,
                columns: _buildColumns()
            };
            return _this;
        }
        DetailsListCustomColumnsExample.prototype.render = function () {
            var _a = this.state, sortedItems = _a.sortedItems, columns = _a.columns;
            return (React.createElement(DetailsList_1.DetailsList, { items: sortedItems, setKey: 'set', columns: columns, onRenderItemColumn: _renderItemColumn, onColumnHeaderClick: this._onColumnClick, onItemInvoked: this._onItemInvoked, onColumnHeaderContextMenu: this._onColumnHeaderContextMenu }));
        };
        DetailsListCustomColumnsExample.prototype._onColumnHeaderContextMenu = function (column, ev) {
            console.log("column " + column.key + " contextmenu opened.");
        };
        DetailsListCustomColumnsExample.prototype._onItemInvoked = function (item, index) {
            alert("Item " + item.name + " at index " + index + " has been invoked.");
        };
        return DetailsListCustomColumnsExample;
    }(React.Component));
    exports.DetailsListCustomColumnsExample = DetailsListCustomColumnsExample;
    function _buildColumns() {
        var columns = DetailsList_1.buildColumns(_items);
        var thumbnailColumn = columns.filter(function (column) { return column.name === 'thumbnail'; })[0];
        // Special case one column's definition.
        thumbnailColumn.name = '';
        thumbnailColumn.maxWidth = 50;
        return columns;
    }
    function _renderItemColumn(item, index, column) {
        var fieldContent = item[column.fieldName || ''];
        switch (column.key) {
            case 'thumbnail':
                return React.createElement(Image_1.Image, { src: fieldContent, width: 50, height: 50, imageFit: Image_1.ImageFit.cover });
            case 'name':
                return React.createElement(Link_1.Link, { href: '#' }, fieldContent);
            case 'color':
                return React.createElement("span", { "data-selection-disabled": true, style: { color: fieldContent, height: '100%', display: 'block' } }, fieldContent);
            default:
                return React.createElement("span", null, fieldContent);
        }
    }
});
//# sourceMappingURL=DetailsList.CustomColumns.Example.js.map