Added props to show a infinite list effect to the slot

[blzpedro]

These changes have already worked for me.

E.g.: if you add some padding or increase the height from the char elements you wouldn't have the infinite dummy list effect. Adding the prop hasInfiniteList={true}, you will see the behavior correctly.

Feel free to change or improve!

Thanks

[almond-bongbong]

What do you think about defining the hasInfiniteList option as the default behavior instead of providing it as an option? In my opinion, this would be more useful in most cases.

[blzpedro]

I agree, and actually, I expected this as the default behavior when I got the package. 😂

But I think the changes that I made wouldn't work for all the cases that you provided.

E.g: the slots that are used with any separator.

[blzpedro]

I've thought of a solution for this edge case with values containing separators. We can avoid a if (SEPARATOR.includes(v)) and threat this directly into the dummyList prop. What do you think?

Note: this would change the previous behavior where you had a separatorClassName. Maybe you can improve this?

<Slot
    key={valueRefList.length - i - 1}
    fontHeight={fontHeight}
    numbersRef={numbersRef}
    active={active}
    isChanged={isChanged}
    charClassName={charClassName}
    slotNumbersHeight={slotNumbersHeight}
    effectiveDuration={effectiveDuration}
    delay={delay}
    value={v}
    dummyList={SEPARATOR.includes(v) ? dummyList.map(() => v) : dummyList}
    hasInfiniteList={hasInfiniteList}
/>

[almond-bongbong]

How about adding an "animateSeparator" option? 😆

[blzpedro]

Yeah, it can be, to improve this you can add the animateSeparator depending on the hasInfiniteList to avoid the following behavior: if you increase the height or add some paddingY to the chars(with the prop hasInfiniteList as true), the separator will not follow the centralized value.