diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index 26275a5d..ff3839f9 100644
--- a/components/ripple/Ripple.js
+++ b/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 ;
- return (
-
- {children}
- {Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]))}
-
- );
+ return !ripple
+ ? React.createElement(ComposedComponent, finalProps, children)
+ : React.createElement(ComposedComponent, finalProps, [children, childRipples]);
}
}
diff --git a/components/ripple/readme.md b/components/ripple/readme.md
index 9f83d181..8eb484d0 100644
--- a/components/ripple/readme.md
+++ b/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.|