Add onRippleEnded. Fixes #289
parent
6a0d861dfd
commit
c612fdf83d
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import ClassNames from 'classnames';
|
import ClassNames from 'classnames';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
import events from '../utils/events';
|
||||||
import prefixer from '../utils/prefixer';
|
import prefixer from '../utils/prefixer';
|
||||||
|
|
||||||
const defaults = {
|
const defaults = {
|
||||||
|
@ -23,6 +24,7 @@ const Ripple = (options = {}) => {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
children: React.PropTypes.any,
|
children: React.PropTypes.any,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
|
onRippleEnded: React.PropTypes.func,
|
||||||
ripple: React.PropTypes.bool,
|
ripple: React.PropTypes.bool,
|
||||||
rippleCentered: React.PropTypes.bool,
|
rippleCentered: React.PropTypes.bool,
|
||||||
rippleClassName: React.PropTypes.string,
|
rippleClassName: React.PropTypes.string,
|
||||||
|
@ -45,6 +47,20 @@ const Ripple = (options = {}) => {
|
||||||
width: null
|
width: null
|
||||||
};
|
};
|
||||||
|
|
||||||
|
componentDidMount () {
|
||||||
|
if (this.props.onRippleEnded) {
|
||||||
|
events.addEventListenerOnTransitionEnded(this.refs.ripple, (evt) => {
|
||||||
|
if (evt.propertyName === 'transform') this.props.onRippleEnded(evt);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount () {
|
||||||
|
if (this.props.onRippleEnded) {
|
||||||
|
events.removeEventListenerOnTransitionEnded(this.refs.ripple);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleEnd = () => {
|
handleEnd = () => {
|
||||||
document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
|
document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
|
||||||
this.setState({active: false});
|
this.setState({active: false});
|
||||||
|
|
|
@ -20,8 +20,9 @@ const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;
|
||||||
|
|
||||||
In any component you decorate with the Ripple you'd get some additional props:
|
In any component you decorate with the Ripple you'd get some additional props:
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `centered` | `Boolean` | `false` | True in case you want a centered ripple.|
|
| `centered` | `Boolean` | `false` | True in case you want a centered ripple.|
|
||||||
| `className` | `String` | `''` | String to customize appearance (color and opacity for example).|
|
| `className` | `String` | `''` | String to customize appearance (color and opacity for example).|
|
||||||
| `spread` | `Number` | `2` | Factor to indicate how much should the ripple spread under the component.|
|
| `onRippleEnded` | `Function` | | Function that will be called when the ripple animation ends. |
|
||||||
|
| `spread` | `Number` | `2` | Factor to indicate how much should the ripple spread under the component.|
|
||||||
|
|
|
@ -37,5 +37,34 @@ export default {
|
||||||
node = node.parentNode;
|
node = node.parentNode;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
addEventListenerOnTransitionEnded (element, fn) {
|
||||||
|
const eventName = transitionEventNamesFor(element);
|
||||||
|
if (!eventName) return false;
|
||||||
|
element.addEventListener(eventName, fn);
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeEventListenerOnTransitionEnded (element) {
|
||||||
|
const eventName = transitionEventNamesFor(element);
|
||||||
|
if (!eventName) return false;
|
||||||
|
element.removeEventListener(eventName);
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const TRANSITIONS = {
|
||||||
|
'transition': 'transitionend',
|
||||||
|
'OTransition': 'oTransitionEnd',
|
||||||
|
'MozTransition': 'transitionend',
|
||||||
|
'WebkitTransition': 'webkitTransitionEnd'
|
||||||
|
};
|
||||||
|
|
||||||
|
function transitionEventNamesFor (element) {
|
||||||
|
for (const transition in TRANSITIONS) {
|
||||||
|
if (element.style[transition] !== undefined) {
|
||||||
|
return TRANSITIONS[transition];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@ const ButtonTest = () => (
|
||||||
<Button href='http://github.com/javivelasco' target='_blank' raised>
|
<Button href='http://github.com/javivelasco' target='_blank' raised>
|
||||||
<GithubIcon /> Github
|
<GithubIcon /> Github
|
||||||
</Button>
|
</Button>
|
||||||
<Button icon='bookmark' label='Bookmark' accent />
|
<Button icon='bookmark' label='Bookmark' accent onRippleEnded={rippleEnded} />
|
||||||
<Button icon='bookmark' label='Bookmark' raised primary />
|
<Button icon='bookmark' label='Bookmark' raised primary />
|
||||||
<Button icon='inbox' label='Inbox' flat />
|
<Button icon='inbox' label='Inbox' flat />
|
||||||
<Button icon='add' floating />
|
<Button icon='add' floating />
|
||||||
|
@ -27,4 +27,8 @@ const ButtonTest = () => (
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
function rippleEnded () {
|
||||||
|
console.log('Ripple animation ended!');
|
||||||
|
}
|
||||||
|
|
||||||
export default ButtonTest;
|
export default ButtonTest;
|
||||||
|
|
|
@ -38,7 +38,7 @@ $offset: 1.8 * $unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appbar {
|
.appbar {
|
||||||
z-index: 999999 !important;
|
z-index: 999 !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
> h1 {
|
> h1 {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
Loading…
Reference in New Issue