@uifabric/experiments/lib/components/TilesList/examples/TilesList.Basic.Example.js

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { TilesList } from '@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, { items: [gridSegment] });
    };
    return TilesListBasicExample;
}(React.Component));
export { 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