@uifabric/experiments/lib/components/FolderCover/FolderCover.js

Experimental React components for building experiences for Microsoft 365.

import { __assign, __extends, __rest } from "tslib";
import * as React from 'react';
import { css } from '../../Utilities';
import * as FolderCoverStylesModule from './FolderCover.scss';
import * as SignalStylesModule from '../signals/Signal.scss';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
var FolderCoverStyles = FolderCoverStylesModule;
var SignalStyles = SignalStylesModule;
var FolderCoverLayoutValues = {
    smallWidth: 72,
    smallHeight: 44,
    largeWidth: 112,
    largeHeight: 72,
    contentPadding: 4,
};
var SIZES = {
    small: {
        width: FolderCoverLayoutValues.smallWidth - FolderCoverLayoutValues.contentPadding * 2,
        height: FolderCoverLayoutValues.smallHeight - FolderCoverLayoutValues.contentPadding * 2,
    },
    large: {
        width: FolderCoverLayoutValues.largeWidth - FolderCoverLayoutValues.contentPadding * 2,
        height: FolderCoverLayoutValues.largeHeight - FolderCoverLayoutValues.contentPadding * 2,
    },
};
var ASSETS = {
    small: {
        default: {
            back: "folderCoverSmallDefaultBack",
            front: "folderCoverSmallDefaultFront",
        },
        linked: {
            back: "folderCoverSmallLinkedBack",
            front: "folderCoverSmallLinkedFront",
        },
        media: {
            back: "folderCoverSmallMediaBack",
            front: "folderCoverSmallMediaFront",
        },
    },
    large: {
        default: {
            back: "folderCoverLargeDefaultBack",
            front: "folderCoverLargeDefaultFront",
        },
        linked: {
            back: "folderCoverLargeLinkedBack",
            front: "folderCoverLargeLinkedFront",
        },
        media: {
            back: "folderCoverLargeMediaBack",
            front: "folderCoverLargeMediaFront",
        },
    },
};
var FolderCover = /** @class */ (function (_super) {
    __extends(FolderCover, _super);
    function FolderCover() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FolderCover.prototype.render = function () {
        var _a;
        var _b = this.props, _c = _b.folderCoverSize, size = _c === void 0 ? 'large' : _c, _d = _b.folderCoverType, type = _d === void 0 ? 'default' : _d, _e = _b.hideContent, hideContent = _e === void 0 ? false : _e, metadata = _b.metadata, signal = _b.signal, children = _b.children, isFluent = _b.isFluent, divProps = __rest(_b, ["folderCoverSize", "folderCoverType", "hideContent", "metadata", "signal", "children", "isFluent"]);
        var assets = ASSETS[size][type];
        var metadataIcon = React.createElement("span", { className: css('ms-FolderCover-metadata', FolderCoverStyles.metadata) }, metadata);
        var signalIcon = (React.createElement("span", { className: css('ms-FolderCover-signal', FolderCoverStyles.signal, SignalStyles.isFluent) }, signal));
        return (React.createElement("div", __assign({}, divProps, { className: css(FolderCoverStyles.root, (_a = {},
                _a["ms-FolderCover--isSmall " + FolderCoverStyles.isSmall] = size === 'small',
                _a["ms-FolderCover--isLarge " + FolderCoverStyles.isLarge] = size === 'large',
                _a["ms-FolderCover--isDefault " + FolderCoverStyles.isDefault] = type === 'default',
                _a["ms-FolderCover--isMedia " + FolderCoverStyles.isMedia] = type === 'media',
                _a["ms-FolderCover--isLinked " + FolderCoverStyles.isLinked] = type === 'linked',
                _a["ms-FolderCover--hideContent " + FolderCoverStyles.hideContent] = hideContent,
                _a["ms-FolderCover--isFluent " + FolderCoverStyles.isFluent] = true,
                _a)) }),
            React.createElement(Icon, { "aria-hidden": true, className: css('ms-FolderCover-back', FolderCoverStyles.back), iconName: assets.back }),
            this._renderChildren({ children: children }),
            React.createElement(Icon, { "aria-hidden": true, className: css('ms-FolderCover-front', FolderCoverStyles.front), iconName: assets.front }),
            React.createElement(React.Fragment, null,
                metadataIcon,
                signalIcon)));
    };
    FolderCover.prototype._renderChildren = function (_a) {
        var children = _a.children;
        var finalChildren = typeof children === 'function' ? children(getFolderCoverLayoutFromProps(this.props)) : children;
        return finalChildren ? (React.createElement("span", { className: css('ms-FolderCover-content', FolderCoverStyles.content) },
            React.createElement("span", { className: css('ms-FolderCover-frame', FolderCoverStyles.frame) }, finalChildren))) : null;
    };
    return FolderCover;
}(React.Component));
export { FolderCover };
export function getFolderCoverLayout(element) {
    var folderCoverProps = element.props;
    return getFolderCoverLayoutFromProps(folderCoverProps);
}
function getFolderCoverLayoutFromProps(folderCoverProps) {
    var _a = folderCoverProps.folderCoverSize, folderCoverSize = _a === void 0 ? 'large' : _a;
    var contentSize = __assign({}, SIZES[folderCoverSize]);
    return {
        contentSize: contentSize,
    };
}
export function renderFolderCoverWithLayout(element, props) {
    var Tag = element.type;
    return React.createElement(Tag, __assign({}, element.props, props));
}
//# sourceMappingURL=FolderCover.js.map