react-notification-badge - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

 ## Change Log
 
-### Ver 1.1.0 Next release
+### Ver 1.2.0 Next release
 
+### Ver 1.1.0
+
+* #6 [Publish transpiled code](https://github.com/georgeOsdDev/react-notification-badge/issues/6)
+* #8 [Use requestAnimationFrame](https://github.com/georgeOsdDev/react-notification-badge/issues/8)
+
 ### Ver 1.0.0
@@ -6,0 +11,0 @@

example/app.js

@@ -47,3 +47,2 @@ 'use strict';
     }
-
     return (
@@ -62,3 +61,2 @@
             </tr>
-
             <tr>
@@ -94,8 +92,33 @@ <td>
                 <div style={container}>
-                  <NotificationBadge count={this.state.count} effect={Effect.SCALE} duration={100}/>
+                  <NotificationBadge count={this.state.count} effect={Effect.SCALE} frameLength={15.0}/>
                 </div>
               </td>
-              <td style={title}>Duration:100</td>
+              <td style={title}>frameLength:15.0</td>
+              <td>
+                <div style={container}>
+                  <NotificationBadge count={this.state.count} effect={Effect.SCALE} frameLength={30.0}/>
+                </div>
+              </td>
+              <td style={title}>frameLength:30.0</td>
+              <td>
+                <div style={container}>
+                  <NotificationBadge count={this.state.count} effect={Effect.SCALE} frameLength={45.0}/>
+                </div>
+              </td>
+              <td style={title}>frameLength:45.0</td>
+              <td>
+                <div style={container}>
+                  <NotificationBadge count={this.state.count} effect={Effect.SCALE} frameLength={60.0}/>
+                </div>
+              </td>
+              <td style={title}>frameLength:60.0</td>
+              <td>
+                <div style={container}>
+                  <NotificationBadge count={this.state.count} effect={Effect.SCALE} frameLength={120.0}/>
+                </div>
+              </td>
+              <td style={title}>frameLength:120.0</td>
             </tr>
 
+
             <tr>
@@ -102,0 +125,0 @@ <td>

lib/components/AnimationCounter.js

 'use strict';
 
-import React from 'react';
-import ReactDom from 'react-dom';
-import Effect from './Effect';
+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; }; })();
 
-class AnimationCounter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-    };
-  }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  componentWillEnter(callback){
-    let badge = ReactDom.findDOMNode(this.refs.badge);
-    badge.style['-moz-transform'] = badge.style['-webkit-transform'] = badge.style['-o-transform'] = badge.style['-ms-transform'] = badge.style.transform = this.props.effect[0];
-    if (this.props.effect[2]) {
-      this.attachStyle(badge, this.props.effect[2]);
-    }
-    setTimeout(callback, this.props.duration);
-  }
+var _react = require('react');
 
