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 stickyPortalMachine = Machine({
    id: 'stickyPortal',
    initial: 'invalid',
    context: {
      height: 0,
      stickyStates: [],
    },
    on: {
      ADD_STICKY_STATE: {
        target: 'invalid',
        actions: assign({
          stickyStates: (context, event) => {
            const stickyState = spawn(stickyMachine);
            return context.stickyStates.concat(stickyState);
          }
        })
      },
      UPDATE_STICKY_STATE: {
        target: 'invalid',
        actions: assign({
          stickyStates: (context, event) => {
            const stickyStates = context.stickyStates.slice();
            for (const i in stickyStates) {
              if (stickyStates[i].id === event.stickyState.id) {
                stickyStates[i] = event.stickyState;
              }
              break;
            }
            return stickyStates;
          }
        })
      },
    },
    states: {
      valid: {
        on: {
          INVALIDATE: 'invalid'
        }
      },
      invalid: {
        on: {
          VALIDATE: {
            target: 'valid',
            actions: assign({
              height: (context, event) =>
              context.height += event.height
            })
          }
        }
      }
    }
  });