"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupedListBasicExample = void 0;
var React = require("react");
var GroupedList_1 = require("@fluentui/react/lib-commonjs/GroupedList");
var DetailsList_1 = require("@fluentui/react/lib-commonjs/DetailsList");
var Selection_1 = require("@fluentui/react/lib-commonjs/Selection");
var Toggle_1 = require("@fluentui/react/lib-commonjs/Toggle");
var react_hooks_1 = require("@fluentui/react-hooks");
var example_data_1 = require("@fluentui/example-data");
var toggleStyles = { root: { marginBottom: '20px' } };
var groupCount = 3;
var groupDepth = 3;
var items = example_data_1.createListItems(Math.pow(groupCount, groupDepth + 1));
var columns = Object.keys(items[0])
    .slice(0, 3)
    .map(function (key) { return ({
    key: key,
    name: key,
    fieldName: key,
    minWidth: 300,
}); });
var groups = example_data_1.createGroups(groupCount, groupDepth, 0, groupCount);
var GroupedListBasicExample = function () {
    var _a = react_hooks_1.useBoolean(false), isCompactMode = _a[0], toggleIsCompactMode = _a[1].toggle;
    var selection = react_hooks_1.useConst(function () {
        var s = new Selection_1.Selection();
        s.setItems(items, true);
        return s;
    });
    var onRenderCell = function (nestingDepth, item, itemIndex, group) {
        return item && typeof itemIndex === 'number' && itemIndex > -1 ? (React.createElement(DetailsList_1.DetailsRow, { columns: columns, groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: selection, selectionMode: Selection_1.SelectionMode.multiple, compact: isCompactMode, group: group })) : null;
    };
    return (React.createElement("div", null,
        React.createElement(Toggle_1.Toggle, { label: "Enable compact mode", checked: isCompactMode, onChange: toggleIsCompactMode, onText: "Compact", offText: "Normal", styles: toggleStyles }),
        React.createElement(Selection_1.SelectionZone, { selection: selection, selectionMode: Selection_1.SelectionMode.multiple },
            React.createElement(GroupedList_1.GroupedList, { items: items, 
                // eslint-disable-next-line react/jsx-no-bind
                onRenderCell: onRenderCell, selection: selection, selectionMode: Selection_1.SelectionMode.multiple, groups: groups, compact: isCompactMode }))));
};
exports.GroupedListBasicExample = GroupedListBasicExample;
//# sourceMappingURL=GroupedList.Basic.Example.js.map