fix(ObjectPage): Highlight selected section while scrolling (#56)

Author: MarcusNotheis

packages/main/__karma_snapshots__/ObjectPage.md

@@ -3,12 +3,12 @@
 #### `Renders with children`
 
 ```
-<div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title--- ObjectPageSection-uppercase---">Test</div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">This is my Text</div></div>
+<div role="heading" class="-header---"><div class="-title--- -uppercase---">Test</div></div><div class="-sectionContent---"><div class="-sectionContentInner---">This is my Text</div></div>
 ```
 
 #### `ObjectPage w/ lowercase title`
 
 ```
-<div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title---">Test</div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">This is my Text</div></div>
+<div role="heading" class="-header---"><div class="-title---">Test</div></div><div class="-sectionContent---"><div class="-sectionContentInner---">This is my Text</div></div>
 ```
 

packages/main/__karma_snapshots__/ObjectPageSection.md

@@ -3,6 +3,6 @@
 #### `Render without Crashing`
 
 ```
-<div class="ObjectPageSubSection-objectPageSubSectionHeaderTitle---"></div><div class="ObjectPageSubSection-subSectionContent---"></div>
+<div class="-objectPageSubSectionHeaderTitle---"></div><div class="-subSectionContent---"></div>
 ```
 

packages/main/__karma_snapshots__/ObjectPageSubSection.md

@@ -22,6 +22,7 @@
   "dependencies": {
     "@ui5/webcomponents": "1.0.0-rc.2",
     "@ui5/webcomponents-react-base": "0.3.2-rc.15",
+    "lodash.debounce": "^4.0.8",
     "react-scroll": "^1.7.11",
     "react-table": "6.8.6",
     "react-toastify": "^5.0.1"

packages/main/package.json

@@ -1,7 +1,8 @@
 import { mountThemedComponent } from '@shared/tests/utils';
 import { expect, use } from 'chai';
 import { matchSnapshot } from 'chai-karma-snapshot';
-import React, { createRef } from 'react';
+import React, { createRef, RefObject } from 'react';
+import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef';
 import { ActionSheet } from '../../lib/ActionSheet';
 import { Button } from '../../lib/Button';
 
@@ -26,7 +27,7 @@ describe('ActionSheet', () => {
   });
 
   it('Ref object', () => {
-    const ref = createRef();
+    const ref: RefObject<Ui5PopoverDomRef> = createRef();
     const button = <Button />;
     mountThemedComponent(<ActionSheet ref={ref} openBy={button} />);
     expect((ref.current as any).tagName).to.equal('UI5-POPOVER');

packages/main/src/components/ActionSheet/ActionSheet.karma.tsx

@@ -5,141 +5,21 @@ const styles = ({ parameters }: JSSTheme) => ({
   objectPage: {
     width: '100%',
     height: '100%',
-    position: 'absolute',
+    position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     isolation: 'isolate',
     whiteSpace: 'normal',
     fontFamily: fonts.sapUiFontFamily
   },
-  header: {
-    flexShrink: 0,
-    backgroundColor: parameters.sapUiObjectHeaderBackground,
-    '& $titleBar': {
-      paddingLeft: '2rem',
-      display: 'block',
-      '& $image': {
-        height: '0',
-        width: '0',
-        opacity: '0',
-        display: 'inline-block',
-        verticalAlign: 'middle'
-      },
-      '& $container': {
-        display: 'inline-block',
-        lineHeight: 'normal',
-        verticalAlign: 'middle',
-        width: '70%',
-        boxSizing: 'border-box',
-        paddingTop: '1.5rem',
-        '& $title': {
-          fontSize: '1.375rem',
-          paddingRight: '1rem',
-          verticalAlign: 'baseline',
-          lineHeight: 'normal',
-          display: 'inline-block',
-          margin: '0',
-          fontWeight: 'normal',
-          color: parameters.sapUiBaseText
-        },
-        '& $subTitle': {
-          display: 'inline-block',
-          wordBreak: 'break-word',
-          verticalAlign: 'baseline',
-          paddingTop: '0.5rem',
-          fontSize: '0.875rem',
-          color: parameters.sapUiContentLabelColor
-        }
-      },
-      '& $actions': {
-        position: 'absolute',
-        top: '0',
-        paddingTop: '0.75rem',
-        right: '1.25rem',
-        display: 'inline-block',
-        float: 'right',
-        verticalAlign: 'top',
-        '& > *': {
-          marginLeft: '0.5rem',
-          padding: 0
-        }
-      }
-    },
-    '&$stickied': {
-      '& $image': {
-        opacity: '1',
-        height: '3rem',
-        width: '3rem',
-        margin: '0.25rem 1rem 0.25rem 0'
-      }
-    },
-    '& $headerContent': {
-      paddingTop: '1.5rem',
-      paddingBottom: '0.25rem',
-      transition: 'max-height 0.5s',
-      maxHeight: '500px',
-      overflow: 'hidden',
-
-      paddingLeft: '2rem',
-      position: 'relative',
-      '& $headerImage': {
-        maxWidth: '5rem',
-        maxHeight: '5rem',
-        display: 'inline-block',
-        marginRight: '2rem',
-        marginBottom: '1rem'
-      },
-      '& $headerCustomContent': {
-        display: 'inline-block',
-        verticalAlign: 'top',
-        '& > *': {
-          marginRight: '2rem',
-          marginBottom: '1rem',
-          lineHeight: '1.5rem'
-        }
-      }
-    }
-  },
-  hideHeaderContent: {
-    paddingTop: '0.5rem',
-    marginBottom: '0.5rem',
-    boxShadow: `inset 0 -1px 0 0 ${parameters.sapUiObjectHeaderBorderColor}`,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   anchorBar: {
     paddingLeft: '2rem',
     backgroundColor: parameters.sapUiObjectHeaderBackground,
-    boxShadow: `inset 0 0.125rem ${parameters.sapUiObjectHeaderBackground}`,
+    boxShadow: `inset 0 -0.0625rem ${parameters.sapUiObjectHeaderBorderColor}, inset 0 0.0625rem ${parameters.sapUiObjectHeaderBorderColor}`,
     display: 'flex',
-    margin: '0px',
     height: '2.75rem',
-    padding: '0px',
-    listStyle: 'none',
-    '& $anchorButtonContainer': {
-      position: 'relative',
-      display: 'inline-flex',
-      alignItems: 'center',
-      cursor: 'pointer',
-      '&:not(:first-child)': {
-        marginLeft: '2rem'
-      }
-    }
-  },
-  titleBar: {},
-  image: {},
-  container: {},
-  title: {},
-  subTitle: {},
-  actions: {},
-  stickied: {},
-  headerContent: {},
-  headerImage: {},
-  headerCustomContent: {},
-  anchorButtonContainer: {},
-  active: {},
-  hiddenHeader: {}
+    minHeight: '2.75rem'
+  }
 });
 
 export default styles;

packages/main/src/components/ObjectPage/AnchorButton.tsx

@@ -148,4 +148,14 @@ describe('ObjectPage', () => {
       .simulate('click');
     expect(getEventFromCallback(callback).getParameter('selectedSectionId')).to.eq('1');
   });
+
+  it('No Header', () => {
+    const wrapper = mountThemedComponent(
+      <ObjectPage selectedSectionId={'2'} noHeader>
+        <ObjectPageSection id={'1'}>Test</ObjectPageSection>
+        <ObjectPageSection id={'2'}>Test 2</ObjectPageSection>
+      </ObjectPage>
+    );
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
 });