Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const venueFieldMachine = initialValue => Machine(
  {
    id: 'venueField',
    initial: 'init',
    context: {
      fieldValue: initialValue,
      fieldType: 'dropdown',
      fieldOptions: {
        name: 'eventVenueField',
        displayTitle: 'Event Venue',
        placeholder: '',
        shortDescription: 'Select a venue',
        longDescription: '',
        selections: [
          {
            key: 'meeting',
            title: 'Meeting'
          },
          {
            key: 'concert',
            title: 'Concert'
          },
          {
            key: 'movie',
            title: 'Movie'
          },
        ]
      }
    },
    on: {
      SELECT: [
        {
          target: 'empty',
          cond: (_ctx, { selection }) => !selection,
          actions: ['updateFieldValue']
        },
        {
          target: 'selected',
          actions: assign((_ctx, { selection }) => ({ fieldValue: selection ? String(selection) : '' }))
        }
      ]
    },
    states: {
      init: {
        on: {
          '': [
            {
              target: 'empty',
              cond: ({ fieldValue }) => !fieldValue
            },
            {
              target: 'selected'
            }
          ]
        }
      },
      empty: {
        entry: 'requestFieldSet'
      },
      selected: {
        entry: 'requestFieldSet'
      }
    }
  }, {
    actions: {
      updateFieldValue: assign((_ctx, { selection }) => ({ fieldValue: selection ? String(selection) : '' })),
      requestFieldSet: sendParent(({ fieldValue }) => {
        if (fieldValue.toLowerCase() === 'movie') {
          alert('isMovie')
          return 'SHOW_MOVIE_OPTIONS'
        } else {
          alert('Not a movie')
          return 'SHOW_REGULAR_OPTIONS'
        }
      })
    }
  }
);
venueFieldMachine('movie')