From 8ad4ee7f1430f93b0fd680108a077f20c00d969b Mon Sep 17 00:00:00 2001 From: jquense Date: Tue, 15 Sep 2015 11:35:33 +0300 Subject: [PATCH] [changed] selection bound to Calendar container, respects overlays --- examples/App.js | 60 +++++++++++++++++++++++++++++++++++++++- src/BackgroundCells.jsx | 9 ++++-- src/DaySlot.jsx | 2 +- src/Month.jsx | 1 + src/Selection.js | 12 +++++--- src/TimeGrid.jsx | 8 ++++-- src/utils/eventLevels.js | 2 +- 7 files changed, 82 insertions(+), 12 deletions(-) diff --git a/examples/App.js b/examples/App.js index 55dbebdeb..5564e2741 100644 --- a/examples/App.js +++ b/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 {props.event.title} } -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({ }} /> + +
+ +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+
+ ); + }, + close(){ + this.setState({ showModal: false }); + }, + + open(){ + this.setState({ showModal: true }); } }); diff --git a/src/BackgroundCells.jsx b/src/BackgroundCells.jsx index d2201caa5..964be5431 100644 --- a/src/BackgroundCells.jsx +++ b/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,7 +59,7 @@ 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; @@ -66,9 +67,10 @@ class DisplayCells extends React.Component { 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]); }) } diff --git a/src/DaySlot.jsx b/src/DaySlot.jsx index 7a616dca9..5a885c54d 100644 --- a/src/DaySlot.jsx +++ b/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; diff --git a/src/Month.jsx b/src/Month.jsx index 534a3209a..c5a0974cf 100644 --- a/src/Month.jsx +++ b/src/Month.jsx @@ -195,6 +195,7 @@ let MonthView = React.createClass({ return ( findDOMNode(this)} selectable={this.props.selectable} slots={7} ref={r => this._bgRows[idx] = r} diff --git a/src/Selection.js b/src/Selection.js index f2c1e3175..d643c3155 100644 --- a/src/Selection.js +++ b/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 && diff --git a/src/TimeGrid.jsx b/src/TimeGrid.jsx index 867bbe7c9..870e4af70 100644 --- a/src/TimeGrid.jsx +++ b/src/TimeGrid.jsx @@ -103,8 +103,12 @@ let TimeGrid = React.createClass({
{ message(messages).allDay }
-
- +
+ this.refs.allDay} + selectable={this.props.selectable} + />
{ this.renderAllDayEvents(range, levels) }
diff --git a/src/utils/eventLevels.js b/src/utils/eventLevels.js index c57cd746f..2f8db98c8 100644 --- a/src/utils/eventLevels.js +++ b/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');