Merge remote-tracking branch 'upstream/master' into add-background-events-feature

Author: kamildebicki

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 507436,
-    "minified": 149016,
-    "gzipped": 45496
+    "bundled": 509547,
+    "minified": 149932,
+    "gzipped": 45769
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 444328,
-    "minified": 130089,
-    "gzipped": 41174
+    "bundled": 446246,
+    "minified": 130919,
+    "gzipped": 41339
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 174497,
-    "minified": 83179,
-    "gzipped": 20739,
+    "bundled": 176376,
+    "minified": 84316,
+    "gzipped": 21023,
     "treeshaked": {
       "rollup": {
-        "code": 60400,
-        "import_statements": 1578
+        "code": 60196,
+        "import_statements": 1590
       },
       "webpack": {
-        "code": 64923
+        "code": 64714
       }
     }
   }

README.md

@@ -31,8 +31,8 @@ $ yarn examples
 
 ### Localization and Date Formatting
 
-`react-big-calendar` includes two options for handling the date formatting and culture localization, depending
-on your preference of DateTime libraries. You can use either the [Moment.js](http://momentjs.com/) or [Globalize.js](https://github.com/jquery/globalize) localizers.
+`react-big-calendar` includes three options for handling the date formatting and culture localization, depending
+on your preference of DateTime libraries. You can use either the [Moment.js](https://momentjs.com/), [Globalize.js](https://github.com/jquery/globalize) or [date-fns](https://date-fns.org/) localizers.
 
 Regardless of your choice, you **must** choose a localizer to use this library:
 
@@ -126,4 +126,4 @@ Big Calendar. Carefully test each change accordingly.
 
 ## Join us on Reactiflux Discord
 
-Join us on [Reactiflux Discord](https://discord.gg/PPgj6tb) community under the channel #libraries if you have any questions.
+Join us on [Reactiflux Discord](https://discord.gg/reactiflux) community under the channel #libraries if you have any questions.

examples/demos/dndOutsideSource.js

@@ -67,7 +67,7 @@ class Dnd extends React.Component {
     this.newEvent(event)
   }
 
-  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
+  moveEvent = ({ event, start, end, isAllDay: droppedOnAllDaySlot }) => {
     const { events } = this.state
 
     const idx = events.indexOf(event)
@@ -107,7 +107,7 @@ class Dnd extends React.Component {
     //alert(`${event.title} was resized to ${start}-${end}`)
   }
 
-  newEvent(event) {
+  newEvent = event => {
     let idList = this.state.events.map(a => a.id)
     let newId = Math.max(...idList) + 1
     let hour = {

package.json

@@ -137,7 +137,7 @@
     "lodash-es": "^4.17.11",
     "memoize-one": "^5.1.1",
     "prop-types": "^15.7.2",
-    "react-overlays": "^2.0.0-0",
+    "react-overlays": "^4.1.1",
     "uncontrollable": "^7.0.0"
   },
   "resolutions": {

src/BackgroundCells.js

@@ -160,6 +160,7 @@ class BackgroundCells extends React.Component {
           action,
           bounds,
           box,
+          resourceId: this.props.resourceId,
         })
   }
 }
@@ -183,6 +184,7 @@ BackgroundCells.propTypes = {
   range: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   rtl: PropTypes.bool,
   type: PropTypes.string,
+  resourceId: PropTypes.any,
 }
 
 export default BackgroundCells

src/Calendar.js

@@ -335,6 +335,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.
      *
@@ -355,6 +364,14 @@ class Calendar extends React.Component {
      */
     onShowMore: PropTypes.func,
 
+    /**
+     * Displays all events on the month view instead of
+     * having some hidden behind +{count} more. This will
+     * cause the rows in the month view to be scrollable if
+     * the number of events exceed the height of the row.
+     */
+    showAllEvents: PropTypes.bool,
+
     /**
      * The selected event, if any.
      */
@@ -952,6 +969,7 @@ class Calendar extends React.Component {
           onDrillDown={this.handleDrillDown}
           onSelectEvent={this.handleSelectEvent}
           onDoubleClickEvent={this.handleDoubleClickEvent}
+          onKeyPressEvent={this.handleKeyPressEvent}
           onSelectSlot={this.handleSelectSlot}
           onShowMore={onShowMore}
         />
@@ -1019,6 +1037,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)
   }

src/DateContentRow.js

@@ -9,6 +9,8 @@ import * as dates from './utils/dates'
 import BackgroundCells from './BackgroundCells'
 import EventRow from './EventRow'
 import EventEndingRow from './EventEndingRow'
+import NoopWrapper from './NoopWrapper'
+import ScrollableWeekWrapper from './ScrollableWeekWrapper'
 import * as DateSlotMetrics from './utils/DateSlotMetrics'
 
 class DateContentRow extends React.Component {
@@ -71,10 +73,15 @@ class DateContentRow extends React.Component {
   }
 
   renderDummy = () => {
-    let { className, range, renderHeader } = this.props
+    let { className, range, renderHeader, showAllEvents } = this.props
     return (
       <div className={className}>
-        <div className="rbc-row-content">
+        <div
+          className={clsx(
+            'rbc-row-content',
+            showAllEvents && 'rbc-row-content-scrollable'
+          )}
+        >
           {renderHeader && (
             <div className="rbc-row" ref={this.createHeadingRef}>
               {range.map(this.renderHeadingCell)}
@@ -113,16 +120,22 @@ class DateContentRow extends React.Component {
       onSelectStart,
       onSelectEnd,
       onDoubleClick,
+      onKeyPress,
       resourceId,
       longPressThreshold,
       isAllDay,
+      resizable,
+      showAllEvents,
     } = this.props
 
     if (renderForMeasure) return this.renderDummy()
 
     let metrics = this.slotMetrics(this.props)
     let { levels, extra } = metrics
 
+    let ScrollableWeekComponent = showAllEvents
+      ? ScrollableWeekWrapper
+      : NoopWrapper
     let WeekWrapper = components.weekWrapper
 
     const eventRowProps = {
@@ -133,8 +146,10 @@ class DateContentRow extends React.Component {
       components,
       onSelect,
       onDoubleClick,
+      onKeyPress,
       resourceId,
       slotMetrics: metrics,
+      resizable,
     }
 
     return (
@@ -152,26 +167,34 @@ class DateContentRow extends React.Component {
           onSelectSlot={this.handleSelectSlot}
           components={components}
           longPressThreshold={longPressThreshold}
+          resourceId={resourceId}
         />
 
-        <div className="rbc-row-content">
+        <div
+          className={clsx(
+            'rbc-row-content',
+            showAllEvents && 'rbc-row-content-scrollable'
+          )}
+        >
           {renderHeader && (
             <div className="rbc-row " ref={this.createHeadingRef}>
               {range.map(this.renderHeadingCell)}
             </div>
           )}
-          <WeekWrapper isAllDay={isAllDay} {...eventRowProps}>
-            {levels.map((segs, idx) => (
-              <EventRow key={idx} segments={segs} {...eventRowProps} />
-            ))}
-            {!!extra.length && (
-              <EventEndingRow
-                segments={extra}
-                onShowMore={this.handleShowMore}
-                {...eventRowProps}
-              />
-            )}
-          </WeekWrapper>
+          <ScrollableWeekComponent>
+            <WeekWrapper isAllDay={isAllDay} {...eventRowProps}>
+              {levels.map((segs, idx) => (
+                <EventRow key={idx} segments={segs} {...eventRowProps} />
+              ))}
+              {!!extra.length && (
+                <EventEndingRow
+                  segments={extra}
+                  onShowMore={this.handleShowMore}
+                  {...eventRowProps}
+                />
+              )}
+            </WeekWrapper>
+          </ScrollableWeekComponent>
         </div>
       </div>
     )
@@ -184,6 +207,7 @@ DateContentRow.propTypes = {
   range: PropTypes.array.isRequired,
 
   rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
   resourceId: PropTypes.any,
   renderForMeasure: PropTypes.bool,
   renderHeader: PropTypes.func,
@@ -194,11 +218,13 @@ DateContentRow.propTypes = {
   longPressThreshold: PropTypes.number,
 
   onShowMore: PropTypes.func,
+  showAllEvents: PropTypes.bool,
   onSelectSlot: PropTypes.func,
   onSelect: PropTypes.func,
   onSelectEnd: PropTypes.func,
   onSelectStart: PropTypes.func,
   onDoubleClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
   dayPropGetter: PropTypes.func,
 
   getNow: PropTypes.func.isRequired,

src/DayColumn.js

@@ -189,6 +189,7 @@ class DayColumn extends React.Component {
       step,
       timeslots,
       dayLayoutAlgorithm,
+      resizable,
     } = this.props
 
     const { slotMetrics } = this
@@ -236,6 +237,8 @@ class DayColumn extends React.Component {
           onClick={e => this._select(event, e)}
           onDoubleClick={e => this._doubleClick(event, e)}
           isBackgroundEvent={isBackgroundEvent}
+          onKeyPress={e => this._keyPress(event, e)}
+          resizable={resizable}
         />
       )
     })
@@ -375,6 +378,10 @@ class DayColumn extends React.Component {
   _doubleClick = (...args) => {
     notify(this.props.onDoubleClickEvent, args)
   }
+
+  _keyPress = (...args) => {
+    notify(this.props.onKeyPressEvent, args)
+  }
 }
 
 DayColumn.propTypes = {
@@ -388,6 +395,7 @@ DayColumn.propTypes = {
   isNow: PropTypes.bool,
 
   rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
 
   accessors: PropTypes.object.isRequired,
   components: PropTypes.object.isRequired,
@@ -407,6 +415,7 @@ DayColumn.propTypes = {
   onSelectSlot: PropTypes.func.isRequired,
   onSelectEvent: PropTypes.func.isRequired,
   onDoubleClickEvent: PropTypes.func.isRequired,
+  onKeyPressEvent: PropTypes.func,
 
   className: PropTypes.string,
   dragThroughEvents: PropTypes.bool,

src/EventCell.js

@@ -13,6 +13,7 @@ class EventCell extends React.Component {
       isAllDay,
       onSelect,
       onDoubleClick,
+      onKeyPress,
       localizer,
       continuesPrior,
       continuesAfter,
@@ -24,6 +25,7 @@ class EventCell extends React.Component {
       slotEnd,
       ...props
     } = this.props
+    delete props.resizable
 
     let title = accessors.title(event)
     let tooltip = accessors.tooltip(event)
@@ -69,6 +71,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>
@@ -82,6 +85,7 @@ EventCell.propTypes = {
   slotStart: PropTypes.instanceOf(Date),
   slotEnd: PropTypes.instanceOf(Date),
 
+  resizable: PropTypes.bool,
   selected: PropTypes.bool,
   isAllDay: PropTypes.bool,
   continuesPrior: PropTypes.bool,
@@ -94,6 +98,7 @@ EventCell.propTypes = {
 
   onSelect: PropTypes.func,
   onDoubleClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
 }
 
 export default EventCell

src/EventRowMixin.js

@@ -18,6 +18,7 @@ export default {
 
     onSelect: PropTypes.func,
     onDoubleClick: PropTypes.func,
+    onKeyPress: PropTypes.func,
   },
 
   defaultProps: {
@@ -33,9 +34,11 @@ export default {
       getters,
       onSelect,
       onDoubleClick,
+      onKeyPress,
       localizer,
       slotMetrics,
       components,
+      resizable,
     } = props
 
     let continuesPrior = slotMetrics.continuesPrior(event)
@@ -50,11 +53,13 @@ export default {
         components={components}
         onSelect={onSelect}
         onDoubleClick={onDoubleClick}
+        onKeyPress={onKeyPress}
         continuesPrior={continuesPrior}
         continuesAfter={continuesAfter}
         slotStart={slotMetrics.first}
         slotEnd={slotMetrics.last}
         selected={isSelected(event, selected)}
+        resizable={resizable}
       />
     )
   },