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

Experimental React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/Tile", "office-ui-fabric-react/lib/Icon", "office-ui-fabric-react/lib/Checkbox", "@uifabric/experiments/lib/Utilities", "../../signals/Signals", "@uifabric/example-app-base", "./Tile.Example.scss"], function (require, exports, tslib_1, React, Tile_1, Icon_1, Checkbox_1, Utilities_1, Signals_1, example_app_base_1, TileExampleStylesModule) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ITEMS = [
        {
            name: example_app_base_1.lorem(2),
            activity: example_app_base_1.lorem(6)
        },
        {
            name: example_app_base_1.lorem(2),
            activity: example_app_base_1.lorem(6)
        },
        {
            name: example_app_base_1.lorem(2),
            activity: example_app_base_1.lorem(6)
        },
        {
            name: example_app_base_1.lorem(2),
            activity: example_app_base_1.lorem(6)
        }
    ];
    // tslint:disable-next-line:no-any
    var TileExampleStyles = TileExampleStylesModule;
    var ImageTile = function (props) {
        var tile = (React.createElement(Tile_1.Tile, { contentSize: props.tileSize, itemName: React.createElement(Signals_1.SignalField, { before: React.createElement(Signals_1.NewSignal, null) }, props.item.name), itemActivity: React.createElement(Signals_1.SignalField, { before: [
                    React.createElement(Signals_1.Signal, { key: 0 },
                        React.createElement(Icon_1.Icon, { iconName: "play" })),
                    React.createElement(Signals_1.MentionSignal, { key: 1 })
                ] }, props.item.activity), background: React.createElement("span", null) // Placeholder content
            , hideBackground: !props.showBackground, showBackgroundFrame: true }));
        var backgroundSize = Tile_1.getTileLayout(tile).backgroundSize;
        var imageSize = Utilities_1.fitContentToBounds({
            contentSize: props.originalImageSize,
            boundsSize: backgroundSize || { width: 0, height: 0 },
            mode: 'cover'
        });
        return (React.createElement("div", { className: Utilities_1.css(TileExampleStyles.tile), 
            // tslint:disable-next-line:jsx-ban-props
            style: {
                width: props.tileSize.width + "px",
                height: props.tileSize.height + "px"
            } }, Tile_1.renderTileWithLayout(tile, {
            background: (React.createElement("img", { className: Utilities_1.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_1.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: Utilities_1.css(TileExampleStyles.tile, TileExampleStyles.largeTile) },
                    React.createElement(Tile_1.Tile, { itemName: React.createElement(Signals_1.SignalField, { before: React.createElement(Signals_1.NewSignal, null) }, ITEMS[3].name), itemActivity: React.createElement(Signals_1.SignalField, { before: [
                                React.createElement(Signals_1.Signal, { key: 0 },
                                    React.createElement(Icon_1.Icon, { iconName: "play" })),
                                React.createElement(Signals_1.SharedSignal, { key: 1 })
                            ] }, ITEMS[3].name), foreground: React.createElement(Icon_1.Icon, { iconName: "play", style: { margin: '11px', fontSize: '40px' } }), showBackgroundFrame: true }))));
        };
        return TileMediaExample;
    }(React.Component));
    exports.TileMediaExample = TileMediaExample;
});
//# sourceMappingURL=Tile.Media.Example.js.map