-  componentDidEnter(){
-    let badge = ReactDom.findDOMNode(this.refs.badge);
-    badge.style['-moz-transform'] = badge.style['-webkit-transform'] = badge.style['-o-transform'] = badge.style['-ms-transform'] = badge.style.transform = this.props.effect[1];
-    if (this.props.effect[3]) {
-      this.attachStyle(badge, this.props.effect[3]);
-    }
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _Effect = require('./Effect');
+
+var _Effect2 = _interopRequireDefault(_Effect);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 requestAnimationFrame = (function () {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
+    window.setTimeout(callback, 1000.0 / 60.0);
+  };
+})();
+
+var cancelAnimationFrame = (function () {
+  return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (timer) {
+    window.clearTimeout(timer);
+  };
+})();
+
+var now = window.performance && (performance.now || performance.mozNow || performance.msNow || performance.oNow || performance.webkitNow);
+
+var getTime = function getTime() {
+  return now && now.call(performance) || new Date.now();
+};
+
+var AnimationCounter = (function (_React$Component) {
+  _inherits(AnimationCounter, _React$Component);
+
+  function AnimationCounter(props) {
+    _classCallCheck(this, AnimationCounter);
+
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(AnimationCounter).call(this, props));
+
+    _this.state = {};
+    return _this;
   }
 
-  componentDidMount(){
-    if (this.props.count > 0) {
-      let badge = ReactDom.findDOMNode(this.refs.badge);
-      badge.style['-moz-transform'] = badge.style['-webkit-transform'] = badge.style['-o-transform'] = badge.style['-ms-transform'] = badge.style.transform = this.props.effect[0];
-      if (this.props.effect[2]) {
-        this.attachStyle(badge, this.props.effect[2]);
+  _createClass(AnimationCounter, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.count > 0) {
+        this.animate();
       }
-      setTimeout(() => {
-        badge.style['-moz-transform'] = badge.style['-webkit-transform'] = badge.style['-o-transform'] = badge.style['-ms-transform'] = badge.style.transform = this.props.effect[1];
-        if (this.props.effect[3]) {
-          this.attachStyle(badge, this.props.effect[3]);
-        }
-      }, this.props.duration);
     }
-  }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.count > prevProps.count) {
+        this.animate();
+      }
+    }
+  }, {
+    key: 'animate',
+    value: function animate() {
+      var _this2 = this;
 
-  componentDidUpdate(prevProps){
-    if (this.props.count > prevProps.count) {
-      let badge = ReactDom.findDOMNode(this.refs.badge);
+      var badge = _reactDom2.default.findDOMNode(this.refs.badge);
       badge.style['-moz-transform'] = badge.style['-webkit-transform'] = badge.style['-o-transform'] = badge.style['-ms-transform'] = badge.style.transform = this.props.effect[0];
@@ -54,30 +83,50 @@ if (this.props.effect[2]) {
       }
-      setTimeout(() => {
-        badge.style['-moz-transform'] = badge.style['-webkit-transform'] = badge.style['-o-transform'] = badge.style['-ms-transform'] = badge.style.transform = this.props.effect[1];
-        if (this.props.effect[3]) {
-          this.attachStyle(badge, this.props.effect[3]);
+
+      var startTime = getTime();
+      var timer = undefined;
+      var waitOrFinish = function waitOrFinish() {
+        var lastTime = getTime();
+        var frame = Math.floor((lastTime - startTime) / (1000.0 / _this2.props.fps) % _this2.props.frameLength);
+        if (frame === _this2.props.frameLength - 1) {
+          cancelAnimationFrame(timer);
+          badge.style['-moz-transform'] = badge.style['-webkit-transform'] = badge.style['-o-transform'] = badge.style['-ms-transform'] = badge.style.transform = _this2.props.effect[1];
+          if (_this2.props.effect[3]) {
+            _this2.attachStyle(badge, _this2.props.effect[3]);
+          }
+        } else {
+          timer = requestAnimationFrame(waitOrFinish);
         }
-      }, this.props.duration);
+      };
+      waitOrFinish();
     }
-  }
-
-  attachStyle(node, style){
-    for (let key in style) {
-      node.style[key] = style[key];
+  }, {
+    key: 'attachStyle',
+    value: function attachStyle(node, style) {
+      for (var key in style) {
+        node.style[key] = style[key];
+      }
     }
-  }
+  }, {
+    key: 'render',
+    value: function render() {
+      var value = this.props.label || this.props.count;
+      return _react2.default.createElement(
+        'span',
+        { ref: 'badge', style: this.props.style, className: this.props.className },
+        value
+      );
+    }
+  }]);
 
-  render() {
-    let value = this.props.label || this.props.count;
-    return (<span ref='badge' style={this.props.style} className={this.props.className}>{value}</span>);
-  }
-}
+  return AnimationCounter;
+})(_react2.default.Component);
 
 AnimationCounter.propTypes = {
-  count: React.PropTypes.number,
-  label: React.PropTypes.string,
-  style: React.PropTypes.object,
-  effect: React.PropTypes.array,
-  duration: React.PropTypes.number,
-  className: React.PropTypes.string
+  count: _react2.default.PropTypes.number,
+  label: _react2.default.PropTypes.string,
+  style: _react2.default.PropTypes.object,
+  effect: _react2.default.PropTypes.array,
+  fps: _react2.default.PropTypes.number,
+  frameLength: _react2.default.PropTypes.number,
+  className: _react2.default.PropTypes.string
 };
