Merge pull request #1977 from Bilb/link-pgup-down-on-message-list

Link pgup down on message list
pull/1979/head
Audric Ackermann 4 years ago committed by GitHub
commit bd45f47a2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,5 +1,7 @@
import React from 'react';
import { useSelector } from 'react-redux';
// tslint:disable-next-line: no-submodule-imports
import useKey from 'react-use/lib/useKey';
import { PropsForDataExtractionNotification, QuoteClickOptions } from '../../../models/messageType';
import {
PropsForExpirationTimer,
@ -19,9 +21,19 @@ import { SessionLastSeenIndicator } from './SessionLastSeenIndicator';
export const SessionMessagesList = (props: {
scrollToQuoteMessage: (options: QuoteClickOptions) => Promise<void>;
onPageUpPressed: () => void;
onPageDownPressed: () => void;
}) => {
const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation);
useKey('PageUp', () => {
props.onPageUpPressed();
});
useKey('PageDown', () => {
props.onPageDownPressed();
});
return (
<>
{messagesProps.map(messageProps => {

@ -30,7 +30,7 @@ import {
import { SessionMessagesList } from './SessionMessagesList';
export type SessionMessageListProps = {
messageContainerRef: React.RefObject<any>;
messageContainerRef: React.RefObject<HTMLDivElement>;
};
type Props = SessionMessageListProps & {
@ -82,7 +82,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
const newFirstMesssageId = this.props.messagesProps[0]?.propsForMessage.id;
const messageAddedWasMoreRecentOne = prevFirstMesssageId !== newFirstMesssageId;
if (isSameConvo && snapShot?.realScrollTop && prevMsgLength !== newMsgLength) {
if (isSameConvo && snapShot?.realScrollTop && prevMsgLength !== newMsgLength && currentRef) {
if (messageAddedWasMoreRecentOne) {
if (snapShot.scrollHeight - snapShot.realScrollTop < 50) {
// consider that we were scrolled to bottom
@ -105,13 +105,13 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
public getSnapshotBeforeUpdate() {
const messageContainer = this.props.messageContainerRef.current;
const scrollTop = messageContainer.scrollTop;
const scrollHeight = messageContainer.scrollHeight;
const scrollTop = messageContainer?.scrollTop || undefined;
const scrollHeight = messageContainer?.scrollHeight || undefined;
// as we use column-reverse for displaying message list
// the top is < 0
// tslint:disable-next-line: restrict-plus-operands
const realScrollTop = scrollHeight + scrollTop;
const realScrollTop = scrollHeight && scrollTop ? scrollHeight + scrollTop : undefined;
return {
realScrollTop,
fakeScrollTop: scrollTop,
@ -147,7 +147,11 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
key="typing-bubble"
/>
<SessionMessagesList scrollToQuoteMessage={this.scrollToQuoteMessage} />
<SessionMessagesList
scrollToQuoteMessage={this.scrollToQuoteMessage}
onPageDownPressed={this.scrollPgDown}
onPageUpPressed={this.scrollPgUp}
/>
<SessionScrollButton onClick={this.scrollToBottom} key="scroll-down-button" />
</div>
@ -239,6 +243,30 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
messageContainer.scrollTop = messageContainer.scrollHeight - messageContainer.clientHeight;
}
private scrollPgUp() {
const messageContainer = this.props.messageContainerRef.current;
if (!messageContainer) {
return;
}
messageContainer.scrollBy({
top: Math.floor(-messageContainer.clientHeight * 2) / 3,
behavior: 'smooth',
});
}
private scrollPgDown() {
const messageContainer = this.props.messageContainerRef.current;
if (!messageContainer) {
return;
}
// tslint:disable-next-line: restrict-plus-operands
messageContainer.scrollBy({
top: Math.floor(+messageContainer.clientHeight * 2) / 3,
behavior: 'smooth',
});
}
private async scrollToQuoteMessage(options: QuoteClickOptions) {
const { quoteAuthor, quoteId, referencedMessageNotFound } = options;

Loading…
Cancel
Save