Add tooltipAccessor prop to calendar to disable tooltip if needed (#701)

* add tooltip accessor * fix pr reviews
jquense · Feb 5, 2018 · 9c9490f · 9c9490f
1 parent 2c5a7a5
commit 9c9490f
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 2 deletions.
diff --git a/src/Agenda.js b/src/Agenda.js
@@ -19,6 +19,7 @@ class Agenda extends React.Component {
     date: PropTypes.instanceOf(Date),
     length: PropTypes.number.isRequired,
     titleAccessor: accessor.isRequired,
+    tooltipAccessor: accessor.isRequired,
     allDayAccessor: accessor.isRequired,
     startAccessor: accessor.isRequired,
     endAccessor: accessor.isRequired,

diff --git a/src/Calendar.js b/src/Calendar.js
@@ -121,6 +121,18 @@ class Calendar extends React.Component {
      */
     titleAccessor: accessor,
 
+    /**
+     * Accessor for the event tooltip. Should
+     * resolve to a `renderable` value. Removes the tooltip if null.
+     *
+     * ```js
+     * string | (event: Object) => string
+     * ```
+     *
+     * @type {(func|string)}
+     */
+    tooltipAccessor: accessor,
+
     /**
      * Determines whether the event should be considered an "all day" event and ignore time.
      * Must resolve to a `boolean` value.
@@ -658,6 +670,7 @@ class Calendar extends React.Component {
     drilldownView: views.DAY,
 
     titleAccessor: 'title',
+    tooltipAccessor: 'title',
     allDayAccessor: 'allDay',
     startAccessor: 'start',
     endAccessor: 'end',

diff --git a/src/DayColumn.js b/src/DayColumn.js
@@ -39,6 +39,7 @@ class DayColumn extends React.Component {
 
     rtl: PropTypes.bool,
     titleAccessor: accessor,
+    tooltipAccessor: accessor,
     allDayAccessor: accessor.isRequired,
     startAccessor: accessor.isRequired,
     endAccessor: accessor.isRequired,
@@ -166,6 +167,7 @@ class DayColumn extends React.Component {
       step,
       timeslots,
       titleAccessor,
+      tooltipAccessor,
     } = this.props
 
     let styledEvents = getStyledEvents({
@@ -202,6 +204,7 @@ class DayColumn extends React.Component {
       let continuesAfter = startsAfter(end, max)
 
       let title = get(event, titleAccessor)
+      let tooltip = get(event, tooltipAccessor)
       let label
       if (_continuesPrior && _continuesAfter) {
         label = messages.allDay
@@ -231,7 +234,11 @@ class DayColumn extends React.Component {
               [isRtl ? 'right' : 'left']: `${Math.max(0, xOffset)}%`,
               width: `${width}%`,
             }}
-            title={(typeof label === 'string' ? label + ': ' : '') + title}
+            title={
+              tooltip
+                ? (typeof label === 'string' ? label + ': ' : '') + tooltip
+                : undefined
+            }
             onClick={e => this._select(event, e)}
             onDoubleClick={e => this._doubleClick(event, e)}
             className={cn('rbc-event', className, {

diff --git a/src/EventCell.js b/src/EventCell.js
@@ -14,6 +14,7 @@ let propTypes = {
   isAllDay: PropTypes.bool,
   eventPropGetter: PropTypes.func,
   titleAccessor: accessor,
+  tooltipAccessor: accessor,
   allDayAccessor: accessor,
   startAccessor: accessor,
   endAccessor: accessor,
@@ -35,6 +36,7 @@ class EventCell extends React.Component {
       startAccessor,
       endAccessor,
       titleAccessor,
+      tooltipAccessor,
       slotStart,
       slotEnd,
       onSelect,
@@ -45,6 +47,7 @@ class EventCell extends React.Component {
     } = this.props
 
     let title = get(event, titleAccessor),
+      tooltip = get(event, tooltipAccessor),
       end = get(event, endAccessor),
       start = get(event, startAccessor),
       isAllDayEvent =
@@ -75,7 +78,7 @@ class EventCell extends React.Component {
           onClick={e => onSelect(event, e)}
           onDoubleClick={e => onDoubleClick(event, e)}
         >
-          <div className="rbc-event-content" title={title}>
+          <div className="rbc-event-content" title={tooltip || undefined}>
             {Event ? (
               <Event event={event} title={title} isAllDay={isAllDayEvent} />
             ) : (

diff --git a/src/EventRowMixin.js b/src/EventRowMixin.js
@@ -18,6 +18,7 @@ export default {
     isAllDay: PropTypes.bool,
     eventPropGetter: PropTypes.func,
     titleAccessor: accessor,
+    tooltipAccessor: accessor,
     allDayAccessor: accessor,
     startAccessor: accessor,
     endAccessor: accessor,
@@ -44,6 +45,7 @@ export default {
       startAccessor,
       endAccessor,
       titleAccessor,
+      tooltipAccessor,
       allDayAccessor,
       eventComponent,
       eventWrapperComponent,
@@ -63,6 +65,7 @@ export default {
         startAccessor={startAccessor}
         endAccessor={endAccessor}
         titleAccessor={titleAccessor}
+        tooltipAccessor={tooltipAccessor}
         allDayAccessor={allDayAccessor}
         slotStart={start}
         slotEnd={end}

diff --git a/src/Month.js b/src/Month.js
@@ -45,6 +45,7 @@ let propTypes = {
   width: PropTypes.number,
 
   titleAccessor: accessor.isRequired,
+  tooltipAccessor: accessor.isRequired,
   allDayAccessor: accessor.isRequired,
   startAccessor: accessor.isRequired,
   endAccessor: accessor.isRequired,
@@ -153,6 +154,7 @@ class MonthView extends React.Component {
       components,
       selectable,
       titleAccessor,
+      tooltipAccessor,
       startAccessor,
       endAccessor,
       allDayAccessor,
@@ -185,6 +187,7 @@ class MonthView extends React.Component {
         selectable={selectable}
         messages={messages}
         titleAccessor={titleAccessor}
+        tooltipAccessor={tooltipAccessor}
         startAccessor={startAccessor}
         endAccessor={endAccessor}
         allDayAccessor={allDayAccessor}

diff --git a/src/TimeGrid.js b/src/TimeGrid.js
@@ -44,6 +44,7 @@ export default class TimeGrid extends Component {
     width: PropTypes.number,
 
     titleAccessor: accessor.isRequired,
+    tooltipAccessor: accessor.isRequired,
     allDayAccessor: accessor.isRequired,
     startAccessor: accessor.isRequired,
     endAccessor: accessor.isRequired,
@@ -310,6 +311,7 @@ export default class TimeGrid extends Component {
             eventComponent={this.props.components.event}
             eventWrapperComponent={this.props.components.eventWrapper}
             titleAccessor={this.props.titleAccessor}
+            tooltipAccessor={this.props.tooltipAccessor}
             startAccessor={this.props.startAccessor}
             endAccessor={this.props.endAccessor}
             allDayAccessor={this.props.allDayAccessor}