Fixes #1030

components/ripple/Ripple.js

@@ -11,6 +11,7 @@ const defaults = {
   centered: false,
   className: '',
   multiple: true,
+  passthrough: true,
   spread: 2,
   theme: {}
 };
@@ -20,6 +21,7 @@ const rippleFactory = (options = {}) => {
     centered: defaultCentered,
     className: defaultClassName,
     multiple: defaultMultiple,
+    passthrough: defaultPassthrough,
     spread: defaultSpread,
     theme: defaultTheme,
     ...props
@@ -244,17 +246,26 @@ const rippleFactory = (options = {}) => {
       }
 
       render () {
+        const {
+          children,
+          disabled,
+          ripple,
+          onRippleEnded,   // eslint-disable-line
+          rippleCentered,  // eslint-disable-line
+          rippleClassName, // eslint-disable-line
+          rippleMultiple,  // eslint-disable-line
+          rippleSpread,    // eslint-disable-line
+          theme,
+          ...other
+        } = this.props;
         const { ripples } = this.state;
-        const { onRippleEnded, rippleCentered, rippleMultiple, rippleSpread, // eslint-disable-line
-          children, ripple, rippleClassName, ...other } = this.props;
+        const childRipples = Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]));
+        const childProps = { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, ...other };
+        const finalProps = defaultPassthrough ? { ...childProps, theme, disabled } : childProps;
 
-        if (!ripple) return <ComposedComponent children={children} {...other} />;
-        return (
-          <ComposedComponent {...other} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
-            {children}
-            {Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]))}
-          </ComposedComponent>
-        );
+        return !ripple
+          ? React.createElement(ComposedComponent, finalProps, children)
+          : React.createElement(ComposedComponent, finalProps, [children, childRipples]);
       }
     }
 

components/ripple/readme.md

@@ -26,6 +26,7 @@ You can pass some options to configure the default props for the ripple when dec
 | `centered`      | `Boolean`   | `false`     | True in case you want a centered ripple.|
 | `className`     | `String`    | `''`        | String to customize appearance (color and opacity for example).|
 | `multiple`      | `Boolean`   | `true`      | If true each touch produces a different wave. If false the same wave is restarted. |
+| `passthrough`   | `Boolean`   | `true`      | If true it passes down `theme` and `disabled` properties when present.|
 | `spread`        | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
 | `theme`         | `Object`    | `null`      | Classnames object defining the ripple style.|