Disable timeout

* Add the ability to set notification to not dismiss after timeout
* Update documentation for dismissAfter prop
* Update tests with new test for dismissAfter with a value of `false`

Author: joeyfigaro

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 bin/tests/.tmp/
 dist/
+.DS_Store
 *.log*

Makefile

@@ -5,11 +5,11 @@ REPORTER = spec
 # Task: test
 # Run mocha tests for components.
 test:
-	@NODE_ENV=test $(BIN)/mocha \
-	  --compilers js:babel-core/register \
-	  --reporter $(REPORTER) \
-		--recursive \
-		--timeout 5000 \
-		$(TESTS)
+    @NODE_ENV=test $(BIN)/mocha \
+      --compilers js:babel-core/register \
+      --reporter $(REPORTER) \
+          --recursive \
+          --timeout 5000 \
+          $(TESTS)
 
 .PHONY: test

README.md

@@ -95,7 +95,7 @@ For Notification component:
 | 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`                     |
+| dismissAfter    | number or false         | Timeout for onDismiss event                                 |           | `2000`                     |
 
 The `style` prop useful if you are not using React inline styles and would like to use CSS instead. See [styles](#styles) for more.
 

src/defaultPropTypes.js

@@ -15,7 +15,10 @@ export default {
   actionStyle: PropTypes.object,
   barStyle: PropTypes.object,
   activeBarStyle: PropTypes.object,
-  dismissAfter: PropTypes.number,
+  dismissAfter: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number
+  ]),
   onDismiss: PropTypes.func,
   className: PropTypes.string,
   activeClassName: PropTypes.string.isRequired,

src/notification.js

@@ -19,6 +19,7 @@ class Notification extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    if (this.props.dismissAfter === false) return;
     if (!nextProps.hasOwnProperty('isLast'))
       clearTimeout(this.dismissTimeout);
     if (nextProps.onDismiss && nextProps.isActive && !this.props.isActive) {
@@ -30,7 +31,7 @@ class Notification extends Component {
   }
 
   componentWillUnmount() {
-    clearTimeout(this.dismissTimeout);
+    if (this.props.dismissAfter) clearTimeout(this.dismissTimeout);
   }
 
   /*

src/stackedNotification.js

@@ -15,9 +15,11 @@ class StackedNotification extends Component {
       isActive: true
     }), 1);
 
-    this.dismissTimeout = setTimeout(this.setState.bind(this, {
-      isActive: false
-    }), this.props.dismissAfter);
+    if (this.props.dismissAfter) {
+      this.dismissTimeout = setTimeout(this.setState.bind(this, {
+        isActive: false
+      }), this.props.dismissAfter);
+    }
   }
 
   componentWillUnmount() {

test/notification.js

@@ -32,7 +32,7 @@ describe('<Notification />', () => {
     expect(component).to.have.className('notification-bar');
   });
 
-  it('has custom class name', () => {
+ it('has custom class name', () => {
     let classNameComponent = shallow(
       <Notification
         message={mockNotification.message}
@@ -73,7 +73,6 @@ describe('<Notification />', () => {
     expect(classNameComponent).to.have.className(customActiveClassName);
   });
 
-
   it('should render message element', () => {
     expect(wrapper).to.have.descendants(messageClassName);
   });
@@ -206,18 +205,18 @@ describe('<Notification />', () => {
     }, mockNotification.dismissAfter);
   });
 
-  it('onDismiss fires correctly without prop change', done => {
+  it('onDismiss fires once when dismissAfter is passed', done => {
     const handleDismiss = spy();
-
     const wrapper = mount(
       <Notification
         message={mockNotification.message}
         dismissAfter={mockNotification.dismissAfter}
         onDismiss={handleDismiss}
-        isActive
       />
     );
 
+    wrapper.setProps({ isActive: true });
+
     setTimeout(() => {
       try {
         expect(handleDismiss.calledOnce).to.equal(true);
@@ -226,5 +225,19 @@ describe('<Notification />', () => {
         done(e);
       }
     }, mockNotification.dismissAfter);
-  })
+  });
+
+  it('onDismiss does not get fired when dismissAfter is false', () => {
+    const handleDismiss = spy();
+
+    const wrapper = shallow(
+      <Notification
+        message={mockNotification.message}
+        dismissAfter={false}
+        onDismiss={handleDismiss}
+      />
+    );
+
+    expect(handleDismiss.calledOnce).to.equal(false);
+  });
 });

test/notificationStack.js

@@ -22,6 +22,7 @@ describe('<NotificationStack />', () => {
     );
 
     wrapper.update();
+
     setTimeout(() => {
       try {
         expect(handleDismiss.calledOnce).to.equal(true);

test/setup.js

@@ -1,6 +1,9 @@
 import chai from 'chai';
 import chaiEnzyme from 'chai-enzyme';
 
+// Include stack on error
+chai.config.includeStack = true;
+
 /**
  * Add commonly used functions in tests to global
  * so they do not need to be imported each time.