urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-29 06:45:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: scroll locking behavior works

Browse Source
This commit is contained in:
Logan Allen 2020-08-05 19:28:01 -07:00
parent dfded5bef7
commit d7762b5daf
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pkg/interface/src/apps/chat/components/lib/chat-scroll-container.js
View File

@ -40,7 +40,6 @@ export class ChatScrollContainer extends Component {
containerDidScroll(e) {
const { props } = this;
if (scrollIsAtTop(e.target)) {
// Save scroll position for FF
if (navigator.userAgent.includes("Firefox")) {
@ -115,8 +114,8 @@ export class ChatScrollContainer extends Component {
scrollToBottom() {
this.isTriggeredScroll = true;
if (this.scrollElement) {
this.scrollElement.scrollIntoView();
if (this.scrollRef.current) {
this.scrollRef.current.scrollIntoView(false);
}
if (navigator.userAgent.includes("Firefox")) {

39
pkg/interface/src/apps/chat/components/lib/chat-window.tsx
View File

@ -23,8 +23,29 @@ export class ChatWindow extends Component {
this.scrollIsAtBottom = this.scrollIsAtBottom.bind(this);
this.scrollIsAtTop = this.scrollIsAtTop.bind(this);
this.unreadReference = React.createRef();
this.containerReference = React.createRef();
this.scrollReference = React.createRef();
}
componentDidMount() {
this.initialFetch();
}
initialFetch() {
const { props } = this;
if (props.messages.length <= 0) {
const unreadUnloaded = props.unreadCount - props.messages.length;
if (unreadUnloaded <= MAX_BACKLOG_SIZE &&
unreadUnloaded + 20 > DEFAULT_BACKLOG_SIZE) {
this.fetchBacklog(unreadUnloaded + 20);
} else {
this.fetchBacklog(DEFAULT_BACKLOG_SIZE);
}
} else {
setTimeout(() => {
this.initialFetch();
}, 5000);
}
}
componentDidUpdate(prevProps, prevState) {
@ -34,6 +55,10 @@ export class ChatWindow extends Component {
props.history.push("/~chat");
} else if (props.messages.length >= prevProps.messages.length + 10) {
this.hasAskedForMessages = false;
if (props.unreadCount === 0) {
return;
}
this.setState({ numPages: Math.ceil(props.unreadCount / 100) });
} else if (state.numPages === 1 && props.unreadCount !== 0) {
this.dismissUnread();
this.scrollToBottom();
@ -44,7 +69,7 @@ export class ChatWindow extends Component {
const { props, state } = this;
this.setState({ numPages: state.numPages + 1 }, () => {
if (state.numPages * 100 < props.length) {
this.fetchBacklog();
this.fetchBacklog(DEFAULT_BACKLOG_SIZE);
}
});
}
@ -56,8 +81,8 @@ export class ChatWindow extends Component {
}
scrollToBottom() {
if (this.containerReference.current) {
this.containerReference.current.scrollToBottom();
if (this.scrollReference.current) {
this.scrollReference.current.scrollToBottom();
}
if (this.state.numPages !== 1) {
this.setState({ numPages: 1 });
@ -68,9 +93,8 @@ export class ChatWindow extends Component {
this.props.api.chat.read(this.props.station);
}
fetchBacklog() {
fetchBacklog(size) {
const { props } = this;
const size = DEFAULT_BACKLOG_SIZE;
if (
props.messages.length >= props.length ||
@ -109,6 +133,7 @@ export class ChatWindow extends Component {
unreadMsg={props.unreadMsg}
dismissUnread={this.dismissUnread} />
<ChatScrollContainer
ref={this.scrollReference}
scrollIsAtBottom={this.scrollIsAtBottom}
scrollIsAtTop={this.scrollIsAtTop}>
<BacklogElement isChatLoading={props.isChatLoading} />