@modern-kit/react
Version:
1 lines • 6.01 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useInputState/index.ts"],"sourcesContent":["import { ChangeEvent, useCallback, useState } from 'react';\nimport { isString } from '@modern-kit/utils';\n\n/**\n * @description 입력 필드의 상태를 관리하는 커스텀 훅(초기값 존재)\n *\n * 단일 입력 필드와 다중 입력 필드를 지원합니다.\n * - 다중 입력 필드는 객체 형태로 입력 필드의 `name` 속성을 `key`로 사용합니다.\n *\n * @template T - 입력값의 타입\n * @param {T} initialValue - 초기값\n * @returns {{\n * value: T;\n * onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n * reset: () => void;\n * }} 입력 상태와 관련된 객체\n * - `value`: 현재 입력값\n * - `onChange`: 입력값 변경 핸들러\n * - `reset`: 입력값을 초기값으로 재설정하는 함수\n *\n * @example\n * ```tsx\n * const { value, onChange, reset } = useInputState('');\n * // const value: string\n *\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value} />\n * ```\n *\n * @example\n * ```tsx\n * const { value, onChange, reset } = useInputState({ test: '' });\n * // const value: { test: string }\n *\n * // name 속성 필수\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value.test} />\n * ```\n */\nexport function useInputState<T>(initialValue: T): {\n value: T;\n onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n reset: () => void;\n};\n\n/**\n * @description 입력 필드의 상태를 관리하는 커스텀 훅(초기값 없음)\n *\n * 단일 입력 필드와 다중 입력 필드를 지원합니다.\n * - 다중 입력 필드는 객체 형태로 입력 필드의 `name` 속성을 `key`로 사용합니다.\n *\n * @template T - 입력값의 타입\n * @returns {{\n * value: T | undefined;\n * onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n * reset: () => void;\n * }} 입력 상태와 관련된 객체\n * - `value`: 현재 입력값\n * - `onChange`: 입력값 변경 핸들러\n * - `reset`: 입력값을 초기값으로 재설정하는 함수\n *\n * @example\n * ```tsx\n * const { value, onChange, reset } = useInputState<string>();\n * // const value: string | undefined\n *\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value} />\n * ```\n *\n * @example\n * ```tsx\n * const { value, onChange, reset } = useInputState<{ test: string }>();\n * // const value: { test: string } | undefined\n *\n * // name 속성 필수\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value?.test || ''} />\n * ```\n */\nexport function useInputState<T>(): {\n value: T | undefined;\n onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n reset: () => void;\n};\n\n/**\n * @description 입력 필드의 상태를 관리하는 커스텀 훅\n *\n * 단일 입력 필드와 다중 입력 필드를 지원합니다.\n * - 다중 입력 필드는 객체 형태로 입력 필드의 `name` 속성을 `key`로 사용합니다.\n *\n * @template T - 입력값의 타입\n * @param {T | undefined} initialValue - 초기값\n * @returns {{\n * value: T | undefined;\n * onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n * reset: () => void;\n * }} 입력 상태와 관련된 객체\n * - `value`: 현재 입력값\n * - `onChange`: 입력값 변경 핸들러\n * - `reset`: 입력값을 초기값으로 재설정하는 함수\n *\n * @example\n * ```tsx\n * // 문자열 초기값 없음\n * const { value, onChange, reset } = useInputState<string>();\n * // const value: string | undefined\n *\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value} />\n *\n * // 문자열 초기값 존재\n * const { value, onChange, reset } = useInputState<string>('');\n * // const value: string\n *\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value} />\n * ```\n *\n * @example\n * ```tsx\n * // 객체 초기값 없음\n * const { value, onChange, reset } = useInputState<{ test: string }>();\n * // const value: { test: string } | undefined\n *\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value?.test || ''} />\n *\n * // 객체 초기값 존재\n * const { value, onChange, reset } = useInputState<{ test: string }>({ test: '' });\n * // const value: { test: string }\n *\n * <input type=\"text\" name=\"test\" onChange={onChange} value={value.test} />\n * ```\n */\nexport function useInputState<T>(initialValue?: T): {\n value: T | undefined;\n onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n reset: () => void;\n} {\n const [value, setValue] = useState<T | undefined>(initialValue);\n\n const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target) {\n throw new Error('이벤트 타겟 요소가 정의되지 않았습니다');\n }\n\n const { name, value } = e.target;\n\n setValue((prev: T | undefined) => {\n if (isString(prev)) {\n return value as T;\n }\n\n if (!name) return prev;\n\n return {\n ...prev,\n [name]: value,\n } as T;\n });\n }, []);\n\n const reset = useCallback(() => {\n setValue(initialValue);\n }, [initialValue]);\n\n return { value, onChange, reset };\n}\n"],"names":["value"],"mappings":";;;AAiIO,SAAS,cAAiB,YAAA,EAI/B;AACA,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAwB,YAAY,CAAA;AAE9D,EAAA,MAAM,QAAA,GAAW,WAAA,CAAY,CAAC,CAAA,KAAqC;AACjE,IAAA,IAAI,CAAC,EAAE,MAAA,EAAQ;AACb,MAAA,MAAM,IAAI,MAAM,4GAAuB,CAAA;AAAA,IACzC;AAEA,IAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAAA,MAAAA,KAAU,CAAA,CAAE,MAAA;AAE1B,IAAA,QAAA,CAAS,CAAC,IAAA,KAAwB;AAChC,MAAA,IAAI,QAAA,CAAS,IAAI,CAAA,EAAG;AAClB,QAAA,OAAOA,MAAAA;AAAA,MACT;AAEA,MAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAElB,MAAA,OAAO;AAAA,QACL,GAAG,IAAA;AAAA,QACH,CAAC,IAAI,GAAGA;AAAA,OACV;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,QAAA,CAAS,YAAY,CAAA;AAAA,EACvB,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,OAAO,EAAE,KAAA,EAAO,QAAA,EAAU,KAAA,EAAM;AAClC;;;;"}