content size tracker;

API actualization;

Author: xobotyi

README.md

@@ -46,4 +46,8 @@ All properties and methods are in the [API Documentation](https://github.com/xob
 Run the example, it will install dependencies, build current component version and run local web-server listening `localhost:3000` (browser window will open automatically)
 ```bash
 npm run examples
-```
+```
+
+## Credits
+Big thanks to @malte-wessel with his [react-custom-scrollbars](https://github.com/malte-wessel/react-custom-scrollbars) which I used before writing this component.
+So don't be wondered that repos and code are look the same in some places, his package used as ethalon. And for the users convenience i've tried to make API's seamless as much as it possible.

docs/API.md

@@ -6,6 +6,11 @@
     * `defaultStyles`: _(boolean)_ Apply default inline styles _(default: false)_
     * `thumbSizeMin`: _(number)_ Minimal size of thumb in pixels _(default: 30)_
     * `scrollDetectionThreshold`: _(number)_ Scroll process check interval in milliseconds _(default: 100)_
+    * `permanentScrollbars`: _(boolean)_ Display both, vertical and horizontal scrollbars permanently, in spite of scrolling possibility _(default: false)_
+    * `permanentScrollbarVertical`: _(boolean)_ Display vertical scrollbar permanently, in spite of scrolling possibility  _(default: false)_
+    * `permanentScrollbarHorizontal`: _(boolean)_ Display horizontal scrollbar permanently, in spite of scrolling possibility  _(default: false)_
+    * `contentSizeTrack`: _(boolean)_ Automatically check content's sizes to actualize the scrollbars. Useful when dom is changed not only by react. _(default: false)_
+    * `contentSizeTrackInterval`: _(number)_ Interval between content's size check, in milliseconds _(default: 200)_
 * **Rendering**
     * `renderWrapper`: _(function)_ The element that wraps the content in order to hide browser's scrollbars
     * `renderContent`: _(function)_ The element where content will be rendered

docs/USAGE.md

@@ -1,7 +1,7 @@
 # USAGE
 
 ### Default
-The <Scrollbar> component works out of the box, with only need of `width` and `height` to be set, inline or via CSS;
+The `<Scrollbar />` component works out of the box, with only need of `width` and `height` to be set, inline or via CSS;
 ```javascript
 import React, { Component }  from 'react';
 import Scrollbar from 'react-scrollbar-custom';
@@ -84,3 +84,20 @@ class App extends Component
     }
 }
 ```
+
+### Automatic size checks
+It is possible that DOM will be changed not only with React: for these cases `<Scrollbar />` has automatic content checker.
+```javascript
+import React, { Component }  from 'react';
+import Scrollbar from 'react-scrollbar-custom';
+
+class App extends Component
+{
+    render() {
+        return (
+                <Scrollbar contentSizeTrack={true} contentSizeTrack={500}/>
+        );
+    }
+}
+```
+Now `<Scrollbar/>` will check content's sizes every 500ms and trigger `Scrollbar.update()` if they're changed.

src/Scrollbar/index.js

@@ -15,6 +15,8 @@ export default class Scrollbar extends Component
         permanentScrollbars:          PropTypes.bool,
         permanentScrollbarVertical:   PropTypes.bool,
         permanentScrollbarHorizontal: PropTypes.bool,
+        contentSizeTrack:         PropTypes.bool,
+        contentSizeTrackInterval: PropTypes.number,
 
         onUpdate:      PropTypes.func,
         onScroll:      PropTypes.func,
@@ -24,8 +26,6 @@ export default class Scrollbar extends Component
         tagName:   PropTypes.string,
         className: PropTypes.string,
 
-        renderScroller: PropTypes.func,
-
         renderWrapper:         PropTypes.func,
         renderContent:         PropTypes.func,
         renderTrackVertical:   PropTypes.func,
@@ -42,6 +42,8 @@ export default class Scrollbar extends Component
         permanentScrollbars:          false,
         permanentScrollbarVertical:   false,
         permanentScrollbarHorizontal: false,
+        contentSizeTrack:         false,
+        contentSizeTrackInterval: 200,
 
         tagName:               'div',
         className:             'CustomScrollbar',
@@ -76,16 +78,43 @@ export default class Scrollbar extends Component
         this.removeListeners();
 
         raf.cancel(this.requestFrame);
-        clearInterval(this.scrollDetect.interval);
+
+        if (this.scrollDetect.interval) {
+            clearInterval(this.scrollDetect.interval);
+            this.scrollDetect.interval = undefined;
+        }
+        this.contentSizeTrackStop();
     }
 
     componentDidMount() {
         this.addListeners();
         this.update();
+
+        if (this.props.contentSizeTrack) {
+            this.contentSizeTrackStart();
+        }
     }
 
     componentDidUpdate() {
         this.update();
+
+        const {scrollHeight = 0, scrollWidth = 0, clientHeight = 0, clientWidth = 0} = this.content;
+        this.contentSizeTrackPreviousSize = {scrollHeight, scrollWidth, clientHeight, clientWidth};
+    }
+
+    componentWillUpdate(nextProps, nextState) {
+        if (nextProps.contentSizeTrack !== this.props.contentSizeTrack) {
+            if (nextProps.contentSizeTrack) {
+                this.contentSizeTrackStart();
+            }
+            else {
+                this.contentSizeTrackStop();
+            }
+        }
+        else if (nextProps.contentSizeTrack && nextProps.contentSizeTrackInterval !== this.props.contentSizeTrackInterval) {
+            this.contentSizeTrackStop();
+            this.contentSizeTrackStart();
+        }
     }
 
     /**
@@ -514,10 +543,49 @@ export default class Scrollbar extends Component
         return this;
     }
 
+    /**
+     * @return {Scrollbar}
+     */
+    contentSizeTrackStart() {
+        if (!this.content || this.contentSizeTrackInterval) { return this; }
+
+        const {scrollHeight = 0, scrollWidth = 0, clientHeight = 0, clientWidth = 0} = this.content;
+        this.contentSizeTrackPreviousSize = {scrollHeight, scrollWidth, clientHeight, clientWidth};
+        const {contentSizeTrackInterval} = this.props;
+
+        this.contentSizeTrackInterval = setInterval(() => {
+            const {scrollHeight = 0, scrollWidth = 0, clientHeight = 0, clientWidth = 0} = this.content;
+
+            if (this.contentSizeTrackPreviousSize.scrollHeight !== scrollHeight || this.contentSizeTrackPreviousSize.scrollWidth !== scrollWidth ||
+                this.contentSizeTrackPreviousSize.clientHeight !== clientHeight || this.contentSizeTrackPreviousSize.clientWidth !== clientWidth) {
+                this.update();
+            }
+
+            this.contentSizeTrackPreviousSize = {scrollHeight, scrollWidth, clientHeight, clientWidth};
+        }, contentSizeTrackInterval);
+
+        return this;
+    }
+
+    /**
+     * @return {Scrollbar}
+     */
+    contentSizeTrackStop() {
+        if (this.contentSizeTrackInterval) {
+            clearInterval(this.contentSizeTrackInterval);
+        }
+
+        this.contentSizeTrackInterval = undefined;
+        this.contentSizeTrackPreviousSize = undefined;
+
+        return this;
+    }
+
     render() {
         const {
                   style, thumbSizeMin, defaultStyles, scrollDetectionThreshold, permanentScrollbars, permanentScrollbarVertical, permanentScrollbarHorizontal,
-                  tagName, children, renderScroller, renderWrapper, renderContent, renderTrackVertical, renderTrackHorizontal, renderThumbVertical, renderThumbHorizontal,
+                  contentSizeTrack, contentSizeTrackInterval,
+                  tagName, children, renderWrapper, renderContent, renderTrackVertical, renderTrackHorizontal, renderThumbVertical, renderThumbHorizontal,
                   onUpdate, onScroll, onScrollStart, onScrollStop,
                   ...props
               } = this.props;