Skip to content

Instantly share code, notes, and snippets.

@larister
Last active Apr 30, 2020
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
const canOpenUnsavedChanges = (context, event, { state }) => !state?.matches('open.hasSearch.searchResults.hasSearchResults.saveAsOpen');
const canOpenSaveAsSubDialog = (context, event, { state }) => !state?.matches('open.hasSearch.unsavedChanges.unsavedOpen');
const hasSearchResultsStates = {
initial: 'saveAsClosed',
states: {
saveAsClosed: {
on: {
TOGGLE_SAVE_AS: [
{
target: 'saveAsOpen',
cond: 'canOpenSaveAsSubDialog'
}
]
}
},
saveAsOpen: {
on: {
TOGGLE_SAVE_AS: 'saveAsClosed'
}
}
}
}
const hasSearchStates = {
type: 'parallel',
states: {
unsavedChanges: {
initial: 'unsavedClosed',
states: {
unsavedClosed: {
on: {
TOGGLE_UNSAVED: [
{
target: 'unsavedOpen',
cond: 'canOpenUnsavedChanges'
}
]
}
},
unsavedOpen: {
on: {
TOGGLE_UNSAVED: 'unsavedClosed'
}
}
}
},
searchResults: {
initial: 'noSearchResults',
states: {
noSearchResults: {
on: {
SUCCESSFUL_SEARCH: 'hasSearchResults'
}
},
hasSearchResults: {
on: {
UNSUCCESSFUL_SEARCH: 'noSearchResults'
},
...hasSearchResultsStates
}
}
}
}
}
const openStates = {
initial: 'noSearch',
states: {
noSearch: {
on: {
SEARCH_SPECIFIED: 'hasSearch'
}
},
hasSearch: {
on: {
SEARCH_CLEARED: 'noSearch'
},
...hasSearchStates
}
}
}
const findDialogMachine = Machine({
id: 'findDialog',
initial: 'closed',
states: {
closed: {
on: {
TOGGLE_FIND: 'open'
}
},
open: {
on: {
TOGGLE_FIND: 'closed'
},
...openStates
}
}
}, {
guards: {
canOpenUnsavedChanges, canOpenSaveAsSubDialog
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment