Skip to content

Commit a247be8

Browse files
joshwnjjoshwnj
committed
Merge branch 'catchonme-master'
2 parents 743387d + 7355b71 commit a247be8

File tree

3 files changed

+92
-77
lines changed

3 files changed

+92
-77
lines changed

‎example-umd/main.js‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,39 @@
11
'use strict';
22

3-
var Example = React.createClass({
4-
getInitialState: function () {
5-
return { msg: '' };
6-
},
3+
class Example extends React.Component {
4+
constructor(props) {
5+
super(props);
6+
this.state = {
7+
msg: ''
8+
};
79

8-
onChange: function (isVisible) {
10+
this.onChange = this.onChange.bind(this);
11+
}
12+
13+
onChange(isVisible) {
914
this.setState({
1015
msg: 'Element is now ' + (isVisible ? 'visible' : 'hidden')
1116
});
12-
},
17+
}
1318

14-
render: function () {
19+
render() {
1520
return (
1621
React.createElement("div", null,
1722
React.createElement("p", {className: "msg"}, this.state.msg),
1823
React.createElement("div", {className: "before"}),
1924
React.createElement(VisibilitySensor, {
20-
containment: this.props.containment,
21-
onChange: this.onChange,
22-
minTopValue: this.props.minTopValue,
23-
partialVisibility: this.props.partialVisibility
24-
},
25+
containment: this.props.containment,
26+
onChange: this.onChange,
27+
minTopValue: this.props.minTopValue,
28+
partialVisibility: this.props.partialVisibility
29+
},
2530
React.createElement("div", {className: "sensor"})
2631
),
2732
React.createElement("div", {className: "after"})
2833
)
29-
);
34+
)
3035
}
31-
});
36+
}
3237

3338
ReactDOM.render(React.createElement(Example), document.getElementById('example'));
3439

‎example/main.js‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,25 @@
22

33
var React = require('react');
44
var ReactDOM = require('react-dom')
5-
var createReactClass = require('create-react-class')
65
var VisibilitySensor = require('../');
76

8-
var Example = createReactClass({
9-
getInitialState: function () {
10-
return { msg: '' };
11-
},
7+
class Example extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
msg: ''
12+
};
1213

13-
onChange: function (isVisible) {
14+
this.onChange = this.onChange.bind(this);
15+
}
16+
17+
onChange(isVisible) {
1418
this.setState({
1519
msg: 'Element is now ' + (isVisible ? 'visible' : 'hidden')
1620
});
17-
},
21+
}
1822

19-
render: function () {
23+
render() {
2024
return (
2125
<div>
2226
<p className='msg'>{this.state.msg}</p>
@@ -34,9 +38,9 @@ var Example = createReactClass({
3438
</VisibilitySensor>
3539
<div className='after'></div>
3640
</div>
37-
);
41+
)
3842
}
39-
});
43+
}
4044

4145
ReactDOM.render(React.createElement(Example), document.getElementById('example'));
4246

‎visibility-sensor.js‎

Lines changed: 59 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
var React = require('react');
44
var ReactDOM = require('react-dom');
55
var PropTypes = require('prop-types');
6-
var createReactClass = require('create-react-class');
76
var isVisibleWithOffset = require('./lib/is-visible-with-offset')
87

