void;
}
/**
@@ -118,11 +122,12 @@ const DynamicPageAnchorBar = forwardRef
{
+ if (!isInitial.current && typeof onPinnedStateChange === 'function') {
+ onPinnedStateChange(headerPinned);
+ }
+ if (isInitial.current) {
+ isInitial.current = false;
+ }
+ }, [headerPinned]);
+
const anchorBarActionButtonClasses = clsx(classes.anchorBarActionButton, isRTL && classes.anchorBarActionButtonRtl);
const bothActionClasses = clsx(
@@ -172,6 +187,7 @@ const DynamicPageAnchorBar = forwardRef
)}
{shouldRenderHeaderPinnableButton && (
@@ -187,6 +203,7 @@ const DynamicPageAnchorBar = forwardRef
)}
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
index 86a972c926e..3b5299309f7 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
@@ -1,4 +1,5 @@
-import { ObjectPage, DynamicPageHeader, DynamicPageTitle, ObjectPageSection } from '../..';
+import { useState } from 'react';
+import { Button, DynamicPageHeader, DynamicPageTitle, ObjectPage, ObjectPagePropTypes, ObjectPageSection } from '../..';
describe('ObjectPage', () => {
it('toggle header', () => {
@@ -38,4 +39,167 @@ describe('ObjectPage', () => {
cy.get('@toggleSpy').should('have.been.calledWith', true);
cy.get('@toggleSpy').should('have.callCount', 4);
});
+
+ it('pin header', () => {
+ const pin = cy.spy().as('onPinSpy');
+ cy.mount(
+ }
+ headerContent={ObjectPageHeader}
+ headerContentPinnable
+ showHideHeaderButton
+ onPinnedStateChange={pin}
+ data-testid="op"
+ >
+
+
+
+
+ );
+ cy.wait(50);
+
+ cy.findByTestId('op').scrollTo(0, 500);
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+
+ cy.findByTestId('op').scrollTo('top');
+
+ cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').click();
+ cy.get('@onPinSpy').should('have.been.calledOnce');
+ cy.get('@onPinSpy').should('have.been.calledWith', true);
+
+ cy.findByTestId('op').scrollTo(0, 500);
+ cy.findByText('ObjectPageHeader').should('be.visible');
+
+ cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').click();
+ cy.get('@onPinSpy').should('have.been.calledTwice');
+ cy.get('@onPinSpy').should('have.been.calledWith', false);
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+ });
+
+ it('programmatically pin header (`alwaysShowContentHeader`)', () => {
+ const TestComp = ({ onPinnedStateChange }: ObjectPagePropTypes) => {
+ const [pinned, setPinned] = useState(false);
+ const handlePinChange = (pinned) => {
+ onPinnedStateChange(pinned);
+ setPinned(pinned);
+ };
+ return (
+ <>
+
+ }
+ headerContent={ObjectPageHeader}
+ headerContentPinnable
+ showHideHeaderButton
+ alwaysShowContentHeader={pinned}
+ onPinnedStateChange={handlePinChange}
+ data-testid="op"
+ >
+
+
+
+
+
+ );
+ };
+ const pin = cy.spy().as('onPinSpy');
+ cy.mount();
+ cy.wait(50);
+
+ cy.findByTestId('op').scrollTo(0, 500);
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+
+ cy.findByTestId('btn').click();
+ cy.get('@onPinSpy').should('have.been.calledOnce');
+ cy.get('@onPinSpy').should('have.been.calledWith', true);
+ cy.findByText('ObjectPageHeader').should('be.visible');
+
+ cy.findByTestId('op').scrollTo(0, 0);
+ cy.findByText('ObjectPageHeader').should('be.visible');
+
+ cy.findByTestId('op').scrollTo(0, 800);
+ cy.findByText('ObjectPageHeader').should('be.visible');
+
+ cy.findByTestId('btn').click();
+ cy.get('@onPinSpy').should('have.been.calledTwice');
+ cy.get('@onPinSpy').should('have.been.calledWith', false);
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+
+ cy.findByTestId('btn').click();
+ cy.findByTestId('op').scrollTo(0, 500);
+ cy.findByText('ObjectPageHeader').should('be.visible');
+
+ cy.findByTestId('btn').click();
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+
+ cy.get('[data-component-name="DynamicPageAnchorBarExpandBtn"]').click();
+ cy.findByText('ObjectPageHeader').should('be.visible');
+
+ // wait for timeout of expand click
+ cy.wait(500);
+
+ cy.findByTestId('op').scrollTo(0, 501);
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+
+ cy.findByTestId('op').scrollTo(0, 30);
+ cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').click();
+ cy.get('@onPinSpy').should('have.callCount', 5);
+ cy.findByTestId('btn').should('have.text', 'toggle false');
+ cy.findByText('ObjectPageHeader').should('be.visible');
+
+ cy.findByTestId('op').scrollTo(0, 500);
+ cy.findByTestId('btn').click();
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+
+ cy.findByTestId('btn').click();
+ cy.findByText('ObjectPageHeader').should('be.visible');
+ cy.get('@onPinSpy').should('have.callCount', 7);
+ });
+
+ it('collapse header when partially visible', () => {
+ cy.viewport(1440, 1080);
+ cy.mount(
+ }
+ headerContent={
+
+ ObjectPageHeader
+
+ }
+ headerContentPinnable
+ showHideHeaderButton
+ data-testid="op"
+ >
+
+
+
+
+ );
+ cy.wait(50);
+
+ cy.findByTestId('op').scrollTo(0, 400);
+ cy.get('[data-component-name="DynamicPageAnchorBarExpandBtn"]').click();
+ cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').should('not.exist');
+ cy.findByText('ObjectPageHeader').should('not.be.visible');
+
+ // wait for timeout of expand click
+ cy.wait(500);
+
+ cy.findByTestId('op').scrollTo(0, 1);
+ cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').should('not.exist');
+ cy.wait(50);
+ cy.findByTestId('op').scrollTo(0, 0);
+ cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').should('be.visible');
+ cy.findByText('ObjectPageHeader').should('be.visible');
+ });
});
diff --git a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
index 5e9e084eaca..91bfd00e78b 100644
--- a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
+++ b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
@@ -1213,6 +1213,7 @@ exports[`ObjectPage with anchor-bar 1`] = `
{
* Defines the ID of the currently `ObjectPageSubSection` section.
*/
selectedSubSectionId?: string;
- /**
- * Fired when the selected section changes.
- */
- onSelectedSectionChange?: (
- event: CustomEvent<{ selectedSectionIndex: number; selectedSectionId: string; section: HTMLDivElement }>
- ) => void;
- /**
- * Fired when the `headerContent` is expanded or collapsed.
- */
- onToggleHeaderContent?: (visible: boolean) => void;
-
- // appearance
/**
* Defines whether the `headerContent` is hidden by scrolling down.
*/
@@ -131,6 +119,20 @@ export interface ObjectPagePropTypes extends Omit {
* __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use placeholder components like the `IllustratedMessage` or custom skeletons pages in order to preserve the intended design.
*/
placeholder?: ReactNode;
+ /**
+ * Fired when the selected section changes.
+ */
+ onSelectedSectionChange?: (
+ event: CustomEvent<{ selectedSectionIndex: number; selectedSectionId: string; section: HTMLDivElement }>
+ ) => void;
+ /**
+ * Fired when the `headerContent` is expanded or collapsed.
+ */
+ onToggleHeaderContent?: (visible: boolean) => void;
+ /**
+ * Fired when the `headerContent` changes its pinned state.
+ */
+ onPinnedStateChange?: (pinned: boolean) => void;
}
const useStyles = createUseStyles(styles, { name: 'ObjectPage' });
@@ -161,6 +163,7 @@ const ObjectPage = forwardRef((props, ref)
placeholder,
onSelectedSectionChange,
onToggleHeaderContent,
+ onPinnedStateChange,
...rest
} = props;
@@ -180,9 +183,14 @@ const ObjectPage = forwardRef((props, ref)
//@ts-ignore
const [componentRefHeaderContent, headerContentRef] = useSyncRef(headerContent?.ref);
const anchorBarRef = useRef(null);
- const scrollTimeout = useRef(null);
+ const selectionScrollTimeout = useRef(null);
const [isAfterScroll, setIsAfterScroll] = useState(false);
const isToggledRef = useRef(false);
+ const isRTL = useIsRTL(objectPageRef);
+ const [responsivePaddingClass, responsiveRange] = useResponsiveContentPadding(objectPageRef.current, true);
+ const [headerCollapsedInternal, setHeaderCollapsedInternal] = useState(undefined);
+ const [scrolledHeaderExpanded, setScrolledHeaderExpanded] = useState(false);
+ const scrollTimeout = useRef(0);
const prevInternalSelectedSectionId = useRef(internalSelectedSectionId);
const fireOnSelectedChangedEvent = (targetEvent, index, id, section) => {
@@ -198,18 +206,13 @@ const ObjectPage = forwardRef((props, ref)
}
};
const debouncedOnSectionChange = useRef(debounce(fireOnSelectedChangedEvent, 500)).current;
-
useEffect(() => {
return () => {
debouncedOnSectionChange.cancel();
- clearTimeout(scrollTimeout.current);
+ clearTimeout(selectionScrollTimeout.current);
};
}, []);
- const isRTL = useIsRTL(objectPageRef);
- const [responsivePaddingClass, responsiveRange] = useResponsiveContentPadding(objectPageRef.current, true);
-
- const [headerCollapsedInternal, setHeaderCollapsedInternal] = useState(undefined);
// observe heights of header parts
const { topHeaderHeight, headerContentHeight, anchorBarHeight, totalHeaderHeight, headerCollapsed } =
useObserveHeights(
@@ -220,7 +223,8 @@ const ObjectPage = forwardRef((props, ref)
[headerCollapsedInternal, setHeaderCollapsedInternal],
{
noHeader: !headerTitle && !headerContent,
- fixedHeader: headerPinned
+ fixedHeader: headerPinned,
+ scrollTimeout
}
);
@@ -387,8 +391,24 @@ const ObjectPage = forwardRef((props, ref)
]);
useEffect(() => {
- setHeaderPinned(alwaysShowContentHeader);
- }, [setHeaderPinned, alwaysShowContentHeader]);
+ if (alwaysShowContentHeader !== undefined) {
+ setHeaderPinned(alwaysShowContentHeader);
+ }
+ if (alwaysShowContentHeader) {
+ onToggleHeaderContentVisibility({ detail: { visible: true } });
+ }
+ }, [alwaysShowContentHeader]);
+
+ const prevHeaderPinned = useRef(headerPinned);
+ useEffect(() => {
+ if (prevHeaderPinned.current && !headerPinned && objectPageRef.current.scrollTop > topHeaderHeight) {
+ onToggleHeaderContentVisibility({ detail: { visible: false } });
+ prevHeaderPinned.current = false;
+ }
+ if (!prevHeaderPinned.current && headerPinned) {
+ prevHeaderPinned.current = true;
+ }
+ }, [headerPinned, topHeaderHeight]);
useEffect(() => {
setSelectedSubSectionId(props.selectedSubSectionId);
@@ -453,6 +473,19 @@ const ObjectPage = forwardRef((props, ref)
};
}, [totalHeaderHeight, objectPageRef, children, mode, footer]);
+ const onToggleHeaderContentVisibility = useCallback((e) => {
+ isToggledRef.current = true;
+ scrollTimeout.current = performance.now() + 500;
+ if (!e.detail.visible) {
+ setHeaderCollapsedInternal(true);
+ objectPageRef.current?.classList.add(classes.headerCollapsed);
+ } else {
+ setHeaderCollapsedInternal(false);
+ setScrolledHeaderExpanded(true);
+ objectPageRef.current?.classList.remove(classes.headerCollapsed);
+ }
+ }, []);
+
const handleOnSubSectionSelected = useCallback(
(e) => {
isProgrammaticallyScrolled.current = true;
@@ -471,20 +504,6 @@ const ObjectPage = forwardRef((props, ref)
},
[mode, setInternalSelectedSectionId, setSelectedSubSectionId, isProgrammaticallyScrolled, children]
);
- const [scrolledHeaderExpanded, setScrolledHeaderExpanded] = useState(false);
- const scrollTimout = useRef(0);
- const onToggleHeaderContentVisibility = useCallback((e) => {
- isToggledRef.current = true;
- scrollTimout.current = performance.now() + 500;
- if (!e.detail.visible) {
- setHeaderCollapsedInternal(true);
- objectPageRef.current?.classList.add(classes.headerCollapsed);
- } else {
- setHeaderCollapsedInternal(false);
- setScrolledHeaderExpanded(true);
- objectPageRef.current?.classList.remove(classes.headerCollapsed);
- }
- }, []);
const objectPageClasses = clsx(
classes.objectPage,
@@ -659,7 +678,7 @@ const ObjectPage = forwardRef((props, ref)
if (!isToggledRef.current) {
isToggledRef.current = true;
}
- if (scrollTimout.current >= performance.now()) {
+ if (scrollTimeout.current >= performance.now()) {
return;
}
scrollEvent.current = e;
@@ -669,10 +688,10 @@ const ObjectPage = forwardRef((props, ref)
if (selectedSubSectionId) {
setSelectedSubSectionId(undefined);
}
- if (scrollTimeout.current) {
- clearTimeout(scrollTimeout.current);
+ if (selectionScrollTimeout.current) {
+ clearTimeout(selectionScrollTimeout.current);
}
- scrollTimeout.current = setTimeout(() => {
+ selectionScrollTimeout.current = setTimeout(() => {
setIsAfterScroll(true);
}, 100);
if (!headerPinned || e.target.scrollTop === 0) {
@@ -757,11 +776,12 @@ const ObjectPage = forwardRef((props, ref)
headerContentVisible={headerContent && headerCollapsed !== true}
headerContentPinnable={headerContentPinnable}
showHideHeaderButton={showHideHeaderButton}
+ headerPinned={headerPinned}
+ a11yConfig={a11yConfig}
onToggleHeaderContentVisibility={onToggleHeaderContentVisibility}
setHeaderPinned={setHeaderPinned}
- headerPinned={headerPinned}
onHoverToggleButton={onHoverToggleButton}
- a11yConfig={a11yConfig}
+ onPinnedStateChange={onPinnedStateChange}
/>