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

Experimental React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "../Tile", "office-ui-fabric-react/lib/Checkbox", "../../signals/Signals", "@uifabric/experiments/lib/FolderCover", "@uifabric/example-app-base", "@uifabric/experiments/lib/Utilities", "./Tile.Example.scss"], function (require, exports, tslib_1, React, Tile_1, Checkbox_1, Signals_1, FolderCover_1, example_app_base_1, Utilities_1, TileExampleStylesModule) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    // tslint:disable-next-line:no-any
    var TileExampleStyles = TileExampleStylesModule;
    var ITEMS = [
        {
            name: example_app_base_1.lorem(2),
            activity: example_app_base_1.lorem(6),
            childCount: 4
        },
        {
            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),
            isShared: true,
            childCount: 4
        },
        {
            name: example_app_base_1.lorem(2),
            activity: example_app_base_1.lorem(6),
            childCount: 4
        },
        {
            name: example_app_base_1.lorem(2),
            activity: example_app_base_1.lorem(6),
            childCount: 4
        }
    ];
    var FolderTileWithThumbnail = function (props) {
        var folderCover = (React.createElement(FolderCover_1.FolderCover, { folderCoverSize: props.size, folderCoverType: props.folderCoverType, metadata: props.item.childCount, signal: props.item.isShared ? React.createElement(Signals_1.SharedSignal, null) : null }));
        var contentSize = FolderCover_1.getFolderCoverLayout(folderCover).contentSize;
        var imageSize = props.originalImageSize
            ? Utilities_1.fitContentToBounds({
                contentSize: props.originalImageSize,
                boundsSize: contentSize,
                mode: 'contain'
            })
            : undefined;
        return (React.createElement("div", { className: Utilities_1.css(TileExampleStyles.tile, (_a = {},
                _a[TileExampleStyles.largeTile] = props.size === 'large',
                _a[TileExampleStyles.smallTile] = props.size === 'small',
                _a)) },
            React.createElement(Tile_1.Tile, { tileSize: props.size, 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.CommentsSignal, null, '12') }, props.item.activity), foreground: React.createElement("span", { className: Utilities_1.css(TileExampleStylesModule.tileFolder) }, FolderCover_1.renderFolderCoverWithLayout(folderCover, {
                    children: imageSize ? (React.createElement("img", { src: "//placehold.it/" + Math.round(imageSize.width) + "x" + Math.round(imageSize.height), className: Utilities_1.css(TileExampleStyles.tileImage) })) : null
                })) })));
        var _a;
    };
    var TileFolderExample = /** @class */ (function (_super) {
        tslib_1.__extends(TileFolderExample, _super);
        function TileFolderExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onIsLargeChanged = function (event, checked) {
                _this.setState({
                    size: checked ? 'large' : 'small'
                });
            };
            _this.state = {
                size: 'large'
            };
            return _this;
        }
        TileFolderExample.prototype.render = function () {
            var size = this.state.size;
            return (React.createElement("div", null,
                React.createElement(Checkbox_1.Checkbox, { label: "Use large tiles", checked: size === 'large', onChange: this._onIsLargeChanged }),
                React.createElement("h3", null, "Folder"),
                React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                        width: 400,
                        height: 300
                    }, item: ITEMS[0], size: size }),
                React.createElement(FolderTileWithThumbnail, { item: ITEMS[1], folderCoverType: "media", size: size }),
                React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                        width: 300,
                        height: 400
                    }, item: ITEMS[2], folderCoverType: "media", size: size }),
                React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                        width: 40,
                        height: 40
                    }, item: ITEMS[3], folderCoverType: "media", size: size }),
                React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                        width: 16,
                        height: 16
                    }, item: ITEMS[4], folderCoverType: "media", size: size })));
        };
        return TileFolderExample;
    }(React.Component));
    exports.TileFolderExample = TileFolderExample;
});
//# sourceMappingURL=Tile.Folder.Example.js.map