Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-notification

Package Overview
Dependencies
Maintainers
1
Versions
56
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-notification - npm Package Compare versions

Comparing version 4.3.0 to 5.0.0

examples/notification-tree/index.html
examples/server.js
examples/single-notification/index.html
examples/webpack.config.js
test/mockNotification.js
test/notificationStack.js
test/setup.js

16

dist/defaultPropTypes.js
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
exports['default'] = {
exports.default = {
message: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]).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]),
style: _react.PropTypes.bool,
actionStyle: _react.PropTypes.object,
barStyle: _react.PropTypes.object,
activeBarStyle: _react.PropTypes.object,
dismissAfter: _react.PropTypes.number,
onDismiss: _react.PropTypes.func,
className: _react.PropTypes.string,
activeClassName: _react.PropTypes.string,
activeClassName: _react.PropTypes.string.isRequired,
isActive: _react.PropTypes.bool
};
module.exports = exports['default'];
};

21

dist/index.js
'use strict';
module.exports = {
Notification: require('./notification'),
NotificationStack: require('./notificationStack')
};
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NotificationStack = exports.Notification = undefined;
var _notification = require('./notification');
var _notification2 = _interopRequireDefault(_notification);
var _notificationStack = require('./notificationStack');
var _notificationStack2 = _interopRequireDefault(_notificationStack);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Notification = _notification2.default;
exports.NotificationStack = _notificationStack2.default;

302

dist/notification.js
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _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; }; }();
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 _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 _react = require('react');

@@ -21,89 +17,94 @@

