Generated by XState Viz: https://xstate.js.org/viz

machine.js

  
  const formField = Machine({
    id: 'formField',
    initial: 'clean',
    context: {
      initialValue: '',
      value: '',
      feedback: undefined,
      pending: false,
    },
    on:{
      CHANGE: {
        target: 'validating', 
        actions: ['storeValue', 'clearFeedback']
      },
      INVALID: {
        target: 'feedback', 
        actions: ['setFeedback']
      },
      RESET: {
          target: 'clean', 
          actions: ['storeValue', 'clearFeedback']
      },
      VALID: {
        target: 'valid', 
        actions: ['clearFeedback']
      },
    },
    states: {
      clean: {},
      validating: {
        on: {
          PENDING: {
            actions: ['setPending']
          }
        }
      },
      valid: {},
      feedback: {},
    }
  }, {
    actions: {
      storeValue: assign({
        value: (context, event) => event.data
      }),
      resetValue: assign((context,event) => {
        if (event.data === undefined) {
          return {
            value: context.initialValue
          }
        } else {
          return {
            initialValue: event.data,
            value: event.data
          }
        }
      }),
      setFeedback: assign({
        feedback: (context, event) => event.data,
        pending: false
      }),
      clearFeedback: assign({
        feedback: undefined,
        pending: false
      }),
      setPending: assign({
        pending: true
      })
    },
    guards: {
      isAsync: (context, event) => {
        return context.isAsync;
      }
    }
  });
  
  
  /*
const onSubmit = Machine({
    id: 'on-submit',
    initial: 'clean',
    context: {
      initialValue: '',
      value: '',
      feedback: undefined
    },
    on:{
      CHANGE: {
            actions: ['storeValue', 'clearFeedback'],
            target: 'valid'
      },
      // CHANGE: {
            // actions: ['storeValue']
      // },
      INVALID: {
          target: 'feedback', 
          actions: ['setFeedback']
      },
      VALID: {
          target: 'valid', 
          actions: ['clearFeedback']
      },
      RESET: {
          target: 'clean', 
          actions: ['storeValue', 'clearFeedback']
      }
    },
    states: {
      clean: {
        
        // on: {
          // CHANGE: 'valid'
        // }
        
      },
      valid: {},
      feedback: {}
    }
  }, {
    actions: {
      storeValue: assign({
        value: (context, event) => event.data
      }),
      resetValue: assign((context,event) => {
        if (event.data === undefined) {
          return {
            value: contect.initialValue
          }
        } else {
          return {
            initialValue: event.data,
            value: event.data
          }
        }
      }),
      setFeedback: assign({
        feedback: (context, event) => event.data
      }),
      clearFeedback: assign({
        feedback: undefined
      })
    },
    guards: {
      hasFeedback: (context) => context.feedback
    }
  });*/