forked from mui/material-ui
/
touch-ripple.jsx
172 lines (144 loc) · 4.4 KB
/
touch-ripple.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
const React = require('react');
const ReactDOM = require('react-dom');
const PureRenderMixin = require('react-addons-pure-render-mixin');
const ReactTransitionGroup = require('react-addons-transition-group');
const StylePropable = require('../mixins/style-propable');
const Dom = require('../utils/dom');
const ImmutabilityHelper = require('../utils/immutability-helper');
const CircleRipple = require('./circle-ripple');
const TouchRipple = React.createClass({
mixins: [PureRenderMixin, StylePropable],
propTypes: {
centerRipple: React.PropTypes.bool,
color: React.PropTypes.string,
opacity: React.PropTypes.number,
style: React.PropTypes.object,
},
getInitialState() {
//Touch start produces a mouse down event for compat reasons. To avoid
//showing ripples twice we skip showing a ripple for the first mouse down
//after a touch start. Note we don't store ignoreNextMouseDown in this.state
//to avoid re-rendering when we change it
this._ignoreNextMouseDown = false;
return {
//This prop allows us to only render the ReactTransitionGroup
//on the first click of the component, making the inital
//render faster
hasRipples: false,
nextKey: 0,
ripples: [],
};
},
render() {
const {
children,
style,
} = this.props;
const {
hasRipples,
ripples,
} = this.state;
let rippleGroup;
if (hasRipples) {
const mergedStyles = this.mergeAndPrefix({
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
left: 0,
overflow: 'hidden',
}, style);
rippleGroup = (
<ReactTransitionGroup style={mergedStyles}>
{ripples}
</ReactTransitionGroup>
);
}
return (
<div
onMouseUp={this._handleMouseUp}
onMouseDown={this._handleMouseDown}
onMouseLeave={this._handleMouseLeave}
onTouchStart={this._handleTouchStart}
onTouchEnd={this._handleTouchEnd}>
{rippleGroup}
{children}
</div>
);
},
start(e, isRippleTouchGenerated) {
if (this._ignoreNextMouseDown && !isRippleTouchGenerated) {
this._ignoreNextMouseDown = false;
return;
}
let ripples = this.state.ripples;
//Add a ripple to the ripples array
ripples = ImmutabilityHelper.push(ripples, (
<CircleRipple
key={this.state.nextKey}
style={!this.props.centerRipple ? this._getRippleStyle(e) : {}}
color={this.props.color}
opacity={this.props.opacity}
touchGenerated={isRippleTouchGenerated} />
));
this._ignoreNextMouseDown = isRippleTouchGenerated;
this.setState({
hasRipples: true,
nextKey: this.state.nextKey + 1,
ripples: ripples,
});
},
end() {
const currentRipples = this.state.ripples;
this.setState({
ripples: ImmutabilityHelper.shift(currentRipples),
});
},
_handleMouseDown(e) {
//only listen to left clicks
if (e.button === 0) this.start(e, false);
},
_handleMouseUp() {
this.end();
},
_handleMouseLeave() {
this.end();
},
_handleTouchStart(e) {
this.start(e, true);
},
_handleTouchEnd() {
this.end();
},
_getRippleStyle(e) {
let style = {};
const el = ReactDOM.findDOMNode(this);
const elHeight = el.offsetHeight;
const elWidth = el.offsetWidth;
const offset = Dom.offset(el);
const isTouchEvent = e.touches && e.touches.length;
const pageX = isTouchEvent ? e.touches[0].pageX : e.pageX;
const pageY = isTouchEvent ? e.touches[0].pageY : e.pageY;
const pointerX = pageX - offset.left;
const pointerY = pageY - offset.top;
const topLeftDiag = this._calcDiag(pointerX, pointerY);
const topRightDiag = this._calcDiag(elWidth - pointerX, pointerY);
const botRightDiag = this._calcDiag(elWidth - pointerX, elHeight - pointerY);
const botLeftDiag = this._calcDiag(pointerX, elHeight - pointerY);
const rippleRadius = Math.max(
topLeftDiag, topRightDiag, botRightDiag, botLeftDiag
);
const rippleSize = rippleRadius * 2;
const left = pointerX - rippleRadius;
const top = pointerY - rippleRadius;
style.height = rippleSize + 'px';
style.width = rippleSize + 'px';
style.top = top + 'px';
style.left = left + 'px';
return style;
},
_calcDiag(a, b) {
return Math.sqrt((a * a) + (b * b));
},
});
module.exports = TouchRipple;