diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx index 165e7ce9d..0b885c0c7 100644 --- a/app/soapbox/features/chats/components/chat-composer.tsx +++ b/app/soapbox/features/chats/components/chat-composer.tsx @@ -43,7 +43,7 @@ interface IChatComposer extends Pick void resetFileKey: number | null attachments?: Attachment[] - onDeleteAttachment?: () => void + onDeleteAttachment?: (i: number) => void isUploading?: boolean uploadProgress?: number } @@ -73,13 +73,14 @@ const ChatComposer = React.forwardRef const isBlocked = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocked_by'])); const isBlocking = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocking'])); const maxCharacterCount = useAppSelector((state) => state.instance.getIn(['configuration', 'chats', 'max_characters']) as number); + const attachmentLimit = useAppSelector(state => state.instance.configuration.getIn(['chats', 'max_media_attachments']) as number); const [suggestions, setSuggestions] = useState(initialSuggestionState); const isSuggestionsAvailable = suggestions.list.length > 0; const hasAttachment = attachments.length > 0; const isOverCharacterLimit = maxCharacterCount && value?.length > maxCharacterCount; - const isSubmitDisabled = disabled || isOverCharacterLimit || (value.length === 0 && !hasAttachment); + const isSubmitDisabled = disabled || isUploading || isOverCharacterLimit || (value.length === 0 && !hasAttachment); const overLimitText = maxCharacterCount ? maxCharacterCount - value?.length : ''; @@ -172,6 +173,7 @@ const ChatComposer = React.forwardRef resetFileKey={resetFileKey} iconClassName='w-5 h-5' className='text-primary-500' + disabled={isUploading || (attachments.length >= attachmentLimit)} /> )} diff --git a/app/soapbox/features/chats/components/chat-textarea.tsx b/app/soapbox/features/chats/components/chat-textarea.tsx index 22b0877e9..3304bc40a 100644 --- a/app/soapbox/features/chats/components/chat-textarea.tsx +++ b/app/soapbox/features/chats/components/chat-textarea.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Textarea } from 'soapbox/components/ui'; +import { HStack, Textarea } from 'soapbox/components/ui'; import { Attachment } from 'soapbox/types/entities'; import ChatPendingUpload from './chat-pending-upload'; @@ -8,7 +8,7 @@ import ChatUpload from './chat-upload'; interface IChatTextarea extends React.ComponentProps { attachments?: Attachment[] - onDeleteAttachment?: () => void + onDeleteAttachment?: (i: number) => void isUploading?: boolean uploadProgress?: number } @@ -21,6 +21,14 @@ const ChatTextarea: React.FC = ({ uploadProgress = 0, ...rest }) => { + const handleDeleteAttachment = (i: number) => { + return () => { + if (onDeleteAttachment) { + onDeleteAttachment(i); + } + }; + }; + return (
= ({ `} > {(!!attachments?.length || isUploading) && ( -
- {isUploading && ( - - )} - - {attachments?.map(attachment => ( - + + {attachments?.map((attachment, i) => ( +
+ +
))} -
+ + {isUploading && ( +
+ +
+ )} + )}