@dune2/mantine-notifications
Version:
Mantine notifications system
49 lines (47 loc) • 1.3 kB
JavaScript
'use client';
const transforms = {
left: "translateX(-100%)",
right: "translateX(100%)",
"top-center": "translateY(-100%)",
"bottom-center": "translateY(100%)"
};
const noTransform = {
left: "translateX(0)",
right: "translateX(0)",
"top-center": "translateY(0)",
"bottom-center": "translateY(0)"
};
function getNotificationStateStyles({
state,
maxHeight,
position,
transitionDuration
}) {
const [vertical, horizontal] = position.split("-");
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: noTransform[property]
};
const outState = {
opacity: 0,
maxHeight: 0,
transform: transforms[property]
};
const transitionStyles = {
entering: inState,
entered: inState,
exiting: outState,
exited: outState
};
return { ...commonStyles, ...transitionStyles[state] };
}
export { getNotificationStateStyles };