Add support for custom classes on dim and dock DOM elements.

README.md

@@ -37,7 +37,9 @@ render() {
 | dimMode | If `none` - content is not dimmed, if `transparent` - pointer events are disabled (so you can click through it), if `opaque` - click on dim area closes the dock. Default is `opaque` |
 | duration | Animation duration. Should be synced with transition animation in style properties |
 | dimStyle | Style for dim area |
+| dimClasses | Array of class names for dim area. **Keep in mind that inline styles have higher priority on external styles.** |
 | dockStyle | Style for dock |
+| dockClasses | Array of class names for dock. **Keep in mind that inline styles have higher priority on external styles.** |
 | zIndex | Z-index for wrapper |
 | onVisibleChange | Fires when `Dock` wants to change `isVisible` (when opaque dim is clicked, in particular) |
 | onSizeChange | Fires when `Dock` wants to change `size` |

src/Dock.js

@@ -236,7 +236,9 @@ export default class Dock extends Component {
     onVisibleChange: PropTypes.func,
     onSizeChange: PropTypes.func,
     dimStyle: PropTypes.object,
+    dimClasses: PropTypes.array,
     dockStyle: PropTypes.object,
+    dockClasses: PropTypes.array,
     duration: PropTypes.number
   }
 
@@ -320,15 +322,17 @@ export default class Dock extends Component {
     const { isResizing, size, isDimHidden } = this.state;
 
     const dimStyles = Object.assign({}, ...getDimStyles(this.props, this.state));
+    const dimClasses = this.props.dimClasses ? this.props.dimClasses.join(' ') : '';
     const dockStyles = Object.assign({}, ...getDockStyles(this.props, this.state));
+    const dockClasses = this.props.dockClasses ? this.props.dockClasses.join(' ') : '';
     const resizerStyles = Object.assign({}, ...getResizerStyles(position));
 
     return (
       <div style={Object.assign({}, styles.wrapper, { zIndex })}>
         {dimMode !== 'none' && !isDimHidden &&
-          <div style={dimStyles} onClick={this.handleDimClick} />
+          <div className={dimClasses} style={dimStyles} onClick={this.handleDimClick} />
         }
-        <div style={dockStyles}>
+        <div className={dockClasses} style={dockStyles}>
           <div style={resizerStyles}
                onMouseDown={this.handleMouseDown} />
           <div style={styles.dockContent}>