Skip to content

Commit 0fa2c30

Browse files
kamry-bowmanjquense
authored andcommitted
feat(dnd): implement callback on initializing drag or resize action (jquense#1206)
Addresses jquense#1205 This PR would add an optional prop from the withDragAndDrop addon, that would allow users to pass a onDragStart callback to the DragAndDrop calendar, which gets called with `{ event, action, direction }` as its sole parameter. The change is minimal, meant to serve users who need the hook and otherwise get out of the way. Open to any feedback!
1 parent 475674c commit 0fa2c30

File tree

2 files changed

+8
-1
lines changed

2 files changed

+8
-1
lines changed

examples/demos/dnd.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ class Dnd extends React.Component {
8383
resizable
8484
onEventResize={this.resizeEvent}
8585
onSelectSlot={this.newEvent}
86+
onDragStart={console.log}
8687
defaultView={BigCalendar.Views.MONTH}
8788
defaultDate={new Date(2015, 3, 12)}
8889
/>

src/addons/dragAndDrop/withDragAndDrop.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,13 @@ import { mergeComponents } from './common'
2323
*
2424
* Set `resizable` to true in your calendar if you want events to be resizable.
2525
*
26-
* The HOC adds `onEventDrop` and `onEventResize` callback properties if the events are
26+
* The HOC adds `onEventDrop`, `onEventResize`, `onDragStart` callback properties if the events are
2727
* moved or resized. They are called with these signatures:
2828
*
2929
* ```js
3030
* function onEventDrop({ event, start, end, allDay }) {...}
3131
* function onEventResize(type, { event, start, end, allDay }) {...} // type is always 'drop'
32+
* function onDragStart({ event, action, direction }) {...}
3233
* ```
3334
*
3435
* Moving and resizing of events has some subtlety which one should be aware of.
@@ -53,6 +54,7 @@ export default function withDragAndDrop(Calendar) {
5354
static propTypes = {
5455
onEventDrop: PropTypes.func,
5556
onEventResize: PropTypes.func,
57+
onDragStart: PropTypes.func,
5658

5759
draggableAccessor: accessor,
5860
resizableAccessor: accessor,
@@ -114,7 +116,11 @@ export default function withDragAndDrop(Calendar) {
114116
}
115117

116118
handleBeginAction = (event, action, direction) => {
119+
const { onDragStart } = this.props
117120
this.setState({ event, action, direction })
121+
if (onDragStart) {
122+
onDragStart({ event, action, direction })
123+
}
118124
}
119125

120126
handleInteractionStart = () => {

0 commit comments

Comments
 (0)