feat: add onKeyPressEvent (#1754)

jquense · Sep 16, 2020 · ca8d77b · ca8d77b
1 parent 2a99535
commit ca8d77b
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 15 deletions.
diff --git a/src/Calendar.js b/src/Calendar.js
@@ -312,6 +312,15 @@ class Calendar extends React.Component {
      */
     onDoubleClickEvent: PropTypes.func,
 
+    /**
+     * Callback fired when a focused calendar event recieves a key press.
+     *
+     * ```js
+     * (event: Object, e: SyntheticEvent) => void
+     * ```
+     */
+    onKeyPressEvent: PropTypes.func,
+
     /**
      * Callback fired when dragging a selection in the Time views.
      *
@@ -493,16 +502,16 @@ class Calendar extends React.Component {
      * (date: Date, resourceId: (number|string)) => { className?: string, style?: Object }
      * ```
      */
-	slotPropGetter: PropTypes.func,
-	
-	/**
-	 * Optionally provide a function that returns an object of props to be applied 
-	 * to the time-slot group node. Useful to dynamically change the sizing of time nodes.
-	 * ```js
-	 * () => { style?: Object }
-	 * ```
-	 */
-	slotGroupPropGetter: PropTypes.func,
+    slotPropGetter: PropTypes.func,
+
+    /**
+     * Optionally provide a function that returns an object of props to be applied
+     * to the time-slot group node. Useful to dynamically change the sizing of time nodes.
+     * ```js
+     * () => { style?: Object }
+     * ```
+     */
+    slotGroupPropGetter: PropTypes.func,
 
     /**
      * Optionally provide a function that returns an object of className or style props
@@ -784,8 +793,8 @@ class Calendar extends React.Component {
     resourceIdAccessor,
     resourceTitleAccessor,
     eventPropGetter,
-	slotPropGetter,
-	slotGroupPropGetter,
+    slotPropGetter,
+    slotGroupPropGetter,
     dayPropGetter,
     view,
     views,
@@ -804,9 +813,9 @@ class Calendar extends React.Component {
         eventProp: (...args) =>
           (eventPropGetter && eventPropGetter(...args)) || {},
         slotProp: (...args) =>
-		  (slotPropGetter && slotPropGetter(...args)) || {},
-		slotGroupProp: (...args) =>
-		  (slotGroupPropGetter && slotGroupPropGetter(...args)) || {},
+          (slotPropGetter && slotPropGetter(...args)) || {},
+        slotGroupProp: (...args) =>
+          (slotGroupPropGetter && slotGroupPropGetter(...args)) || {},
         dayProp: (...args) => (dayPropGetter && dayPropGetter(...args)) || {},
       },
       components: defaults(components[view] || {}, omit(components, names), {
@@ -930,6 +939,7 @@ class Calendar extends React.Component {
           onDrillDown={this.handleDrillDown}
           onSelectEvent={this.handleSelectEvent}
           onDoubleClickEvent={this.handleDoubleClickEvent}
+          onKeyPressEvent={this.handleKeyPressEvent}
           onSelectSlot={this.handleSelectSlot}
           onShowMore={onShowMore}
         />
@@ -997,6 +1007,10 @@ class Calendar extends React.Component {
     notify(this.props.onDoubleClickEvent, args)
   }
 
+  handleKeyPressEvent = (...args) => {
+    notify(this.props.onKeyPressEvent, args)
+  }
+
   handleSelectSlot = slotInfo => {
     notify(this.props.onSelectSlot, slotInfo)
   }

diff --git a/src/DateContentRow.js b/src/DateContentRow.js
@@ -113,6 +113,7 @@ class DateContentRow extends React.Component {
       onSelectStart,
       onSelectEnd,
       onDoubleClick,
+      onKeyPress,
       resourceId,
       longPressThreshold,
       isAllDay,
@@ -133,6 +134,7 @@ class DateContentRow extends React.Component {
       components,
       onSelect,
       onDoubleClick,
+      onKeyPress,
       resourceId,
       slotMetrics: metrics,
     }
@@ -200,6 +202,7 @@ DateContentRow.propTypes = {
   onSelectEnd: PropTypes.func,
   onSelectStart: PropTypes.func,
   onDoubleClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
   dayPropGetter: PropTypes.func,
 
   getNow: PropTypes.func.isRequired,

diff --git a/src/DayColumn.js b/src/DayColumn.js
@@ -232,6 +232,7 @@ class DayColumn extends React.Component {
           selected={isSelected(event, selected)}
           onClick={e => this._select(event, e)}
           onDoubleClick={e => this._doubleClick(event, e)}
+          onKeyPress={e => this._keyPress(event, e)}
         />
       )
     })
@@ -371,6 +372,10 @@ class DayColumn extends React.Component {
   _doubleClick = (...args) => {
     notify(this.props.onDoubleClickEvent, args)
   }
+
+  _keyPress = (...args) => {
+    notify(this.props.onKeyPressEvent, args)
+  }
 }
 
 DayColumn.propTypes = {
@@ -402,6 +407,7 @@ DayColumn.propTypes = {
   onSelectSlot: PropTypes.func.isRequired,
   onSelectEvent: PropTypes.func.isRequired,
   onDoubleClickEvent: PropTypes.func.isRequired,
+  onKeyPressEvent: PropTypes.func.isRequired,
 
   className: PropTypes.string,
   dragThroughEvents: PropTypes.bool,

diff --git a/src/EventCell.js b/src/EventCell.js
@@ -13,6 +13,7 @@ class EventCell extends React.Component {
       isAllDay,
       onSelect,
       onDoubleClick,
+      onKeyPress,
       localizer,
       continuesPrior,
       continuesAfter,
@@ -69,6 +70,7 @@ class EventCell extends React.Component {
           })}
           onClick={e => onSelect && onSelect(event, e)}
           onDoubleClick={e => onDoubleClick && onDoubleClick(event, e)}
+          onKeyPress={e => onKeyPress && onKeyPress(event, e)}
         >
           {typeof children === 'function' ? children(content) : content}
         </div>
@@ -94,6 +96,7 @@ EventCell.propTypes = {
 
   onSelect: PropTypes.func,
   onDoubleClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
 }
 
 export default EventCell
diff --git a/src/EventRowMixin.js b/src/EventRowMixin.js
@@ -18,6 +18,7 @@ export default {
 
     onSelect: PropTypes.func,
     onDoubleClick: PropTypes.func,
+    onKeyPress: PropTypes.func,
   },
 
   defaultProps: {
@@ -33,6 +34,7 @@ export default {
       getters,
       onSelect,
       onDoubleClick,
+      onKeyPress,
       localizer,
       slotMetrics,
       components,
@@ -50,6 +52,7 @@ export default {
         components={components}
         onSelect={onSelect}
         onDoubleClick={onDoubleClick}
+        onKeyPress={onKeyPress}
         continuesPrior={continuesPrior}
         continuesAfter={continuesAfter}
         slotStart={slotMetrics.first}

diff --git a/src/Month.js b/src/Month.js
@@ -132,6 +132,7 @@ class MonthView extends React.Component {
         onShowMore={this.handleShowMore}
         onSelect={this.handleSelectEvent}
         onDoubleClick={this.handleDoubleClickEvent}
+        onKeyPress={this.handleKeyPressEvent}
         onSelectSlot={this.handleSelectSlot}
         longPressThreshold={longPressThreshold}
         rtl={this.props.rtl}
@@ -220,6 +221,7 @@ class MonthView extends React.Component {
             slotEnd={overlay.end}
             onSelect={this.handleSelectEvent}
             onDoubleClick={this.handleDoubleClickEvent}
+            onKeyPress={this.handleKeyPressEvent}
             handleDragStart={this.props.handleDragStart}
           />
         )}
@@ -257,6 +259,11 @@ class MonthView extends React.Component {
     notify(this.props.onDoubleClickEvent, args)
   }
 
+  handleKeyPressEvent = (...args) => {
+    this.clearSelection()
+    notify(this.props.onKeyPressEvent, args)
+  }
+
   handleShowMore = (events, date, cell, slot, target) => {
     const { popup, onDrillDown, onShowMore, getDrilldownView } = this.props
     //cancel any pending selections so only the event click goes through.
@@ -331,6 +338,7 @@ MonthView.propTypes = {
   onSelectSlot: PropTypes.func,
   onSelectEvent: PropTypes.func,
   onDoubleClickEvent: PropTypes.func,
+  onKeyPressEvent: PropTypes.func,
   onShowMore: PropTypes.func,
   onDrillDown: PropTypes.func,
   getDrilldownView: PropTypes.func.isRequired,

diff --git a/src/Popup.js b/src/Popup.js
@@ -38,6 +38,7 @@ class Popup extends React.Component {
       components,
       onSelect,
       onDoubleClick,
+      onKeyPress,
       slotStart,
       slotEnd,
       localizer,
@@ -73,6 +74,7 @@ class Popup extends React.Component {
             accessors={accessors}
             components={components}
             onDoubleClick={onDoubleClick}
+            onKeyPress={onKeyPress}
             continuesPrior={dates.lt(accessors.end(event), slotStart, 'day')}
             continuesAfter={dates.gte(accessors.start(event), slotEnd, 'day')}
             slotStart={slotStart}
@@ -106,6 +108,7 @@ Popup.propTypes = {
   localizer: PropTypes.object.isRequired,
   onSelect: PropTypes.func,
   onDoubleClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
   handleDragStart: PropTypes.func,
   show: PropTypes.func,
   slotStart: PropTypes.instanceOf(Date),

diff --git a/src/TimeGrid.js b/src/TimeGrid.js
@@ -222,6 +222,7 @@ export default class TimeGrid extends Component {
           onSelectSlot={this.handleSelectAllDaySlot}
           onSelectEvent={this.handleSelectAlldayEvent}
           onDoubleClickEvent={this.props.onDoubleClickEvent}
+          onKeyPressEvent={this.props.onKeyPressEvent}
           onDrillDown={this.props.onDrillDown}
           getDrilldownView={this.props.getDrilldownView}
         />
@@ -338,6 +339,7 @@ TimeGrid.propTypes = {
   onSelectStart: PropTypes.func,
   onSelectEvent: PropTypes.func,
   onDoubleClickEvent: PropTypes.func,
+  onKeyPressEvent: PropTypes.func,
   onDrillDown: PropTypes.func,
   getDrilldownView: PropTypes.func.isRequired,
 

diff --git a/src/TimeGridEvent.js b/src/TimeGridEvent.js
@@ -20,6 +20,7 @@ function TimeGridEvent(props) {
     getters,
     onClick,
     onDoubleClick,
+    onKeyPress,
     components: { event: Event, eventWrapper: EventWrapper },
   } = props
   let title = accessors.title(event)
@@ -44,6 +45,7 @@ function TimeGridEvent(props) {
       <div
         onClick={onClick}
         onDoubleClick={onDoubleClick}
+        onKeyPress={onKeyPress}
         style={{
           ...userProps.style,
           top: stringifyPercent(top),

diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
@@ -96,6 +96,7 @@ class TimeGridHeader extends React.Component {
         localizer={localizer}
         onSelect={this.props.onSelectEvent}
         onDoubleClick={this.props.onDoubleClickEvent}
+        onKeyPress={this.props.onKeyPressEvent}
         onSelectSlot={this.props.onSelectSlot}
         longPressThreshold={this.props.longPressThreshold}
       />
@@ -180,6 +181,7 @@ class TimeGridHeader extends React.Component {
               localizer={localizer}
               onSelect={this.props.onSelectEvent}
               onDoubleClick={this.props.onDoubleClickEvent}
+              onKeyPress={this.props.onKeyPressEvent}
               onSelectSlot={this.props.onSelectSlot}
               longPressThreshold={this.props.longPressThreshold}
             />
@@ -212,6 +214,7 @@ TimeGridHeader.propTypes = {
   onSelectSlot: PropTypes.func,
   onSelectEvent: PropTypes.func,
   onDoubleClickEvent: PropTypes.func,
+  onKeyPressEvent: PropTypes.func,
   onDrillDown: PropTypes.func,
   getDrilldownView: PropTypes.func.isRequired,
   scrollRef: PropTypes.any,