Merge branch 'master' of https://github.com/catchonme/react-visibility-sensor into catchonme-master

Author: joshwnj

example-umd/main.js

@@ -1,34 +1,39 @@
 'use strict';
 
-var Example = React.createClass({
-  getInitialState: function () {
-    return { msg: '' };
-  },
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      msg: ''
+    };
 
-  onChange: function (isVisible) {
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(isVisible) {
     this.setState({
       msg: 'Element is now ' + (isVisible ? 'visible' : 'hidden')
     });
-  },
+  }
 
-  render: function () {
+  render() {
     return (
       React.createElement("div", null,
         React.createElement("p", {className: "msg"}, this.state.msg),
         React.createElement("div", {className: "before"}),
         React.createElement(VisibilitySensor, {
-          containment: this.props.containment,
-          onChange: this.onChange,
-          minTopValue: this.props.minTopValue,
-          partialVisibility: this.props.partialVisibility
-        },
+            containment: this.props.containment,
+            onChange: this.onChange,
+            minTopValue: this.props.minTopValue,
+            partialVisibility: this.props.partialVisibility
+          },
           React.createElement("div", {className: "sensor"})
         ),
         React.createElement("div", {className: "after"})
       )
-    );
+    )
   }
-});
+}
 
 ReactDOM.render(React.createElement(Example), document.getElementById('example'));
 

example/main.js

@@ -2,21 +2,25 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom')
-var createReactClass = require('create-react-class')
 var VisibilitySensor = require('../');
 
-var Example = createReactClass({
-  getInitialState: function () {
-    return { msg: '' };
-  },
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      msg: ''
+    };
 
-  onChange: function (isVisible) {
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(isVisible) {
     this.setState({
       msg: 'Element is now ' + (isVisible ? 'visible' : 'hidden')
     });
-  },
+  }
 
-  render: function () {
+  render() {
     return (
       <div>
         <p className='msg'>{this.state.msg}</p>
@@ -34,9 +38,9 @@ var Example = createReactClass({
         </VisibilitySensor>
         <div className='after'></div>
       </div>
-    );
+    )
   }
-});
+}
 
 ReactDOM.render(React.createElement(Example), document.getElementById('example'));
 

visibility-sensor.js

