From f42da4220020617266887bfdf58ce9cb187d684c Mon Sep 17 00:00:00 2001 From: Hossein Dehnokhalaji Date: Sat, 8 May 2021 04:28:27 +0100 Subject: [PATCH 1/4] SnackbarContainer is in charge --- src/SnackbarContainer.tsx | 70 ++++++++++++++++++++++++++++++--------- 1 file changed, 54 insertions(+), 16 deletions(-) diff --git a/src/SnackbarContainer.tsx b/src/SnackbarContainer.tsx index 0c40e50f..3e37a4b4 100644 --- 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 = (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, ); From beab9477b90478b9c1c269069a228a6565eb1d25 Mon Sep 17 00:00:00 2001 From: Hossein Dehnokhalaji Date: Sat, 8 May 2021 04:29:46 +0100 Subject: [PATCH 2/4] Fixes #373 - Remove collapse customisation --- src/SnackbarItem/SnackbarItem.tsx | 26 ++------------------------ src/SnackbarItem/SnackbarItem.util.ts | 12 ------------ 2 files changed, 2 insertions(+), 36 deletions(-) diff --git a/src/SnackbarItem/SnackbarItem.tsx b/src/SnackbarItem/SnackbarItem.tsx index ab02e2bf..97ea954b 100644 --- a/src/SnackbarItem/SnackbarItem.tsx +++ b/src/SnackbarItem/SnackbarItem.tsx @@ -3,8 +3,8 @@ import clsx from 'clsx'; import { withStyles, WithStyles, createStyles, Theme, emphasize } from '@material-ui/core/styles'; import Collapse from '@material-ui/core/Collapse'; import SnackbarContent from '../SnackbarContent'; -import { getTransitionDirection, omitNonCollapseKeys } from './SnackbarItem.util'; -import { allClasses, REASONS, SNACKBAR_INDENTS, objectMerge, DEFAULTS, transformer } from '../utils/constants'; +import { getTransitionDirection } from './SnackbarItem.util'; +import { allClasses, REASONS, objectMerge, DEFAULTS, transformer } from '../utils/constants'; import { SharedProps, RequiredBy, TransitionHandlerProps, SnackbarProviderProps as ProviderProps } from '../index'; import defaultIconVariants from '../utils/defaultIconVariants'; import createChainedFunction from '../utils/createChainedFunction'; @@ -65,27 +65,6 @@ const styles = (theme: Theme) => { bottom: 0, left: 0, }, - collapseContainer: { - [theme.breakpoints.down('xs')]: { - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - }, - }, - collapseWrapper: { - transition: theme.transitions.create(['margin-bottom'], { easing: 'ease' }), - marginTop: SNACKBAR_INDENTS.snackbar.default, - marginBottom: SNACKBAR_INDENTS.snackbar.default, - }, - collapseWrapperDense: { - marginTop: SNACKBAR_INDENTS.snackbar.dense, - marginBottom: SNACKBAR_INDENTS.snackbar.dense, - }, - collapseWrapperInner: { - width: 'auto', - [theme.breakpoints.down('xs')]: { - width: '100%', - }, - }, }); } @@ -214,7 +193,6 @@ const SnackbarItem: React.FC = ({ classes, ...props }) => { unmountOnExit timeout={175} in={collapsed} - classes={omitNonCollapseKeys(classes, dense)} onExited={callbacks.onExited} > {/* @ts-ignore */} diff --git a/src/SnackbarItem/SnackbarItem.util.ts b/src/SnackbarItem/SnackbarItem.util.ts index 4944eb72..f13493f3 100644 --- a/src/SnackbarItem/SnackbarItem.util.ts +++ b/src/SnackbarItem/SnackbarItem.util.ts @@ -1,7 +1,4 @@ -import clsx from 'clsx'; -import { SnackbarItemProps } from './SnackbarItem'; import { Snack } from '../SnackbarProvider'; -import { SnackbarProviderProps } from '..'; const DIRECTION = { right: 'left', @@ -17,12 +14,3 @@ export const getTransitionDirection = (anchorOrigin: Snack['anchorOrigin']): Dir } return DIRECTION[anchorOrigin.vertical]; }; - -/** - * Omit all class keys except what we need for collapse component - */ -export const omitNonCollapseKeys = (classes: SnackbarItemProps['classes'], dense: SnackbarProviderProps['dense']): { container: string; wrapper: string; wrapperInner: string; } => ({ - container: classes.collapseContainer, - wrapper: clsx(classes.collapseWrapper, { [classes.collapseWrapperDense]: dense }), - wrapperInner: classes.collapseWrapperInner, -}); From 4ad0d020b8835ee40e88fbf4049987fcda09f25c Mon Sep 17 00:00:00 2001 From: Hossein Dehnokhalaji Date: Sat, 8 May 2021 04:32:06 +0100 Subject: [PATCH 3/4] Update Changelog --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa8909b2..1372e9fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ Thanks to all contributers who improved notistack by opening an issue/PR. +### `notistack@1.0.7` +###### May 8, 2021 +* **@whytspace** Multiple Snackbars always left aligned [#373](https://github.com/iamhosseindhv/notistack/issues/373) + + +
+ + ### `notistack@1.0.6` ###### April 18, 2021 * **@rzmz** Snackbars should have equal width on XS screens [#367](https://github.com/iamhosseindhv/notistack/issues/367) From 1806f3080cc16ae7cd469db7c99164ea331f2f16 Mon Sep 17 00:00:00 2001 From: Hossein Dehnokhalaji Date: Sat, 8 May 2021 04:32:10 +0100 Subject: [PATCH 4/4] 1.0.7 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 445801b7..6ecef9fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "notistack", - "version": "1.0.6", + "version": "1.0.7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 130835f4..42dd80a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notistack", - "version": "1.0.6", + "version": "1.0.7", "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other", "main": "dist/index.js", "module": "dist/notistack.esm.js",