Skip to content

Commit

Permalink
[changed] selection bound to Calendar container, respects overlays
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Sep 15, 2015
1 parent 98b3dad commit 8ad4ee7
Show file tree
Hide file tree
Showing 7 changed files with 82 additions and 12 deletions.
60 changes: 59 additions & 1 deletion examples/App.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 (
Expand All @@ -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={{
Expand All @@ -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 });
}
});

Expand Down
9 changes: 6 additions & 3 deletions src/BackgroundCells.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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]);
})
}

Expand Down
2 changes: 1 addition & 1 deletion src/DaySlot.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/Month.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
12 changes: 8 additions & 4 deletions src/Selection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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){
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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 &&
Expand Down
8 changes: 6 additions & 2 deletions src/TimeGrid.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/utils/eventLevels.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down

0 comments on commit 8ad4ee7

Please sign in to comment.