import * as tslib_1 from "tslib";
import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
import { createListItems, createGroups } from '@uifabric/example-app-base';
import './DetailsListExample.scss';
var ITEMS_PER_GROUP = 20;
var GROUP_COUNT = 20;
var _items;
var _groups;
var DetailsListCustomGroupHeadersExample = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListCustomGroupHeadersExample, _super);
    function DetailsListCustomGroupHeadersExample(props) {
        var _this = _super.call(this, props) || this;
        _items = _items || createListItems(500);
        _groups = _groups || createGroups(GROUP_COUNT, 1, 0, ITEMS_PER_GROUP);
        return _this;
    }
    DetailsListCustomGroupHeadersExample.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement(DetailsList, { items: _items, groups: _groups, groupProps: {
                    onRenderHeader: function (props) { return (React.createElement("div", { className: "DetailsListExample-customHeader" },
                        React.createElement("div", { className: "DetailsListExample-customHeaderTitle" }, "I am a custom header for: " + props.group.name),
                        React.createElement("div", { className: "DetailsListExample-customHeaderLinkSet" },
                            React.createElement(Link, { className: "DetailsListExample-customHeaderLink", onClick: _this._onToggleSelectGroup(props) }, props.isSelected ? 'Remove selection' : 'Select group'),
                            React.createElement(Link, { className: "DetailsListExample-customHeaderLink", onClick: _this._onToggleCollapse(props) }, props.group.isCollapsed ? 'Expand group' : 'Collapse group')))); },
                    onRenderFooter: function (props) { return (React.createElement("div", { className: "DetailsListExample-customHeader" },
                        React.createElement("div", { className: "DetailsListExample-customHeaderTitle" }, "I'm a custom footer for: " + props.group.name))); }
                } })));
    };
    DetailsListCustomGroupHeadersExample.prototype._onToggleSelectGroup = function (props) {
        return function () {
            props.onToggleSelectGroup(props.group);
        };
    };
    DetailsListCustomGroupHeadersExample.prototype._onToggleCollapse = function (props) {
        return function () {
            props.onToggleCollapse(props.group);
        };
    };
    return DetailsListCustomGroupHeadersExample;
}(React.Component));
export { DetailsListCustomGroupHeadersExample };
//# sourceMappingURL=DetailsList.CustomGroupHeaders.Example.js.map