From 9897f88569cd68add4f1a9ec4cb17c39b0ac9d87 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 19 Mar 2020 11:55:48 +0100 Subject: [PATCH 1/3] [docs] Add ability to reset a demo --- docs/src/modules/components/Demo.js | 16 ++++++++++++++++ docs/src/modules/components/DemoErrorBoundary.js | 7 ++++++- docs/src/modules/components/DemoSandboxed.js | 15 +++++++++++++-- docs/translations/translations.json | 1 + 4 files changed, 36 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index be0520a4ac661e..dc42093c577ec8 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -17,6 +17,7 @@ import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import Tooltip from '@material-ui/core/Tooltip'; +import RefreshIcon from '@material-ui/icons/Refresh'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed'; import DemoLanguages from 'docs/src/modules/components/DemoLanguages'; @@ -336,6 +337,8 @@ function Demo(props) { showCodeLabel = showPreview ? t('showFullSource') : t('showSource'); } + const [demoKey, resetDemo] = React.useReducer(key => key + 1, 0); + const demoSourceId = useUniqueId(`demo-`); const openDemoSource = codeOpen || showPreview; @@ -353,10 +356,12 @@ function Demo(props) { onMouseLeave={handleDemoHover} >
@@ -428,6 +433,17 @@ function Demo(props) { + + + + + 
{error.toString()}
+ {errorActions}
); /* eslint-enable material-ui/no-hardcoded-labels */ @@ -42,4 +43,8 @@ export default class DemoErrorBoundary extends React.Component { DemoErrorBoundary.propTypes = { children: PropTypes.node, + /** + * actions that should be displayed when the error fallback is displayed + */ + errorActions: PropTypes.node, }; diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index 15862b43a599d1..dda6a3ca5478d3 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -3,8 +3,10 @@ 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 Button from '@material-ui/core/Button'; import rtl from 'jss-rtl'; import Frame from 'react-frame-component'; +import { useSelector } from 'react-redux'; import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary'; const styles = theme => ({ @@ -85,12 +87,20 @@ const StyledFrame = withStyles(styles)(DemoFrame); * to an `iframe` if `iframe={true}`. */ function DemoSandboxed(props) { - const { component: Component, iframe, name, ...other } = props; + const { component: Component, iframe, name, resetDemo, ...other } = props; const Sandbox = iframe ? StyledFrame : React.Fragment; const sandboxProps = iframe ? { title: `${name} demo`, ...other } : {}; + const t = useSelector(state => state.options.t); + return ( - + + {t('resetDemo')} + + } + > @@ -102,6 +112,7 @@ DemoSandboxed.propTypes = { component: PropTypes.elementType.isRequired, iframe: PropTypes.bool, name: PropTypes.string.isRequired, + resetDemo: PropTypes.func.isRequired, }; export default React.memo(DemoSandboxed); diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 90234ea56f3de7..e03e9a6ef51e89 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -92,6 +92,7 @@ "getProfessionalSupport": "Get Professional Support", "diamondSponsors": "Diamond Sponsors", "demoToolbarLabel": "demo source", + "resetDemo": "Reset demo", "pages": { "/getting-started": "Getting Started", "/getting-started/installation": "Installation", From 89f3bfb6162657dabe497c22101523c2810ac13d Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 19 Mar 2020 11:56:35 +0100 Subject: [PATCH 2/3] [docs] Use bug report when reporting demo runtime error --- docs/src/modules/components/DemoErrorBoundary.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/DemoErrorBoundary.js b/docs/src/modules/components/DemoErrorBoundary.js index c548ae49c9d04d..24a2c62a50a64d 100644 --- a/docs/src/modules/components/DemoErrorBoundary.js +++ b/docs/src/modules/components/DemoErrorBoundary.js @@ -25,7 +25,10 @@ export default class DemoErrorBoundary extends React.Component { We would appreciate it if you report this error directly to our{' '} - + issue tracker . From 9d24a74a024f5e80392fff84edb2ef47995b0ab1 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 19 Mar 2020 12:05:58 +0100 Subject: [PATCH 3/3] Pass handlers instead of elements --- docs/src/modules/components/Demo.js | 2 +- docs/src/modules/components/DemoErrorBoundary.js | 12 ++++++++---- docs/src/modules/components/DemoSandboxed.js | 13 +++---------- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index dc42093c577ec8..950111c6ed5e3e 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -361,7 +361,7 @@ function Demo(props) { component={DemoComponent} iframe={demoOptions.iframe} name={demoName} - resetDemo={resetDemo} + onResetDemoClick={resetDemo} />
diff --git a/docs/src/modules/components/DemoErrorBoundary.js b/docs/src/modules/components/DemoErrorBoundary.js index 24a2c62a50a64d..b37da64680bc4e 100644 --- a/docs/src/modules/components/DemoErrorBoundary.js +++ b/docs/src/modules/components/DemoErrorBoundary.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; +import Button from '@material-ui/core/Button'; export default class DemoErrorBoundary extends React.Component { state = { @@ -13,7 +14,7 @@ export default class DemoErrorBoundary extends React.Component { } render() { - const { children, errorActions } = this.props; + const { children, onResetDemoClick, t } = this.props; const { error } = this.state; if (error) { @@ -34,7 +35,9 @@ export default class DemoErrorBoundary extends React.Component { . 
{error.toString()}
- {errorActions} +
); /* eslint-enable material-ui/no-hardcoded-labels */ @@ -46,8 +49,9 @@ export default class DemoErrorBoundary extends React.Component { DemoErrorBoundary.propTypes = { children: PropTypes.node, + onResetDemoClick: PropTypes.func.isRequired, /** - * actions that should be displayed when the error fallback is displayed + * translate function from redux store */ - errorActions: PropTypes.node, + t: PropTypes.func.isRequired, }; diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index dda6a3ca5478d3..e02cbe37b445b3 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -3,7 +3,6 @@ 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 Button from '@material-ui/core/Button'; import rtl from 'jss-rtl'; import Frame from 'react-frame-component'; import { useSelector } from 'react-redux'; @@ -87,20 +86,14 @@ const StyledFrame = withStyles(styles)(DemoFrame); * to an `iframe` if `iframe={true}`. */ function DemoSandboxed(props) { - const { component: Component, iframe, name, resetDemo, ...other } = props; + const { component: Component, iframe, name, onResetDemoClick, ...other } = props; const Sandbox = iframe ? StyledFrame : React.Fragment; const sandboxProps = iframe ? { title: `${name} demo`, ...other } : {}; const t = useSelector(state => state.options.t); return ( - - {t('resetDemo')} - - } - > + @@ -112,7 +105,7 @@ DemoSandboxed.propTypes = { component: PropTypes.elementType.isRequired, iframe: PropTypes.bool, name: PropTypes.string.isRequired, - resetDemo: PropTypes.func.isRequired, + onResetDemoClick: PropTypes.func.isRequired, }; export default React.memo(DemoSandboxed);