office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
314 lines • 13.9 kB
JavaScript
define(["require", "exports", "./Panel.types", "../../Styling"], function (require, exports, Panel_types_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// TODO -Issue #5689: Comment in once Button is converted to mergeStyles
// import { IStyleFunctionOrObject } from '../../Utilities';
// import { IButtonStyles, IButtonStyleProps } from '../../Button';
var GlobalClassNames = {
root: 'ms-Panel',
main: 'ms-Panel-main',
commands: 'ms-Panel-commands',
contentInner: 'ms-Panel-contentInner',
scrollableContent: 'ms-Panel-scrollableContent',
navigation: 'ms-Panel-navigation',
closeButton: 'ms-Panel-closeButton ms-PanelAction-close',
header: 'ms-Panel-header',
headerText: 'ms-Panel-headerText',
content: 'ms-Panel-content',
footer: 'ms-Panel-footer',
footerInner: 'ms-Panel-footerInner',
isOpen: 'is-open',
hasCloseButton: 'ms-Panel--hasCloseButton',
smallFluid: 'ms-Panel--smFluid',
smallFixedNear: 'ms-Panel--smLeft',
smallFixedFar: 'ms-Panel--sm',
medium: 'ms-Panel--md',
large: 'ms-Panel--lg',
largeFixed: 'ms-Panel--fixed',
extraLarge: 'ms-Panel--xl',
custom: 'ms-Panel--custom'
};
var panelSize = {
width: {
xs: '272px',
sm: '340px',
md: '643px',
lg: '940px'
},
margin: {
md: '48px',
lg: '428px',
xl: '176px'
}
};
var commandBarHeight = '44px';
var sharedPaddingStyles = {
paddingLeft: '16px',
paddingRight: '16px',
selectors: (_a = {},
_a['@media screen and (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
paddingLeft: '32px',
paddingRight: '32px'
},
_a['@media screen and (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
paddingLeft: '40px',
paddingRight: '40px'
},
_a)
};
// // TODO -Issue #5689: Comment in once Button is converted to mergeStyles
// function getIconButtonStyles(props: IPanelStyleProps): IStyleFunctionOrObject<IButtonStyleProps, IButtonStyles> {
// const { theme } = props;
// return () => ({
// root: {
// height: 'auto',
// width: '44px',
// color: theme.palette.neutralSecondary,
// fontSize: IconFontSizes.large
// },
// rootHovered: {
// color: theme.palette.neutralPrimary
// }
// });
// }
exports.getStyles = function (props) {
var className = props.className, focusTrapZoneClassName = props.focusTrapZoneClassName, hasCloseButton = props.hasCloseButton, headerClassName = props.headerClassName, isAnimating = props.isAnimating, isFooterAtBottom = props.isFooterAtBottom, isFooterSticky = props.isFooterSticky, isOnRightSide = props.isOnRightSide, isOpen = props.isOpen, isHiddenOnDismiss = props.isHiddenOnDismiss, theme = props.theme, type = props.type;
var palette = theme.palette;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
isOpen && classNames.isOpen,
hasCloseButton && classNames.hasCloseButton,
{
pointerEvents: 'none',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
},
!isOpen &&
!isAnimating &&
isHiddenOnDismiss && {
visibility: 'hidden'
},
className
],
overlay: [
{
pointerEvents: 'none',
opacity: 1,
cursor: 'pointer',
transition: "opacity " + Styling_1.AnimationVariables.durationValue3 + " " + Styling_1.AnimationVariables.easeFunction1
},
isOpen && {
cursor: 'pointer',
pointerEvents: 'auto'
},
isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn200,
!isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut200
],
hiddenPanel: [
!isOpen &&
!isAnimating &&
isHiddenOnDismiss && {
visibility: 'hidden'
}
],
main: [
classNames.main,
{
backgroundColor: palette.white,
position: 'absolute',
right: 0,
width: '100%',
bottom: 0,
top: 0,
overflowX: 'hidden',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch',
selectors: (_a = {},
_a['@media (min-width: ' + Styling_1.ScreenWidthMinMedium + 'px)'] = {
borderLeft: "1px solid " + palette.neutralLight,
borderRight: "1px solid " + palette.neutralLight,
pointerEvents: 'auto',
width: panelSize.width.sm,
boxShadow: '-30px 0px 30px -30px rgba(0,0,0,0.2)',
left: 'auto'
},
_a['$root &'] = [
isOpen && {
pointerEvents: 'auto'
},
type === Panel_types_1.PanelType.smallFluid && {
width: '100%'
},
type === Panel_types_1.PanelType.smallFixedNear && {
right: 'auto',
left: 0,
width: panelSize.width.xs,
boxShadow: '30px 0px 30px -30px rgba(0,0,0,0.2)'
},
type === Panel_types_1.PanelType.smallFixedFar && {
width: panelSize.width.xs,
selectors: (_b = {},
_b['@media (min-width: ' + Styling_1.ScreenWidthMinMedium + 'px)'] = {
width: panelSize.width.sm
},
_b)
},
type === Panel_types_1.PanelType.medium && {
selectors: (_c = {},
_c['@media (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
left: panelSize.margin.md,
width: 'auto'
},
_c['@media (min-width: ' + Styling_1.ScreenWidthMinXLarge + 'px)'] = {
left: 'auto',
width: panelSize.width.md
},
_c)
},
(type === Panel_types_1.PanelType.large || type === Panel_types_1.PanelType.largeFixed) && {
selectors: (_d = {},
_d['@media (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
left: panelSize.margin.md,
width: 'auto'
},
_d['@media (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
left: panelSize.margin.lg
},
_d)
},
type === Panel_types_1.PanelType.largeFixed && {
selectors: (_e = {},
_e['@media (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
left: 'auto',
width: panelSize.width.lg
},
_e)
},
type === Panel_types_1.PanelType.extraLarge && {
selectors: (_f = {},
_f['@media (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
left: panelSize.margin.md,
width: 'auto'
},
_f['@media (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
left: panelSize.margin.xl
},
_f)
},
type === Panel_types_1.PanelType.custom && {
maxWidth: '100vw'
}
],
_a)
},
isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40,
isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40,
!isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40,
!isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40,
focusTrapZoneClassName
],
commands: [classNames.commands],
contentInner: [
classNames.contentInner,
{
display: 'flex',
flexDirection: 'column',
minHeight: '100%',
WebkitOverflowScrolling: 'touch',
/* Force hw accelleration on scrollable region */
transform: 'translateZ(0)'
},
hasCloseButton && {
top: commandBarHeight,
minHeight: "calc(100% - " + commandBarHeight + ")"
}
],
scrollableContent: [
classNames.scrollableContent,
{
height: '100%',
overflowY: 'auto',
flexGrow: 1
}
],
navigation: [
classNames.navigation,
{
padding: '0 5px',
height: commandBarHeight,
display: 'flex',
justifyContent: 'flex-end'
}
],
closeButton: [classNames.closeButton],
header: [
classNames.header,
sharedPaddingStyles,
{
margin: '14px 0',
// Ensure that title doesn't shrink if screen is too small
flexGrow: 0,
selectors: (_g = {},
_g['@media (min-width: ' + Styling_1.ScreenWidthMinXLarge + 'px)'] = {
marginTop: '30px'
},
_g)
}
],
headerText: [
classNames.headerText,
Styling_1.DefaultFontStyles.xLarge,
{
color: palette.neutralPrimary,
lineHeight: '32px',
margin: 0
},
headerClassName
],
content: [
classNames.content,
sharedPaddingStyles,
{
marginBottom: 0,
paddingBottom: '20px',
overflowY: 'auto'
},
isFooterAtBottom && {
flexGrow: 1
}
],
footer: [
classNames.footer,
{
// Ensure that footer doesn't shrink if screen is too small
flexGrow: 0,
borderTop: '1px solid transparent',
transition: "opacity " + Styling_1.AnimationVariables.durationValue3 + " " + Styling_1.AnimationVariables.easeFunction2
},
isFooterSticky && {
background: palette.white,
borderTopColor: palette.neutralLight
}
],
footerInner: [
classNames.footerInner,
sharedPaddingStyles,
{
paddingBottom: '20px',
paddingTop: '20px'
}
]
// subComponentStyles: {
// iconButton: getIconButtonStyles(props)
// }
};
var _a, _b, _c, _d, _e, _f, _g;
};
var _a;
});
//# sourceMappingURL=Panel.styles.js.map