diff --git a/README.md b/README.md index f4491a2..c5b3d02 100644 --- a/README.md +++ b/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` | diff --git a/src/Dock.js b/src/Dock.js index c628f7f..83928f5 100644 --- a/src/Dock.js +++ b/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 (
{dimMode !== 'none' && !isDimHidden && -
+
} -
+