office-ui-fabric-react/lib/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';
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