import classNames from 'classnames'; import React, { forwardRef, useImperativeHandle, useRef } from 'react'; import { KEY } from 'src/utils/constanst.utils'; import s from './InputCommon.module.scss'; type Ref = { focus: () => void } | null; interface Props { children?: React.ReactNode, value?: string | number, placeholder?: string, type?: 'text' | 'number' | 'email' | 'password', styleType?: 'default' | 'custom', backgroundTransparent?: boolean, icon?: React.ReactNode, onChange?: (value: string | number) => void, onEnter?: (value: string | number) => void, } const InputCommon = forwardRef(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false, onChange, onEnter }: Props, ref) => { const inputElementRef = useRef(null); useImperativeHandle(ref, () => ({ focus: () => { inputElementRef.current?.focus(); }, getValue: () => { const value = inputElementRef.current?.value || '' return value } })); const handleChange = (e: React.ChangeEvent) => { onChange && onChange(e.target.value) } const handleKeyDown = (e: any) => { if (e.key === KEY.ENTER && onEnter) { const value = inputElementRef.current?.value || '' onEnter(value) } } return (
{ icon && {icon} }
) }) export default InputCommon