Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
    id: 'transactionDrawer',
    initial: 'idle',
    context: {
      index: -1,
      size: 0,
    },
     on: {
        UPDATE_SIZE: {
          actions: (ctx, evt) => console.log(evt)
        }
      },
    states: {
      idle: {
        on: {
          OPEN: 'opened'
        }
      },
      opened: {
        entry: ['setIndex', 'setSize'],
        on: {
          NEXT: {
            cond: 'canMoveForwards',
            actions: assign({
              index: (ctx, evt) => ctx.index + 1
            }),
            target: ''
          },
          PREVIOUS: {
            cond: 'canMoveBackwards',
            actions: assign({
              index: (ctx, evt) => ctx.index - 1
            }),
            target: ''
            
          },
          CLOSE: ''
        }
      }
    }
  }, {
    guards: {
      canMoveBackwards: (ctx, evt) => {
        return ctx.index !== -1 && ctx.index - 1 >= 0
      },
      canMoveForwards: (ctx, evt) => {
        return ctx.index !== -1 && ctx.index + 1 < ctx.size
      },
    },
    actions: {
      setIndex: assign({
        index: (ctx, evt) => evt.index
      }),
      setSize: assign({
        size: (ctx, evt) => evt.size
      })
    }
  });