martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-15 21:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

avoid polling with resize detctor, still a cludge

Browse Source
This commit is contained in:
Roland Osborne 2022-10-28 09:43:26 -07:00
parent 0e56540eae
commit 1bc883aa58
1 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
net/web/src/session/conversation/Conversation.jsx
View File

@ -1,6 +1,7 @@
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { ConversationWrapper, StatusError } from './Conversation.styled'; import { ConversationWrapper, StatusError } from './Conversation.styled';
import { ExclamationCircleOutlined, SettingOutlined, CloseOutlined } from '@ant-design/icons'; import { ExclamationCircleOutlined, SettingOutlined, CloseOutlined } from '@ant-design/icons';
import ReactResizeDetector from 'react-resize-detector';
import { useConversation } from './useConversation.hook'; import { useConversation } from './useConversation.hook';
import { Logo } from 'logo/Logo'; import { Logo } from 'logo/Logo';
import { AddTopic } from './addTopic/AddTopic'; import { AddTopic } from './addTopic/AddTopic';
@ -9,9 +10,6 @@ import { List, Spin, Tooltip } from 'antd';
export function Conversation({ closeConversation, openDetails, cardId, channelId }) { export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
const height = useRef(0);
const latch = useRef(null);
const { state, actions } = useConversation(cardId, channelId); const { state, actions } = useConversation(cardId, channelId);
const thread = useRef(null); const thread = useRef(null);
@ -21,18 +19,12 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
// an unfortunate cludge for the mobile browser // an unfortunate cludge for the mobile browser
// scrollTop not updated without a scroll event // scrollTop not updated without a scroll event
useEffect(() => { const latch = () => {
latch.current = setInterval(() => { if (thread.current && thread.current.scrollTop === 0) {
if (thread.current && height.current !== thread.current.scrollHeight) { thread.current.scrollTo({ top: -16, left: 0, behavior: 'smooth' });
height.current = thread.current.scrollHeight; thread.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
if (thread.current.scrollTop === 0) { }
thread.current.scrollTo({ top: -16, left: 0, behavior: 'smooth' }); }
thread.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}
}
}, 1000);
return () => clearInterval(latch.current);
}, []);
const scrollThread = (e) => { const scrollThread = (e) => {
const content = thread.current?.scrollHeight; const content = thread.current?.scrollHeight;
@ -81,8 +73,15 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
<div class="empty">This Topic Has No Messages</div> <div class="empty">This Topic Has No Messages</div>
)} )}
{ state.topics.length !== 0 && ( { state.topics.length !== 0 && (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.topics} <ReactResizeDetector handleHeight={true}>
size="large" gutter="0" renderItem={topicRenderer} /> {() => {
latch();
return (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.topics}
size="large" gutter="0" renderItem={topicRenderer} />
);
}}
</ReactResizeDetector>
)} )}
{ state.loadingInit && ( { state.loadingInit && (
<div class="loading"> <div class="loading">