fix(MonthView): fix issue where month data was not displayed when scr…

…olling at the bottom of a budget with lots of categories fix #52
Xiphe · Aug 24, 2020 · b491af8 · b491af8
1 parent 007eadf
commit b491af8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/src/components/InfiniteSlider/InfiniteSlider.tsx b/src/components/InfiniteSlider/InfiniteSlider.tsx
@@ -12,6 +12,7 @@ import { useVisibilityObserver, IsVisibleProvider } from '../../lib';
 export type ScrollTo = (scrollTo: number, behaviour?: ScrollBehavior) => void;
 
 type Props = {
+  style?: React.HTMLAttributes<HTMLDivElement>['style'];
   innerRef: MutableRefObject<HTMLDivElement | null>;
   syncScrollY: MutableRefObject<HTMLDivElement | null>;
   getScrollTo?: (scrollTo: ScrollTo) => void;
@@ -26,6 +27,7 @@ const LOAD_MORE_THRESHOLD = 500;
 
 export default function InfiniteSlider({
   children,
+  style,
   innerRef: containerRef,
   getScrollTo,
   loadMore,
@@ -91,6 +93,7 @@ export default function InfiniteSlider({
   return (
     <div
       ref={containerRef}
+      style={style}
       className={classNames(className, styles.slider)}
       onScroll={onScroll}
     >

diff --git a/src/views/Budget/Budget.tsx b/src/views/Budget/Budget.tsx
@@ -91,6 +91,13 @@ export default function Budget({ state, dispatch }: Props) {
               categories={categories || []}
             />
             <InfiniteSlider
+              style={
+                sidebarRef.current
+                  ? ({
+                      '--sidebar-height': `${sidebarRef.current.scrollHeight}px`,
+                    } as any)
+                  : undefined
+              }
               innerRef={sliderRef}
               onScrollRef={onSliderScrollRef}
               className={styles.budgetSlider}

diff --git a/src/views/Month/Month.module.scss b/src/views/Month/Month.module.scss
@@ -4,6 +4,7 @@
   min-height: calc(100vh - var(--header-height));
   min-width: calc(100vw - var(--sidebar-width));
   max-width: calc(100vw - var(--sidebar-width));
+  height: var(--sidebar-height, 'auto');
   @media (min-width: 800px) {
     min-width: calc(calc(100vw - var(--sidebar-width)) / 2);
     max-width: calc(calc(100vw - var(--sidebar-width)) / 2);