Skip to content

Instantly share code, notes, and snippets.

@AlexFrazer
Created April 9, 2021 17:57
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
// 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',
},
},
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment