Skip to content

Instantly share code, notes, and snippets.

@baeharam
Last active July 24, 2020 08:51
Show Gist options
  • Save baeharam/00975792b466a850460daff7b2417ad1 to your computer and use it in GitHub Desktop.
Save baeharam/00975792b466a850460daff7b2417ad1 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const IDLE = '초기';
const INPUT_FOCUS = '인풋 포커스';
const SEARCH_PENDING = '검색 로딩';
const SEARCH_NOTHING_CAN_CREATE = '검색결과 없음, 생성가능';
const SEARCH_NOTHING_CANNOT_CREATE = '검색결과 없음, 생성불가';
const SEARCH_RESULT_CAN_CREATE = '검색결과 있음, 생성 가능';
const SEARCH_RESULT_CANNOT_CREATE = '검색결과 있음, 생성 가능';
const SEARCH_FAILURE = '검색실패'
// Events
const FOCUS = '포커스';
const SEARCH = '검색';
const BLUR = '블러';
const ENTER = '엔터';
const ESCAPE = 'ESC';
const ARROW_UP = '위쪽 화살표';
const ARROW_DOWN = '아래쪽 화살표';
const SELECT_ITEM = '항목 선택';
const CREATE_ITEM = '항목 생성';
// Guards
const isResultCanCreate = () => {};
const isResultCannotCreate = () => {};
const isNothingCanCreate = () => {};
const isNothingCannotCreate = () => {}
const inputChangeService = () => {}
const searchBoxMachine = Machine(
{
id: 'searchBoxMachine',
initial: IDLE,
context: {},
states: {
[IDLE]: {
on: {
[FOCUS]: INPUT_FOCUS,
},
},
[INPUT_FOCUS]: {
on: {
[SEARCH]: {
target: SEARCH_PENDING
},
},
},
[SEARCH_PENDING]: {
invoke: {
id: 'fetchSearchResult',
src: 'fetchSearchResult',
onDone: [
{
target: SEARCH_RESULT_CAN_CREATE,
cond: isResultCanCreate
},
{
target: SEARCH_RESULT_CANNOT_CREATE,
cond: isResultCannotCreate
},
{
target: SEARCH_NOTHING_CAN_CREATE,
cond: isNothingCanCreate
},
{
target: SEARCH_NOTHING_CANNOT_CREATE,
cond: isNothingCannotCreate
},
],
},
on: {
[SEARCH]: {
target: INPUT_FOCUS,
},
},
},
[SEARCH_RESULT_CAN_CREATE]: {},
[SEARCH_RESULT_CANNOT_CREATE]: {},
[SEARCH_NOTHING_CAN_CREATE]: {},
[SEARCH_NOTHING_CANNOT_CREATE]: {},
},
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment