react-scroll - npm Package Compare versions

Comparing version 0.35.0 to 0.36.0

lib/components/Button.js

@@ -8,24 +8,7 @@ "use strict";
 var Button = React.createClass({
-  mixins: [Helpers.Scroll],
-  getInitialState : function() {
-    return { active : false};
-  },
-  getDefaultProps: function() {
-    return {
-      className: ""
-    };
-  },
   render: function () {
-
-    var activeClass = this.state.active ? (this.props.activeClass || "active") : "";
-
-    var props = assign({}, this.props, {
-      onClick: this.onClick,
-      className : [this.props.className, activeClass].join(" ").trim()
-    });
-
-    return React.DOM.input(props, this.props.children);
+    return React.DOM.input(this.props, this.props.children);
   }
 });
 
-module.exports = Button;
+module.exports = Helpers.Scroll(Button);

lib/components/Element.js

 "use strict";
 
 var React = require('react');
-var assign = require('react/lib/Object.assign');
 var Helpers = require('../mixins/Helpers');
 
 var Element = React.createClass({
-  mixins: [Helpers.Element],
   render: function () {
-    /*
-     * Not sure if should allow more then one property?
-     */
-
-    var className = this.props.className || "";
-    
-    var props = assign({}, this.props, {
-      className: this.props.className
-    });
-
-    return React.DOM.div(props, this.props.children);
+    return React.DOM.div(this.props, this.props.children);
   }
 });
 
-module.exports = Element;
+module.exports = Helpers.Element(Element);

lib/components/Link.js

@@ -8,24 +8,7 @@ "use strict";
 var Link = React.createClass({
-  mixins: [Helpers.Scroll],
-  getInitialState : function() {
-    return { active : false};
-  },
-  getDefaultProps: function() {
-    return {
-      className: ""
-    };
-  },
   render: function () {
-
-    var activeClass = this.state.active ? (this.props.activeClass || "active") : "";
-
-    var props = assign({}, this.props, {
-      onClick: this.onClick,
-      className : [this.props.className, activeClass].join(" ").trim()
-    });
-
-    return React.DOM.a(props, this.props.children);
+    return React.DOM.a(this.props, this.props.children);
   }
 });
 
-module.exports = Link;
+module.exports = Helpers.Scroll(Link);

lib/mixins/Helpers.js

@@ -5,2 +5,5 @@ "use strict";
 var ReactDOM = require('react-dom');
+
+const { bool, object, string, func, number } = React.PropTypes
+
 var animateScroll = require('./animate-scroll');
@@ -12,104 +15,126 @@ var scrollSpy = require('./scroll-spy');
   
