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: 'collapsible',
  initial: 'closed',
  states: {
    closed: {
      on: {
        OPEN: {
          target: 'opening',
          actions: 'closedToOpeningAnimation',
        },
      },
    },
    opening: {
      invoke: {
        src: 'openingAnimation',
        onDone: 'opened',
      },
    },
    opened: {
      entry: 'openedAnimation',
      on: {
        CLOSE: {
          target: 'closing',
          actions: 'openedToClosingAnimation',
        },
      },
    },
    closing: {
      invoke: {
        src: 'closingAnimation',
        onDone: 'closed',
      },
    },
  },
}, {
  services: {
    openingAnimation: () => new Promise(resolve => setTimeout(resolve, 2000)),
    closingAnimation: () => new Promise(resolve => setTimeout(resolve, 2000)),
  },
});