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)
  
function validate({ schema, formObject }) {
 return false
}

async function submitForm(onSubmit, formObject) {
  return await onSubmit(formObject)
}

const formMachine = Machine(
  {
    id: 'form',
    context: {
      formObject: {
        change() {}
      },
      onSubmit: () => {},
      onSuccess: () => {},
      onError: () => {},
      schema: {},
    },
    type: 'parallel',

    states: {
      behavior: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              SUBMIT: {
                target: 'busy',
                cond: 'canSubmit',
              },
            },
          },
          busy: {
            invoke: {
              src: function (context) {
                return submitForm(context.onSubmit, context.formObject)
                },
              onDone: 'success',
              onError: 'error',
            },
          },
          success: {
            entry: 'handleSubmitSuccess',
          },
          error: {
            entry: 'handleSubmitError',
          },
        },
      },
      change: {
        initial: 'unchanged',
        states: {
          unchanged: {
            entry: [send('VALIDATE')],
            on: {
              CHANGE: {
                target: 'changing',
              },
            },
          },
          changing: {
            entry: ['update', send('CHANGED')],
            on: {
              CHANGED: [
                { target: 'unchanged', cond: 'isPristine' },
                { target: 'changed'}
              ]
            }
          },
          changed: {
            entry: [send('VALIDATE')],
            on: {
              CHANGE: {
                target: 'changing',
              },
            },
          },
        },
      },
      validity: {
        initial: 'unknown',
        states: {
          unknown: {
            on: {
              VALIDATE: 'validating',
            },
          },
          validating: {
            invoke: {
              src: function(context) {
                return validate(context)
              },
              onDone: 'valid',
              onError: 'invalid',
            },
            on: {
              VALIDATE: 'validating',
            },
          },
          valid: {
            entry: [
              assign({
                validationErrors: [],
              }),
            ],
            on: {
              VALIDATE: 'validating',
            },
          },
          invalid: {
            entry: ['handleValidationErrors'],
            on: {
              VALIDATE: 'validating',
            },
          },
        },
      },
    },
  },
  {
    actions: {
      update({ formObject }, { transform }) {
        formObject.change(transform);
      },
      handleValidationErrors: assign({
        validationErrors: function(_context, { data }) {
          const { inner: errors } = data

          return errors
        },
      }),
      handleSubmitSuccess({ onSuccess }, { data }) {
        return onSuccess(data);
      },
      handleSubmitError({ onError }, { data }) {
        return onError(data);
      }
    },
    guards: {
      isPristine({ formObject }) {
        return formObject.isPristine;
      },
      canSubmit(_context, _event, guardMeta) {
        return false;
      },
    },
  }
)