0c0dd30a73
* fix(tracker): fix assist typings * fix(tracker): fix assist typings * change(ui) - preferences - removed old * change(ui) - preferences - wip * change(ui) - preferences - list * change(ui) - right box mardings * change(ui) - preferences - integration item paddings * change(ui) - preferences - integration icons * change(ui) - preferences - integration icons * change(ui) - preferences - integration - check status * change(ui) - preferences - integration - check status * change(ui) - preferences - metadata - move the delete button inside the modal * change(ui) - preferences - webhooks - modal and delete btn changes * change(ui) - preferences - modalContext updates * change(ui) - input field forward refs * change(ui) - metadata - modal * change(ui) - metadata - set deleting item to null * change(ui) - integrations * change(ui) - hoc withcopy * change(ui) - projects * change(ui) - users list modal * change(ui) - projects remove border for the last * change(ui) - integrations new api changes * change(ui) - github and jira changes * change(ui) - github and jira changes Co-authored-by: sylenien <nikita@openreplay.com>
43 lines
1.5 KiB
TypeScript
43 lines
1.5 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;
|
|
}
|
|
const Input = React.forwardRef((props: Props, ref: any) => {
|
|
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
|
|
ref={ref}
|
|
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
|
|
ref={ref}
|
|
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;
|