[added] popupOffset prop for configuring distance from viewport edge

jquense · Nov 3, 2015 · 80aa08f · 80aa08f
1 parent 8336208
commit 80aa08f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -84,6 +84,23 @@ let Calendar = React.createClass({
      */
     toolbar: PropTypes.bool,
 
+    /**
+     * Show truncated events in an overlay when you click the "+_x_ more" link.
+     */
+    popup: PropTypes.bool,
+
+    /**
+     * Distance in pixels, from the edges of the viewport, the "show more" overlay should be positioned.
+     *
+     * ```js
+     * <BigCalendar popupOffset={30}/>
+     * <BigCalendar popupOffset={{x: 30, y: 20}}/>
+     * ```
+     */
+    popupOffset: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({ x: PropTypes.number, y: PropTypes.number })
+    ]),
     /**
      * Allows mouse selection of ranges of dates/times.
      */

diff --git a/src/Month.jsx b/src/Month.jsx
@@ -41,6 +41,16 @@ let propTypes = {
 
   weekdayFormat: dateFormat,
 
+  popup: React.PropTypes.bool,
+
+  popupOffset: React.PropTypes.oneOfType([
+    React.PropTypes.number,
+    React.PropTypes.shape({
+      x: React.PropTypes.number,
+      y: React.PropTypes.number
+    })
+  ]),
+
   onSelectEvent: React.PropTypes.func,
   onSelectSlot: React.PropTypes.func
 };

diff --git a/src/Popup.jsx b/src/Popup.jsx
@@ -9,7 +9,8 @@ import getScrollLeft from 'dom-helpers/query/scrollLeft';
 class Popup extends React.Component {
 
   componentDidMount(){
-    let { top, left, width, height } = getOffset(this.refs.root)
+    let { popupOffset = 5 } = this.props
+      , { top, left, width, height } = getOffset(this.refs.root)
       , viewBottom = window.innerHeight + getScrollTop(window)
       , viewRight = window.innerWidth + getScrollLeft(window)
       , bottom = top + height
@@ -19,11 +20,11 @@ class Popup extends React.Component {
       let topOffset, leftOffset;
 
       if (bottom > viewBottom)
-        topOffset = bottom - viewBottom + 5
+        topOffset = bottom - viewBottom + (popupOffset.y || +popupOffset || 0)
       if (right > viewRight)
-        leftOffset = right - viewRight + 5
+        leftOffset = right - viewRight + (popupOffset.x || +popupOffset || 0)
 
-      this.setState({ topOffset, leftOffset })
+      this.setState({ topOffset, leftOffset }) //eslint-disable-line
     }
   }
 
@@ -37,7 +38,8 @@ class Popup extends React.Component {
     let style = {
       top: top - topOffset,
       left: left - leftOffset,
-      minWidth: width + (width / 2)
+      minWidth: width + (width / 2),
+      height: 300
     }
 
     return (