Skip to content

Instantly share code, notes, and snippets.

@alavkx
Last active September 11, 2020 20:17
Show Gist options
  • Save alavkx/13f8169924c5bb5ef3fdf0d60ea8ed65 to your computer and use it in GitHub Desktop.
Save alavkx/13f8169924c5bb5ef3fdf0d60ea8ed65 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const optimisticInputMachine = initial => Machine({
id: 'optimisticInput',
initial: 'idle',
context: {
value: initial,
savedValue: initial,
},
states: {
idle: {
on: {
FOCUS: 'focused'
}
},
focused: {
initial: 'pristine',
states: {
pristine: {
on: {
SUBMIT: '#optimisticInput.idle'
}
},
dirty: {
on: {
SUBMIT: '#optimisticInput.submitting'
}
},
},
on: {
CHANGE: {
target: '.dirty',
actions: 'update'
},
CLEAR: {
target: '.dirty',
actions: 'clear'
},
BLUR: {
target: '#optimisticInput.idle',
actions: 'reset'
}
}
},
submitting: {
on: {
RESOLVE: {
target: 'idle',
actions: 'save',
},
REJECT: {
target: 'idle',
actions: 'reset',
}
}
}
}
}, {
actions: {
update: assign({ value: (ctx, e) => e.payload}),
clear: assign({ value: null }),
reset: assign({ value: (ctx, e) => ctx.savedValue}),
save: assign({ savedValue: (ctx, e) => e.payload}),
}
});
optimisticInputMachine("Some ID")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment