diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index be0520a4ac661e..950111c6ed5e3e 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) { + + + + + We would appreciate it if you report this error directly to our{' '} - + issue tracker .
{error.toString()}
+
); /* eslint-enable material-ui/no-hardcoded-labels */ @@ -42,4 +49,9 @@ export default class DemoErrorBoundary extends React.Component { DemoErrorBoundary.propTypes = { children: PropTypes.node, + onResetDemoClick: PropTypes.func.isRequired, + /** + * translate function from redux store + */ + t: PropTypes.func.isRequired, }; diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index 15862b43a599d1..e02cbe37b445b3 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -5,6 +5,7 @@ import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/co import NoSsr from '@material-ui/core/NoSsr'; 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 +86,14 @@ 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, onResetDemoClick, ...other } = props; const Sandbox = iframe ? StyledFrame : React.Fragment; const sandboxProps = iframe ? { title: `${name} demo`, ...other } : {}; + const t = useSelector(state => state.options.t); + return ( - + @@ -102,6 +105,7 @@ DemoSandboxed.propTypes = { component: PropTypes.elementType.isRequired, iframe: PropTypes.bool, name: PropTypes.string.isRequired, + onResetDemoClick: 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",