fix the fade transition at the same time

mui · Feb 12, 2023 · e90363a · e90363a
1 parent a7fa1eb
commit e90363a
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 120 deletions.
diff --git a/docs/data/base/components/modal/SpringModal.js b/docs/data/base/components/modal/SpringModal.js
@@ -1,27 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { Box, styled } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 import { useSpring, animated } from '@react-spring/web';
 
-const BackdropUnstyled = React.forwardRef((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
-});
-
-BackdropUnstyled.propTypes = {
-  className: PropTypes.string.isRequired,
-  open: PropTypes.bool,
-};
-
 const Modal = styled(ModalUnstyled)`
   position: fixed;
   z-index: 1300;
@@ -34,6 +17,15 @@ const Modal = styled(ModalUnstyled)`
   justify-content: center;
 `;
 
+const BackdropUnstyled = React.forwardRef((props, ref) => {
+  const { open, ...other } = props;
+  return <Fade ref={ref} in={open} {...other} />;
+});
+
+BackdropUnstyled.propTypes = {
+  open: PropTypes.bool.isRequired,
+};
+
 const Backdrop = styled(BackdropUnstyled)`
   z-index: -1;
   position: fixed;
@@ -52,12 +44,12 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     to: { opacity: open ? 1 : 0 },
     onStart: () => {
       if (open && onEnter) {
-        onEnter();
+        onEnter(null, true);
       }
     },
     onRest: () => {
       if (!open && onExited) {
-        onExited();
+        onExited(null, true);
       }
     },
   });
@@ -70,8 +62,8 @@ const Fade = React.forwardRef(function Fade(props, ref) {
 });
 
 Fade.propTypes = {
-  children: PropTypes.element,
-  in: PropTypes.bool.isRequired,
+  children: PropTypes.element.isRequired,
+  in: PropTypes.bool,
   onEnter: PropTypes.func,
   onExited: PropTypes.func,
 };
@@ -107,7 +99,7 @@ export default function SpringModal() {
         <Fade in={open}>
           <Box sx={style}>
             <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: '16px' }}>
+            <span id="spring-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
@@ -1,24 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import { Box, styled, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 import { useSpring, animated } from '@react-spring/web';
 
-const BackdropUnstyled = React.forwardRef<
-  HTMLDivElement,
-  { open?: boolean; className: string }
->((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
-});
-
 const Modal = styled(ModalUnstyled)`
   position: fixed;
   z-index: 1300;
@@ -31,6 +16,14 @@ const Modal = styled(ModalUnstyled)`
   justify-content: center;
 `;
 
+const BackdropUnstyled = React.forwardRef<
+  HTMLDivElement,
+  { children: React.ReactElement; open: boolean }
+>((props, ref) => {
+  const { open, ...other } = props;
+  return <Fade ref={ref} in={open} {...other} />;
+});
+
 const Backdrop = styled(BackdropUnstyled)`
   z-index: -1;
   position: fixed;
@@ -43,10 +36,11 @@ const Backdrop = styled(BackdropUnstyled)`
 `;
 
 interface FadeProps {
-  children?: React.ReactElement;
-  in: boolean;
-  onEnter?: () => {};
-  onExited?: () => {};
+  children: React.ReactElement;
+  in?: boolean;
+  onClick?: any;
+  onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
+  onExited?: (node: HTMLElement, isAppearing: boolean) => void;
 }
 
 const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {
@@ -56,12 +50,12 @@ const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, re
     to: { opacity: open ? 1 : 0 },
     onStart: () => {
       if (open && onEnter) {
-        onEnter();
+        onEnter(null as any, true);
       }
     },
     onRest: () => {
       if (!open && onExited) {
-        onExited();
+        onExited(null as any, true);
       }
     },
   });
@@ -104,7 +98,7 @@ export default function SpringModal() {
         <Fade in={open}>
           <Box sx={style}>
             <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: '16px' }}>
+            <span id="spring-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

diff --git a/docs/data/base/components/modal/TransitionsModal.js b/docs/data/base/components/modal/TransitionsModal.js
@@ -1,48 +1,44 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { Box, styled } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
 import Button from '@mui/base/ButtonUnstyled';
 
 const BackdropUnstyled = React.forwardRef((props, ref) => {
-  const { open, className, ...other } = props;
+  const { open, ...other } = props;
   return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
+    <Fade ref={ref} in={open}>
+      <div {...other} />
+    </Fade>
   );
 });
 
 BackdropUnstyled.propTypes = {
-  className: PropTypes.string.isRequired,
   open: PropTypes.bool,
 };
 
