|
|
|
@ -20,7 +20,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
|
|
|
|
|
className?: string,
|
|
|
|
|
/** Extra class names for the outer <div> element. */
|
|
|
|
|
outerClassName?: string,
|
|
|
|
|
/** URL to the svg icon. */
|
|
|
|
|
/** URL to the svg icon. Cannot be used with addon. */
|
|
|
|
|
icon?: string,
|
|
|
|
|
/** Internal input name. */
|
|
|
|
|
name?: string,
|
|
|
|
@ -31,9 +31,11 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
|
|
|
|
|
/** Change event handler for the input. */
|
|
|
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
|
|
|
|
|
/** HTML input type. */
|
|
|
|
|
type: 'text' | 'number' | 'email' | 'tel' | 'password',
|
|
|
|
|
type?: 'text' | 'number' | 'email' | 'tel' | 'password',
|
|
|
|
|
/** Whether to display the input in red. */
|
|
|
|
|
hasError?: boolean,
|
|
|
|
|
/** An element to display as prefix to input. Cannot be used with icon. */
|
|
|
|
|
addon?: React.ReactElement,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Form input element. */
|
|
|
|
@ -41,7 +43,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|
|
|
|
(props, ref) => {
|
|
|
|
|
const intl = useIntl();
|
|
|
|
|
|
|
|
|
|
const { type = 'text', icon, className, outerClassName, hasError, ...filteredProps } = props;
|
|
|
|
|
const { type = 'text', icon, className, outerClassName, hasError, addon, ...filteredProps } = props;
|
|
|
|
|
|
|
|
|
|
const [revealed, setRevealed] = React.useState(false);
|
|
|
|
|
|
|
|
|
@ -52,13 +54,19 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={classNames('mt-1 relative shadow-sm', outerClassName)}>
|
|
|
|
|
<div className={classNames('mt-1 relative rounded-md shadow-sm', outerClassName)}>
|
|
|
|
|
{icon ? (
|
|
|
|
|
<div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
|
|
|
|
|
<Icon src={icon} className='h-4 w-4 text-gray-400' aria-hidden='true' />
|
|
|
|
|
</div>
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
|
|
{addon ? (
|
|
|
|
|
<div className='absolute inset-y-0 left-0 flex items-center'>
|
|
|
|
|
{addon}
|
|
|
|
|
</div>
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
{...filteredProps}
|
|
|
|
|
type={revealed ? 'text' : type}
|
|
|
|
@ -69,6 +77,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|
|
|
|
'pr-7': isPassword,
|
|
|
|
|
'text-red-600 border-red-600': hasError,
|
|
|
|
|
'pl-8': typeof icon !== 'undefined',
|
|
|
|
|
'pl-16': typeof addon !== 'undefined',
|
|
|
|
|
}, className)}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|