diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md index 674fa062c03756..16e6a8c63f54a3 100644 --- a/docs/pages/api-docs/snackbar.md +++ b/docs/pages/api-docs/snackbar.md @@ -39,12 +39,6 @@ The `MuiSnackbar` name can be used for providing [default props](/customization/ | key | any | | When displaying multiple consecutive Snackbars from a parent rendering a single <Snackbar/>, add the key prop to ensure independent treatment of each message. e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled. | | message | node | | The message to display. | | onClose | func | | Callback fired when the component requests to be closed. Typically `onClose` is used to set state in the parent component, which is used to control the `Snackbar` `open` prop. The `reason` parameter can optionally be used to control the response to `onClose`, for example ignoring `clickaway`.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. | -| onEnter | func | | Callback fired before the transition is entering. | -| onEntered | func | | Callback fired when the transition has entered. | -| onEntering | func | | Callback fired when the transition is entering. | -| onExit | func | | Callback fired before the transition is exiting. | -| onExited | func | | Callback fired when the transition has exited. | -| onExiting | func | | Callback fired when the transition is exiting. | | open | bool | | If `true`, `Snackbar` is open. | | resumeHideDuration | number | | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` prop isn't specified, it does nothing. If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. | | TransitionComponent | elementType | Grow | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 7e2fef002229ab..28e3d7cfa4ea9c 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -256,7 +256,7 @@ This change affects almost all components where you're using the `component` pro ### Snackbar - The notification now displays at the bottom left on large screens. - It better matches the behavior of Gmail, Google Keep, material.io, etc. + This better matches the behavior of Gmail, Google Keep, material.io, etc. You can restore the previous behavior with: ```diff @@ -264,6 +264,28 @@ This change affects almost all components where you're using the `component` pro + ``` +- The onE\* transition props were removed. Use TransitionProps instead. + +````diff + + + ### Skeleton - Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns: @@ -275,7 +297,7 @@ This change affects almost all components where you're using the `component` pro + + - - ``` +```` ### TablePagination diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts index ae328acae85a18..e2e256d080be12 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.d.ts +++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts @@ -71,30 +71,6 @@ export interface SnackbarProps * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. */ onClose?: (event: React.SyntheticEvent, reason: SnackbarCloseReason) => void; - /** - * Callback fired before the transition is entering. - */ - onEnter?: TransitionHandlerProps['onEnter']; - /** - * Callback fired when the transition has entered. - */ - onEntered?: TransitionHandlerProps['onEntered']; - /** - * Callback fired when the transition is entering. - */ - onEntering?: TransitionHandlerProps['onEntering']; - /** - * Callback fired before the transition is exiting. - */ - onExit?: TransitionHandlerProps['onExit']; - /** - * Callback fired when the transition has exited. - */ - onExited?: TransitionHandlerProps['onExited']; - /** - * Callback fired when the transition is exiting. - */ - onExiting?: TransitionHandlerProps['onExiting']; /** * If `true`, `Snackbar` is open. */ diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index a2424596e05cf1..c0a10d15223911 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -108,12 +108,6 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { disableWindowBlurListener = false, message, onClose, - onEnter, - onEntered, - onEntering, - onExit, - onExited, - onExiting, onMouseEnter, onMouseLeave, open, @@ -218,6 +212,13 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { return null; } + if (TransitionProps !== undefined && TransitionProps.onEnter !== undefined) { + TransitionProps.onEnter = createChainedFunction(handleEnter, TransitionProps.onEnter); + } + if (TransitionProps !== undefined && TransitionProps.onExited !== undefined) { + TransitionProps.onExited = createChainedFunction(handleExited, TransitionProps.onExited); + } + return (
', () => {