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);