30 lines
No EOL
1.2 KiB
TypeScript
30 lines
No EOL
1.2 KiB
TypeScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { Icon } from 'UI';
|
|
|
|
interface Props {
|
|
wrapperClassName?: string;
|
|
className: string;
|
|
icon?: string;
|
|
leadingButton?: React.ReactNode;
|
|
type?: string;
|
|
rows?: number;
|
|
[x:string]: any;
|
|
}
|
|
function Input(props: Props) {
|
|
const { className, leadingButton = "", wrapperClassName = "", icon = "", type="text", rows=4, ...rest } = props;
|
|
return (
|
|
<div className={cn({ "relative" : icon || leadingButton }, wrapperClassName)}>
|
|
{icon && <Icon name={icon} className="absolute top-0 bottom-0 my-auto ml-4" size="14" />}
|
|
{ type === 'textarea' ? (
|
|
<textarea rows={rows} style={{ resize: 'none' }} maxLength={500} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
|
|
) : (
|
|
<input type={type} style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
|
|
)}
|
|
|
|
{ leadingButton && <div className="absolute top-0 bottom-0 right-0">{ leadingButton }</div> }
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Input; |