@modern-kit/react
Version:
1 lines • 5.09 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useStateWithHistory/index.ts"],"sourcesContent":["import { isFunction } from '@modern-kit/utils';\nimport { useCallback, useRef, useState } from 'react';\nimport { at } from '@modern-kit/utils';\n\ninterface UseStateWithHistoryReturn<T> {\n state: T;\n setState: (newState: T | ((prevState: T) => T)) => void;\n back: () => void;\n forward: () => void;\n goToIndex: (index: number) => void;\n}\n\n/**\n * @description 상태와 상태 변경 이력을 관리하는 훅입니다.\n *\n * 상태 변경 시마다 이력이 저장되며, 상태 히스토리를 이전(`back`)과 다음(`forward`)으로 이동할 수 있습니다. 또한 특정 시점의 상태로 이동(`goToIndex`)할 수 있으며, 저장되는 이력의 최대 개수(`capacity`)를 제한할 수 있습니다.\n *\n * @template T - 상태의 타입\n * @param {T | (() => T)} initialValue - 초기 상태 값 또는 초기 상태를 반환하는 함수\n * @param {number} [capacity=10] - 상태 변경 이력의 최대 저장 개수. 기본값은 10\n * @returns {UseStateWithHistoryReturn<T>} 상태 관리를 위한 객체\n * - `state`: 현재 상태 값\n * - `setState`: 상태 히스토리에 상태를 추가하고 새로운 상태로 업데이트합니다.\n * - `back`: 상태 히스토리에서 이전 상태로 되돌리는 함수\n * - `forward`: 상태 히스토리에서 다음 상태로 이동하는 함수\n * - `goToIndex`: 상태 히스토리에서 특정 인덱스의 상태로 이동하는 함수\n *\n * @example\n * const { state, setState, back, forward, goToIndex } = useStateWithHistory(0, 5);\n *\n * setState(1); // history: [0, 1], state: 1\n * setState(2); // history: [0, 1, 2], state: 2\n * back(); // history: [0, 1, 2], state: 1\n * forward(); // history: [0, 1, 2], state: 2\n * goToIndex(0); // history: [0, 1, 2], state: 0\n */\nexport function useStateWithHistory<T>(\n initialValue: T | (() => T),\n capacity: number = 10\n): UseStateWithHistoryReturn<T> {\n const initialValueToUse = isFunction(initialValue)\n ? initialValue()\n : initialValue;\n const [state, innerSetState] = useState<T>(initialValueToUse);\n const history = useRef<T[]>([initialValueToUse]);\n const pointer = useRef<number>(0);\n\n // 상태 변경\n const setState = useCallback(\n (newState: T | ((prevState: T) => T)) => {\n const newStateToUse = isFunction(newState) ? newState(state) : newState;\n\n if (history.current.length === capacity) {\n history.current.shift();\n }\n history.current.push(newStateToUse);\n pointer.current = history.current.length - 1;\n innerSetState(newStateToUse);\n },\n [capacity, state]\n );\n\n const back = useCallback(() => {\n if (pointer.current < 1) {\n return;\n }\n pointer.current--;\n innerSetState(history.current[pointer.current]);\n }, []);\n\n const forward = useCallback(() => {\n if (pointer.current >= history.current.length - 1) {\n return;\n }\n pointer.current++;\n innerSetState(history.current[pointer.current]);\n }, []);\n\n const goToIndex = useCallback((index: number) => {\n if (at(history.current, index) == null) {\n return;\n }\n pointer.current = index;\n innerSetState(at(history.current, pointer.current) as T);\n }, []);\n\n return { state, setState, forward, back, goToIndex };\n}\n"],"names":["isFunction","useState","useRef","useCallback","at"],"mappings":";;;;;AAoCO,SAAS,mBAAA,CACd,YAAA,EACA,QAAA,GAAmB,EAAA,EACW;AAC9B,EAAA,MAAM,iBAAA,GAAoBA,gBAAA,CAAW,YAAY,CAAA,GAC7C,cAAa,GACb,YAAA;AACJ,EAAA,MAAM,CAAC,KAAA,EAAO,aAAa,CAAA,GAAIC,eAAY,iBAAiB,CAAA;AAC5D,EAAA,MAAM,OAAA,GAAUC,YAAA,CAAY,CAAC,iBAAiB,CAAC,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAUA,aAAe,CAAC,CAAA;AAGhC,EAAA,MAAM,QAAA,GAAWC,iBAAA;AAAA,IACf,CAAC,QAAA,KAAwC;AACvC,MAAA,MAAM,gBAAgBH,gBAAA,CAAW,QAAQ,CAAA,GAAI,QAAA,CAAS,KAAK,CAAA,GAAI,QAAA;AAE/D,MAAA,IAAI,OAAA,CAAQ,OAAA,CAAQ,MAAA,KAAW,QAAA,EAAU;AACvC,QAAA,OAAA,CAAQ,QAAQ,KAAA,EAAM;AAAA,MACxB;AACA,MAAA,OAAA,CAAQ,OAAA,CAAQ,KAAK,aAAa,CAAA;AAClC,MAAA,OAAA,CAAQ,OAAA,GAAU,OAAA,CAAQ,OAAA,CAAQ,MAAA,GAAS,CAAA;AAC3C,MAAA,aAAA,CAAc,aAAa,CAAA;AAAA,IAC7B,CAAA;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,GAClB;AAEA,EAAA,MAAM,IAAA,GAAOG,kBAAY,MAAM;AAC7B,IAAA,IAAI,OAAA,CAAQ,UAAU,CAAA,EAAG;AACvB,MAAA;AAAA,IACF;AACA,IAAA,OAAA,CAAQ,OAAA,EAAA;AACR,IAAA,aAAA,CAAc,OAAA,CAAQ,OAAA,CAAQ,OAAA,CAAQ,OAAO,CAAC,CAAA;AAAA,EAChD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,OAAA,GAAUA,kBAAY,MAAM;AAChC,IAAA,IAAI,OAAA,CAAQ,OAAA,IAAW,OAAA,CAAQ,OAAA,CAAQ,SAAS,CAAA,EAAG;AACjD,MAAA;AAAA,IACF;AACA,IAAA,OAAA,CAAQ,OAAA,EAAA;AACR,IAAA,aAAA,CAAc,OAAA,CAAQ,OAAA,CAAQ,OAAA,CAAQ,OAAO,CAAC,CAAA;AAAA,EAChD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,SAAA,GAAYA,iBAAA,CAAY,CAAC,KAAA,KAAkB;AAC/C,IAAA,IAAIC,QAAA,CAAG,OAAA,CAAQ,OAAA,EAAS,KAAK,KAAK,IAAA,EAAM;AACtC,MAAA;AAAA,IACF;AACA,IAAA,OAAA,CAAQ,OAAA,GAAU,KAAA;AAClB,IAAA,aAAA,CAAcA,QAAA,CAAG,OAAA,CAAQ,OAAA,EAAS,OAAA,CAAQ,OAAO,CAAM,CAAA;AAAA,EACzD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,KAAA,EAAO,QAAA,EAAU,OAAA,EAAS,MAAM,SAAA,EAAU;AACrD;;;;"}