Pass handlers instead of elements

mui · Mar 19, 2020 · 9d24a74 · 9d24a74
1 parent 89f3bfb
commit 9d24a74
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git 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}
         />
       </div>
       <div className={classes.anchorLink} id={`${demoName}.js`} />

diff --git 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 {
             .
           </Typography>
           <pre>{error.toString()}</pre>
-          {errorActions}
+          <Button color="secondary" onClick={onResetDemoClick} variant="text">
+            {t('resetDemo')}
+          </Button>
         </div>
       );
       /* 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
@@ -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 (
-    <DemoErrorBoundary
-      errorActions={
-        <Button color="secondary" onClick={resetDemo} variant="text">
-          {t('resetDemo')}
-        </Button>
-      }
-    >
+    <DemoErrorBoundary onResetDemoClick={onResetDemoClick} t={t}>
       <Sandbox {...sandboxProps}>
         <Component />
       </Sandbox>
@@ -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);