Improving offset and adding resize listener

[falcon1kr]

improved offset props to apply with other use cases, including partialVisibility
Also added optional window resize event listener enabled with resizeCheck props which can be used with resizeDelay

[roopemerikukka]

👍

[eek]

Awesome! I was looking for improvements, and the function from #63 would be great to actually replace my original debounce implementation.

The problem I have is that on mobile the scroll slows down and until it stops, the debounce is not triggered, and that makes things to seem to take forever.

Later-edit: Actually, nevermind, debouce is great on desktop and the throttle from #63 on mobile ^.^

[eek]

@falcon1kr, I have forked you to use your version on our production build, and I have instantly noticed that while you have my debounce fix regarding findDomNode on unMounted components, the debounce function that you moved it in addEventListener is missing it's most important line:

this.lastTimeout = timeout;

after

timeout = setTimeout(later, delay || 0);

I see that clearTimeout(this.lastTimeout); is still there but lastTimeout no longer existed.

[eek]

We need this.lastTimeout = timeout; back under timeout = setTimeout(later, delay || 0);

[falcon1kr]

@eek, clearTimeout(this.lastTimeout); was left behind as a mistake. From my understanding, this.lastTimeout was added to track the timeout object so we can cleanup on unmount. But, with the addition of the resize listener, I needed to keep track of multiple timeouts separately to clean up. So I moved it into the "debounce info" object that gets created when addEventListenerWithDebounce is called (timeout property). However, looking back, I realized I made a mistake of statically referring to the timeout object when creating the debounce info object ... I'll fix that to replace it with a function so we can use closure to access the "last" timeout object that's created

[falcon1kr]

1. Just addressed the issue mentioned by @eek
2. merged in the throttle changes made by @ChristianDavis with small changes. instead of throttleScroll and throttleLimit props, my code looks for scrollThrottle > -1 along with scrollCheck. scrollThrottlesupersedesscrollDelay`.
3. resizeThrottle is added in to support throttling for resize event.
4. does proper cleanup of the timeout for both delayed and throttled case
5. updated the README to reflect throttle

[joshwnj]

Thanks @falcon1kr this is looking good :) Before we merge, is the change to offset the only breaking change? Or are there other things existing users will need to do when upgrading?

[joshwnj]

Here's how I'm thinking about addressing backwards-compatibility: re-add some of the removed code deleted in this PR, but with a deprecation warning. We can even inform the user exactly how they should upgrade:

+    // Deprecated options for calculating offset.
+    if (typeof offset.direction === 'string' &&
+        typeof offset.value === 'number') {
+      console.warn('[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }', offset.direction, offset.value)
+
+      isVisible = isVisibleWithOffset(offset, rect, containmentRect);
+    }

If nobody has objections I'll merge this PR in the next few days, along with the above modification (and some updates to proptypes and tests).

[joshwnj]

published to v3.8.0

thanks everyone for your help, and your patience getting this big change through :)