@uifabric/experiments/lib/components/Tile/examples/Tile.Media.Example.js

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { Tile, getTileLayout, renderTileWithLayout } from '@uifabric/experiments/lib/Tile';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { css, fitContentToBounds } from '@uifabric/experiments/lib/Utilities';
import { SignalField, Signal, NewSignal, SharedSignal, MentionSignal } from '../../signals/Signals';
import { lorem } from '@uifabric/example-app-base';
import * as TileExampleStylesModule from './Tile.Example.scss';
var ITEMS = [
    {
        name: lorem(2),
        activity: lorem(6)
    },
    {
        name: lorem(2),
        activity: lorem(6)
    },
    {
        name: lorem(2),
        activity: lorem(6)
    },
    {
        name: lorem(2),
        activity: lorem(6)
    }
];
// tslint:disable-next-line:no-any
var TileExampleStyles = TileExampleStylesModule;
var ImageTile = function (props) {
    var tile = (React.createElement(Tile, { contentSize: props.tileSize, itemName: React.createElement(SignalField, { before: React.createElement(NewSignal, null) }, props.item.name), itemActivity: React.createElement(SignalField, { before: [
                React.createElement(Signal, { key: 0 },
                    React.createElement(Icon, { iconName: "play" })),
                React.createElement(MentionSignal, { key: 1 })
            ] }, props.item.activity), background: React.createElement("span", null) // Placeholder content
        , hideBackground: !props.showBackground, showBackgroundFrame: true }));
    var backgroundSize = getTileLayout(tile).backgroundSize;
    var imageSize = fitContentToBounds({
        contentSize: props.originalImageSize,
        boundsSize: backgroundSize || { width: 0, height: 0 },
        mode: 'cover'
    });
    return (React.createElement("div", { className: css(TileExampleStyles.tile), 
        // tslint:disable-next-line:jsx-ban-props
        style: {
            width: props.tileSize.width + "px",
            height: props.tileSize.height + "px"
        } }, renderTileWithLayout(tile, {
        background: (React.createElement("img", { className: css(TileExampleStyles.tileImage), src: "//placehold.it/" + Math.round(imageSize.width) + "x" + Math.round(imageSize.height) }))
    })));
};
var TileMediaExample = /** @class */ (function (_super) {
    tslib_1.__extends(TileMediaExample, _super);
    function TileMediaExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onImagesLoadedChanged = function (event, checked) {
            _this.setState({
                imagesLoaded: checked
            });
        };
        _this.state = {
            imagesLoaded: true
        };
        return _this;
    }
    TileMediaExample.prototype.render = function () {
        var imagesLoaded = this.state.imagesLoaded;
        return (React.createElement("div", null,
            React.createElement(Checkbox, { label: "Show images as loaded", checked: imagesLoaded, onChange: this._onImagesLoadedChanged }),
            React.createElement("h3", null, "Landscape"),
            React.createElement(ImageTile, { tileSize: {
                    width: 250,
                    height: 200
                }, item: ITEMS[0], originalImageSize: {
                    width: 400,
                    height: 300
                }, showBackground: imagesLoaded }),
            React.createElement("h3", null, "Portrait"),
            React.createElement(ImageTile, { tileSize: {
                    width: 200,
                    height: 250
                }, item: ITEMS[1], originalImageSize: {
                    width: 300,
                    height: 400
                }, showBackground: imagesLoaded }),
            React.createElement("h3", null, "Small Image"),
            React.createElement(ImageTile, { tileSize: {
                    width: 200,
                    height: 200
                }, item: ITEMS[2], originalImageSize: {
                    width: 16,
                    height: 16
                }, showBackground: imagesLoaded }),
            React.createElement("h3", null, "No preview"),
            React.createElement("div", { className: css(TileExampleStyles.tile, TileExampleStyles.largeTile) },
                React.createElement(Tile, { itemName: React.createElement(SignalField, { before: React.createElement(NewSignal, null) }, ITEMS[3].name), itemActivity: React.createElement(SignalField, { before: [
                            React.createElement(Signal, { key: 0 },
                                React.createElement(Icon, { iconName: "play" })),
                            React.createElement(SharedSignal, { key: 1 })
                        ] }, ITEMS[3].name), foreground: React.createElement(Icon, { iconName: "play", style: { margin: '11px', fontSize: '40px' } }), showBackgroundFrame: true }))));
    };
    return TileMediaExample;
}(React.Component));
export { TileMediaExample };
//# sourceMappingURL=Tile.Media.Example.js.map