@@ -3,7 +3,6 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 var PropTypes = require('prop-types');
-var createReactClass = require('create-react-class');
 var isVisibleWithOffset = require('./lib/is-visible-with-offset')
 
 function normalizeRect (rect) {
@@ -18,10 +17,24 @@ function normalizeRect (rect) {
   return rect;
 }
 
-module.exports = createReactClass({
-  displayName: 'VisibilitySensor',
+class VisibilitySensor extends React.Component {
+  displayName = 'VisibilitySensor';
 
-  propTypes: {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isVisible: null,
+      visibilityRect: {}
+    };
+
+    this.getContainer = this.getContainer.bind(this);
+    this.addEventListener = this.addEventListener.bind(this);
+    this.startWatching = this.startWatching.bind(this);
+    this.stopWatching = this.stopWatching.bind(this);
+    this.check = this.check.bind(this);
+  }
+
+  static propTypes = {
     onChange: PropTypes.func,
     active: PropTypes.bool,
     partialVisibility: PropTypes.oneOfType([
@@ -56,47 +69,38 @@ module.exports = createReactClass({
       PropTypes.func,
     ]),
     minTopValue: PropTypes.number,
-  },
-
-  getDefaultProps: function () {
-    return {
-      active: true,
-      partialVisibility: false,
-      minTopValue: 0,
-      scrollCheck: false,
-      scrollDelay: 250,
-      scrollThrottle: -1,
-      resizeCheck: false,
-      resizeDelay: 250,
-      resizeThrottle: -1,
-      intervalCheck: true,
-      intervalDelay: 100,
-      delayedCall: false,
-      offset: {},
-      containment: null,
-      children: React.createElement('span')
-    };
-  },
+  }
 
-  getInitialState: function () {
-    return {
-      isVisible: null,
-      visibilityRect: {}
-    };
-  },
+  static defaultProps = {
+    active: true,
+    partialVisibility: false,
+    minTopValue: 0,
+    scrollCheck: false,
+    scrollDelay: 250,
+    scrollThrottle: -1,
+    resizeCheck: false,
+    resizeDelay: 250,
+    resizeThrottle: -1,
+    intervalCheck: true,
+    intervalDelay: 100,
+    delayedCall: false,
+    offset: {},
+    containment: null,
+    children: React.createElement('span')
+  }
 
-  componentDidMount: function () {
+  componentDidMount() {
     this.node = ReactDOM.findDOMNode(this);
     if (this.props.active) {
       this.startWatching();
     }
-  },
+  }
 
-  componentWillUnmount: function () {
+  componentWillUnmount() {
     this.stopWatching();
-  },
+  }
 
-  componentDidUpdate: function(prevProps) {
+  componentDidUpdate(prevProps) {
     // re-register node in componentDidUpdate if children diffs [#103]
     this.node = ReactDOM.findDOMNode(this);
 
@@ -106,13 +110,13 @@ module.exports = createReactClass({
     } else if (!this.props.active) {
       this.stopWatching();
     }
-  },
+  }
 
-  getContainer: function () {
+  getContainer() {
     return this.props.containment || window;
-  },
+  }
 
-  addEventListener: function (target, event, delay, throttle) {
+  addEventListener(target, event, delay, throttle) {
     if (!this.debounceCheck) {
       this.debounceCheck = {};
     }
@@ -148,9 +152,9 @@ module.exports = createReactClass({
 
     target.addEventListener(event, info.fn);
     this.debounceCheck[event] = info;
-  },
+  }
 
-  startWatching: function () {
+  startWatching() {
     if (this.debounceCheck || this.interval) { return; }
 
     if (this.props.intervalCheck) {
@@ -177,9 +181,9 @@ module.exports = createReactClass({
 
     // if dont need delayed call, check on load ( before the first interval fires )
     !this.props.delayedCall && this.check();
-  },
+  }
 
-  stopWatching: function () {
+  stopWatching() {
     if (this.debounceCheck) {
       // clean up event listeners and their debounce callers
       for (var debounceEvent in this.debounceCheck) {
@@ -198,7 +202,7 @@ module.exports = createReactClass({
     this.debounceCheck = null;
 
     if (this.interval) { this.interval = clearInterval(this.interval); }
-  },
+  }
 
   roundRectDown: function (rect) {
     return {
@@ -212,7 +216,7 @@ module.exports = createReactClass({
   /**
    * Check if the element is within the visible viewport
    */
-  check: function () {
+  check () {
     var el = this.node;
     var rect;
     var containmentRect;
@@ -270,8 +274,8 @@ module.exports = createReactClass({
     // check for partial visibility
     if (hasSize && this.props.partialVisibility) {
       var partialVisible =
-          rect.top <= containmentRect.bottom && rect.bottom >= containmentRect.top &&
-          rect.left <= containmentRect.right && rect.right >= containmentRect.left;
+        rect.top <= containmentRect.bottom && rect.bottom >= containmentRect.top &&
+        rect.left <= containmentRect.right && rect.right >= containmentRect.left;
 
       // account for partial visibility on a single edge
       if (typeof this.props.partialVisibility === 'string') {
@@ -287,7 +291,7 @@ module.exports = createReactClass({
 
     // Deprecated options for calculating offset.
     if (typeof offset.direction === 'string' &&
-        typeof offset.value === 'number') {
+      typeof offset.value === 'number') {
       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)
 
       isVisible = isVisibleWithOffset(offset, rect, containmentRect);
@@ -301,13 +305,13 @@ module.exports = createReactClass({
         visibilityRect: visibilityRect
       };
       this.setState(state);
-      if (this.props.onChange) this.props.onChange(isVisible, visibilityRect);
+      if (this.props.onChange) this.props.onChange(isVisible);
     }
 
     return state;
-  },
+  }
 
-  render: function () {
+  render() {
     if (this.props.children instanceof Function) {
       return this.props.children({
         isVisible: this.state.isVisible,
@@ -316,4 +320,6 @@ module.exports = createReactClass({
     }
     return React.Children.only(this.props.children);
   }
-});
+}
+
+module.exports = VisibilitySensor