2022-07-20 21:50:56 -07:00
|
|
|
import { ChangeEvent, forwardRef } from 'react'
|
2022-07-14 16:36:31 -07:00
|
|
|
|
|
|
|
interface InputProps {
|
|
|
|
type: string
|
|
|
|
value: any
|
|
|
|
onChange: (e: ChangeEvent<HTMLInputElement>) => void
|
2022-11-18 01:53:45 -08:00
|
|
|
charLimit?: number
|
2022-07-14 16:36:31 -07:00
|
|
|
className?: string
|
|
|
|
disabled?: boolean
|
|
|
|
prefixClassname?: string
|
2022-11-19 11:20:36 -08:00
|
|
|
wrapperClassName?: string
|
2022-07-14 16:36:31 -07:00
|
|
|
error?: boolean
|
2022-11-19 11:20:36 -08:00
|
|
|
prefix: string
|
|
|
|
prefixClassName: string
|
|
|
|
suffix: string
|
2022-07-14 16:36:31 -07:00
|
|
|
[x: string]: any
|
|
|
|
}
|
|
|
|
|
|
|
|
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
|
|
|
const {
|
|
|
|
type,
|
|
|
|
value,
|
|
|
|
onChange,
|
2022-11-18 01:53:45 -08:00
|
|
|
charLimit,
|
2022-07-14 16:36:31 -07:00
|
|
|
className,
|
|
|
|
error,
|
|
|
|
wrapperClassName = 'w-full',
|
|
|
|
disabled,
|
|
|
|
prefix,
|
|
|
|
prefixClassName,
|
|
|
|
suffix,
|
|
|
|
} = props
|
|
|
|
return (
|
2022-11-18 01:53:45 -08:00
|
|
|
<>
|
|
|
|
<div className={`relative flex ${wrapperClassName}`}>
|
|
|
|
{prefix ? (
|
|
|
|
<div
|
|
|
|
className={`absolute left-2 top-1/2 -translate-y-1/2 ${prefixClassName}`}
|
|
|
|
>
|
|
|
|
{prefix}
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
<input
|
2022-12-07 18:34:24 -08:00
|
|
|
className={`${className} default-transition h-12 w-full flex-1 rounded-md border bg-th-input-bkg px-3 text-base
|
2022-07-14 16:36:31 -07:00
|
|
|
text-th-fgd-1 ${
|
2022-12-07 18:34:24 -08:00
|
|
|
error ? 'border-th-down' : 'border-th-input-border'
|
|
|
|
} focus:outline-none
|
|
|
|
md:hover:border-th-input-border-hover
|
2022-07-14 16:36:31 -07:00
|
|
|
${
|
|
|
|
disabled
|
2022-07-23 19:48:26 -07:00
|
|
|
? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-4'
|
2022-07-14 16:36:31 -07:00
|
|
|
: ''
|
|
|
|
}
|
2022-07-16 04:22:59 -07:00
|
|
|
${prefix ? 'pl-8' : ''}
|
2022-07-14 16:36:31 -07:00
|
|
|
${suffix ? 'pr-11' : ''}`}
|
2022-11-18 01:53:45 -08:00
|
|
|
disabled={disabled}
|
|
|
|
ref={ref}
|
|
|
|
{...props}
|
|
|
|
type={type}
|
|
|
|
value={value}
|
|
|
|
onChange={onChange}
|
|
|
|
maxLength={charLimit && charLimit}
|
|
|
|
/>
|
|
|
|
{suffix ? (
|
|
|
|
<span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
|
|
|
|
{suffix}
|
|
|
|
</span>
|
|
|
|
) : null}
|
|
|
|
{charLimit ? (
|
|
|
|
<p
|
|
|
|
className={`absolute -top-7 right-0 mt-1 flex justify-end text-xs ${
|
2022-11-30 19:32:32 -08:00
|
|
|
value.length === charLimit ? 'text-th-down' : 'text-th-fgd-4'
|
2022-11-18 01:53:45 -08:00
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{`${value.length}/${charLimit}`}
|
|
|
|
</p>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
</>
|
2022-07-14 16:36:31 -07:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2022-07-22 08:40:53 -07:00
|
|
|
Input.displayName = 'Input'
|
2022-07-14 16:36:31 -07:00
|
|
|
export default Input
|