Skip to content

Instantly share code, notes, and snippets.

@LinusBorg
Last active Mar 30, 2020
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const rovingTabIndexMachine = Machine({
id: 'rovingTabIndex',
initial: 'inactive',
context: {
n: 5,
selectedIndex: 0,
},
states: {
inactive: {
on: {
updateCount: {
actions: ['updateCount']
},
activate: {
target: 'active',
actions: ['setInitialTabIndex'],
}
},
},
active: {
on: {
updateCount: {
actions: ['updateCount']
},
deactivate: 'inactive',
forward: [
{
target: 'active',
actions: ['moveToStart'],
cond: 'isEnd'
},
{
target: 'active',
actions: ['forward']
}
],
backward: [
{
target: 'active',
actions: ['moveToEnd'],
cond: 'isStart',
},
{
target: 'active',
actions: ['backward'],
}
],
movetoStart: {
target: 'active',
actions: ['moveToStart'],
},
movetoEnd: {
target: 'active',
actions: ['moveToEnd'],
}
}
}
},
},
{
actions: {
forward: assign({
selectedIndex: (ctx) => ctx.selectedIndex + 1
}),
backward: assign({
selectedIndex: (ctx) => ctx.selectedIndex - 1
}),
moveToStart: assign({
selectedIndex: 0
}),
moveToEnd: assign({
selectedIndex: (ctx) => ctx.n - 1
}),
updateCount: assign({
n: 3,
selectedIndex: (ctx, event) => Math.min(ctx.selectedIndex, event.count)
})
},
guards: {
isEnd: ctx => ctx.selectedIndex >= ctx.n - 1,
isStart: ctx => ctx.selectedIndex <= 0
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment