define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/List", "office-ui-fabric-react/lib/Utilities", "./List.Grid.Example.scss"], function (require, exports, tslib_1, React, FocusZone_1, List_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ROWS_PER_PAGE = 3;
    var MAX_ROW_HEIGHT = 250;
    var ListGridExample = (function (_super) {
        tslib_1.__extends(ListGridExample, _super);
        function ListGridExample() {
            var _this = _super.call(this) || this;
            _this._positions = {};
            _this._getItemCountForPage = _this._getItemCountForPage.bind(_this);
            _this._getPageHeight = _this._getPageHeight.bind(_this);
            return _this;
        }
        ListGridExample.prototype.render = function () {
            return (React.createElement(FocusZone_1.FocusZone, null,
                React.createElement(List_1.List, { className: 'ms-ListGridExample', items: this.props.items, getItemCountForPage: this._getItemCountForPage, getPageHeight: this._getPageHeight, renderedWindowsAhead: 4, onRenderCell: this._onRenderCell })));
        };
        ListGridExample.prototype._getItemCountForPage = function (itemIndex, surfaceRect) {
            if (itemIndex === 0) {
                this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
                this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
                this._rowHeight = this._columnWidth;
            }
            return this._columnCount * ROWS_PER_PAGE;
        };
        ListGridExample.prototype._getPageHeight = function (itemIndex, surfaceRect) {
            return this._rowHeight * ROWS_PER_PAGE;
        };
        ListGridExample.prototype._onRenderCell = function (item, index) {
            return (React.createElement("div", { className: 'ms-ListGridExample-tile', "data-is-focusable": true, style: {
                    width: (100 / this._columnCount) + '%'
                } },
                React.createElement("div", { className: 'ms-ListGridExample-sizer' },
                    React.createElement("div", { className: 'msListGridExample-padder' },
                        React.createElement("img", { src: item.thumbnail, className: 'ms-ListGridExample-image' }),
                        React.createElement("span", { className: 'ms-ListGridExample-label' }, "item " + index)))));
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ListGridExample.prototype, "_onRenderCell", null);
        return ListGridExample;
    }(React.Component));
    exports.ListGridExample = ListGridExample;
});
//# sourceMappingURL=List.Grid.Example.js.map