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

Experimental React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/FolderCover", "@uifabric/experiments/lib/Utilities", "../../signals/Signals"], function (require, exports, tslib_1, React, FolderCover_1, Utilities_1, Signals_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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