65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
interface InputProps {
|
|
type: string
|
|
value: any
|
|
onChange: (e) => void
|
|
className?: string
|
|
disabled?: boolean
|
|
[x: string]: any
|
|
}
|
|
|
|
const Group = ({ children, className }) => {
|
|
return (
|
|
<div className={`flex border border-th-fgd-4 rounded ${className}`}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Input = ({
|
|
type,
|
|
value,
|
|
onChange,
|
|
className,
|
|
disabled,
|
|
prefix,
|
|
suffix,
|
|
...props
|
|
}: InputProps) => {
|
|
return (
|
|
<div
|
|
className={`flex items-center h-10 rounded ${
|
|
disabled ? 'bg-th-bkg-3' : 'bg-th-bkg-1'
|
|
} ${className}`}
|
|
>
|
|
{prefix ? (
|
|
<div className="flex items-center justify-end border-r border-th-fgd-4 bg-th-bkg-2 p-2 h-full text-sm rounded rounded-r-none w-14 text-right">
|
|
{prefix}
|
|
</div>
|
|
) : null}
|
|
<div className="flex items-center h-full border border-transparent hover:border-th-primary">
|
|
<input
|
|
type={type}
|
|
value={value}
|
|
onChange={onChange}
|
|
className={`bg-transparent tracking-wider w-full focus:outline-none ${
|
|
disabled ? 'opacity-20 cursor-not-allowed' : ''
|
|
} ${type === 'number' ? 'text-right mr-1' : ''} ${
|
|
value.toString().length > 9 ? 'text-xs' : ''
|
|
}`}
|
|
disabled={disabled}
|
|
{...props}
|
|
/>
|
|
{suffix ? (
|
|
<span className="text-xs pl-0.5 pr-1 bg-transparent text-th-fgd-4">
|
|
{suffix}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Input.Group = Group
|
|
|
|
export default Input
|