Files
home-works/src/s2-homeworks/hw14/common/c8-SuperDebouncedInput/SuperDebouncedInput.tsx
2022-11-08 14:01:28 +03:00

54 lines
1.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, {DetailedHTMLProps, InputHTMLAttributes, ReactNode, useState} from 'react'
import SuperInputText from '../../../hw04/common/c1-SuperInputText/SuperInputText'
// тип пропсов обычного инпута
type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement>
// здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута, кроме type
// (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType)
export type SuperDebouncedInputPropsType = Omit<DefaultInputPropsType, 'type'> & {
// и + ещё пропсы которых нет в стандартном инпуте
onChangeText?: (value: string) => void
onEnter?: () => void
error?: ReactNode
spanClassName?: string
} // илм экспортировать тип SuperInputTextPropsType
& { // плюс специальный пропс SuperPagination
onDebouncedChange?: (value: string) => void
}
const SuperDebouncedInput: React.FC<SuperDebouncedInputPropsType> = (
{
onChangeText,
onDebouncedChange,
...restProps // все остальные пропсы попадут в объект restProps
}
) => {
const [timerId, setTimerId] = useState<number | undefined>(undefined)
const onChangeTextCallback = (value: string) => {
onChangeText?.(value)
if (onDebouncedChange) {
// делает студент
timerId && clearTimeout(timerId)
const id = +setTimeout(() => {
onDebouncedChange(value)
setTimerId(undefined)
}, 1500)
setTimerId(id)
//
}
}
return (
<SuperInputText onChangeText={onChangeTextCallback} {...restProps}/>
)
}
export default SuperDebouncedInput