Add persistentScrollbar props, example, test and doc

Author: promet99

README.md

@@ -63,6 +63,7 @@ This prop will override any value given to heightRelativeToParent when setting t
 - **rtl** : boolean, default false. Right to left document, will place the custom scrollbar on the left side of the content, and assume the native one is also there.
 - **scrollTo**: number, default undefined. Will scroll content to the given value.
 - **keepAtBottom**: boolean, default false. For dynamic content, will keep the scroll position at the bottom of the content, when the content changes, if the position was at the bottom before the change. [See example here](http://rommguy.github.io/react-custom-scroll/example/demo.html?dynamic=true)
+- **persistentScrollbar**: boolean, default false. When true, scrollbar will show even while the content is not hovered.
 - **className**: string, default undefined. Allows adding your own class name to the root element.
 
 ##### Example for heightRelativeToParent

dist/customScroll.css

@@ -1,3 +1,27 @@
+/*!************************!*\
+          !*** external "react" ***!
+          \************************/
+
+/*!**************************!*\
+          !*** ./src/main/cs.scss ***!
+          \**************************/
+
+/*!****************************!*\
+          !*** external "react-dom" ***!
+          \****************************/
+
+/*!*****************************!*\
+          !*** external "prop-types" ***!
+          \*****************************/
+
+/*!**********************************!*\
+          !*** ./src/main/customScroll.js ***!
+          \**********************************/
+
+/*!************************************!*\
+          !*** ./src/main/simpleDebounce.js ***!
+          \************************************/
+
 /**
  * @license
  * Lodash <https://lodash.com/>

dist/reactCustomScroll.js

@@ -80,6 +80,20 @@ export class FirstComp extends Component {
             </CustomScroll>
           </div>
         </div>
+        <div key="persistent-example" className="container custom-scroll-example">
+          <label className="side-title">Persistent Scroll</label>
+
+          <div className="panel">
+            <div className="panel-header">
+              <label className="panel-title">Hover or not, I'm here!</label>
+            </div>
+            <CustomScroll allowOuterScroll={true} persistentScrollbar>
+              <div className="panel-content-custom panel-content">
+                <div className="content-fill">{this.getText()}</div>
+              </div>
+            </CustomScroll>
+          </div>
+        </div>
         <div key="crazy-example" className="container custom-scroll-example">
           <label className="side-title">Crazy Designer</label>
 

example/exampleDist/example.js

@@ -69,6 +69,10 @@
     }
   }
 
+  .persistent-scrollbar {
+    opacity: 1;
+  }
+
   &.scroll-handle-dragged .custom-scrollbar {
     opacity: 1;
   }

example/exampleDist/example.js.LICENSE.txt

@@ -368,8 +368,8 @@ class CustomScroll extends Component {
             <div className={styles.positioning}>
               <div
                 ref={this.customScrollbarRef}
-                className={`${styles.customScrollbar} ${this.props.rtl ? styles.customScrollbarRtl : ''}`}
-                key="scrollbar"
+                className={`${styles.customScrollbar} ${this.props.rtl ? styles.customScrollbarRtl : ''} ${this.props.persistentScrollbar ? styles.persistentScrollbar : ''}`}
+                key='scrollbar'
               >
                 <div ref={this.scrollHandleRef} className={styles.customScrollHandle} style={scrollHandleStyle}>
                   <div className={this.props.handleClass} />
@@ -408,6 +408,7 @@ try {
     rtl: PropTypes.bool,
     scrollTo: PropTypes.number,
     keepAtBottom: PropTypes.bool,
+    persistentScrollbar: PropTypes.bool,
     className: PropTypes.string
   }
 } catch (e) {} //eslint-disable-line no-empty

example/firstComp/firstComp.js

@@ -199,6 +199,13 @@ describe('custom scroll', function () {
         })
       })
     })
+
+    describe('persistentScrollbar is injected to class', function(){
+      it('class rcs-persistent-scrollbar should be inejcted to customScrollbar is props.persistentScrollbar is true', function () {
+        const customScroll = renderCustomScroll(customScrollContainer, { persistentScrollbar: true }, visibleHeight, totalScrollHeight)
+        expect(customScroll.customScrollbarRef.current).toHaveClass('rcs-persistent-scrollbar')
+      })
+    })
   })
 
   describe('freeze position', function () {