Skip to content

Commit 85aa76c

Browse files
committed
Added touch and scroll events. Closes #19
1 parent 67939e2 commit 85aa76c

File tree

1 file changed

+81
-76
lines changed

1 file changed

+81
-76
lines changed

src/NativeListener.js

+81-76
Original file line numberDiff line numberDiff line change
@@ -3,90 +3,95 @@ import { Component } from 'react'
33
import PropTypes from 'prop-types'
44
import ReactDOM from 'react-dom'
55
const events = [
6-
'KeyDown',
7-
'KeyPress',
8-
'KeyUp',
9-
'Click',
10-
'ContextMenu',
11-
'DoubleClick',
12-
'Drag',
13-
'DragEnd',
14-
'DragEnter',
15-
'DragExit',
16-
'DragLeave',
17-
'DragOver',
18-
'DragStart',
19-
'Drop',
20-
'Focus',
21-
'MouseDown',
22-
'MouseEnter',
23-
'MouseLeave',
24-
'MouseMove',
25-
'MouseOut',
26-
'MouseOver',
27-
'MouseUp',
28-
'PointerOver',
29-
'PointerEnter',
30-
'PointerDown',
31-
'PointerMove',
32-
'PointerUp',
33-
'PointerCancel',
34-
'PointerOut',
35-
'PointerLeave'
6+
'KeyDown',
7+
'KeyPress',
8+
'KeyUp',
9+
'Click',
10+
'ContextMenu',
11+
'DoubleClick',
12+
'Drag',
13+
'DragEnd',
14+
'DragEnter',
15+
'DragExit',
16+
'DragLeave',
17+
'DragOver',
18+
'DragStart',
19+
'Drop',
20+
'Focus',
21+
'MouseDown',
22+
'MouseEnter',
23+
'MouseLeave',
24+
'MouseMove',
25+
'MouseOut',
26+
'MouseOver',
27+
'MouseUp',
28+
'PointerOver',
29+
'PointerEnter',
30+
'PointerDown',
31+
'PointerMove',
32+
'PointerUp',
33+
'PointerCancel',
34+
'PointerOut',
35+
'PointerLeave',
36+
'Scroll',
37+
'TouchStart',
38+
'TouchMove',
39+
'TouchEnd',
40+
'TouchCancel'
3641
]
3742

3843
const aliases = {
39-
DoubleClick: 'dblclick'
44+
DoubleClick: 'dblclick'
4045
}
4146

4247
const toEventName = (event: string): string =>
43-
(aliases[event] || event).toLowerCase()
48+
(aliases[event] || event).toLowerCase()
4449

4550
export default class NativeListener extends Component {
46-
static displayName = 'NativeListener'
47-
static propTypes = {
48-
children: (props, propName) => {
49-
if (props[propName].length) {
50-
return new Error('NativeListener can only wrap one element')
51-
}
52-
},
53-
...events.reduce(
54-
(accumulator, event) => ({
55-
...accumulator,
56-
[`on${event}`]: PropTypes.func,
57-
[`on${event}Capture`]: PropTypes.func,
58-
[`stop${event}`]: PropTypes.bool
59-
}),
60-
{}
61-
)
62-
}
51+
static displayName = 'NativeListener'
52+
static propTypes = {
53+
children: (props, propName) => {
54+
if (props[propName].length) {
55+
return new Error('NativeListener can only wrap one element')
56+
}
57+
},
58+
...events.reduce(
59+
(accumulator, event) => ({
60+
...accumulator,
61+
[`on${event}`]: PropTypes.func,
62+
[`on${event}Capture`]: PropTypes.func,
63+
[`stop${event}`]: PropTypes.bool
64+
}),
65+
{}
66+
)
67+
}
6368

64-
componentDidMount() {
65-
const props = this.props
66-
const element = ReactDOM.findDOMNode(this)
67-
if (element) {
68-
events.forEach(event => {
69-
const capture = props['on' + event + 'Capture']
70-
const bubble = props['on' + event]
71-
const stop = props['stop' + event]
72-
if (capture && typeof capture === 'function') {
73-
element.addEventListener(toEventName(event), capture, true)
74-
}
75-
if (bubble && typeof bubble === 'function') {
76-
element.addEventListener(toEventName(event), bubble, false)
77-
}
78-
if (stop === true) {
79-
element.addEventListener(
80-
toEventName(event),
81-
nativeEvent => nativeEvent.stopPropagation(),
82-
false
83-
)
84-
}
85-
})
86-
}
87-
}
69+
componentDidMount() {
70+
const props = this.props
71+
const element = ReactDOM.findDOMNode(this)
72+
if (element) {
73+
events.forEach(event => {
74+
const capture = props['on' + event + 'Capture']
75+
const bubble = props['on' + event]
76+
const stop = props['stop' + event]
77+
if (capture && typeof capture === 'function') {
78+
element.addEventListener(toEventName(event), capture, true)
79+
}
80+
if (bubble && typeof bubble === 'function') {
81+
element.addEventListener(toEventName(event), bubble, false)
82+
}
83+
if (stop === true) {
84+
element.addEventListener(
85+
toEventName(event),
86+
nativeEvent => nativeEvent.stopPropagation(),
87+
false
88+
)
89+
}
90+
})
91+
}
92+
}
8893

89-
render() {
90-
return this.props.children
91-
}
94+
render() {
95+
return this.props.children
96+
}
9297
}

0 commit comments

Comments
 (0)