[changed] selection bound to Calendar container, respects overlays

Author: jquense

examples/App.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import Modal from 'react-overlays/lib/Modal';
+
 import { render } from 'react-dom';
 
 import globalizeLocalizer from 'react-big-calendar/globalize-localizer';
@@ -28,8 +30,44 @@ function EventAgenda(props) {
   return <em>{props.event.title}</em>
 }
 
-const Example = React.createClass({
 
+let rand = ()=> (Math.floor(Math.random() * 20) - 10);
+
+const modalStyle = {
+  position: 'fixed',
+  zIndex: 1040,
+  top: 0, bottom: 0, left: 0, right: 0
+};
+
+const backdropStyle = {
+  ...modalStyle,
+  zIndex: 'auto',
+  backgroundColor: '#000',
+  opacity: 0.5
+};
+
+const dialogStyle = function() {
+  // we use some psuedo random coords so modals
+  // don't sit right on top of each other.
+  let top = 50 + rand();
+  let left = 50 + rand();
+
+  return {
+    position: 'absolute',
+    width: 400,
+    top: top + '%', left: left + '%',
+    transform: `translate(-${top}%, -${left}%)`,
+    border: '1px solid #e5e5e5',
+    backgroundColor: 'white',
+    boxShadow: '0 5px 15px rgba(0,0,0,.5)',
+    padding: 20
+  };
+};
+
+const Example = React.createClass({
+  getInitialState(){
+    return { showModal: false };
+  },
   render() {
 
     return (
@@ -39,6 +77,7 @@ const Example = React.createClass({
             selectable
             popup
             events={events}
+            onSelectEvent={this.open}
             defaultDate={new Date(2015, 3, 1)}
             eventPropGetter={e => ({ className: 'hi-event'})}
             components={{
@@ -49,8 +88,27 @@ const Example = React.createClass({
             }}
           />
         </main>
+        <Modal
+          aria-labelledby='modal-label'
+          style={modalStyle}
+          backdropStyle={backdropStyle}
+          show={this.state.showModal}
+          onHide={this.close}
+        >
+          <div style={dialogStyle()} >
+            <h4 id='modal-label'>Text in a modal</h4>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+          </div>
+        </Modal>
       </div>
     );
+  },
+  close(){
+    this.setState({ showModal: false });
+  },
+
+  open(){
+    this.setState({ showModal: true });
   }
 });
 

src/BackgroundCells.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import cn from 'classnames';
 import { segStyle } from './utils/eventLevels';
+import { notify } from './utils/helpers';
 import { dateCellSelection, slotWidth, getCellAtX, pointInBox } from './utils/selection';
 import Selection, { getBoundsForNode } from './Selection';
 
@@ -58,17 +59,18 @@ class DisplayCells extends React.Component {
 
   _selectable(){
     let node = findDOMNode(this);
-    let selector = this._selector = new Selection()
+    let selector = this._selector = new Selection(this.props.container)
 
     selector.on('selecting', box => {
       let { slots } = this.props;
 
       let startIdx = -1;
       let endIdx = -1;
 
-      if (!this.state.selecting)
+      if (!this.state.selecting) {
+        notify(this.props.onSelectStart, [box]);
         this._initial = { x: box.x, y: box.y };
-
+      }
       if (selector.isSelected(node)) {
         let nodeBox = getBoundsForNode(node);
 
@@ -108,6 +110,7 @@ class DisplayCells extends React.Component {
         this._selectSlot(this.state)
         this._initial = {}
         this.setState({ selecting: false })
+        notify(this.props.onSelectEnd, [this.state]);
       })
   }
 

src/DaySlot.jsx

@@ -178,7 +178,7 @@ let DaySlot = React.createClass({
 
   _selectable(){
     let node = findDOMNode(this);
-    let selector = this._selector = new Selection(node)
+    let selector = this._selector = new Selection(()=> findDOMNode(this))
 
     selector.on('selecting', ({ x, y }) => {
       let { date, step, min } = this.props;

src/Month.jsx

@@ -195,6 +195,7 @@ let MonthView = React.createClass({
 
     return (
     <BackgroundCells
+      container={() => findDOMNode(this)}
       selectable={this.props.selectable}
       slots={7}
       ref={r => this._bgRows[idx] = r}

src/Selection.js

@@ -8,6 +8,10 @@ function addEventListener(type, handler) {
   }
 }
 
+function isOverContainer(container, x, y){
+  return !container || contains(container, document.elementFromPoint(x, y))
+}
+
 class Selection {
 
   constructor(node, global = false){
@@ -72,14 +76,14 @@ class Selection {
   }
 
   _mouseDown (e) {
-    var node = this.container
+    var node = this.container()
       , collides, offsetData;
 
     // Right clicks
-    if (e.which === 3 || e.button === 2)
+    if (e.which === 3 || e.button === 2 || !isOverContainer(node, e.pageX, e.pageY))
       return;
 
-    if (node && !contains(node, e.target) && !this.globalMouse) {
+    if (!this.globalMouse && node && !contains(node, e.target)) {
 
       let { top, left, bottom, right } = normalizeDistance(0);
 
@@ -119,7 +123,7 @@ class Selection {
     let clickTolerance = 5;
 
     var { x, y } = this._mouseDownData;
-    var inRoot = !this.container || contains(this.container, e.target);
+    var inRoot = !this.container || contains(this.container(), e.target);
     var bounds = this._selectRect;
     var click = (
       Math.abs(e.pageX - x) <= clickTolerance &&

src/TimeGrid.jsx

@@ -103,8 +103,12 @@ let TimeGrid = React.createClass({
             <div ref={addGutterRef(1)} className='rbc-gutter-cell'>
               { message(messages).allDay }
             </div>
-            <div className='rbc-allday-cell'>
-              <BackgroundCells slots={range.length}/>
+            <div ref='allDay' className='rbc-allday-cell'>
+              <BackgroundCells
+                slots={range.length}
+                container={()=> this.refs.allDay}
+                selectable={this.props.selectable}
+              />
               <div style={{ zIndex: 1, position: 'relative' }}>
                 { this.renderAllDayEvents(range, levels) }
               </div>

src/utils/eventLevels.js

@@ -8,7 +8,7 @@ export function eventSegments(event, first, last, { startAccessor, endAccessor,
 
   let span = dates.diff(start, end, 'day');
 
-  span = Math.min(Math.max(span, 1), slots);
+  span = Math.max(Math.min(span, slots), 1);
 
   let padding = dates.diff(first, start, 'day');