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}
>
{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 ( -