fix: enforce resizable prop (jquense#1796)

Update the `resizable` prop to determine whether events
could be resized. Before, the prop could be supplied, but it
would not do anything.

Co-authored-by: Jackson Hoang <[email protected]>

Author: jkhoang313

src/DateContentRow.js

@@ -117,6 +117,7 @@ class DateContentRow extends React.Component {
       resourceId,
       longPressThreshold,
       isAllDay,
+      resizable,
     } = this.props
 
     if (renderForMeasure) return this.renderDummy()
@@ -137,6 +138,7 @@ class DateContentRow extends React.Component {
       onKeyPress,
       resourceId,
       slotMetrics: metrics,
+      resizable,
     }
 
     return (
@@ -187,6 +189,7 @@ DateContentRow.propTypes = {
   range: PropTypes.array.isRequired,
 
   rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
   resourceId: PropTypes.any,
   renderForMeasure: PropTypes.bool,
   renderHeader: PropTypes.func,

src/DayColumn.js

@@ -186,6 +186,7 @@ class DayColumn extends React.Component {
       step,
       timeslots,
       dayLayoutAlgorithm,
+      resizable,
     } = this.props
 
     const { slotMetrics } = this
@@ -233,6 +234,7 @@ class DayColumn extends React.Component {
           onClick={e => this._select(event, e)}
           onDoubleClick={e => this._doubleClick(event, e)}
           onKeyPress={e => this._keyPress(event, e)}
+          resizable={resizable}
         />
       )
     })
@@ -388,6 +390,7 @@ DayColumn.propTypes = {
   isNow: PropTypes.bool,
 
   rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
 
   accessors: PropTypes.object.isRequired,
   components: PropTypes.object.isRequired,

src/EventCell.js

@@ -25,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)
@@ -84,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,

src/EventRowMixin.js

@@ -38,6 +38,7 @@ export default {
       localizer,
       slotMetrics,
       components,
+      resizable,
     } = props
 
     let continuesPrior = slotMetrics.continuesPrior(event)
@@ -58,6 +59,7 @@ export default {
         slotStart={slotMetrics.first}
         slotEnd={slotMetrics.last}
         selected={isSelected(event, selected)}
+        resizable={resizable}
       />
     )
   },

src/Month.js

@@ -136,6 +136,7 @@ class MonthView extends React.Component {
         onSelectSlot={this.handleSelectSlot}
         longPressThreshold={longPressThreshold}
         rtl={this.props.rtl}
+        resizable={this.props.resizable}
       />
     )
   }
@@ -323,6 +324,7 @@ MonthView.propTypes = {
 
   scrollToTime: PropTypes.instanceOf(Date),
   rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
   width: PropTypes.number,
 
   accessors: PropTypes.object.isRequired,

src/TimeGrid.js

@@ -165,6 +165,7 @@ export default class TimeGrid extends Component {
       max,
       showMultiDayTimes,
       longPressThreshold,
+      resizable,
     } = this.props
 
     width = width || this.state.gutterWidth
@@ -225,6 +226,7 @@ export default class TimeGrid extends Component {
           onKeyPressEvent={this.props.onKeyPressEvent}
           onDrillDown={this.props.onDrillDown}
           getDrilldownView={this.props.getDrilldownView}
+          resizable={resizable}
         />
         <div
           ref={this.contentRef}
@@ -322,6 +324,7 @@ TimeGrid.propTypes = {
   showMultiDayTimes: PropTypes.bool,
 
   rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
   width: PropTypes.number,
 
   accessors: PropTypes.object.isRequired,

src/TimeGridHeader.js

@@ -71,6 +71,7 @@ class TimeGridHeader extends React.Component {
       localizer,
       accessors,
       components,
+      resizable,
     } = this.props
 
     const resourceId = accessors.resourceId(resource)
@@ -99,6 +100,7 @@ class TimeGridHeader extends React.Component {
         onKeyPress={this.props.onKeyPressEvent}
         onSelectSlot={this.props.onSelectSlot}
         longPressThreshold={this.props.longPressThreshold}
+        resizable={resizable}
       />
     )
   }
@@ -122,6 +124,7 @@ class TimeGridHeader extends React.Component {
         timeGutterHeader: TimeGutterHeader,
         resourceHeader: ResourceHeaderComponent = ResourceHeader,
       },
+      resizable,
     } = this.props
 
     let style = {}
@@ -184,6 +187,7 @@ class TimeGridHeader extends React.Component {
               onKeyPress={this.props.onKeyPressEvent}
               onSelectSlot={this.props.onSelectSlot}
               longPressThreshold={this.props.longPressThreshold}
+              resizable={resizable}
             />
           </div>
         ))}
@@ -200,6 +204,7 @@ TimeGridHeader.propTypes = {
   isOverflowing: PropTypes.bool,
 
   rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
   width: PropTypes.number,
 
   localizer: PropTypes.object.isRequired,

src/addons/dragAndDrop/EventWrapper.js

@@ -27,6 +27,7 @@ class EventWrapper extends React.Component {
     continuesAfter: PropTypes.bool,
     isDragging: PropTypes.bool,
     isResizing: PropTypes.bool,
+    resizable: PropTypes.bool,
   }
 
   handleResizeUp = e => {
@@ -68,7 +69,13 @@ class EventWrapper extends React.Component {
   }
 
   render() {
-    const { event, type, continuesPrior, continuesAfter } = this.props
+    const {
+      event,
+      type,
+      continuesPrior,
+      continuesAfter,
+      resizable,
+    } = this.props
 
     let { children } = this.props
 
@@ -111,9 +118,8 @@ class EventWrapper extends React.Component {
      * in the middle of events when showMultiDay is true, and to
      * events at the edges of the calendar's min/max location.
      */
-    const isResizable = resizableAccessor
-      ? !!get(event, resizableAccessor)
-      : true
+    const isResizable =
+      resizable && (resizableAccessor ? !!get(event, resizableAccessor) : true)
 
     if (isResizable || isDraggable) {
       /*

src/addons/dragAndDrop/withDragAndDrop.js

@@ -18,7 +18,8 @@ import { mergeComponents } from './common'
  *    export default withDragAndDrop(Calendar)
  * ```
  *
- * Set `resizable` to true in your calendar if you want events to be resizable.
+ * Set `resizable` to false in your calendar if you don't want events to be resizable.
+ * `resizable` is set to true by default.
  *
  * The HOC adds `onEventDrop`, `onEventResize`, and `onDragStart` callback properties if the events are
  * moved or resized. These callbacks are called with these signatures:
@@ -89,6 +90,7 @@ export default function withDragAndDrop(Calendar) {
       components: {},
       draggableAccessor: null,
       resizableAccessor: null,
+      resizable: true,
       step: 30,
     }