Merge pull request #1 from niki4810/chore-width-and-height-props

Adding support for width and height props
rexxars · Dec 21, 2015 · 4b5e0e2 · 4b5e0e2
2 parents 68914b7 + 7fba192
commit 4b5e0e2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,8 @@ React.render(
         onPanStart: function() { /* Pan started! */ },
         onPanStop: function() { /* Pan ended! */ },
         onPan: function() { /* Pan move! */ },
-
+        width: 800, // Optional width for the ElementPan container
+        height: 800, // Optional height for the ElementPan container
         startX: 771, // Optional X coordinate to start at
         startY: 360  // Optional Y coordinate to start at
     }, React.DOM.img({ src: 'some-large-image.jpg' })

diff --git a/src/element-pan.js b/src/element-pan.js
@@ -14,7 +14,9 @@ var ElementPan = React.createClass({
         onPan: PropTypes.func,
         onPanStop: PropTypes.func,
         startX: PropTypes.number,
-        startY: PropTypes.number
+        startY: PropTypes.number,
+        width: PropTypes.number,
+        height: PropTypes.number
     },
 
     getDefaultProps: function() {
@@ -134,12 +136,29 @@ var ElementPan = React.createClass({
         }
     },
 
+    getContainerStyles: function() {
+        var style = {
+            overflow: 'hidden',
+            cursor: 'move'            
+        }
+
+        if(this.props.width) {
+            style.width = this.props.width + "px";
+        }
+
+        if(this.props.height) {
+            style.height = this.props.height + "px";
+        }
+
+        return style;
+    },
+
     render: function() {
         return (
             React.DOM.div({
                 ref: 'container',
                 className: this.props.className,
-                style: { overflow: 'hidden', cursor: 'move' },
+                style: this.getContainerStyles(),
                 onMouseDown: this.onDragStart,
                 onTouchStart: this.onDragStart
             }, this.props.children)