office-ui-fabric-react/lib-es2015/components/List/examples/List.Grid.Example.js

Reusable React components for building experiences for Office 365.

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';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
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._positions = {};
        _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;
    };
    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([
        autobind
    ], ListGridExample.prototype, "_onRenderCell", null);
    return ListGridExample;
}(React.Component));
export { ListGridExample };
//# sourceMappingURL=List.Grid.Example.js.map