Fix #910

react-toolbox · Nov 18, 2016 · 25bba26 · 25bba26
1 parent 173cff0
commit 25bba26
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/components/list/List.js b/components/list/List.js
@@ -4,6 +4,12 @@ import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
 import InjectListItem from './ListItem.js';
 
+const mergeProp = (propName, child, parent) => (
+  child[propName] !== undefined
+  ? child[propName]
+  : parent[propName]
+);
+
 const factory = (ListItem) => {
   class List extends Component {
     static propTypes = {
@@ -25,10 +31,9 @@ const factory = (ListItem) => {
     renderItems () {
       return React.Children.map(this.props.children, (item) => {
         if (item.type === ListItem) {
-          return React.cloneElement(item, {
-            ripple: this.props.ripple,
-            selectable: this.props.selectable
-          });
+          const selectable = mergeProp('selectable', item.props, this.props);
+          const ripple = mergeProp('ripple', item.props, this.props);
+          return React.cloneElement(item, { selectable, ripple });
         } else {
           return React.cloneElement(item);
         }

diff --git a/spec/components/list.js b/spec/components/list.js
@@ -32,7 +32,7 @@ class ListTest extends React.Component {
           <List selectable ripple>
             <ListSubHeader caption='Contacts' />
             <ListItem caption='Inbox' leftIcon='inbox' />
-            <ListItem caption='Outbox' leftIcon='send' />
+            <ListItem caption='Outbox' selectable={false} ripple={false} leftIcon='send' />
             <ListItem caption='Trash' leftIcon='delete' />
             <ListItem caption='Spam' leftIcon='report' />
           </List>