[SwipeableDrawer] Prevent interaction with the drawer content if no opened

[leMaik]

Disabling pointer events when the drawer is not open (e.g. swiping) fixes clicking in discovery mode and also prevents accidentially clicking something while swiping (which is annoying).

I used the paper's style attribute because passing classes down into the "inherited" component would break just inheriting the classes. The same reason why I introduced SwipeArea instead of making that component inline. 😕 I'm curious if there is a better solution, so please tell me! 👍

Fixes #10844

Edit: Better (= no inline-style) way: We could add pointerEvents: 'none' in the drawer, using another style classname for the Paper element. That, however, would put a fix for the SwipeableDrawer into the drawer.

[oliviertassinari]

I'm curious if there is a better solution, so please tell me!

@leMaik This is an interesting problem. The withStyles() component "blocks" the propagation of the classes property. If we start adding the HOC to SwipeableDrawer, users will no longer be able to override the CSS of the underlying component: the Drawer. In the past, we have been dodging the issue with a DrawerClasses property (you can find the xxxClasses pattern on different components). It's someting we could do here too. But the inline-style solution isn't that bad :).

[leMaik]

@oliviertassinari Already faced that problem when adding the CSS classes for the discovery area for #11031. It would be cool if propagating classes through inheriting components would just work with withStyles, maybe with some inheritClasses: true option? 🤔

[oliviertassinari]

It would be cool if propagating classes through inheriting components would just work with withStyles, maybe with some inheritClasses: true option?

@leMaik We have had the same feedback from @fzaninotto here.
The CSS is already cascading, having the same behavior for the classes property would made debugging much harder. I took a strong implementation bias by not allowing it. So I'm against having class inheritance by default.

Regarding adding a inheritClasses: true option, I'm more neutral. But I can try to propose alternatives. What do you think?

• From the @fzaninotto issue:

const styles = {
  div: {
    color: 'green',
  },
  span: {
    color: 'yellow',
  }
};

function MyApp(props) {
- const { classes } = props
+ const { classes: { span, ...classes } } = props
  return (
-   <span className={classes.span}>
+   <span className={span}>
-     <MyComponent classes={classes} /> // fails because MyComponent doesn't have a `span` style
+     <MyComponent classes={classes} />
    </span>
  )
}

export default withStyles(styles)(MyApp);

• From your issue:

const styles = {
  paper: {
    width: 300,
  },
};

function MyApp(props) {
  const { classes } = props
- return <SwipeableDrawer classes={classes} />
+ return <SwipeableDrawer DrawerClasses={classes} />
}

export default withStyles(styles)(MyApp);

[leMaik]

@oliviertassinari I tried the first solution before and something didn't work, I don't remember what it was. I'll try again soon.