bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extend Textarea component with resizeable prop

Browse source
This commit is contained in:
Justin 2022-08-09 14:17:59 -04:00
parent 2aab3bb736
commit 2f568ffc84
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/soapbox/components/ui/textarea/textarea.tsx
View file

@ -1,7 +1,7 @@
import classNames from 'clsx';
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. */
autoFocus?: boolean,
/** The initial text in the input. */
@ -18,11 +18,13 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
autoComplete?: string,
/** Whether to display the textarea in red. */
hasError?: boolean,
/** Whether or not you can resize the teztarea */
isResizeable?: boolean,
}
/** Textarea with custom styles. */
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 (
<textarea
{...props}
@ -32,6 +34,7 @@ const Textarea = React.forwardRef(
true,
'font-mono': isCodeEditor,
'text-red-600 border-red-600': hasError,
'resize-none': !isResizeable,
})}
/>
);