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: 'scroll',
    initial: 'idle',
    context: {
        scroll_top: 0
    },
    states: {

        idle: {
            on: {
                // event
                READY: { // transition
                    // transition target (target status)
                    target: 'ready',
                    // transition actions
                    // An action is the way a statechart can cause things to happen in the outside world
                    actions: assign({
                        number_of_records: function (ctx, event) {
                            return event.number_of_records;
                        }
                    })
                }
            }
        },
        ready: {
            on: {
                SCROLL: {
                    target: 'scrolling',
                    actions: assign({
                        scroll_top: function (ctx, event) {
                            return event.drag_area;
                        }
                    })
                }
            }
        },
        not_scrolling: {
            on: {
                SCROLL: {
                    target: 'scrolling',
                    actions: assign({
                        scroll_top: function (ctx, event) {
                            return event.drag_area;
                        }
                    })
                }
            }
        },
        scrolling: {
            on: {
                STOP_SCROLL: 'not_scrolling'
            },
            activities: ['checking'],
        }
    }
},
{
    activities: {
        checking: () => {
            // Start the beeping activity
            const interval = setInterval(() => console.log('BEEP!'), 1000);

            // Return a function that stops the beeping activity
            return () => clearInterval(interval);
        }
    }
});