"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupedListCustomCheckboxExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var GroupedList_1 = require("@fluentui/react/lib-commonjs/GroupedList");
var DetailsList_1 = require("@fluentui/react/lib-commonjs/DetailsList");
var FocusZone_1 = require("@fluentui/react/lib-commonjs/FocusZone");
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 groupCount = 3;
var groupDepth = 1;
var groupProps = {
    onRenderHeader: function (props) { return (React.createElement(GroupedList_1.GroupHeader, tslib_1.__assign({ onRenderGroupHeaderCheckbox: onRenderGroupHeaderCheckbox }, props))); },
};
var onRenderGroupHeaderCheckbox = function (props) { return (React.createElement(Toggle_1.Toggle, { checked: props ? props.checked : undefined })); };
var GroupedListCustomCheckboxExample = function () {
    var items = react_hooks_1.useConst(function () { return example_data_1.createListItems(Math.pow(groupCount, groupDepth + 1)); });
    var groups = react_hooks_1.useConst(function () { return example_data_1.createGroups(groupCount, groupDepth, 0, groupCount); });
    var columns = react_hooks_1.useConst(function () {
        return Object.keys(items[0])
            .slice(0, 3)
            .map(function (key) { return ({
            key: key,
            name: key,
            fieldName: key,
            minWidth: 300,
        }); });
    });
    var selection = react_hooks_1.useConst(function () { return new Selection_1.Selection({ items: items }); });
    var onRenderCell = React.useCallback(function (nestingDepth, item, itemIndex, group) { return (React.createElement(DetailsList_1.DetailsRow, { columns: columns, groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: selection, selectionMode: Selection_1.SelectionMode.multiple, group: group })); }, [columns, selection]);
    return (React.createElement("div", null,
        React.createElement(FocusZone_1.FocusZone, null,
            React.createElement(Selection_1.SelectionZone, { selection: selection, selectionMode: Selection_1.SelectionMode.multiple },
                React.createElement(GroupedList_1.GroupedList, { items: items, onRenderCell: onRenderCell, selection: selection, selectionMode: Selection_1.SelectionMode.multiple, groups: groups, groupProps: groupProps })))));
};
exports.GroupedListCustomCheckboxExample = GroupedListCustomCheckboxExample;
//# sourceMappingURL=GroupedList.CustomCheckbox.Example.js.map