office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
74 lines • 4.29 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Image } from '../../Image';
import { Icon } from '../../Icon';
import { BaseComponent, autobind, css } from '../../Utilities';
import * as stylesImport from './DocumentCard.scss';
var styles = stylesImport;
var LIST_ITEM_COUNT = 3;
var DocumentCardPreview = /** @class */ (function (_super) {
tslib_1.__extends(DocumentCardPreview, _super);
function DocumentCardPreview() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardPreview.prototype.render = function () {
var previewImages = this.props.previewImages;
var style, preview;
var isFileList = false;
if (previewImages.length > 1) {
// Render a list of files
preview = this._renderPreviewList(previewImages);
isFileList = true;
}
else if (previewImages.length === 1) {
// Render a single preview
preview = this._renderPreviewImage(previewImages[0]);
// Override the border color if an accent color was provided
if (previewImages[0].accentColor) {
style = {
borderBottomColor: previewImages[0].accentColor
};
}
}
return (React.createElement("div", { className: css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)), style: style }, preview));
};
DocumentCardPreview.prototype._renderPreviewImage = function (previewImage) {
var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit, previewIconProps = previewImage.previewIconProps;
if (previewIconProps) {
return (React.createElement("div", { className: css('ms-DocumentCardPreview-iconContainer', styles.previewIconContainer), style: { width: width, height: height } },
React.createElement(Icon, tslib_1.__assign({}, previewIconProps))));
}
var image = (React.createElement(Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: 'presentation', alt: '' }));
var icon;
if (previewImage.iconSrc) {
icon = React.createElement(Image, { className: css('ms-DocumentCardPreview-icon', styles.icon), src: previewImage.iconSrc, role: 'presentation', alt: '' });
}
return (React.createElement("div", null,
image,
icon));
};
DocumentCardPreview.prototype._renderPreviewList = function (previewImages) {
var getOverflowDocumentCountText = this.props.getOverflowDocumentCountText;
// Determine how many documents we won't be showing
var overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
// 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, LIST_ITEM_COUNT).map(function (file, fileIndex) { return (React.createElement("li", { key: fileIndex },
React.createElement(Image, { className: css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon), src: file.iconSrc, role: 'presentation', alt: '', width: '16px', height: '16px' }),
React.createElement("a", { href: file.url }, file.name))); });
return (React.createElement("div", null,
React.createElement("ul", { className: css('ms-DocumentCardPreview-fileList', styles.fileList) }, fileListItems),
overflowText &&
React.createElement("span", { className: css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }, overflowText)));
};
tslib_1.__decorate([
autobind
], DocumentCardPreview.prototype, "_renderPreviewList", null);
return DocumentCardPreview;
}(BaseComponent));
export { DocumentCardPreview };
//# sourceMappingURL=DocumentCardPreview.js.map