diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md index 674fa062c03756..b543e7e59aed69 100644 --- a/docs/pages/api-docs/snackbar.md +++ b/docs/pages/api-docs/snackbar.md @@ -39,17 +39,11 @@ The `MuiSnackbar` name can be used for providing [default props](/customization/ | <span class="prop-name">key</span> | <span class="prop-type">any</span> | | 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. | | <span class="prop-name">message</span> | <span class="prop-type">node</span> | | The message to display. | | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> | | 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`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. | -| <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> | | Callback fired before the transition is entering. | -| <span class="prop-name">onEntered</span> | <span class="prop-type">func</span> | | Callback fired when the transition has entered. | -| <span class="prop-name">onEntering</span> | <span class="prop-type">func</span> | | Callback fired when the transition is entering. | -| <span class="prop-name">onExit</span> | <span class="prop-type">func</span> | | Callback fired before the transition is exiting. | -| <span class="prop-name">onExited</span> | <span class="prop-type">func</span> | | Callback fired when the transition has exited. | -| <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> | | Callback fired when the transition is exiting. | | <span class="prop-name">open</span> | <span class="prop-type">bool</span> | | If `true`, `Snackbar` is open. | | <span class="prop-name">resumeHideDuration</span> | <span class="prop-type">number</span> | | 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. | | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | | <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>| { appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | -| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | | Props applied to the transition element. By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. | +| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the transition element. By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. | The `ref` is forwarded to the root element. diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 7e2fef002229ab..bf08da801c0fa1 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,29 @@ This change affects almost all components where you're using the `component` pro +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} /> ``` +- The onE\* transition props were removed. Use TransitionProps instead. + + ```diff + <Snackbar + - onEnter={onEnter} + - onEntered={onEntered}, + - onEntering={onEntered}, + - onExit={onEntered}, + - onExited={onEntered}, + - onExiting={onEntered} + /> + <Snackbar + + TransitionProps={{ + + onEnter, + + onEntered, + + onEntering, + + onExit, + + onExited, + + onExiting, + + }} + /> + ``` + ### Skeleton - Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns: @@ -274,7 +297,7 @@ This change affects almost all components where you're using the `component` pro -<Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname', }} /> +<Skeleton variant="circular" /> +<Skeleton variant="rectangular" /> - -<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname', }} /> + +<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname', }} /> ``` ### TablePagination @@ -291,6 +314,7 @@ This change affects almost all components where you're using the `component` pro ### Tabs - TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + ```diff -<Tabs onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} /> +<Tabs onChange={(event: React.SyntheticEvent, value: unknown) => {}} /> 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<any>, 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..9f66fbd68a6785 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -6,7 +6,6 @@ import { duration } from '../styles/transitions'; import ClickAwayListener from '../ClickAwayListener'; import useEventCallback from '../utils/useEventCallback'; import capitalize from '../utils/capitalize'; -import createChainedFunction from '../utils/createChainedFunction'; import Grow from '../Grow'; import SnackbarContent from '../SnackbarContent'; @@ -108,12 +107,6 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { disableWindowBlurListener = false, message, onClose, - onEnter, - onEntered, - onEntering, - onExit, - onExited, - onExiting, onMouseEnter, onMouseLeave, open, @@ -123,7 +116,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { enter: duration.enteringScreen, exit: duration.leavingScreen, }, - TransitionProps, + TransitionProps: { onEnter, onExited, ...TransitionProps } = {}, ...other } = props; @@ -191,12 +184,20 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { } }; - const handleExited = () => { + const handleExited = (node) => { setExited(true); + + if (onExited) { + onExited(node); + } }; - const handleEnter = () => { + const handleEnter = (node, isAppearing) => { setExited(false); + + if (onEnter) { + onEnter(node, isAppearing); + } }; React.useEffect(() => { @@ -234,14 +235,10 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { <TransitionComponent appear in={open} - onEnter={createChainedFunction(handleEnter, onEnter)} - onEntered={onEntered} - onEntering={onEntering} - onExit={onExit} - onExited={createChainedFunction(handleExited, onExited)} - onExiting={onExiting} timeout={transitionDuration} direction={vertical === 'top' ? 'down' : 'up'} + onEnter={handleEnter} + onExited={handleExited} {...TransitionProps} > {children || <SnackbarContent message={message} action={action} {...ContentProps} />} @@ -323,30 +320,6 @@ Snackbar.propTypes = { * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. */ onClose: PropTypes.func, - /** - * Callback fired before the transition is entering. - */ - onEnter: PropTypes.func, - /** - * Callback fired when the transition has entered. - */ - onEntered: PropTypes.func, - /** - * Callback fired when the transition is entering. - */ - onEntering: PropTypes.func, - /** - * Callback fired before the transition is exiting. - */ - onExit: PropTypes.func, - /** - * Callback fired when the transition has exited. - */ - onExited: PropTypes.func, - /** - * Callback fired when the transition is exiting. - */ - onExiting: PropTypes.func, /** * @ignore */ diff --git a/packages/material-ui/src/Snackbar/Snackbar.test.js b/packages/material-ui/src/Snackbar/Snackbar.test.js index ac6a656d7a3a7c..0522081b673368 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.test.js +++ b/packages/material-ui/src/Snackbar/Snackbar.test.js @@ -76,7 +76,7 @@ describe('<Snackbar />', () => { <Snackbar open={false} onClose={handleClose} - onExited={handleExited} + TransitionProps={{ onExited: handleExited }} message="message" autoHideDuration={duration} transitionDuration={duration / 2}