react-notification - npm Package Compare versions

Comparing version 6.2.1 to 6.3.0

dist/defaultPropTypes.js

@@ -20,5 +20,5 @@ 'use strict';
   className: _react.PropTypes.string,
-  activeClassName: _react.PropTypes.string.isRequired,
+  activeClassName: _react.PropTypes.string,
   isActive: _react.PropTypes.bool,
   title: _react.PropTypes.string
 };

dist/index.js

@@ -6,15 +6,21 @@ 'use strict';
 });
-exports.NotificationStack = exports.Notification = undefined;
 
 var _notification = require('./notification');
 
-var _notification2 = _interopRequireDefault(_notification);
+Object.defineProperty(exports, 'Notification', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_notification).default;
+  }
+});
 
 var _notificationStack = require('./notificationStack');
 
-var _notificationStack2 = _interopRequireDefault(_notificationStack);
+Object.defineProperty(exports, 'NotificationStack', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_notificationStack).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.Notification = _notification2.default;
-exports.NotificationStack = _notificationStack2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

dist/notification.js

@@ -50,3 +50,5 @@ 'use strict';
       if (this.props.dismissAfter === false) return;
-      if (!nextProps.hasOwnProperty('isLast')) clearTimeout(this.dismissTimeout);
+      if (!nextProps.hasOwnProperty('isLast')) {
+        clearTimeout(this.dismissTimeout);
+      }
       if (nextProps.onDismiss && nextProps.isActive && !this.props.isActive) {
@@ -63,5 +65,5 @@ this.dismissTimeout = setTimeout(nextProps.onDismiss, nextProps.dismissAfter);
     /*
-     * @description Dynamically get the styles for the bar.
-     * @returns {object} result The style.
-     */
+    * @description Dynamically get the styles for the bar.
+    * @returns {object} result The style.
+    */
 
@@ -105,12 +107,10 @@ }, {
 
-      return isActive ? _extends({}, baseStyle, {
-        left: '1rem'
-      }, barStyle, activeBarStyle) : _extends({}, baseStyle, barStyle);
+      return isActive ? _extends({}, baseStyle, { left: '1rem' }, barStyle, activeBarStyle) : _extends({}, baseStyle, barStyle);
     }
 
     /*
-     * @function getActionStyle
-     * @description Dynamically get the styles for the action text.
-     * @returns {object} result The style.
-     */
+    * @function getActionStyle
+    * @description Dynamically get the styles for the action text.
+    * @returns {object} result The style.
+    */
 
@@ -134,6 +134,6 @@ }, {
     /*
-     * @function getTitleStyle
-     * @description Dynamically get the styles for the title.
-     * @returns {object} result The style.
-     */
+    * @function getTitleStyle
+    * @description Dynamically get the styles for the title.
+    * @returns {object} result The style.
+    */
 
@@ -150,5 +150,5 @@ }, {
     /*
-     * @function handleClick
-     * @description Handle click events on the action button.
-     */
+    * @function handleClick
+    * @description Handle click events on the action button.
+    */
 
@@ -155,0 +155,0 @@ }, {

dist/notificationStack.js

@@ -7,4 +7,5 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint-disable react/jsx-no-bind */
 
+
 var _react = require('react');
@@ -14,6 +15,2 @@
 
-var _defaultPropTypes = require('./defaultPropTypes');
-
-var _defaultPropTypes2 = _interopRequireDefault(_defaultPropTypes);
-
 var _stackedNotification = require('./stackedNotification');
@@ -30,6 +27,6 @@
 /**
- * The notification list does not have any state, so use a
- * pure function here. It just needs to return the stacked array
- * of notification components.
- */
+* The notification list does not have any state, so use a
+* pure function here. It just needs to return the stacked array
+* of notification components.
+*/
 var NotificationStack = function NotificationStack(props) {
@@ -36,0 +33,0 @@ return _react2.default.createElement(

dist/stackedNotification.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _defaultPropTypes = require('./defaultPropTypes');
+
+var _defaultPropTypes2 = _interopRequireDefault(_defaultPropTypes);
+
 var _notification = require('./notification');
@@ -39,2 +43,4 @@
     };
+
+    _this.handleClick = _this.handleClick.bind(_this);
     return _this;
@@ -62,3 +68,16 @@ }
     }
