"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Announced_1 = require("office-ui-fabric-react/lib-commonjs/Announced");
var react_hooks_1 = require("@uifabric/react-hooks");
var DetailsList_1 = require("office-ui-fabric-react/lib-commonjs/DetailsList");
var Selection_1 = require("office-ui-fabric-react/lib-commonjs/Selection");
var Text_1 = require("office-ui-fabric-react/lib-commonjs/Text");
var Stack_1 = require("office-ui-fabric-react/lib-commonjs/Stack");
var Button_1 = require("office-ui-fabric-react/lib-commonjs/Button");
var Utilities_1 = require("office-ui-fabric-react/lib-commonjs/Utilities");
var columns = [
    {
        name: 'Name',
        fieldName: 'name',
        key: 'name',
        minWidth: 100,
        maxWidth: 200,
    },
];
var stackTokens = { childrenGap: 10 };
exports.AnnouncedBulkOperationsExample = function () {
    var selection = react_hooks_1.useConst(function () { return new Selection_1.Selection(); });
    var _a = React.useState(function () {
        return Utilities_1.createArray(20, function (i) { return ({
            key: 'item-' + i,
            name: 'Item ' + i,
        }); });
    }), items = _a[0], setItems = _a[1];
    var _b = React.useState(0), deletedCount = _b[0], setDeletedCount = _b[1];
    var onDelete = React.useCallback(function () {
        setDeletedCount(selection.count);
        setItems(function (prevItems) {
            var selectedIndices = selection.getSelectedIndices();
            return prevItems.filter(function (item, i) { return selectedIndices.indexOf(i) === -1; });
        });
    }, [selection]);
    return (React.createElement(Stack_1.Stack, { tokens: stackTokens },
        React.createElement(Text_1.Text, null, "Turn on Narrator, select items, and use the button to delete them."),
        React.createElement(Text_1.Text, null, "Note: This example is to showcase the concept of deleting, copying, uploading, or moving many items and not fully illustrative of the real-world scenario."),
        React.createElement(Stack_1.Stack.Item, { align: "start" },
            React.createElement(Button_1.PrimaryButton, { onClick: onDelete }, "Delete selected items")),
        deletedCount > 0 && (React.createElement(Announced_1.Announced, { message: deletedCount + " item" + (deletedCount === 1 ? '' : 's') + " deleted", "aria-live": 'assertive' })),
        React.createElement(DetailsList_1.DetailsList, { setKey: "items", items: items, columns: columns, selection: selection, selectionPreservedOnEmptyClick: true, layoutMode: DetailsList_1.DetailsListLayoutMode.fixedColumns, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items" })));
};
//# sourceMappingURL=Announced.BulkOperations.Example.js.map