From 56a64eb530d11a4df158468e891636d37b0d5d18 Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 15 Sep 2020 10:18:02 +0200 Subject: [PATCH] Add onKeyPressEvent --- src/Calendar.js | 44 ++++++++++++++++++++++++++++--------------- src/DateContentRow.js | 3 +++ src/DayColumn.js | 6 ++++++ src/EventCell.js | 3 +++ src/EventRowMixin.js | 3 +++ src/Month.js | 8 ++++++++ src/Popup.js | 3 +++ src/TimeGrid.js | 2 ++ src/TimeGridEvent.js | 2 ++ src/TimeGridHeader.js | 3 +++ 10 files changed, 62 insertions(+), 15 deletions(-) diff --git a/src/Calendar.js b/src/Calendar.js index 1a429c57f..884e8fa06 100644 --- 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 index e0689f03e..931defeca 100644 --- 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 index e0e138102..a3a2c04ed 100644 --- 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 index ff59ed8b8..e83b6e46a 100644 --- 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} @@ -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 index 6c2efb81a..589e16a1d 100644 --- 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 index 1bb8ded8f..f358cd809 100644 --- 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 index ecf3a3b2b..7421ea45b 100644 --- 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 index b7b41d540..867baa554 100644 --- 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 index b0ccfbaa9..c50a06ab2 100644 --- 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) {
@@ -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,