Merge pull request #1801 from pnp/carousel-defaults

Carousel: make buttonLocation and buttonDisplay optional, add contentHeight property

Author: AJIXuMuK

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. <br />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. <br />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`
 

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<ICarouselProps, ICarouselState> {
   private _intervalId: number | undefined;
@@ -74,7 +75,8 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
       interval,
       indicatorsDisplay,
       rootStyles,
-      indicatorsContainerStyles
+      indicatorsContainerStyles,
+      contentHeight
     } = this.props;
 
     const processing = processingState === ProcessingState.processing;
@@ -84,6 +86,17 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
 
     const element = this.getElementToDisplay(currentIndex);
 
+    let contentContainerCustomClassName: ICssInput | undefined = undefined;
+    if (contentContainerStyles) {
+      contentContainerCustomClassName = contentContainerStyles;
+    }
+    else if (contentHeight) {
+      contentContainerCustomClassName = mergeStyles({
+        height: `${contentHeight}px`
+      });
+    }
+
+
     return (
       <div className={this.getMergedStyles(styles.root, rootStyles)}>
         <div className={this.getMergedStyles(styles.container, containerStyles)}>
@@ -97,7 +110,7 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
               onClick={() => { this.onCarouselButtonClicked(false); }} />
           </div>
           <div
-            className={this.getMergedStyles(styles.contentContainer, contentContainerStyles)}
+            className={this.getMergedStyles(styles.contentContainer, contentContainerCustomClassName)}
             onMouseOver={pauseOnHover && interval !== null ? this.pauseCycle : undefined}
             onTouchStart={pauseOnHover && interval !== null ? this.pauseCycle : undefined}
             onMouseLeave={pauseOnHover && interval !== null ? this.startCycle : undefined}
@@ -259,7 +272,7 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
         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:

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;
+
 }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1799,6 +1799,13 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               element={this.state.currentCarouselElement}
             />
           </div>
+          <div>
+            <h3>Carousel with minimal configuration:</h3>
+            <Carousel
+              element={this.carouselElements}
+              contentHeight={200}
+            />
+          </div>
         </div>
         <div id="SiteBreadcrumbDiv" className={styles.container} hidden={!controlVisibility.SiteBreadcrumb}>
           <div className={styles.siteBreadcrumb}>