@modern-kit/react
Version:
1 lines • 3.89 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useInputState/index.ts"],"sourcesContent":["import { ChangeEvent, useCallback, useState } from 'react';\nimport { usePreservedCallback } from '../usePreservedCallback';\nimport { noop } from '@modern-kit/utils';\n\ninterface UseInputStateOptions {\n validate?: (value: string) => string | null | undefined;\n}\n\ninterface UseInputStateReturn {\n value: string;\n error: string | null;\n onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n resetError: () => void;\n resetValue: () => void;\n reset: () => void;\n}\n\n/**\n * @description input 필드의 상태를 관리하는 커스텀 훅\n *\n * @param {string | undefined} initialValue - 초기값 (선택사항)\n * @param {UseInputStateOptions} options - 옵션\n * @param {(value: string) => string | null | undefined} options.validate - 유효성 검증 함수, 문자열을 반환하면 error 상태의 값으로 처리됩니다.\n * @returns {UseInputStateReturn} 입력 상태와 관련된 객체\n * - `value`: 현재 입력값\n * - `error`: 값 검증 오류 메시지\n * - `onChange`: 입력값 변경 핸들러\n * - `resetError`: 오류 메시지 초기화 함수\n * - `resetValue`: 입력값 초기화 함수\n * - `reset`: 입력값과 오류 메시지를 모두 초기화하는 함수\n *\n * @example\n * ```tsx\n * const { value, onChange, reset } = useInputState('');\n * <input type=\"text\" onChange={onChange} value={value} />\n * ```\n *\n * @example\n * ```tsx\n * const { value, onChange, reset } = useInputState('', {\n * validate: (value) => value.length > 10 ? 'error' : undefined\n * });\n * <input type=\"text\" onChange={onChange} value={value} />\n * ```\n */\nexport function useInputState(\n initialValue: string = '',\n options: UseInputStateOptions = {}\n): UseInputStateReturn {\n const { validate } = options;\n\n const [value, setValue] = useState<string>(initialValue);\n const [error, setError] = useState<string | null>(null);\n\n const preservedValidate = usePreservedCallback(validate ?? noop);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const { value } = e.target;\n\n const validationError = preservedValidate(value);\n if (validationError) {\n setError(validationError);\n } else {\n setError(null);\n }\n setValue(value);\n },\n [preservedValidate]\n );\n\n const resetError = useCallback(() => {\n setError(null);\n }, []);\n\n const resetValue = useCallback(() => {\n setValue(initialValue);\n }, [initialValue]);\n\n const reset = useCallback(() => {\n resetValue();\n resetError();\n }, [resetValue, resetError]);\n\n return { value, error, onChange, resetError, resetValue, reset };\n}\n"],"names":["value"],"mappings":";;;;AA6CO,SAAS,aAAA,CACd,YAAA,GAAuB,EAAA,EACvB,OAAA,GAAgC,EAAC,EACZ;AACrB,EAAA,MAAM,EAAE,UAAS,GAAI,OAAA;AAErB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAiB,YAAY,CAAA;AACvD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAwB,IAAI,CAAA;AAEtD,EAAA,MAAM,iBAAA,GAAoB,oBAAA,CAAqB,QAAA,IAAY,IAAI,CAAA;AAE/D,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,CAAA,KAAqC;AACpC,MAAA,MAAM,EAAE,KAAA,EAAAA,MAAAA,EAAM,GAAI,CAAA,CAAE,MAAA;AAEpB,MAAA,MAAM,eAAA,GAAkB,kBAAkBA,MAAK,CAAA;AAC/C,MAAA,IAAI,eAAA,EAAiB;AACnB,QAAA,QAAA,CAAS,eAAe,CAAA;AAAA,MAC1B,CAAA,MAAO;AACL,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA,MACf;AACA,MAAA,QAAA,CAASA,MAAK,CAAA;AAAA,IAChB,CAAA;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,EACf,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,QAAA,CAAS,YAAY,CAAA;AAAA,EACvB,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,UAAA,EAAW;AACX,IAAA,UAAA,EAAW;AAAA,EACb,CAAA,EAAG,CAAC,UAAA,EAAY,UAAU,CAAC,CAAA;AAE3B,EAAA,OAAO,EAAE,KAAA,EAAO,KAAA,EAAO,QAAA,EAAU,UAAA,EAAY,YAAY,KAAA,EAAM;AACjE;;;;"}