Adding support for classes on Dim and Dock elements.

Taken from alexkuz#28

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 |
-| dockStyle | Style for dock |
+| 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` |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dock",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Resizable dockable react component",
   "scripts": {
     "build-lib": "babel src --out-dir lib",

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}>