@modern-kit/react
Version:
1 lines • 3.37 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useFocus/index.ts"],"sourcesContent":["import { type RefObject, useCallback, useRef, useState } from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\n\ninterface UseFocusProps {\n onFocus?: (event: FocusEvent) => void;\n onBlur?: (event: FocusEvent) => void;\n}\n\ninterface UseFocusReturnType<T extends HTMLElement> {\n ref: RefObject<T>;\n isFocus: boolean;\n setFocus: () => void;\n}\n\n/**\n * @description 대상 요소를 기준으로 포커스 상태를 반환하고, 포커스 상태에 따른 액션을 정의할 수 있는 커스텀 훅입니다.\n *\n * @template T - HTML 엘리먼트 타입을 지정합니다.\n * @param {{\n * onFocus?: (event: FocusEvent) => void;\n * onBlur?: (event: FocusEvent) => void;\n * }} props - 포커스 상태에 따른 콜백 함수를 포함한 선택적 속성입니다.\n * - `onFocus`: 요소에 포커스가 들어올 때 호출되는 함수입니다. 기본값은 `noop` 함수입니다.\n * - `onBlur`: 요소에서 포커스가 빠져나갈 때 호출되는 함수입니다. 기본값은 `noop` 함수입니다.\n *\n * @returns {UseFocusReturnType<T>} `ref`, `isFocus`, `setFocus`를 포함한 객체를 반환합니다.\n * - `ref`: 추적할 대상 요소의 참조입니다.\n * - `isFocus`: 요소가 포커스 상태인지 여부를 나타내는 불리언 값입니다.\n * - `setFocus`: 요소에 포커스를 참 값으로 설정하는 함수입니다.\n *\n * @example\n * ```tsx\n * const { ref, isFocused, setFocus } = useFocus<HTMLInputElement>({\n * onFocus: () => console.log(\"focus\"),\n * onBlur: () => console.log(\"blur\")\n * });\n *\n * <input ref={ref} />\n * <button onClick={() => setFocus()}>focus trigger</button>\n * <div>{isFocused ? 'focus' : 'blur'}</div>\n * ```\n */\nexport function useFocus<T extends HTMLElement>({\n onFocus,\n onBlur,\n}: UseFocusProps = {}): UseFocusReturnType<T> {\n const [isFocus, setIsFocus] = useState(false);\n\n const ref = useRef<T>(null);\n\n const focusAction = (event: FocusEvent) => {\n setIsFocus(true);\n onFocus?.(event);\n };\n\n const blurAction = (event: FocusEvent) => {\n setIsFocus(false);\n onBlur?.(event);\n };\n\n const setFocus = useCallback(() => {\n if (!ref.current) return;\n\n ref.current.focus();\n setIsFocus(true);\n }, []);\n\n useEventListener(ref, 'focus', focusAction);\n useEventListener(ref, 'blur', blurAction);\n\n return { ref, isFocus, setFocus };\n}\n"],"names":["useState","useRef","useCallback","useEventListener"],"mappings":";;;;;;;;AA0CO,SAAS,QAAA,CAAgC;AAAA,EAC9C,OAAA;AAAA,EACA;AACF,CAAA,GAAmB,EAAC,EAA0B;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,GAAA,GAAMC,aAAU,IAAI,CAAA;AAE1B,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAsB;AACzC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,OAAA,GAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAsB;AACxC,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,MAAA,GAAS,KAAK,CAAA;AAAA,EAChB,CAAA;AAEA,EAAA,MAAM,QAAA,GAAWC,kBAAY,MAAM;AACjC,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAElB,IAAA,GAAA,CAAI,QAAQ,KAAA,EAAM;AAClB,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,sCAAA,CAAiB,GAAA,EAAK,SAAS,WAAW,CAAA;AAC1C,EAAAA,sCAAA,CAAiB,GAAA,EAAK,QAAQ,UAAU,CAAA;AAExC,EAAA,OAAO,EAAE,GAAA,EAAK,OAAA,EAAS,QAAA,EAAS;AAClC;;;;"}