notistack-v2-maintained
Version:
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
110 lines (109 loc) • 4.51 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
const styles_1 = require("@mui/material/styles");
const clsx_1 = __importDefault(require("clsx"));
const react_1 = require("react");
const constants_1 = require("./constants");
const collapse = {
// Material-UI 4.12.x and above uses MuiCollapse-root; earlier versions use
// Mui-Collapse-container. https://github.com/mui-org/material-ui/pull/24084
container: "& > .MuiCollapse-container, & > .MuiCollapse-root",
wrapper: "& > .MuiCollapse-container > .MuiCollapse-wrapper, & > .MuiCollapse-root > .MuiCollapse-wrapper"
};
const xsWidthMargin = 16;
const componentName = "SnackbarContainer";
const classes = {
root: `${componentName}-root`,
rootDense: `${componentName}-rootDense`,
top: `${componentName}-top`,
bottom: `${componentName}-bottom`,
left: `${componentName}-left`,
right: `${componentName}-right`,
center: `${componentName}-center`
};
const Root = (0, styles_1.styled)("div")(({ theme }) => ({
[`&.${classes.root}`]: {
boxSizing: "border-box",
display: "flex",
maxHeight: "100%",
position: "fixed",
zIndex: theme.zIndex.snackbar,
height: "auto",
width: "auto",
transition: "top 300ms ease 0ms, right 300ms ease 0ms, bottom 300ms ease 0ms, left 300ms ease 0ms, margin 300ms ease 0ms, max-width 300ms ease 0ms",
// container itself is invisible and should not block clicks, clicks should be passed to its children
pointerEvents: "none",
[collapse.container]: {
pointerEvents: "all"
},
[collapse.wrapper]: {
padding: `${constants_1.SNACKBAR_INDENTS.snackbar.default}px 0px`,
transition: "padding 300ms ease 0ms"
},
maxWidth: `calc(100% - ${constants_1.SNACKBAR_INDENTS.view.default * 2}px)`,
[theme.breakpoints.down("sm")]: {
width: "100%",
maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`
}
},
[`&.${classes.rootDense}`]: {
[collapse.wrapper]: {
padding: `${constants_1.SNACKBAR_INDENTS.snackbar.dense}px 0px`
}
},
[`&.${classes.top}`]: {
top: constants_1.SNACKBAR_INDENTS.view.default - constants_1.SNACKBAR_INDENTS.snackbar.default,
flexDirection: "column"
},
[`&.${classes.bottom}`]: {
bottom: constants_1.SNACKBAR_INDENTS.view.default - constants_1.SNACKBAR_INDENTS.snackbar.default,
flexDirection: "column-reverse"
},
[`&.${classes.left}`]: {
left: constants_1.SNACKBAR_INDENTS.view.default,
[theme.breakpoints.up("sm")]: {
alignItems: "flex-start"
},
[theme.breakpoints.down("sm")]: {
left: `${xsWidthMargin}px`
}
},
[`&.${classes.right}`]: {
right: constants_1.SNACKBAR_INDENTS.view.default,
[theme.breakpoints.up("sm")]: {
alignItems: "flex-end"
},
[theme.breakpoints.down("sm")]: {
right: `${xsWidthMargin}px`
}
},
[`&.${classes.center}`]: {
left: "50%",
transform: "translateX(-50%)",
[theme.breakpoints.up("sm")]: {
alignItems: "center"
}
}
}));
const SnackbarContainer = (props) => {
const { className, anchorOrigin, dense } = props, other = __rest(props, ["className", "anchorOrigin", "dense"]);
const combinedClassname = (0, clsx_1.default)(classes[anchorOrigin.vertical], classes[anchorOrigin.horizontal], { [classes.rootDense]: dense }, classes.root, // root should come after others to override maxWidth
className);
return (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: combinedClassname }, other));
};
exports.default = (0, react_1.memo)(SnackbarContainer);