LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-01 17:55:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixes scrolling with long sidebars

Browse source
This commit is contained in:
jessop 2019-10-20 18:41:28 -04:00 • committed by Sean Yesmunt
parent fde8b92476
commit 08249c183e
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/ui/component/claimList/view.jsx
View file

@ -1,5 +1,6 @@
// @flow // @flow
import { MAIN_WRAPPER_CLASS } from 'component/app/view'; import { MAIN_WRAPPER_CLASS } from 'component/app/view';
import { MAIN_CLASS } from 'component/page/view';
import type { Node } from 'react'; import type { Node } from 'react';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
@ -10,6 +11,7 @@ import usePersistedState from 'effects/use-persisted-state';
const SORT_NEW = 'new'; const SORT_NEW = 'new';
const SORT_OLD = 'old'; const SORT_OLD = 'old';
const PADDING_ALLOWANCE = 100;
type Props = { type Props = {
uris: Array<string>, uris: Array<string>,
@ -61,8 +63,14 @@ export default function ClaimList(props: Props) {
function handleScroll(e) { function handleScroll(e) {
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) { if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
const x = document.querySelector(`.${MAIN_WRAPPER_CLASS}`); const x = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
const mc = document.querySelector(`.${MAIN_CLASS}`);
if (x && window.scrollY + window.innerHeight >= x.offsetHeight) { if (
x &&
mc &&
(window.scrollY + window.innerHeight >= x.offsetHeight ||
x.offsetHeight - mc.offsetHeight > PADDING_ALLOWANCE)
) {
if (!loading && urisLength >= pageSize) { if (!loading && urisLength >= pageSize) {
onScrollBottom(); onScrollBottom();

3
src/ui/component/page/view.jsx
View file

@ -5,6 +5,7 @@ import classnames from 'classnames';
import SideBar from 'component/sideBar'; import SideBar from 'component/sideBar';
import Header from 'component/header'; import Header from 'component/header';
export const MAIN_CLASS = 'main';
type Props = { type Props = {
children: Node | Array<Node>, children: Node | Array<Node>,
className: ?string, className: ?string,
@ -22,7 +23,7 @@ function Page(props: Props) {
<Fragment> <Fragment>
<Header authHeader={authPage} /> <Header authHeader={authPage} />
<div className={classnames('main-wrapper__inner')}> <div className={classnames('main-wrapper__inner')}>
<main className={classnames('main', className, { 'main--full-width': authPage })}>{children}</main> <main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
{!authPage && <SideBar obscureSideBar={obscureSideBar} />} {!authPage && <SideBar obscureSideBar={obscureSideBar} />}
</div> </div>
</Fragment> </Fragment>