react-notification - npm Package Compare versions

Comparing version 5.0.7 to 6.0.0

dist/notificationStack.js

@@ -23,2 +23,6 @@ 'use strict';
 
+function defaultStyleFactory(index, style) {
+  return Object.assign({}, style, { bottom: 2 + index * 4 + 'rem' });
+}
+
 /**
@@ -36,2 +40,4 @@ * The notification list does not have any state, so use a
       var isLast = index === 0 && props.notifications.length === 1;
+      var barStyle = props.barStyleFactory(index, notification.barStyle);
+      var activeBarStyle = props.activeBarStyleFactory(index, notification.activeBarStyle);
 
@@ -44,3 +50,4 @@ return _react2.default.createElement(_stackedNotification2.default, _extends({}, notification, {
         onDismiss: props.onDismiss.bind(undefined, notification),
-        index: index
+        activeBarStyle: activeBarStyle,
+        barStyle: barStyle
       }));
@@ -52,2 +59,4 @@ })
 NotificationStack.propTypes = {
+  activeBarStyleFactory: _react.PropTypes.func,
+  barStyleFactory: _react.PropTypes.func,
   notifications: _react.PropTypes.array.isRequired,
@@ -58,5 +67,7 @@ onDismiss: _react.PropTypes.func.isRequired
 NotificationStack.defaultProps = {
-  dismissAfter: 1000
+  dismissAfter: 1000,
+  activeBarStyleFactory: defaultStyleFactory,
+  barStyleFactory: defaultStyleFactory
 };
 
 exports.default = NotificationStack;

dist/stackedNotification.js

@@ -63,4 +63,2 @@ 'use strict';
 
-      var bottomPosition = 2 + this.props.index * 4 + 'rem';
-
       return _react2.default.createElement(_notification2.default, _extends({}, this.props, {
@@ -70,9 +68,3 @@ onDismiss: function onDismiss() {
         },
-        isActive: this.state.isActive,
-        barStyle: Object.assign({}, {
-          bottom: bottomPosition
-        }, this.props.barStyle),
-        activeBarStyle: Object.assign({}, {
-          bottom: bottomPosition
-        }, this.props.activeBarStyle)
+        isActive: this.state.isActive
       }));
@@ -79,0 +71,0 @@ }

package.json

 {
   "name": "react-notification",
-  "version": "5.0.7",
+  "version": "6.0.0",
   "description": "Snackbar style notification component for React.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -80,3 +80,3 @@ # react-notification
 
-See the [examples](/examples/notification-tree) for more context on how to use a notification stack.
+See the [examples](examples/notification-tree) for more context on how to use a notification stack.
 
@@ -105,5 +105,7 @@ ### Props
 
-| Name           | Type  | Description                                  | Required  | Default  |
-|----------------|-------|----------------------------------------------|---------- |----------|
-| notifications  | array | Array of notifications to render             | true      |          |
+| Name                  | Type  | Description                                  | Required  | Default  |
+|-----------------------|-------|----------------------------------------------|---------- |----------|
+| notifications         | array | Array of notifications to render             | true      |          |
+| barStyleFactory       | func  | create the style of the notification         | false     | fn       |
+| activeBarStyleFactory | func  | create the style of the active notification  | false     | fn       |
 
@@ -149,2 +151,27 @@ **Update** `v5.0.3`: Now notifications used in a stack _can_ have all properties included in the regular notification component.
 
+### barStyleFactory and activeBarStyleFactory NotificationStack props
+
+These two function have the following signature:
+
+```js
+(index: Number, style: Object|Void) => Object
+```
+
+Where `index` is the index of the notification in the notifications array and
+`style` is the style property of the individual notification.
+
+This function is used to dynamically set the style of each notification in the
+stack. The default function adds the `bottom` style property to correctly
+position of the notification in a stack.
+
+```js
+function defaultStyleFactory(index, style) {
+  return Object.assign(
+    {},
+    style,
+    { bottom: `${2 + index * 4}rem` }
+  );
+}
+```
+
 ---
@@ -151,0 +178,0 @@ Built with care in New Orleans by [Patrick Burtchaell](http://twitter.com/pburtchaell).

test/notification.js

@@ -10,2 +10,5 @@ import { Notification, NotificationStack } from '../src/index';
 
+  const customClassName = 'foo';
+  const customActiveClassName = 'bar';
+
   let component = shallow(
@@ -33,2 +36,44 @@ <Notification
 
+  it('has custom class name', () => {
+    let classNameComponent = shallow(
+      <Notification
+        message={mockNotification.message}
+        action={mockNotification.action}
+        barStyle={mockNotification.barStyle}
+        actionStyle={mockNotification.actionStyle}
+        activeBarStyle={mockNotification.activeBarStyle}
+        onClick={mockNotification.onClick}
+        dismissAfter={mockNotification.dismissAfter}
+        title={mockNotification.title}
+        className={customClassName}
+      />
+    );
+
+    expect(classNameComponent).to.have.className(customClassName);
+  });
+
+  it('has custom active class name', () => {
+    let classNameComponent = shallow(
+      <Notification
+        message={mockNotification.message}
+        action={mockNotification.action}
+        barStyle={mockNotification.barStyle}
+        actionStyle={mockNotification.actionStyle}
+        activeBarStyle={mockNotification.activeBarStyle}
+        onClick={mockNotification.onClick}
+        dismissAfter={mockNotification.dismissAfter}
+        title={mockNotification.title}
+        className={customClassName}
+        activeClassName={customActiveClassName}
+      />
+    );
+
+    expect(classNameComponent).to.have.className(customClassName);
+
+    classNameComponent.setProps({ isActive: true });
+
+    expect(classNameComponent).to.have.className(customActiveClassName);
+  });
+
+
   it('should render message element', () => {
@@ -35,0 +80,0 @@ expect(wrapper).to.have.descendants(messageClassName);

test/notificationStack.js

@@ -70,2 +70,70 @@ import { Notification, NotificationStack } from '../src/index';
   });
+
+  it('barStyleFactory should set correct style on notification', () => {
+    const styleFactory = (index, style) => Object.assign(
+      {},
+      style,
+      { bottom: `${index}px` }
+    );
+    const stack = mount(
+      <NotificationStack
+        notifications={[mockNotification]}
+        barStyleFactory={styleFactory}
+        onDismiss={() => {}}
+      />
+    );
+    const notification = stack.find(Notification);
+    expect(notification.prop('barStyle').bottom).to.equal('0px');
+  });
+
+  it('barStyleFactory should respect notification barStyle', () => {
+    const styleFactory = (index, style) => Object.assign(
+      {},
+      style,
+      { bottom: `${index}px` }
+    );
+    const stack = mount(
+      <NotificationStack
+        notifications={[mockNotification]}
+        barStyleFactory={styleFactory}
+        onDismiss={() => {}}
+      />
+    );
+    const notification = stack.find(Notification);
+    expect(notification.prop('barStyle').background).to.equal('rgb(2, 2, 2)');
+  });
+
+  it('activeBarStyleFactory should set correct style on notification', () => {
+    const styleFactory = (index, style) => Object.assign(
+      {},
+      style,
+      { bottom: `${index + 2}px` }
+    );
+    const stack = mount(
+      <NotificationStack
+        notifications={[mockNotification]}
+        activeBarStyleFactory={styleFactory}
+        onDismiss={() => {}}
+      />
+    );
+    const notification = stack.find(Notification);
+    expect(notification.prop('activeBarStyle').bottom).to.equal('2px');
+  });
+
+  it('activeBarStyleFactory should respect notification actionBarStyle', () => {
+    const styleFactory = (index, style) => Object.assign(
+      {},
+      style,
+      { bottom: `${index}px` }
+    );
+    const stack = mount(
+      <NotificationStack
+        notifications={[mockNotification]}
+        activeBarStyleFactory={styleFactory}
+        onDismiss={() => {}}
+      />
+    );
+    const notification = stack.find(Notification);
+    expect(notification.prop('activeBarStyle').left).to.equal('4rem');
+  })
 });

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

363663

increased by1.27%

Lines of code

836

increased by14.21%

Number of lines in readme file

178

increased by17.88%

No dependency changes