import { __assign } from "tslib";
import * as React from 'react';
import { DetailsList, DetailsListLayoutMode, ConstrainMode, DetailsRow, } from '@fluentui/react/lib/DetailsList';
import { TooltipHost } from '@fluentui/react/lib/Tooltip';
import { SelectionMode } from '@fluentui/react/lib/Selection';
import { mergeStyleSets } from '@fluentui/react/lib/Styling';
var gridStyles = {
    root: {
        overflowX: 'scroll',
        selectors: {
            '& [role=grid]': {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'start',
                height: '60vh',
            },
        },
    },
    headerWrapper: {
        flex: '0 0 auto',
    },
    contentWrapper: {
        flex: '1 1 auto',
        overflowY: 'auto',
        overflowX: 'hidden',
    },
};
var classNames = mergeStyleSets({
    header: {
        margin: 0,
    },
    row: {
        flex: '0 0 auto',
    },
});
var footerItem = {
    key: 'footer',
    test1: 'Footer 1',
    test2: 'Footer 2',
    test3: 'Footer 3',
    test4: 'Footer 4',
    test5: 'Footer 5',
    test6: 'Footer 6',
};
var LOREM_IPSUM = ('lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut ' +
    'labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut ' +
    'aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore ' +
    'eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt ').split(' ');
var loremIndex = 0;
var lorem = function (wordCount) {
    var startIndex = loremIndex + wordCount > LOREM_IPSUM.length ? 0 : loremIndex;
    loremIndex = startIndex + wordCount;
    return LOREM_IPSUM.slice(startIndex, loremIndex).join(' ');
};
var allItems = Array.from({ length: 200 }).map(function (item, index) { return ({
    key: index,
    test1: lorem(4),
    test2: lorem(4),
    test3: lorem(4),
    test4: lorem(4),
    test5: lorem(4),
    test6: lorem(4),
}); });
var columns = Array.from({ length: 6 }).map(function (item, index) { return ({
    key: 'column' + (index + 1),
    name: 'Test ' + (index + 1),
    fieldName: 'test' + (index + 1),
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
}); });
var onItemInvoked = function (item) {
    alert('Item invoked: ' + item.test1);
};
var onRenderDetailsHeader = function (props, defaultRender) {
    if (!props) {
        return null;
    }
    var onRenderColumnHeaderTooltip = function (tooltipHostProps) { return (React.createElement(TooltipHost, __assign({}, tooltipHostProps))); };
    return defaultRender(__assign(__assign({}, props), { onRenderColumnHeaderTooltip: onRenderColumnHeaderTooltip }));
};
var onRenderDetailsFooter = function (props, defaultRender) {
    if (!props) {
        return null;
    }
    return (React.createElement("div", { className: classNames.row },
        React.createElement(DetailsRow, { columns: props.columns, item: footerItem, itemIndex: -1, selection: props.selection, selectionMode: (props.selection && props.selection.mode) || SelectionMode.none, rowWidth: props.rowWidth })));
};
export var ScrollablePaneDetailsListExample = function () {
    return (React.createElement("div", null,
        React.createElement("h1", { className: classNames.header }, "Item list"),
        React.createElement(DetailsList, { items: allItems, columns: columns, setKey: "set", layoutMode: DetailsListLayoutMode.fixedColumns, constrainMode: ConstrainMode.unconstrained, onRenderDetailsHeader: onRenderDetailsHeader, onRenderDetailsFooter: onRenderDetailsFooter, selectionPreservedOnEmptyClick: true, styles: gridStyles, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", onItemInvoked: onItemInvoked })));
};
//# sourceMappingURL=ScrollablePane.DetailsList.Example.js.map