@bubbles-ui/notifications
Version:
The Bubbles Design System is Leemonade's open-source design system for products and experiences.
76 lines (75 loc) • 2.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getAutoClose = getAutoClose;
exports.getNotificationStateStyles = getNotificationStateStyles;
exports.getPositionStyles = getPositionStyles;
function getPositionStyles(_ref, containerWidth, spacing, xOffset) {
let [vertical, horizontal] = _ref;
const styles = {};
vertical === 'top' && (styles.top = spacing);
vertical === 'bottom' && (styles.bottom = spacing);
horizontal === 'left' && (styles.left = spacing + xOffset);
horizontal === 'right' && (styles.right = spacing + xOffset);
horizontal === 'center' && (styles.left = `calc(50% - ${containerWidth / 2}px + ${xOffset}px)`);
return styles;
}
const TRANSFORMS = {
left: 'translateX(-100%)',
right: 'translateX(100%)',
'top-center': 'translateY(-100%)',
'bottom-center': 'translateY(100%)'
};
const NO_TRANSFORM = {
left: 'translateX(0)',
right: 'translateX(0)',
'top-center': 'translateY(0)',
'bottom-center': 'translateY(0)'
};
function getNotificationStateStyles(_ref2) {
let {
state,
maxHeight,
positioning,
transitionDuration
} = _ref2;
const [vertical, horizontal] = positioning;
const property = horizontal === 'center' ? `${vertical}-center` : horizontal;
const commonStyles = {
opacity: 0,
maxHeight,
transform: TRANSFORMS[property],
transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,
transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear',
transitionProperty: 'opacity, transform, max-height'
};
const inState = {
opacity: 1,
transform: NO_TRANSFORM[property]
};
const outState = {
opacity: 0,
maxHeight: 0,
transform: TRANSFORMS[property]
};
const transitionStyles = {
entering: inState,
entered: inState,
exiting: outState,
exited: outState
};
return {
...commonStyles,
...transitionStyles[state]
};
}
function getAutoClose(autoClose, notification) {
if (typeof notification.autoClose === 'number') {
return notification.autoClose;
}
if (notification.autoClose === false || autoClose === false) {
return false;
}
return autoClose;
}