1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 |
|
4 | export default class TouchableArea extends React.Component {
|
5 | static propTypes = {
|
6 | scroller: PropTypes.object,
|
7 | touchable: PropTypes.bool.isRequired,
|
8 | children: PropTypes.any,
|
9 | }
|
10 |
|
11 | static defaultProps = {
|
12 | touchable: true,
|
13 | }
|
14 |
|
15 | handleTouchStart = (e) => {
|
16 | if (!this.props.scroller || !this.props.touchable) {
|
17 | return;
|
18 | }
|
19 |
|
20 | this.props.scroller.doTouchStart(e.touches, e.timeStamp);
|
21 | e.preventDefault();
|
22 | }
|
23 |
|
24 | handleTouchMove = (e) => {
|
25 | if (!this.props.scroller || !this.props.touchable) {
|
26 | return;
|
27 | }
|
28 |
|
29 | this.props.scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
|
30 | e.preventDefault();
|
31 | }
|
32 |
|
33 | handleTouchEnd = (e) => {
|
34 | if (!this.props.scroller || !this.props.touchable) {
|
35 | return;
|
36 | }
|
37 |
|
38 | this.props.scroller.doTouchEnd(e.timeStamp);
|
39 | e.preventDefault();
|
40 | }
|
41 |
|
42 | render() {
|
43 | return (
|
44 | <div
|
45 | onTouchStart={this.handleTouchStart}
|
46 | onTouchMove={this.handleTouchMove}
|
47 | onTouchEnd={this.handleTouchEnd}
|
48 | onTouchCancel={this.handleTouchEnd}>
|
49 | {this.props.children}
|
50 | </div>
|
51 | );
|
52 | }
|
53 | }
|