@modern-kit/react
Version:
1 lines • 4.77 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useKeyDown/index.ts"],"sourcesContent":["import { usePreservedCallback } from '../usePreservedCallback';\nimport { RefObject, useEffect, useRef } from 'react';\nimport { KeyDownCallbackMap } from './useKeyDown.utils';\nimport { isFunction } from '@modern-kit/utils';\n\ninterface UseKeyDownProps {\n enabled?: boolean;\n keyDownCallbackMap?: Partial<KeyDownCallbackMap>;\n allKeyDownCallback?: (event: KeyboardEvent) => void;\n}\n\n/**\n * @description 특정 요소에 keydown 이벤트 리스너를 추가하고, 설정된 키보드 이벤트 콜백 함수를 호출하는 기능을 제공합니다.\n * `enabled`가 `true`일 때 이벤트가 활성화되며, `targetRef`가 할당되지 않은 경우 window 객체에 이벤트가 바인딩됩니다.\n *\n * @template T\n * @param {UseKeyDownProps} props - 옵션 객체입니다.\n * - `enabled`: 키보드 이벤트 리스너를 활성화할지 여부를 결정합니다. `true`일 경우 이벤트 리스너가 추가됩니다. 기본값은 `true` 입니다.\n * - `keyDownCallbackMap`: 특정 키와 해당 키가 눌렸을 때 호출될 콜백 함수들을 매핑한 객체입니다. 예를 들어, `{ 'Enter': handleEnterKey }`와 같이 설정할 수 있습니다.\n * - `allKeyDownCallback`: 모든 키가 눌렸을 때 호출될 공통 콜백 함수입니다. 이 함수가 설정되면 `keyDownCallbackMap`보다 우선 호출됩니다.\n *\n * @returns {React.RefObject<T | Window>} 키보드 이벤트 리스너가 부착된 요소의 참조 객체(Ref)를 반환합니다.\n *\n * * @example\n * // window에 이벤트 바인딩\n * useKeyDown<HTMLInputElement>({\n * enabled: true,\n * keyDownCallbackMap: {\n * Enter: (event) => console.log('Enter', event),\n * Escape: (event) => console.log('Escape', event),\n * ' ': (event) => console.log('Space', event),\n * },\n * });\n *\n * @example\n * ```tsx\n * // 특정 요소에 이벤트 바인딩\n * const { ref: inputRef } = useKeyDown<HTMLInputElement>({\n * enabled: true,\n * keyDownCallbackMap: {\n * Enter: (event) => console.log('Enter', event),\n * Escape: (event) => console.log('Escape', event),\n * ' ': (event) => console.log('Space', event),\n * },\n * });\n *\n * <input ref={inputRef} type=\"text\" />;\n * ```\n */\nexport function useKeyDown({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): { ref: RefObject<Window> };\n\nexport function useKeyDown<T extends HTMLElement>({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): { ref: RefObject<T> };\n\nexport function useKeyDown<T extends HTMLElement>({\n enabled = true,\n keyDownCallbackMap = {},\n allKeyDownCallback,\n}: UseKeyDownProps): { ref: RefObject<Window | T> } {\n const targetRef = useRef<T | null | Window>(null);\n\n const onKeyDown = usePreservedCallback((event: KeyboardEvent) => {\n event.stopPropagation();\n\n if (allKeyDownCallback) {\n allKeyDownCallback(event);\n return;\n }\n\n const key = event.key as keyof KeyDownCallbackMap;\n\n const keyDownCallback = keyDownCallbackMap[key];\n\n if (isFunction(keyDownCallback)) {\n keyDownCallback(event);\n }\n });\n\n useEffect(() => {\n if (!enabled) return;\n if (!targetRef.current) {\n targetRef.current = window;\n }\n\n const targetElement = targetRef.current;\n\n targetElement.addEventListener(\n 'keydown',\n onKeyDown as EventListenerOrEventListenerObject\n );\n\n return () =>\n targetElement.removeEventListener(\n 'keydown',\n onKeyDown as EventListenerOrEventListenerObject\n );\n }, [enabled, onKeyDown]);\n\n return { ref: targetRef };\n}\n"],"names":["useRef","usePreservedCallback","isFunction","useEffect"],"mappings":";;;;;;AA6DO,SAAS,UAAA,CAAkC;AAAA,EAChD,OAAA,GAAU,IAAA;AAAA,EACV,qBAAqB,EAAC;AAAA,EACtB;AACF,CAAA,EAAoD;AAClD,EAAA,MAAM,SAAA,GAAYA,aAA0B,IAAI,CAAA;AAEhD,EAAA,MAAM,SAAA,GAAYC,8CAAA,CAAqB,CAAC,KAAA,KAAyB;AAC/D,IAAA,KAAA,CAAM,eAAA,EAAgB;AAEtB,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,kBAAA,CAAmB,KAAK,CAAA;AACxB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,MAAM,KAAA,CAAM,GAAA;AAElB,IAAA,MAAM,eAAA,GAAkB,mBAAmB,GAAG,CAAA;AAE9C,IAAA,IAAIC,gBAAA,CAAW,eAAe,CAAA,EAAG;AAC/B,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACvB;AAAA,EACF,CAAC,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AACd,IAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACtB,MAAA,SAAA,CAAU,OAAA,GAAU,MAAA;AAAA,IACtB;AAEA,IAAA,MAAM,gBAAgB,SAAA,CAAU,OAAA;AAEhC,IAAA,aAAA,CAAc,gBAAA;AAAA,MACZ,SAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,OAAO,MACL,aAAA,CAAc,mBAAA;AAAA,MACZ,SAAA;AAAA,MACA;AAAA,KACF;AAAA,EACJ,CAAA,EAAG,CAAC,OAAA,EAAS,SAAS,CAAC,CAAA;AAEvB,EAAA,OAAO,EAAE,KAAK,SAAA,EAAU;AAC1B;;;;"}