|
|
@ -1,5 +1,10 @@ |
|
|
|
'use client'; |
|
|
|
import { |
|
|
|
import { ChangeEvent, MouseEventHandler, ReactNode } from 'react'; |
|
|
|
ChangeEvent, |
|
|
|
|
|
|
|
MouseEventHandler, |
|
|
|
|
|
|
|
ReactNode, |
|
|
|
|
|
|
|
ForwardedRef, |
|
|
|
|
|
|
|
forwardRef |
|
|
|
|
|
|
|
} from 'react'; |
|
|
|
import { Input } from 'reactstrap'; |
|
|
|
import { Input } from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
|
|
interface Props { |
|
|
|
interface Props { |
|
|
@ -18,66 +23,57 @@ interface Props { |
|
|
|
bsSize?: 'lg' | 'sm' | undefined; |
|
|
|
bsSize?: 'lg' | 'sm' | undefined; |
|
|
|
placeholder?: string; |
|
|
|
placeholder?: string; |
|
|
|
disabled?: boolean; |
|
|
|
disabled?: boolean; |
|
|
|
|
|
|
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void; |
|
|
|
onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void; |
|
|
|
onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
|
|
|
|
* |
|
|
|
|
|
|
|
* @param children: ReactNode |
|
|
|
|
|
|
|
* @param className?:string |
|
|
|
|
|
|
|
* @param readOnly?:boolean default false |
|
|
|
|
|
|
|
* @param checked?:boolean |
|
|
|
|
|
|
|
* @param label?:string |
|
|
|
|
|
|
|
* @param id?:string |
|
|
|
|
|
|
|
* @param onClick?:MouseEventHandler<HTMLButtonElement> |
|
|
|
|
|
|
|
* @param onChange?:MouseEventHandler<HTMLButtonElement> |
|
|
|
|
|
|
|
* @param value?:any |
|
|
|
|
|
|
|
* @param name?:string |
|
|
|
|
|
|
|
* @param type?:string |
|
|
|
|
|
|
|
* @param inline?:boolean default false |
|
|
|
|
|
|
|
* @param bsSize?: "lg" | "sm" |
|
|
|
|
|
|
|
* @param placeholder?:string |
|
|
|
|
|
|
|
* @param onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void; |
|
|
|
|
|
|
|
* @param disabled?:boolean default false |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function CustomInput({ |
|
|
|
const CustomInput = forwardRef<HTMLInputElement, Props>( |
|
|
|
children, |
|
|
|
( |
|
|
|
className, |
|
|
|
{ |
|
|
|
label, |
|
|
|
children, |
|
|
|
checked, |
|
|
|
className, |
|
|
|
readOnly = false, |
|
|
|
label, |
|
|
|
id, |
|
|
|
checked, |
|
|
|
onClick, |
|
|
|
readOnly = false, |
|
|
|
onChange, |
|
|
|
id, |
|
|
|
value, |
|
|
|
onClick, |
|
|
|
name, |
|
|
|
onChange, |
|
|
|
type, |
|
|
|
value, |
|
|
|
inline = false, |
|
|
|
name, |
|
|
|
bsSize, |
|
|
|
type, |
|
|
|
placeholder, |
|
|
|
inline, |
|
|
|
disabled = false, |
|
|
|
bsSize, |
|
|
|
onKeyPress |
|
|
|
placeholder, |
|
|
|
}: Props) { |
|
|
|
disabled = false, |
|
|
|
return ( |
|
|
|
onKeyPress, |
|
|
|
<> |
|
|
|
onBlur |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
ref |
|
|
|
|
|
|
|
) => { |
|
|
|
|
|
|
|
return ( |
|
|
|
<Input |
|
|
|
<Input |
|
|
|
|
|
|
|
innerRef={ref} |
|
|
|
className={className} |
|
|
|
className={className} |
|
|
|
id={id} |
|
|
|
label={label} |
|
|
|
checked={checked} |
|
|
|
checked={checked} |
|
|
|
readOnly={readOnly} |
|
|
|
readOnly={readOnly} |
|
|
|
label={label} |
|
|
|
id={id} |
|
|
|
|
|
|
|
onClick={onClick} |
|
|
|
|
|
|
|
onChange={onChange} |
|
|
|
value={value} |
|
|
|
value={value} |
|
|
|
name={name} |
|
|
|
name={name} |
|
|
|
disabled={disabled} |
|
|
|
|
|
|
|
type={type} |
|
|
|
type={type} |
|
|
|
|
|
|
|
inline={inline} |
|
|
|
bsSize={bsSize} |
|
|
|
bsSize={bsSize} |
|
|
|
onClick={onClick} |
|
|
|
|
|
|
|
onChange={onChange} |
|
|
|
|
|
|
|
onKeyPress={onKeyPress} |
|
|
|
|
|
|
|
placeholder={placeholder} |
|
|
|
placeholder={placeholder} |
|
|
|
|
|
|
|
disabled={disabled} |
|
|
|
|
|
|
|
onBlur={onBlur} |
|
|
|
|
|
|
|
onKeyPress={onKeyPress} |
|
|
|
> |
|
|
|
> |
|
|
|
{children} |
|
|
|
{children} |
|
|
|
</Input> |
|
|
|
</Input> |
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default CustomInput; |
|
|
|