baseui
Version:
A React Component library implementing the Base design language
221 lines (218 loc) • 6.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledScrollContainer = exports.StyledRoot = exports.StyledOverlay = exports.StyledHeading = exports.StyledBody = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const getPlacementStyles = (placement, gutter) => {
const defaultStyles = {
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto'
};
switch (placement) {
case _constants.PLACEMENT.topLeft:
return {
...defaultStyles,
top: gutter,
left: gutter
};
case _constants.PLACEMENT.topCenter:
return {
...defaultStyles,
top: gutter,
left: '50%',
transform: 'translateX(-50%)'
};
case _constants.PLACEMENT.topRight:
return {
...defaultStyles,
top: gutter,
right: gutter
};
case _constants.PLACEMENT.bottomLeft:
return {
...defaultStyles,
bottom: gutter,
left: gutter
};
case _constants.PLACEMENT.bottomCenter:
return {
...defaultStyles,
bottom: gutter,
left: '50%',
transform: 'translateX(-50%)'
};
case _constants.PLACEMENT.bottomRight:
return {
...defaultStyles,
bottom: gutter,
right: gutter
};
case _constants.PLACEMENT.center:
return {
...defaultStyles,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
};
default:
return defaultStyles;
}
};
const getAnimationStyles = placement => {
const transformValuesByPlacement = {
[_constants.PLACEMENT.topLeft]: ['translateY(16px)', 'translateY(0px)'],
[_constants.PLACEMENT.topCenter]: ['translateX(-50%) translateY(16px)', 'translateX(-50%) translateY(0px)'],
[_constants.PLACEMENT.topRight]: ['translateY(16px)', 'translateY(0px)'],
[_constants.PLACEMENT.bottomLeft]: ['translateY(16px)', 'translateY(0px)'],
[_constants.PLACEMENT.bottomCenter]: ['translateX(-50%) translateY(16px)', 'translateX(-50%) translateY(0px)'],
[_constants.PLACEMENT.bottomRight]: ['translateY(16px)', 'translateY(0px)'],
[_constants.PLACEMENT.center]: ['translateX(-50%) translateY(calc(-50% + 16px))', 'translateX(-50%) translateY(-50%)']
};
return {
animationDuration: '400ms',
animationTimingFunction: 'cubic-bezier(0.22, 1, 0.36, 1)',
animationName: {
from: {
opacity: 0,
transform: transformValuesByPlacement[placement][0]
},
to: {
opacity: 1,
transform: transformValuesByPlacement[placement][1]
}
}
};
};
const DIALOG_WIDTHS = {
[_constants.SIZE.xSmall]: '480px',
[_constants.SIZE.small]: '640px',
[_constants.SIZE.medium]: '800px',
[_constants.SIZE.large]: '100%'
};
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
$theme,
$size,
$placement = _constants.PLACEMENT.center
}) => {
const narrowViewportGutter = '16px';
const wideViewportGutter = '40px';
return {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
position: 'fixed',
maxHeight: `calc(100vh - (2 * ${wideViewportGutter}))`,
maxWidth: `calc(100% - (2 * ${wideViewportGutter}))`,
borderRadius: $theme.borders.radius500,
boxShadow: $theme.lighting.shallowBelow,
backgroundColor: $theme.colors.backgroundPrimary,
color: $theme.colors.contentPrimary,
overflow: 'hidden',
border: 'none',
width: DIALOG_WIDTHS[$size],
...getPlacementStyles($placement, wideViewportGutter),
...getAnimationStyles($placement),
'@media (max-width: 599px)': {
width: `calc(100% - (2 * ${narrowViewportGutter}))`,
maxWidth: 'none',
...getPlacementStyles(_constants.PLACEMENT.bottomCenter, narrowViewportGutter),
...getAnimationStyles(_constants.PLACEMENT.bottomCenter)
}
};
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledOverlay = exports.StyledOverlay = (0, _styles.styled)('div', ({
$theme
}) => ({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: $theme.colors.backgroundOverlay,
animationDuration: '100ms',
animationName: {
from: {
opacity: 0
},
to: {
opacity: 1
}
}
}));
StyledOverlay.displayName = "StyledOverlay";
StyledOverlay.displayName = 'StyledOverlay';
const StyledScrollContainer = exports.StyledScrollContainer = (0, _styles.styled)('div', () => {
return {
flex: 1,
overflowY: 'auto',
position: 'relative',
width: '100%'
};
});
StyledScrollContainer.displayName = "StyledScrollContainer";
function getLineWrapStyle(numHeadingLines) {
if (numHeadingLines === 1) {
return {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
};
}
return {
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: `${numHeadingLines}`,
WebkitBoxOrient: 'vertical'
};
}
const StyledHeading = exports.StyledHeading = (0, _styles.styled)('div',
// @ts-ignore-next-line - TODO: StyledObject does not support whiteSpace property?
({
$theme,
$numHeadingLines = 2
}) => {
return {
position: 'sticky',
top: 0,
paddingTop: $theme.sizing.scale800,
paddingLeft: $theme.sizing.scale800,
paddingRight: $theme.sizing.scale800,
'@media (max-width: 599px)': {
paddingLeft: $theme.sizing.scale600,
paddingRight: $theme.sizing.scale600
},
backgroundColor: $theme.colors.backgroundPrimary,
...getLineWrapStyle($numHeadingLines),
...$theme.typography.HeadingMedium
};
});
StyledHeading.displayName = "StyledHeading";
StyledHeading.displayName = 'StyledHeading';
const StyledBody = exports.StyledBody = (0, _styles.styled)('div', ({
$theme
}) => {
return {
marginTop: $theme.sizing.scale300,
marginBottom: $theme.sizing.scale800,
paddingLeft: $theme.sizing.scale800,
paddingRight: $theme.sizing.scale800,
'@media (max-width: 599px)': {
paddingLeft: $theme.sizing.scale600,
paddingRight: $theme.sizing.scale600
},
...$theme.typography.ParagraphLarge
};
});
StyledBody.displayName = "StyledBody";
StyledBody.displayName = 'StyledBody';