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

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { FolderCover, getFolderCoverLayout, renderFolderCoverWithLayout } from '@uifabric/experiments/lib/FolderCover';
import { fitContentToBounds } from '@uifabric/experiments/lib/Utilities';
import { SharedSignal } from '../../signals/Signals';
var FolderCoverWithImage = function (props) {
    var originalImageSize = props.originalImageSize, folderCoverProps = tslib_1.__rest(props, ["originalImageSize"]);
    var folderCover = React.createElement(FolderCover, tslib_1.__assign({}, folderCoverProps));
    var contentSize = getFolderCoverLayout(folderCover).contentSize;
    var imageSize = fitContentToBounds({
        contentSize: originalImageSize,
        boundsSize: contentSize,
        mode: 'cover'
    });
    return 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(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(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(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(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(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(SharedSignal, null) })));
    };
    return FolderCoverBasicExample;
}(React.Component));
export { FolderCoverBasicExample };
//# sourceMappingURL=FolderCover.Basic.Example.js.map