mirror of
https://github.com/IgnatZakalinsky/home-works.git
synced 2025-12-31 12:31:53 +00:00
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
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
|