Stefan Hacker
109 lines
4.1 KiB
JavaScript
109 lines
4.1 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = exports.animationDuration = void 0;
|
|
var Styling_1 = require("../../Styling");
|
|
exports.animationDuration = Styling_1.AnimationVariables.durationValue2;
|
|
var globalClassNames = {
|
|
root: 'ms-Modal',
|
|
main: 'ms-Dialog-main',
|
|
scrollableContent: 'ms-Modal-scrollableContent',
|
|
isOpen: 'is-open',
|
|
layer: 'ms-Modal-Layer',
|
|
};
|
|
var getStyles = function (props) {
|
|
var _a;
|
|
var className = props.className, containerClassName = props.containerClassName, scrollableContentClassName = props.scrollableContentClassName, isOpen = props.isOpen, isVisible = props.isVisible, hasBeenOpened = props.hasBeenOpened, modalRectangleTop = props.modalRectangleTop, theme = props.theme, topOffsetFixed = props.topOffsetFixed, isModeless = props.isModeless, layerClassName = props.layerClassName, isDefaultDragHandle = props.isDefaultDragHandle, windowInnerHeight = props.windowInnerHeight;
|
|
var palette = theme.palette, effects = theme.effects, fonts = theme.fonts;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(globalClassNames, theme);
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
fonts.medium,
|
|
{
|
|
backgroundColor: 'transparent',
|
|
position: 'fixed',
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
transition: "opacity ".concat(exports.animationDuration),
|
|
},
|
|
topOffsetFixed &&
|
|
typeof modalRectangleTop === 'number' &&
|
|
hasBeenOpened && {
|
|
alignItems: 'flex-start',
|
|
},
|
|
isOpen && classNames.isOpen,
|
|
isVisible && {
|
|
opacity: 1,
|
|
},
|
|
isVisible &&
|
|
!isModeless && {
|
|
pointerEvents: 'auto',
|
|
},
|
|
className,
|
|
],
|
|
main: [
|
|
classNames.main,
|
|
{
|
|
boxShadow: effects.elevation64,
|
|
borderRadius: effects.roundedCorner2,
|
|
backgroundColor: palette.white,
|
|
boxSizing: 'border-box',
|
|
position: 'relative',
|
|
textAlign: 'left',
|
|
outline: '3px solid transparent',
|
|
maxHeight: 'calc(100% - 32px)',
|
|
maxWidth: 'calc(100% - 32px)',
|
|
minHeight: '176px',
|
|
minWidth: '288px',
|
|
overflowY: 'auto',
|
|
zIndex: isModeless ? Styling_1.ZIndexes.Layer : undefined,
|
|
},
|
|
isModeless && {
|
|
pointerEvents: 'auto',
|
|
},
|
|
topOffsetFixed &&
|
|
typeof modalRectangleTop === 'number' &&
|
|
hasBeenOpened && {
|
|
top: modalRectangleTop,
|
|
},
|
|
isDefaultDragHandle && {
|
|
cursor: 'move',
|
|
},
|
|
containerClassName,
|
|
],
|
|
scrollableContent: [
|
|
classNames.scrollableContent,
|
|
{
|
|
overflowY: 'auto',
|
|
flexGrow: 1,
|
|
maxHeight: '100vh',
|
|
selectors: (_a = {},
|
|
_a['@supports (-webkit-overflow-scrolling: touch)'] = {
|
|
maxHeight: windowInnerHeight,
|
|
},
|
|
_a),
|
|
},
|
|
scrollableContentClassName,
|
|
],
|
|
layer: isModeless && [layerClassName, classNames.layer, { pointerEvents: 'none' }],
|
|
keyboardMoveIconContainer: {
|
|
position: 'absolute',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
padding: '3px 0px',
|
|
},
|
|
keyboardMoveIcon: {
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
fontSize: fonts.xLargePlus.fontSize,
|
|
width: '24px',
|
|
},
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
//# sourceMappingURL=Modal.styles.js.map
|