Merge pull request #119 from BamaBoy/barFactoriesUpdate

Bar styles factories enhancement

docs/guides/styles.md

@@ -27,18 +27,18 @@ I would highly suggest using this method since the styles included in the compon
 These two function have the following signature:
 
 ```js
-(index: Number, style: Object|Void) => Object
+(index: Number, style: Object|Void, notification: Object) => Object
 ```
 
-Where `index` is the index of the notification in the notifications array and
-`style` is the style property of the individual notification.
+Where `index` is the index of the notification in the notifications array,
+`style` is the style property of the individual notification and `notification` is the notification itself.
 
 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) {
+function defaultStyleFactory(index, style, notification) {
   return Object.assign(
     {},
     style,

src/notificationStack.js

@@ -23,8 +23,12 @@ const NotificationStack = props => (
       const dismissNow = isLast || !props.dismissInOrder;
 
       // Handle styles
-      const barStyle = props.barStyleFactory(index, notification.barStyle);
-      const activeBarStyle = props.activeBarStyleFactory(index, notification.activeBarStyle);
+      const barStyle = props.barStyleFactory(index, notification.barStyle, notification);
+      const activeBarStyle = props.activeBarStyleFactory(
+        index,
+        notification.activeBarStyle,
+        notification
+      );
 
       // Allow onClick from notification stack or individual notifications
       const onClick = notification.onClick || props.onClick;

test/notificationStack.js

@@ -179,6 +179,26 @@ describe('<NotificationStack />', () => {
     expect(notification.prop('barStyle').background).to.equal('rgb(2, 2, 2)');
   });
 
+  it('batStyleFactory should have access to notification', () => {
+    const styleFactory = (index, style, notification) => Object.assign(
+      {},
+      style,
+      { bottom: `${index}px`, color: notification.key === 1111111 ? 'green' : 'red' }
+    );
+
+    const stack = mount(
+      <NotificationStack
+        notifications={[mockNotification]}
+        barStyleFactory={styleFactory}
+        onDismiss={() => {}}
+      />
+    );
+
+    const notification = stack.find(Notification);
+
+    expect(notification.prop('barStyle').color).to.equal('green');
+  });
+
   it('activeBarStyleFactory should set correct style on notification', () => {
     const styleFactory = (index, style) => Object.assign(
       {},
@@ -219,6 +239,26 @@ describe('<NotificationStack />', () => {
     expect(notification.prop('activeBarStyle').left).to.equal('4rem');
   });
 
+  it('activeBarStyleFactory should have access to notification', () => {
+    const styleFactory = (index, style, notification) => Object.assign(
+      {},
+      style,
+      { bottom: `${index}px`, color: notification.key === 1111111 ? 'green' : 'red' }
+    );
+
+    const stack = mount(
+      <NotificationStack
+        notifications={[mockNotification]}
+        activeBarStyleFactory={styleFactory}
+        onDismiss={() => {}}
+      />
+    );
+
+    const notification = stack.find(Notification);
+
+    expect(notification.prop('activeBarStyle').color).to.equal('green');
+  });
+
   /**
    * Test: Global handling of onClick:
    *