@@ -89,6 +138,7 @@
   style: {},
-  effect: Effect.SCALE,
-  duration: 500
+  effect: _Effect2.default.SCALE,
+  fps: 60.0,
+  frameLength: 30.0
 };
 
-export default AnimationCounter;
+exports.default = AnimationCounter;

lib/components/Effect.js

@@ -1,5 +0,10 @@
-export default {
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
   ROTATE_X: ['rotateX(-180deg)', 'rotateX(0deg)'],
   ROTATE_Y: ['rotateY(-180deg)', 'rotateY(0deg)'],
   SCALE: ['scale(1.8, 1.8)', 'scale(1, 1)']
-};
+};

lib/components/NotificationBadge.js

 'use strict';
 
-import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
-import AnimationCounter from './AnimationCounter';
+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; }; })();
 
-const styles = {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _AnimationCounter = require('./AnimationCounter');
+
+var _AnimationCounter2 = _interopRequireDefault(_AnimationCounter);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 styles = {
   container: {
     position: 'relative',
-    width:'100%',
-    height:'100%'
+    width: '100%',
+    height: '100%'
   },
+
   badge: {
@@ -31,3 +50,3 @@ WebkitTransition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
     borderRadius: '10px',
-    top : '-2px',
+    top: '-2px',
     right: '-2px'
@@ -37,45 +56,58 @@ }
 
-class NotificationBadge extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-    };
-  }
+var NotificationBadge = (function (_React$Component) {
+  _inherits(NotificationBadge, _React$Component);
 
-  render() {
+  function NotificationBadge(props) {
+    _classCallCheck(this, NotificationBadge);
 
-    let badgeStyle = this.merge(styles.badge, this.props.style);
-    let value = this.props.count > 0 ? <AnimationCounter key={'badgekey'} style={badgeStyle} className={this.props.className} count={this.props.count} label={this.props.label} effect={this.props.effect} duration={this.props.duration}/> : undefined;
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(NotificationBadge).call(this, props));
 
-    return (
-      <ReactCSSTransitionGroup style={styles.container} transitionAppear={true} component='div' transitionName='react-notification-badge' transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
-        {value}
-      </ReactCSSTransitionGroup>
-    );
+    _this.state = {};
+    return _this;
   }
 
-  merge(obj1, obj2) {
-    let obj = {};
-    for (let attrname1 in obj1) {
-      if (obj1.hasOwnProperty(attrname1)) {
-        obj[attrname1] = obj1[attrname1];
-      }
+  _createClass(NotificationBadge, [{
+    key: 'render',
+    value: function render() {
+
+      var badgeStyle = this.merge(styles.badge, this.props.style);
+      var containerStyle = this.merge(styles.container, this.props.containerStyle);
+      var value = this.props.count > 0 ? _react2.default.createElement(_AnimationCounter2.default, { key: 'badgekey', style: badgeStyle, className: this.props.className, count: this.props.count, label: this.props.label, effect: this.props.effect, fps: this.props.fps, frameLength: this.props.frameLength }) : undefined;
+
+      return _react2.default.createElement(
+        'div',
+        { style: containerStyle },
+        value
+      );
     }
-    for (let attrname2 in obj2) {
-      if (obj2.hasOwnProperty(attrname2)) {
-        obj[attrname2] = obj2[attrname2];
+  }, {
+    key: 'merge',
+    value: function merge(obj1, obj2) {
+      var obj = {};
+      for (var attrname1 in obj1) {
+        if (obj1.hasOwnProperty(attrname1)) {
+          obj[attrname1] = obj1[attrname1];
+        }
       }
+      for (var attrname2 in obj2) {
+        if (obj2.hasOwnProperty(attrname2)) {
+          obj[attrname2] = obj2[attrname2];
+        }
+      }
+      return obj;
     }
-    return obj;
-  }
-}
+  }]);
 
+  return NotificationBadge;
+})(_react2.default.Component);
+
 NotificationBadge.propTypes = {
-  count: React.PropTypes.number,
-  label: React.PropTypes.string,
-  containerStyle: React.PropTypes.object,
-  style: React.PropTypes.object,
-  className: React.PropTypes.string,
-  effect: React.PropTypes.array,
-  duration: React.PropTypes.number
+  containerStyle: _react2.default.PropTypes.object,
+  count: _react2.default.PropTypes.number,
+  label: _react2.default.PropTypes.string,
+  style: _react2.default.PropTypes.object,
+  className: _react2.default.PropTypes.string,
+  effect: _react2.default.PropTypes.array,
+  fps: _react2.default.PropTypes.number,
+  frameLength: _react2.default.PropTypes.number
 };
@@ -85,5 +117,6 @@
   count: 0,
-  style: {}
+  style: {},
+  containerStyle: {}
 };
 
-export default NotificationBadge;
+exports.default = NotificationBadge;

package.json

 {
   "name": "react-notification-badge",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Simple notification badge react component",
@@ -11,3 +11,5 @@ "main": "index.js",
     "test:local": "karma start",
-    "test": "./node_modules/.bin/karma start --browsers Firefox --single-run"
+    "test": "./node_modules/.bin/karma start --browsers Firefox --single-run",
+    "clean": "rimraf lib",
+    "build": "babel src --out-dir lib"
   },
@@ -31,2 +33,4 @@ "repository": {
   "devDependencies": {
+    "babel-cli": "^6.3.17",
+    "babel-core": "^6.3.21",
     "babel-eslint": "^4.1.3",
@@ -53,2 +57,3 @@ "babel-polyfill": "^6.0.16",
     "react-addons-test-utils": "^0.14.2",
+    "rimraf": "^2.4.4",
     "sinon": "^1.17.2",
@@ -59,3 +64,2 @@ "watchify": "^3.6.0"
     "react": "^0.14.2",
-    "react-addons-css-transition-group": "^0.14.2",
     "react-dom": "^0.14.2"
@@ -62,0 +66,0 @@ },

README.md

@@ -48,6 +48,6 @@ # react-notification-badge [![Build Status](https://travis-ci.org/georgeOsdDev/react-notification-badge.svg?branch=develop)](https://travis-ci.org/georgeOsdDev/react-notification-badge) [![npm version](https://badge.fury.io/js/react-notification-badge.svg)](http://badge.fury.io/js/react-notification-badge)
 
-    `effect[0]` will be applied to `transform` on `componentWillEnter`.
-    `effect[1]` will be applied to `transform` on `componentDidEnter`.
-    `effect[2]` will be applied as `style[key] = value` on `componentWillEnter`.
-    `effect[3]` will be applied to `style[key] = value` on `componentDidEnter`.
+    `effect[0]` will be applied to `transform` on first frame.
+    `effect[1]` will be applied to `transform` on `frameLength`.
+    `effect[2]` will be applied as `style[key] = value` on first frame.
+    `effect[3]` will be applied to `style[key] = value` on `frameLength`.
 
@@ -59,3 +59,3 @@ Pre defined effect is available as
 
-  * `duration`: duration between `componentWillEnter` and `componentDidEnter` (default 500)
+  * `frameLength`: Frame length for `effect[1]` and `effect[3]` (default 30.0, 60.0fps/30.0 = 0.5 second)
 
@@ -62,0 +62,0 @@ ## Usage example

test/components/NotificationBadge_spec.js

@@ -8,4 +8,4 @@ 'use strict';
 let expect = chai.expect;
-import NotificationBadge from '../../lib/components/NotificationBadge';
-import Effect from '../../lib/components/Effect';
+import NotificationBadge from '../../src/components/NotificationBadge';
+import Effect from '../../src/components/Effect';
 
@@ -12,0 +12,0 @@

No alert changes

Improved metrics

Total package byte prevSize

35069

increased by51.79%

Dependency count

2

decreased by-33.33%

Number of package files

21

increased by23.53%

Lines of code

670

increased by65.02%

Worsened metrics

Dev dependency count

26

increased by13.04%

Dependency changes

• - Removedreact-addons-css-transition-group@^0.14.2

• - Removedreact-addons-css-transition-group@0.14.8(transitive)