Skip to content

Commit

Permalink
fix: enforce resizable prop (jquense#1796)
Browse files Browse the repository at this point in the history
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 <jhoang@atlassian.com>
jkhoang313 and jhoangatl authored Nov 6, 2020

Unverified

The committer email address is not verified.
1 parent a0538ee commit a18acc2
Showing 9 changed files with 33 additions and 5 deletions.
3 changes: 3 additions & 0 deletions src/DateContentRow.js
Original file line number Diff line number Diff line change
@@ -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,
3 changes: 3 additions & 0 deletions src/DayColumn.js
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 2 additions & 0 deletions src/EventCell.js
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 2 additions & 0 deletions src/EventRowMixin.js
Original file line number Diff line number Diff line change
@@ -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}
/>
)
},
2 changes: 2 additions & 0 deletions src/Month.js
Original file line number Diff line number Diff line change
@@ -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,
3 changes: 3 additions & 0 deletions src/TimeGrid.js
Original file line number Diff line number Diff line change
@@ -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,
5 changes: 5 additions & 0 deletions src/TimeGridHeader.js
Original file line number Diff line number Diff line change
@@ -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,
14 changes: 10 additions & 4 deletions src/addons/dragAndDrop/EventWrapper.js
Original file line number Diff line number Diff line change
@@ -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) {
/*
4 changes: 3 additions & 1 deletion src/addons/dragAndDrop/withDragAndDrop.js
Original file line number Diff line number Diff line change
@@ -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,
}

0 comments on commit a18acc2

Please sign in to comment.