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

fixing latch for mobile browser

Browse Source
This commit is contained in:
Roland Osborne 2022-10-27 23:54:43 -07:00
parent a72389b1a8
commit 0e56540eae
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { 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 { useConversation } from './useConversation.hook'; import { useConversation } from './useConversation.hook';
@ -9,6 +9,9 @@ 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);
@ -16,6 +19,21 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
return (<TopicItem host={cardId == null} topic={topic} />) return (<TopicItem host={cardId == null} topic={topic} />)
} }
// an unfortunate cludge for the mobile browser
// scrollTop not updated without a scroll event
useEffect(() => {
latch.current = setInterval(() => {
if (thread.current && height.current !== thread.current.scrollHeight) {
height.current = thread.current.scrollHeight;
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;
const frame = thread.current?.clientHeight; const frame = thread.current?.clientHeight;
@ -64,7 +82,7 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
)} )}
{ state.topics.length !== 0 && ( { state.topics.length !== 0 && (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.topics} <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.topics}
gutter="0" renderItem={topicRenderer} /> size="large" gutter="0" renderItem={topicRenderer} />
)} )}
{ state.loadingInit && ( { state.loadingInit && (
<div class="loading"> <div class="loading">