office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
116 lines • 4.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Styling_1 = require("../../Styling");
var positioning_1 = require("../../utilities/positioning");
var BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
var ANIMATIONS = (_a = {},
_a[positioning_1.RectangleEdge.top] = Styling_1.AnimationStyles.slideUpIn20,
_a[positioning_1.RectangleEdge.bottom] = Styling_1.AnimationStyles.slideDownIn20,
_a[positioning_1.RectangleEdge.left] = Styling_1.AnimationStyles.slideLeftIn20,
_a[positioning_1.RectangleEdge.right] = Styling_1.AnimationStyles.slideRightIn20,
_a);
function getBeakStylePosition(positions, beakWidth, beakStyle) {
var beakStyleWidth = beakWidth;
// This is here to support the old way of setting the beak size until version 1.0.0.
// beakStyle is now deprecated and will be be removed at version 1.0.0
if (beakStyle === 'ms-Callout-smallbeak') {
beakStyleWidth = 16;
}
var beakReactStyle = tslib_1.__assign({}, (positions && positions.beakPosition ? positions.beakPosition.elementPosition : null));
beakReactStyle.height = beakStyleWidth;
beakReactStyle.width = beakStyleWidth;
if (!beakReactStyle.top && !beakReactStyle.bottom && !beakReactStyle.left && !beakReactStyle.right) {
beakReactStyle.left = BEAK_ORIGIN_POSITION.left;
beakReactStyle.top = BEAK_ORIGIN_POSITION.top;
}
return beakReactStyle;
}
exports.getStyles = function (props) {
var theme = props.theme, className = props.className, overflowYHidden = props.overflowYHidden, calloutWidth = props.calloutWidth, contentMaxHeight = props.contentMaxHeight, positions = props.positions, beakWidth = props.beakWidth, backgroundColor = props.backgroundColor, beakStyle = props.beakStyle;
var palette = theme.palette;
return {
container: [
'ms-Callout-container',
{
position: 'relative',
}
],
root: [
'ms-Callout',
{
position: 'absolute',
boxSizing: 'border-box',
borderWidth: 1,
borderStyle: 'solid',
borderColor: palette.neutralLight,
boxShadow: '0 0 5px 0px rgba(0,0,0,0.4)',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'WindowText',
},
_a)
},
Styling_1.focusClear(),
className,
positions && positions.targetEdge && ANIMATIONS[positions.targetEdge],
// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.
// To help ensure that edge will respect the offscreen style opacity
// filter needs to be added as an additional way to set opacity.
!positions && {
opacity: 0,
filter: 'opacity(0)',
},
positions && tslib_1.__assign({}, positions.elementPosition),
!!calloutWidth && { width: calloutWidth },
],
beak: [
'ms-Callout-beak',
{
position: 'absolute',
backgroundColor: palette.white,
boxShadow: 'inherit',
border: 'inherit',
boxSizing: 'border-box',
transform: 'rotate(45deg)'
},
getBeakStylePosition(positions, beakWidth, beakStyle),
backgroundColor && {
backgroundColor: backgroundColor
}
],
beakCurtain: [
'ms-Callout-beakCurtain',
{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: palette.white,
}
],
calloutMain: [
'ms-Callout-main',
{
backgroundColor: palette.white,
overflowX: 'hidden',
overflowY: 'auto',
position: 'relative',
maxHeight: contentMaxHeight
},
!!calloutWidth && { width: calloutWidth },
overflowYHidden && {
overflowY: 'hidden'
},
backgroundColor && {
backgroundColor: backgroundColor
}
],
};
var _a;
};
var _a;
//# sourceMappingURL=CalloutContent.styles.js.map