Skip to content

Instantly share code, notes, and snippets.

@larister

larister/machine.js

Last active April 30, 2020 13:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save larister/493e4d9dba844f80f9d6ce1b9854324d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save larister/493e4d9dba844f80f9d6ce1b9854324d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Alastair Lockie revised this gist Apr 30, 2020. No changes.
  2. Alastair Lockie revised this gist Apr 30, 2020. 1 changed file with 89 additions and 85 deletions.
    174 changes: 89 additions & 85 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,102 +1,106 @@
    const canOpenUnsavedChanges = (context, event, { state }) => !state?.matches('open.hasSearch.saveAs.saveAsOpen');
    const canOpenUnsavedChanges = (context, event, { state }) => !state?.matches('open.hasSearch.searchResults.hasSearchResults.saveAsOpen');

    const canOpenSaveAsSubDialog = (context, event, { state }) => !state?.matches('open.hasSearch.unsavedChanges.unsavedOpen');

    const hasSearchStates = {
    type: 'parallel',
    states: {
    unsavedChanges: {
    initial: 'unsavedClosed',
    states: {
    unsavedClosed: {
    on: {
    TOGGLE_UNSAVED: [
    {
    target: 'unsavedOpen',
    cond: 'canOpenUnsavedChanges'
    }
    ]
    }
    },
    unsavedOpen: {
    on: {
    TOGGLE_UNSAVED: [
    {
    target: 'unsavedClosed',
    actions: 'toggleSubDialogOpen'
    }
    ],
    TOGGLE_FIND: '#findDialog.closed'
    }
    }
    }
    },
    saveAs: {
    initial: 'saveAsClosed',
    states: {
    saveAsClosed: {
    on: {
    TOGGLE_SAVE_AS: [
    {
    target: 'saveAsOpen',
    cond: 'canOpenSaveAsSubDialog'
    }
    ]
    }
    },
    saveAsOpen: {
    on: {
    TOGGLE_SAVE_AS: [
    {
    target: 'saveAsClosed',
    }
    ],
    TOGGLE_FIND: '#findDialog.closed'
    }

    const hasSearchResultsStates = {
    initial: 'saveAsClosed',
    states: {
    saveAsClosed: {
    on: {
    TOGGLE_SAVE_AS: [
    {
    target: 'saveAsOpen',
    cond: 'canOpenSaveAsSubDialog'
    }
    }
    ]
    }
    },
    saveAsOpen: {
    on: {
    TOGGLE_SAVE_AS: 'saveAsClosed'
    }
    }
    }
    }

    const openStates = {
    initial: 'noSearch',
    states: {
    noSearch: {
    on: {
    SEARCH_SPECIFIED: 'hasSearch'
    const hasSearchStates = {
    type: 'parallel',
    states: {
    unsavedChanges: {
    initial: 'unsavedClosed',
    states: {
    unsavedClosed: {
    on: {
    TOGGLE_UNSAVED: [
    {
    target: 'unsavedOpen',
    cond: 'canOpenUnsavedChanges'
    }
    ]
    }
    },
    unsavedOpen: {
    on: {
    TOGGLE_UNSAVED: 'unsavedClosed'
    }
    }
    },
    hasSearch: {
    on: {
    SEARCH_CLEARED: {
    target: 'noSearch'
    }
    },
    searchResults: {
    initial: 'noSearchResults',
    states: {
    noSearchResults: {
    on: {
    SUCCESSFUL_SEARCH: 'hasSearchResults'
    }
    },
    ...hasSearchStates
    hasSearchResults: {
    on: {
    UNSUCCESSFUL_SEARCH: 'noSearchResults'
    },
    ...hasSearchResultsStates
    }
    }
    }
    }

    const findDialogMachine = Machine({
    id: 'findDialog',
    initial: 'closed',
    states: {
    closed: {
    on: {
    TOGGLE_FIND: 'open'
    }
    },
    open: {
    on: {
    TOGGLE_FIND: 'closed'
    },
    ...openStates
    }

    const openStates = {
    initial: 'noSearch',
    states: {
    noSearch: {
    on: {
    SEARCH_SPECIFIED: 'hasSearch'
    }
    },
    hasSearch: {
    on: {
    SEARCH_CLEARED: 'noSearch'
    },
    ...hasSearchStates
    }
    }, {
    guards: {
    canOpenUnsavedChanges, canOpenSaveAsSubDialog
    }
    }

    const findDialogMachine = Machine({
    id: 'findDialog',
    initial: 'closed',
    states: {
    closed: {
    on: {
    TOGGLE_FIND: 'open'
    }
    },
    open: {
    on: {
    TOGGLE_FIND: 'closed'
    },
    ...openStates
    }
    });
    }
    }, {
    guards: {
    canOpenUnsavedChanges, canOpenSaveAsSubDialog
    }
    });

  3. Alastair Lockie revised this gist Apr 30, 2020. 1 changed file with 7 additions and 13 deletions.
    20 changes: 7 additions & 13 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,6 @@
    const canOpenSubDialog = (context, { type }, { state }) => {
    if (type === 'TOGGLE_UNSAVED') {
    return !state?.matches('open.hasSearch.saveAs.saveAsOpen');
    } else if (type === 'TOGGLE_SAVE_AS') {
    return !state?.matches('open.hasSearch.unsavedChanges.unsavedOpen');
    }
    return true;
    };
    const canOpenUnsavedChanges = (context, event, { state }) => !state?.matches('open.hasSearch.saveAs.saveAsOpen');

    const canOpenSaveAsSubDialog = (context, event, { state }) => !state?.matches('open.hasSearch.unsavedChanges.unsavedOpen');

    const hasSearchStates = {
    type: 'parallel',
    @@ -18,7 +13,7 @@ const canOpenSubDialog = (context, { type }, { state }) => {
    TOGGLE_UNSAVED: [
    {
    target: 'unsavedOpen',
    cond: 'canOpenSubDialog'
    cond: 'canOpenUnsavedChanges'
    }
    ]
    }
    @@ -44,7 +39,7 @@ const canOpenSubDialog = (context, { type }, { state }) => {
    TOGGLE_SAVE_AS: [
    {
    target: 'saveAsOpen',
    cond: 'canOpenSubDialog'
    cond: 'canOpenSaveAsSubDialog'
    }
    ]
    }
    @@ -69,8 +64,7 @@ const canOpenSubDialog = (context, { type }, { state }) => {
    states: {
    noSearch: {
    on: {
    SEARCH_SPECIFIED: 'hasSearch',
    CLOSE: '#findDialog.closed'
    SEARCH_SPECIFIED: 'hasSearch'
    }
    },
    hasSearch: {
    @@ -102,7 +96,7 @@ const canOpenSubDialog = (context, { type }, { state }) => {
    }
    }, {
    guards: {
    canOpenSubDialog
    canOpenUnsavedChanges, canOpenSaveAsSubDialog
    }
    });

  4. Alastair Lockie created this gist Apr 30, 2020.
    108 changes: 108 additions & 0 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    const canOpenSubDialog = (context, { type }, { state }) => {
    if (type === 'TOGGLE_UNSAVED') {
    return !state?.matches('open.hasSearch.saveAs.saveAsOpen');
    } else if (type === 'TOGGLE_SAVE_AS') {
    return !state?.matches('open.hasSearch.unsavedChanges.unsavedOpen');
    }
    return true;
    };

    const hasSearchStates = {
    type: 'parallel',
    states: {
    unsavedChanges: {
    initial: 'unsavedClosed',
    states: {
    unsavedClosed: {
    on: {
    TOGGLE_UNSAVED: [
    {
    target: 'unsavedOpen',
    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',
    cond: 'canOpenSubDialog'
    }
    ]
    }
    },
    saveAsOpen: {
    on: {
    TOGGLE_SAVE_AS: [
    {
    target: 'saveAsClosed',
    }
    ],
    TOGGLE_FIND: '#findDialog.closed'
    }
    }
    }
    }
    }
    }

    const openStates = {
    initial: 'noSearch',
    states: {
    noSearch: {
    on: {
    SEARCH_SPECIFIED: 'hasSearch',
    CLOSE: '#findDialog.closed'
    }
    },
    hasSearch: {
    on: {
    SEARCH_CLEARED: {
    target: 'noSearch'
    }
    },
    ...hasSearchStates
    }
    }
    }

    const findDialogMachine = Machine({
    id: 'findDialog',
    initial: 'closed',
    states: {
    closed: {
    on: {
    TOGGLE_FIND: 'open'
    }
    },
    open: {
    on: {
    TOGGLE_FIND: 'closed'
    },
    ...openStates
    }
    }
    }, {
    guards: {
    canOpenSubDialog
    }
    });