2015-09-18 20:21:54 +03:00
|
|
|
/* global React */
|
|
|
|
|
|
|
|
import { addons } from 'react/addons';
|
2015-10-02 18:39:26 +03:00
|
|
|
import style from './style.scss';
|
2015-09-18 20:21:54 +03:00
|
|
|
|
2015-10-04 16:12:53 +03:00
|
|
|
export default React.createClass({
|
2015-09-18 20:21:54 +03:00
|
|
|
mixins: [addons.PureRenderMixin],
|
|
|
|
|
|
|
|
displayName: 'Ripple',
|
|
|
|
|
|
|
|
propTypes: {
|
2015-10-04 16:12:53 +03:00
|
|
|
centered: React.PropTypes.bool,
|
2015-09-18 20:21:54 +03:00
|
|
|
className: React.PropTypes.string,
|
2015-10-04 16:12:53 +03:00
|
|
|
loading: React.PropTypes.bool,
|
|
|
|
spread: React.PropTypes.number
|
2015-09-18 20:21:54 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps () {
|
|
|
|
return {
|
2015-10-04 16:12:53 +03:00
|
|
|
centered: false,
|
2015-09-18 20:21:54 +03:00
|
|
|
className: '',
|
2015-10-04 16:12:53 +03:00
|
|
|
loading: false,
|
|
|
|
spread: 2
|
2015-09-18 20:21:54 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState () {
|
|
|
|
return {
|
|
|
|
active: false,
|
|
|
|
restarting: false,
|
|
|
|
top: null,
|
|
|
|
left: null,
|
|
|
|
width: null
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
start ({ pageX, pageY }) {
|
2015-10-02 18:39:26 +03:00
|
|
|
document.addEventListener('mouseup', this.end);
|
2015-09-18 20:21:54 +03:00
|
|
|
const {top, left, width} = this._getDescriptor(pageX, pageY);
|
|
|
|
this.setState({active: false, restarting: true, width: 0}, () => {
|
|
|
|
this.refs.ripple.getDOMNode().offsetWidth; //eslint-disable-line no-unused-expressions
|
|
|
|
this.setState({active: true, restarting: false, top: top, left: left, width: width});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
end () {
|
2015-10-02 18:39:26 +03:00
|
|
|
document.removeEventListener('mouseup', this.end);
|
2015-09-18 20:21:54 +03:00
|
|
|
this.setState({active: false});
|
|
|
|
},
|
|
|
|
|
|
|
|
_getDescriptor (pageX, pageY) {
|
2015-10-04 16:12:53 +03:00
|
|
|
let { left, top, height, width } = this.getDOMNode().getBoundingClientRect();
|
2015-09-18 20:21:54 +03:00
|
|
|
return {
|
2015-10-04 16:12:53 +03:00
|
|
|
left: this.props.centered ? width / 2 : pageX - left,
|
|
|
|
top: this.props.centered ? height / 2 : pageY - top,
|
|
|
|
width: width * this.props.spread
|
2015-09-18 20:21:54 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
let { left, top, width } = this.state;
|
2015-10-04 16:12:53 +03:00
|
|
|
let rippleStyle = {left: left, top: top, width: width, height: width};
|
|
|
|
let className = style[this.props.loading ? 'loading' : 'normal'];
|
2015-10-02 18:39:26 +03:00
|
|
|
if (this.state.active) className += ` ${style.active}`;
|
|
|
|
if (this.state.restarting) className += ` ${style.restarting}`;
|
2015-10-04 16:12:53 +03:00
|
|
|
if (this.props.className) className += ` ${this.props.className}`;
|
2015-09-18 20:21:54 +03:00
|
|
|
|
|
|
|
return (
|
2015-10-04 16:12:53 +03:00
|
|
|
<span react-toolbox='ripple' className={style.wrapper}>
|
|
|
|
<span ref="ripple" role='ripple' className={className} style={rippleStyle} />
|
2015-09-18 20:21:54 +03:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|