@uifabric/experiments/lib-commonjs/components/FolderCover/examples/FolderCover.Basic.Example.js

Experimental React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var FolderCover_1 = require("@uifabric/experiments/lib/FolderCover");
var Utilities_1 = require("@uifabric/experiments/lib/Utilities");
var Signals_1 = require("../../signals/Signals");
var FolderCoverWithImage = function (props) {
    var originalImageSize = props.originalImageSize, folderCoverProps = tslib_1.__rest(props, ["originalImageSize"]);
    var folderCover = React.createElement(FolderCover_1.FolderCover, tslib_1.__assign({}, folderCoverProps));
    var contentSize = FolderCover_1.getFolderCoverLayout(folderCover).contentSize;
    var imageSize = Utilities_1.fitContentToBounds({
        contentSize: originalImageSize,
        boundsSize: contentSize,
        mode: 'cover'
    });
    return FolderCover_1.renderFolderCoverWithLayout(folderCover, {
        children: React.createElement("img", { src: "//placehold.it/" + Math.round(imageSize.width) + "x" + Math.round(imageSize.height) })
    });
};
var FolderCoverBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(FolderCoverBasicExample, _super);
    function FolderCoverBasicExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FolderCoverBasicExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement("h3", null, "Large Default Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "large", metadata: 20, signal: React.createElement(Signals_1.SharedSignal, null) }),
            React.createElement("h3", null, "Fluent Large Default Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "large", metadata: 20, signal: React.createElement(Signals_1.SharedSignal, null) }),
            React.createElement("h3", null, "Fluent Large Default Cover -- item count only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "large", metadata: 20 }),
            React.createElement("h3", null, "Large Default Cover -- signal icon only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "large", signal: React.createElement(Signals_1.SharedSignal, null) }),
            React.createElement("h3", null, "Small Default Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "small", metadata: 15 }),
            React.createElement("h3", null, "Fluent Small Default Cover - metadata only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "small", metadata: 15 }),
            React.createElement("h3", null, "Large Media Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "large", folderCoverType: "media", metadata: 20, signal: React.createElement(Signals_1.SharedSignal, null) }),
            React.createElement("h3", null, "Small Media Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "small", folderCoverType: "media", metadata: 15 }),
            React.createElement("h3", null, "Small Media Cover -- signal icon only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "small", folderCoverType: "media", signal: React.createElement(Signals_1.SharedSignal, null) }),
            React.createElement("h3", null, "Shared Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150
                }, folderCoverSize: "small", folderCoverType: "media", metadata: 15, signal: React.createElement(Signals_1.SharedSignal, null) })));
    };
    return FolderCoverBasicExample;
}(React.Component));
exports.FolderCoverBasicExample = FolderCoverBasicExample;
//# sourceMappingURL=FolderCover.Basic.Example.js.map