feat(ObjectPage): Add 'Pin-Header' button

config/jest.config.js

@@ -19,7 +19,8 @@ module.exports = {
     '!packages/main/src/components/AnalyticalTable/types/*', // no table enums
     '!packages/base/src/styling/sap_fiori_3.ts', // no old theming parameters
     '!packages/base/src/styling/HSLColor.ts', // no deprecated HSL Util
-    '!packages/base/src/styling/font72.ts' // no deprecated font
+    '!packages/base/src/styling/font72.ts', // no deprecated font
+    '!packages/base/src/Scroller/*' // no scroll lib as it is not longer used
   ],
   setupFiles: ['jest-canvas-mock'],
   setupFilesAfterEnv: ['./config/jestsetup.ts'],

config/jestsetup.ts

@@ -4,6 +4,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { createSerializer } from 'enzyme-to-json';
 import ResizeObserver from 'resize-observer-polyfill';
+import 'intersection-observer';
 import '@ui5/webcomponents/dist/json-imports/i18n';
 
 process.env.NODE_ENV = 'test';

package.json

@@ -65,6 +65,7 @@
     "gzip-size": "^5.1.0",
     "husky": "^4.2.1",
     "identity-obj-proxy": "^3.0.0",
+    "intersection-observer": "^0.7.0",
     "jest": "^25.1.0",
     "jest-canvas-mock": "^2.2.0",
     "jest-environment-jsdom-sixteen": "^1.0.2",

packages/base/package.json

@@ -16,7 +16,8 @@
     "**/modernizr.js",
     "core-js/**/*",
     "./src/polyfill/*.ts",
