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.
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:
.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.