Skip to content

Changing active item after timeline was initialized (controlled) #300

Open
@jnachtigall

Description

@jnachtigall

Is your feature request related to a problem? Please describe.
Sometimes it would be nice if the activeItemIndex would not only select the active timeline item only on load but could also be controlled (like in a controlled component) later. For instance for using custom prev / next buttons to jump to a certain timeline item. Or setting the active item by some other kind of app state.

Describe the solution you'd like
Since activeItemIndex is unready set to be only used "on load", maybe add another prop like controlledActiveItemIndex. In the end - looking at the code for

const handleOnPrevious = () => {
if (activeTimelineItem > 0) {
const newTimeLineItem = activeTimelineItem - 1;
handleTimelineUpdate(newTimeLineItem);
setActiveTimelineItem(newTimeLineItem);
}
};
-- it just seems to be a matter of calling handleTimelineUpdate(newTimeLineItem) and setActiveTimelineItem(newTimeLineItem)

Describe alternatives you've considered
I looked into a way how maybe handleTimelineUpdate(newTimeLineItem) and setActiveTimelineItem(newTimeLineItem) could be called from outside, but did not find a way. Both functions do not seem to be exposed. Actually, just exposing handleTimelineUpdate(newTimeLineItem) would probably be sufficient as it internally calls setActiveTimelineItem(newTimeLineItem) itself:

const handleTimelineUpdate = useCallback((actvTimelineIndex: number) => {
setItems((lineItems) =>
lineItems.map((item, index) =>
Object.assign({}, item, {
active: index === actvTimelineIndex,
}),
),
);
setActiveTimelineItem(actvTimelineIndex);
if (items) {
if (items.length - 1 === actvTimelineIndex) {
setSlideshowActive(false);
}
}
}, []);

Additional context
Add any other context or screenshots about the feature request here.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions