@modern-kit/react
Version:
1 lines • 3.27 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/components/DebounceHandler/index.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport { useDebounce } from '../../hooks/useDebounce';\nimport { isFunction } from '@modern-kit/utils';\n\ninterface DebounceHandlerProps {\n children: JSX.Element;\n capture: string;\n wait: Parameters<typeof useDebounce>[1];\n options?: Parameters<typeof useDebounce>[2];\n}\n\n/**\n * @description 자식 컴포넌트의 이벤트 핸들러에 디바운스를 선언적으로 적용할 수 있는 컴포넌트입니다.\n *\n * @param {DebounceHandlerProps} props - `DebounceHandler` 컴포넌트의 속성\n * @param {JSX.Element} props.children - 디바운스를 적용할 자식 컴포넌트\n * @param {string} props.capture - 디바운스를 적용할 이벤트 핸들러 이름 (예: 'onClick', 'onChange')\n * @param {number} props.wait - 디바운스가 적용될 시간(ms)입니다. 이 시간이 지나면 콜백이 실행됩니다.\n * @param {object} props.options - 디바운스 동작에 영향을 주는 추가 옵션입니다.\n *\n * @returns {JSX.Element} - 디바운스가 적용된 자식 컴포넌트\n *\n * @example\n * ```tsx\n * // onClick debounce\n * <DebounceHandler capture=\"onClick\" wait={300}>\n * <button onClick={handleClick}>Button</button>\n * </DebounceHandler>\n * ```\n *\n * @example\n * ```tsx\n * // onChange debounce\n * const [debouncedValue, setDebouncedValue] = useState('');\n *\n * const onChange = (value: string) => {\n * setDebouncedValue(value);\n * };\n *\n * // 컴포넌트로 래핑이 필요합니다\n * const Input = ({ onChange }: { onChange: (value: string) => void }) => {\n * const [value, setValue] = useState('');\n *\n * const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n * setValue(e.target.value);\n * onChange(e.target.value);\n * };\n *\n * return <input onChange={handleChange} value={value} />;\n * };\n *\n * <DebounceHandler capture=\"onChange\" wait={300}>\n * <Input onChange={onChange} />\n * </DebounceHandler>\n * ```\n */\nexport const DebounceHandler = ({\n children,\n capture,\n wait,\n options,\n}: DebounceHandlerProps): JSX.Element => {\n const child = Children.only(children);\n\n const debouncedCallback = useDebounce(\n (...args: any[]) => {\n const childProps = child?.props;\n\n if (!childProps) return;\n if (isFunction(childProps[capture])) {\n return childProps[capture](...args);\n }\n },\n wait,\n options\n );\n\n return cloneElement(child, {\n [capture]: debouncedCallback,\n });\n};\n"],"names":["Children","useDebounce","isFunction","cloneElement"],"mappings":";;;;;;;;AAwDO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAAyC;AACvC,EAAA,MAAM,KAAA,GAAQA,cAAA,CAAS,IAAA,CAAK,QAAQ,CAAA;AAEpC,EAAA,MAAM,iBAAA,GAAoBC,4BAAA;AAAA,IACxB,IAAI,IAAA,KAAgB;AAClB,MAAA,MAAM,aAAa,KAAA,EAAO,KAAA;AAE1B,MAAA,IAAI,CAAC,UAAA,EAAY;AACjB,MAAA,IAAIC,gBAAA,CAAW,UAAA,CAAW,OAAO,CAAC,CAAA,EAAG;AACnC,QAAA,OAAO,UAAA,CAAW,OAAO,CAAA,CAAE,GAAG,IAAI,CAAA;AAAA,MACpC;AAAA,IACF,CAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAOC,mBAAa,KAAA,EAAO;AAAA,IACzB,CAAC,OAAO,GAAG;AAAA,GACZ,CAAA;AACH;;;;"}