[rt10000] BackgroundLayer w/: vertical grid, highlight weekends, "now" marker, highlighted intervals

[cristian-spiescu]

We have implemented the following features:

We had an internal review, and we have some ideas on how to improve a bit the performance. Once they are done, we'll submit a PR.

Some thoughts about the API:

<Timeline ... // some props
  backgroundLayer={<BackgroundLayer 
    highlightWeekends highlightWeekendsClassName="myClass" // no need to provide this; because of the default class below; if the user provides a class, he should use !important to override things from the default class. The user can control color, alpha, border
    nowMarker nowMarkerClassName="..." // same principle above, regarding classes
    verticalGrid verticalGridClassName="..." 
    markers={[<Marker start={moment(...)} />, <Marker start=... className="..." /> ]} // discussion maybe; 
// #1 I see that Marker currently has "low level" props such as: height, left, top, used as-is in "style". The user cannot provide this; 
// he will provide "higher" level things, with unit in "time" measurement unit, e.g. moment("2021-12-31"); that means that 
// the parent component needs to pass as prop some thing/mechanism to allow Marker to convert from time to pixels
// #2 the user won't probably provide "key"; maybe he will, but rarely; the parent component needs to inject this as well to <Marker>; idem for other cases where we provide list of components and not a single component
  highlightedIntervals={[<HighlightedInterval start={...} end={...} />, <HighlightedInterval start={...} end={...} className={...} /> ]}
  />
/>

.rct9k-background-layer-highlight-weekends { ... }

Even if this will be in background by default, if needed, the components may be "on top", via CSS/z-index. I see in the above capture that everything seems on background, except the "mouse" marker. I think because of z-index. The "mouse" marker shouldn't be in this component, to avoid recalculation on mouse over.

To calculate weekends: let's store them in the state and recalculate only on component resize (e.g. height) and start/end change (e.g. resize, zoom, scroll left-right). On scroll top-bottom, this component + children shouldn't re render.