office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
67 lines (65 loc) • 2.91 kB
JavaScript
;
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var Image_1 = require('../../Image');
var Async_1 = require('../../utilities/Async/Async');
require('./DocumentCardPreview.scss');
var INTERVAL_DELAY = 3000;
var DocumentCardPreview = (function (_super) {
__extends(DocumentCardPreview, _super);
function DocumentCardPreview(props) {
var _this = this;
_super.call(this, props);
this._showNextPreview = this._showNextPreview.bind(this);
this._async = new Async_1.Async(this);
// Show the first preview by default
this.state = {
visiblePreviewIndex: 0
};
// If more than one preview has been provided, set an interval to start flipping through them
if (this.props.previewImages.length > 1) {
this._interval = this._async.setInterval(function () { _this._showNextPreview(); }, INTERVAL_DELAY);
}
}
DocumentCardPreview.prototype.componentWillUnmount = function () {
this._async.dispose();
};
DocumentCardPreview.prototype.render = function () {
var previewImages = this.props.previewImages;
var visiblePreviewIndex = this.state.visiblePreviewIndex;
var previewImage = previewImages[visiblePreviewIndex];
var accentColor = previewImage.accentColor, width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit;
var style;
if (accentColor) {
style = {
borderBottomColor: accentColor
};
}
var icon;
if (previewImage.iconSrc) {
icon = React.createElement(Image_1.Image, {className: 'ms-DocumentCardPreview-icon', src: previewImage.iconSrc, role: 'presentation', alt: ''});
}
return (React.createElement("div", {className: 'ms-DocumentCardPreview', style: style}, React.createElement(Image_1.Image, {width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, errorSrc: previewImage.errorImageSrc, role: 'presentation', alt: ''}), icon));
};
DocumentCardPreview.prototype._showNextPreview = function () {
var maximumIndex = this.props.previewImages.length - 1;
var currentIndex = this.state.visiblePreviewIndex;
var newIndex;
if (currentIndex < maximumIndex) {
newIndex = currentIndex + 1;
}
else {
newIndex = 0;
}
this.setState({
visiblePreviewIndex: newIndex
});
};
return DocumentCardPreview;
}(React.Component));
exports.DocumentCardPreview = DocumentCardPreview;
//# sourceMappingURL=DocumentCardPreview.js.map