text: import * as tslib_1 from "tslib";
  import * as React from 'react';
  import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
  import { List } from 'office-ui-fabric-react/lib/List';
  import './List.Grid.Example.scss';
  var ROWS_PER_PAGE = 3;
  var MAX_ROW_HEIGHT = 250;
  var ListGridExample = /** @class */ (function (_super) {
      tslib_1.__extends(ListGridExample, _super);
      function ListGridExample(props) {
          var _this = _super.call(this, props) || this;
          _this._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)))));
          };
          _this._getItemCountForPage = _this._getItemCountForPage.bind(_this);
          _this._getPageHeight = _this._getPageHeight.bind(_this);
          return _this;
      }
      ListGridExample.prototype.render = function () {
          return (React.createElement(FocusZone, null,
              React.createElement(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;
      };
      return ListGridExample;
  }(React.Component));
  export { ListGridExample };
  //# sourceMappingURL=List.Grid.Example.js.map