"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Announced_1 = require("office-ui-fabric-react/lib-commonjs/Announced");
var DetailsList_1 = require("office-ui-fabric-react/lib-commonjs/DetailsList");
var Button_1 = require("office-ui-fabric-react/lib-commonjs/Button");
var Dialog_1 = require("office-ui-fabric-react/lib-commonjs/Dialog");
var TextField_1 = require("office-ui-fabric-react/lib-commonjs/TextField");
var Utilities_1 = require("office-ui-fabric-react/lib-commonjs/Utilities");
var react_hooks_1 = require("@uifabric/react-hooks");
var iconButtonStyles = { root: { float: 'right', height: 'inherit' } };
exports.AnnouncedQuickActionsExample = function () {
    var detailsList = React.useRef(null);
    var textField = React.useRef(null);
    var selection = react_hooks_1.useConst(function () { return new DetailsList_1.Selection(); });
    var _a = React.useState(function () {
        return Utilities_1.createArray(20, function (i) { return ({
            key: i,
            name: 'Item ' + i,
        }); });
    }), items = _a[0], setItems = _a[1];
    var _b = React.useState(undefined), dialogContent = _b[0], setDialogContent = _b[1];
    var _c = React.useState(undefined), announced = _c[0], setAnnounced = _c[1];
    var deleteItem = React.useCallback(function (index) {
        setItems(function (prevItems) { return prevItems.filter(function (item, i) { return i !== index; }); });
        setAnnounced(React.createElement(Announced_1.Announced, { message: "Item deleted", "aria-live": "assertive" }));
    }, []);
    var renameItem = React.useCallback(function (item, index) {
        var updateItemName = function () {
            if (textField && textField.current) {
                setItems(function (prevItems) {
                    var _a;
                    var renamedItems = tslib_1.__spreadArrays(prevItems);
                    renamedItems[index] = tslib_1.__assign(tslib_1.__assign({}, prevItems[index]), { name: ((_a = textField.current) === null || _a === void 0 ? void 0 : _a.value) || renamedItems[index].name });
                    return renamedItems;
                });
                setDialogContent(undefined);
                setAnnounced(React.createElement(Announced_1.Announced, { message: "Item renamed", "aria-live": "assertive" }));
            }
        };
        setDialogContent(React.createElement(React.Fragment, null,
            React.createElement(TextField_1.TextField, { componentRef: textField, label: "Rename", defaultValue: item.name }),
            React.createElement(Dialog_1.DialogFooter, null,
                React.createElement(Button_1.PrimaryButton
                // eslint-disable-next-line react/jsx-no-bind
                , { 
                    // eslint-disable-next-line react/jsx-no-bind
                    onClick: updateItemName, text: "Save" }))));
    }, []);
    var columns = react_hooks_1.useConst(function () { return [
        {
            name: 'Name',
            fieldName: 'name',
            key: 'name',
            minWidth: 100,
            maxWidth: 200,
            onRender: function (item, index) { return (React.createElement("div", null,
                item.name,
                React.createElement(Button_1.IconButton, { menuIconProps: { iconName: 'MoreVertical' }, role: "button", "aria-haspopup": true, "aria-label": "Show actions", styles: iconButtonStyles, menuProps: {
                        items: [
                            {
                                key: 'delete',
                                text: 'Delete',
                                onClick: function () { return deleteItem(index); },
                            },
                            {
                                key: 'rename',
                                text: 'Rename',
                                onClick: function () { return renameItem(item, index); },
                            },
                        ],
                    } }))); },
        },
    ]; });
    var closeRenameDialog = React.useCallback(function () {
        setDialogContent(undefined);
    }, []);
    return (React.createElement(React.Fragment, null,
        announced,
        React.createElement(DetailsList_1.DetailsList, { componentRef: detailsList, items: items, columns: columns, layoutMode: DetailsList_1.DetailsListLayoutMode.fixedColumns, selection: selection, selectionPreservedOnEmptyClick: true, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", checkButtonAriaLabel: "select row" }),
        React.createElement(Dialog_1.Dialog, { hidden: !dialogContent, onDismiss: closeRenameDialog, closeButtonAriaLabel: "Close" }, dialogContent)));
};
//# sourceMappingURL=Announced.QuickActions.Example.js.map