#227 Provide documentation for Carousel control.

Author: Piotr Siatka

docs/documentation/docs/assets/Carousel.png

@@ -0,0 +1,95 @@
+# Carousel control
+
+This control renders passed elements with 'previous/next element' option.
+
+Here is an example of the control in action:
+
+![Carousel control](../assets/Carousel.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
+```
+
+- Use the `Carousel` control in your code as follows:
+
+```TypeScript
+<Carousel
+  buttonsLocation={CarouselButtonsLocation.top}
+  buttonsDisplay={CarouselButtonsDisplay.block}
+
+  contentContainerStyles={styles.carouselContent}
+  containerButtonsStyles={styles.carouselButtonsContainer}
+
+  isInfinite={true}
+
+  element={this.carouselElements}
+  onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
+  onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
+/>
+
+<Carousel
+  buttonsLocation={CarouselButtonsLocation.bottom}
+  buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
+
+  contentContainerStyles={styles.carouselContent}
+  containerButtonsStyles={styles.carouselButtonsContainer}
+
+  canMoveNext={this.state.canMoveNext}
+  canMovePrev={this.state.canMovePrev}
+  triggerPageEvent={this.triggerNextElement}
+  element={this.state.currentCarouselElement}
+/>
+```
+
+## Implementation
+
+The Carousel component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| startIndex | number | no | Specifies the initial index of the element to be displayed. |
+| 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. |
+| 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. |
+| containerButtonsStyles | ICssInput | no | Allows to specify own styles for buttons container. |
+| prevButtonStyles | ICssInput | no | Allows to specify own styles for previous item button. |
+| nextButtonStyles | ICssInput | no | Allows to specify own styles for next item button. |
+| prevButtonIconName | string | no | Name of the icon to be used for PreviousItem button. Default 'ChevronLeft'. |
+| nextButtonIconName | string | no | Name of the icon to be used for NextItem button. Default 'ChevronRight'. |
+| triggerPageEvent | (index: number) => void | no | Triggers parent control to provide new element to be displayed. After the method is executed, carousel control switches to processing mode and loadingComponent is displayed. |
+| element | JSX.Element \| JSX.Element[] | yes | Fixed array of elemenets to be displayed in carousel - if triggerPageEvent is not used. <br />In case triggerPageEvent is in use, JSX.Element has to be provided. Elements are distinguished based on the 'key' property. |
+| loadingComponent | JSX.Element | no | Allows to inject custom component when the carousel is in processing state. If not provided, Spinner is displayed. |
+| onMoveNextClicked | (currentIndex: number) => void | no | Callback function called after the next item button is clicked. Not used when triggerPageEvent is specified. |
+| onMovePrevClicked | (currentIndex: number) => void | no | Callback function called after the previous item button is clicked. Not used when triggerPageEvent is specified. |
+
+enum `CarouselButtonsLocation`
+
+Provides options for carousel buttons location.
+
+| Value | Description |
+| ---- | ---- |
+| top | Buttons are going to be placed in the top of the control. |
+| center | Buttons are going to be placed in the center of the control. |
+| bottom | Buttons are going to be placed in the bottom of the control. |
+
+enum `CarouselButtonsDisplay`
+
+Provides options for carousel buttons display mode.
+
+| Value | Description |
+| ---- | ---- |
+| block | Reserves space for buttons on both sides of the control. |
+| buttonsOnly | Only icon buttons are displayed. |
+| hidden | Buttons are not displayed. They appear onhover event. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Carousel)

docs/documentation/docs/controls/Carousel.md

@@ -42,6 +42,7 @@ The following controls are currently available:
 - [PeoplePicker](./controls/PeoplePicker) (People Picker)
 - [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
 - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content)
+- [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
 
 Field customizer controls:
 

docs/documentation/docs/index.md

@@ -0,0 +1 @@
+export * from "./controls/paging/paginingControl";

src/Paging.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+// import styles from './FooterPagining.module.scss';
+
+export interface IFooterPaginingProps {
+  selectedIndex: number;
+  onPageSelect: (index: number) => void;
+}
+
+export interface IFooterPaginingState {}
+
+export class FooterPagining extends React.Component<IFooterPaginingProps, IFooterPaginingState> {
+  public render(): React.ReactElement<IFooterPaginingProps> {
+    return (
+      <div>
+
+      </div>
+    );
+  }
+}

src/controls/paging/footerPagining/FooterPagining.module.scss

@@ -0,0 +1,7 @@
+export interface IPagingProps {
+  onNextPage?: (index: number) => void; // Executed onNextPage button click
+  onPrevPage?: (index: number) => void; // Executed onPrevPage button click
+
+  showFooterNavigation?: boolean; // Should 'dot' navigation be shown
+  showArrowsNavigation?: boolean; // Should 'arrows' navigation been displayed
+}

src/controls/paging/footerPagining/FooterPagining.tsx

@@ -0,0 +1,3 @@
+export interface IPagingState {
+  pageIndex: number; // Current page index
+}

src/controls/paging/paginingControl/IPagingProps.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IPagingProps, IPagingState } from '.';
+
+
+// import styles from './Paging.module.scss';
+
+export class Paging extends React.Component<IPagingProps, IPagingState> {
+  public render(): React.ReactElement<IPagingProps> {
+    const { showFooterNavigation, showArrowsNavigation } = this.props;
+    return (
+      <div>
+
+        {
+
+        }
+      </div>
+    );
+  }
+
+  private nextPage;
+  private previousPage;
+
+}

src/controls/paging/paginingControl/IPagingState.ts

@@ -0,0 +1,3 @@
+export * from "./IPagingProps";
+export * from "./IPagingState";
+export * from "./Paging";