Merge branch 'develop'

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,3 @@
+node_modeules/
+dist/
+example/

.eslintrc

@@ -0,0 +1,45 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "ecmaFeatures": {
+    "jsx": true
+  },
+  "rules": {
+    "react/display-name": [2, { "acceptTranspilerName": true }],
+    "react/jsx-curly-spacing": [2, "always"],
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-quotes": 0,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/no-did-mount-set-state": 2,
+    "react/no-did-update-set-state": 2,
+    "react/no-multi-comp": 2,
+    "react/no-unknown-property": 2,
+    "react/prop-types": 2,
+    "react/react-in-jsx-scope": 2,
+    "react/require-extension": 2,
+    "react/self-closing-comp": 2,
+    "react/wrap-multilines": 2,
+    "react/sort-comp": 0,
+
+    "quotes": [2, "single", "avoid-escape"],
+    "jsx-quotes": [2, "prefer-single"],
+    "comma-dangle": [2, "never"],
+    "indent": [2, 2],
+    "object-curly-spacing": [2, "always"],
+    "no-undef": 2,
+    "no-underscore-dangle": 0,
+    "func-names": 0,
+    "no-else-return": 0,
+    "no-console": 0,
+    "no-throw-literal": 0,
+    "id-length": 0
+  }
+}

README.md

@@ -4,6 +4,8 @@
 
 A complete and totally customizable notification system for React applications.
 
+Initially built for [Eterpret](http://dev.eterpret.com) @ [Scalable Path](http://www.scalablepath.com).
+
 ![Example gif](example/example.gif "Example gif")
 
 ## Demo
@@ -18,6 +20,22 @@ For now this component is only available as CommonJS module. Install via NPM run
 npm install react-notification-system
 ```
 
+### Important
+
+For **React 0.14.x**, use version 0.2.x:
+
+```
+npm install [email protected]
+```
+
+For **React 0.13.x**, use version 0.1.x:
+
+```
+npm install [email protected]
+```
+
+
+
 ## Using
 
 For optimal appearance, this component **must be rendered on a top level HTML element** in your application to avoid position conflicts.

package.json

@@ -7,7 +7,8 @@
     "prepublish": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "watch 'npm run build' ./src",
-    "build": "jsx ./src ./dist"
+    "build": "jsx -x jsx ./src ./dist & jsx ./src ./dist",
+    "lint": "eslint src --ext .jsx,.js"
   },
   "repository": {
     "type": "git",
@@ -31,6 +32,9 @@
     "object-assign": "^4.0.1"
   },
   "devDependencies": {
+    "eslint": "^1.6.0",
+    "eslint-config-airbnb": "^0.1.0",
+    "eslint-plugin-react": "^3.5.1",
     "react-tools": "^0.13.2",
     "watch": "^0.16.0"
   }

src/helpers.js

@@ -1,24 +1,26 @@
 var Helpers = {
-  timer: function(callback, delay) {
-    var timerId, start, remaining = delay;
+  Timer: function(callback, delay) {
+    var timerId;
+    var start;
+    var remaining = delay;
 
     this.pause = function() {
-        clearTimeout(timerId);
-        remaining -= new Date() - start;
+      clearTimeout(timerId);
+      remaining -= new Date() - start;
     };
 
     this.resume = function() {
-        start = new Date();
-        clearTimeout(timerId);
-        timerId = setTimeout(callback, remaining);
+      start = new Date();
+      clearTimeout(timerId);
+      timerId = setTimeout(callback, remaining);
     };
 
     this.clear = function() {
       clearTimeout(timerId);
-    }
+    };
 
     this.resume();
   }
-}
+};
 
 module.exports = Helpers;

src/notification-container.js → src/notification-container.jsx

@@ -1,13 +1,13 @@
 var React = require('react');
 var NotificationItem = require('./notification-item');
 var Constants = require('./constants');
-var Helpers = require('./helpers');
 
 var NotificationContainer = React.createClass({
 
   propTypes: {
     position: React.PropTypes.string.isRequired,
-    notifications: React.PropTypes.array.isRequired
+    notifications: React.PropTypes.array.isRequired,
+    getStyles: React.PropTypes.object
   },
 
   _style: {},
@@ -17,34 +17,35 @@ var NotificationContainer = React.createClass({
     this._style = this.props.getStyles.container(this.props.position);
 
     if (this.props.getStyles.overrideWidth && (this.props.position === Constants.positions.tc || this.props.position === Constants.positions.bc)) {
-      this._style['marginLeft'] = -(this.props.getStyles.overrideWidth / 2);
+      this._style.marginLeft = -(this.props.getStyles.overrideWidth / 2);
     }
   },
 
   render: function() {
     var self = this;
+    var notifications;
 
     if ([Constants.positions.bl, Constants.positions.br, Constants.positions.bc].indexOf(this.props.position) > -1) {
       this.props.notifications.reverse();
     }
 
-    var notifications = this.props.notifications.map(function(notification) {
+    notifications = this.props.notifications.map(function(notification) {
       return (
         <NotificationItem
-          ref={'notification-' + notification.uid}
-          key={notification.uid}
-          notification={notification}
-          getStyles={self.props.getStyles}
-          onRemove={self.props.onRemove}
-          noAnimation={self.props.noAnimation}
-          allowHTML={self.props.allowHTML}
+          ref={ 'notification-' + notification.uid }
+          key={ notification.uid }
+          notification={ notification }
+          getStyles={ self.props.getStyles }
+          onRemove={ self.props.onRemove }
+          noAnimation={ self.props.noAnimation }
+          allowHTML={ self.props.allowHTML }
         />
       );
     });
 
     return (
-      <div className={'notifications-' + this.props.position} style={this._style}>
-        {notifications}
+      <div className={ 'notifications-' + this.props.position } style={ this._style }>
+        { notifications }
       </div>
     );
   }