46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import React, { ComponentProps, forwardRef, ReactNode } from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
type Props = ComponentProps<'input'> & {
|
|
label?: string;
|
|
desc?: string;
|
|
leftAddon?: ReactNode;
|
|
rightAddon?: ReactNode;
|
|
error?: string;
|
|
trimOnBlur?: boolean;
|
|
};
|
|
|
|
export const Input = forwardRef<HTMLInputElement, Props>(
|
|
({ name, label, desc, className, leftAddon, rightAddon, error, trimOnBlur, onBlur, ...rest }, ref) => (
|
|
<div className={clsx('form-group', { 'has-error': !!error })}>
|
|
{label && (
|
|
<label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
|
|
{label}
|
|
</label>
|
|
)}
|
|
{desc && <div className="form__desc form__desc--top">{desc}</div>}
|
|
<div className="input-group">
|
|
{leftAddon && <div>{leftAddon}</div>}
|
|
<input
|
|
className={clsx('form-control', { 'is-invalid': !!error }, className)}
|
|
ref={ref}
|
|
onBlur={(e) => {
|
|
if (trimOnBlur) {
|
|
e.target.value = e.target.value.trim();
|
|
rest.onChange(e);
|
|
}
|
|
if (onBlur) {
|
|
onBlur(e);
|
|
}
|
|
}}
|
|
{...rest}
|
|
/>
|
|
{rightAddon && <div>{rightAddon}</div>}
|
|
</div>
|
|
{error && <div className="form__message form__message--error mt-1">{error}</div>}
|
|
</div>
|
|
),
|
|
);
|
|
|
|
Input.displayName = 'Input';
|