From 11122198cec074bec8d8576d090bce431d576421 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 21 Apr 2020 00:09:45 +0200 Subject: [PATCH 1/5] [docs] Don't need to pass container --- docs/src/modules/components/DemoSandboxed.js | 2 -- .../components/drawers/ResponsiveDrawer.js | 18 ++++-------------- .../components/drawers/ResponsiveDrawer.tsx | 15 ++++----------- 3 files changed, 8 insertions(+), 27 deletions(-) diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index 9375e3a84b1c7f..9f7d60ee95c72f 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -41,7 +41,6 @@ function DemoFrame(props) { insertionPoint: instanceRef.current.contentWindow['demo-frame-jss'], }), sheetsManager: new Map(), - container: instanceRef.current.contentDocument.body, window: () => instanceRef.current.contentWindow, }); }; @@ -64,7 +63,6 @@ function DemoFrame(props) { {state.ready ? ( {React.cloneElement(children, { - container: state.container, window: state.window, })} diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js index fb1a840aa05012..5dccf815fc7a39 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.js +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import AppBar from '@material-ui/core/AppBar'; import CssBaseline from '@material-ui/core/CssBaseline'; import Divider from '@material-ui/core/Divider'; @@ -52,8 +51,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -function ResponsiveDrawer(props) { - const { container } = props; +export default function ResponsiveDrawer() { const classes = useStyles(); const theme = useTheme(); const [mobileOpen, setMobileOpen] = React.useState(false); @@ -86,8 +84,10 @@ function ResponsiveDrawer(props) { ); + const [container, setContainer] = React.useState(null); + return ( -
+
@@ -165,13 +165,3 @@ function ResponsiveDrawer(props) {
); } - -ResponsiveDrawer.propTypes = { - /** - * Injected by the documentation to work in an iframe. - * You won't need it on your project. - */ - container: PropTypes.any, -}; - -export default ResponsiveDrawer; diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx index 2b646584dba6c4..97676301b95020 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx @@ -53,16 +53,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -interface ResponsiveDrawerProps { - /** - * Injected by the documentation to work in an iframe. - * You won't need it on your project. - */ - container?: any; -} - -export default function ResponsiveDrawer(props: ResponsiveDrawerProps) { - const { container } = props; +export default function ResponsiveDrawer() { const classes = useStyles(); const theme = useTheme(); const [mobileOpen, setMobileOpen] = React.useState(false); @@ -95,8 +86,10 @@ export default function ResponsiveDrawer(props: ResponsiveDrawerProps) {
); + const [container, setContainer] = React.useState(null); + return ( -
+
From 0568e603ae14efd2a2393fab25d3c6d4b9b44b0f Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 21 Apr 2020 01:12:41 +0200 Subject: [PATCH 2/5] [docs] Modernize DemoFrame --- docs/src/modules/components/DemoSandboxed.js | 22 +++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index 9f7d60ee95c72f..51d0f12486acd1 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -24,29 +24,31 @@ function DemoFrame(props) { const [state, setState] = React.useState({ ready: false, }); - const instanceRef = React.useRef(); - const handleRef = React.useCallback((ref) => { - instanceRef.current = { - contentDocument: ref ? ref.node.contentDocument : null, - contentWindow: ref ? ref.node.contentWindow : null, - }; + /** + * @type {import('react').Ref} + */ + const frameWindowRef = React.useRef(null); + const handleRef = React.useCallback((instance) => { + frameWindowRef.current = instance !== null ? instance.node.contentWindow : null; }, []); + const jssInsertionPointRef = React.useRef(null); + const onContentDidMount = () => { setState({ ready: true, jss: create({ plugins: [...jssPreset().plugins, rtl()], - insertionPoint: instanceRef.current.contentWindow['demo-frame-jss'], + insertionPoint: jssInsertionPointRef.current, }), sheetsManager: new Map(), - window: () => instanceRef.current.contentWindow, + window: () => frameWindowRef.current, }); }; const onContentDidUpdate = () => { - instanceRef.current.contentDocument.body.dir = theme.direction; + frameWindowRef.current.document.body.dir = theme.direction; }; // NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount @@ -59,7 +61,7 @@ function DemoFrame(props) { contentDidUpdate={onContentDidUpdate} {...other} > -
+
{state.ready ? ( {React.cloneElement(children, { From 373800899957f422aad2c00c375e3852de8d8bd3 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 21 Apr 2020 01:17:41 +0200 Subject: [PATCH 3/5] remove derived state --- docs/src/modules/components/DemoSandboxed.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index 51d0f12486acd1..a380df7cb543b8 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -21,9 +21,7 @@ const styles = (theme) => ({ function DemoFrame(props) { const { children, classes, ...other } = props; const theme = useTheme(); - const [state, setState] = React.useState({ - ready: false, - }); + const [state, setState] = React.useState(null); /** * @type {import('react').Ref} @@ -37,7 +35,6 @@ function DemoFrame(props) { const onContentDidMount = () => { setState({ - ready: true, jss: create({ plugins: [...jssPreset().plugins, rtl()], insertionPoint: jssInsertionPointRef.current, @@ -62,7 +59,7 @@ function DemoFrame(props) { {...other} >
- {state.ready ? ( + {state !== null ? ( {React.cloneElement(children, { window: state.window, From e059edcebee4af4ab990716aa8d9c349d83d732b Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 21 Apr 2020 02:11:34 +0200 Subject: [PATCH 4/5] attach responsiveDrawer to its ownerDocument.body --- .../components/drawers/ResponsiveDrawer.js | 18 +++++++++++++++--- .../components/drawers/ResponsiveDrawer.tsx | 15 ++++++++++++--- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js index 5dccf815fc7a39..93d3231fc983a6 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.js +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import AppBar from '@material-ui/core/AppBar'; import CssBaseline from '@material-ui/core/CssBaseline'; import Divider from '@material-ui/core/Divider'; @@ -51,7 +52,8 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function ResponsiveDrawer() { +function ResponsiveDrawer(props) { + const { window } = props; const classes = useStyles(); const theme = useTheme(); const [mobileOpen, setMobileOpen] = React.useState(false); @@ -84,10 +86,10 @@ export default function ResponsiveDrawer() {
); - const [container, setContainer] = React.useState(null); + const container = window !== undefined ? () => window().document.body : undefined; return ( -
+
@@ -165,3 +167,13 @@ export default function ResponsiveDrawer() {
); } + +ResponsiveDrawer.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * You won't need it on your project. + */ + window: PropTypes.func, +}; + +export default ResponsiveDrawer; diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx index 97676301b95020..c9e7826929acda 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx @@ -53,7 +53,16 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function ResponsiveDrawer() { +interface Props { + /** + * Injected by the documentation to work in an iframe. + * You won't need it on your project. + */ + window?: () => Window; +} + +export default function ResponsiveDrawer(props: Props) { + const { window } = props; const classes = useStyles(); const theme = useTheme(); const [mobileOpen, setMobileOpen] = React.useState(false); @@ -86,10 +95,10 @@ export default function ResponsiveDrawer() {
); - const [container, setContainer] = React.useState(null); + const container = window !== undefined ? () => window().document.body : undefined; return ( -
+
From 64232806a806aca21b0850cf2b13c20bb743401b Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 21 Apr 2020 02:36:46 +0200 Subject: [PATCH 5/5] feat: less refs --- docs/src/modules/components/DemoSandboxed.js | 74 +++++++++----------- 1 file changed, 32 insertions(+), 42 deletions(-) diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index a380df7cb543b8..706e02ac8bc604 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -2,9 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { create } from 'jss'; import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles'; -import NoSsr from '@material-ui/core/NoSsr'; import rtl from 'jss-rtl'; -import Frame from 'react-frame-component'; +import Frame, { FrameContext } from 'react-frame-component'; import { useSelector } from 'react-redux'; import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary'; @@ -18,56 +17,47 @@ const styles = (theme) => ({ }, }); -function DemoFrame(props) { - const { children, classes, ...other } = props; - const theme = useTheme(); - const [state, setState] = React.useState(null); +function FramedDemo(props) { + const { children } = props; - /** - * @type {import('react').Ref} - */ - const frameWindowRef = React.useRef(null); - const handleRef = React.useCallback((instance) => { - frameWindowRef.current = instance !== null ? instance.node.contentWindow : null; - }, []); + const { document } = React.useContext(FrameContext); - const jssInsertionPointRef = React.useRef(null); + const theme = useTheme(); + React.useEffect(() => { + document.body.dir = theme.direction; + }, [document, theme.direction]); - const onContentDidMount = () => { - setState({ + const { jss, sheetsManager } = React.useMemo(() => { + return { jss: create({ plugins: [...jssPreset().plugins, rtl()], - insertionPoint: jssInsertionPointRef.current, + insertionPoint: document.head, }), sheetsManager: new Map(), - window: () => frameWindowRef.current, - }); - }; + }; + }, [document]); + + const getWindow = React.useCallback(() => document.defaultView, [document]); + + return ( + + {React.cloneElement(children, { + window: getWindow, + })} + + ); +} +FramedDemo.propTypes = { + children: PropTypes.node, +}; - const onContentDidUpdate = () => { - frameWindowRef.current.document.body.dir = theme.direction; - }; +function DemoFrame(props) { + const { children, classes, ...other } = props; - // NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount return ( - - -
- {state !== null ? ( - - {React.cloneElement(children, { - window: state.window, - })} - - ) : null} - - + + {children} + ); }