"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var FocusZone_1 = require("office-ui-fabric-react/lib/FocusZone");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var List_1 = require("office-ui-fabric-react/lib/List");
var TextField_1 = require("office-ui-fabric-react/lib/TextField");
require("./List.Scrolling.Example.scss");
var evenItemHeight = 25;
var oddItemHeight = 50;
var numberOfItemsOnPage = 10;
var ListScrollingExample = (function (_super) {
    tslib_1.__extends(ListScrollingExample, _super);
    function ListScrollingExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            selectedIndex: 0
        };
        return _this;
    }
    ListScrollingExample.prototype.render = function () {
        var _this = this;
        var items = this.props.items;
        return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical },
            React.createElement("div", null,
                React.createElement(Button_1.DefaultButton, { onClick: function () { return _this._scrollRelative(-10); } }, "-10"),
                React.createElement(Button_1.DefaultButton, { onClick: function () { return _this._scrollRelative(-1); } }, "-1"),
                React.createElement(Button_1.DefaultButton, { onClick: function () { return _this._scrollRelative(1); } }, "+1"),
                React.createElement(Button_1.DefaultButton, { onClick: function () { return _this._scrollRelative(10); } }, "+10")),
            React.createElement("div", null,
                "Scroll item index:",
                React.createElement(TextField_1.TextField, { value: this.state.selectedIndex.toString(10), onChanged: function (value) {
                        _this._scroll(parseInt(value, 10) || 0);
                    } })),
            React.createElement("div", { className: 'ms-ListScrollingExample-container', "data-is-scrollable": true },
                React.createElement(List_1.List, { ref: this._resolveList, items: items, getPageHeight: function (idx) {
                        var h = 0;
                        for (var i = idx; i < idx + numberOfItemsOnPage; ++i) {
                            var isEvenRow = i % 2 === 0;
                            h += isEvenRow ? evenItemHeight : oddItemHeight;
                        }
                        return h;
                    }, onRenderCell: function (item, index) { return (React.createElement("div", { className: 'ms-ListScrollingExample-itemCell', "data-is-focusable": true },
                        React.createElement("div", { className: Utilities_1.css('ms-ListScrollingExample-itemContent', {
                                'ms-ListScrollingExample-itemContent-even': index % 2 === 0,
                                'ms-ListScrollingExample-itemContent-odd': index % 2 === 1
                            }) },
                            index,
                            " \u00A0 ",
                            item.name))); } }))));
    };
    ListScrollingExample.prototype._scrollRelative = function (delta) {
        this._scroll(this.state.selectedIndex + delta);
    };
    ListScrollingExample.prototype._scroll = function (index) {
        var _this = this;
        var updatedSelectedIndex = Math.min(Math.max(index, 0), this.props.items.length - 1);
        this.setState({
            selectedIndex: updatedSelectedIndex
        }, function () {
            _this._list.scrollToIndex(updatedSelectedIndex, function (idx) { return idx % 2 === 0 ? evenItemHeight : oddItemHeight; });
        });
    };
    ListScrollingExample.prototype._resolveList = function (list) {
        this._list = list;
    };
    return ListScrollingExample;
}(React.Component));
tslib_1.__decorate([
    Utilities_1.autobind
], ListScrollingExample.prototype, "_resolveList", null);
exports.ListScrollingExample = ListScrollingExample;

//# sourceMappingURL=List.Scrolling.Example.js.map
