Fix some issues in Objectpage

- Ignore section header height when calculating dummy div height. - Prevent flickering of expanded/collapsed header. Fixes #25
SAP · Dec 10, 2019 · 843ad17 · 843ad17
1 parent 728756e
commit 843ad17
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
@@ -155,14 +155,17 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
         const lastSectionDomRef = sections[sections.length - 1];
         const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]');
 
-        let domRef = null;
+        let lastSubSectionHeight = null;
         if (subSections.length > 0) {
-          domRef = subSections[subSections.length - 1];
+          lastSubSectionHeight = (subSections[subSections.length - 1] as HTMLElement).offsetHeight;
         } else {
-          domRef = lastSectionDomRef;
+          lastSubSectionHeight =
+            (lastSectionDomRef as HTMLElement).offsetHeight -
+            (lastSectionDomRef.querySelector("[role='heading']") as HTMLElement).offsetHeight;
         }
 
-        let heightDiff = contentContainer.current.offsetHeight - domRef.offsetHeight;
+        let heightDiff = contentContainer.current.offsetHeight - lastSubSectionHeight;
+
         heightDiff = heightDiff > 0 ? heightDiff : 0;
         fillerDivDomRef.current.style.height = `${heightDiff}px`;
         setScrollbarHeight();
@@ -239,6 +242,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
       if (typeof image === 'string') {
         avatar = (
           <span
+            id="ContentHeader"
             className={classes.headerImage}
             style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
           >
@@ -399,6 +403,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
         // @ts-ignore
         const id = Children.toArray(children)[selectedSectionIndex].props.id;
         if (id) {
+          debugger;
           scroller.current.scrollToElementById(`ObjectPageSection-${id}`, 45);
         }
       } else {
@@ -442,15 +447,17 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
         if (expandHeaderActive) {
           setExpandHeaderActive(false);
         }
-
-        const threshold = 64;
+        const thresholdCollapse = 64;
+        const thresholdExpand = 52;
         const baseScrollValue =
           activeContainer.current === contentContainer.current
             ? e.target.scrollTop
             : getProportionateScrollTop(activeInnerContainer, passiveInnerContainer, e.target.scrollTop);
 
-        const shouldBeCollapsed = baseScrollValue > threshold;
-        if (collapsedHeader !== shouldBeCollapsed) {
+        let shouldBeCollapsed = !collapsedHeader && baseScrollValue > thresholdCollapse;
+        let shouldBeExpanded = collapsedHeader && baseScrollValue < thresholdExpand;
+
+        if (shouldBeCollapsed || shouldBeExpanded) {
           lastScrolledContainer.current = activeContainer.current;
           if (shouldBeCollapsed) {
             collapsedHeaderFiller.current.style.height = `${64}px`;
@@ -463,7 +470,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
           setCollapsedHeader(shouldBeCollapsed);
         } else {
           const newScrollValue =
-            collapsedHeader && e.target.scrollTop > threshold + 50
+            collapsedHeader && e.target.scrollTop > thresholdCollapse + 50
               ? e.target.scrollTop
               : getProportionateScrollTop(activeInnerContainer, passiveInnerContainer, e.target.scrollTop);