Add customizable classnames for bar and container

Author: avanes

src/js/ScrollArea.jsx

@@ -97,6 +97,8 @@ export default class ScrollArea extends React.Component{
                 onPositionChange={this.handleScrollbarYPositionChange.bind(this)}
                 containerStyle={this.props.verticalContainerStyle}
                 scrollbarStyle={this.props.verticalScrollbarStyle}
+                className={this.props.scrollbarClassName}
+                containerClassName={this.props.containerClassName}
                 smoothScrolling={withMotion}
                 minScrollSize={this.props.minScrollSize}
                 type="vertical"/>
@@ -112,6 +114,8 @@ export default class ScrollArea extends React.Component{
                 onPositionChange={this.handleScrollbarXPositionChange.bind(this)}
                 containerStyle={this.props.horizontalContainerStyle}
                 scrollbarStyle={this.props.horizontalScrollbarStyle}
+                className={this.props.scrollbarClassName}
+                containerClassName={this.props.containerClassName}
                 smoothScrolling={withMotion}
                 minScrollSize={this.props.minScrollSize}
                 type="horizontal"/>
@@ -391,6 +395,8 @@ ScrollArea.propTypes = {
     style: React.PropTypes.object,
     speed: React.PropTypes.number,
     contentClassName: React.PropTypes.string,
+    scrollbarClassName: React.PropTypes.string,
+    containerClassName: React.PropTypes.string,
     contentStyle: React.PropTypes.object,
     vertical: React.PropTypes.bool,
     verticalContainerStyle: React.PropTypes.object,

src/js/Scrollbar.jsx

@@ -59,13 +59,13 @@ class ScrollBar extends React.Component {
     }
 
     render(){
-        let {smoothScrolling, isDragging, type, scrollbarStyle, containerStyle} = this.props;
+        let {smoothScrolling, isDragging, type, scrollbarStyle, className, containerStyle, containerClassName} = this.props;
         let isVoriziontal = type === 'horizontal';
         let isVertical = type === 'vertical';
         let scrollStyles = this.createScrollStyles();
         let springifiedScrollStyles = smoothScrolling ? modifyObjValues(scrollStyles, x => spring(x)) : scrollStyles;
 
-        let scrollbarClasses = `scrollbar-container ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`; 
+        let scrollbarClasses = `scrollbar-container ${containerClassName || ''} ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`;
 
         return (
             <Motion style={{...scrollbarStyle, ...springifiedScrollStyles}}>
@@ -75,7 +75,7 @@ class ScrollBar extends React.Component {
                         onMouseDown={this.handleScrollBarContainerClick.bind(this)}
                         ref={ x => { this.scrollbarContainer = x}}>
 
-                        <div className="scrollbar"
+                        <div className={`scrollbar ${className || ''}`}
                             style={style}
                             onMouseDown={this.handleMouseDown.bind(this)}
                             >
@@ -163,6 +163,8 @@ ScrollBar.propTypes = {
     realSize: React.PropTypes.number,
     containerSize: React.PropTypes.number,
     position: React.PropTypes.number,
+    className: React.PropTypes.string,
+    containerClassName: React.PropTypes.string,
     containerStyle: React.PropTypes.object,
     scrollbarStyle: React.PropTypes.object,
     type: React.PropTypes.oneOf(['vertical', 'horizontal']),