Skip to content

Instantly share code, notes, and snippets.

@raunofreiberg
Created January 21, 2021 16:02
Show Gist options
  • Save raunofreiberg/9a1442c609975e043b14236b3d92a561 to your computer and use it in GitHub Desktop.
Save raunofreiberg/9a1442c609975e043b14236b3d92a561 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const CHANGE_ACTION = {
target: 'FILTERING',
actions: assign({
selectedIndex: 0, // Highlight the first match
inputValue: (_, event) => event.inputValue
})
}
const NAVIGATE_ACTION = {
target: 'NAVIGATING',
actions: assign({
selectedIndex: (_, event) => event.selectedIndex
})
}
const SELECT_ACTION = {
target: 'IDLE',
actions: assign({
selectedValue: (_, event) => event.selectedValue
})
}
const machine = Machine({
id: 'combobox',
initial: 'IDLE',
context: {
inputValue: '',
selectedValue: '',
selectedIndex: 0
},
states: {
IDLE: {
entry: assign({ selectedIndex: 0 }),
on: {
OPEN: 'INTERACTING',
CHANGE: CHANGE_ACTION,
RESET: {
target: 'IDLE',
actions: assign({
inputValue: (_, event) => event.inputValue
})
},
CLEAR: {
target: 'IDLE',
actions: assign({
inputValue: '',
selectedValue: ''
})
}
}
},
INTERACTING: {
on: {
CLOSE: 'IDLE',
CHANGE: CHANGE_ACTION,
SELECT: SELECT_ACTION,
NAVIGATE: {
...NAVIGATE_ACTION,
target: 'INTERACTING'
}
}
},
NAVIGATING: {
on: {
CLOSE: 'IDLE',
CHANGE: CHANGE_ACTION,
SELECT: SELECT_ACTION,
NAVIGATE: NAVIGATE_ACTION
}
},
FILTERING: {
on: {
CLOSE: 'IDLE',
CHANGE: CHANGE_ACTION,
SELECT: SELECT_ACTION,
NAVIGATE: NAVIGATE_ACTION
}
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment