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

machine.js

const IDLE = '기본';
const MOVE_MODE = '이동 모드';
const TYPE_MODE = '입력 모드';

const ENTER_FROM_MOVE_MODE = '이동모드에서 엔터';
const ENTER_FROM_TYPE_MODE = '입력모드에서 엔터';
const TAB = '탭';
const FOCUS = '포커스';
const BLUR = '블러';
const DOUBLE_CLICK = '더블클릭';
const ESC = 'ESC';
const ARROW_UP = '화살표-상';
const ARROW_DOWN = '화살표-하';
const ARROW_LEFT = '화살표-좌';
const ARROW_RIGHT = '화살표-우';
const ADD_ROW = '행 추가';
const DELETE_ROW = '행 삭제';
  
const receiptModeMachine = Machine({
  id: 'receiptModeMachine',
  initial: IDLE,
  states: {
    [IDLE]: {
      on: {
        [FOCUS]: MOVE_MODE,
        [DOUBLE_CLICK]: TYPE_MODE,
        [ADD_ROW]: {},
        [DELETE_ROW]: {}
      },
    },
    [TYPE_MODE]: {
      on: {
        [ESC]: MOVE_MODE,
        [BLUR]: IDLE,
        [FOCUS]: MOVE_MODE,
        [ENTER_FROM_TYPE_MODE]: {},
        [TAB]: {},
        [ADD_ROW]: IDLE,
        [DELETE_ROW]: IDLE
      },
    },
    [MOVE_MODE]: {
      on: {
        [ENTER_FROM_MOVE_MODE]: TYPE_MODE,
        [DOUBLE_CLICK]: TYPE_MODE,
        [BLUR]: IDLE,
        [FOCUS]: {},
        [ARROW_UP]: {},
        [ARROW_DOWN]: {},
        [ARROW_LEFT]: {},
        [ARROW_RIGHT]: {},
        [ADD_ROW]: IDLE,
        [DELETE_ROW]: IDLE
      },
    },
  },
});