define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/Toggle", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/MarqueeSelection", "@uifabric/example-app-base", "./DetailsListExample.scss"], function (require, exports, tslib_1, React, TextField_1, Toggle_1, DetailsList_1, Utilities_1, MarqueeSelection_1, example_app_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var _items = [];
    var fileIcons = [
        { 'name': 'accdb' },
        { 'name': 'csv' },
        { 'name': 'docx' },
        { 'name': 'dotx' },
        { 'name': 'mpp' },
        { 'name': 'mpt' },
        { 'name': 'odp' },
        { 'name': 'ods' },
        { 'name': 'odt' },
        { 'name': 'one' },
        { 'name': 'onepkg' },
        { 'name': 'onetoc' },
        { 'name': 'potx' },
        { 'name': 'ppsx' },
        { 'name': 'pptx' },
        { 'name': 'pub' },
        { 'name': 'vsdx' },
        { 'name': 'vssx' },
        { 'name': 'vstx' },
        { 'name': 'xls' },
        { 'name': 'xlsx' },
        { 'name': 'xltx' },
        { 'name': 'xsn' }
    ];
    var DetailsListDocumentsExample = /** @class */ (function (_super) {
        tslib_1.__extends(DetailsListDocumentsExample, _super);
        function DetailsListDocumentsExample(props) {
            var _this = _super.call(this, props) || this;
            //  Populate with items for demos.
            if (_items.length === 0) {
                for (var i = 0; i < 500; i++) {
                    var randomDate = _this._randomDate(new Date(2012, 0, 1), new Date());
                    var randomFileSize = _this._randomFileSize();
                    var randomFileType = _this._randomFileIcon();
                    var fileName = example_app_base_1.lorem(2).replace(/\W/g, '');
                    var userName = example_app_base_1.lorem(2).replace(/[^a-zA-Z ]/g, '');
                    fileName = fileName.charAt(0).toUpperCase() + fileName.slice(1).concat("." + randomFileType.docType);
                    userName = userName.split(' ').map(function (name) { return name.charAt(0).toUpperCase() + name.slice(1); }).join(' ');
                    _items.push({
                        name: fileName,
                        value: fileName,
                        iconName: randomFileType.url,
                        modifiedBy: userName,
                        dateModified: randomDate.dateFormatted,
                        dateModifiedValue: randomDate.value,
                        fileSize: randomFileSize.value,
                        fileSizeRaw: randomFileSize.rawSize
                    });
                }
                _items = _this._sortItems(_items, 'name');
            }
            var _columns = [
                {
                    key: 'column1',
                    name: 'File Type',
                    headerClassName: 'DetailsListExample-header--FileIcon',
                    className: 'DetailsListExample-cell--FileIcon',
                    iconClassName: 'DetailsListExample-Header-FileTypeIcon',
                    iconName: 'Page',
                    isIconOnly: true,
                    fieldName: 'name',
                    minWidth: 16,
                    maxWidth: 16,
                    onRender: function (item) {
                        return (React.createElement("img", { src: item.iconName, className: 'DetailsListExample-documentIconImage' }));
                    }
                },
                {
                    key: 'column2',
                    name: 'Name',
                    fieldName: 'name',
                    minWidth: 210,
                    maxWidth: 350,
                    isRowHeader: true,
                    isResizable: true,
                    isSorted: true,
                    isSortedDescending: false,
                    onColumnClick: _this._onColumnClick,
                    data: 'string',
                    isPadded: true
                },
                {
                    key: 'column3',
                    name: 'Date Modified',
                    fieldName: 'dateModifiedValue',
                    minWidth: 70,
                    maxWidth: 90,
                    isResizable: true,
                    onColumnClick: _this._onColumnClick,
                    data: 'number',
                    onRender: function (item) {
                        return (React.createElement("span", null, item.dateModified));
                    },
                    isPadded: true
                },
                {
                    key: 'column4',
                    name: 'Modified By',
                    fieldName: 'modifiedBy',
                    minWidth: 70,
                    maxWidth: 90,
                    isResizable: true,
                    isCollapsable: true,
                    data: 'string',
                    onColumnClick: _this._onColumnClick,
                    onRender: function (item) {
                        return (React.createElement("span", null, item.modifiedBy));
                    },
                    isPadded: true
                },
                {
                    key: 'column5',
                    name: 'File Size',
                    fieldName: 'fileSizeRaw',
                    minWidth: 70,
                    maxWidth: 90,
                    isResizable: true,
                    isCollapsable: true,
                    data: 'number',
                    onColumnClick: _this._onColumnClick,
                    onRender: function (item) {
                        return (React.createElement("span", null, item.fileSize));
                    }
                },
            ];
            _this._selection = new DetailsList_1.Selection({
                onSelectionChanged: function () {
                    _this.setState({
                        selectionDetails: _this._getSelectionDetails(),
                        isModalSelection: _this._selection.isModal()
                    });
                }
            });
            _this.state = {
                items: _items,
                columns: _columns,
                selectionDetails: _this._getSelectionDetails(),
                isModalSelection: _this._selection.isModal(),
                isCompactMode: false
            };
            return _this;
        }
        DetailsListDocumentsExample.prototype.render = function () {
            var _a = this.state, columns = _a.columns, isCompactMode = _a.isCompactMode, items = _a.items, selectionDetails = _a.selectionDetails;
            return (React.createElement("div", null,
                React.createElement(Toggle_1.Toggle, { label: 'Enable Compact Mode', checked: isCompactMode, onChanged: this._onChangeCompactMode, onText: 'Compact', offText: 'Normal' }),
                React.createElement(Toggle_1.Toggle, { label: 'Enable Modal Selection', checked: this.state.isModalSelection, onChanged: this._onChangeModalSelection, onText: 'Modal', offText: 'Normal' }),
                React.createElement("div", null, selectionDetails),
                React.createElement(TextField_1.TextField, { label: 'Filter by name:', onChanged: this._onChangeText }),
                React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
                    React.createElement(DetailsList_1.DetailsList, { items: items, compact: isCompactMode, columns: columns, selectionMode: this.state.isModalSelection ? DetailsList_1.SelectionMode.multiple : DetailsList_1.SelectionMode.none, setKey: 'set', layoutMode: DetailsList_1.DetailsListLayoutMode.justified, isHeaderVisible: true, selection: this._selection, selectionPreservedOnEmptyClick: true, onItemInvoked: this._onItemInvoked, enterModalSelectionOnTouch: true }))));
        };
        DetailsListDocumentsExample.prototype.componentDidUpdate = function (previousProps, previousState) {
            if (previousState.isModalSelection !== this.state.isModalSelection) {
                this._selection.setModal(this.state.isModalSelection);
            }
        };
        DetailsListDocumentsExample.prototype._onChangeCompactMode = function (checked) {
            this.setState({ isCompactMode: checked });
        };
        DetailsListDocumentsExample.prototype._onChangeModalSelection = function (checked) {
            this.setState({ isModalSelection: checked });
        };
        DetailsListDocumentsExample.prototype._onChangeText = function (text) {
            this.setState({ items: text ? _items.filter(function (i) { return i.name.toLowerCase().indexOf(text) > -1; }) : _items });
        };
        DetailsListDocumentsExample.prototype._onItemInvoked = function (item) {
            alert("Item invoked: " + item.name);
        };
        DetailsListDocumentsExample.prototype._randomDate = function (start, end) {
            var date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
            var dateData = {
                value: date.valueOf(),
                dateFormatted: date.toLocaleDateString()
            };
            return dateData;
        };
        DetailsListDocumentsExample.prototype._randomFileIcon = function () {
            var docType = fileIcons[Math.floor(Math.random() * fileIcons.length) + 0].name;
            return {
                docType: docType,
                url: "https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/" + docType + "_16x1.svg"
            };
        };
        DetailsListDocumentsExample.prototype._randomFileSize = function () {
            var fileSize = Math.floor(Math.random() * 100) + 30;
            return {
                value: fileSize + " KB",
                rawSize: fileSize
            };
        };
        DetailsListDocumentsExample.prototype._getSelectionDetails = function () {
            var selectionCount = this._selection.getSelectedCount();
            switch (selectionCount) {
                case 0:
                    return 'No items selected';
                case 1:
                    return '1 item selected: ' + this._selection.getSelection()[0].name;
                default:
                    return selectionCount + " items selected";
            }
        };
        DetailsListDocumentsExample.prototype._onColumnClick = function (ev, column) {
            var _a = this.state, columns = _a.columns, items = _a.items;
            var newItems = items.slice();
            var newColumns = columns.slice();
            var currColumn = newColumns.filter(function (currCol, idx) {
                return column.key === currCol.key;
            })[0];
            newColumns.forEach(function (newCol) {
                if (newCol === currColumn) {
                    currColumn.isSortedDescending = !currColumn.isSortedDescending;
                    currColumn.isSorted = true;
                }
                else {
                    newCol.isSorted = false;
                    newCol.isSortedDescending = true;
                }
            });
            newItems = this._sortItems(newItems, currColumn.fieldName, currColumn.isSortedDescending);
            this.setState({
                columns: newColumns,
                items: newItems
            });
        };
        DetailsListDocumentsExample.prototype._sortItems = function (items, sortBy, descending) {
            if (descending === void 0) { descending = false; }
            if (descending) {
                return items.sort(function (a, b) {
                    if (a[sortBy] < b[sortBy]) {
                        return 1;
                    }
                    if (a[sortBy] > b[sortBy]) {
                        return -1;
                    }
                    return 0;
                });
            }
            else {
                return items.sort(function (a, b) {
                    if (a[sortBy] < b[sortBy]) {
                        return -1;
                    }
                    if (a[sortBy] > b[sortBy]) {
                        return 1;
                    }
                    return 0;
                });
            }
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], DetailsListDocumentsExample.prototype, "_onChangeCompactMode", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], DetailsListDocumentsExample.prototype, "_onChangeModalSelection", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], DetailsListDocumentsExample.prototype, "_onChangeText", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], DetailsListDocumentsExample.prototype, "_onColumnClick", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], DetailsListDocumentsExample.prototype, "_sortItems", null);
        return DetailsListDocumentsExample;
    }(React.Component));
    exports.DetailsListDocumentsExample = DetailsListDocumentsExample;
});
//# sourceMappingURL=DetailsList.Documents.Example.js.map