var _objectAssign = require('object-assign');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _objectAssign2 = _interopRequireDefault(_objectAssign);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Notification = (function (_Component) {
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 Notification = function (_Component) {
_inherits(Notification, _Component);
function Notification() {
var _this = this;
function Notification(props) {
_classCallCheck(this, Notification);
_Component.apply(this, arguments);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Notification).call(this, props));
this.getBarStyle = function () {
var isActive = _this.props.isActive;
_this.getBarStyle = _this.getBarStyle.bind(_this);
_this.getActionStyle = _this.getActionStyle.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
return _this;
}
var activeStateStyle = undefined;
var defaultStateStyle = undefined;
_createClass(Notification, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps.onDismiss && nextProps.isActive && !this.props.isActive) {
this.dismissTimeout = setTimeout(nextProps.onDismiss, nextProps.dismissAfter);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearTimeout(this.dismissTimeout);
}
var baseStyle = {
defaultState: {
position: 'fixed',
bottom: '2rem',
left: '-100%',
width: 'auto',
padding: '1rem',
margin: 0,
color: '#fafafa',
font: '1rem normal Roboto, sans-serif',
borderRadius: '5px',
background: '#212121',
borderSizing: 'border-box',
boxShadow: '0 0 1px 1px rgba(10, 10, 11, .125)',
cursor: 'default',
WebKittransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
MozTransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
msTransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
OTransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
transition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
/*
* @description Dynamically get the styles for the bar.
* @returns {object} result The style.
*/
// Trigger GPU acceleration
WebkitTransform: 'translatez(0)',
MozTransform: 'translatez(0)',
msTransform: 'translatez(0)',
OTransform: 'translatez(0)',
transform: 'translatez(0)'
},
activeState: {
left: '1rem'
}
};
}, {
key: 'getBarStyle',
value: function getBarStyle() {
if (this.props.style === false) return {};
/**
* If styles is set to false, then return nothing.
*/
if (_this.props.style === false) {
return {};
}
var _props = this.props;
var isActive = _props.isActive;
var barStyle = _props.barStyle;
var activeBarStyle = _props.activeBarStyle;
/**
* If `this.props.styles.active` exists (which means
* custom active styles should be used, override the
* default active styles with those from the prop.
*/
if (_this.props.style && _this.props.style.active) {
activeStateStyle = _objectAssign2['default'](baseStyle.activeState, _this.props.style.active);
} else {
activeStateStyle = baseStyle.activeState;
}
/**
* If `this.props.styles.bar` exists (which means custom
* styles should be applied to the bar) combine those
* styles with the existing base style.
*/
if (_this.props.style && _this.props.style.bar) {
defaultStateStyle = _objectAssign2['default'](baseStyle.defaultState, _this.props.style.bar);
} else {
defaultStateStyle = baseStyle.defaultState;
}
var baseStyle = {
position: 'fixed',
bottom: '2rem',
left: '-100%',
width: 'auto',
padding: '1rem',
margin: 0,
color: '#fafafa',
font: '1rem normal Roboto, sans-serif',
borderRadius: '5px',
background: '#212121',
borderSizing: 'border-box',
boxShadow: '0 0 1px 1px rgba(10, 10, 11, .125)',
cursor: 'default',
WebKittransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
MozTransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
msTransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
OTransition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
transition: '.5s cubic-bezier(0.89, 0.01, 0.5, 1.1)',
WebkitTransform: 'translatez(0)',
MozTransform: 'translatez(0)',
msTransform: 'translatez(0)',
OTransform: 'translatez(0)',
transform: 'translatez(0)'
};
return isActive ? _objectAssign2['default'](defaultStateStyle, activeStateStyle) : defaultStateStyle;
};
return isActive ? Object.assign({}, baseStyle, {
left: '1rem'
}, barStyle, activeBarStyle) : Object.assign({}, baseStyle, barStyle);
}
this.getActionStyle = function () {
var baseStyle = {
/*
* @function getActionStyle
* @description Dynamically get the styles for the action text.
* @returns {object} result The style.
*/
}, {
key: 'getActionStyle',
value: function getActionStyle() {
return this.props.style !== false ? Object.assign({}, {
padding: '0.125rem',

@@ -118,104 +119,65 @@ marginLeft: '1rem',

cursor: 'pointer'
};
}, this.props.actionStyle) : {};
}
if (_this.props.style === false) {
return {};
}
/*
* @function handleClick
* @description Handle click events on the action button.
*/
if (_this.props.style && _this.props.style.action) {
return _objectAssign2['default'](baseStyle, _this.props.style.action);
}, {
key: 'handleClick',
value: function handleClick() {
if (this.props.onClick && typeof this.props.onClick === 'function') {
return this.props.onClick();
}
return baseStyle;
};
this.handleClick = function (event) {
event.preventDefault();
if (_this.props.onClick && typeof _this.props.onClick === 'function') {
return _this.props.onClick(event);
}
return event;
};
}
Notification.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.onDismiss && nextProps.isActive && !this.props.isActive) {
this.dismissTimeout = setTimeout(nextProps.onDismiss, nextProps.dismissAfter);
}
};
}, {
key: 'render',
value: function render() {
var className = 'notification-bar';
Notification.prototype.componentWillUnmount = function componentWillUnmount() {
clearTimeout(this.dismissTimeout);
};
if (this.props.isActive) className += ' ' + this.props.activeClassName;
if (this.props.className) className += ' ' + this.props.className;
/*
* @description Dynamically get the styles for the bar.
* @returns {object} result The style.
*/
Notification.prototype.render = function render() {
var className = 'notification-bar';
if (this.props.isActive) className += ' ' + this.props.activeClassName;
if (this.props.className) className += ' ' + this.props.className;
return _react2['default'].createElement(
'div',
{ className: className, style: this.getBarStyle() },
_react2['default'].createElement(
return _react2.default.createElement(
'div',
{ className: 'notification-bar-wrapper' },
_react2['default'].createElement(
'span',
{
ref: 'message',
className: 'notification-bar-message'
},
this.props.message
),
this.props.action ? _react2['default'].createElement(
'span',
{
ref: 'action',
className: 'notification-bar-action',
onClick: this.handleClick,
style: this.getActionStyle()
},
this.props.action
) : null
)
);
};
_createClass(Notification, null, [{
key: 'propTypes',
value: _defaultPropTypes2['default'],
enumerable: true
}, {
key: 'defaultProps',
value: {
isActive: false,
dismissAfter: 2000,
activeClassName: 'notification-bar-active'
},
enumerable: true
{ className: className, style: this.getBarStyle() },
_react2.default.createElement(
'div',
{ className: 'notification-bar-wrapper' },
_react2.default.createElement(
'span',
{
ref: 'message',
className: 'notification-bar-message'
},
this.props.message
),
this.props.action ? _react2.default.createElement(
'span',
{
ref: 'action',
className: 'notification-bar-action',
onClick: this.handleClick,
style: this.getActionStyle()
},
this.props.action
) : null
)
);
}
}]);
return Notification;
})(_react.Component);
}(_react.Component);
exports['default'] = Notification;
module.exports = exports['default'];
Notification.propTypes = _defaultPropTypes2.default;
/*
* @function getActionStyle
* @description Dynamically get the styles for the action text.
* @returns {object} result The style.
*/
Notification.defaultProps = {
isActive: false,
dismissAfter: 2000,
activeClassName: 'notification-bar-active'
};
/*
* @function handleClick
* @description Handle click events on the action button.
*/
exports.default = Notification;

