import { __assign } from "tslib";
import * as React from 'react';
import { GroupHeader, GroupedList, } from '@fluentui/react/lib/GroupedList';
import { DetailsRow } from '@fluentui/react/lib/DetailsList';
import { FocusZone } from '@fluentui/react/lib/FocusZone';
import { Selection, SelectionMode, SelectionZone } from '@fluentui/react/lib/Selection';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { useConst } from '@fluentui/react-hooks';
import { createListItems, createGroups } from '@fluentui/example-data';
var groupCount = 3;
var groupDepth = 1;
var groupProps = {
    onRenderHeader: function (props) { return (React.createElement(GroupHeader, __assign({ onRenderGroupHeaderCheckbox: onRenderGroupHeaderCheckbox }, props))); },
};
var onRenderGroupHeaderCheckbox = function (props) { return (React.createElement(Toggle, { checked: props ? props.checked : undefined })); };
export var GroupedListCustomCheckboxExample = function () {
    var items = useConst(function () { return createListItems(Math.pow(groupCount, groupDepth + 1)); });
    var groups = useConst(function () { return createGroups(groupCount, groupDepth, 0, groupCount); });
    var columns = useConst(function () {
        return Object.keys(items[0])
            .slice(0, 3)
            .map(function (key) { return ({
            key: key,
            name: key,
            fieldName: key,
            minWidth: 300,
        }); });
    });
    var selection = useConst(function () { return new Selection({ items: items }); });
    var onRenderCell = React.useCallback(function (nestingDepth, item, itemIndex, group) { return (React.createElement(DetailsRow, { columns: columns, groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: selection, selectionMode: SelectionMode.multiple, group: group })); }, [columns, selection]);
    return (React.createElement("div", null,
        React.createElement(FocusZone, null,
            React.createElement(SelectionZone, { selection: selection, selectionMode: SelectionMode.multiple },
                React.createElement(GroupedList, { items: items, onRenderCell: onRenderCell, selection: selection, selectionMode: SelectionMode.multiple, groups: groups, groupProps: groupProps })))));
};
//# sourceMappingURL=GroupedList.CustomCheckbox.Example.js.map