Merge pull request Hacker0x01#159 from croscon/feature-popover-anywhere

martijnrusschen · martijnrusschen · commit 6d78c216f3c4 · 2015-08-12T09:42:52.000-07:00
Control popover location
diff --git a/src/datepicker.jsx b/src/datepicker.jsx
@@ -12,6 +12,9 @@ var DatePicker = React.createClass( {
     weekdays: React.PropTypes.arrayOf( React.PropTypes.string ),
     locale: React.PropTypes.string,
     dateFormatCalendar: React.PropTypes.string,
+    popoverAttachment: React.PropTypes.string,
+    popoverTargetAttachment: React.PropTypes.string,
+    popoverTargetOffset: React.PropTypes.string,
     onChange: React.PropTypes.func.isRequired,
     onBlur: React.PropTypes.func
   },
@@ -110,7 +113,11 @@ var DatePicker = React.createClass( {
   calendar: function() {
     if ( this.state.focus ) {
       return (
-        <Popover>
+        <Popover
+          attachment={this.props.popoverAttachment}
+          targetAttachment={this.props.popoverTargetAttachment}
+          targetOffset={this.props.popoverTargetOffset}>
+
           <Calendar
             weekdays={this.props.weekdays}
             locale={this.props.locale}
diff --git a/src/popover.jsx b/src/popover.jsx
@@ -3,6 +3,20 @@ var React = require( "react" );
 var Popover = React.createClass( {
   displayName: "Popover",
 
+  propTypes: {
+    attachment: React.PropTypes.string,
+    targetAttachment: React.PropTypes.string,
+    targetOffset: React.PropTypes.string
+  },
+
+  getDefaultProps: function() {
+    return {
+      attachment: "top left",
+      targetAttachment: "bottom left",
+      targetOffset: "10px 0"
+    };
+  },
+
   componentWillMount: function() {
     var popoverContainer = document.createElement( "span" );
     popoverContainer.className = "datepicker__container";
@@ -32,10 +46,10 @@ var Popover = React.createClass( {
   _tetherOptions: function() {
     return {
       element: this._popoverElement,
-      target: this.getDOMNode().parentElement,
-      attachment: "top left",
-      targetAttachment: "bottom left",
-      targetOffset: "10px 0",
+      target: this.getDOMNode().parentElement.querySelector( "input" ),
+      attachment: this.props.attachment,
+      targetAttachment: this.props.targetAttachment,
+      targetOffset: this.props.targetOffset,
       optimizations: {
         moveElement: false // always moves to <body> anyway!
       },