98
function normalizeRect (rect) {
@@ -18,10 +17,24 @@ function normalizeRect (rect) {
1817
return rect;
1918
}
2019

21-
module.exports = createReactClass({
22-
displayName: 'VisibilitySensor',
20+
class VisibilitySensor extends React.Component {
21+
displayName = 'VisibilitySensor';
2322

24-
propTypes: {
23+
constructor(props) {
24+
super(props);
25+
this.state = {
26+
isVisible: null,
27+
visibilityRect: {}
28+
};
29+
30+
this.getContainer = this.getContainer.bind(this);
31+
this.addEventListener = this.addEventListener.bind(this);
32+
this.startWatching = this.startWatching.bind(this);
33+
this.stopWatching = this.stopWatching.bind(this);
34+
this.check = this.check.bind(this);
35+
}
36+
37+
static propTypes = {
2538
onChange: PropTypes.func,
2639
active: PropTypes.bool,
2740
partialVisibility: PropTypes.oneOfType([
@@ -56,47 +69,38 @@ module.exports = createReactClass({
5669
PropTypes.func,
5770
]),
5871
minTopValue: PropTypes.number,
59-
},
60-
61-
getDefaultProps: function () {
62-
return {
63-
active: true,
64-
partialVisibility: false,
65-
minTopValue: 0,
66-
scrollCheck: false,
67-
scrollDelay: 250,
68-
scrollThrottle: -1,
69-
resizeCheck: false,
70-
resizeDelay: 250,
71-
resizeThrottle: -1,
72-
intervalCheck: true,
73-
intervalDelay: 100,
74-
delayedCall: false,
75-
offset: {},
76-
containment: null,
77-
children: React.createElement('span')
78-
};
79-
},
72+
}
8073

81-
getInitialState: function () {
82-
return {
83-
isVisible: null,
84-
visibilityRect: {}
85-
};
86-
},
74+
static defaultProps = {
75+
active: true,
76+
partialVisibility: false,
77+
minTopValue: 0,
78+
scrollCheck: false,
79+
scrollDelay: 250,
80+
scrollThrottle: -1,
81+
resizeCheck: false,
82+
resizeDelay: 250,
83+
resizeThrottle: -1,
84+
intervalCheck: true,
85+
intervalDelay: 100,
86+
delayedCall: false,
87+
offset: {},
88+
containment: null,
89+
children: React.createElement('span')
90+
}
8791

88-
componentDidMount: function () {
92+
componentDidMount() {
8993
this.node = ReactDOM.findDOMNode(this);
9094
if (this.props.active) {
9195
this.startWatching();
9296
}
93-
},
97+
}
9498

95-
componentWillUnmount: function () {
99+
componentWillUnmount() {
96100
this.stopWatching();
97-
},
101+
}
98102

99-
componentDidUpdate: function(prevProps) {
103+
componentDidUpdate(prevProps) {
100104
// re-register node in componentDidUpdate if children diffs [#103]
101105
this.node = ReactDOM.findDOMNode(this);
102106

@@ -106,13 +110,13 @@ module.exports = createReactClass({
106110
} else if (!this.props.active) {
107111
this.stopWatching();
108112
}
109-
},
113+
}
110114

111-
getContainer: function () {
115+
getContainer() {
112116
return this.props.containment || window;
113-
},
117+
}
114118

115-
addEventListener: function (target, event, delay, throttle) {
119+
addEventListener(target, event, delay, throttle) {
116120
if (!this.debounceCheck) {
117121
this.debounceCheck = {};
118122
}
@@ -148,9 +152,9 @@ module.exports = createReactClass({
148152

149153
target.addEventListener(event, info.fn);
150154
this.debounceCheck[event] = info;
151-
},
155+
}
152156

153-
startWatching: function () {
157+
startWatching() {
154158
if (this.debounceCheck || this.interval) { return; }
155159

156160
if (this.props.intervalCheck) {
@@ -177,9 +181,9 @@ module.exports = createReactClass({
177181

178182
// if dont need delayed call, check on load ( before the first interval fires )
179183
!this.props.delayedCall && this.check();
180-
},
184+
}
181185

182-
stopWatching: function () {
186+
stopWatching() {
183187
if (this.debounceCheck) {
184188
// clean up event listeners and their debounce callers
185189
for (var debounceEvent in this.debounceCheck) {
@@ -198,7 +202,7 @@ module.exports = createReactClass({
198202
this.debounceCheck = null;
199203

200204
if (this.interval) { this.interval = clearInterval(this.interval); }
201-
},
205+
}
202206

203207
roundRectDown: function (rect) {
204208
return {
@@ -212,7 +216,7 @@ module.exports = createReactClass({
212216
/**
213217
* Check if the element is within the visible viewport
214218
*/
215-
check: function () {
219+
check () {
216220
var el = this.node;
217221
var rect;
218222
var containmentRect;
@@ -270,8 +274,8 @@ module.exports = createReactClass({
270274
// check for partial visibility
271275
if (hasSize && this.props.partialVisibility) {
272276
var partialVisible =
273-
rect.top <= containmentRect.bottom && rect.bottom >= containmentRect.top &&
274-
rect.left <= containmentRect.right && rect.right >= containmentRect.left;
277+
rect.top <= containmentRect.bottom && rect.bottom >= containmentRect.top &&
278+
rect.left <= containmentRect.right && rect.right >= containmentRect.left;
275279

276280
// account for partial visibility on a single edge
277281
if (typeof this.props.partialVisibility === 'string') {
@@ -287,7 +291,7 @@ module.exports = createReactClass({
287291

288292
// Deprecated options for calculating offset.
289293
if (typeof offset.direction === 'string' &&
290-
typeof offset.value === 'number') {
294+
typeof offset.value === 'number') {
291295
console.warn('[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }', offset.direction, offset.value)
292296

293297
isVisible = isVisibleWithOffset(offset, rect, containmentRect);
@@ -301,13 +305,13 @@ module.exports = createReactClass({
301305
visibilityRect: visibilityRect
302306
};
303307
this.setState(state);
304-
if (this.props.onChange) this.props.onChange(isVisible, visibilityRect);
308+
if (this.props.onChange) this.props.onChange(isVisible);
305309
}
306310

307311
return state;
308-
},
312+
}
309313

310-
render: function () {
314+
render() {
311315
if (this.props.children instanceof Function) {
312316
return this.props.children({
313317
isVisible: this.state.isVisible,
@@ -316,4 +320,6 @@ module.exports = createReactClass({
316320
}
317321
return React.Children.only(this.props.children);
318322
}
319-
});
323+
}
324+
325+
module.exports = VisibilitySensor

0 commit comments

Comments
 (0)