Skip to content

Instantly share code, notes, and snippets.

@larister
Last active Mar 6, 2020
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
const toggleSubDialogOpen = assign({
subDialogOpen: context => !context.subDialogOpen
});
const allowOpenSubDialog = assign({
subDialogOpen: () => false
});
const canOpenSubDialog = context => !context.subDialogOpen;
const hasSearchStates = {
type: 'parallel',
entry: ['allowOpenSubDialog'],
states: {
unsavedChanges: {
initial: 'unsavedClosed',
states: {
unsavedClosed: {
on: {
TOGGLE_UNSAVED: [
{
target: 'unsavedOpen',
actions: 'toggleSubDialogOpen',
cond: 'canOpenSubDialog'
}
]
}
},
unsavedOpen: {
on: {
TOGGLE_UNSAVED: [
{
target: 'unsavedClosed',
actions: 'toggleSubDialogOpen'
}
],
TOGGLE_FIND: '#findDialog.closed'
}
}
}
},
saveAs: {
initial: 'saveAsClosed',
states: {
saveAsClosed: {
on: {
TOGGLE_SAVE_AS: [
{
target: 'saveAsOpen',
actions: 'toggleSubDialogOpen',
cond: 'canOpenSubDialog'
}
]
}
},
saveAsOpen: {
on: {
TOGGLE_SAVE_AS: [
{
target: 'saveAsClosed',
actions: 'toggleSubDialogOpen'
}
],
TOGGLE_FIND: '#findDialog.closed'
}
}
}
}
}
}
const openStates = {
initial: 'noSearch',
context: {
subDialogOpen: false
},
states: {
noSearch: {
on: {
SEARCH_SPECIFIED: 'hasSearch',
CLOSE: '#findDialog.closed'
}
},
hasSearch: {
on: {
SEARCH_CLEARED: {
target: 'noSearch'
}
},
...hasSearchStates
}
}
}
const findDialogMachine = Machine({
id: 'findDialog',
context: {
subDialogOpen: false
},
initial: 'closed',
states: {
closed: {
on: {
TOGGLE_FIND: 'open'
}
},
open: {
on: {
TOGGLE_FIND: 'closed'
},
...openStates
}
}
}, {
actions: {
toggleSubDialogOpen, allowOpenSubDialog
},
guards: {
canOpenSubDialog
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment