ChatRoom: autosize height on desktop

settings-alert
Alex Gleason 2022-06-21 15:58:03 -05:00
rodzic 31a73224a9
commit c42f60bc77
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 8 dodań i 4 usunięć

Wyświetl plik

@ -60,6 +60,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
<ChatBox
chatId={chat.id}
onSetInputRef={handleInputRef}
autosize
/>
</Column>
);

Wyświetl plik

@ -25,13 +25,14 @@ const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
interface IChatBox {
chatId: string,
onSetInputRef: (el: HTMLTextAreaElement) => void,
autosize?: boolean,
}
/**
* Chat UI with just the messages and textarea.
* Reused between floating desktop chats and fullscreen/mobile chats.
*/
const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef }) => {
const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chatId, ImmutableOrderedSet<string>()));
@ -167,7 +168,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef }) => {
return (
<div className='chat-box' onMouseOver={handleHover}>
<ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
<ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} autosize />
{renderAttachment()}
{isUploading && (
<UploadProgress progress={uploadProgress * 100} />

Wyświetl plik

@ -66,10 +66,12 @@ interface IChatMessageList {
chatId: string,
/** Message IDs to render. */
chatMessageIds: ImmutableOrderedSet<string>,
/** Whether to make the chatbox fill the height of the screen. */
autosize?: boolean,
}
/** Scrollable list of chat messages. */
const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds }) => {
const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, autosize }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
@ -306,7 +308,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds })
}, [chatMessageIds.first()]);
return (
<div className='chat-messages' ref={node}>
<div className='chat-messages' style={{ height: autosize ? 'calc(100vh - 16rem)' : undefined }} ref={node}>
{chatMessages.reduce((acc, curr, idx) => {
const lastMessage = chatMessages.get(idx - 1);