jquense#563: Add onDoubleClickEvent handler

src/Calendar.js

@@ -122,6 +122,15 @@ class Calendar extends React.Component {
      */
     onSelectEvent: PropTypes.func,
 
+    /**
+     * Callback fired when a calendar event is clicked twice.
+     *
+     * ```js
+     * (event: Object, e: SyntheticEvent) => any
+     * ```
+     */
+    onDoubleClickEvent: PropTypes.func,
+
     /**
      * Callback fired when dragging a selection in the Time views.
      *
@@ -645,6 +654,7 @@ class Calendar extends React.Component {
           onNavigate={this.handleNavigate}
           onDrillDown={this.handleDrillDown}
           onSelectEvent={this.handleSelectEvent}
+          onDoubleClickEvent={this.handleDoubleClickEvent}
           onSelectSlot={this.handleSelectSlot}
           onShowMore={this._showMore}
         />
@@ -674,6 +684,10 @@ class Calendar extends React.Component {
     notify(this.props.onSelectEvent, args)
   };
 
+  handleDoubleClickEvent = (...args) => {
+    notify(this.props.onDoubleClickEvent, args)
+  }
+
   handleSelectSlot = (slotInfo) => {
     notify(this.props.onSelectSlot, slotInfo)
   };

src/DayColumn.js

@@ -56,6 +56,7 @@ class DayColumn extends React.Component {
     onSelecting: PropTypes.func,
     onSelectSlot: PropTypes.func.isRequired,
     onSelectEvent: PropTypes.func.isRequired,
+    onDoubleClickEvent: PropTypes.func.isRequired,
 
     className: PropTypes.string,
     dragThroughEvents: PropTypes.bool,
@@ -208,6 +209,7 @@ class DayColumn extends React.Component {
             }}
             title={(typeof label === 'string' ? label + ': ' : '') + title }
             onClick={(e) => this._select(event, e)}
+            onDoubleClick={(e) => this._doubleClick(event, e)}
             className={cn('rbc-event', className, {
               'rbc-selected': _isSelected,
               'rbc-event-continues-earlier': continuesPrior,
@@ -347,6 +349,10 @@ class DayColumn extends React.Component {
   _select = (...args) => {
     notify(this.props.onSelectEvent, args)
   };
+
+  _doubleClick = (...args) => {
+    notify(this.props.onDoubleClickEvent, args)
+  };
 }
 
 

src/EventCell.js

@@ -19,7 +19,8 @@ let propTypes = {
 
   eventComponent: elementType,
   eventWrapperComponent: elementType.isRequired,
-  onSelect: PropTypes.func
+  onSelect: PropTypes.func,
+  onDoubleClick: PropTypes.func
 }
 
 class EventCell extends React.Component {
@@ -33,6 +34,7 @@ class EventCell extends React.Component {
       , slotStart
       , slotEnd
       , onSelect
+      , onDoubleClick
       , eventComponent: Event
       , eventWrapperComponent: EventWrapper
       , ...props } = this.props;
@@ -58,6 +60,7 @@ class EventCell extends React.Component {
             'rbc-event-continues-after': continuesAfter
           })}
           onClick={(e) => onSelect(event, e)}
+          onDoubleClick={(e) => onDoubleClick(event, e)}
         >
           <div className='rbc-event-content' title={title}>
             { Event

src/EventRowMixin.js

@@ -23,7 +23,8 @@ export default {
 
     eventComponent: elementType,
     eventWrapperComponent: elementType.isRequired,
-    onSelect: PropTypes.func
+    onSelect: PropTypes.func,
+    onDoubleClick: PropTypes.func
   },
 
   defaultProps: {
@@ -38,14 +39,16 @@ export default {
       , startAccessor, endAccessor, titleAccessor
       , allDayAccessor, eventComponent
       , eventWrapperComponent
-      , onSelect } = props;
+      , onSelect
+      , onDoubleClick } = props;
 
     return (
       <EventCell
         event={event}
         eventWrapperComponent={eventWrapperComponent}
         eventPropGetter={eventPropGetter}
         onSelect={onSelect}
+        onDoubleClick={onDoubleClick}
         selected={isSelected(event, selected)}
         startAccessor={startAccessor}
         endAccessor={endAccessor}

src/Month.js

@@ -56,6 +56,7 @@ let propTypes = {
   onNavigate: PropTypes.func,
   onSelectSlot: PropTypes.func,
   onSelectEvent: PropTypes.func,
+  onDoubleClickEvent: PropTypes.func,
   onShowMore: PropTypes.func,
   onDrillDown: PropTypes.func,
   getDrilldownView: PropTypes.func.isRequired,
@@ -195,6 +196,7 @@ class MonthView extends React.Component {
         renderForMeasure={needLimitMeasure}
         onShowMore={this.handleShowMore}
         onSelect={this.handleSelectEvent}
+        onDoubleClick={this.handleDoubleClickEvent}
         onSelectSlot={this.handleSelectSlot}
         eventComponent={components.event}
         eventWrapperComponent={components.eventWrapper}
@@ -306,6 +308,11 @@ class MonthView extends React.Component {
     notify(this.props.onSelectEvent, args)
   }
 
+  handleDoubleClickEvent = (...args) => {
+    this.clearSelection()
+    notify(this.props.onDoubleClickEvent, args)
+  }
+
   handleShowMore = (events, date, cell, slot) => {
     const { popup, onDrillDown, onShowMore, getDrilldownView } = this.props
     //cancel any pending selections so only the event click goes through.

src/TimeGrid.js

@@ -58,6 +58,7 @@ export default class TimeGrid extends Component {
     onSelectEnd: PropTypes.func,
     onSelectStart: PropTypes.func,
     onSelectEvent: PropTypes.func,
+    onDoubleClickEvent: PropTypes.func,
     onDrillDown: PropTypes.func,
     getDrilldownView: PropTypes.func.isRequired,
 
@@ -81,6 +82,7 @@ export default class TimeGrid extends Component {
     super(props)
     this.state = { gutterWidth: undefined, isOverflowing: null };
     this.handleSelectEvent = this.handleSelectEvent.bind(this)
+    this.handleDoubleClickEvent = this.handleDoubleClickEvent.bind(this)
     this.handleHeaderClick = this.handleHeaderClick.bind(this)
   }
 
@@ -277,6 +279,7 @@ export default class TimeGrid extends Component {
             eventPropGetter={this.props.eventPropGetter}
             selected={this.props.selected}
             onSelect={this.handleSelectEvent}
+            onDoubleClick={this.handleDoubleClickEvent}
             longPressThreshold={this.props.longPressThreshold}
           />
         </div>
@@ -337,6 +340,10 @@ export default class TimeGrid extends Component {
     notify(this.props.onSelectEvent, args)
   }
 
+  handleDoubleClickEvent(...args) {
+    notify(this.props.onDoubleClickEvent, args)
+  }
+
   handleSelectAlldayEvent(...args) {
     //cancel any pending selections so only the event click goes through.
     this.clearSelection()