Last active
July 27, 2021 19:37
-
-
Save jonboiser/e98d71fa97dc36b2e18b2689033ac9a3 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // - XState (all XState exports) | |
| const enterConfirmationStage = (context, event) => { | |
| context.atConfirmationStage = true; | |
| console.log(context) | |
| }; | |
| const exitConfirmationStage = (context, event) => { | |
| context.atConfirmationStage = false; | |
| }; | |
| const inConfirmation = (context, event) => { | |
| return context.atConfirmationStage; | |
| }; | |
| const notInConfirmation = (context, event) => { | |
| return !context.atConfirmationStage | |
| } | |
| const NAME_KIT = 'NameKit'; | |
| const SELECT_OBJECTS = 'SelectObjects'; | |
| const CLICK_NEXT = 'CLICK_NEXT' | |
| const fetchMachine = Machine({ | |
| id: 'create_kit', | |
| initial: 'NameKit', | |
| context: { | |
| // Use this to modify other pages once we are at the | |
| // confirmation page | |
| atConfirmationStage: false, | |
| }, | |
| states: { | |
| NameKit: { | |
| on: { | |
| CLICK_NEXT: [{ | |
| target: 'ConfirmKit', | |
| cond: inConfirmation, | |
| }, | |
| { target: 'SelectObjects', | |
| cond: notInConfirmation | |
| } | |
| ] | |
| }, | |
| }, | |
| SelectObjects: { | |
| initial: 'ViewObjects', | |
| states: { | |
| ViewObjects: { | |
| on: { | |
| CLICK_ADD_OBJECT: 'AddObject', | |
| CLICK_OBJECT_CARD: '#ViewObjectDetails' | |
| } | |
| }, | |
| AddObject: { | |
| initial: 'SearchObjects', | |
| states: { | |
| SearchObjects: { | |
| on: { | |
| CLICK_PREV: 'Exit', | |
| CLICK_OBJECT_CARD: 'ViewObjectBeforeAdding', | |
| } | |
| }, | |
| ViewObjectBeforeAdding: { | |
| on: { | |
| CLICK_PREV: 'SearchObjects', | |
| CLICK_ADD_TO_KIT: 'Exit', | |
| } | |
| }, | |
| Exit: { | |
| type: 'final' | |
| } | |
| }, | |
| onDone: 'ViewObjects' | |
| }, | |
| // ViewObjectDetails: { | |
| // on: { | |
| // CLICK_PREV: [ | |
| // { target: 'ViewObjects', cond: notInConfirmation }, | |
| // {target :'#ConfirmKit', cond: inConfirmation, internal: false} | |
| // ], | |
| // // CLICK_PREV: 'ViewObjects', | |
| // CLICK_REMOVE_OBJECT: [ | |
| // {target: 'ViewObjects', cond: notInConfirmation }, | |
| // { target: '#ConfirmKit', cond: inConfirmation} | |
| // ] | |
| // } | |
| // } | |
| }, | |
| on: { | |
| CLICK_NEXT: 'ConfirmKit', | |
| CLICK_PREV: [ | |
| { target: 'NameKit', cond: notInConfirmation }, | |
| ] | |
| } | |
| }, | |
| ViewObjectDetails: { | |
| id: 'ViewObjectDetails', | |
| on: { | |
| CLICK_PREV: [ | |
| { target: 'SelectObjects', cond: notInConfirmation }, | |
| {target :'#ConfirmKit', cond: inConfirmation, internal: false} | |
| ], | |
| // CLICK_PREV: 'ViewObjects', | |
| CLICK_REMOVE_OBJECT: [ | |
| {target: 'SelectObjects', cond: notInConfirmation }, | |
| { target: '#ConfirmKit', cond: inConfirmation} | |
| ] | |
| } | |
| }, | |
| ConfirmKit: { | |
| id: 'ConfirmKit', | |
| entry: [enterConfirmationStage], | |
| // initial: 'ViewKit', | |
| states: { | |
| // ViewKit: {} | |
| }, | |
| on: { | |
| CLICK_PREV: 'SelectObjects', | |
| CLICK_CREATE_KIT: 'ConfirmationPage', | |
| // Previous button is removed | |
| // Next button is "Update" | |
| CLICK_EDIT_NAME: 'NameKit', | |
| // Previous button is removed | |
| // Next button is "Update" | |
| CLICK_EDIT_OBJECTS: 'SelectObjects', | |
| CLICK_OBJECT_CARD: '#ViewObjectDetails' | |
| } | |
| }, | |
| ConfirmationPage: { | |
| type: 'final', | |
| }, | |
| }, | |
| actions: { | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment