Merge branch 'develop' into feature/WRQ-20013

enactjs · May 21, 2024 · 2ca9b96 · 2ca9b96
2 parents 7ef7a7d + cbf2696
commit 2ca9b96
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ The following is a curated list of changes in the Enact sandstone module, newest
 
 - Support for QHD displays
 - `sandstone/Icon` supported icon list, adding new wifi5G icons
+- `sandstone/PageViews` prop `fullContents` to maximize its contents area
 
 ### Fixed
 

diff --git a/PageViews/PageViews.js b/PageViews/PageViews.js
@@ -67,6 +67,14 @@ const PageViewsBase = kind({
 		 */
 		componentRef: EnactPropTypes.ref,
 
+		/**
+		 * When `true`, maximize its contents area.
+		 *
+		 * @type {Boolean}
+		 * @public
+		 */
+		fullContents: PropTypes.bool,
+
 		/**
 		 * Index of the active page.
 		 *
@@ -183,32 +191,54 @@ const PageViewsBase = kind({
 			const pageHint = new IString($L('Page {current} out of {total}')).format({current: index + 1, total: totalIndex});
 			return `${pageHint} ${children?.[index]?.props['aria-label'] || ''}`;
 		},
-		className: ({pageIndicatorType, styler}) => {
-			return styler.append(pageIndicatorType);
+		className: ({fullContents, pageIndicatorType, styler}) => {
+			return styler.append({fullContents}, pageIndicatorType);
 		},
-		prevNavigationButton: ({index, onPrevClick, navigationButtonOffset}) => {
+		renderPrevButton: ({index, onPrevClick, navigationButtonOffset}) => {
 			const isPrevButtonVisible = index !== 0;
+			const navigationButtonStyle = {
+				top: typeof navigationButtonOffset === 'number' ? (navigationButtonOffset) : null
+			};
 			return (
 				<Cell className={css.navButton} shrink>
-					{isPrevButtonVisible ? <Button aria-label={$L('Previous')} icon="arrowlargeleft" iconFlip="auto" id="PrevNavButton" onClick={onPrevClick} style={{top: typeof navigationButtonOffset === 'number' ? (navigationButtonOffset) : null}} /> : null}
+					{isPrevButtonVisible ? <Button aria-label={$L('Previous')} icon="arrowlargeleft" iconFlip="auto" id="PrevNavButton" onClick={onPrevClick} style={navigationButtonStyle} /> : null}
 				</Cell>
 			);
 		},
-		nextNavigationButton: ({index, onNextClick, totalIndex, navigationButtonOffset}) => {
+		renderNextButton: ({onNextClick, index, totalIndex, navigationButtonOffset}) => {
 			const isNextButtonVisible = index < totalIndex - 1;
-
+			const navigationButtonStyle = {
+				top: typeof navigationButtonOffset === 'number' ? (navigationButtonOffset) : null
+			};
 			return (
 				<Cell className={css.navButton} shrink>
-					{isNextButtonVisible ? <Button aria-label={$L('Next')} icon="arrowlargeright" iconFlip="auto" id="NextNavButton" onClick={onNextClick} style={{top: typeof navigationButtonOffset === 'number' ? (navigationButtonOffset) : null}} /> : null}
+					{isNextButtonVisible ? <Button aria-label={$L('Next')} icon="arrowlargeright" iconFlip="auto" id="NextNavButton" onClick={onNextClick} style={navigationButtonStyle} /> : null}
+				</Cell>
+			);
+		},
+		renderViewManager: ({arranger, index, noAnimation, onTransition, onWillTransition, reverseTransition, children}) => {
+			return (
+				<Cell
+					arranger={arranger}
+					className={css.viewManager}
+					component={ViewManager}
+					duration={400}
+					index={index}
+					noAnimation={noAnimation}
+					onTransition={onTransition}
+					onWillTransition={onWillTransition}
+					reverseTransition={reverseTransition}
+				>
+					{children}
 				</Cell>
 			);
 		},
 		steps: ({index, onNextClick, onPrevClick, pageIndicatorType, totalIndex}) => {
 			const isPrevButtonVisible = index !== 0;
 			const isNextButtonVisible = index < totalIndex - 1;
 			return (
-				<div>
-					{pageIndicatorType === 'dot' ?
+				<>
+					{pageIndicatorType !== 'number' ?
 						<Row className={css.steps}>
 							<Steps
 								current={index + 1}
@@ -228,55 +258,51 @@ const PageViewsBase = kind({
 								{isNextButtonVisible ? <Button aria-label={$L('Next')} icon="arrowsmallright" iconFlip="auto" id="NextNavButton" onClick={onNextClick} size="small" /> : null}
 							</Cell>
 						</Row>}
-				</div>
+				</>
 			);
 		}
 	},
 	render: ({
 		'aria-label': ariaLabel,
-		arranger,
-		children,
 		componentRef,
+		fullContents,
 		index,
-		nextNavigationButton,
-		noAnimation,
-		onTransition,
-		onWillTransition,
 		pageIndicatorType,
-		prevNavigationButton,
-		reverseTransition,
 		steps,
+		renderPrevButton,
+		renderNextButton,
+		renderViewManager,
 		...rest
 	}) => {
-
+		delete rest.arranger;
+		delete rest.children;
 		delete rest.componentRef;
+		delete rest.noAnimation;
+		delete rest.onTransition;
 		delete rest.onNextClick;
 		delete rest.onPrevClick;
+		delete rest.onWillTransition;
+		delete rest.reverseTransition;
 		delete rest.totalIndex;
 
 		return (
 			<div role="region" aria-labelledby={`pageViews_index_${index}`} ref={componentRef} {...rest}>
-				{pageIndicatorType === 'dot' ? steps : null}
+				{!fullContents && pageIndicatorType === 'dot' ? steps : null}
 				<Column aria-label={ariaLabel} className={css.contentsArea} id={`pageViews_index_${index}`} >
-					<Row className={css.horizontalLayout}>
-						{pageIndicatorType === 'dot' ? prevNavigationButton : null}
-						<Cell
-							arranger={arranger}
-							className={css.viewManager}
-							component={ViewManager}
-							duration={400}
-							index={index}
-							noAnimation={noAnimation}
-							onTransition={onTransition}
-							onWillTransition={onWillTransition}
-							reverseTransition={reverseTransition}
-						>
-							{children}
-						</Cell>
-						{pageIndicatorType === 'dot' ? nextNavigationButton : null}
-					</Row>
+					{fullContents ?
+						<>
+							<Row className={css.horizontalLayout}>{renderViewManager}</Row>
+							<Row className={css.navButtonContainer}>{pageIndicatorType === 'dot' ? renderPrevButton : null}<Cell />{pageIndicatorType === 'dot' ? renderNextButton : null}</Row>
+							{steps}
+						</> :
+						<Row className={css.horizontalLayout}>
+							{pageIndicatorType === 'dot' ? renderPrevButton : null}
+							{renderViewManager}
+							{pageIndicatorType === 'dot' ? renderNextButton : null}
+						</Row>
+					}
 				</Column>
-				{pageIndicatorType === 'number' ? steps : null}
+				{!fullContents && pageIndicatorType === 'number' ? steps : null}
 			</div>
 		);
 	}

diff --git a/PageViews/PageViews.module.less b/PageViews/PageViews.module.less
@@ -21,7 +21,7 @@
 	}
 
 	&.number .steps {
-		height: 252px;
+		min-height: 252px;
 		.pageNumber {
 			width: 126px;
 		}
@@ -31,14 +31,34 @@
 	}
 
 	&.dot .steps {
-		height: 132px;
+		min-height: 132px;
 	}
 
-	.contentsArea, .viewManager{
+	&.fullContents .steps {
+		position: absolute;
+		align-self: center;
+		bottom: 0px;
+		min-height: 132px;
+	}
+
+	.contentsArea {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.viewManager {
 		overflow: hidden;
 	}
 
 	.horizontalLayout {
 		height: 100%;
 	}
 }
+
+.navButtonContainer {
+	overflow: hidden;
+	z-index: 10;
+	top: ~"calc(50% - " (@sand-button-height + 12) / 2 ~")";
+	position: absolute;
+	width: 100%;
+}
diff --git a/samples/sampler/stories/default/PageViews.js b/samples/sampler/stories/default/PageViews.js
@@ -1,11 +1,13 @@
 import {BasicArranger} from '@enact/sandstone/internal/Panels';
 import {PageViews} from '@enact/sandstone/PageViews';
 import Item from '@enact/sandstone/Item';
-import {select} from '@enact/storybook-utils/addons/controls';
+import {mergeComponentMetadata} from '@enact/storybook-utils';
+import {boolean, select} from '@enact/storybook-utils/addons/controls';
 import {Cell, Row, Column} from '@enact/ui/Layout';
 
 PageViews.displayName = 'PageViews';
 
+const Config = mergeComponentMetadata('PageViews', PageViews);
 const propOptions = {
 	pageIndicatorType: ['dot', 'number']
 };
@@ -16,9 +18,9 @@ export default {
 };
 
 export const _PageViews = (args) => (
-	<PageViews arranger={BasicArranger} pageIndicatorType={args['pageIndicatorType']}>
+	<PageViews arranger={BasicArranger} fullContents={args['fullContents']} pageIndicatorType={args['pageIndicatorType']}>
 		<PageViews.Page aria-label="This is a description for page 1">
-			<div style={{padding: '24px'}}>
+			<div style={{padding: '24px', width: '50%'}}>
 				<Item>Item 1</Item>
 				<Item>Item 2</Item>
 			</div>
@@ -57,12 +59,15 @@ export const _PageViews = (args) => (
 			</div>
 		</PageViews.Page>
 		<PageViews.Page>
-			This is page 4
+			<div style={{height: '100%', backgroundColor: 'grey'}}>
+				This is page 4
+			</div>
 		</PageViews.Page>
 	</PageViews>
 );
 
-select('pageIndicatorType', _PageViews, propOptions.pageIndicatorType, 'dot');
+boolean('fullContents', _PageViews, Config, false);
+select('pageIndicatorType', _PageViews, propOptions.pageIndicatorType, Config, 'dot');
 
 _PageViews.storyName = 'PageViews';
 _PageViews.parameters = {

diff --git a/tests/screenshot/apps/components/PageViews.js b/tests/screenshot/apps/components/PageViews.js
@@ -27,6 +27,10 @@ const BaseTests = [
 		component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews index={2}>{PageComponents}</PageViews></Panel>,
 		wrapper: {full: true}
 	},
+	{
+		component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews fullContents index={2}>{PageComponents}</PageViews></Panel>,
+		wrapper: {full: true}
+	},
 	{
 		component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews pageIndicatorType="number" index={0}>{PageComponents}</PageViews></Panel>,
 		wrapper: {full: true}