@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
58 lines • 2.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var TilesList_1 = require("@uifabric/experiments/lib/TilesList");
var ITEMS = [];
for (var i = 0; i < 27; i++) {
ITEMS.push({
color: ['red', 'blue', 'green', 'yellow', 'orange', 'brown', 'purple', 'gray'][Math.floor(Math.random() * 8)],
key: "item-" + i
});
}
var TilesListBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(TilesListBasicExample, _super);
function TilesListBasicExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
items: ITEMS.map(function (item) {
return {
content: item,
desiredSize: { width: 100, height: 100 },
key: item.key,
onRender: renderItem
};
})
};
return _this;
}
TilesListBasicExample.prototype.render = function () {
var gridSegment = {
items: this.state.items,
key: 'grid',
mode: 2 /* fill */,
minRowHeight: 100,
spacing: 10
};
return React.createElement(TilesList_1.TilesList, { items: [gridSegment] });
};
return TilesListBasicExample;
}(React.Component));
exports.TilesListBasicExample = TilesListBasicExample;
function renderItem(item, finalSize) {
return (React.createElement("div", {
// tslint:disable-next-line:jsx-ban-props
style: {
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
top: '0',
left: '0',
bottom: '0',
right: '0',
backgroundColor: item.color
} },
React.createElement("span", null, finalSize ? finalSize.width.toFixed(1) + "x" + finalSize.height.toFixed(1) : '')));
}
//# sourceMappingURL=TilesList.Basic.Example.js.map