Stefan Hacker
84 lines
5.2 KiB
JavaScript
84 lines
5.2 KiB
JavaScript
define(["require", "exports", "tslib", "react", "../../Icon", "../../Image", "../../Link", "../../Utilities"], function (require, exports, tslib_1, React, Icon_1, Image_1, Link_1, Utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.DocumentCardPreviewBase = void 0;
|
|
var DEFAULT_DISPLAY_COUNT = 3;
|
|
var getClassNames = (0, Utilities_1.classNamesFunction)();
|
|
/**
|
|
* {@docCategory DocumentCard}
|
|
*/
|
|
var DocumentCardPreviewBase = /** @class */ (function (_super) {
|
|
tslib_1.__extends(DocumentCardPreviewBase, _super);
|
|
function DocumentCardPreviewBase(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this._renderPreviewList = function (previewImages) {
|
|
var _a = _this.props, getOverflowDocumentCountText = _a.getOverflowDocumentCountText, _b = _a.maxDisplayCount, maxDisplayCount = _b === void 0 ? DEFAULT_DISPLAY_COUNT : _b;
|
|
// Determine how many documents we won't be showing
|
|
var overflowDocumentCount = previewImages.length - maxDisplayCount;
|
|
// Determine the overflow text that will be rendered after the preview list.
|
|
var overflowText = overflowDocumentCount
|
|
? getOverflowDocumentCountText
|
|
? getOverflowDocumentCountText(overflowDocumentCount)
|
|
: '+' + overflowDocumentCount
|
|
: null;
|
|
// Create list items for the documents to be shown
|
|
var fileListItems = previewImages.slice(0, maxDisplayCount).map(function (file, fileIndex) { return (React.createElement("li", { key: fileIndex },
|
|
React.createElement(Image_1.Image, { className: _this._classNames.fileListIcon, src: file.iconSrc, role: "presentation", alt: "", width: "16px", height: "16px" }),
|
|
React.createElement(Link_1.Link, tslib_1.__assign({ className: _this._classNames.fileListLink,
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
href: file.url }, file.linkProps), file.name))); });
|
|
return (React.createElement("div", null,
|
|
React.createElement("ul", { className: _this._classNames.fileList }, fileListItems),
|
|
overflowText && React.createElement("span", { className: _this._classNames.fileListOverflowText }, overflowText)));
|
|
};
|
|
(0, Utilities_1.initializeComponentRef)(_this);
|
|
return _this;
|
|
}
|
|
DocumentCardPreviewBase.prototype.render = function () {
|
|
var _a = this.props, previewImages = _a.previewImages, styles = _a.styles, theme = _a.theme, className = _a.className;
|
|
var style;
|
|
var preview;
|
|
var isFileList = previewImages.length > 1;
|
|
this._classNames = getClassNames(styles, {
|
|
theme: theme,
|
|
className: className,
|
|
isFileList: isFileList,
|
|
});
|
|
if (previewImages.length > 1) {
|
|
// Render a list of files
|
|
preview = this._renderPreviewList(previewImages);
|
|
}
|
|
else if (previewImages.length === 1) {
|
|
// Render a single preview
|
|
preview = this._renderPreviewImage(previewImages[0]);
|
|
// Override the border color if an accent color was provided
|
|
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
if (previewImages[0].accentColor) {
|
|
style = {
|
|
borderBottomColor: previewImages[0].accentColor,
|
|
};
|
|
}
|
|
/* eslint-enable @typescript-eslint/no-deprecated */
|
|
}
|
|
return (React.createElement("div", { className: this._classNames.root, style: style }, preview));
|
|
};
|
|
DocumentCardPreviewBase.prototype._renderPreviewImage = function (previewImage) {
|
|
var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit, previewIconProps = previewImage.previewIconProps, previewIconContainerClass = previewImage.previewIconContainerClass;
|
|
if (previewIconProps) {
|
|
return (React.createElement("div", { className: (0, Utilities_1.css)(this._classNames.previewIcon, previewIconContainerClass), style: { width: width, height: height } },
|
|
React.createElement(Icon_1.Icon, tslib_1.__assign({}, previewIconProps))));
|
|
}
|
|
var image = (React.createElement(Image_1.Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: "presentation", alt: "" }));
|
|
var icon;
|
|
if (previewImage.iconSrc) {
|
|
icon = React.createElement(Image_1.Image, { className: this._classNames.icon, src: previewImage.iconSrc, role: "presentation", alt: "" });
|
|
}
|
|
return (React.createElement("div", null,
|
|
image,
|
|
icon));
|
|
};
|
|
return DocumentCardPreviewBase;
|
|
}(React.Component));
|
|
exports.DocumentCardPreviewBase = DocumentCardPreviewBase;
|
|
});
|
|
//# sourceMappingURL=DocumentCardPreview.base.js.map
|