From 4e82afa0afc2b1e1e6a6a9c5745e1fecd2b3ad98 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 2 Apr 2024 17:21:18 -0400 Subject: [PATCH] Carousel: make buttonLocation and buttonDisplay optional, add contentHeight property --- docs/documentation/docs/controls/Carousel.md | 5 +++-- src/controls/carousel/Carousel.tsx | 19 ++++++++++++++++--- src/controls/carousel/ICarouselProps.ts | 13 +++++++++++-- .../controlsTest/components/ControlsTest.tsx | 7 +++++++ 4 files changed, 37 insertions(+), 7 deletions(-) diff --git a/docs/documentation/docs/controls/Carousel.md b/docs/documentation/docs/controls/Carousel.md index e87673ad4..994ce13be 100644 --- a/docs/documentation/docs/controls/Carousel.md +++ b/docs/documentation/docs/controls/Carousel.md @@ -104,8 +104,8 @@ The Carousel component can be configured with the following properties: | isInfinite | boolean | no | Indicates if infinite scrolling is enabled. | | canMoveNext | boolean | no | Property indicates if the next item button can be clicked. If not provided, status of the button is calculated based on the current index.
It is mandatory when triggerPageEvent is used. | | canMovePrev | boolean | no | Property indicates if the previous item button can be clicked. If not provided, status of the button is calculated based on the current index.
It is mandatory when triggerPageEvent is used. | -| buttonsLocation | CarouselButtonsLocation | yes | Specifies the location of the buttons inside the container. | -| buttonsDisplay | CarouselButtonsDisplay | yes | Specifies the buttons container display mode. | +| buttonsLocation | CarouselButtonsLocation | no | Specifies the location of the buttons inside the container. Default: center | +| buttonsDisplay | CarouselButtonsDisplay | no | Specifies the buttons container display mode. Default: block | | containerStyles | ICssInput | no | Allows to specify own styles for carousel container. | | loadingComponentContainerStyles | ICssInput | no | Allows to specify own styles for loading component. | | contentContainerStyles | ICssInput | no | Allows to specify own styles for elements container. | @@ -134,6 +134,7 @@ The Carousel component can be configured with the following properties: | indicatorsContainerStyles | ICssInput | no | Allows to specify own styles for indicators container when indicatorsDisplay is set to "block" | | prevButtonAriaLabel | string | no | Aria label of the PreviousItem button. Default 'Previous item'. | | nextButtonAriaLabel | string | no | Aria label of the NextItem button. Default 'Next item'. | +| contentHeight | number | no | Allows to specify the height of the content. Can be used instead of providing styles for the content container (`contentContainerStyles`). | enum `CarouselButtonsLocation` diff --git a/src/controls/carousel/Carousel.tsx b/src/controls/carousel/Carousel.tsx index 3ec18a1a4..a4938ed49 100644 --- a/src/controls/carousel/Carousel.tsx +++ b/src/controls/carousel/Carousel.tsx @@ -14,6 +14,7 @@ import { isArray } from "@pnp/common"; import * as telemetry from '../../common/telemetry'; import CarouselImage, { ICarouselImageProps } from "./CarouselImage"; import { CarouselIndicatorsDisplay } from "./ICarouselProps"; +import { mergeStyles } from "@fluentui/react/lib/Styling"; export class Carousel extends React.Component { private _intervalId: number | undefined; @@ -74,7 +75,8 @@ export class Carousel extends React.Component { interval, indicatorsDisplay, rootStyles, - indicatorsContainerStyles + indicatorsContainerStyles, + contentHeight } = this.props; const processing = processingState === ProcessingState.processing; @@ -84,6 +86,17 @@ export class Carousel extends React.Component { const element = this.getElementToDisplay(currentIndex); + let contentContainerCustomClassName: ICssInput | undefined = undefined; + if (contentContainerStyles) { + contentContainerCustomClassName = contentContainerStyles; + } + else if (contentHeight) { + contentContainerCustomClassName = mergeStyles({ + height: `${contentHeight}px` + }); + } + + return (
@@ -97,7 +110,7 @@ export class Carousel extends React.Component { onClick={() => { this.onCarouselButtonClicked(false); }} />
{ return ""; } - const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.top; + const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.center; let buttonsLocationCss = ""; switch (buttonsLocation) { case CarouselButtonsLocation.top: diff --git a/src/controls/carousel/ICarouselProps.ts b/src/controls/carousel/ICarouselProps.ts index ffade1ae4..4c30103e5 100644 --- a/src/controls/carousel/ICarouselProps.ts +++ b/src/controls/carousel/ICarouselProps.ts @@ -82,12 +82,16 @@ export interface ICarouselProps { /** * Specifies the location of the buttons inside the container. + * + * Default: CarouselButtonsLocation.center */ - buttonsLocation: CarouselButtonsLocation; + buttonsLocation?: CarouselButtonsLocation; /** * Specifies the buttons container display mode. + * + * Default: CarouselButtonsDisplay.block */ - buttonsDisplay: CarouselButtonsDisplay; + buttonsDisplay?: CarouselButtonsDisplay; /** * Allows to specify own styles for carousel container. @@ -221,4 +225,9 @@ export interface ICarouselProps { */ indicatorsContainerStyles?: ICssInput; + /** + * Allows to specify the height of the content. Can be used instead of providing styles for the content container. + */ + contentHeight?: number; + } diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 39ee5cce7..15532766c 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1799,6 +1799,13 @@ export default class ControlsTest extends React.Component
+
+

Carousel with minimal configuration:

+ +