Skip to content

Commit c70d3e7

Browse files
estruyfestruyf
committed
Merge branch 'dev' of github.com:SharePoint/sp-dev-fx-controls-react into dev
2 parents 0ea9272 + 70bb2c2 commit c70d3e7

File tree

10 files changed

+778
-41
lines changed

10 files changed

+778
-41
lines changed

‎CHANGELOG.JSON

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"`TreeView`: Expand to selected [#559](https://github.com/pnp/sp-dev-fx-controls-react/issues/559)",
1313
"`DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [#497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)",
1414
"`TaxonomyPicker`: Added the `selectTerm`, `hideTerm`, and `disableTerm` actions [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)",
15-
"`TaxonomyPicker`: Added the functionality to enable/disable term actions on the fly [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)"
15+
"`TaxonomyPicker`: Added the functionality to enable/disable term actions on the fly [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)",
16+
"`Carousel`: indicators, slide animation, auto cycling, easier basic usage [#587](https://github.com/pnp/sp-dev-fx-controls-react/pull/587)"
1617
],
1718
"fixes": [
1819
"`TaxonomyPicker`: Correct the AnchorID getting all TermSet search options [#150](https://github.com/pnp/sp-dev-fx-controls-react/issues/150)",

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

1.33 MB
Loading

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

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Carousel control
22

3-
This control renders passed elements with 'previous/next element' option.
3+
A slideshow component for cycling through elements—images or slides of text—like a carousel.
44

55
Here is an example of the control in action:
66

@@ -17,6 +17,8 @@ import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
1717

1818
- Use the `Carousel` control in your code as follows:
1919

20+
Carousel component with provided `JSX.Element[]` slides
21+
2022
```TypeScript
2123
<Carousel
2224
buttonsLocation={CarouselButtonsLocation.top}
@@ -31,7 +33,11 @@ import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
3133
onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
3234
onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
3335
/>
36+
```
37+
38+
Carousel component with provided `triggerPageEvent`
3439

40+
```TypeScript
3541
<Carousel
3642
buttonsLocation={CarouselButtonsLocation.bottom}
3743
buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
@@ -46,6 +52,48 @@ import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
4652
/>
4753
```
4854

55+
Carousel component with provided `ICarouselImageProps[]` slides:
56+
57+
```TypeSCript
58+
<Carousel
59+
buttonsLocation={CarouselButtonsLocation.center}
60+
buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
61+
contentContainerStyles={styles.carouselImageContent}
62+
isInfinite={true}
63+
indicatorShape={CarouselIndicatorShape.circle}
64+
pauseOnHover={true}
65+
66+
element={[
67+
{
68+
imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
69+
title: 'Colosseum',
70+
description: 'This is Colosseum',
71+
url: 'https://en.wikipedia.org/wiki/Colosseum',
72+
showDetailsOnHover: true,
73+
imageFit: ImageFit.cover
74+
},
75+
{
76+
imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
77+
title: 'Colosseum',
78+
description: 'This is Colosseum',
79+
url: 'https://en.wikipedia.org/wiki/Colosseum',
80+
showDetailsOnHover: true,
81+
imageFit: ImageFit.cover
82+
},
83+
{
84+
imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',
85+
title: 'Colosseum',
86+
description: 'This is Colosseum',
87+
url: 'https://en.wikipedia.org/wiki/Colosseum',
88+
showDetailsOnHover: true,
89+
imageFit: ImageFit.cover
90+
}
91+
]}
92+
onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
93+
onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
94+
/>
95+
```
96+
4997
## Implementation
5098

5199
The Carousel component can be configured with the following properties:
@@ -71,6 +119,16 @@ The Carousel component can be configured with the following properties:
71119
| loadingComponent | JSX.Element | no | Allows to inject custom component when the carousel is in processing state. If not provided, Spinner is displayed. |
72120
| onMoveNextClicked | (currentIndex: number) => void | no | Callback function called after the next item button is clicked. Not used when triggerPageEvent is specified. |
73121
| onMovePrevClicked | (currentIndex: number) => void | no | Callback function called after the previous item button is clicked. Not used when triggerPageEvent is specified. |
122+
| elementsCount | number | no | In case triggerPageEvent is in use, provides total number of slides in the carousel. |
123+
| onSelect | (selectedIndex: number) => void | no | Callback function called when element has been selected in the carousel |
124+
| slide | boolean | no | Enables animation on the Carousel as it transitions between slides. This property is ignored if triggerPageEvent is in use. |
125+
| interval | number \| null | no | The amount of time to delay between automatically cycling an item. If null, carousel will not automatically cycle. |
126+
| pauseOnHover | boolean | no | Specifies if slides cycling should pause when hovering over the content (touchStart on touch devices). |
127+
| indicators | boolean | no | Specifies if set of slide position indicators is shown. |
128+
| indicatorShape | CarouselIndicatorShape | no | Specifies indicators' shape. If onRenderIndicator is provided - this property is ignored |
129+
| indicatorClassName | string | no | Specifies additional class applied to slide position indicators |
130+
| indicatorStyle | React.CSSProperties | no | Specifies additional styles applied to slide position indicators |
131+
| onRenderIndicator | (index: number, onClick: (e: React.MouseEvent&lt;HTMLElement&gt; | React.TouchEvent&lt;HTMLElement&gt;, selectedIndex: number) => void) => JSX.Element | no | Function to render indicator element |
74132

75133
enum `CarouselButtonsLocation`
76134

@@ -92,4 +150,37 @@ Provides options for carousel buttons display mode.
92150
| buttonsOnly | Only icon buttons are displayed. |
93151
| hidden | Buttons are not displayed. They appear onhover event. |
94152

153+
enum `CarouselIndicatorShape`
154+
155+
Provides options for carousel indicators' shape.
156+
157+
| Value | Description |
158+
| ---- | ---- |
159+
| circle | Indicators displayed as cirlces |
160+
| square | Indicators displayed as squares |
161+
| rectangle | Indicators displayed as rectangles |
162+
163+
Interface `ICarouselImageProps`
164+
165+
Allows to easily render a set of `CarouselImage` components in the carousel
166+
| Property | Type | Required | Description |
167+
| ---- | ---- | ---- | ---- |
168+
| imageSrc | string | yes | Image source |
169+
| imageFit | ImageFit | no | Specifies the method to be used to fit image. Default: `ImageFit.none`. See [Fluent UI Image](https://developer.microsoft.com/en-us/fluentui#/controls/web/image#implementation) |
170+
| url | string | no | URL to be opened when clicking on details |
171+
| title | string | no | Title to display in details |
172+
| description | string \| JSX.Element | no | Description to show in details. Can be either a string (text) or JSX.Element to show HTML. |
173+
| target | "_blank" \| "_self" | no | Target of the URL to open. Default `"_blank"` |
174+
| showDetailsOnHover | boolean | no | Specifies if the details are shown on hover or constantly |
175+
| className | string | no | Class to apply to the component |
176+
| style | React.CSSProperties | no | Styles to apply to the component |
177+
| imgClassName | string | no | Class to apply to the image control |
178+
| imgStyle | React.CSSProperties | no | Styles to apply to the image control |
179+
| detailsClassName | string | no | Class to apply to the details control |
180+
| detailsStyle | React.CSSProperties | no | Styles to apply to the details control |
181+
| titleClassName | string | no | Class to apply to the title control |
182+
| titleStyle | React.CSSProperties | no | Styles to apply to the title control |
183+
| descriptionClassName | string | no | Class to apply to the description control |
184+
| descriptionStyle | React.CSSProperties | no | Styles to apply to the description control |
185+
95186
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Carousel)

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

Lines changed: 176 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,182 @@
1+
@import "~office-ui-fabric-react/dist/sass/References.scss";
2+
3+
@keyframes slideleft {
4+
0% {
5+
left: 0;
6+
right: 0;
7+
}
8+
100% {
9+
left: -100%;
10+
right: 100%;
11+
}
12+
}
13+
14+
@keyframes slideright {
15+
0% {
16+
left: 0;
17+
right: 0;
18+
}
19+
100% {
20+
left: 100%;
21+
right: -100%;
22+
}
23+
}
24+
25+
@keyframes slidefromright {
26+
0% {
27+
left: 100%;
28+
right: -100%;
29+
}
30+
100% {
31+
left: 0;
32+
right: 0;
33+
}
34+
}
35+
36+
@keyframes slidefromleft {
37+
0% {
38+
left: -100%;
39+
right: 100%;
40+
}
41+
100% {
42+
left: 0;
43+
right: 0;
44+
}
45+
}
46+
147
.container {
248
display: flex;
349

450
// Styles for elements container
551
.contentContainer {
652
flex-grow: 2;
53+
position: relative;
54+
overflow: hidden;
55+
56+
.slideWrapper {
57+
position: absolute;
58+
left: 0;
59+
right: 0;
60+
top: 0;
61+
bottom: 0;
62+
63+
&.left {
64+
left: -100%;
65+
right: 100%;
66+
}
67+
68+
&.right {
69+
left: 100%;
70+
right: -100%;
71+
}
72+
73+
&.slideLeft {
74+
animation: slideleft linear 0.6s;
75+
}
76+
&.slideRight {
77+
animation: slideright linear 0.6s;
78+
}
79+
&.slideFromRight {
80+
animation: slidefromright linear 0.6s;
81+
}
82+
&.slideFromLeft {
83+
animation: slidefromleft linear 0.6s;
84+
}
85+
}
86+
87+
.carouselImage {
88+
overflow: hidden;
89+
width: 100%;
90+
height: 100%;
91+
position: relative;
92+
93+
.image {
94+
width: 100%;
95+
height: 100%;
96+
}
97+
98+
&.staticDetails {
99+
.details {
100+
top: 60%;
101+
}
102+
}
103+
104+
.details {
105+
background-color: rgba(0, 0, 0, 0.8);
106+
box-sizing: border-box;
107+
color: white;
108+
height: 40%;
109+
left: 0;
110+
padding: 15px;
111+
position: absolute;
112+
right: 0;
113+
top: 100%;
114+
transition: all 0.5s ease;
115+
116+
.title {
117+
display: block;
118+
@include ms-fontSize-l;
119+
padding-bottom: 5px;
120+
}
121+
}
122+
}
123+
124+
&:hover {
125+
.carouselImage.dynamicDetails {
126+
.details {
127+
top: 60%;
128+
}
129+
}
130+
}
131+
}
132+
133+
.indicators {
134+
position: absolute;
135+
right: 0;
136+
bottom: 0;
137+
left: 0;
138+
z-index: 10;
139+
display: flex;
140+
justify-content: center;
141+
list-style: none;
142+
143+
&.rectangle > li {
144+
width: 25px;
145+
height: 5px;
146+
border-top: 10px solid transparent;
147+
border-bottom: 10px solid transparent;
148+
}
149+
150+
&.square > li {
151+
width: 10px;
152+
height: 10px;
153+
border-top: 10px solid transparent;
154+
border-bottom: 10px solid transparent;
155+
}
156+
157+
&.circle > li {
158+
width: 10px;
159+
height: 10px;
160+
border-radius: 50%;
161+
border-top: 10px solid transparent;
162+
border-bottom: 10px solid transparent;
163+
}
164+
165+
& > li {
166+
flex: 0 1 auto;
167+
text-indent: -999px;
168+
cursor: pointer;
169+
background-color: "[theme:white, default: #fff]";
170+
opacity: 0.5;
171+
transition: opacity 0.5 ease;
172+
margin: 0 3px;
173+
box-sizing: content-box;
174+
background-clip: padding-box;
175+
176+
&.active {
177+
opacity: 1;
178+
}
179+
}
7180
}
8181

9182
.loadingComponent {
@@ -30,10 +203,11 @@
30203
flex-direction: column-reverse;
31204
}
32205

33-
34206
// ButtonContainer display mode
35207
.buttonsOnlyPrevButton {
36208
position: absolute;
209+
left: 0;
210+
z-index: 1;
37211
}
38212
.buttonsOnlyPrevButton:hover {
39213
cursor: pointer;
@@ -43,6 +217,7 @@
43217
.buttonsOnlyNextButton {
44218
position: absolute;
45219
left: -32px;
220+
z-index: 1;
46221
}
47222
.buttonsOnlyNextButton:hover {
48223
cursor: pointer;

0 commit comments

Comments
 (0)