-const Modal = styled(ModalUnstyled)`
+const Backdrop = styled(BackdropUnstyled)`
+  z-index: -1;
   position: fixed;
-  z-index: 1300;
   right: 0;
   bottom: 0;
   top: 0;
   left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-tap-highlight-color: transparent;
 `;
 
-const Backdrop = styled(BackdropUnstyled)`
-  z-index: -1;
+const Modal = styled(ModalUnstyled)`
   position: fixed;
+  z-index: 1300;
   right: 0;
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const style = (theme) => ({
@@ -73,10 +69,10 @@ export default function TransitionsModal() {
         closeAfterTransition
         slots={{ backdrop: Backdrop }}
       >
-        <Fade in={open} timeout={300}>
+        <Fade in={open}>
           <Box sx={style}>
             <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: '16px' }}>
+            <span id="transition-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

diff --git a/docs/data/base/components/modal/TransitionsModal.tsx b/docs/data/base/components/modal/TransitionsModal.tsx
@@ -1,45 +1,41 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import { Box, styled, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
 import Button from '@mui/base/ButtonUnstyled';
 
-const BackdropUnstyled = React.forwardRef<
-  HTMLDivElement,
-  { open?: boolean; className: string }
->((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
-});
+const BackdropUnstyled = React.forwardRef<HTMLDivElement, { open?: boolean }>(
+  (props, ref) => {
+    const { open, ...other } = props;
+    return (
+      <Fade ref={ref} in={open}>
+        <div {...other} />
+      </Fade>
+    );
+  },
+);
 
-const Modal = styled(ModalUnstyled)`
+const Backdrop = styled(BackdropUnstyled)`
+  z-index: -1;
   position: fixed;
-  z-index: 1300;
   right: 0;
   bottom: 0;
   top: 0;
   left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-tap-highlight-color: transparent;
 `;
 
-const Backdrop = styled(BackdropUnstyled)`
-  z-index: -1;
+const Modal = styled(ModalUnstyled)`
   position: fixed;
+  z-index: 1300;
   right: 0;
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const style = (theme: Theme) => ({
@@ -70,10 +66,10 @@ export default function TransitionsModal() {
         closeAfterTransition
         slots={{ backdrop: Backdrop }}
       >
-        <Fade in={open} timeout={300}>
+        <Fade in={open}>
           <Box sx={style}>
             <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: '16px' }}>
+            <span id="transition-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

diff --git a/docs/data/material/components/modal/SpringModal.js b/docs/data/material/components/modal/SpringModal.js
@@ -8,32 +8,33 @@ import Typography from '@mui/material/Typography';
 import { useSpring, animated } from '@react-spring/web';
 
 const Fade = React.forwardRef(function Fade(props, ref) {
-  const { in: open, children, onEnter, onExited, ...other } = props;
+  const { in: open, children, onEnter, onExited, onClick, ...other } = props;
   const style = useSpring({
     from: { opacity: 0 },
     to: { opacity: open ? 1 : 0 },
     onStart: () => {
       if (open && onEnter) {
-        onEnter();
+        onEnter(null, true);
       }
     },
     onRest: () => {
       if (!open && onExited) {
-        onExited();
+        onExited(null, true);
       }
     },
   });
 
   return (
     <animated.div ref={ref} style={style} {...other}>
-      {children}
+      {React.cloneElement(children, { onClick })}
     </animated.div>
   );
 });
 
 Fade.propTypes = {
-  children: PropTypes.element,
-  in: PropTypes.bool.isRequired,
+  children: PropTypes.element.isRequired,
+  in: PropTypes.bool,
+  onClick: PropTypes.any,
   onEnter: PropTypes.func,
   onExited: PropTypes.func,
 };
@@ -64,9 +65,11 @@ export default function SpringModal() {
         open={open}
         onClose={handleClose}
         closeAfterTransition
-        BackdropComponent={Backdrop}
-        BackdropProps={{
-          timeout: 500,
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            TransitionComponent: Fade,
+          },
         }}
       >
         <Fade in={open}>