react-marquee - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

lib/index.js

 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -7,2 +9,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactDom = require('react-dom');
@@ -14,2 +20,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var FPS = 20;
@@ -19,160 +31,189 @@ var STEP = 1;
 
-var Marquee = _react2.default.createClass({
-  displayName: 'Marquee',
+var Marquee = function (_Component) {
+  _inherits(Marquee, _Component);
 
-  propTypes: {
-    text: _react.PropTypes.string,
-    hoverToStop: _react.PropTypes.bool,
-    loop: _react.PropTypes.bool,
-    leading: _react.PropTypes.number,
-    trailing: _react.PropTypes.number,
-    className: _react.PropTypes.string
-  },
+  function Marquee(props) {
+    _classCallCheck(this, Marquee);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      text: '',
-      hoverToStop: false,
-      loop: false,
-      leading: 0,
-      trailing: 0
-    };
-  },
-  getInitialState: function getInitialState() {
-    return {
+    var _this = _possibleConstructorReturn(this, (Marquee.__proto__ || Object.getPrototypeOf(Marquee)).call(this, props));
+
+    _this.state = {
       animatedWidth: 0,
       overflowWidth: 0
     };
-  },
-  componentDidMount: function componentDidMount() {
-    this._measureText();
 
-    if (this.props.hoverToStop) {
-      this._startAnimation();
+    _this.handleMouseEnter = _this.handleMouseEnter.bind(_this);
+    _this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
+    return _this;
+  }
+
+  _createClass(Marquee, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this._measureText();
+
+      if (this.props.hoverToStop) {
+        this._startAnimation();
+      }
     }
-  },
-  componentDidUpdate: function componentDidUpdate() {
-    this._measureText();
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this._measureText();
 
-    if (this.props.hoverToStop) {
-      this._startAnimation();
+      if (this.props.hoverToStop) {
+        this._startAnimation();
+      }
     }
-  },
-  componentWillUnmount: function componentWillUnmount() {
-    clearTimeout(this._marqueeTimer);
-  },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (this.props.text.length != nextProps.text.length) {
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
       clearTimeout(this._marqueeTimer);
-      this.setState({
-        animatedWidth: 0
-      });
     }
-  },
-  handleMouseEnter: function handleMouseEnter() {
-    if (this.props.hoverToStop) {
-      clearTimeout(this._marqueeTimer);
-    } else if (this.state.overflowWidth > 0) {
-      this._startAnimation();
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.text.length != nextProps.text.length) {
+        clearTimeout(this._marqueeTimer);
+        this.setState({
+          animatedWidth: 0
+        });
+      }
     }
-  },
-  handleMouseLeave: function handleMouseLeave() {
-    if (this.props.hoverToStop && this.state.overflowWidth > 0) {
-      this._startAnimation();
-    } else {
-      clearTimeout(this._marqueeTimer);
-      this.setState({
-        animatedWidth: 0
-      });
+  }, {
+    key: 'handleMouseEnter',
+    value: function handleMouseEnter() {
+      if (this.props.hoverToStop) {
+        clearTimeout(this._marqueeTimer);
+      } else if (this.state.overflowWidth > 0) {
+        this._startAnimation();
+      }
     }
-  },
-  render: function render() {
-    var style = {
-      'position': 'relative',
-      'right': this.state.animatedWidth,
-      'whiteSpace': 'nowrap'
-    };
+  }, {
+    key: 'handleMouseLeave',
+    value: function handleMouseLeave() {
+      if (this.props.hoverToStop && this.state.overflowWidth > 0) {
+        this._startAnimation();
+      } else {
+        clearTimeout(this._marqueeTimer);
+        this.setState({
+          animatedWidth: 0
+        });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var style = {
+        'position': 'relative',
+        'right': this.state.animatedWidth,
+        'whiteSpace': 'nowrap'
+      };
 
-    if (this.state.overflowWidth < 0) {
-      return _react2.default.createElement(
-        'div',
-        { className: 'ui-marquee ' + this.props.className, style: { overflow: 'hidden' } },
-        _react2.default.createElement(
-          'span',
-          { ref: 'text', style: style, title: this.props.text },
-          this.props.text
-        )
-      );
-    } else {
-      return _react2.default.createElement(
-        'div',
-        { className: 'ui-marquee ' + this.props.className, style: { overflow: 'hidden' },
-          onMouseEnter: this.handleMouseEnter,
-          onMouseLeave: this.handleMouseLeave },
-        _react2.default.createElement(
-          'span',
-          { ref: 'text', style: style, title: this.props.text },
-          this.props.text
-        )
-      );
+      if (this.state.overflowWidth < 0) {
+        return _react2.default.createElement(
+          'div',
+          { className: 'ui-marquee ' + this.props.className, style: { overflow: 'hidden' } },
+          _react2.default.createElement(
+            'span',
+            { ref: 'text', style: style, title: this.props.text },
+            this.props.text
+          )
+        );
+      } else {
+        return _react2.default.createElement(
+          'div',
+          { className: 'ui-marquee ' + this.props.className, style: { overflow: 'hidden' },
+            onMouseEnter: this.handleMouseEnter,
+            onMouseLeave: this.handleMouseLeave },
+          _react2.default.createElement(
+            'span',
+            { ref: 'text', style: style, title: this.props.text },
+            this.props.text
+          )
+        );
+      }
     }
-  },
-  _startAnimation: function _startAnimation() {
-    var _this = this;
+  }, {
+    key: '_startAnimation',
+    value: function _startAnimation() {
+      var _this2 = this;
 
-    clearTimeout(this._marqueeTimer);
-    var isLeading = this.state.animatedWidth === 0;
-    var timeout = isLeading ? this.props.leading : TIMEOUT;
+      clearTimeout(this._marqueeTimer);
+      var isLeading = this.state.animatedWidth === 0;
+      var timeout = isLeading ? this.props.leading : TIMEOUT;
 
-    var animate = function animate() {
-      var overflowWidth = _this.state.overflowWidth;
+      var animate = function animate() {
+        var overflowWidth = _this2.state.overflowWidth;
 
-      var animatedWidth = _this.state.animatedWidth + STEP;
-      var isRoundOver = animatedWidth > overflowWidth;
+        var animatedWidth = _this2.state.animatedWidth + STEP;
+        var isRoundOver = animatedWidth > overflowWidth;
 
-      if (isRoundOver) {
-        if (_this.props.loop) {
-          animatedWidth = 0;
-        } else {
-          return;
+        if (isRoundOver) {
+          if (_this2.props.loop) {
+            animatedWidth = 0;
+          } else {
+            return;
+          }
         }
-      }
 
-      if (isRoundOver && _this.props.trailing) {
-        _this._marqueeTimer = setTimeout(function () {
-          _this.setState({
+        if (isRoundOver && _this2.props.trailing) {
+          _this2._marqueeTimer = setTimeout(function () {
+            _this2.setState({
+              animatedWidth: animatedWidth
+            });
+
+            _this2._marqueeTimer = setTimeout(animate, TIMEOUT);
+          }, _this2.props.trailing);
+        } else {
+          _this2.setState({
             animatedWidth: animatedWidth
           });
 
-          _this._marqueeTimer = setTimeout(animate, TIMEOUT);
-        }, _this.props.trailing);
-      } else {
-        _this.setState({
-          animatedWidth: animatedWidth
-        });
+          _this2._marqueeTimer = setTimeout(animate, TIMEOUT);
+        }
+      };
 
-        _this._marqueeTimer = setTimeout(animate, TIMEOUT);
-      }
-    };
+      this._marqueeTimer = setTimeout(animate, timeout);
+    }
+  }, {
+    key: '_measureText',
+    value: function _measureText() {
+      var container = _reactDom2.default.findDOMNode(this);
+      var node = _reactDom2.default.findDOMNode(this.refs.text);
 
-    this._marqueeTimer = setTimeout(animate, timeout);
-  },
-  _measureText: function _measureText() {
-    var container = _reactDom2.default.findDOMNode(this);
-    var node = _reactDom2.default.findDOMNode(this.refs.text);
+      if (container && node) {
+        var containerWidth = container.offsetWidth;
+        var textWidth = node.offsetWidth;
+        var overflowWidth = textWidth - containerWidth;
 
-    if (container && node) {
-      var containerWidth = container.offsetWidth;
-      var textWidth = node.offsetWidth;
-      var overflowWidth = textWidth - containerWidth;
-
-      if (overflowWidth !== this.state.overflowWidth) {
-        this.setState({
-          overflowWidth: overflowWidth
-        });
+        if (overflowWidth !== this.state.overflowWidth) {
+          this.setState({
+            overflowWidth: overflowWidth
+          });
+        }
       }
     }
-  }
-});
+  }]);
 
+  return Marquee;
+}(_react.Component);
+
+Marquee.defaultProps = {
+  text: '',
+  hoverToStop: false,
+  loop: false,
+  leading: 0,
+  trailing: 0
+};
+
+Marquee.propTypes = {
+  text: _propTypes2.default.string,
+  hoverToStop: _propTypes2.default.bool,
+  loop: _propTypes2.default.bool,
+  leading: _propTypes2.default.number,
+  trailing: _propTypes2.default.number,
+  className: _propTypes2.default.string
+};
+
 module.exports = Marquee;

package.json

 {
   "name": "react-marquee",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "A <marquee> component for React",
@@ -28,5 +28,8 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "react": "~0.14.0",
-    "react-dom": "~0.14.0"
+    "react": "~0.14.0 || ~15.0.0 || ~16.0.0",
+    "react-dom": "~0.14.0 || ~15.0.0 || ~16.0.0"
+  },
+  "dependencies": {
+    "prop-types": "*"
   }
 }

src/index.js

@@ -1,2 +0,3 @@
-import React, {PropTypes} from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
@@ -8,29 +9,14 @@
 
-const Marquee = React.createClass({
-  propTypes: {
-    text: PropTypes.string,
-    hoverToStop: PropTypes.bool,
-    loop: PropTypes.bool,
-    leading: PropTypes.number,
-    trailing: PropTypes.number,
-    className: PropTypes.string
-  },
-
-  getDefaultProps() {
-    return {
-      text: '',
-      hoverToStop: false,
-      loop: false,
-      leading: 0,
-      trailing: 0
-    };
-  },
-
-  getInitialState() {
-    return {
+class Marquee extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
       animatedWidth: 0,
       overflowWidth: 0
-    };
-  },
+    }
 
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+  }
+
   componentDidMount() {
@@ -42,3 +28,3 @@ this._measureText();
     }
-  },
+  }
 
