WIP: PR comments

Author: vbersch

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

@@ -1,7 +1,8 @@
 import React, { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createUseStyles } from 'react-jss';
-import { Avatar } from '../Avatar';
-import { AvatarShape, AvatarSize } from '../..';
+import { Avatar } from '../../lib/Avatar';
+import { AvatarSize } from '../../lib/AvatarSize';
+import { AvatarShape } from '../../lib/AvatarShape';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base';
 
 const styles = {
@@ -18,14 +19,16 @@ const styles = {
   }
 };
 
-const useStyles = createUseStyles(styles);
+const useStyles = createUseStyles(styles, {
+  name: 'CollapsedAvatar'
+});
 
 export interface CollapsedAvatarPropTypes {
   image?: string | ReactNode;
   imageShapeCircle?: boolean;
 }
 
-export function CollapsedAvatar(props: CollapsedAvatarPropTypes) {
+export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
   const { image, imageShapeCircle } = props;
   const classes = useStyles();
   const [isMounted, setIsMounted] = useState(false);
@@ -53,21 +56,13 @@ export function CollapsedAvatar(props: CollapsedAvatarPropTypes) {
   useLayoutEffect(() => {
     requestAnimationFrame(() => {
       setIsMounted(true);
-      // @ts-ignore
-      // setTimeout(() => {
-      //   // @ts-ignore
-      //   domRef.current.style.opacity = 1;
-      //   domRef.current.style.transition = 'opacity 3s';
-      // }, 1000);
     });
   }, []);
 
   const containerClasses = StyleClassHelper.of(classes.base);
   if (isMounted) {
-    // debugger;
     containerClasses.put(classes.visible);
   } else {
-    // debugger;
     containerClasses.put(classes.hidden);
   }
 
@@ -76,4 +71,4 @@ export function CollapsedAvatar(props: CollapsedAvatarPropTypes) {
       {avatarContent}
     </div>
   );
-}
+};

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

@@ -122,7 +122,7 @@ export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props) =>
       <ObjectPageLink
         key={item.props.id}
         id={`ObjectPageSubSection-${item.props.id}`}
-        scrollOffset={collapsedHeader ? 0 : -45}
+        scrollOffset={collapsedHeader ? 45 : 0}
       >
         <StandardListItem data-key={item.props.id}>{item.props.title}</StandardListItem>
       </ObjectPageLink>
@@ -137,7 +137,7 @@ export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props) =>
         onSetActive={onScrollActive}
         activeClass={classes.selected}
         alwaysToTop={index === 0}
-        scrollOffset={collapsedHeader ? 0 : -45}
+        scrollOffset={collapsedHeader ? 45 : 0}
       >
         <span className={classes.button}>{section.props.title}</span>
       </ObjectPageLink>

packages/main/src/components/ObjectPage/demo.stories.tsx

@@ -14,8 +14,6 @@ import { ObjectPageSubSection } from '../../lib/ObjectPageSubSection';
 import { Text } from '../../lib/Text';
 // @ts-ignore
 import SampleImage from './DemoImage.png';
-import { ScrollDemo } from './ScrollDemo';
-import { ScrollSyncExample } from './scrollSync/ScrollSyncExample';
 
 const renderHeaderContent = () => (
   <div style={{ display: 'flex', flexDirection: 'column' }}>

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

@@ -26,7 +26,7 @@ import { ObjectPageScroller } from './scroll/ObjectPageScroller';
 import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
 import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
-import { ContentDensity } from '../..';
+import { ContentDensity } from '../../lib/ContentDensity';
 
 export interface ObjectPagePropTypes extends CommonProps {
   title?: string;
@@ -299,7 +299,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
 
   useEffect(() => {
     if (selectedSubSectionId && mode === ObjectPageMode.IconTabBar && scroller.current) {
-      scroller.current.scrollToElementById(`ObjectPageSubSection-${selectedSubSectionId}`, collapsedHeader ? 0 : -45);
+      scroller.current.scrollToElementById(`ObjectPageSubSection-${selectedSubSectionId}`, collapsedHeader ? 45 : 0);
     }
   }, [selectedSubSectionId]);
 
@@ -311,7 +311,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
         // @ts-ignore
         const id = Children.toArray(children)[selectedSectionIndex].props.id;
         if (id) {
-          scroller.current.scrollToElementById(`ObjectPageSection-${id}`, collapsedHeader ? 0 : -45);
+          scroller.current.scrollToElementById(`ObjectPageSection-${id}`, collapsedHeader ? 45 : 0);
         }
       } else {
         scroller.current.scrollToTop();

packages/main/src/components/ObjectPage/scroll/ObjectPageLink.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { ScrollContext } from './ScrollContext';
 
-export function ObjectPageLink(props) {
+export const ObjectPageLink = (props) => {
   const {
     children,
     inactiveClass = '',
@@ -41,4 +41,4 @@ export function ObjectPageLink(props) {
       {children}
     </div>
   );
-}
+};

packages/main/src/components/ObjectPage/scroll/ObjectPageScroller.tsx

@@ -53,7 +53,7 @@ export const ObjectPageScroller = forwardRef((props: Props, ref) => {
       if (element) {
         const { htmlRef } = element;
         scrollTo(
-          element.offsetTop + 1 + scrollOffset,
+          element.offsetTop + scrollOffset,
           {
             scrollContainer,
             absolute: true

packages/main/src/components/ObjectPage/scroll/ScrollContextProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { ScrollContext } from './ScrollContext';
 
-export function ScrollContentProvider(props) {
+export const ScrollContentProvider = (props) => {
   const {
     children,
     scrollContainer,
@@ -23,4 +23,4 @@ export function ScrollContentProvider(props) {
   }, [scrollContainer, registerElement, unregisterElement, scrollToElementById, selectedElementId, scrollToTop]);
 
   return <ScrollContext.Provider value={context}>{children}</ScrollContext.Provider>;
-}
+};

packages/main/src/components/ObjectPage/scroll/useScrollElement.ts

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { ScrollContext } from './ScrollContext';
 
-export function useScrollElement(id, htmlRef, options = {}) {
+export const useScrollElement = (id, htmlRef, options = {}) => {
   const { registerElement, unregisterElement } = useContext(ScrollContext);
 
   useEffect(() => {
@@ -16,4 +16,4 @@ export function useScrollElement(id, htmlRef, options = {}) {
       unregisterElement(id);
     };
   }, [htmlRef.current]);
-}
+};