From 7683812f02cf9a5e95bf3ecc6ed9bdc2020543c5 Mon Sep 17 00:00:00 2001 From: Kevin O'Shea Date: Fri, 26 Apr 2019 16:00:10 -0500 Subject: [PATCH 1/5] use JSS for ripple effect --- packages/material-ui/src/ButtonBase/Ripple.js | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/packages/material-ui/src/ButtonBase/Ripple.js index ecdeaf71cc8cf7..c5ea93e73fdd0a 100644 --- a/packages/material-ui/src/ButtonBase/Ripple.js +++ b/packages/material-ui/src/ButtonBase/Ripple.js @@ -1,13 +1,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import { makeStyles } from '@material-ui/styles'; import { Transition } from 'react-transition-group'; +const useStyles = makeStyles({ + root: { + width: props => props.rippleSize, + height: props => props.rippleSize, + top: props => -(props.rippleSize / 2) + props.rippleY, + left: props => -(props.rippleSize / 2) + props.rippleX, + }, +}, { index: 100 }); + /** * @ignore - internal component. */ function Ripple(props) { const { classes, className, pulsate, rippleX, rippleY, rippleSize, ...other } = props; + const rippleClasses = useStyles({ rippleX, rippleY, rippleSize }); const [visible, setVisible] = React.useState(false); const [leaving, setLeaving] = React.useState(false); @@ -26,15 +37,9 @@ function Ripple(props) { [classes.ripplePulsate]: pulsate, }, className, + rippleClasses.root, ); - const rippleStyles = { - width: rippleSize, - height: rippleSize, - top: -(rippleSize / 2) + rippleY, - left: -(rippleSize / 2) + rippleX, - }; - const childClassName = clsx(classes.child, { [classes.childLeaving]: leaving, [classes.childPulsate]: pulsate, @@ -42,7 +47,7 @@ function Ripple(props) { return ( - + From 0c3aa951d744aabff1fd26f8e0833a6dec1be17e Mon Sep 17 00:00:00 2001 From: Kevin O'Shea Date: Fri, 26 Apr 2019 16:14:58 -0500 Subject: [PATCH 2/5] fix formatting error --- packages/material-ui/src/ButtonBase/Ripple.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/packages/material-ui/src/ButtonBase/Ripple.js index c5ea93e73fdd0a..1998727d3180ca 100644 --- a/packages/material-ui/src/ButtonBase/Ripple.js +++ b/packages/material-ui/src/ButtonBase/Ripple.js @@ -4,14 +4,17 @@ import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; import { Transition } from 'react-transition-group'; -const useStyles = makeStyles({ - root: { - width: props => props.rippleSize, - height: props => props.rippleSize, - top: props => -(props.rippleSize / 2) + props.rippleY, - left: props => -(props.rippleSize / 2) + props.rippleX, +const useStyles = makeStyles( + { + root: { + width: props => props.rippleSize, + height: props => props.rippleSize, + top: props => -(props.rippleSize / 2) + props.rippleY, + left: props => -(props.rippleSize / 2) + props.rippleX, + }, }, -}, { index: 100 }); + { index: 100 }, +); /** * @ignore - internal component. From 3d836796dccd102f59fb01023a9a2a319f8a0aa7 Mon Sep 17 00:00:00 2001 From: Kevin O'Shea Date: Fri, 26 Apr 2019 16:38:00 -0500 Subject: [PATCH 3/5] use single function to pass props into styles --- packages/material-ui/src/ButtonBase/Ripple.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/packages/material-ui/src/ButtonBase/Ripple.js index 1998727d3180ca..6da01d6ef57c92 100644 --- a/packages/material-ui/src/ButtonBase/Ripple.js +++ b/packages/material-ui/src/ButtonBase/Ripple.js @@ -6,12 +6,12 @@ import { Transition } from 'react-transition-group'; const useStyles = makeStyles( { - root: { - width: props => props.rippleSize, - height: props => props.rippleSize, - top: props => -(props.rippleSize / 2) + props.rippleY, - left: props => -(props.rippleSize / 2) + props.rippleX, - }, + root: props => ({ + width: props.rippleSize, + height: props.rippleSize, + top: -(props.rippleSize / 2) + props.rippleY, + left: -(props.rippleSize / 2) + props.rippleX, + }), }, { index: 100 }, ); From 7b9e4e3b86c699b75d9b07a44236cf2a69bd1bd0 Mon Sep 17 00:00:00 2001 From: Kevin O'Shea Date: Fri, 26 Apr 2019 17:20:53 -0500 Subject: [PATCH 4/5] alter TouchRipple to avoid needing index --- packages/material-ui/src/ButtonBase/Ripple.js | 19 ++++++++----------- .../material-ui/src/ButtonBase/TouchRipple.js | 4 ---- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/packages/material-ui/src/ButtonBase/Ripple.js index 6da01d6ef57c92..96e983f670b108 100644 --- a/packages/material-ui/src/ButtonBase/Ripple.js +++ b/packages/material-ui/src/ButtonBase/Ripple.js @@ -4,17 +4,14 @@ import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; import { Transition } from 'react-transition-group'; -const useStyles = makeStyles( - { - root: props => ({ - width: props.rippleSize, - height: props.rippleSize, - top: -(props.rippleSize / 2) + props.rippleY, - left: -(props.rippleSize / 2) + props.rippleX, - }), - }, - { index: 100 }, -); +const useStyles = makeStyles({ + root: props => ({ + width: props.rippleSize, + height: props.rippleSize, + top: -(props.rippleSize / 2) + props.rippleY, + left: -(props.rippleSize / 2) + props.rippleX, + }), +}); /** * @ignore - internal component. diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js index 8996f70110742a..86c0cacfd1b5e6 100644 --- a/packages/material-ui/src/ButtonBase/TouchRipple.js +++ b/packages/material-ui/src/ButtonBase/TouchRipple.js @@ -24,10 +24,6 @@ export const styles = theme => ({ }, /* Styles applied to the internal `Ripple` components `ripple` class. */ ripple: { - width: 50, - height: 50, - left: 0, - top: 0, opacity: 0, position: 'absolute', }, From b572e0cc3f32276b98734f7dd8d038e5d71793c2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 27 Apr 2019 13:02:04 +0200 Subject: [PATCH 5/5] revert Ripple changes --- packages/material-ui/src/ButtonBase/Ripple.js | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/packages/material-ui/src/ButtonBase/Ripple.js index 96e983f670b108..ecdeaf71cc8cf7 100644 --- a/packages/material-ui/src/ButtonBase/Ripple.js +++ b/packages/material-ui/src/ButtonBase/Ripple.js @@ -1,24 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { makeStyles } from '@material-ui/styles'; import { Transition } from 'react-transition-group'; -const useStyles = makeStyles({ - root: props => ({ - width: props.rippleSize, - height: props.rippleSize, - top: -(props.rippleSize / 2) + props.rippleY, - left: -(props.rippleSize / 2) + props.rippleX, - }), -}); - /** * @ignore - internal component. */ function Ripple(props) { const { classes, className, pulsate, rippleX, rippleY, rippleSize, ...other } = props; - const rippleClasses = useStyles({ rippleX, rippleY, rippleSize }); const [visible, setVisible] = React.useState(false); const [leaving, setLeaving] = React.useState(false); @@ -37,9 +26,15 @@ function Ripple(props) { [classes.ripplePulsate]: pulsate, }, className, - rippleClasses.root, ); + const rippleStyles = { + width: rippleSize, + height: rippleSize, + top: -(rippleSize / 2) + rippleY, + left: -(rippleSize / 2) + rippleX, + }; + const childClassName = clsx(classes.child, { [classes.childLeaving]: leaving, [classes.childPulsate]: pulsate, @@ -47,7 +42,7 @@ function Ripple(props) { return ( - +