From 836c2156e5876b1d0ed1e72519c776d4f431f6db Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Wed, 18 Nov 2020 10:23:37 +0100 Subject: [PATCH 1/5] fix(Page): content area adapts to height of header and footer --- .../Page/__snapshots__/Page.test.tsx.snap | 7 ++- packages/main/src/components/Page/index.tsx | 57 ++++++++++++++++--- 2 files changed, 54 insertions(+), 10 deletions(-) diff --git a/packages/main/src/components/Page/__snapshots__/Page.test.tsx.snap b/packages/main/src/components/Page/__snapshots__/Page.test.tsx.snap index eaecbd5bd64..4d837de7491 100644 --- a/packages/main/src/components/Page/__snapshots__/Page.test.tsx.snap +++ b/packages/main/src/components/Page/__snapshots__/Page.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Page Basic Page 1`] = ` style="height: 100vh; width: 100vw;" >
Page Content
@@ -65,7 +66,7 @@ exports[`Page Basic Page w/o back button 1`] = ` style="height: 100vh; width: 100vw;" >
Page Content
@@ -119,6 +121,7 @@ exports[`Page Without footer and Header 1`] = ` >
Page Content
diff --git a/packages/main/src/components/Page/index.tsx b/packages/main/src/components/Page/index.tsx index f57d148b0f8..14db356d703 100644 --- a/packages/main/src/components/Page/index.tsx +++ b/packages/main/src/components/Page/index.tsx @@ -9,7 +9,18 @@ import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; import { PageBackgroundDesign } from '@ui5/webcomponents-react/lib/PageBackgroundDesign'; import { Title } from '@ui5/webcomponents-react/lib/Title'; import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel'; -import React, { FC, forwardRef, ReactElement, ReactNode, Ref, useCallback, useMemo } from 'react'; +import React, { + FC, + forwardRef, + ReactElement, + ReactNode, + Ref, + useCallback, + useEffect, + useMemo, + useRef, + useState +} from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; import styles from './Page.jss'; @@ -41,6 +52,8 @@ export interface PagePropTypes extends CommonProps { showFooter?: boolean; /** * Whether this page shall have a header. + * + * __Note:__ If the `customHeader` prop is not defined, `showHeader` has no effect. */ showHeader?: boolean; /** @@ -77,6 +90,11 @@ const Page: FC = forwardRef((props: PagePropTypes, ref: Ref = forwardRef((props: PagePropTypes, ref: Ref { + if (customHeader && showHeader) { + setHeaderStyles((prev) => { + if (headerRef.current?.offsetHeight) { + return { top: headerRef.current.offsetHeight }; + } + return prev; + }); + } + }, [headerRef.current, customHeader, showHeader]); if (className) { pageContainer.put(className); } + useEffect(() => { + if (customFooter && showFooter) { + setFooterHeight(footerRef.current?.offsetHeight); + } + }, [footerRef.current, customFooter, showFooter]); + pageContainer.put(classes[`background${backgroundDesign}`]); const passThroughProps = usePassThroughHtmlProps(props, ['onNavButtonPress']); return (
- {showHeader &&
{header}
} -
{children}
- {showFooter &&
{customFooter}
} + {showHeader && ( +
+ {header} +
+ )} +
+ {children} +
+ {showFooter && ( +
+ {customFooter} +
+ )}
); }); From 34ceeaad478f80dd99d349a88f199cf2b233ecb7 Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Wed, 18 Nov 2020 10:24:26 +0100 Subject: [PATCH 2/5] docs(Page): enhance story --- .../main/src/components/Page/Page.stories.mdx | 194 ++++++++++++++++++ .../main/src/components/Page/demo.stories.tsx | 49 ----- 2 files changed, 194 insertions(+), 49 deletions(-) create mode 100644 packages/main/src/components/Page/Page.stories.mdx delete mode 100644 packages/main/src/components/Page/demo.stories.tsx diff --git a/packages/main/src/components/Page/Page.stories.mdx b/packages/main/src/components/Page/Page.stories.mdx new file mode 100644 index 00000000000..2bdcee6fcb0 --- /dev/null +++ b/packages/main/src/components/Page/Page.stories.mdx @@ -0,0 +1,194 @@ +import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; +import { Page } from '@ui5/webcomponents-react/lib/Page'; +import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox'; +import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection'; +import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent'; +import { Text } from '@ui5/webcomponents-react/lib/Text'; +import { Button } from '@ui5/webcomponents-react/lib/Button'; +import { PageBackgroundDesign } from '@ui5/webcomponents-react/lib/PageBackgroundDesign'; +import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes'; +import { DocsHeader } from '@shared/stories/DocsHeader'; +import { DocsCommonProps } from '@shared/stories/DocsCommonProps'; +import { sapUiContentPadding } from '@ui5/webcomponents-react-base/lib/spacing'; +import { ThemingParameters } from '@ui5/webcomponents-react-base'; +import { useState } from 'react'; + + + + + +
+ +## Example + + + + {(args) => { + return ; + }} + + + +## Properties + + + +
+ +# More Examples + +## Page with custom footer and header + + + + {(args) => { + const [footerHeight, setFooterHeight] = useState('200px'); + const [headerHeight, setHeaderHeight] = useState('44px'); + const handleFooterHeightToggle = () => { + setFooterHeight((prev) => { + if (prev === '200px') { + return '44px'; + } + return '200px'; + }); + }; + const handleHeaderHeightToggle = () => { + setHeaderHeight((prev) => { + if (prev === '200px') { + return '44px'; + } + return '200px'; + }); + }; + return ( + + + The content of your custom footer. + +
+ } + customHeader={ + + Custom Header Content + + } + > + + + If the content area exceeds the Page's height, it becomes scrollable. +
+ +
+ + + If the content area exceeds the Page's height, it becomes scrollable. + + + ); + }} + + + +### Code + +```jsx +const PageComponent = () => { + const [footerHeight, setFooterHeight] = useState('200px'); + const [headerHeight, setHeaderHeight] = useState('44px'); + const handleFooterHeightToggle = () => { + setFooterHeight((prev) => { + if (prev === '200px') { + return '44px'; + } + return '200px'; + }); + }; + const handleHeaderHeightToggle = () => { + setHeaderHeight((prev) => { + if (prev === '200px') { + return '44px'; + } + return '200px'; + }); + }; + return ( + + + The content of your custom footer. + +
+ } + customHeader={ + + Custom Header Content + + } + > + + + If the content area exceeds the Page's height, it becomes scrollable. +
+ +
+ + + If the content area exceeds the Page's height, it becomes scrollable. + + + ); +}; +``` diff --git a/packages/main/src/components/Page/demo.stories.tsx b/packages/main/src/components/Page/demo.stories.tsx deleted file mode 100644 index ed7eabd735c..00000000000 --- a/packages/main/src/components/Page/demo.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Bar } from '@ui5/webcomponents-react/lib/Bar'; -import { Button } from '@ui5/webcomponents-react/lib/Button'; -import { Label } from '@ui5/webcomponents-react/lib/Label'; -import { Page } from '@ui5/webcomponents-react/lib/Page'; -import { PageBackgroundDesign } from '@ui5/webcomponents-react/lib/PageBackgroundDesign'; -import React from 'react'; -import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes'; - -export const renderPage = (props) => ( -
- Button} />} - customHeader={null} - onNavButtonPress={props.onNavButtonPress} - > - - -
-); -renderPage.storyName = 'Default'; - -export default { - title: 'Layouts & Floorplans / Page', - component: Page, - argTypes: { - ...createSelectArgTypes({ backgroundDesign: PageBackgroundDesign }), - customHeader: { - type: null - }, - customFooter: { - type: null - }, - ref: { - type: null - } - }, - args: { - title: 'Page Demo', - showFooter: true, - showHeader: true, - showBackButton: true, - backgroundDesign: PageBackgroundDesign.Standard - } -}; From 83126cccebd18ffcde364291ed65dcae35c96e44 Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Wed, 18 Nov 2020 10:27:13 +0100 Subject: [PATCH 3/5] remove unused css class --- packages/main/src/components/Page/Page.jss.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/main/src/components/Page/Page.jss.ts b/packages/main/src/components/Page/Page.jss.ts index 44cfddf794c..4cc919722a9 100644 --- a/packages/main/src/components/Page/Page.jss.ts +++ b/packages/main/src/components/Page/Page.jss.ts @@ -137,11 +137,6 @@ const styles = { top: CssSizeVariables.sapWcrBarHeight } }, - pageWithFooter: { - '& $contentSection': { - bottom: CssSizeVariables.sapWcrBarHeight - } - }, pageFooter: { position: 'absolute', bottom: '0', From 864983ba5936aaa00c6a79a37888f4770f2669e9 Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Wed, 18 Nov 2020 10:39:50 +0100 Subject: [PATCH 4/5] default header and footer height to 0 if not displayed --- packages/main/src/components/Page/index.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/main/src/components/Page/index.tsx b/packages/main/src/components/Page/index.tsx index 14db356d703..0253bb7aed7 100644 --- a/packages/main/src/components/Page/index.tsx +++ b/packages/main/src/components/Page/index.tsx @@ -44,6 +44,8 @@ export interface PagePropTypes extends CommonProps { customFooter?: ReactNode; /** * A back button will be rendered on the left area of header bar if this property is set to true. + * + * __Note__: If a custom header is used, `showBackButton` has no effect. */ showBackButton?: boolean; /** @@ -90,8 +92,8 @@ const Page: FC = forwardRef((props: PagePropTypes, ref: Ref = forwardRef((props: PagePropTypes, ref: Ref { if (customHeader && showHeader) { - setHeaderStyles((prev) => { - if (headerRef.current?.offsetHeight) { - return { top: headerRef.current.offsetHeight }; - } - return prev; - }); + setHeaderStyles({ top: headerRef.current.offsetHeight }); + } + if (!showHeader) { + setHeaderStyles({}); } }, [headerRef.current, customHeader, showHeader]); @@ -147,7 +147,10 @@ const Page: FC = forwardRef((props: PagePropTypes, ref: Ref { if (customFooter && showFooter) { - setFooterHeight(footerRef.current?.offsetHeight); + setFooterHeight(footerRef.current.offsetHeight); + } + if (!showFooter) { + setFooterHeight(0); } }, [footerRef.current, customFooter, showFooter]); From e8f2248d0a94619443f81732c7a3167cfcc96c42 Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Wed, 18 Nov 2020 11:00:48 +0100 Subject: [PATCH 5/5] add types to ref --- packages/main/src/components/Page/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/components/Page/index.tsx b/packages/main/src/components/Page/index.tsx index 0253bb7aed7..13066c68c85 100644 --- a/packages/main/src/components/Page/index.tsx +++ b/packages/main/src/components/Page/index.tsx @@ -92,8 +92,8 @@ const Page: FC = forwardRef((props: PagePropTypes, ref: Ref(null); + const headerRef = useRef(null); const [footerHeight, setFooterHeight] = useState(0); const [headerStyles, setHeaderStyles] = useState({}); @@ -134,7 +134,7 @@ const Page: FC = forwardRef((props: PagePropTypes, ref: Ref { if (customHeader && showHeader) { - setHeaderStyles({ top: headerRef.current.offsetHeight }); + setHeaderStyles(headerRef.current?.offsetHeight ? { top: headerRef.current.offsetHeight } : {}); } if (!showHeader) { setHeaderStyles({}); @@ -147,7 +147,7 @@ const Page: FC = forwardRef((props: PagePropTypes, ref: Ref { if (customFooter && showFooter) { - setFooterHeight(footerRef.current.offsetHeight); + setFooterHeight(footerRef.current?.offsetHeight ?? 0); } if (!showFooter) { setFooterHeight(0);