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 jllSettingMachine = Machine({
    id: 'JllSetting',
    initial: 'unchanged',
    context: {
      original: {
        threshold: 10,
        duration: 0,
        occurance: 0  
      },
      threshold: 10,
      duration: 0,
      occurance: 0
    },
    states: {
      unchanged: {
        on: {
          THRESHOLD_CHANGE: {
            target: 'changed',
            cond: 'newThresholdValue',
            actions: ['updateThreshold']
          },
          DURATION_CHANGE: {
            target: 'changed',
            cond: 'newDurationValue',
            actions: ['updateDuration']
          },
          OCCURANCE_CHANGE: {
            target: 'changed',
            cond: 'newOccuranceValue',
            actions: ['updateOccurance']
          }
        }
      },
      changed: {
        on: {
          THRESHOLD_CHANGE: [{
            target: 'unchanged',
            cond: 'resetByThreshold',
            actions: ['updateThreshold']
          }, {
            target: 'changed',
            actions: ['updateThreshold']
          }],
          DURATION_CHANGE: [{
            target: 'unchanged',
            cond: 'resetByDuration',
            actions: ['updateDuration']
          }, {
            target: 'changed',
            actions: ['updateDuration']
          }],
          OCCURANCE_CHANGE: [{
            target: 'unchanged',
            cond: 'resetByOccurance',
            actions: ['updateOccurance']
          }, {
            target: 'changed',
            actions: ['updateOccurance']
          }]
        }
      },
    }
  },{
    actions: {
      updateThreshold: assign({
        threshold: (context, event) => event.value
      }),
      updateDuration: assign({
        duration: (context, event) => event.value
      }),
      updateOccurance: assign({
        occurance: (context, event) => event.value
      })
    },
    guards: {
      newThresholdValue: (ctx, evt) => ctx.original.threshold !== evt.value,
      newDurationValue: (ctx, evt) => ctx.original.duration !== evt.value,
      newOccuranceValue: (ctx, evt) => ctx.original.occurance !== evt.value,
      resetByThreshold: (ctx, evt) => ctx.original.threshold === evt.value && ctx.original.duration === ctx.duration && ctx.original.occurance === ctx.occurance,
      resetByDuration: (ctx, evt) => ctx.original.duration === evt.value && ctx.original.threshold === ctx.threshold && ctx.original.occurance === ctx.occurance,
      resetByOccurance: (ctx, evt) => ctx.original.occurance === evt.value && ctx.original.threshold === ctx.threshold && ctx.original.duration === ctx.duration
    }
  });