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 stickyMachine = Machine({
    id: 'sticky',
    initial: 'uncontrolled',
    on: {
      STICK: {
        target: 'controlled.stuck',
      },
      UNSTICK: {
        target: 'controlled.unstuck',
      },
      RESET: {
        target: 'uncontrolled',
      }
    },
    states: {
      uncontrolled: {
        initial: 'unknown',
        states: {
          unknown: {},
          stuck: {},
          unstuck: {},
          bottom: {}
        }
      },
      controlled: {
        initial: 'unknown',
        states: {
          unknown: {},
          stuck: {}, 
          unstuck: {}
        }
      }
    }
  });
  
  
  // 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
  //           })
  //         }
  //       }
  //     }
  //   }
  // });