office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
139 lines (137 loc) • 7.43 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 __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", 'react', '../../utilities/css', '../../common/BaseComponent', '../../utilities/properties', './Image.Props', './Image.scss'], function (require, exports, React, css_1, BaseComponent_1, properties_1, Image_Props_1) {
"use strict";
(function (CoverStyle) {
CoverStyle[CoverStyle["landscape"] = 0] = "landscape";
CoverStyle[CoverStyle["portrait"] = 1] = "portrait";
})(exports.CoverStyle || (exports.CoverStyle = {}));
var CoverStyle = exports.CoverStyle;
exports.CoverStyleMap = (_a = {},
_a[CoverStyle.landscape] = 'ms-Image-image--landscape',
_a[CoverStyle.portrait] = 'ms-Image-image--portrait',
_a
);
exports.ImageFitMap = (_b = {},
_b[Image_Props_1.ImageFit.center] = 'ms-Image-image--center',
_b[Image_Props_1.ImageFit.contain] = 'ms-Image-image--contain',
_b[Image_Props_1.ImageFit.cover] = 'ms-Image-image--cover',
_b[Image_Props_1.ImageFit.none] = 'ms-Image-image--none',
_b
);
(function (ImageLoadState) {
ImageLoadState[ImageLoadState["notLoaded"] = 0] = "notLoaded";
ImageLoadState[ImageLoadState["loaded"] = 1] = "loaded";
ImageLoadState[ImageLoadState["error"] = 2] = "error";
ImageLoadState[ImageLoadState["errorLoaded"] = 3] = "errorLoaded";
})(exports.ImageLoadState || (exports.ImageLoadState = {}));
var ImageLoadState = exports.ImageLoadState;
var Image = (function (_super) {
__extends(Image, _super);
function Image(props) {
_super.call(this, props);
this.state = {
loadState: ImageLoadState.notLoaded
};
}
Image.prototype.componentDidMount = function () {
if (!this._evaluateImage()) {
this._events.on(this._imageElement, 'load', this._evaluateImage);
this._events.on(this._imageElement, 'error', this._setError);
}
};
Image.prototype.componentWillReceiveProps = function (nextProps) {
if (this.state.loadState === ImageLoadState.loaded) {
var nextHeight = nextProps.height, nextWidth = nextProps.width;
var _a = this.props, height = _a.height, width = _a.width;
if (height !== nextHeight || width !== nextWidth) {
this._computeCoverStyle(nextProps);
}
}
};
Image.prototype.render = function () {
var imageProps = properties_1.getNativeProps(this.props, properties_1.imageProperties, ['width', 'height']);
var _a = this.props, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, shouldFadeIn = _a.shouldFadeIn, className = _a.className, imageFit = _a.imageFit, errorSrc = _a.errorSrc, role = _a.role;
var loadState = this.state.loadState;
var coverStyle = this._coverStyle;
var loaded = loadState === ImageLoadState.loaded || loadState === ImageLoadState.errorLoaded;
var srcToDisplay = (loadState === ImageLoadState.error || loadState === ImageLoadState.errorLoaded) ? errorSrc : src;
// If image dimensions aren't specified, the natural size of the image is used.
return (React.createElement("div", {className: css_1.css('ms-Image', className), style: { width: width, height: height }, ref: this._resolveRef('_frameElement')},
React.createElement("img", __assign({}, imageProps, {className: css_1.css('ms-Image-image', (coverStyle !== undefined) && exports.CoverStyleMap[coverStyle], (imageFit !== undefined) && exports.ImageFitMap[imageFit], {
'is-fadeIn': shouldFadeIn,
'is-notLoaded': !loaded,
'is-loaded': loaded,
'ms-u-fadeIn400': loaded && shouldFadeIn,
'is-error': loadState === ImageLoadState.error,
'ms-Image-image--scaleWidth': (imageFit === undefined && !!width && !height),
'ms-Image-image--scaleHeight': (imageFit === undefined && !width && !!height),
'ms-Image-image--scaleWidthHeight': (imageFit === undefined && !!width && !!height),
}), ref: this._resolveRef('_imageElement'), src: srcToDisplay, alt: alt, role: role}))
));
};
Image.prototype._evaluateImage = function () {
var src = this.props.src;
var loadState = this.state.loadState;
var isLoaded = (src && this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0);
this._computeCoverStyle(this.props);
if (isLoaded && loadState !== ImageLoadState.loaded && loadState !== ImageLoadState.errorLoaded) {
this._events.off();
this.setState({
loadState: loadState === ImageLoadState.error ? ImageLoadState.errorLoaded : ImageLoadState.loaded
});
}
return isLoaded;
};
Image.prototype._computeCoverStyle = function (props) {
var imageFit = props.imageFit, width = props.width, height = props.height;
if (imageFit === Image_Props_1.ImageFit.cover || imageFit === Image_Props_1.ImageFit.contain) {
if (this._imageElement) {
// Determine the desired ratio using the width and height props.
// If those props aren't available, measure measure the frame.
var desiredRatio = void 0;
if (!!width && !!height) {
desiredRatio = width / height;
}
else {
desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight;
}
// Examine the source image to determine its original ratio.
var naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight;
// Should we crop from the top or the sides?
if (naturalRatio > desiredRatio) {
this._coverStyle = CoverStyle.landscape;
}
else {
this._coverStyle = CoverStyle.portrait;
}
}
}
};
Image.prototype._setError = function () {
if (this.state.loadState !== ImageLoadState.error && this.state.loadState !== ImageLoadState.errorLoaded) {
this.setState({
loadState: ImageLoadState.error
});
}
};
Image.defaultProps = {
shouldFadeIn: true
};
return Image;
}(BaseComponent_1.BaseComponent));
exports.Image = Image;
var _a, _b;
});
//# sourceMappingURL=Image.js.map