"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var index_1 = require("office-ui-fabric-react/lib/components/GroupedList/index");
var DetailsRow_1 = require("office-ui-fabric-react/lib/components/DetailsList/DetailsRow");
var FocusZone_1 = require("office-ui-fabric-react/lib/FocusZone");
var index_2 = require("office-ui-fabric-react/lib/utilities/selection/index");
var exampleData_1 = require("../../../utilities/exampleData");
var groupCount = 3;
var groupDepth = 3;
var _items;
var _groups;
var GroupedListBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(GroupedListBasicExample, _super);
    function GroupedListBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _items = _items || exampleData_1.createListItems(Math.pow(groupCount, groupDepth + 1));
        _groups = _groups || exampleData_1.createGroups(groupCount, groupDepth, 0, groupCount);
        _this._onRenderCell = _this._onRenderCell.bind(_this);
        _this._selection = new index_2.Selection();
        _this._selection.setItems(_items);
        return _this;
    }
    GroupedListBasicExample.prototype.render = function () {
        return (React.createElement(FocusZone_1.FocusZone, null,
            React.createElement(index_2.SelectionZone, { selection: this._selection, selectionMode: index_2.SelectionMode.multiple },
                React.createElement(index_1.GroupedList, { items: _items, onRenderCell: this._onRenderCell, selection: this._selection, selectionMode: index_2.SelectionMode.multiple, groups: _groups }))));
    };
    GroupedListBasicExample.prototype._onRenderCell = function (nestingDepth, item, itemIndex) {
        var selection = this._selection;
        return (React.createElement(DetailsRow_1.DetailsRow, { columns: Object.keys(item)
                .slice(0, 3)
                .map(function (value) {
                return {
                    key: value,
                    name: value,
                    fieldName: value,
                    minWidth: 300
                };
            }), groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: selection, selectionMode: index_2.SelectionMode.multiple }));
    };
    return GroupedListBasicExample;
}(React.Component));
exports.GroupedListBasicExample = GroupedListBasicExample;
//# sourceMappingURL=GroupedList.Basic.Example.js.map