🐞 Changing timeout should call onActive. #796

src/IdleTimer.js

@@ -120,9 +120,7 @@ class IdleTimer extends Component {
     this._bindEvents()
     // If startOnMount is enabled start the timer
     const { startOnMount } = this.props
-    if (startOnMount) {
-      this.reset()
-    }
+    if (startOnMount) this.reset()
   }
 
   componentDidUpdate (prevProps) {
@@ -139,8 +137,9 @@ class IdleTimer extends Component {
       this._handleEvent = throttled(this._handleEvent, this.props.eventsThrottle)
     }
     // Update timeout value
-    if (prevProps.timeout !== this.props.timeout && this.tid !== null) {
-      this.reset()
+    if (prevProps.timeout !== this.props.timeout) {
+      if (this.state.idle) this._toggleIdleState()
+      if (this.tid !== null) this.reset()
     }
   }
 

src/__tests__/IdleTimer.test.js

@@ -215,6 +215,20 @@ describe('IdleTimer', () => {
       expect(props.onIdle.callCount).toBe(2)
       done()
     })
+
+    it('Should call onActive if timeout changes while idle', async done => {
+      props.onIdle = sinon.spy()
+      props.onActive = sinon.spy()
+      props.timeout = 500
+      const timer = idleTimer()
+      await sleep(600)
+      expect(props.onIdle.callCount).toBe(1)
+      timer.setProps({ timeout: 300 })
+      await sleep(400)
+      expect(props.onActive.callCount).toBe(1)
+      expect(props.onIdle.callCount).toBe(2)
+      done()
+    })
   })
 
   describe('events', () => {

src/__tests__/useIdleTimer.test.js

@@ -136,6 +136,21 @@ describe('useIdleTimer', () => {
         expect(props.onIdle.callCount).toBe(2)
         done()
       })
+
+      it('Should call onActive if timeout changes while idle', async done => {
+        props.onIdle = sinon.spy()
+        props.onActive = sinon.spy()
+        props.timeout = 500
+        const { rerender } = idleTimer()
+        await sleep(600)
+        expect(props.onIdle.callCount).toBe(1)
+        props.timeout = 300
+        rerender()
+        await sleep(400)
+        expect(props.onActive.callCount).toBe(1)
+        expect(props.onIdle.callCount).toBe(2)
+        done()
+      })
     })
 
     describe('events', () => {

src/useIdleTimer.js

@@ -44,6 +44,7 @@ function useIdleTimer ({
   const lastActive = useRef(null)
   const lastIdle = useRef(null)
   const idleTime = useRef(0)
+  const firstLoad = useRef(true)
   const _timeout = useRef(timeout)
 
   // Event emitters
@@ -359,7 +360,9 @@ function useIdleTimer ({
 
   useEffect(() => {
     _timeout.current = timeout
+    if (idle.current && !firstLoad.current) _toggleIdleState()
     if (tId.current !== null) reset()
+    firstLoad.current = false
   }, [timeout])
 
   return {