@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
107 lines • 6.03 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./FolderCover.scss", "../signals/Signal.scss", "office-ui-fabric-react/lib/Icon"], function (require, exports, tslib_1, React, Utilities_1, FolderCoverStylesModule, SignalStylesModule, Icon_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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) {
tslib_1.__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 = tslib_1.__rest(_b, ["folderCoverSize", "folderCoverType", "hideContent", "metadata", "signal", "children", "isFluent"]);
var assets = ASSETS[size][type];
var metadataIcon = React.createElement("span", { className: Utilities_1.css('ms-FolderCover-metadata', FolderCoverStyles.metadata) }, metadata);
var signalIcon = (React.createElement("span", { className: Utilities_1.css('ms-FolderCover-signal', FolderCoverStyles.signal, SignalStyles.isFluent) }, signal));
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: Utilities_1.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_1.Icon, { "aria-hidden": true, className: Utilities_1.css('ms-FolderCover-back', FolderCoverStyles.back), iconName: assets.back }),
this._renderChildren({ children: children }),
React.createElement(Icon_1.Icon, { "aria-hidden": true, className: Utilities_1.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: Utilities_1.css('ms-FolderCover-content', FolderCoverStyles.content) },
React.createElement("span", { className: Utilities_1.css('ms-FolderCover-frame', FolderCoverStyles.frame) }, finalChildren))) : null;
};
return FolderCover;
}(React.Component));
exports.FolderCover = FolderCover;
function getFolderCoverLayout(element) {
var folderCoverProps = element.props;
return getFolderCoverLayoutFromProps(folderCoverProps);
}
exports.getFolderCoverLayout = getFolderCoverLayout;
function getFolderCoverLayoutFromProps(folderCoverProps) {
var _a = folderCoverProps.folderCoverSize, folderCoverSize = _a === void 0 ? 'large' : _a;
var contentSize = tslib_1.__assign({}, SIZES[folderCoverSize]);
return {
contentSize: contentSize,
};
}
function renderFolderCoverWithLayout(element, props) {
var Tag = element.type;
return React.createElement(Tag, tslib_1.__assign({}, element.props, props));
}
exports.renderFolderCoverWithLayout = renderFolderCoverWithLayout;
});
//# sourceMappingURL=FolderCover.js.map