CarouselImage is ready

Author: AJIXuMuK

src/controls/carousel/Carousel.tsx

@@ -11,6 +11,7 @@ import { ProcessingState } from "./ICarouselState";
 import { Spinner } from "office-ui-fabric-react/lib/Spinner";
 import { isArray } from "@pnp/common";
 import * as telemetry from '../../common/telemetry';
+import CarouselImage from "./CarouselImage";
 
 export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
   constructor(props: ICarouselProps) {
@@ -62,7 +63,7 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
     return (
       <div className={this.getMergedStyles(styles.container, containerStyles)}>
         <div className={this.getMergedStyles(this.getButtonContainerStyles(), containerButtonsStyles)}
-             onClick={() => { if (!prevButtonDisabled) { this.onCarouselButtonClicked(false); } }} >
+          onClick={() => { if (!prevButtonDisabled) { this.onCarouselButtonClicked(false); } }} >
           <IconButton
             className={this.getMergedStyles(this.getButtonStyles(false), prevButtonStyles)}
             iconProps={{ iconName: prevButtonIconName }}
@@ -86,7 +87,7 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
         </div>
 
         <div className={this.getMergedStyles(this.getButtonContainerStyles(), containerButtonsStyles)}
-             onClick={() => { if (!nextButtonDisabled) { this.onCarouselButtonClicked(true); } }}>
+          onClick={() => { if (!nextButtonDisabled) { this.onCarouselButtonClicked(true); } }}>
           <IconButton
             className={this.getMergedStyles(this.getButtonStyles(true), nextButtonStyles)}
             iconProps={{ iconName: nextButtonIconName }}
@@ -261,15 +262,21 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
   private getElementToDisplay = (): JSX.Element => {
     const { element } = this.props;
     const currentIndex = this.state.currentIndex;
-    let result : JSX.Element = null;
+    let result: JSX.Element = null;
+    let arrayLen: number;
 
     // If no element has been provided.
     if (!element) {
       result = null;
     }
-    // Retrieve proper element from the array
-    else if (isArray(element) && currentIndex >= 0 && (element as JSX.Element[]).length > currentIndex) {
-      result = element[currentIndex];
+    else if (isArray(element) && (arrayLen = (element as any[]).length) > 0) {
+      // Retrieve proper element from the array
+      if (currentIndex >= 0 && arrayLen > currentIndex) {
+        const arrayEl = element[currentIndex];
+
+        result = 'props' in arrayEl ? arrayEl as JSX.Element :
+          <CarouselImage {...arrayEl} />;
+      }
     }
     else {
       result = element as JSX.Element;

src/controls/carousel/CarouselImage.module.scss

@@ -1,3 +1,5 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+
 .carouselImage {
   overflow: hidden;
   width: 100%;
@@ -6,6 +8,22 @@
 
   .image {
     width: 100%;
+    height: 100%;
+  }
+
+  &.dynamicDetails {
+
+    &:hover {
+      .details {
+        top: 60%;
+      }
+    }
+  }
+
+  &.staticDetails {
+    .details {
+      top: 60%;
+    }
   }
 
   .details {
@@ -17,6 +35,13 @@
     padding: 15px;
     position: absolute;
     right: 0;
-    top: 60%;
+    top: 100%;
+    transition: all 0.5s ease;
+
+    .title {
+      display: block;
+      @include ms-fontSize-l;
+      padding-bottom: 5px;
+    }
   }
 }

src/controls/carousel/CarouselImage.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from './CarouselImage.module.scss';
 import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
 
 export interface ICarouselImageProps {
   imageSrc: string;
@@ -10,14 +11,16 @@ export interface ICarouselImageProps {
   description?: string | JSX.Element;
   target?: '_blank' | '_self';
   showDetailsOnHover?: boolean;
-  detailsBackgroundColor?: string;
-  detailsColor?: string;
   className?: string;
   style?: React.CSSProperties;
   imgClassName?: string;
   imgStyle?: React.CSSProperties;
   detailsClassName?: string;
   detailsStyle?: React.CSSProperties;
+  titleClassName?: string;
+  titleStyle?: React.CSSProperties;
+  descriptionClassName?: string;
+  descriptionStyle?: React.CSSProperties;
 }
 
 export interface ICarouselImageState { }
@@ -32,14 +35,16 @@ export default class CarouselImage extends React.Component<ICarouselImageProps,
       description,
       target = '_blank',
       showDetailsOnHover,
-      detailsBackgroundColor,
-      detailsColor,
       className,
       style,
       imgClassName,
       imgStyle,
       detailsClassName,
-      detailsStyle
+      detailsStyle,
+      titleClassName,
+      titleStyle,
+      descriptionClassName,
+      descriptionStyle
     } = this.props;
 
     let details: JSX.Element | null = null;
@@ -49,14 +54,14 @@ export default class CarouselImage extends React.Component<ICarouselImageProps,
       let descriptionEl: JSX.Element | null;
       if (description) {
         if (typeof(description) === 'string') {
-          descriptionEl = <span>{description}</span>;
+          descriptionEl = <span className={descriptionClassName} style={descriptionStyle}>{description}</span>;
         }
         else {
           descriptionEl = description;
         }
       }
-      const detailsContent = <div className={styles.details}>
-        {!!title && <span>{title}</span>}
+      const detailsContent = <div className={css(styles.details, detailsClassName)} style={detailsStyle}>
+        {!!title && <span className={css(styles.title, titleClassName)} style={titleStyle}>{title}</span>}
         {descriptionEl}
       </div>;
 
@@ -69,8 +74,8 @@ export default class CarouselImage extends React.Component<ICarouselImageProps,
     }
 
     return (
-      <div className={styles.carouselImage}>
-        <Image className={styles.image} imageFit={imageFit} src={imageSrc} />
+      <div className={css(styles.carouselImage, className, showDetailsOnHover ? styles.dynamicDetails : styles.staticDetails)} style={style}>
+        <Image className={css(styles.image, imgClassName)} style={imgStyle} imageFit={imageFit} src={imageSrc} />
         {details}
       </div>
     );

src/controls/carousel/ICarouselProps.ts

@@ -1,4 +1,5 @@
 import { ICssInput } from "@uifabric/utilities/lib";
+import { ICarouselImageProps } from "./CarouselImage";
 
 /**
  * Provides options for carousel buttons location.
@@ -96,7 +97,7 @@ export interface ICarouselProps {
    * Fixed array of elemenets to be displayed in carousel - if triggerPageEvent is not used.
    * In case triggerPageEvent is in use, JSX.Element has to be provided. Elements are distinguished based on the 'key' property.
    */
-  element: JSX.Element | JSX.Element[];
+  element: JSX.Element | JSX.Element[] | ICarouselImageProps[];
   /**
    * Allows to inject custom component when the carousel is in processing state. If not provided, Spinner is displayed.
    */

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1047,21 +1047,30 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             isInfinite={true}
 
             element={[
-              <CarouselImage
-                imageSrc={'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80'}
-                title={'Colosseum'}
-                description={'This is Colosseum'}
-                url={'https://en.wikipedia.org/wiki/Colosseum'} />,
-                <CarouselImage
-                imageSrc={'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80'}
-                title={'Colosseum'}
-                description={'This is Colosseum'}
-                url={'https://en.wikipedia.org/wiki/Colosseum'} />,
-                <CarouselImage
-                imageSrc={'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80'}
-                title={'Colosseum'}
-                description={'This is Colosseum'}
-                url={'https://en.wikipedia.org/wiki/Colosseum'} />
+              {
+                imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
+                title: 'Colosseum',
+                description: 'This is Colosseum',
+                url: 'https://en.wikipedia.org/wiki/Colosseum',
+                showDetailsOnHover: true,
+                imageFit: ImageFit.cover
+              },
+              {
+                imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
+                title: 'Colosseum',
+                description: 'This is Colosseum',
+                url: 'https://en.wikipedia.org/wiki/Colosseum',
+                showDetailsOnHover: true,
+                imageFit: ImageFit.cover
+              },
+              {
+                imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
+                title: 'Colosseum',
+                description: 'This is Colosseum',
+                url: 'https://en.wikipedia.org/wiki/Colosseum',
+                showDetailsOnHover: true,
+                imageFit: ImageFit.cover
+              }
             ]}
             onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
             onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}