jquense / react-big-calendar

gcal/outlook like calendar component
http://jquense.github.io/react-big-calendar/examples/index.html
MIT License
7.93k stars 2.24k forks source link

Fix error when clicking on header on default view #2647

Open adrienharnay opened 2 months ago

adrienharnay commented 2 months ago

Hello,

I noticed that when clicking the text in the header on default view, the handleRangeChange would be invoked with viewComponent === undefined.

I have patched the package to avoid the error logs, and am submitting this fix. Feel free to modify if needs be!

cutterbl commented 2 months ago

I am curious about the crash message you received. Can you copy/paste that here?

cutterbl commented 2 months ago

@adrienharnay Did you see my notes above?

adrienharnay commented 2 months ago

@adrienharnay Did you see my notes above?

Apologies for the slow response, here is the error:

react-dom.development.js:4312 Uncaught TypeError: Cannot read properties of undefined (reading 'range')
    at Calendar._this.handleRangeChange (react-big-calendar.esm.js:4638:27)
    at Calendar._this.handleViewChange (react-big-calendar.esm.js:4671:13)
    at Calendar._this.handleDrillDown (react-big-calendar.esm.js:4700:23)
    at notify (react-big-calendar.esm.js:187:22)
    at TimeGridHeader._this.handleHeaderClick (react-big-calendar.esm.js:3514:7)
    at onClick (react-big-calendar.esm.js:3593:27)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
Screenshot 2024-09-17 at 15 00 25
cutterbl commented 6 days ago

@adrienharnay Look at my reviews for how to address this

adrienharnay commented 5 days ago

@adrienharnay Look at my reviews for how to address this

Your reviews? Apologies, I did not understand.

cutterbl commented 2 days ago

You should see my reviews on the 'Files Changed' tab of this PR. Basically I said "do this instead"

handleRangeChange = (date, viewComponent, view) => {
    let { onRangeChange, localizer } = this.props

    if (onRangeChange) {
      if (viewComponent?.range) {
        onRangeChange(viewComponent.range(date, { localizer }), view)
      } else {
        if (process.env.NODE_ENV !== 'production') {
          console.error('onRangeChange prop not supported for this view')
        }
      }
    }
  }