RFC: row renderer

Is your feature request related to a problem? Please describe.

Add an API to the calendar part of the timeline. This API would give you control to add custom UI on calendar rows using a render prop. You can control what is rendered by default with the library like Items and Vertical/Horizontal lines, and the renderer will provide you the ability to render custom backgrounds and droppable layers for custom dnd

Describe the solution you’d like

<Timeline
    groups={groups}
    items={items}
    rowRenderer={({ rowData, helpers, getLayerRootProps, group }) => {
        const { itemsToDrag, unavailableSlots, timelineLinks } = rowData
        const groupUnavailableSlots = unavailableSlots[group.id]
        ? unavailableSlots[group.id]
        : []
        return (
        <>
            <UnavailableLayer
                getLayerRootProps={getLayerRootProps}
                getLeftOffsetFromDate={helpers.getLeftOffsetFromDate}
                groupUnavailableSlots={groupUnavailableSlots}
            />
            <DroppablesLayer
                getLayerRootProps={getLayerRootProps}
                itemsToDrag={itemsToDrag}
                getLeftOffsetFromDate={helpers.getLeftOffsetFromDate}
                handleDrop={this.handleDrop}
                group={group}
            />
        </>
        )
    }}
    rowData={{
        itemsToDrag: this.state.itemsToDrag,
        unavailableSlots: this.state.unavailableSlots,
        timelineLinks: this.state.timelineLinks,
    }}
/>

Describe alternatives you’ve considered

keep the plugin system (undocumented)

Additional context

Check out the full RFC: https://github.com/namespace-ee/react-calendar-timeline/blob/rowRenderer/rfcs/row-renderer/index.md

Checkout prototype at the row-renderer branch on the repo

[Ilaiwi]

@jabidof there will be several performance bosts but it has to do more of trying to eliminate expensive calculations/renderers rather than through vertical rendereing. for example this is profiling of a simple drag of an item horizontally. As you can see in the img. a drag horizontally affected every item on the screen and required a renderer. This is because internally all the items are rendererd in the same div and their absolute position is relative to the calendar so their top/left is changing every interaction. With this new method. You are relative to your row rather than the whole calendar and all the existing items. This should limit renderers to only affect the row you are rendered in and only render the items inside the row. Or if moved vertically it should only render your group and then group effected without affecting any of the other groups.

[sjustason]

We’ve tried to resolve conflicts from master and merged the rowrenderer work into a fork we have here: https://github.com/routific/react-calendar-timeline, there’s a lot of great work from @Ilaiwi that we’re trying to utilize; We’re doing some testing now but aside from a few small issues we’ve fixed it largely seems stable. Once we’ve finished testing we’ll happily open a PR to this original master with conflicts resolved for consideration.