From f526e234513ceb975164636c671824202ffe2ef9 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Fri, 18 Mar 2016 10:57:24 -0400 Subject: [PATCH] [added] onSelecting callback closes #46 --- src/Calendar.jsx | 11 +++++++++++ src/DaySlot.jsx | 32 +++++++++++++++++++++++++------- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/Calendar.jsx b/src/Calendar.jsx index 0c650e602..91540aa88 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -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. * diff --git a/src/DaySlot.jsx b/src/DaySlot.jsx index 9aa6ff0dc..380fc5257 100644 --- a/src/DaySlot.jsx +++ b/src/DaySlot.jsx @@ -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 }, @@ -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) @@ -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 }) => { @@ -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 }) + } }) },