From b6699930b9b820f0d26790f6acfec447c693f10e Mon Sep 17 00:00:00 2001 From: Jae Bradley Date: Mon, 19 Oct 2020 13:02:02 -0400 Subject: [PATCH 1/6] [docs] Add ModalProps documentation to Drawer demo --- docs/src/pages/components/drawers/drawers.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/src/pages/components/drawers/drawers.md b/docs/src/pages/components/drawers/drawers.md index 0c5661cde5416b..43651f00b5ccaa 100644 --- a/docs/src/pages/components/drawers/drawers.md +++ b/docs/src/pages/components/drawers/drawers.md @@ -24,6 +24,17 @@ It closes when an item is selected, handled by controlling the `open` prop. {{"demo": "pages/components/drawers/TemporaryDrawer.js"}} +To ensure a temporary drawer is not unmounted, specify the `ModalProps` prop like + +```jsx + +```` + ### Swipeable You can make the drawer swipeable with the `SwipeableDrawer` component. From 9c442711b592567a0094c4ce1fcc6341a07f11de Mon Sep 17 00:00:00 2001 From: Jae Bradley Date: Mon, 19 Oct 2020 13:29:49 -0400 Subject: [PATCH 2/6] [style] prettier linting fixes --- docs/src/pages/components/drawers/drawers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/drawers/drawers.md b/docs/src/pages/components/drawers/drawers.md index 43651f00b5ccaa..83d8a229fb4e46 100644 --- a/docs/src/pages/components/drawers/drawers.md +++ b/docs/src/pages/components/drawers/drawers.md @@ -30,10 +30,10 @@ To ensure a temporary drawer is not unmounted, specify the `ModalProps` prop lik -```` +``` ### Swipeable From 383e22ca9bac674a8dc1edbebf2425609143fe41 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 19 Oct 2020 23:32:38 +0200 Subject: [PATCH 3/6] add section for modal --- docs/src/pages/components/dialogs/dialogs.md | 4 ++ .../components/modal/KeepMountedModal.js | 66 ++++++++++++++++++ .../components/modal/KeepMountedModal.tsx | 68 +++++++++++++++++++ docs/src/pages/components/modal/modal.md | 15 ++++ 4 files changed, 153 insertions(+) create mode 100644 docs/src/pages/components/modal/KeepMountedModal.js create mode 100644 docs/src/pages/components/modal/KeepMountedModal.tsx diff --git a/docs/src/pages/components/dialogs/dialogs.md b/docs/src/pages/components/dialogs/dialogs.md index 07511b385fd7a4..5549bf69f13767 100644 --- a/docs/src/pages/components/dialogs/dialogs.md +++ b/docs/src/pages/components/dialogs/dialogs.md @@ -126,6 +126,10 @@ Try the demo below to see what we mean: {{"demo": "pages/components/dialogs/ScrollDialog.js"}} +## Performance + +Follow the [Modal performance section](/components/modal/#performance). + ## Limitations Follow the [Modal limitations section](/components/modal/#limitations). diff --git a/docs/src/pages/components/modal/KeepMountedModal.js b/docs/src/pages/components/modal/KeepMountedModal.js new file mode 100644 index 00000000000000..a4846043487880 --- /dev/null +++ b/docs/src/pages/components/modal/KeepMountedModal.js @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Modal from '@material-ui/core/Modal'; + +function rand() { + return Math.round(Math.random() * 20) - 10; +} + +function getModalStyle() { + const top = 50 + rand(); + const left = 50 + rand(); + + return { + top: `${top}%`, + left: `${left}%`, + transform: `translate(-${top}%, -${left}%)`, + }; +} + +const useStyles = makeStyles((theme) => ({ + paper: { + position: 'absolute', + width: 400, + backgroundColor: theme.palette.background.paper, + border: '2px solid #000', + boxShadow: theme.shadows[5], + padding: theme.spacing(2, 4, 3), + }, +})); + +export default function KeepMountedModal() { + const classes = useStyles(); + // getModalStyle is not a pure function, we roll the style only on the first render + const [modalStyle] = React.useState(getModalStyle); + const [open, setOpen] = React.useState(false); + + const handleOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( +
+ + +
+

Text in a modal

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula. +

