♻ [ListItem] Make `clickable` optional when `onClick` is defined

CHANGELOG.md

@@ -18,6 +18,8 @@
 - **[CssBaseline]** Add "cursor" feature (!7 by @chapa)
 - **[CssBaseline]** Add "overflow" feature (!8 by @chapa)
 - **[CssBaseline]** Add "text" feature (!6 by @chapa)
+- **[ListItem]** Make the `clickable` prop optional if `onClick` is defined (!9
+  by @chapa)
 
 ## v1.2.0 (August 27, 2019) and below
 

docs/src/Router.js

@@ -43,20 +43,10 @@ export const Topbar = () => (
 
 export const Sidemenu = withCloseSidemenu(({ closeSidemenu }) => (
   <List component='div'>
-    <ListItem
-      component={Link}
-      to={routes.home}
-      onClick={closeSidemenu}
-      clickable
-    >
+    <ListItem component={Link} to={routes.home} onClick={closeSidemenu}>
       Accueil
     </ListItem>
-    <ListItem
-      component={Link}
-      to={routes.contributing}
-      onClick={closeSidemenu}
-      clickable
-    >
+    <ListItem component={Link} to={routes.contributing} onClick={closeSidemenu}>
       Contribution
     </ListItem>
     <ListItem component='div'>Personnalisation</ListItem>

docs/src/scenes/Components/ComponentsRouter.js

@@ -54,7 +54,6 @@ export const ComponentsSidemenu = withCloseSidemenu(({ closeSidemenu }) => (
         component={Link}
         to={routes[component]}
         onClick={closeSidemenu}
-        clickable
       >
         {component}
       </ListItem>

docs/src/scenes/Customization/CustomizationRouter.js

@@ -28,20 +28,10 @@ export const CustomizationTopbar = () => (
 
 export const CustomizationSidemenu = withCloseSidemenu(({ closeSidemenu }) => (
   <List component='div'>
-    <ListItem
-      component={Link}
-      to={routes.themes}
-      onClick={closeSidemenu}
-      clickable
-    >
+    <ListItem component={Link} to={routes.themes} onClick={closeSidemenu}>
       Thèmes
     </ListItem>
-    <ListItem
-      component={Link}
-      to={routes.defaultTheme}
-      onClick={closeSidemenu}
-      clickable
-    >
+    <ListItem component={Link} to={routes.defaultTheme} onClick={closeSidemenu}>
       Thème par défaut
     </ListItem>
   </List>

src/List/demos/NestedList.js

@@ -50,7 +50,7 @@ class NestedList extends Component {
             Un deuxième élément avec une icône
           </ListItemText>
         </ListItem>
-        <ListItem clickable onClick={this.toggleCollapse}>
+        <ListItem onClick={this.toggleCollapse}>
           <ListItemText>Un troisième clickable</ListItemText>
           <ListItemIcon
             className={classNames(classes.icon, {

src/ListItem/ListItem.js

@@ -23,7 +23,7 @@ const ListItem = props => {
   const {
     classes,
     className,
-    clickable,
+    clickable: clickableProp,
     component = 'li',
     disabled,
     listContext,
@@ -65,6 +65,9 @@ const ListItem = props => {
     )} + 1px)`;
   }
 
+  const clickable =
+    clickableProp === undefined ? Boolean(onClick) : clickableProp;
+
   return (
     <Box
       className={classNames(
@@ -80,7 +83,7 @@ const ListItem = props => {
       component={component}
       disabled={disabled}
       muted={muted}
-      onClick={clickable && onClick ? handleClick : undefined}
+      onClick={clickable ? handleClick : undefined}
       interactive={clickable}
       variant={variant}
       {...otherProps}
@@ -183,9 +186,7 @@ ListItem.propTypes = {
 };
 
 ListItem.defaultProps = {
-  component: 'li',
-  clickable: false,
-  onClick: () => {}
+  component: 'li'
 };
 
 export default withListContext(