@@ -51,7 +37,7 @@ componentDidUpdate() {
     }
-  },
+  }
 
   componentWillUnmount() {
     clearTimeout(this._marqueeTimer);
-  },
+  }
 
@@ -66,3 +52,3 @@ componentWillReceiveProps(nextProps) {
           }
-  },
+  }
 
@@ -76,3 +62,3 @@ handleMouseEnter() {
     }
-  },
+  }
 
@@ -89,3 +75,3 @@ handleMouseLeave() {
     }
-  },
+  }
 
@@ -115,3 +101,3 @@ render() {
     }
-  },
+  }
 
@@ -156,3 +142,3 @@ _startAnimation() {
     this._marqueeTimer = setTimeout(animate, timeout);
-  },
+  }
 
@@ -175,4 +161,21 @@ _measureText() {
   }
-});
+}
 
+Marquee.defaultProps = {
+  text: '',
+  hoverToStop: false,
+  loop: false,
+  leading: 0,
+  trailing: 0
+}
+
+Marquee.propTypes = {
+  text: PropTypes.string,
+  hoverToStop: PropTypes.bool,
+  loop: PropTypes.bool,
+  leading: PropTypes.number,
+  trailing: PropTypes.number,
+  className: PropTypes.string
+}
+
 module.exports = Marquee;

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

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12833

increased by23.94%

Lines of code

328

increased by11.19%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Dependency count

3

increased by50%

Number of package files

5

decreased by-16.67%

Number of medium quality alerts

2

increased by100%

Dependency changes

• + Addedprop-types@*

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.0.0(transitive)

• + Addedreact-dom@16.0.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedreact-dom@0.14.10(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)