Skip to content

Commit

Permalink
[added] onSelecting callback
Browse files Browse the repository at this point in the history
closes jquense#46
  • Loading branch information
jquense committed Mar 18, 2016
1 parent 18c0234 commit f526e23
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 7 deletions.
11 changes: 11 additions & 0 deletions src/Calendar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,17 @@ let Calendar = React.createClass({
*/
onSelectEvent: PropTypes.func,

/**
* Callback fired when dragging a selection in the Time views.
*
* Returning `false` from the handler will prevent a selection.
*
* ```js
* function ({ start: Date, end: Date }) : boolean
* ```
*/
onSelecting: PropTypes.func,

/**
* An array of built-in view names to allow the calendar to display.
*
Expand Down
32 changes: 25 additions & 7 deletions src/DaySlot.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ let DaySlot = React.createClass({
selectable: React.PropTypes.bool,
eventOffset: React.PropTypes.number,

onSelecting: React.PropTypes.func,
onSelectSlot: React.PropTypes.func.isRequired,
onSelectEvent: React.PropTypes.func.isRequired
},
Expand Down Expand Up @@ -193,6 +194,24 @@ let DaySlot = React.createClass({
let node = findDOMNode(this);
let selector = this._selector = new Selection(()=> findDOMNode(this))

let maybeSelect = (box) => {
let onSelecting = this.props.onSelecting
let current = this.state || {};
let state = selectionState(box);
let { startDate: start, endDate: end } = state;

if (onSelecting) {
if (
(dates.eq(current.startDate, start, 'minutes') &&
dates.eq(current.endDate, end, 'minutes')) ||
onSelecting({ start, end }) === false
)
return
}

this.setState(state)
}

let selectionState = ({ x, y }) => {
let { step, min, max } = this.props;
let { top, bottom } = getBoundsForNode(node)
Expand Down Expand Up @@ -225,11 +244,8 @@ let DaySlot = React.createClass({
}
}

selector.on('selecting',
box => this.setState(selectionState(box)))

selector.on('selectStart',
box => this.setState(selectionState(box)))
selector.on('selecting', maybeSelect)
selector.on('selectStart', maybeSelect)

selector
.on('click', ({ x, y }) => {
Expand All @@ -242,8 +258,10 @@ let DaySlot = React.createClass({

selector
.on('select', () => {
this._selectSlot(this.state)
this.setState({ selecting: false })
if (this.state.selecting) {
this._selectSlot(this.state)
this.setState({ selecting: false })
}
})
},

Expand Down

0 comments on commit f526e23

Please sign in to comment.