+
+ +
+ ); +} diff --git a/docs/src/pages/components/modal/KeepMountedModal.tsx b/docs/src/pages/components/modal/KeepMountedModal.tsx new file mode 100644 index 00000000000000..8289849b26a41a --- /dev/null +++ b/docs/src/pages/components/modal/KeepMountedModal.tsx @@ -0,0 +1,68 @@ +import * as React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import Modal from '@material-ui/core/Modal'; + +function rand() { + return Math.round(Math.random() * 20) - 10; +} + +function getModalStyle() { + const top = 50 + rand(); + const left = 50 + rand(); + + return { + top: `${top}%`, + left: `${left}%`, + transform: `translate(-${top}%, -${left}%)`, + }; +} + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + paper: { + position: 'absolute', + width: 400, + backgroundColor: theme.palette.background.paper, + border: '2px solid #000', + boxShadow: theme.shadows[5], + padding: theme.spacing(2, 4, 3), + }, + }), +); + +export default function KeepMountedModal() { + const classes = useStyles(); + // getModalStyle is not a pure function, we roll the style only on the first render + const [modalStyle] = React.useState(getModalStyle); + const [open, setOpen] = React.useState(false); + + const handleOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( +
+ + +
+

Text in a modal

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula. +

+
+ +
+ ); +} diff --git a/docs/src/pages/components/modal/modal.md b/docs/src/pages/components/modal/modal.md index e89a80a601afa4..ef0607dff3a705 100644 --- a/docs/src/pages/components/modal/modal.md +++ b/docs/src/pages/components/modal/modal.md @@ -59,6 +59,21 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react- {{"demo": "pages/components/modal/SpringModal.js"}} +## Performance + +The content of modal is unmounted when closed. +If you need to make the content available to search engines or render expensive component trees inside your modal while optimizing for interaction responsiveness +it might be a good idea to change this default behavior by enabling the `keepMounted` prop: + +```jsx + +``` + +{{"demo": "pages/components/modal/KeepMountedModal.js", "defaultCodeOpen": false}} + +As with any performance optimization this is not a silver bullet. Be sure to identify +bottlenecks first and then try out these optimization strategies. + ## Server-side modal React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. From efdd4653b58e94a770ee5db47578ae3f3b1c4bf4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 19 Oct 2020 23:35:18 +0200 Subject: [PATCH 4/6] link modal --- docs/src/pages/components/drawers/drawers.md | 26 +++++++++++--------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/components/drawers/drawers.md b/docs/src/pages/components/drawers/drawers.md index 83d8a229fb4e46..485e48236c9901 100644 --- a/docs/src/pages/components/drawers/drawers.md +++ b/docs/src/pages/components/drawers/drawers.md @@ -24,17 +24,6 @@ It closes when an item is selected, handled by controlling the `open` prop. {{"demo": "pages/components/drawers/TemporaryDrawer.js"}} -To ensure a temporary drawer is not unmounted, specify the `ModalProps` prop like - -```jsx - -``` - ### Swipeable You can make the drawer swipeable with the `SwipeableDrawer` component. @@ -59,6 +48,21 @@ const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent); ; ``` +### Keep mounted + +To ensure a temporary drawer is not unmounted, specify the `ModalProps` prop like + +```jsx + +``` + +More details in the [Modal performance section](/components/modal/#performance). + ## Responsive drawer The `Hidden` responsive helper component allows showing different types of drawer depending on the screen width. From 50385bb4b749b83b1f581ecb209c1bf6be78b379 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 20 Oct 2020 10:27:21 +0200 Subject: [PATCH 5/6] no screenshots --- test/regressions/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/regressions/index.js b/test/regressions/index.js index cb51d178abc442..558f56ecd1012a 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -59,7 +59,7 @@ const blacklist = [ 'docs-components-modal/SimpleModal.png', // Needs interaction 'docs-components-modal/SpringModal.png', // Needs interaction 'docs-components-modal/TransitionsModal.png', // Needs interaction - 'docs-components-modal/TransitionsModal.png', // Needs interaction + 'docs-components-modal/KeepMountedModal.png', // Needs interaction 'docs-components-no-ssr/FrameDeferring.png', // Needs interaction 'docs-components-popover/AnchorPlayground.png', // Redux isolation 'docs-components-popover/MouseOverPopover.png', // Needs interaction From cb1e2617e9082f7570d64f4d08b4962aeb99b0e4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 20 Oct 2020 12:18:02 +0200 Subject: [PATCH 6/6] Update docs/src/pages/components/drawers/drawers.md --- docs/src/pages/components/drawers/drawers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/drawers/drawers.md b/docs/src/pages/components/drawers/drawers.md index 485e48236c9901..5fa5fd5f79bd2b 100644 --- a/docs/src/pages/components/drawers/drawers.md +++ b/docs/src/pages/components/drawers/drawers.md @@ -50,7 +50,7 @@ const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent); ### Keep mounted -To ensure a temporary drawer is not unmounted, specify the `ModalProps` prop like +To ensure a temporary drawer is not unmounted, specify the `ModalProps` prop like: ```jsx