react-visibility-sensor - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

example/main.js

@@ -25,5 +25,5 @@ /** @jsx React.DOM */
         <div className='before'></div>
-        <VisibilitySensor containment={this.props.containment} onChange={this.onChange}>
-          <div className='sensor' />
-        </VisibilitySensor>
+        <div className='sensor'>
+          <VisibilitySensor containment={this.props.containment} onChange={this.onChange} />
+        </div>
         <div className='after'></div>
@@ -30,0 +30,0 @@ </div>

package.json

 {
   "name": "react-visibility-sensor",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Sensor component for React that notifies you when it goes in or out of the window viewport.",
   "main": "visibility-sensor.js",
   "scripts": {
-    "build-example": "mkdir -p example/dist && browserify -t reactify -o example/dist/bundle.js example/main.js",
+    "build-example": "browserify -t reactify -o example/dist/bundle.js example/main.js",
     "build-test": "browserify -t reactify -o tests/bundle.js tests/visibility-sensor-spec.jsx",
@@ -32,4 +32,3 @@ "publish-gh-pages": "npm run build-example && ./bin/publish-gh-pages",
     "react-addons": "^0.9.0",
-    "react-tools": "^0.11.1",
-    "reactify": "^0.14.0"
+    "react-tools": "^0.11.1"
   },
@@ -47,3 +46,5 @@ "browserify": {
   },
-  "dependencies": {}
+  "dependencies": {
+    "reactify": "^0.14.0"
+  }
 }

tests/visibility-sensor-spec.jsx

@@ -9,12 +9,12 @@ /** @jsx React.DOM */
 describe('VisibilitySensor', function () {
-  var node;
+  var elem;
 
   beforeEach(function () {
-    node = document.createElement('div');
-    document.body.appendChild(node);
+    elem = document.createElement('div');
+    document.body.appendChild(elem);
   });
 
   afterEach(function () {
-    React.unmountComponentAtNode(node);
-    document.body.removeChild(node);
+    React.unmountComponentAtNode(elem);
+    document.body.removeChild(elem);
   });
@@ -24,3 +24,4 @@
 
-  it('should notify of changes to visibility when parent moves', function (done) {
+  it('should notify of changes to visibility', function (done) {
+    var component;
     var firstTime = true;
@@ -32,3 +33,3 @@ var onChange = function (isVisible) {
         assert.equal(isVisible, true, 'Component starts out visible');
-        node.setAttribute('style', 'position:absolute; width:100px; left:-101px');
+        elem.setAttribute('style', 'position:absolute; width:100px; left:-101px');
       }
@@ -42,44 +43,11 @@ // after moving the sensor it should be not visible anymore
 
-    var element = (
+    component = (
       <VisibilitySensor delay={10} onChange={onChange} />
     );
 
-    React.render(element, node);
+    React.render(component, elem);
   });
 
-  it('should notify of changes to visibility when child moves', function (done) {
-    var firstTime = true;
-    var style = {};
-    var onChange = function (isVisible) {
-      // by default we expect the sensor to be visible
-      if (firstTime) {
-        firstTime = false;
-        assert.equal(isVisible, true, 'Component starts out visible');
-        style = {
-          position: 'absolute',
-          width: 100,
-          left: -101
-        };
-        React.render(getElement(style), node);
-      }
-      // after moving the sensor it should be not visible anymore
-      else {
-        assert.equal(isVisible, false, 'Component has moved out of the visible viewport');
-        done();
-      }
-    };
-
-    function getElement(style) {
-      return (
-        <VisibilitySensor delay={10} onChange={onChange}>
-          <div style={style} />
-        </VisibilitySensor>
-      );
-    }
-
-    React.render(getElement(), node);
-  });
-
-
   it('should notify of changes to visibility', function (done) {
+    var component;
     var onChange = function (isVisible) {
@@ -89,10 +57,11 @@ assert.equal(isVisible, true, 'Component starts out visible');
     };
-    var element = (
+    component = (
       <VisibilitySensor delay={1} onChange={onChange} />
     );
 
-    React.render(element, node);
+    React.render(component, elem);
   });
 
   it('should not notify when deactivated', function (done) {
+    var component;
     var wasCallbackCalled = false;
@@ -108,8 +77,8 @@ var onChange = function (isVisible) {
 
-    var element = (
+    component = (
       <VisibilitySensor active={false} delay={1} onChange={onChange} />
     );
 
-    React.render(element, node);
+    React.render(component, elem);
   });
 });

visibility-sensor.js

@@ -5,8 +5,2 @@ 'use strict';
 
-var containmentPropType = React.PropTypes.any;
-
-if (typeof window !== 'undefined') {
-  containmentPropType = React.PropTypes.instanceOf(Element);
-}
-
 module.exports = React.createClass({
@@ -19,4 +13,5 @@ displayName: 'VisibilitySensor',
     delay: React.PropTypes.number,
-    containment: containmentPropType,
-    children: React.PropTypes.element
+    containment: React.PropTypes.instanceOf(Element),
+    className: React.PropTypes.string,
+    style: React.PropTypes.object
   },
@@ -28,4 +23,3 @@
       delay: 1000,
-      containment: null,
-      children: React.createElement('span')
+      containment: null
     };
@@ -116,4 +110,7 @@ },
   render: function () {
-    return React.Children.only(this.props.children);
+    return React.createElement('div', {
+      className: this.props.className,
+      style: this.props.style
+    }, [this.props.children]);
   }
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

10

decreased by-9.09%

Worsened metrics

Total package byte prevSize

15633

decreased by-5.94%

Dependency count

2

increased by100%

Lines of code

314

decreased by-8.19%

Dependency changes

• + Addedreactify@^0.14.0

• + Addedast-types@0.4.13(transitive)

• + Addedbase62@0.1.1(transitive)

• + Addedcls@0.1.5(transitive)

• + Addedcommander@2.2.0(transitive)

• + Addedcommoner@0.9.8(transitive)

• + Addeddepd@1.0.1(transitive)

• + Addedesprima-fb@6001.1.0-dev-harmony-fb6001.1001.0-dev-harmony-fb(transitive)

• + Addedglob@3.2.11(transitive)

• + Addedgraceful-fs@2.0.3(transitive)

• + Addediconv-lite@0.2.11(transitive)

• + Addedinstall@0.1.8(transitive)

• + Addedjstransform@6.3.2(transitive)

• + Addedlru-cache@2.7.3(transitive)

• + Addedminimatch@0.3.0(transitive)

• + Addedmkdirp@0.3.5(transitive)

• + Addedq@1.0.1(transitive)

• + Addedreact-tools@0.11.2(transitive)

• + Addedreactify@0.14.1(transitive)

• + Addedrecast@0.7.5(transitive)

• + Addedsigmund@1.0.1(transitive)

• + Addedsource-map@0.1.310.1.32(transitive)