Extend Textarea component with resizeable prop
This commit is contained in:
parent
2aab3bb736
commit
2f568ffc84
1 changed files with 5 additions and 2 deletions
|
@ -1,7 +1,7 @@
|
||||||
import classNames from 'clsx';
|
import classNames from 'clsx';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
|
interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
|
||||||
/** Put the cursor into the input on mount. */
|
/** Put the cursor into the input on mount. */
|
||||||
autoFocus?: boolean,
|
autoFocus?: boolean,
|
||||||
/** The initial text in the input. */
|
/** The initial text in the input. */
|
||||||
|
@ -18,11 +18,13 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
|
||||||
autoComplete?: string,
|
autoComplete?: string,
|
||||||
/** Whether to display the textarea in red. */
|
/** Whether to display the textarea in red. */
|
||||||
hasError?: boolean,
|
hasError?: boolean,
|
||||||
|
/** Whether or not you can resize the teztarea */
|
||||||
|
isResizeable?: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Textarea with custom styles. */
|
/** Textarea with custom styles. */
|
||||||
const Textarea = React.forwardRef(
|
const Textarea = React.forwardRef(
|
||||||
({ isCodeEditor = false, hasError = false, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
|
({ isCodeEditor = false, hasError = false, isResizeable = true, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
|
||||||
return (
|
return (
|
||||||
<textarea
|
<textarea
|
||||||
{...props}
|
{...props}
|
||||||
|
@ -32,6 +34,7 @@ const Textarea = React.forwardRef(
|
||||||
true,
|
true,
|
||||||
'font-mono': isCodeEditor,
|
'font-mono': isCodeEditor,
|
||||||
'text-red-600 border-red-600': hasError,
|
'text-red-600 border-red-600': hasError,
|
||||||
|
'resize-none': !isResizeable,
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue