SnackbarContainer is in charge

iamhosseindhv · May 8, 2021 · f42da42 · f42da42
1 parent fe4b7c8
commit f42da42
Showing 1 changed file with 54 additions and 16 deletions.
diff --git a/src/SnackbarContainer.tsx b/src/SnackbarContainer.tsx
@@ -4,37 +4,71 @@ import { makeStyles } from '@material-ui/core/styles';
 import { SNACKBAR_INDENTS } from './utils/constants';
 import { SnackbarProviderProps } from '.';
 
-const useStyle = makeStyles(theme => ({
+const collapse = {
+    container: '& > .MuiCollapse-container',
+    wrapper: '& > .MuiCollapse-container > .MuiCollapse-wrapper',
+};
+
+const useStyle = makeStyles((theme) => ({
     root: {
         boxSizing: 'border-box',
         display: 'flex',
         maxHeight: '100%',
-        maxWidth: '100%',
         position: 'fixed',
-        flexDirection: 'column',
         zIndex: theme.zIndex.snackbar,
         height: 'auto',
         width: 'auto',
-        minWidth: 288,
-        transition: theme.transitions.create(['top', 'right', 'bottom', 'left'], { easing: 'ease' }),
+        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: `${SNACKBAR_INDENTS.snackbar.default}px 0px`,
+        },
+        maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.default * 2}px)`,
         [theme.breakpoints.down('xs')]: {
-            left: '0 !important',
-            right: '0 !important',
+            left: '16px',
+            right: '16px',
             width: '100%',
+            maxWidth: 'calc(100% - 32px)',
         },
     },
-    reverseColumns: { flexDirection: 'column-reverse' },
 
-    top: { top: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default },
+    rootDense: {
+        maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.dense * 2}px)`,
+        [collapse.wrapper]: {
+            padding: `${SNACKBAR_INDENTS.snackbar.dense}px 0px`,
+        },
+    },
+
+    top: {
+        top: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,
+        flexDirection: 'column',
+    },
     topDense: { top: SNACKBAR_INDENTS.view.dense - SNACKBAR_INDENTS.snackbar.dense },
 
-    bottom: { bottom: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default },
+    bottom: {
+        bottom: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,
+        flexDirection: 'column-reverse',
+    },
     bottomDense: { bottom: SNACKBAR_INDENTS.view.dense - SNACKBAR_INDENTS.snackbar.dense },
 
-    left: { left: SNACKBAR_INDENTS.view.default },
+    left: {
+        left: SNACKBAR_INDENTS.view.default,
+        [theme.breakpoints.up('sm')]: {
+            alignItems: 'flex-start',
+        },
+    },
     leftDense: { left: SNACKBAR_INDENTS.view.dense },
 
-    right: { right: SNACKBAR_INDENTS.view.default },
+    right: {
+        right: SNACKBAR_INDENTS.view.default,
+        [theme.breakpoints.up('sm')]: {
+            alignItems: 'flex-end',
+        },
+    },
     rightDense: { right: SNACKBAR_INDENTS.view.dense },
 
     center: {
@@ -43,6 +77,9 @@ const useStyle = makeStyles(theme => ({
         [theme.breakpoints.down('xs')]: {
             transform: 'translateX(0)',
         },
+        [theme.breakpoints.up('sm')]: {
+            alignItems: 'center',
+        },
     },
 }));
 
@@ -59,14 +96,15 @@ const SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {
     const { className, anchorOrigin, dense, ...other } = props;
 
     const combinedClassname = clsx(
-        classes.root,
         classes[anchorOrigin.vertical],
         classes[anchorOrigin.horizontal],
         // @ts-ignore
-        classes[`${anchorOrigin.vertical}${dense ? 'Dense' : ''}`],
+        { [classes[`${anchorOrigin.vertical}Dense`]]: dense },
+        // @ts-ignore
+        { [classes[`${anchorOrigin.horizontal}Dense`]]: dense },
         // @ts-ignore
-        classes[`${anchorOrigin.horizontal}${dense ? 'Dense' : ''}`],
-        { [classes.reverseColumns]: anchorOrigin.vertical === 'bottom' },
+        { [classes.rootDense]: dense },
+        classes.root, // root should come after others to override maxWidth
         className,
     );