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: 'formInput',
    initial: 'active',
    states: {
      active: {
        on: {
          DISABLE: 'disabled',
        },
        type: 'parallel',
        states: {
          focus: {
            initial: 'unfocused',
            states: {
              focused: {
                on: {
                  BLUR: 'unfocused',
                },
              },
              unfocused: {
                on: {
                  FOCUS: 'focused',
                },
              },
            },
          },
          validation: {
            initial: 'pending',
            on: {
              CHANGE: {
                target: '.pending',
                actions: 'setValue',
              },
            },
            states: {
              pending: {
                invoke: {
                  src: 'validateField',
                  onDone: {
                    target: 'valid',
                    actions: [
                      sendParent('valid'),
                      assign({
                        isValid: false,
                      }),
                    ]
                  },
                  onError: {
                    target: 'invalid',
                    actions: [
                      sendParent('valid'),
                      assign({
                        isValid: false,
                      })
                    ]
                  },
                },
              },
              valid: {},
              invalid: {},
            },
          },
        },
      },
      disabled: {
        on: {
          ENABLE: 'active',
        },
      },
    },
  });