Skip to content

Commit

Permalink
fix(dnd): move merge components
Browse files Browse the repository at this point in the history 
Resolves issue with using the DnD HOC where components are not receiving state updates

#2359
  • Loading branch information
@iwollmann
iwollmann authored Feb 7, 2024
1 parent 25dd638 commit fd02261
Showing 1 changed file with 7 additions and 9 deletions.
16 changes: 7 additions & 9 deletions src/addons/dragAndDrop/withDragAndDrop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,6 @@ export default function withDragAndDrop(Calendar) {
constructor(...args) {
super(...args)

const { components } = this.props

this.components = mergeComponents(components, {
eventWrapper: EventWrapper,
eventContainerWrapper: EventContainerWrapper,
weekWrapper: WeekWrapper,
})

this.state = { interacting: false }
}

Expand Down Expand Up @@ -99,13 +91,19 @@ export default function withDragAndDrop(Calendar) {
}

render() {
const { selectable, elementProps, ...props } = this.props
const { selectable, elementProps, components, ...props } = this.props
const { interacting } = this.state

delete props.onEventDrop
delete props.onEventResize
props.selectable = selectable ? 'ignoreEvents' : false

this.components = mergeComponents(components, {
eventWrapper: EventWrapper,
eventContainerWrapper: EventContainerWrapper,
weekWrapper: WeekWrapper,
})

const elementPropsWithDropFromOutside = this.props.onDropFromOutside
? {
...elementProps,
Expand Down

2 comments on commit fd02261

@wilkinson4
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This broke our custom onSelectEvent callback. We have the following code for a drag and drop calendar:

<Calendar
  {...props}
  onSelectEvent={({ id }, event) => {
    if (id !== null) {
      setPreviewInfo({
         open: true,
          id,
          anchor: event.currentTarget,
         })
       }
    }}
  components={{
    toolbar: Toolbar,
    eventWrapper: EventWrapper,
     [Views.WEEK]: { event: CellComponent },
     [Views.WORK_WEEK]: { event: CellComponent },
     [Views.DAY]: { event: CellComponent },
     [Views.AGENDA]: { event: AgendaCellComponent },
    }}
/>

Which uses a MUI popover that requires setting the anchor element to an event that was clicked. However, using the event.currentTarget variable is giving the following MUI warning
Screenshot 2024-02-22 at 2 14 35 PM

Which causes the following behavior after clicking an event
Screenshot 2024-02-22 at 2 15 49 PM

@wilkinson4
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This broke our custom onSelectEvent callback. We have the following code for a drag and drop calendar:

<Calendar
  {...props}
  onSelectEvent={({ id }, event) => {
    if (id !== null) {
      setPreviewInfo({
         open: true,
          id,
          anchor: event.currentTarget,
         })
       }
    }}
  components={{
    toolbar: Toolbar,
    eventWrapper: EventWrapper,
     [Views.WEEK]: { event: CellComponent },
     [Views.WORK_WEEK]: { event: CellComponent },
     [Views.DAY]: { event: CellComponent },
     [Views.AGENDA]: { event: AgendaCellComponent },
    }}
/>

Which uses a MUI popover that requires setting the anchor element to an event that was clicked. However, using the event.currentTarget variable is giving the following MUI warning Screenshot 2024-02-22 at 2 14 35 PM

Which causes the following behavior after clicking an event Screenshot 2024-02-22 at 2 15 49 PM

Realized from the docs that we now need to memoize our components prop

Please sign in to comment.