office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
98 lines • 3.78 kB
JavaScript
define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = function (props) {
var className = props.className, width = props.width, height = props.height, maximizeFrame = props.maximizeFrame, isLoaded = props.isLoaded, shouldFadeIn = props.shouldFadeIn, shouldStartVisible = props.shouldStartVisible, isLandscape = props.isLandscape, isCenter = props.isCenter, isContain = props.isContain, isCover = props.isCover, isNone = props.isNone, isError = props.isError, isNotImageFit = props.isNotImageFit;
var ImageFitStyles = {
position: 'relative',
left: '50%',
top: '50%',
transform: 'translate(-50%,-50%)' // @todo test RTL renders transform: translate(50%,-50%);
};
return ({
root: [
'ms-Image',
{
overflow: 'hidden'
},
maximizeFrame && [
'ms-Image--maximizeFrame',
{
height: '100%',
width: '100%'
}
],
className
],
image: [
'ms-Image-image',
{
display: 'block',
opacity: 0
},
isLoaded && [
'is-loaded',
{
opacity: 1
}
],
isCenter && [
'ms-Image-image--center',
ImageFitStyles
],
isContain && [
'ms-Image-image--contain',
isLandscape && {
width: '100%',
height: 'auto'
},
!isLandscape && {
width: 'auto',
height: '100%'
},
ImageFitStyles
],
isCover && [
'ms-Image-image--cover',
isLandscape && {
width: 'auto',
height: '100%'
},
!isLandscape && {
width: '100%',
height: 'auto'
},
ImageFitStyles
],
isNone && [
'ms-Image-image--none',
{
width: 'auto',
height: 'auto'
}
],
isNotImageFit && [
!!width && !height && {
height: 'auto',
width: '100%'
},
!width && !!height && {
height: '100%',
width: 'auto'
},
!!width && !!height && {
height: '100%',
width: '100%'
}
],
isLoaded && shouldFadeIn && !shouldStartVisible && Styling_1.AnimationClassNames.fadeIn400,
isLandscape && 'ms-Image-image--landscape',
!isLandscape && 'ms-Image-image--portrait',
!isLoaded && 'is-notLoaded',
shouldFadeIn && 'is-fadeIn',
isError && 'is-error'
]
});
};
});
//# sourceMappingURL=Image.styles.js.map