Carousel machine with factory exports

[andrewmcoupe]

The same changes as the Carousel PR but includes the ability to export a factory function as well as a standard state machine object.

This is a machine to manage the state and slide transitions for a carousel. This could be a carousel of any sort eg. image, content etc.

Happy to see alternative approaches to this kind of machine. I was thinking that an activity would be the best approach but events can't be sent inside an activity so I went for the approach advised by David here.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mattpocock/xstate-catalogue/4iZ8TszotYxSqTHArxNTWJw5yhmc
✅ Preview: https://xstate-catalogue-git-fork-andrewmcoupe-carous-7259d1-mattpocock.vercel.app

[mattpocock]

Jeez, @andrewmcoupe - this is killer.

[damiensedgwick]

I like this a lot! I'm a fan of the ole carousel!

I do have a question though; carousels typically move in two directions, left and right. When I play with the machine and I UPDATE_INDEX from the idle state. It only ever increases or resets to 0 if the totalSlideCount is reached.

Would it be better to split UPDATE_INDEX into 2 events: DECREASE_INDEX and INCREASE_INDEX so that we could send either event depending on whether the left or right control button is clicked or if the indicator that is clicked is lower or higher than the current index?

[andrewmcoupe]

I like this a lot! I'm a fan of the ole carousel!

I do have a question though; carousels typically move in two directions, left and right. When I play with the machine and I UPDATE_INDEX from the idle state. It only ever increases or resets to 0 if the totalSlideCount is reached.

Would it be better to split UPDATE_INDEX into 2 events: DECREASE_INDEX and INCREASE_INDEX so that we could send either event depending on whether the left or right control button is clicked or if the indicator that is clicked is lower or higher than the current index?

You can provide an index with the UPDATE_INDEX event (see below) to set the activeIndex to whatever you want but it made me realise that the index can be set to something outside of the valid range (0 - totalSlidesCount) so I've added a check in for that.

send({ type: "UPDATE_INDEX", index: 2 })

[damiensedgwick]

You can provide an index with the UPDATE_INDEX event (see below) to set the activeIndex to whatever you want but it > made me realise that the index can be set to something outside of the valid range (0 - totalSlidesCount) so I've added a > check in for that.

Good catch! How would you determine the index to pass in the event? I see no logic for decreasing the index at the moment, only increasing or specifying it exactly. Am I being dumb here? I don't see how I would use this and go back to the previous slide unless I could do something like:

<button
  onClick={() => send({ type: "UPDATE_INDEX", index: context.currentIndex - 1})}
>
  Previous Slide
</button

Then there is missing logic for when the index is 0 and it needs to start from the last item in the carousel again. This logic already exists when going the other way and reaches the totalSlideCount.

Again, sorry if I am missing the obvious here!

[andrewmcoupe]

You can provide an index with the UPDATE_INDEX event (see below) to set the activeIndex to whatever you want but it > made me realise that the index can be set to something outside of the valid range (0 - totalSlidesCount) so I've added a > check in for that.

Good catch! How would you determine the index to pass in the event? I see no logic for decreasing the index at the moment, only increasing or specifying it exactly. Am I being dumb here? I don't see how I would use this and go back to the previous slide unless I could do something like:

<button
  onClick={() => send({ type: "UPDATE_INDEX", index: context.currentIndex - 1})}
>
  Previous Slide
</button

Then there is missing logic for when the index is 0 and it needs to start from the last item in the carousel again. This logic already exists when going the other way and reaches the totalSlideCount.

Again, sorry if I am missing the obvious here!

That is how I would imagine a previous slide button working, yes 👍 But you're right about the missing logic. I'll add that in, good spot 👁️

I've also added in NEXT_INDEX and PREV_INDEX as I think that is much easier to use, so now you can just

send({ type: "NEXT_INDEX" })
send({ type: "PREV_INDEX" })

[damiensedgwick]

@andrewmcoupe Nice work! This looks like a super nice way to handle carousel slides! Long gone are the days of jQuery libraries 😂