+
+    /*
+    * @function handleClick
+    * @description Bind deactivate Notification function to Notification click handler
+    */
+
   }, {
+    key: 'handleClick',
+    value: function handleClick() {
+      if (this.props.onClick && typeof this.props.onClick === 'function') {
+        return this.props.onClick(this.setState.bind(this, { isActive: false }));
+      }
+    }
+  }, {
     key: 'render',
@@ -69,2 +88,3 @@ value: function render() {
       return _react2.default.createElement(_notification2.default, _extends({}, this.props, {
+        onClick: this.handleClick,
         onDismiss: function onDismiss() {
@@ -81,4 +101,4 @@ return setTimeout(_this2.props.onDismiss, 300);
 
-;
+StackedNotification.propTypes = _defaultPropTypes2.default;
 
 exports.default = StackedNotification;

examples/single-notification/index.js

@@ -10,3 +10,4 @@ import React, { Component } from 'react';
     this.state = {
-      isActive: false
+      isActive: false,
+      permanentNotification: false
     }
@@ -30,2 +31,9 @@ }
         />
+        <br />
+        <button
+          onClick={() => this.setState({
+            permanentNotification: true
+          })}
+          children="Show permanent notification"
+        />
         <Notification
@@ -39,2 +47,8 @@ isActive={this.state.isActive}
         />
+        <Notification
+          isActive={this.state.permanentNotification}
+          dismissAfter={false}
+          message="Permanent Notification"
+          title="Title!"
+        />
       </div>
@@ -41,0 +55,0 @@ );

package.json

 {
   "name": "react-notification",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "Snackbar style notification component for React.",
   "main": "dist/index.js",
   "scripts": {
-    "prepublish": "npm test && npm run build",
-    "start": "node examples/server.js",
+    "precommit": "echo 'Running pre-commit hooks...' && npm test",
+    "prepublish": "npm run build",
+    "prebuild": "npm test",
     "build": "`npm bin`/babel src -d dist",
-    "test": "make test"
+    "pretest": "npm run lint",
+    "test": "NODE_ENV=test `npm bin`/mocha --compilers js:babel-core/register --reporter spec --recursive --timeout 5000 test/setup.js test/**/*.js",
+    "lint": "`npm bin`/eslint src/**/*.js test/**/*.js",
+    "start": "node examples/server.js"
   },
+  "pre-commit": [
+    "precommit"
+  ],
   "repository": {
@@ -53,2 +60,3 @@ "type": "git",
     "mocha": "^2.4.5",
+    "pre-commit": "^1.1.3",
     "react": "^0.14.7",
@@ -55,0 +63,0 @@ "react-addons-test-utils": "^0.14.7",

README.md

@@ -57,3 +57,6 @@ # react-notification
       action: 'Dismiss',
-      onClick: () => this.removeNotification('some UID'),
+      onClick: (deactivate) => {
+        deactivate();
+        setTimeout(() => this.removeNotification('some UID'), 400);
+      },
     })
@@ -122,2 +125,4 @@ });
 
+onClick is called with parameter *deactivate*, which is a function and can be called to set the notification to inactive. Used to activate notification exit animation on click.
+
 For NotificationStack component:
@@ -177,4 +182,2 @@
 ---
-Built with care in New Orleans by [Patrick Burtchaell](http://twitter.com/pburtchaell).
-
-Copyright 2016 Patrick Burtchaell. Licensed MIT. [Gratipay](https://gratipay.com/~pburtchaell/).
+Copyright (c) 2015 Patrick Burtchaell. [Licensed with The MIT License (MIT)](https://raw.githubusercontent.com/pburtchaell/react-notification/master/LICENSE). [Gratipay](https://gratipay.com/~pburtchaell/).

test/notification.js

@@ -1,6 +0,6 @@
-import { Notification, NotificationStack } from '../src/index';
+import React from 'react';
+import { Notification } from '../src/index';
 import mockNotification from './mockNotification';
 
 describe('<Notification />', () => {
-  const wrapperClassName = '.notification-bar-wrapper';
   const messageClassName = '.notification-bar-message';
@@ -13,3 +13,3 @@ const actionClassName = '.notification-bar-action';
 
-  let component = shallow(
+  const component = shallow(
     <Notification
@@ -36,3 +36,4 @@ message={mockNotification.message}
 
- it('has custom class name', () => {
+  it('has custom class name', () => {
+    // eslint-disable-next-line
     let classNameComponent = shallow(
@@ -56,2 +57,3 @@ <Notification
   it('has custom active class name', () => {
+    // eslint-disable-next-line
     let classNameComponent = shallow(
@@ -94,2 +96,3 @@ <Notification
 
+    // eslint-disable-next-line
     let message = shallow(
@@ -131,2 +134,3 @@ <Notification
   it('should use custom active styles', () => {
+    // eslint-disable-next-line
     let component = shallow(
@@ -151,3 +155,4 @@ <Notification
 
-    const action = shallow(
+    // eslint-disable-next-line
+    let action = shallow(
       <Notification
@@ -172,3 +177,4 @@ message={mockNotification.message}
 
-    const wrapper = mount(
+    // eslint-disable-next-line
+    let wrapper = mount(
       <Notification
@@ -196,3 +202,4 @@ message={mockNotification.message}
 
-    const wrapper = mount(
+    // eslint-disable-next-line
+    let wrapper = mount(
       <Notification
@@ -218,3 +225,5 @@ message={mockNotification.message}
     const handleDismiss = spy();
-    const wrapper = mount(
+
+    // eslint-disable-next-line
+    let wrapper = mount(
       <Notification
@@ -239,6 +248,7 @@ message={mockNotification.message}
 
-  it('onDismiss does not get fired when dismissAfter is false', () => {
+  it('onDismiss does not fire when dismissAfter is false', () => {
     const handleDismiss = spy();
 
-    const wrapper = shallow(
+    // eslint-disable-next-line
+    let wrapper = shallow(
       <Notification
@@ -245,0 +255,0 @@ message={mockNotification.message}

test/notificationStack.js

@@ -0,1 +1,2 @@
+import React from 'react';
 import { Notification, NotificationStack } from '../src/index';
@@ -14,2 +15,23 @@ import mockNotification from './mockNotification';
 
+  it('notification prop isActive set to false after deactivate called in onClick', () => {
+
+    const myNotification = Object.assign(
+      {},
+      mockNotification,
+      { onClick: (deactivate) => deactivate() }
+    );
+
+    const wrapper = mount(
+      <NotificationStack
+        notifications={[myNotification]}
+        onDismiss={() => null}
+      />
+    );
+
+    const notification = wrapper.find(Notification);
+    setTimeout(() => expect(notification.prop('isActive')).to.equal(true), 10);
+    notification.simulate('click');
+    expect(notification.prop('isActive')).to.equal(false);
+  });
+
   it('onDismiss fires after `dismissAfter` value + transition time', done => {
@@ -63,2 +85,3 @@ const handleDismiss = spy();
 
+    // eslint-disable-next-line
     const wrapper = shallow(
@@ -140,3 +163,3 @@ <NotificationStack
     expect(notification.prop('activeBarStyle').left).to.equal('4rem');
-  })
+  });
 });

test/setup.js

 import chai from 'chai';
 import chaiEnzyme from 'chai-enzyme';
 
+const exposedProperties = ['window', 'navigator', 'document'];
+
 // Include stack on error
@@ -18,4 +20,2 @@ chai.config.includeStack = true;
 
-var exposedProperties = ['window', 'navigator', 'document'];
-
 global.document = jsdom('');
@@ -22,0 +22,0 @@ global.window = document.defaultView;

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

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

371925

increased by1.81%

Number of package files

28

increased by7.69%

Number of low license alerts

0

decreased by-100%

License quality

100

increased by11.11%

Lines of code

915

increased by7.27%

Number of lines in readme file

181

increased by1.69%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes