Skip to content
This repository has been archived by the owner on Aug 1, 2024. It is now read-only.

Commit

Permalink
[added] popupOffset prop for configuring distance from viewport edge
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Nov 3, 2015
1 parent 8336208 commit 80aa08f
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 5 deletions.
17 changes: 17 additions & 0 deletions src/Calendar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
10 changes: 10 additions & 0 deletions src/Month.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
Expand Down
12 changes: 7 additions & 5 deletions src/Popup.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
}
}

Expand All @@ -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 (
Expand Down

0 comments on commit 80aa08f

Please sign in to comment.