Skip to content

Commit d500cbb

Browse files
estruyfestruyf
committed
Manual merge fixes
2 parents 985e50f + 1ae09ed commit d500cbb

File tree

11 files changed

+672
-3
lines changed

11 files changed

+672
-3
lines changed

‎docs/documentation/docs/assets/Carousel.png

43.9 KB
Loading

‎docs/documentation/docs/controls/Carousel.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# Carousel control
2+
3+
This control renders passed elements with 'previous/next element' option.
4+
5+
Here is an example of the control in action:
6+
7+
![Carousel control](../assets/Carousel.png)
8+
9+
## How to use this control in your solutions
10+
11+
- 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.
12+
- Import the following modules to your component:
13+
14+
```TypeScript
15+
import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
16+
```
17+
18+
- Use the `Carousel` control in your code as follows:
19+
20+
```TypeScript
21+
<Carousel
22+
buttonsLocation={CarouselButtonsLocation.top}
23+
buttonsDisplay={CarouselButtonsDisplay.block}
24+
25+
contentContainerStyles={styles.carouselContent}
26+
containerButtonsStyles={styles.carouselButtonsContainer}
27+
28+
isInfinite={true}
29+
30+
element={this.carouselElements}
31+
onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
32+
onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
33+
/>
34+
35+
<Carousel
36+
buttonsLocation={CarouselButtonsLocation.bottom}
37+
buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
38+
39+
contentContainerStyles={styles.carouselContent}
40+
containerButtonsStyles={styles.carouselButtonsContainer}
41+
42+
canMoveNext={this.state.canMoveNext}
43+
canMovePrev={this.state.canMovePrev}
44+
triggerPageEvent={this.triggerNextElement}
45+
element={this.state.currentCarouselElement}
46+
/>
47+
```
48+
49+
## Implementation
50+
51+
The Carousel component can be configured with the following properties:
52+
53+
| Property | Type | Required | Description |
54+
| ---- | ---- | ---- | ---- |
55+
| startIndex | number | no | Specifies the initial index of the element to be displayed. |
56+
| isInfinite | boolean | no | Indicates if infinite scrolling is enabled. |
57+
| 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. |
58+
| 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. |
59+
| buttonsLocation | CarouselButtonsLocation | yes | Specifies the location of the buttons inside the container. |
60+
| buttonsDisplay | CarouselButtonsDisplay | yes | Specifies the buttons container display mode. |
61+
| containerStyles | ICssInput | no | Allows to specify own styles for carousel container. |
62+
| loadingComponentContainerStyles | ICssInput | no | Allows to specify own styles for loading component. |
63+
| contentContainerStyles | ICssInput | no | Allows to specify own styles for elements container. |
64+
| containerButtonsStyles | ICssInput | no | Allows to specify own styles for buttons container. |
65+
| prevButtonStyles | ICssInput | no | Allows to specify own styles for previous item button. |
66+
| nextButtonStyles | ICssInput | no | Allows to specify own styles for next item button. |
67+
| prevButtonIconName | string | no | Name of the icon to be used for PreviousItem button. Default 'ChevronLeft'. |
68+
| nextButtonIconName | string | no | Name of the icon to be used for NextItem button. Default 'ChevronRight'. |
69+
| 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. |
70+
| 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. |
71+
| loadingComponent | JSX.Element | no | Allows to inject custom component when the carousel is in processing state. If not provided, Spinner is displayed. |
72+
| onMoveNextClicked | (currentIndex: number) => void | no | Callback function called after the next item button is clicked. Not used when triggerPageEvent is specified. |
73+
| onMovePrevClicked | (currentIndex: number) => void | no | Callback function called after the previous item button is clicked. Not used when triggerPageEvent is specified. |
74+
75+
enum `CarouselButtonsLocation`
76+
77+
Provides options for carousel buttons location.
78+
79+
| Value | Description |
80+
| ---- | ---- |
81+
| top | Buttons are going to be placed in the top of the control. |
82+
| center | Buttons are going to be placed in the center of the control. |
83+
| bottom | Buttons are going to be placed in the bottom of the control. |
84+
85+
enum `CarouselButtonsDisplay`
86+
87+
Provides options for carousel buttons display mode.
88+
89+
| Value | Description |
90+
| ---- | ---- |
91+
| block | Reserves space for buttons on both sides of the control. |
92+
| buttonsOnly | Only icon buttons are displayed. |
93+
| hidden | Buttons are not displayed. They appear onhover event. |
94+
95+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Carousel)

‎docs/documentation/docs/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ The following controls are currently available:
4949
- [SecurityTrimmedControl](./controls/SecurityTrimmedControl) (intended to be used when you want to show or hide components based on the user permissions)
5050
- [TaxonomyPicker](./controls/TaxonomyPicker) (Taxonomy Picker)
5151
- [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
52+
- [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content)
53+
- [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
5254

5355
Field customizer controls:
5456

‎src/controls/carousel/Carousel.module.scss

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.container {
2+
display: flex;
3+
4+
// Styles for elements container
5+
.contentContainer {
6+
flex-grow: 2;
7+
}
8+
9+
.loadingComponent {
10+
margin: auto;
11+
}
12+
13+
// Bottons containers
14+
.buttonLocations {
15+
cursor: pointer;
16+
flex-direction: column;
17+
}
18+
19+
.centralButtonsContainer {
20+
@extend .buttonLocations;
21+
justify-content: center;
22+
}
23+
.topButtonsContainer {
24+
@extend .buttonLocations;
25+
justify-content: left;
26+
}
27+
.bottomButtonsContainer {
28+
@extend .buttonLocations;
29+
justify-content: left;
30+
flex-direction: column-reverse;
31+
}
32+
33+
34+
// ButtonContainer display mode
35+
.buttonsOnlyPrevButton {
36+
position: absolute;
37+
}
38+
.buttonsOnlyPrevButton:hover {
39+
cursor: pointer;
40+
}
41+
42+
// Buttons styles
43+
.buttonsOnlyNextButton {
44+
position: absolute;
45+
left: -32px;
46+
}
47+
.buttonsOnlyNextButton:hover {
48+
cursor: pointer;
49+
}
50+
51+
.buttonsContainer {
52+
display: flex;
53+
background-color: transparent;
54+
cursor: pointer;
55+
}
56+
.buttonsOnlyContainer {
57+
@extend .buttonsContainer;
58+
position: relative;
59+
width: 0px;
60+
}
61+
62+
.blockButtonsContainer {
63+
@extend .buttonsContainer;
64+
min-height: 100%;
65+
min-width: 32px;
66+
}
67+
.blockButtonsContainer:hover {
68+
@extend .buttonsContainer;
69+
background-color: #f4f4f4;
70+
opacity: 0.5;
71+
}
72+
73+
.hiddenButtonsContainer {
74+
@extend .buttonsContainer;
75+
min-height: 100%;
76+
min-width: 32px;
77+
opacity: 0;
78+
}
79+
.hiddenButtonsContainer:hover {
80+
opacity: 0.5;
81+
background-color: #f4f4f4;
82+
}
83+
}

0 commit comments

Comments
 (0)