-  Scroll: {
+  Scroll: function (Component) {
 
-    propTypes: {
-      to: React.PropTypes.string.isRequired,
-      offset: React.PropTypes.number
-    },
+    return React.createClass({
 
-    getDefaultProps: function() {
-      return {offset: 0};
-    },
+      propTypes: {
+        to: string.isRequired,
+        offset: number,
+        onClick: func
+      },
 
-    scrollTo : function(to) {
-      scroller.scrollTo(to, this.props.smooth, this.props.duration, this.props.offset);
-    },
+      getDefaultProps: function() {
+        return {offset: 0};
+      },
 
-    onClick: function(event) {
+      scrollTo : function(to) {
+        scroller.scrollTo(to, this.props.smooth, this.props.duration, this.props.offset);
+      },
 
-      /*
-       * give the posibility to override onClick
-       */
+      handleClick: function(event) {
 
-      if(this.props.onClick) {
-        this.props.onClick(event);
-      }
+        /*
+         * give the posibility to override onClick
+         */
 
-      /*
-       * dont bubble the navigation
-       */
+        if(this.props.onClick) {
+          this.props.onClick(event);
+        }
 
-      if (event.stopPropagation) event.stopPropagation();
-      if (event.preventDefault) event.preventDefault();
+        /*
+         * dont bubble the navigation
+         */
 
-      /*
-       * do the magic!
-       */
+        if (event.stopPropagation) event.stopPropagation();
+        if (event.preventDefault) event.preventDefault();
 
-      this.scrollTo(this.props.to);
+        /*
+         * do the magic!
+         */
 
-    },
+        this.scrollTo(this.props.to);
 
-    componentDidMount: function() {
-      scrollSpy.mount();
+      },
 
-      if(this.props.spy) {
-        var to = this.props.to;
-        var element = null;
-        var elemTopBound = 0;
-        var elemBottomBound = 0;
+      componentDidMount: function() {
 
-        scrollSpy.addStateHandler((function() {
-          if(scroller.getActiveLink() != to) {
-              this.setState({ active : false });
-          }
-        }).bind(this));
+        scrollSpy.mount();
 
-        scrollSpy.addSpyHandler((function(y) {
+        if(this.props.spy) {
+          var to = this.props.to;
+          var element = null;
+          var elemTopBound = 0;
+          var elemBottomBound = 0;
 
-          if(!element) {
-              element = scroller.get(to);
+          scrollSpy.addStateHandler((function() {
+            if(scroller.getActiveLink() != to) {
+                this.setState({ active : false });
+            }
+          }).bind(this));
 
-              var cords = element.getBoundingClientRect();
-              elemTopBound = (cords.top + y);
-              elemBottomBound = elemTopBound + cords.height;
-          }
+          scrollSpy.addSpyHandler((function(y) {
 
-          var offsetY = y - this.props.offset;
-          var isInside = (offsetY >= elemTopBound && offsetY <= elemBottomBound);
-          var isOutside = (offsetY < elemTopBound || offsetY > elemBottomBound);
-          var activeLnik = scroller.getActiveLink();
+            if(!element) {
+                element = scroller.get(to);
 
-          if (isOutside && activeLnik === to) {
+                var cords = element.getBoundingClientRect();
+                elemTopBound = (cords.top + y);
+                elemBottomBound = elemTopBound + cords.height;
+            }
 
-            scroller.setActiveLink(void 0);
-            this.setState({ active : false });
+            var offsetY = y - this.props.offset;
+            var isInside = (offsetY >= elemTopBound && offsetY <= elemBottomBound);
+            var isOutside = (offsetY < elemTopBound || offsetY > elemBottomBound);
+            var activeLink = scroller.getActiveLink();
 
-          } else if (isInside && activeLnik != to) {
+            if (isOutside && activeLink === to) {
+              scroller.setActiveLink(void 0);
+              this.setState({ active : false });
 
-            scroller.setActiveLink(to);
-            this.setState({ active : true });
-            if(this.props.onSetActive) this.props.onSetActive(to);
-            scrollSpy.updateStates();
-          }
-        }).bind(this));
+            } else if (isInside && activeLink != to) {
+              scroller.setActiveLink(to);
+              this.setState({ active : true });
+              
+              if(this.props.onSetActive) {
+                this.props.onSetActive(to);
+              }
+
+              scrollSpy.updateStates();
+
+            }
+          }).bind(this));
+        }
+      },
+      componentWillUnmount: function() {
+        scrollSpy.unmount();
+      },
+      render: function() {
+        var className = "";
+        if(this.state && this.state.active) {
+          className = ((this.props.className || "") + " " + (this.props.activeClass || "active")).trim();
+        } else {
+          className = this.props.className
+        }
+        return <Component {...this.props} {...this.state} className={className}  onClick={this.handleClick} />;
       }
-    },
-    componentWillUnmount: function() {
-      scrollSpy.unmount();
-    }
+    });
   },
 
 
-  Element: {
-    propTypes: {
-      name: React.PropTypes.string.isRequired
-    },
-    componentDidMount: function() {
-      var domNode = ReactDOM.findDOMNode(this);
-      scroller.register(this.props.name, domNode);
-    },
-    componentWillUnmount: function() {
-      scroller.unregister(this.props.name);
-    }
+  Element: function(Component) {
+    return React.createClass({
+      propTypes: {
+        name: React.PropTypes.string.isRequired
+      },
+      componentDidMount: function() {
+        var domNode = ReactDOM.findDOMNode(this);
+        scroller.register(this.props.name, domNode);
+      },
+      componentWillUnmount: function() {
+        scroller.unregister(this.props.name);
+      },
+      render: function() {
+        return <Component {...this.props} {...this.state} />;
+      }
+    });
   }
@@ -116,0 +141,0 @@ };

package.json

 {
   "name": "react-scroll",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "A scroll component for React.js",
@@ -5,0 +5,0 @@ "main": "lib",

README.md

 ## React Scroll
 
 Directive for basic scrolling and smooth scrolling.
-I love contributions, just make sure your test passes.
+Mixins has been removed and replaced with high ordered components (2016-02-02)
 
@@ -28,19 +28,17 @@ ### Install
 
-var React = require('react');
-var Scroll = require('react-scroll'); 
+var React   = require('react');
+var Scroll  = require('react-scroll'); 
 
-var Link = Scroll.Link;
+var Link    = Scroll.Link;
 var Element = Scroll.Element;
+var Events  = Scroll.Events;
 
-var Events = Scroll.Events;
-
 var Section = React.createClass({
-  mixins: [Events],
   componentDidMount: function() {
 
-    this.scrollEvent.register('begin', function(to, element) {
+    Events.scrollEvent.register('begin', function(to, element) {
       console.log("begin", arguments);
     });
 
-    this.scrollEvent.register('end', function(to, element) {
+    Events.scrollEvent.register('end', function(to, element) {
       console.log("end", arguments);
@@ -51,9 +49,9 @@ });
   componentWillUnmount: function() {
-    this.scrollEvent.remove('begin');
-    this.scrollEvent.remove('end');
+    Events.scrollEvent.remove('begin');
+    Events.scrollEvent.remove('end');
   },
   render: function () {
   	return (
-  		<Link to="test1" spy={true} smooth={true} offset={50} duration={500} >Test 1</Link>
-		<Button className="btn" type="submit" value="Test 2" to="test2" spy={true} smooth={true} offset={50} duration={500} >Test 2</Button>
+  		<Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} >Test 1</Link>
+		  <Button activeClass="active" className="btn" type="submit" value="Test 2" to="test2" spy={true} smooth={true} offset={50} duration={500} >Test 2</Button>
 
@@ -115,11 +113,10 @@ <Element name="test1" className="element">
 #### Create your own Link/Element
-> Simply just include the mixins!
+> Simply just pass your component to one of the high order components (Element/Scroll)
 
 ```js
-var React = require('react');
-var Scroll = require('react-scroll'); 
+var React   = require('react');
+var Scroll  = require('react-scroll'); 
 var Helpers = Scroll.Helpers;
 
 var Element = React.createClass({
-  mixins: [Helpers.Element],
   render: function () {
@@ -134,7 +131,8 @@ return (
 
+module.exports = Helpers.Element(Element);
+
 var Link = React.createClass({
-  mixins: [Helpers.Scroll],
   render: function () {
     return (
-      <a onClick={this.onClick}>
+      <a>
         {this.props.children}
@@ -146,2 +144,4 @@ </a>
 
+module.exports = Helpers.Scroll(Link);
+
 ```

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

Worsened metrics

Total package byte prevSize

21290

decreased by-0.23%

Lines of code

527

decreased by-3.12%

No dependency changes