ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message List: Fix focusing to top of tall messages

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-29 17:23:37 +03:00
parent 92a17c6cf1
commit d86fb4a558
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/MessageList.tsx
View File

@ -156,7 +156,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
const memoFirstUnreadIdRef = useRef<number>(); const memoFirstUnreadIdRef = useRef<number>();
const memoFocusingIdRef = useRef<number>(); const memoFocusingIdRef = useRef<number>();
const isScrollTopJustUpdatedRef = useRef(false); const isScrollTopJustUpdatedRef = useRef(false);
const shouldAnimateAppearanceRef = useRef(!messageIds); const shouldAnimateAppearanceRef = useRef(Boolean(lastMessage));
const [containerHeight, setContainerHeight] = useState<number | undefined>(); const [containerHeight, setContainerHeight] = useState<number | undefined>();
const [hasFocusing, setHasFocusing] = useState<boolean>(Boolean(focusingId)); const [hasFocusing, setHasFocusing] = useState<boolean>(Boolean(focusingId));

15
src/util/fastSmoothScroll.ts
View File

@ -13,7 +13,7 @@ let isAnimating = false;
export default function fastSmoothScroll( export default function fastSmoothScroll(
container: HTMLElement, container: HTMLElement,
element: HTMLElement, element: HTMLElement,
position: ScrollLogicalPosition, position: ScrollLogicalPosition | 'centerOrTop',
margin = 0, margin = 0,
maxDistance = MAX_DISTANCE, maxDistance = MAX_DISTANCE,
forceDirection?: FocusDirection, forceDirection?: FocusDirection,
@ -21,7 +21,15 @@ export default function fastSmoothScroll(
forceCurrentContainerHeight?: boolean, forceCurrentContainerHeight?: boolean,
) { ) {
if (forceDirection === FocusDirection.Static) { if (forceDirection === FocusDirection.Static) {
element.scrollIntoView({ block: position }); let block!: ScrollLogicalPosition;
if (position === 'centerOrTop') {
block = element.offsetHeight < container.offsetHeight ? 'center' : 'start';
} else {
block = position;
}
element.scrollIntoView({ block });
return; return;
} }
@ -55,7 +63,7 @@ export function isAnimatingScroll() {
function scrollWithJs( function scrollWithJs(
container: HTMLElement, container: HTMLElement,
element: HTMLElement, element: HTMLElement,
position: ScrollLogicalPosition, position: ScrollLogicalPosition | 'centerOrTop',
margin = 0, margin = 0,
forceDuration?: number, forceDuration?: number,
forceCurrentContainerHeight?: boolean, forceCurrentContainerHeight?: boolean,
@ -78,6 +86,7 @@ function scrollWithJs(
// 'nearest' is not supported yet // 'nearest' is not supported yet
case 'nearest': case 'nearest':
case 'center': case 'center':
case 'centerOrTop':
path = elementHeight < targetContainerHeight path = elementHeight < targetContainerHeight
? (elementTop + elementHeight / 2) - (scrollTop + targetContainerHeight / 2) ? (elementTop + elementHeight / 2) - (scrollTop + targetContainerHeight / 2)
: (elementTop - margin) - scrollTop; : (elementTop - margin) - scrollTop;