Skip to content

Instantly share code, notes, and snippets.

@edygar
Created April 28, 2020 15:49
Show Gist options
  • Save edygar/e45c9bca676751385a377ac628bbf38e to your computer and use it in GitHub Desktop.
Save edygar/e45c9bca676751385a377ac628bbf38e 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 fetchMachine = Machine({
id: "autocomplete",
type: "parallel",
context: {
hits: [],
highlightedIndex: null
},
states: {
searchBox: {
initial: "idle",
states: {
idle: {
entry: ["reset", "hello"],
on: { INPUT: "searching" }
},
searching: {
entry: ["search"],
on: {
FETCHED: "success",
INPUT: "searching",
RESET_SEARCH: "idle"
}
},
success: {
entry: ["setHits", "openOrCloseDropdown"],
on: { INPUT: "searching", RESET_SEARCH: "idle" }
}
}
},
dropdown: {
initial: "closed",
states: {
closed: {
on: { OPEN: "opened" }
},
opened: {
on: { CLOSE: "closed" }
}
}
},
highlight: {
initial: "none",
states: {
none: {
entry: ["resetHighlightedIndex"],
on: {
HIGHLIGHT_NEXT: { target: "highlighted", cond: "hasHits" },
HIGHLIGHT_PREV: { target: "highlighted", cond: "hasHits" }
}
},
highlighted: {
entry: ["updateHighlightedIndex"],
on: {
HIGHLIGHT_NEXT: "highlighted",
HIGHLIGHT_PREV: "highlighted",
RESET_HIGHLIGHT: "none"
}
}
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment