react-notification - npm Package Compare versions

Comparing version 3.0.3 to 4.0.0

dist/notification.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _defaultPropTypes = require('./defaultPropTypes');
+
+var _defaultPropTypes2 = _interopRequireDefault(_defaultPropTypes);
+
 var _objectAssign = require('object-assign');
@@ -164,3 +168,3 @@
         'div',
-        { className: 'notification-bar-wrapper', onClick: this.handleClick },
+        { className: 'notification-bar-wrapper' },
         _react2['default'].createElement(
@@ -174,3 +178,3 @@ 'span',
         ),
-        this.props.action !== false ? _react2['default'].createElement(
+        this.props.action ? _react2['default'].createElement(
           'span',
@@ -180,2 +184,3 @@ {
             className: 'notification-bar-action',
+            onClick: this.handleClick,
             style: this.getActionStyle()
@@ -191,13 +196,3 @@ },
     key: 'propTypes',
-    value: {
-      message: _react.PropTypes.string.isRequired,
-      action: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.string]),
-      onClick: _react.PropTypes.func,
-      style: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.bool]),
-      dismissAfter: _react.PropTypes.number,
-      onDismiss: _react.PropTypes.func,
-      className: _react.PropTypes.string,
-      activeClassName: _react.PropTypes.string,
-      isActive: _react.PropTypes.bool
-    },
+    value: _defaultPropTypes2['default'],
     enumerable: true
@@ -228,3 +223,3 @@ }, {
  * @function handleClick
- * @description Handle click events on the
+ * @description Handle click events on the action button.
  */

package.json

 {
   "name": "react-notification",
-  "version": "3.0.3",
+  "version": "4.0.0",
   "description": "Snackbar style notification component for React.",
   "main": "dist/notification.js",
   "scripts": {
-    "start": "NODE_ENV=development node webpack.local.server.js",
+    "start": "node webpack.local.server.js",
     "prepublish": "npm test && make js",
-    "test": "NODE_ENV=test `npm bin`/mocha --compilers js:babel/register --recursive"
+    "test": "`npm bin`/mocha --compilers js:babel/register --recursive"
   },
@@ -48,2 +48,3 @@ "repository": {
     "html-webpack-plugin": "^1.6.0",
+    "immutable": "^3.7.5",
     "jsdom": "^5.6.0",
@@ -50,0 +51,0 @@ "mocha": "^2.2.5",

README.md

@@ -1,3 +0,5 @@
-# react-notification [![npm version](https://badge.fury.io/js/react-notification.svg)](http://badge.fury.io/js/react-notification) [![Dependency Status](https://david-dm.org/pburtchaell/react-classes.svg)](https://david-dm.org/pburtchaell/react-notification) [![Build Status](https://travis-ci.org/pburtchaell/react-notification.svg)](https://travis-ci.org/pburtchaell/react-notification)
+# react-notification
 
+[![npm version](https://badge.fury.io/js/react-notification.svg)](http://badge.fury.io/js/react-notification) [![Dependency Status](https://david-dm.org/pburtchaell/react-classes.svg)](https://david-dm.org/pburtchaell/react-notification) [![Build Status](https://travis-ci.org/pburtchaell/react-notification.svg)](https://travis-ci.org/pburtchaell/react-notification) [![npm downloads](https://img.shields.io/npm/dm/react-notification.svg?style=flat)](http://badge.fury.io/js/react-notification)
+
 ## Overview
@@ -7,3 +9,3 @@
 
-This is a component designed to provide "[snackbar](http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage)" notification messages. I would suggest reading the usage guidelines for [snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html#).
+This is a component designed to provide "[snackbar](http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage)" notification messages and notification stacks (similar to how notifications stack on OS X). I would suggest reading the usage guidelines for [snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html#).
 
@@ -20,2 +22,4 @@ ## Getting Started
 
+Single notification:
+
 ```
@@ -30,4 +34,31 @@ <Notification
 
+Notification stack:
+
+```
+state = {
+  notifications: OrderedSet().add({
+    message: 'Notification message'
+    key: 'some UID'
+  })
+}
+
+// Using immutable.js for the array of notifications
+render() {
+  return (
+    <NotificationStack
+      notifications={this.state.notifications.toArray()}
+      onDismiss={notification => this.setState({
+        notifications: this.state.notifications.delete(notification)
+      })}
+    />
+  );
+}
+```
+
+See the examples for more context on how to use a notification stack.
+
 ### Props
 
+For Notification component:
+
 | Name      | Type               | Description                                       | Required  | Default  |
@@ -37,3 +68,3 @@ |-----------|--------------------|---------------------------------------------------|---------- |----------|
 | message   | string             | The message for the notification                  | true      |          |
-| action    | string             | The name of the action, e.g., "close" or "undo"   | true      |          |
+| action    | string             | The name of the action, e.g., "close" or "undo"   |           |          |
 | style     | object or boolean  | Custom styles to apply to the component*          |           |          |
@@ -46,4 +77,14 @@ | className | string             | Custom class to apply to the top-level component  |           |          |
 
+For NotificationStack component:
+
+| Name           | Type  | Description                                  | Required  | Default  |
+|----------------|-------|----------------------------------------------|---------- |----------|
+| notifications  | array | Array of notifications to render             | true      |          |
+
+*Note that notifications used in a stack can not have actions and require a unique key property. All other properties included in the regular notification component are supported.*
+
 ## Events
 
+For Notification component:
+
 | Event     | Description                                                |
@@ -54,2 +95,8 @@ |-----------|------------------------------------------------------------|
 
+For NotificationStack component:
+
+| Event     | Description                                                                  | Arguments                                                 |
+|-----------|------------------------------------------------------------------------------|-----------------------------------------------------------|
+| onDismiss | Callback function to run when dismissAfter timer runs out for a notification | The object for the notification currently being dismissed |
+
 ## Styles
@@ -101,3 +148,3 @@
         action={this.state.action}
-        styles={this.getNotificationStyles()}
+        style={this.getNotificationStyles()}
       />
@@ -104,0 +151,0 @@ </div>

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

Improved metrics

Total package byte prevSize

131564

increased by4.51%

Number of package files

18

increased by28.57%

Lines of code

445

increased by16.19%

Number of lines in readme file

153

increased by44.34%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes