feat(time-grid): allow consumer to set allDayMaxRows (#2386)

[fornesarturo]

• Addresses Support "show more" in "All day" in week view #2386
• Currently react-big-calendar is not limiting the amount of events in the All day row displayed in Week and Day view, if this row grows it may also cover the events and prevent the user from seeing their normal events.

In this commit:

• Add support for displaying Show more text in TimeGrid views via allDayMaxRows prop.
• Prevent Background cells from capturing click on show more button.

[cutterbl]

@fornesarturo First pass looks like it might be good, but we would need a story in storybook for the new prop, and showcasing how it works.

[fornesarturo]

@cutterbl added story for the new prop and updated the API mdx to include it as well

[cutterbl]

@fornesarturo Thanks. I'll try to load this up and take a look over the weekend maybe.

[fornesarturo]

Anything missing to have this merged?

[cutterbl]

@fornesarturo Finally got a chance to look at this, this morning. With an allDayMaxRows set to 2 I only saw a single event and the 'show more' button. Setting the value to null did not change the behavior. Removing the prop gave me three events, and using the prop set to 3 showed me the events. Also, the show more didn't do anything. While it did add the physical button to the display, it did not do any of the typical behaviors of the button (either the popup when using the popup prop, or the redirect without).

[cutterbl]

@fornesarturo A deeper look at the failing 'show more' functionality shows that the onShowMore prop isn't getting passed in to the TimeGrid in the Day, Week or WorkWeek components, so that prop isn't available to call. In our next version we'll handle these things with context, but for now these props are manually passed down the component tree. You should also take a close look at the handleShowMore in the DateContentRow component, to see exactly what gets passed to this method, and in what order. I don't think the notify() is going to work here.

[fornesarturo]

@cutterbl I see that first part as the usual behavior for the maxRows prop in the DateContentRow component and the getSlotMetrics function where maxRows includes the show more button row, I could make it so when passing the prop down to DateContentRow it is handled as allDayMaxRows - 1, maybe change the name of the prop to allDayMaxEventRows to make it clear, or just keep it as is. For null I can add the if else with Infinity, to handle null as undefined.

On an implementation using react-big-calendar with these changes I am getting a call to the onShowMore function, since I'm working off of that call it worked for my case. I see that what the Month view currently does is it defines the overlay there, it's not something central, I could add the functionality to TimeGrid following Month view's approach, per the commits that seems like an intentional exception:

handleShowMore = (events, date, cell, slot, target) => {
    const {
      popup,
      onDrillDown,
      onShowMore,
      getDrilldownView,
      doShowMoreDrillDown,
    } = this.props
    //cancel any pending selections so only the event click goes through.
    this.clearSelection()

    if (popup) {
      let position = getPosition(cell, this.containerRef.current)

      this.setState({
        overlay: { date, events, position, target },
      })
    } else if (doShowMoreDrillDown) {
      notify(onDrillDown, [date, getDrilldownView(date) || views.DAY])
    }

    notify(onShowMore, [events, date, slot])
  }

I see the differences in notifying the onShowMore prop here where it sends the parameters as an array, so that I can change quickly.

Let me know your thoughts.

[fornesarturo]

Result of adding the Month view code to TimeGrid:

[fornesarturo]

@cutterbl Added changes to handle overlay and update the onShowMore prop notify call. Also I updated the propTypes for Day and Week to reflect the props expected in TimeGrid that are drilled down from Calendar. Waiting on any comment to change handling of the limited rows in allDayMaxRows (subtract one before sending to maxRows to not include the Show more button row in the count) or keep as is (include Show more button row in the count).

[cutterbl]

@fornesarturo I loaded your changes and brought up storybook. Still not getting the popup with the popup prop in the allDayMaxRows story...

[cutterbl]

@fornesarturo Still not getting the popup, but I do see multiple console warnings

Warning: Failed prop type: The prop min is marked as required in Week, but its value is undefined.
Warning: Failed prop type: The prop max is marked as required in Week, but its value is undefined.
Warning: Failed prop type: The prop scrollToTime is marked as required in Week, but its value is undefined.

[fornesarturo]

@cutterbl Hi, just updated to correctly display the popup, and fixed propTypes to make sense with settings across the repo.

[cutterbl]

@fornesarturo This is better. Now I get the popup, and with no popup I get the click through to 'Day' view. Now the only thing I see is the row count. With an allDayMaxRows: 2 I still only see one event and the +4 more link, where (by the documentation) I would expect to see two events and +3 more.

[fornesarturo]

@cutterbl row count is fixed now and displays the number of rows for events specified.

[github-actions]

🎉 This PR is included in version 1.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