39

dist/notificationStack.js
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
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; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');

@@ -21,2 +21,4 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**

@@ -28,10 +30,10 @@ * The notification list does not have any state, so use a

var NotificationStack = function NotificationStack(props) {
return _react2['default'].createElement(
return _react2.default.createElement(
'div',
{ className: 'notification-list' },
props.notifications.map(function (notification, index) {
var dismissAfter = notification.dismissAfter || props.dismissAfter || 2000;
var lastNotificationDismissAfter = 300;
var dismissAfter = notification.dismissAfter || props.dismissAfter;
var isLast = index === 0 && props.notifications.length === 1;
return _react2['default'].createElement(_stackedNotification2['default'], _extends({}, notification, {
return _react2.default.createElement(_stackedNotification2.default, _extends({}, notification, {
key: notification.key,

@@ -41,15 +43,11 @@ isLast: isLast,

dismissAfter: isLast ? dismissAfter : dismissAfter + index * 1000,
onClick: function () {
onClick: function onClick() {
return props.onDismiss(notification);
},
onDismiss: function () {
return setTimeout(function () {
setTimeout(props.onDismiss.bind(undefined, notification), lastNotificationDismissAfter);
}, dismissAfter);
onDismiss: function onDismiss() {
setTimeout(function () {
setTimeout(props.onDismiss.bind(undefined, notification), 300);
}, 300);
},
style: notification.style !== null ? notification.style : {
bar: {
bottom: 2 + index * 4 + 'rem'
}
}
index: index
}));

@@ -65,3 +63,6 @@ })

exports['default'] = NotificationStack;
module.exports = exports['default'];
NotificationStack.defaultProps = {
dismissAfter: 1000
};
exports.default = NotificationStack;

82

dist/stackedNotification.js
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
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; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -21,2 +19,10 @@

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; }
/**

@@ -28,48 +34,50 @@ * The notification list does not have any state, so use a

var StackedNotification = (function (_Component) {
var StackedNotification = function (_Component) {
_inherits(StackedNotification, _Component);
function StackedNotification() {
function StackedNotification(props) {
_classCallCheck(this, StackedNotification);
_Component.call(this);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(StackedNotification).call(this, props));
this.state = {
_this.state = {
isActive: false
};
this.handleDismiss = this.handleDismiss.bind(this);
return _this;
}
StackedNotification.prototype.componentDidMount = function componentDidMount() {
setTimeout(this.setState.bind(this, {
isActive: true
}), 1);
_createClass(StackedNotification, [{
key: 'componentDidMount',
value: function componentDidMount() {
setTimeout(this.setState.bind(this, {
isActive: true
}), 1);
setTimeout(this.setState.bind(this, {
isActive: false
}), this.props.dismissAfter);
};
setTimeout(this.setState.bind(this, {
isActive: false
}), this.props.dismissAfter);
}
}, {
key: 'render',
value: function render() {
var bottomPosition = 2 + this.props.index * 4 + 'rem';
StackedNotification.prototype.handleDismiss = function handleDismiss() {
return this.setState({
isActive: false
});
};
return _react2.default.createElement(_notification2.default, _extends({}, this.props, {
action: false,
isActive: this.state.isActive,
barStyle: Object.assign({}, {
bottom: bottomPosition
}, this.props.barStyle),
activeBarStyle: Object.assign({}, {
bottom: bottomPosition
}, this.props.activeBarStyle)
}));
}
}]);
StackedNotification.prototype.render = function render() {
return _react2['default'].createElement(_notification2['default'], _extends({}, this.props, {
action: false,
isActive: this.state.isActive
}));
};
return StackedNotification;
})(_react.Component);
}(_react.Component);
;
StackedNotification.propTypes = {};
exports['default'] = StackedNotification;
module.exports = exports['default'];
exports.default = StackedNotification;

27

examples/notification-tree/index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { OrderedSet } from 'immutable';
import NotificationStack from 'notificationStack';
import { NotificationStack } from 'react-notification';
class Example extends Component {
state = {
notifications: OrderedSet(),
constructor(props) {
super(props);
// This is just used for the sake of an example to make sure
// notifications have unique keys. In production, you should have
// a different system for UIDs.
count: 0
this.state = {
notifications: OrderedSet(),
// This is just used for the sake of an example to make sure
// notifications have unique keys. In production, you should have
// a different system for UIDs.
count: 0
};
}

@@ -25,3 +29,6 @@

message: `Notification ${id}`,
key: newCount
key: newCount,
barStyle: {
background: 'grey'
}
})

@@ -34,3 +41,5 @@ });

<div>
<button onClick={::this.addNotification}>Add notification</button>
<button onClick={this.addNotification.bind(this)}>
Add notification
</button>
<NotificationStack

@@ -37,0 +46,0 @@ notifications={this.state.notifications.toArray()}

9

examples/README.md
# Examples
- ES5 example using `React.createClass`.
- ES 2015 example with multiple notifications.
- ES 2015 example with a single notification.
## Getting Started
1. Clone this repo
2. Run `npm install` to install dependencies
3. Run `npm start`
4. Go to [localhost:8000](http://localhost:8000/)

26

examples/single-notification/index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Notification from 'notifcation';
import { Notification } from 'react-notification';
class Example extends Component {
state = {
notification: {
constructor(props) {
super(props);
this.state = {
isActive: false
}
}
toggleNotification() {
this.setState({
isActive: !this.state.isActive
})
}
render() {
const { isActive } = this.state;
return (
<div>
<button
onClick={this.toggleNotification.bind(this)}
children={!isActive ? "Show notification" : "Hide notification"}
/>
<Notification
isActive={this.state.isActive}
message="Notification"
action="Dismiss"
onDismiss={this.toggleNotification.bind(this)}
/>
</div>

@@ -16,0 +36,0 @@ );

61

package.json
{
"name": "react-notification",
"version": "4.3.0",
"version": "5.0.0",
"description": "Snackbar style notification component for React.",
"main": "dist/index.js",
"scripts": {
"start": "node webpack.local.server.js",
"prepublish": "npm test && make js",
"test": "`npm bin`/mocha --compilers js:babel/register --recursive"
"prepublish": "npm test && npm run build",
"start": "node examples/server.js",
"build": "`npm bin`/babel src -d dist",
"test": "make test"
},

@@ -31,31 +32,29 @@ "repository": {

"homepage": "https://github.com/pburtchaell/react-notification",
"peerDependencies": {
"react": "0.14.x",
"react-dom": "0.14.x"
},
"dependencies": {
"object-assign": "^3.0.0"
},
"devDependencies": {
"babel": "^5.8.21",
"babel-core": "^5.8.22",
"babel-eslint": "^4.0.10",
"babel-loader": "^5.3.2",
"eslint": "^1.2.0",
"eslint-config-airbnb": "^0.0.7",
"eslint-plugin-react": "^3.2.3",
"expect": "^1.6.0",
"html-webpack-plugin": "^1.6.0",
"immutable": "^3.7.5",
"jsdom": "^5.6.0",
"mocha": "^2.2.5",
"mocha-jsdom": "^1.0.0",
"node-libs-browser": "^0.5.2",
"react": "^0.14.2",
"react-addons-test-utils": "^0.14.2",
"react-dom": "^0.14.2",
"react-hot-loader": "^1.2.8",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"
"babel-cli": "^6.6.5",
"babel-core": "^6.7.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"chai-enzyme": "^0.4.1",
"enzyme": "^2.1.0",
"eslint": "^2.4.0",
"eslint-config-airbnb": "^6.1.0",
"eslint-plugin-react": "^4.2.3",
"express": "^4.13.4",
"express-urlrewrite": "^1.2.0",
"html-webpack-plugin": "^2.10.0",
"immutable": "^3.7.6",
"mocha": "^2.4.5",
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.7",
"react-dom": "^0.14.7",
"sinon": "^1.17.3",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.5.1",
"webpack-dev-server": "^1.14.1"
}
}

29

README.md
# 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)
[![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-notification.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)

@@ -67,13 +67,16 @@ ## Overview

| Name | Type | Description | Required | Default |
|-----------|--------------------|---------------------------------------------------|---------- |----------|
| isActive | boolean | If true, the notification is visible | true | `false` |
| message | string | The message for the notification | true | |
| action | string | The name of the action, e.g., "close" or "undo" | | |
| style | object or boolean | Custom styles to apply to the component* | | |
| className | string | Custom class to apply to the top-level component | | |
| activeClassName | string | Custom class to apply to the top-level component when active | | |
| dismissAfter | number | Timeout for onDismiss event | | `2000` |
| Name | Type | Description | Required | Default |
|-----------------|-------------------------|-------------------------------------------------------------|-----------|----------------------------|
| isActive | boolean | If true, the notification is visible | true | `false` |
| message | string or React element | The message or component for the notification | true | |
| action | string | The name of the action, e.g., "close" or "undo" | | |
| style | boolean | Setting this prop to `false` will disable all inline styles | | |
| barStyle | object | Custom snackbar styles | | |
| activeBarStyle | object | Custom snackbar styles when the bar is active | | |
| actionStyle | object | Custom action styles | | |
| className | string | Custom class to apply to the top-level component | | |
| activeClassName | string | Custom class to apply to the top-level component when active| | `'notification-bar-active'`|
| dismissAfter | number | Timeout for onDismiss event | | `2000` |
*Setting this prop to `false` will disable all inline styles. This is useful if you aren't using React inline styles and would like to use CSS instead. See [styles](#styles) for more.
The `style` prop useful if you are not using React inline styles and would like to use CSS instead. See [styles](#styles) for more.

@@ -86,3 +89,3 @@ For NotificationStack component:

*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.*
**Note 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.**

@@ -96,3 +99,3 @@ ## Events

| onClick | Callback function to run when the action is clicked |
| onDismiss | Callback function to run when dismissAfter timer runs out |
| onDismiss | Callback function to run when dismissAfter timer runs out |

@@ -99,0 +102,0 @@ For NotificationStack component:

150

test/notification.js

@@ -1,94 +0,108 @@

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import jsdom from 'mocha-jsdom';
import expect from 'expect';
import { Notification, NotificationStack } from '../src/index';
import mockNotification from './mockNotification';
const MOCK = {
key: 1111111,
message: 'Test',
action: 'Dismiss',
dismissAfter: 3000,
onClick: function handleClick() {
return;
},
style: {
bar: {
background: '#bababa'
},
action: {
color: '#000'
},
active: {
left: '2rem'
}
}
};
describe('<Notification />', () => {
const wrapperClassName = '.notification-bar-wrapper';
const messageClassName = '.notification-bar-message';
const actionClassName = '.notification-bar-action';
describe('Notification', () => {
jsdom();
let component = shallow(
<Notification
message={mockNotification.message}
action={mockNotification.action}
barStyle={mockNotification.barStyle}
actionStyle={mockNotification.actionStyle}
activeBarStyle={mockNotification.activeBarStyle}
onClick={mockNotification.onClick}
dismissAfter={mockNotification.dismissAfter}
/>
);
it('should be a valid element', done => {
const component = (
<Notification
message={MOCK.message}
action={MOCK.action}
onClick={MOCK.onClick}
dismissAfter={MOCK.dismissAfter}
/>
);
const wrapper = component.find('.notification-bar-wrapper');
const message = wrapper.find(messageClassName);
const action = wrapper.find(actionClassName);
if (TestUtils.isElement(component)) done();
it('has the className `notification-bar`', () => {
expect(component).to.have.className('notification-bar');
});
it('should render correct message and action text', done => {
const tree = TestUtils.renderIntoDocument(
<Notification
message={MOCK.message}
action={MOCK.action}
onClick={MOCK.onClick}
dismissAfter={MOCK.dismissAfter}
/>
);
let { message, action } = tree.refs;
it('should render message element', () => {
expect(wrapper).to.have.descendants(messageClassName);
});
expect(message.innerHTML).toBe(MOCK.message);
expect(action.innerHTML).toBe(MOCK.action);
it('should render action element by default', () => {
expect(wrapper).to.have.descendants(actionClassName);
});
done();
it('should render message text', () => {
expect(message).to.have.text(mockNotification.message);
});
it('should handle click events', done => {
const tree = TestUtils.renderIntoDocument(
it('should render message element', () => {
let element = (<div></div>);
let message = shallow(
<Notification
message={MOCK.message}
action={MOCK.action}
onClick={MOCK.onClick}
dismissAfter={MOCK.dismissAfter}
message={element}
action={mockNotification.action}
barStyle={mockNotification.barStyle}
actionStyle={mockNotification.actionStyle}
activeBarStyle={mockNotification.activeBarStyle}
onClick={mockNotification.onClick}
dismissAfter={mockNotification.dismissAfter}
/>
);
).find(messageClassName);
let wrapper = TestUtils.findRenderedDOMComponentWithClass(tree, 'notification-bar-wrapper');
expect(message.contains(element)).to.equal(true);
});
TestUtils.Simulate.click(wrapper);
it('should render custom action text', () => {
expect(action).to.have.text(mockNotification.action);
});
done();
it('should use custom bar styles', () => {
expect(component).to.have.style('background', 'rgb(2, 2, 2)');
});
});
describe('NotificationStack', () => {
jsdom();
it('should use custom action styles', () => {
expect(action).to.have.style('color', 'rgb(2, 2, 2)');
});
it('should be a valid element', done => {
const component = (
<NotificationStack
notifications={[MOCK]}
onDismiss={MOCK.onClick}
it('should use custom active styles', () => {
let component = shallow(
<Notification
isActive={true}
message={mockNotification.message}
action={mockNotification.action}
barStyle={mockNotification.barStyle}
actionStyle={mockNotification.actionStyle}
activeBarStyle={mockNotification.activeBarStyle}
onClick={mockNotification.onClick}
dismissAfter={mockNotification.dismissAfter}
/>
);
if (TestUtils.isElement(component)) done();
expect(component).to.have.style('left', '4rem');
});
it('onClick fires once when action is clicked', () => {
const handleClick = spy();
const action = shallow(
<Notification
message={mockNotification.message}
action={mockNotification.action}
barStyle={mockNotification.barStyle}
actionStyle={mockNotification.actionStyle}
activeBarStyle={mockNotification.activeBarStyle}
onClick={handleClick}
dismissAfter={mockNotification.dismissAfter}
/>
).find(actionClassName);
action.simulate('click');
expect(handleClick.calledOnce).to.equal(true);
});
});
examples/es5/index.js
examples/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc