Merge pull request #24 from syastrebov/feature/iframe-support

Feature/iframe support

README.md

@@ -114,6 +114,14 @@ Inline styles applied to vertical scrollbar's container.
 #### verticalScrollbarStyle
 Inline styles applied to vertical scrollbar.
 
+#### contentWindow
+You can override window to make scrollarea works inside iframe.
+**Default: window**
+
+#### ownerDocument
+You can override document to make scrollarea works inside iframe.
+**Default: document**
+
 ### Context
 In context of each `<ScrollArea>` child could be injected an object `scrollArea` contains method:
 

src/js/scrollArea.jsx

@@ -50,28 +50,30 @@ export default class ScrollArea extends React.Component{
     }
 
     componentDidMount(){
-        window.addEventListener("resize", this.bindedHandleWindowResize);
+        this.props.contentWindow.addEventListener("resize", this.bindedHandleWindowResize);
         this.lineHeightPx = lineHeight(findDOMNode(this.refs.content));
         this.setSizesToState();
     }
 
     componentWillUnmount(){
-        window.removeEventListener("resize", this.bindedHandleWindowResize);
+        this.props.contentWindow.removeEventListener("resize", this.bindedHandleWindowResize);
     }
 
     componentDidUpdate(){
         this.setSizesToState();
     }
 
     render(){
-        let {children, className, contentClassName} = this.props
+        let {children, className, contentClassName, ownerDocument} = this.props;
+
         var contentStyle = {
             marginTop: this.state.topPosition,
             marginLeft: this.state.leftPosition
         };
 
         var scrollbarY = this.canScrollY()? (
             <Scrollbar
+                ownerDocument={ownerDocument}
                 realSize={this.state.realHeight}
                 containerSize={this.state.containerHeight}
                 position={-this.state.topPosition}
@@ -83,6 +85,7 @@ export default class ScrollArea extends React.Component{
 
         var scrollbarX = this.canScrollX()? (
             <Scrollbar
+                ownerDocument={ownerDocument}
                 realSize={this.state.realWidth}
                 containerSize={this.state.containerWidth}
                 position={-this.state.leftPosition}
@@ -306,10 +309,14 @@ ScrollArea.propTypes = {
     horizontal: React.PropTypes.bool,
     horizontalContainerStyle: React.PropTypes.object,
     horizontalScrollbarStyle: React.PropTypes.object,
+    contentWindow: React.PropTypes.any,
+    ownerDocument: React.PropTypes.any
 };
 
 ScrollArea.defaultProps = {
     speed: 1,
     vertical: true,
-    horizontal: true
+    horizontal: true,
+    contentWindow: window,
+    ownerDocument: document
 };

src/js/scrollBar.jsx

@@ -22,17 +22,17 @@ class ScrollBar extends React.Component {
     }
 
     componentDidMount(){
-        document.addEventListener("mousemove", this.bindedHandleMouseMove);
-        document.addEventListener("mouseup", this.bindedHandleMouseUp);
+        this.props.ownerDocument.addEventListener("mousemove", this.bindedHandleMouseMove);
+        this.props.ownerDocument.addEventListener("mouseup", this.bindedHandleMouseUp);
     }
 
     componentWillReceiveProps(nextProps){
         this.setState(this.calculateState(nextProps));
     }
 
     componentWillUnmount(){
-        document.removeEventListener("mousemove", this.bindedHandleMouseMove);
-        document.removeEventListener("mouseup", this.bindedHandleMouseUp);
+        this.props.ownerDocument.removeEventListener("mousemove", this.bindedHandleMouseMove);
+        this.props.ownerDocument.removeEventListener("mouseup", this.bindedHandleMouseUp);
     }
 
     calculateState(props){
@@ -118,10 +118,12 @@ ScrollBar.propTypes = {
     position: React.PropTypes.number,
     containerStyle: React.PropTypes.object,
     scrollbarStyle: React.PropTypes.object,
-    type: React.PropTypes.oneOf(['vertical', 'horizontal'])
+    type: React.PropTypes.oneOf(['vertical', 'horizontal']),
+    ownerDocument: React.PropTypes.any
 };
 
 ScrollBar.defaultProps = {
-    type : 'vertical'
+    type : 'vertical',
+    ownerDocument: document
 }
 export default ScrollBar;