Skip to content

Instantly share code, notes, and snippets.

@larister
Created March 6, 2020 15:58
Show Gist options
  • Save larister/ea9fd05bcc70e58049cbabaa40299765 to your computer and use it in GitHub Desktop.
Save larister/ea9fd05bcc70e58049cbabaa40299765 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const toggleSubDialogOpen = assign({
subDialogOpen: context => !context.subDialogOpen
});
const canOpenSubDialog = context => !context.subDialogOpen;
const hasSearchStates = {
type: 'parallel',
states: {
unsavedChanges: {
initial: 'unsavedClosed',
states: {
unsavedClosed: {
on: {
TOGGLE_UNSAVED: [
{
target: 'unsavedOpen',
actions: 'toggleSubDialogOpen',
cond: 'canOpenSubDialog'
}
]
}
},
unsavedOpen: {
on: {
TOGGLE_UNSAVED: [
{
target: 'unsavedClosed',
actions: 'toggleSubDialogOpen',
cond: 'canOpenSubDialog'
}
]
}
}
}
},
saveAs: {
initial: 'saveAsClosed',
states: {
saveAsClosed: {
on: {
TOGGLE_SAVE_AS: [
{
target: 'saveAsOpen',
actions: 'toggleSubDialogOpen'
}
]
}
},
saveAsOpen: {
on: {
TOGGLE_SAVE_AS: [
{
target: 'saveAsClosed',
actions: 'toggleSubDialogOpen'
}
]
}
}
}
}
}
}
const openStates = {
initial: 'noSearch',
context: {
subDialogOpen: false
},
states: {
noSearch: {
on: {
SEARCH_SPECIFIED: 'hasSearch',
CLOSE: '#closed'
}
},
hasSearch: {
on: {
SEARCH_CLEARED: 'noSearch'
},
...hasSearchStates
}
}
}
const findDialogMachine = Machine({
id: 'findDialog',
key: 'findDialog',
initial: 'closed',
states: {
closed: {
id: 'closed',
on: {
TOGGLE: 'open'
}
},
open: {
on: {
TOGGLE: 'closed'
},
...openStates
}
}
}, {
actions: {
toggleSubDialogOpen
},
guards: {
canOpenSubDialog
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment