Dynamically control bar bottom value

Adds the ability to pass in a function for either
`barStyle` or `activeBarStyle` props on the NotificationStack component.
This makes the bottom css value controllable by the user.
closes #57

Author: Berkeley Martinez

README.md

@@ -101,9 +101,11 @@ The `style` prop useful if you are not using React inline styles and would like
 
 For NotificationStack component:
 
-| 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       |
 
 **Update** `v5.0.3`: Now notifications used in a stack _can_ have all properties included in the regular notification component.
 
@@ -144,6 +146,31 @@ To use additional inline styles, return two objects. The `bar` object applies st
 
 I would highly suggest using this method since the styles included in the component by default handle the visibility of the notification. If you remove these styles, the component won't actually show or hide itself.
 
+### 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` }
+  );
+}
+```
+
 ---
 Built with care in New Orleans by [Patrick Burtchaell](http://twitter.com/pburtchaell).
 

src/notificationStack.js

@@ -2,6 +2,14 @@ import React, { PropTypes } from 'react';
 import defaultPropTypes from './defaultPropTypes';
 import StackedNotification from './stackedNotification';
 
+function defaultStyleFactory(index, style) {
+  return Object.assign(
+    {},
+    style,
+    { bottom: `${2 + index * 4}rem` }
+  );
+}
+
 /**
  * The notification list does not have any state, so use a
  * pure function here. It just needs to return the stacked array
@@ -13,6 +21,11 @@ const NotificationStack = props => {
       {props.notifications.map((notification, index) => {
         const dismissAfter = notification.dismissAfter || props.dismissAfter;
         const isLast = index === 0 && props.notifications.length === 1;
+        const barStyle = props.barStyleFactory(index, notification.barStyle);
+        const activeBarStyle = props.activeBarStyleFactory(
+          index,
+          notification.activeBarStyle
+        );
 
         return (
           <StackedNotification
@@ -22,7 +35,8 @@ const NotificationStack = props => {
             action={notification.action || props.action}
             dismissAfter={isLast ? dismissAfter : dismissAfter + (index * 1000)}
             onDismiss={props.onDismiss.bind(this, notification)}
-            index={index}
+            activeBarStyle={activeBarStyle}
+            barStyle={barStyle}
           />
         );
       })}
@@ -31,12 +45,16 @@ const NotificationStack = props => {
 };
 
 NotificationStack.propTypes = {
+  activeBarStyleFactory: PropTypes.func,
+  barStyleFactory: PropTypes.func,
   notifications: PropTypes.array.isRequired,
   onDismiss: PropTypes.func.isRequired
 };
 
 NotificationStack.defaultProps = {
-  dismissAfter: 1000
+  dismissAfter: 1000,
+  activeBarStyleFactory: defaultStyleFactory,
+  barStyleFactory: defaultStyleFactory
 }
 
 export default NotificationStack;

src/stackedNotification.js

@@ -26,19 +26,11 @@ class StackedNotification extends Component {
   }
 
   render() {
-    const bottomPosition = `${2 + this.props.index * 4}rem`;
-
     return (
       <Notification
         {...this.props}
         onDismiss={() => setTimeout(this.props.onDismiss, 300)}
         isActive={this.state.isActive}
-        barStyle={Object.assign({}, {
-          bottom: bottomPosition
-        }, this.props.barStyle)}
-        activeBarStyle={Object.assign({}, {
-          bottom: bottomPosition
-        }, this.props.activeBarStyle)}
       />
     );
   }

test/notificationStack.js

@@ -67,4 +67,72 @@ describe('<NotificationStack />', () => {
 
     expect(handleDismiss.calledOnce).to.equal(false);
   });
+
+  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');
+  })
 });