-    "./polyfill/*.js"
+    "./polyfill/*.js",
+    "intersection-observer"
   ],
   "scripts": {
     "clean": "rimraf cjs Device hooks lib polyfill styling types utils index.esm.js index.d.ts",
@@ -26,7 +27,9 @@
   },
   "dependencies": {
     "core-js": "3.6.4",
-    "resize-observer-polyfill": "^1.5.1"
+    "intersection-observer": "^0.7.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "smoothscroll-polyfill": "^0.4.4"
   },
   "peerDependencies": {
     "react": "^16.8.0",

packages/base/src/Scroller/Scroller.tsx

@@ -17,6 +17,17 @@ export const Scroller = forwardRef((props: Props, ref: RefObject<IScroller>) =>
 
   const elements = useRef([]);
 
+  useEffect(() => {
+    if (scrollContainer.current) {
+      scrollContainer.current.addEventListener('scroll', scroll);
+    }
+    return () => {
+      if (scrollContainer.current) {
+        scrollContainer.current.removeEventListener('scroll', scroll);
+      }
+    };
+  }, [scrollContainer]);
+
   const unregisterElement = useCallback(
     (id) => {
       elements.current = elements.current.filter((item) => item.id !== id);

packages/base/src/polyfill/Edge.ts

@@ -1,4 +1,9 @@
 import ResizeObserver from 'resize-observer-polyfill';
+import 'intersection-observer';
+import smoothscroll from 'smoothscroll-polyfill';
 
 // @ts-ignore
 window.ResizeObserver = ResizeObserver;
+
+// required for scrollTo methods
+smoothscroll.polyfill();

packages/base/src/polyfill/IE11.ts

@@ -3,6 +3,11 @@ import 'core-js/modules/es.object.assign';
 import 'core-js/modules/es.object.values';
 import 'core-js/modules/es.array.from';
 import ResizeObserver from 'resize-observer-polyfill';
+import 'intersection-observer';
+import smoothscroll from 'smoothscroll-polyfill';
 
 // @ts-ignore
 window.ResizeObserver = ResizeObserver;
+
+// required for scrollTo methods
+smoothscroll.polyfill();

packages/main/package.json

@@ -27,6 +27,7 @@
     "@ui5/webcomponents-icons": "1.0.0-rc.5",
     "@ui5/webcomponents-react-base": "^0.8.6",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "react-content-loader": "^5.0.2",
     "react-jss": "10.0.4",
     "react-table": "7.0.0",

packages/main/src/components/AnalyticalTable/demo/generateData.ts

@@ -52,8 +52,6 @@ const makeTreeEntry = (...lens) => {
   return makeDataLevel();
 };
 
-
-
 const makeEntry = () => ({
   name: getRandomName(),
   longColumn: 'Really really long column content... don´t crop please',

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

@@ -1,6 +1,6 @@
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
-import React, { ReactElement, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState, ReactElement } from 'react';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 
 const styles = {
@@ -51,7 +51,7 @@ export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
           className={classes.imageContainer}
           style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
         >
-          <img className={classes.image} src={image} alt="Company Logo" />
+          <img className={classes.image} src={image} alt="Object Page Image" />
         </span>
       );
     } else {
@@ -65,10 +65,8 @@ export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
     }
   }, [image, imageShapeCircle]);
 
-  useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      setIsMounted(true);
-    });
+  useEffect(() => {
+    setIsMounted(true);
   }, []);
 
   const containerClasses = StyleClassHelper.of(classes.base);

packages/main/src/components/ObjectPage/ObjectPage.jss.ts

@@ -5,76 +5,65 @@ const styles = {
     width: '100%',
     height: '100%',
     position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    isolation: 'isolate',
     whiteSpace: 'normal',
     fontFamily: ThemingParameters.sapFontFamily,
-    backgroundColor: ThemingParameters.sapBackgroundColor
-  },
-  contentContainer: {
+    backgroundColor: ThemingParameters.sapBackgroundColor,
     overflowX: 'hidden',
     overflowY: 'auto',
-    position: 'relative',
-    flexGrow: 1
-  },
-  outerContentContainer: {
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden'
-  },
-  contentScrollContainer: {
-    position: 'relative'
+    '&::-webkit-scrollbar': {
+      backgroundColor: '#ffffff',
+      width: '12px'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '#949494',
+      '&:hover': {
+        backgroundColor: '#8c8c8c'
+      }
+    },
+    '&::-webkit-scrollbar-corner': {
+      backgroundColor: '#ffffff'
+    },
+    '& section[id="ObjectPageSection-1"] > div[role="heading"]': {
+      display: 'none'
+    }
   },
-  anchorBar: {
-    paddingLeft: '2rem',
-    backgroundColor: ThemingParameters.sapObjectHeader_Background,
-    boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapObjectHeader_BorderColor}, inset 0 0.0625rem ${ThemingParameters.sapObjectHeader_BorderColor}`,
-    display: 'flex',
-    height: '2.75rem',
-    minHeight: '2.75rem',
-    position: 'relative'
+  iconTabBarMode: {
+    '& section[data-component-name="ObjectPageSection"] > div[role="heading"]': {
+      display: 'none'
+    }
   },
-  sectionsContainer: {
-    '&:before': {
-      display: 'table',
-      content: '""'
-    },
-    '& :first-child > div[role="heading"]': {
+  noHeader: {
+    '& $header': {
       display: 'none'
     },
-    position: 'relative',
-    height: '100%',
-    // overflowX: 'hidden',
-    // overflowY: 'auto',
-    overflow: 'hidden',
-    backgroundColor: ThemingParameters.sapBackgroundColor,
-    '&:after': {
-      clear: 'both',
-      display: 'table',
-      content: '""'
+    '& $contentHeader': {
+      display: 'none'
     }
   },
-  fillerDiv: {
-    backgroundColor: ThemingParameters.sapBackgroundColor
+  headerCollapsed: {
+    '& $contentHeader': {
+      display: 'none'
+    }
   },
   // header
   header: {
     flexShrink: 0,
-    position: 'relative',
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
-    '&$stickied': {
-      '& $image': {
-        opacity: '1',
-        height: '3rem',
-        width: '3rem',
-        margin: '0.25rem 1rem 0.25rem 0'
-      }
-    }
+    position: 'sticky',
+    top: 0,
+    zIndex: 2
   },
   contentHeader: {
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
-    position: 'relative'
+    position: 'sticky',
+    paddingBottom: '0.25rem',
+    maxHeight: '500px',
+    overflow: 'hidden',
+    paddingLeft: '2rem'
+  },
+  anchorBar: {
+    position: 'sticky',
+    zIndex: 2
   },
   titleBar: {
     padding: '0.5rem 2rem',
@@ -122,18 +111,8 @@ const styles = {
       padding: 0
     }
   },
-  stickied: {},
-  headerContent: {
-    //paddingTop: '1.5rem',
-    paddingBottom: '0.25rem',
-    transition: 'max-height 0.5s',
-    maxHeight: '500px',
-    overflow: 'hidden',
-    paddingLeft: '2rem',
-    position: 'relative'
-  },
   titleInHeaderContent: {
-    '& $headerContent': {
+    '& contentHeader': {
       paddingTop: 0,
       '& > *': {
         display: 'flex',
@@ -148,17 +127,6 @@ const styles = {
       // paddingTop: 0
     }
   },
-  alwaysVisibleHeader: {
-    '& $headerContent': {
-      paddingLeft: 0
-    },
-    '& $contentHeader': {
-      marginTop: '0.5rem'
-    },
-    '& $titleBar': {
-      paddingBottom: 0
-    }
-  },
   headerCustomContent: {
     display: 'inline-block',
     verticalAlign: 'top',
@@ -196,13 +164,6 @@ const styles = {
   },
   avatar: {
     marginRight: '1rem'
-  },
-  toggleHeaderButton: {
-    position: 'absolute',
-    '--_ui5_button_compact_height': '1.25rem',
-    '--_ui5_button_base_height': '1.25rem',
-    top: `-0.625rem`,
-    left: 'calc(50% - 1rem)'
   }
 };