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.|