define(["require", "exports", "react", "@fluentui/react/lib/CommandBar", "@fluentui/react/lib/Check", "@fluentui/react/lib/MarqueeSelection", "@fluentui/react/lib/Selection", "@fluentui/example-data", "@fluentui/react/lib/Styling", "@fluentui/react-hooks"], function (require, exports, React, CommandBar_1, Check_1, MarqueeSelection_1, Selection_1, example_data_1, Styling_1, react_hooks_1) {
    "use strict";
    var _a;
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.SelectionBasicExample = void 0;
    var commonStyles = {
        display: 'inline-block',
        cursor: 'default',
        boxSizing: 'border-box',
        verticalAlign: 'top',
        background: 'none',
        backgroundColor: 'transparent',
        border: 'none',
    };
    var classNames = Styling_1.mergeStyleSets({
        item: {
            selectors: {
                '&:hover': { background: '#eee' },
            },
        },
        // Overwrites the default style for Button
        check: [commonStyles, { padding: '11px 8px' }],
        cell: [
            commonStyles,
            {
                overflow: 'hidden',
                height: 36,
                padding: 8,
                userSelect: 'none',
            },
        ],
    });
    var alertItem = function (item) {
        alert('item invoked: ' + item.name);
    };
    var startsWithVowel = function (item) {
        return /^[aeiou]/.test(item.name || '');
    };
    var selectionModes = (_a = {},
        _a[Selection_1.SelectionMode[Selection_1.SelectionMode.none]] = 'None',
        _a[Selection_1.SelectionMode[Selection_1.SelectionMode.single]] = 'Single select',
        _a[Selection_1.SelectionMode[Selection_1.SelectionMode.multiple]] = 'Multi select',
        _a);
    var selectableItemTypes = {
        all: 'All items',
        vowels: 'Names starting with vowels',
    };
    var ITEM_COUNT = 100;
    var SelectionItemExample = function (props) {
        var item = props.item, itemIndex = props.itemIndex, selection = props.selection;
        var isSelected = false;
        if (selection && itemIndex !== undefined) {
            isSelected = selection.isIndexSelected(itemIndex);
        }
        return (React.createElement("div", { className: classNames.item, "data-is-focusable": true, "data-selection-index": itemIndex },
            selection && selection.canSelectItem(item) && selection.mode !== Selection_1.SelectionMode.none && (React.createElement("div", { className: classNames.check, "data-is-focusable": true, "data-selection-toggle": true },
                React.createElement(Check_1.Check, { checked: isSelected }))),
            React.createElement("span", { className: classNames.cell }, item.name),
            React.createElement("a", { className: classNames.cell, href: "https://bing.com", target: "_blank" }, "Link that avoids selection"),
            React.createElement("a", { className: classNames.cell, "data-selection-select": true, href: "https://bing.com", target: "_blank" }, "Link that selects first")));
    };
    var SelectionBasicExample = function () {
        var _a = React.useState('all'), selectableItemType = _a[0], setSelectableItemType = _a[1];
        var _b = React.useState(Selection_1.SelectionMode.multiple), selectionMode = _b[0], setSelectionMode = _b[1];
        var forceUpdate = react_hooks_1.useForceUpdate();
        var items = react_hooks_1.useConst(function () { return example_data_1.createListItems(ITEM_COUNT); });
        var selection = React.useMemo(function () {
            return new Selection_1.Selection({
                canSelectItem: selectableItemType === 'vowels' ? startsWithVowel : undefined,
                selectionMode: selectionMode,
                onSelectionChanged: forceUpdate,
                items: items,
            });
        }, [selectableItemType, selectionMode, forceUpdate, items]);
        var commandItems = React.useMemo(function () { return [
            {
                key: 'selectionMode',
                text: 'Selection mode: ' + selectionModes[Selection_1.SelectionMode[selectionMode]],
                subMenuProps: {
                    items: Object.keys(selectionModes).map(function (mode) { return ({
                        key: mode,
                        name: selectionModes[mode],
                        canCheck: true,
                        checked: selectionMode === Selection_1.SelectionMode[mode],
                        onClick: function () { return setSelectionMode(Selection_1.SelectionMode[mode]); },
                    }); }),
                },
            },
            {
                key: 'allowCanSelect',
                text: 'Selectable item type: ' + selectableItemType,
                subMenuProps: {
                    items: Object.keys(selectableItemTypes).map(function (itemType) { return ({
                        key: itemType,
                        name: selectableItemTypes[itemType],
                        checked: selectableItemType === itemType,
                        onClick: function () { return setSelectableItemType(itemType); },
                    }); }),
                },
            },
            {
                key: 'selectAll',
                text: 'Toggle select all',
                iconProps: { iconName: 'CheckMark' },
                onClick: function () { return selection.toggleAllSelected(); },
                disabled: selectionMode !== Selection_1.SelectionMode.multiple,
            },
        ]; }, [selectionMode, selection, selectableItemType]);
        return (React.createElement("div", null,
            React.createElement(CommandBar_1.CommandBar, { items: commandItems }),
            React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: selection, isEnabled: selection.mode === Selection_1.SelectionMode.multiple },
                React.createElement(Selection_1.SelectionZone, { selection: selection, onItemInvoked: alertItem }, items.map(function (item, index) { return (React.createElement(SelectionItemExample, { key: item.key, item: item, itemIndex: index, selection: selection })); })))));
    };
    exports.SelectionBasicExample = SelectionBasicExample;
});
//# sourceMappingURL=Selection.Basic.Example.js.map