define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Tooltip", "office-ui-fabric-react/lib/ScrollablePane", "office-ui-fabric-react/lib/Sticky", "office-ui-fabric-react/lib/MarqueeSelection", "office-ui-fabric-react/lib/utilities/exampleData", "office-ui-fabric-react/lib/utilities/selection/index"], function (require, exports, tslib_1, React, TextField_1, DetailsList_1, Utilities_1, Tooltip_1, ScrollablePane_1, Sticky_1, MarqueeSelection_1, exampleData_1, index_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var _columns = [
        {
            key: 'column1',
            name: 'Test 1',
            fieldName: 'test1',
            minWidth: 100,
            maxWidth: 200,
            isResizable: true,
            ariaLabel: 'Operations for name'
        },
        {
            key: 'column2',
            name: 'Test 2',
            fieldName: 'test2',
            minWidth: 100,
            maxWidth: 200,
            isResizable: true,
            ariaLabel: 'Operations for value'
        },
        {
            key: 'column3',
            name: 'Test 3',
            fieldName: 'test3',
            minWidth: 100,
            maxWidth: 200,
            isResizable: true,
            ariaLabel: 'Operations for value'
        },
        {
            key: 'column4',
            name: 'Test 4',
            fieldName: 'test4',
            minWidth: 100,
            maxWidth: 200,
            isResizable: true,
            ariaLabel: 'Operations for value'
        },
        {
            key: 'column5',
            name: 'Test 4',
            fieldName: 'test5',
            minWidth: 100,
            maxWidth: 200,
            isResizable: true,
            ariaLabel: 'Operations for value'
        },
        {
            key: 'column6',
            name: 'Test 6',
            fieldName: 'test6',
            minWidth: 100,
            maxWidth: 200,
            isResizable: true,
            ariaLabel: 'Operations for value'
        }
    ];
    var ScrollablePaneDetailsListExample = /** @class */ (function (_super) {
        tslib_1.__extends(ScrollablePaneDetailsListExample, _super);
        function ScrollablePaneDetailsListExample(props) {
            var _this = _super.call(this, props) || this;
            _this._scrollablePane = Utilities_1.createRef();
            var items = [];
            // Populate with items for demos.
            for (var i = 0; i < 200; i++) {
                items.push({
                    key: i,
                    test1: exampleData_1.lorem(2),
                    test2: exampleData_1.lorem(2),
                    test3: exampleData_1.lorem(2),
                    test4: exampleData_1.lorem(2),
                    test5: exampleData_1.lorem(2),
                    test6: exampleData_1.lorem(2)
                });
            }
            _this._items = items;
            _this._selection = new DetailsList_1.Selection({
                onSelectionChanged: function () { return _this.setState({ selectionDetails: _this._getSelectionDetails() }); }
            });
            _this.state = {
                items: items,
                selectionDetails: _this._getSelectionDetails()
            };
            _this._onDetailsListColumnResized = _this._onDetailsListColumnResized.bind(_this);
            return _this;
        }
        ScrollablePaneDetailsListExample.prototype.render = function () {
            var _this = this;
            var _a = this.state, items = _a.items, selectionDetails = _a.selectionDetails;
            return (React.createElement("div", { style: {
                    height: '80vh',
                    position: 'relative'
                } },
                React.createElement(ScrollablePane_1.ScrollablePane, { componentRef: this._scrollablePane, scrollbarVisibility: "auto" /* auto */ },
                    React.createElement(Sticky_1.Sticky, { stickyPosition: Sticky_1.StickyPositionType.Header }, selectionDetails),
                    React.createElement(TextField_1.TextField, { label: "Filter by name:", 
                        // tslint:disable-next-line:jsx-no-lambda
                        onChange: function (ev, text) {
                            return _this.setState({
                                items: text ? _this._items.filter(function (item) { return hasText(item, text); }) : _this._items
                            });
                        } }),
                    React.createElement(Sticky_1.Sticky, { stickyPosition: Sticky_1.StickyPositionType.Header },
                        React.createElement("h1", { style: { margin: '0px' } }, "Item List")),
                    React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
                        React.createElement(DetailsList_1.DetailsList, { onColumnResize: this._onDetailsListColumnResized, items: items, columns: _columns, setKey: "set", layoutMode: DetailsList_1.DetailsListLayoutMode.fixedColumns, constrainMode: DetailsList_1.ConstrainMode.unconstrained, onRenderDetailsHeader: onRenderDetailsHeader, onRenderDetailsFooter: onRenderDetailsFooter, selection: this._selection, selectionPreservedOnEmptyClick: true, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", 
                            // tslint:disable-next-line:jsx-no-lambda
                            onItemInvoked: function (item) { return alert("Item invoked: " + item.name); } })))));
        };
        ScrollablePaneDetailsListExample.prototype._getSelectionDetails = function () {
            var selectionCount = this._selection.getSelectedCount();
            switch (selectionCount) {
                case 0:
                    return 'No items selected';
                case 1:
                    return '1 item selected: ' + this._selection.getSelection()[0].name;
                default:
                    return selectionCount + " items selected";
            }
        };
        // When the DetailsList columns are resized, this may cause a horizontal scroll bar to appear or
        // disappear within ScrollablePane. This rerenders the component to ensure that the floating
        // footer does not overlap with the scroll bar.
        ScrollablePaneDetailsListExample.prototype._onDetailsListColumnResized = function () {
            this.forceUpdate();
        };
        return ScrollablePaneDetailsListExample;
    }(React.Component));
    exports.ScrollablePaneDetailsListExample = ScrollablePaneDetailsListExample;
    function onRenderDetailsHeader(props, defaultRender) {
        return (React.createElement(Sticky_1.Sticky, { stickyPosition: Sticky_1.StickyPositionType.Header, isScrollSynced: true }, defaultRender(tslib_1.__assign({}, props, { onRenderColumnHeaderTooltip: function (tooltipHostProps) { return React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({}, tooltipHostProps)); } }))));
    }
    function onRenderDetailsFooter(props, defaultRender) {
        return (React.createElement(Sticky_1.Sticky, { stickyPosition: Sticky_1.StickyPositionType.Footer, isScrollSynced: true },
            React.createElement("div", { style: { display: 'inline-block' } },
                React.createElement(DetailsList_1.DetailsRow, { columns: props.columns, item: {
                        key: 'footer',
                        test1: 'Total 1',
                        test2: 'Total 2',
                        test3: 'Total 3',
                        test4: 'Total 4',
                        test5: 'Total 5',
                        test6: 'Total 6'
                    }, itemIndex: -1, selection: props.selection, selectionMode: (props.selection && props.selection.mode) || index_1.SelectionMode.none, viewport: props.viewport }))));
    }
    function hasText(item, text) {
        return (item.test1 + "|" + item.test2 + "|" + item.test3 + "|" + item.test4 + "|" + item.test5 + "|" + item.test6).indexOf(text) > -1;
    }
});
//# sourceMappingURL=ScrollablePane.DetailsList.Example.js.map