office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
43 lines (41 loc) • 2.58 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/List", "./List.Grid.Example.scss"], function (require, exports, tslib_1, React, FocusZone_1, List_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 () {
var _this = this;
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: 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))))); } })));
};
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));
exports.ListGridExample = ListGridExample;
});
//# sourceMappingURL=List.Grid.Example.js.map