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

AccountNotePanel: use our native Textarea component

Browse source
This commit is contained in:
Alex Gleason 2023-10-11 13:48:39 -05:00
parent ad329c33fa
commit 5bd1eab607
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/ui/textarea/textarea.tsx
View file

@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
import Stack from '../stack/stack';
import Text from '../text/text';
interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
/** Put the cursor into the input on mount. */
autoFocus?: boolean;
/** Allows the textarea height to grow while typing */

22
src/features/ui/components/panels/account-note-panel.tsx
View file

@ -1,10 +1,9 @@
import debounce from 'lodash/debounce';
import React, { useEffect, useRef, useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import Textarea from 'react-textarea-autosize';
import { submitAccountNote } from 'soapbox/actions/account-notes';
import { HStack, Text, Widget } from 'soapbox/components/ui';
import { HStack, Text, Textarea, Widget } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
import type { Account as AccountEntity } from 'soapbox/schemas';
@ -64,14 +63,17 @@ const AccountNotePanel: React.FC<IAccountNotePanel> = ({ account }) => {
)}
</HStack>}
>
<Textarea
id={`account-note-${account.id}`}
className='mx-[-8px] w-full resize-none rounded-md border-0 bg-transparent p-2 text-sm text-gray-800 transition-colors placeholder:text-gray-600 focus:border-0 focus:bg-white focus:shadow-none focus:ring-0 motion-reduce:transition-none dark:text-white dark:placeholder:text-gray-600 focus:dark:bg-primary-900'
placeholder={intl.formatMessage(messages.placeholder)}
value={value || ''}
onChange={handleChange}
ref={textarea}
/>
<div className='-mx-2'>
<Textarea
id={`account-note-${account.id}`}
theme='transparent'
placeholder={intl.formatMessage(messages.placeholder)}
value={value || ''}
onChange={handleChange}
ref={textarea}
autoGrow
/>
</div>
</Widget>
);
};