@hitachivantara/uikit-react-lab 3.53.0 → 3.54.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/ImageCarousel/ImageCarousel.js +615 -0
- package/dist/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/ImageCarousel/index.d.ts +2 -0
- package/dist/ImageCarousel/index.js +16 -0
- package/dist/ImageCarousel/index.js.map +1 -0
- package/dist/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/ImageCarousel/styles.js +238 -0
- package/dist/ImageCarousel/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +3 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js +0 -3
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +10 -1
- package/dist/index.js.map +1 -1
- package/dist/legacy/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js +574 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/legacy/ImageCarousel/index.d.ts +2 -0
- package/dist/legacy/ImageCarousel/index.js +2 -0
- package/dist/legacy/ImageCarousel/index.js.map +1 -0
- package/dist/legacy/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/legacy/ImageCarousel/styles.js +228 -0
- package/dist/legacy/ImageCarousel/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +3 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js +0 -3
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
- package/dist/legacy/index.d.ts +3 -0
- package/dist/legacy/index.js +1 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js +499 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/modern/ImageCarousel/index.d.ts +2 -0
- package/dist/modern/ImageCarousel/index.js +2 -0
- package/dist/modern/ImageCarousel/index.js.map +1 -0
- package/dist/modern/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/modern/ImageCarousel/styles.js +241 -0
- package/dist/modern/ImageCarousel/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +3 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js +0 -3
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
- package/dist/modern/index.d.ts +3 -0
- package/dist/modern/index.js +1 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,574 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
+
|
|
5
|
+
var _Close, _Fullscreen, _Backwards, _Forwards, _Backwards2, _Forwards2;
|
|
6
|
+
|
|
7
|
+
var _excluded = ["className", "classes", "documents", "title", "id", "fullscreen", "thumbnails", "lowCardinality", "infiniteCarousel", "xs", "onChange", "counter", "currentStep", "setCurrentStep", "visibleArrows", "variant"];
|
|
8
|
+
import "core-js/modules/es.array.map.js";
|
|
9
|
+
import "core-js/modules/es.array.slice.js";
|
|
10
|
+
import "core-js/modules/es.array.concat.js";
|
|
11
|
+
import React, { useState, useRef, useEffect, useCallback } from "react";
|
|
12
|
+
import PropTypes from "prop-types";
|
|
13
|
+
import clsx from "clsx";
|
|
14
|
+
import { setId, useUniqueId, HvButton, HvContainer, HvTypography, HvGrid, HvStack, HvPanel, useScrollTo } from "@hitachivantara/uikit-react-core";
|
|
15
|
+
import { Button, makeStyles, withStyles, Fade } from "@material-ui/core";
|
|
16
|
+
import { Backwards, Forwards, Close, Fullscreen } from "@hitachivantara/uikit-react-icons";
|
|
17
|
+
import styles from "./styles";
|
|
18
|
+
/**
|
|
19
|
+
* ImageCarousel description/documentation paragraph
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
var HvImageCarousel = function HvImageCarousel(props) {
|
|
23
|
+
var className = props.className,
|
|
24
|
+
classes = props.classes,
|
|
25
|
+
documents = props.documents,
|
|
26
|
+
title = props.title,
|
|
27
|
+
id = props.id,
|
|
28
|
+
_props$fullscreen = props.fullscreen,
|
|
29
|
+
fullscreenProp = _props$fullscreen === void 0 ? false : _props$fullscreen,
|
|
30
|
+
_props$thumbnails = props.thumbnails,
|
|
31
|
+
thumbnails = _props$thumbnails === void 0 ? false : _props$thumbnails,
|
|
32
|
+
_props$lowCardinality = props.lowCardinality,
|
|
33
|
+
lowCardinality = _props$lowCardinality === void 0 ? false : _props$lowCardinality,
|
|
34
|
+
_props$infiniteCarous = props.infiniteCarousel,
|
|
35
|
+
infiniteCarousel = _props$infiniteCarous === void 0 ? false : _props$infiniteCarous,
|
|
36
|
+
_props$xs = props.xs,
|
|
37
|
+
xs = _props$xs === void 0 ? false : _props$xs,
|
|
38
|
+
onChange = props.onChange,
|
|
39
|
+
_props$counter = props.counter,
|
|
40
|
+
counter = _props$counter === void 0 ? false : _props$counter,
|
|
41
|
+
_props$currentStep = props.currentStep,
|
|
42
|
+
currentStep = _props$currentStep === void 0 ? 0 : _props$currentStep,
|
|
43
|
+
setCurrentStep = props.setCurrentStep,
|
|
44
|
+
_props$visibleArrows = props.visibleArrows,
|
|
45
|
+
visibleArrows = _props$visibleArrows === void 0 ? false : _props$visibleArrows,
|
|
46
|
+
_props$variant = props.variant,
|
|
47
|
+
variant = _props$variant === void 0 ? "contain" : _props$variant,
|
|
48
|
+
others = _objectWithoutProperties(props, _excluded);
|
|
49
|
+
|
|
50
|
+
var elementId = useUniqueId(id, "hvcarousel");
|
|
51
|
+
|
|
52
|
+
var _useState = useState(false),
|
|
53
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
54
|
+
fullscreen = _useState2[0],
|
|
55
|
+
setFullscreen = _useState2[1];
|
|
56
|
+
|
|
57
|
+
var options = documents.map(function (element) {
|
|
58
|
+
return {
|
|
59
|
+
src: element.src,
|
|
60
|
+
value: setId(elementId, element.value)
|
|
61
|
+
};
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
var _useState3 = useState(0),
|
|
65
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
66
|
+
sliceStart = _useState4[0],
|
|
67
|
+
setSliceStart = _useState4[1];
|
|
68
|
+
|
|
69
|
+
var _useState5 = useState(currentStep),
|
|
70
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
71
|
+
selImage = _useState6[0],
|
|
72
|
+
setImage = _useState6[1];
|
|
73
|
+
|
|
74
|
+
var _useState7 = useState(0),
|
|
75
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
76
|
+
offset = _useState8[0],
|
|
77
|
+
setOffset = _useState8[1];
|
|
78
|
+
|
|
79
|
+
var _useState9 = useState(false),
|
|
80
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
81
|
+
imageHover = _useState10[0],
|
|
82
|
+
setImageHover = _useState10[1];
|
|
83
|
+
|
|
84
|
+
var direction = "next";
|
|
85
|
+
var useStyles = makeStyles(function (theme) {
|
|
86
|
+
return {
|
|
87
|
+
button: {
|
|
88
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo3
|
|
89
|
+
},
|
|
90
|
+
imageBox: {
|
|
91
|
+
minWidth: "100%",
|
|
92
|
+
display: "flex",
|
|
93
|
+
justifyContent: "center"
|
|
94
|
+
},
|
|
95
|
+
allImages: {
|
|
96
|
+
width: "max-content",
|
|
97
|
+
display: "flex"
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
});
|
|
101
|
+
var style = useStyles();
|
|
102
|
+
|
|
103
|
+
var _useScrollTo = useScrollTo(0, setId(elementId, "panel"), false, 100, documents, onChange, "row"),
|
|
104
|
+
_useScrollTo2 = _slicedToArray(_useScrollTo, 2),
|
|
105
|
+
selectedIndex = _useScrollTo2[0],
|
|
106
|
+
setScrollTo = _useScrollTo2[1];
|
|
107
|
+
|
|
108
|
+
var _useScrollTo3 = useScrollTo(0, setId(elementId, "bigPanel"), false, 0, options, onChange, "row"),
|
|
109
|
+
_useScrollTo4 = _slicedToArray(_useScrollTo3, 2),
|
|
110
|
+
selectedBigIndex = _useScrollTo4[0],
|
|
111
|
+
setBigScrollTo = _useScrollTo4[1];
|
|
112
|
+
|
|
113
|
+
var refBackwards = useRef(null);
|
|
114
|
+
var refForwards = useRef(null);
|
|
115
|
+
var typeCircle = "circle";
|
|
116
|
+
var handleSelection = useCallback(function (event, value, index) {
|
|
117
|
+
var wrappedOnChange = function wrappedOnChange() {
|
|
118
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
setScrollTo(event, value, index, wrappedOnChange);
|
|
122
|
+
}, [onChange, setScrollTo]);
|
|
123
|
+
|
|
124
|
+
var handleFocus = function handleFocus(focus) {
|
|
125
|
+
if (focus === refBackwards.current || focus === refForwards.current) focus.focus();
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
var handleBigSelection = useCallback(function (event, value, index) {
|
|
129
|
+
var wrappedOnChange = function wrappedOnChange() {
|
|
130
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
setBigScrollTo(event, value, index, wrappedOnChange);
|
|
134
|
+
}, [onChange, setBigScrollTo]);
|
|
135
|
+
var handleVisibility = useCallback(function (event, value, index) {
|
|
136
|
+
var image = document.getElementById(value);
|
|
137
|
+
var panel = document.getElementById(setId(elementId, "panel"));
|
|
138
|
+
var container = document.getElementById(setId(elementId, "container"));
|
|
139
|
+
var containerWidth = container.offsetWidth;
|
|
140
|
+
var offsetPanel = panel.offsetLeft;
|
|
141
|
+
var offsetImage = image.offsetLeft;
|
|
142
|
+
var imageWidth = image.offsetWidth;
|
|
143
|
+
var scroll = panel.scrollLeft;
|
|
144
|
+
var focus = document.activeElement;
|
|
145
|
+
|
|
146
|
+
if (offsetPanel + offsetImage + offset + imageWidth - scroll > containerWidth || offsetImage - scroll < 0) {
|
|
147
|
+
handleSelection(event, value, index);
|
|
148
|
+
handleFocus(focus);
|
|
149
|
+
}
|
|
150
|
+
}, [elementId, handleSelection, offset]);
|
|
151
|
+
useEffect(function () {
|
|
152
|
+
setCurrentStep === null || setCurrentStep === void 0 ? void 0 : setCurrentStep(selImage);
|
|
153
|
+
}, [selImage, setCurrentStep]);
|
|
154
|
+
useEffect(function () {
|
|
155
|
+
if (fullscreen) setOffset(150);else setOffset(0);
|
|
156
|
+
|
|
157
|
+
if (thumbnails) {
|
|
158
|
+
handleVisibility(undefined, documents[selImage].value, selImage, selectedIndex);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
handleBigSelection(undefined, options[selImage].value, selImage, selectedBigIndex);
|
|
162
|
+
}, [documents, fullscreen, handleBigSelection, handleVisibility, options, selImage, selectedBigIndex, selectedIndex, thumbnails]);
|
|
163
|
+
|
|
164
|
+
var changeSlice = function changeSlice() {
|
|
165
|
+
if (direction === "next") {
|
|
166
|
+
if (infiniteCarousel && selImage === documents.length - 1) setSliceStart(0);else if (selImage > sliceStart + 2 && selImage !== documents.length - 2) setSliceStart(sliceStart + 1);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
if (direction === "prev") {
|
|
170
|
+
if (infiniteCarousel && selImage === 0) setSliceStart(documents.length > 5 ? documents.length - 5 : 0);else if (selImage < sliceStart + 2 && selImage !== 1) setSliceStart(sliceStart - 1);
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
var nextImage = function nextImage() {
|
|
175
|
+
var next;
|
|
176
|
+
if (selImage !== documents.length - 1) next = selImage + 1;else if (infiniteCarousel) next = 0;
|
|
177
|
+
setImage(next);
|
|
178
|
+
|
|
179
|
+
if (xs) {
|
|
180
|
+
direction = "next";
|
|
181
|
+
changeSlice();
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
var previousImage = function previousImage() {
|
|
186
|
+
var previous;
|
|
187
|
+
if (selImage !== 0) previous = selImage - 1;else if (infiniteCarousel) previous = documents.length - 1;
|
|
188
|
+
setImage(previous);
|
|
189
|
+
|
|
190
|
+
if (xs) {
|
|
191
|
+
direction = "prev";
|
|
192
|
+
changeSlice();
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
var styleThumbnail = function styleThumbnail(index) {
|
|
197
|
+
if (index !== selImage) return classes.img;
|
|
198
|
+
return classes.thumbnailSelected;
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
var circleType = function circleType(index) {
|
|
202
|
+
if (index === selImage) {
|
|
203
|
+
typeCircle = "BigCircle";
|
|
204
|
+
if (xs) return classes.xsSelectedCircle;
|
|
205
|
+
return classes.selectedCircle;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
typeCircle = "Circle";
|
|
209
|
+
return classes.miniCircle;
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
return /*#__PURE__*/React.createElement(HvContainer, _extends({
|
|
213
|
+
id: setId(elementId, "container"),
|
|
214
|
+
className: clsx(className, classes.root, xs ? "xs" : "nxs", fullscreen && classes.fullscreenStyle)
|
|
215
|
+
}, others), !xs && /*#__PURE__*/React.createElement("div", {
|
|
216
|
+
className: classes.title
|
|
217
|
+
}, /*#__PURE__*/React.createElement("div", null, title), fullscreenProp && /*#__PURE__*/React.createElement("div", null, fullscreen ? /*#__PURE__*/React.createElement(HvButton, {
|
|
218
|
+
className: classes.closeButton,
|
|
219
|
+
icon: true,
|
|
220
|
+
"aria-label": "Close",
|
|
221
|
+
onClick: function onClick() {
|
|
222
|
+
return setFullscreen(!fullscreen);
|
|
223
|
+
}
|
|
224
|
+
}, _Close || (_Close = /*#__PURE__*/React.createElement(Close, null))) : /*#__PURE__*/React.createElement(HvButton, {
|
|
225
|
+
icon: true,
|
|
226
|
+
"aria-label": "Fullscreen",
|
|
227
|
+
onClick: function onClick() {
|
|
228
|
+
return setFullscreen(true);
|
|
229
|
+
}
|
|
230
|
+
}, _Fullscreen || (_Fullscreen = /*#__PURE__*/React.createElement(Fullscreen, null))))), /*#__PURE__*/React.createElement(HvContainer, {
|
|
231
|
+
className: clsx(classes.imageContainer, fullscreen ? "fullscreen" : "notFullscreen", !xs && "nxs"),
|
|
232
|
+
onFocus: function onFocus() {
|
|
233
|
+
return setImageHover(true);
|
|
234
|
+
},
|
|
235
|
+
onMouseOver: function onMouseOver() {
|
|
236
|
+
return setImageHover(true);
|
|
237
|
+
},
|
|
238
|
+
onBlur: function onBlur() {
|
|
239
|
+
return setImageHover(false);
|
|
240
|
+
},
|
|
241
|
+
onMouseOut: function onMouseOut() {
|
|
242
|
+
return setImageHover(false);
|
|
243
|
+
}
|
|
244
|
+
}, /*#__PURE__*/React.createElement(HvPanel, {
|
|
245
|
+
className: clsx(classes.stack, xs ? "xs" : "nxs"),
|
|
246
|
+
id: setId(elementId, "bigPanel")
|
|
247
|
+
}, options.map(function (element, index) {
|
|
248
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
249
|
+
className: style.imageBox,
|
|
250
|
+
id: element.value,
|
|
251
|
+
key: "div ".concat(element.value)
|
|
252
|
+
}, /*#__PURE__*/React.createElement(Fade, {
|
|
253
|
+
in: selImage === index || xs,
|
|
254
|
+
timeout: {
|
|
255
|
+
appear: 500,
|
|
256
|
+
enter: 1200,
|
|
257
|
+
exit: 200
|
|
258
|
+
}
|
|
259
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
260
|
+
className: clsx(classes.selectedImage, xs ? "xs" : "nxs", fullscreen ? "fullscreen" : "notFullscreen", variant),
|
|
261
|
+
src: element.src,
|
|
262
|
+
alt: element.value,
|
|
263
|
+
key: "image ".concat(element.value)
|
|
264
|
+
})));
|
|
265
|
+
})), (xs || lowCardinality) && /*#__PURE__*/React.createElement("div", {
|
|
266
|
+
className: clsx(classes.lowButtons, !xs && "nxs")
|
|
267
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Fade, {
|
|
268
|
+
in: imageHover || visibleArrows
|
|
269
|
+
}, /*#__PURE__*/React.createElement(HvButton, {
|
|
270
|
+
ref: refBackwards,
|
|
271
|
+
className: classes.button,
|
|
272
|
+
icon: true,
|
|
273
|
+
"aria-label": "Backwards",
|
|
274
|
+
onClick: function onClick(event) {
|
|
275
|
+
return previousImage(event);
|
|
276
|
+
}
|
|
277
|
+
}, _Backwards || (_Backwards = /*#__PURE__*/React.createElement(Backwards, null))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Fade, {
|
|
278
|
+
in: imageHover || visibleArrows
|
|
279
|
+
}, /*#__PURE__*/React.createElement(HvButton, {
|
|
280
|
+
ref: refForwards,
|
|
281
|
+
className: classes.button,
|
|
282
|
+
icon: true,
|
|
283
|
+
"aria-label": "Forwards",
|
|
284
|
+
onClick: function onClick(event) {
|
|
285
|
+
return nextImage(event);
|
|
286
|
+
}
|
|
287
|
+
}, _Forwards || (_Forwards = /*#__PURE__*/React.createElement(Forwards, null)))))), xs && /*#__PURE__*/React.createElement("div", {
|
|
288
|
+
className: classes.xsCircles
|
|
289
|
+
}, documents.map(function (element, index) {
|
|
290
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
291
|
+
className: circleType(index),
|
|
292
|
+
title: typeCircle,
|
|
293
|
+
key: "Circle ".concat(element.value)
|
|
294
|
+
});
|
|
295
|
+
}).slice(sliceStart, sliceStart + 5)), counter && /*#__PURE__*/React.createElement("div", {
|
|
296
|
+
className: clsx(classes.divCounter, !xs && "nxs")
|
|
297
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
298
|
+
className: classes.counter
|
|
299
|
+
}, /*#__PURE__*/React.createElement(HvTypography, {
|
|
300
|
+
variant: "normalText",
|
|
301
|
+
style: {
|
|
302
|
+
color: "white"
|
|
303
|
+
}
|
|
304
|
+
}, "".concat(selImage + 1, "/").concat(documents.length))))), !xs && /*#__PURE__*/React.createElement(React.Fragment, null, lowCardinality ? /*#__PURE__*/React.createElement("div", {
|
|
305
|
+
className: classes.circles
|
|
306
|
+
}, documents.map(function (element, index) {
|
|
307
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
308
|
+
className: circleType(index),
|
|
309
|
+
title: "".concat(typeCircle, " ").concat(index),
|
|
310
|
+
key: "Circle ".concat(element.value)
|
|
311
|
+
});
|
|
312
|
+
})) : /*#__PURE__*/React.createElement(HvGrid, {
|
|
313
|
+
className: clsx(classes.normalButtons),
|
|
314
|
+
container: true,
|
|
315
|
+
justifyContent: "space-between",
|
|
316
|
+
alignItems: "center"
|
|
317
|
+
}, /*#__PURE__*/React.createElement(HvGrid, {
|
|
318
|
+
item: true
|
|
319
|
+
}, /*#__PURE__*/React.createElement(HvButton, {
|
|
320
|
+
className: infiniteCarousel || selImage !== 0 ? "" : classes.hidden,
|
|
321
|
+
ref: refBackwards,
|
|
322
|
+
icon: true,
|
|
323
|
+
"aria-label": "Backwards",
|
|
324
|
+
onClick: function onClick(event) {
|
|
325
|
+
return previousImage(event);
|
|
326
|
+
}
|
|
327
|
+
}, _Backwards2 || (_Backwards2 = /*#__PURE__*/React.createElement(Backwards, null)))), /*#__PURE__*/React.createElement(HvGrid, {
|
|
328
|
+
item: true
|
|
329
|
+
}, /*#__PURE__*/React.createElement(HvTypography, {
|
|
330
|
+
variant: "highlightText",
|
|
331
|
+
component: "a"
|
|
332
|
+
}, selImage + 1), /*#__PURE__*/React.createElement(HvTypography, {
|
|
333
|
+
variant: "normalText",
|
|
334
|
+
component: "a"
|
|
335
|
+
}, " / ".concat(documents.length))), /*#__PURE__*/React.createElement(HvGrid, {
|
|
336
|
+
item: true
|
|
337
|
+
}, /*#__PURE__*/React.createElement(HvButton, {
|
|
338
|
+
className: infiniteCarousel || selImage !== documents.length - 1 ? "" : classes.hidden,
|
|
339
|
+
ref: refForwards,
|
|
340
|
+
icon: true,
|
|
341
|
+
"aria-label": "Forwards",
|
|
342
|
+
onClick: function onClick(event) {
|
|
343
|
+
return nextImage(event);
|
|
344
|
+
}
|
|
345
|
+
}, _Forwards2 || (_Forwards2 = /*#__PURE__*/React.createElement(Forwards, null))))), thumbnails && /*#__PURE__*/React.createElement(HvPanel, {
|
|
346
|
+
className: classes.panel,
|
|
347
|
+
id: setId(elementId, "panel")
|
|
348
|
+
}, /*#__PURE__*/React.createElement(HvStack, {
|
|
349
|
+
key: "Thumbnails",
|
|
350
|
+
direction: "row",
|
|
351
|
+
spacing: "xs",
|
|
352
|
+
withNavigation: true
|
|
353
|
+
}, documents.map(function (element, i) {
|
|
354
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
355
|
+
id: element.value,
|
|
356
|
+
key: "Button ".concat(element.value),
|
|
357
|
+
className: classes.thumbnailButton,
|
|
358
|
+
onClick: function onClick() {
|
|
359
|
+
return setImage(i);
|
|
360
|
+
}
|
|
361
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
362
|
+
className: styleThumbnail(i),
|
|
363
|
+
src: element.src,
|
|
364
|
+
alt: element.value,
|
|
365
|
+
key: "Thumbnail ".concat(element.value)
|
|
366
|
+
}));
|
|
367
|
+
})))));
|
|
368
|
+
};
|
|
369
|
+
|
|
370
|
+
process.env.NODE_ENV !== "production" ? HvImageCarousel.propTypes = {
|
|
371
|
+
/**
|
|
372
|
+
* Class names to be applied.
|
|
373
|
+
*/
|
|
374
|
+
className: PropTypes.string,
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* A Jss Object used to override or extend the styles applied.
|
|
378
|
+
*/
|
|
379
|
+
classes: PropTypes.shape({
|
|
380
|
+
/**
|
|
381
|
+
* Styles applied to the component root class.
|
|
382
|
+
*/
|
|
383
|
+
root: PropTypes.string,
|
|
384
|
+
|
|
385
|
+
/**
|
|
386
|
+
* Styles applied to the component SelectedImage.
|
|
387
|
+
*/
|
|
388
|
+
selectedImage: PropTypes.string,
|
|
389
|
+
|
|
390
|
+
/**
|
|
391
|
+
* Styles applied to xs mode
|
|
392
|
+
*/
|
|
393
|
+
xsMode: PropTypes.string,
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* Styles applied to image in xsMode
|
|
397
|
+
*/
|
|
398
|
+
xsImage: PropTypes.string,
|
|
399
|
+
|
|
400
|
+
/**
|
|
401
|
+
* Styles applied to panel with low cardinality circles
|
|
402
|
+
*/
|
|
403
|
+
circles: PropTypes.string,
|
|
404
|
+
|
|
405
|
+
/**
|
|
406
|
+
* Styles applied to xs mode circles
|
|
407
|
+
*/
|
|
408
|
+
xsCircles: PropTypes.string,
|
|
409
|
+
|
|
410
|
+
/**
|
|
411
|
+
* Styles applied to unavailable button
|
|
412
|
+
*/
|
|
413
|
+
hidden: PropTypes.string,
|
|
414
|
+
|
|
415
|
+
/**
|
|
416
|
+
* Styles applied to the carousel title
|
|
417
|
+
*/
|
|
418
|
+
title: PropTypes.string,
|
|
419
|
+
|
|
420
|
+
/**
|
|
421
|
+
* Styles applied to the counter
|
|
422
|
+
*/
|
|
423
|
+
counter: PropTypes.string,
|
|
424
|
+
|
|
425
|
+
/**
|
|
426
|
+
* Styles applied to the div with the counter
|
|
427
|
+
*/
|
|
428
|
+
divCounter: PropTypes.string,
|
|
429
|
+
|
|
430
|
+
/**
|
|
431
|
+
* Styles applied to the thumbnails
|
|
432
|
+
*/
|
|
433
|
+
img: PropTypes.string,
|
|
434
|
+
|
|
435
|
+
/**
|
|
436
|
+
* Styles applied to the selected thumbnail
|
|
437
|
+
*/
|
|
438
|
+
thumbnailSelected: PropTypes.string,
|
|
439
|
+
|
|
440
|
+
/**
|
|
441
|
+
* Styles applied to the thumbnail button
|
|
442
|
+
*/
|
|
443
|
+
thumbnailButton: PropTypes.string,
|
|
444
|
+
|
|
445
|
+
/**
|
|
446
|
+
* Styles applied to the low cardinality circles
|
|
447
|
+
*/
|
|
448
|
+
miniCircle: PropTypes.string,
|
|
449
|
+
|
|
450
|
+
/**
|
|
451
|
+
* Styles applied to the circle of the selected image
|
|
452
|
+
*/
|
|
453
|
+
selectedCircle: PropTypes.string,
|
|
454
|
+
|
|
455
|
+
/**
|
|
456
|
+
* Styles applied to the circle of the selected image in xsmode
|
|
457
|
+
*/
|
|
458
|
+
xsSelectedCircle: PropTypes.string,
|
|
459
|
+
|
|
460
|
+
/**
|
|
461
|
+
* Styles applied to the panel with low cardinality buttons
|
|
462
|
+
*/
|
|
463
|
+
lowButtons: PropTypes.string,
|
|
464
|
+
|
|
465
|
+
/**
|
|
466
|
+
* Styles applied to the container of the selected image
|
|
467
|
+
*/
|
|
468
|
+
imageContainer: PropTypes.string,
|
|
469
|
+
|
|
470
|
+
/**
|
|
471
|
+
* Styles applied to the panel with the thumbnails
|
|
472
|
+
*/
|
|
473
|
+
stack: PropTypes.string,
|
|
474
|
+
|
|
475
|
+
/**
|
|
476
|
+
* Styles applied to the panel that contains the buttons and counter in default mode
|
|
477
|
+
*/
|
|
478
|
+
normalButtons: PropTypes.string,
|
|
479
|
+
|
|
480
|
+
/**
|
|
481
|
+
* Styles applied to fullscreen mode.
|
|
482
|
+
*/
|
|
483
|
+
fullscreenStyle: PropTypes.string,
|
|
484
|
+
|
|
485
|
+
/**
|
|
486
|
+
* Styles applied to close button in fullscreen mode.
|
|
487
|
+
*/
|
|
488
|
+
closeButton: PropTypes.string,
|
|
489
|
+
|
|
490
|
+
/**
|
|
491
|
+
* Styles applied to change image buttons.
|
|
492
|
+
*/
|
|
493
|
+
button: PropTypes.string,
|
|
494
|
+
|
|
495
|
+
/**
|
|
496
|
+
* Styles applied to thumbnails panel.
|
|
497
|
+
*/
|
|
498
|
+
panel: PropTypes.string
|
|
499
|
+
}).isRequired,
|
|
500
|
+
|
|
501
|
+
/**
|
|
502
|
+
* Documents to be displayed.
|
|
503
|
+
*/
|
|
504
|
+
documents: PropTypes.array.isRequired,
|
|
505
|
+
|
|
506
|
+
/**
|
|
507
|
+
* Title of the image carousel
|
|
508
|
+
*/
|
|
509
|
+
title: PropTypes.node,
|
|
510
|
+
|
|
511
|
+
/**
|
|
512
|
+
* A function called each time the selected image changes.
|
|
513
|
+
*/
|
|
514
|
+
onChange: PropTypes.func,
|
|
515
|
+
|
|
516
|
+
/**
|
|
517
|
+
* Id to be applied to the root node.
|
|
518
|
+
*/
|
|
519
|
+
id: PropTypes.string,
|
|
520
|
+
|
|
521
|
+
/**
|
|
522
|
+
* A flag that activates the thumbnails.
|
|
523
|
+
*/
|
|
524
|
+
thumbnails: PropTypes.bool,
|
|
525
|
+
|
|
526
|
+
/**
|
|
527
|
+
* A flag that switches to low cardinality mode
|
|
528
|
+
*/
|
|
529
|
+
lowCardinality: PropTypes.bool,
|
|
530
|
+
|
|
531
|
+
/**
|
|
532
|
+
* A flag that activates the infinite carousel behavior
|
|
533
|
+
*/
|
|
534
|
+
infiniteCarousel: PropTypes.bool,
|
|
535
|
+
|
|
536
|
+
/**
|
|
537
|
+
* A flag that activates a counter on the top right corner of the selected image
|
|
538
|
+
*/
|
|
539
|
+
counter: PropTypes.bool,
|
|
540
|
+
|
|
541
|
+
/**
|
|
542
|
+
* Set Image Carousel to fullscreen mode
|
|
543
|
+
*/
|
|
544
|
+
fullscreen: PropTypes.bool,
|
|
545
|
+
|
|
546
|
+
/**
|
|
547
|
+
* Set selected image to a particular image in documents
|
|
548
|
+
*/
|
|
549
|
+
currentStep: PropTypes.number,
|
|
550
|
+
|
|
551
|
+
/**
|
|
552
|
+
* Function that changes the selected image
|
|
553
|
+
*/
|
|
554
|
+
setCurrentStep: PropTypes.func,
|
|
555
|
+
|
|
556
|
+
/**
|
|
557
|
+
* Image Carousel set to xs mode
|
|
558
|
+
*/
|
|
559
|
+
xs: PropTypes.bool,
|
|
560
|
+
|
|
561
|
+
/**
|
|
562
|
+
* Arrows always displayed in low cardinality or xs mode
|
|
563
|
+
*/
|
|
564
|
+
visibleArrows: PropTypes.bool,
|
|
565
|
+
|
|
566
|
+
/**
|
|
567
|
+
* Selected image fit variant
|
|
568
|
+
*/
|
|
569
|
+
variant: PropTypes.string
|
|
570
|
+
} : void 0;
|
|
571
|
+
export default withStyles(styles, {
|
|
572
|
+
name: "HvImageCarousel"
|
|
573
|
+
})(HvImageCarousel);
|
|
574
|
+
//# sourceMappingURL=ImageCarousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageCarousel.js","names":["React","useState","useRef","useEffect","useCallback","PropTypes","clsx","setId","useUniqueId","HvButton","HvContainer","HvTypography","HvGrid","HvStack","HvPanel","useScrollTo","Button","makeStyles","withStyles","Fade","Backwards","Forwards","Close","Fullscreen","styles","HvImageCarousel","props","className","classes","documents","title","id","fullscreen","fullscreenProp","thumbnails","lowCardinality","infiniteCarousel","xs","onChange","counter","currentStep","setCurrentStep","visibleArrows","variant","others","elementId","setFullscreen","options","map","element","src","value","sliceStart","setSliceStart","selImage","setImage","offset","setOffset","imageHover","setImageHover","direction","useStyles","theme","button","backgroundColor","hv","palette","atmosphere","atmo3","imageBox","minWidth","display","justifyContent","allImages","width","style","selectedIndex","setScrollTo","selectedBigIndex","setBigScrollTo","refBackwards","refForwards","typeCircle","handleSelection","event","index","wrappedOnChange","handleFocus","focus","current","handleBigSelection","handleVisibility","image","document","getElementById","panel","container","containerWidth","offsetWidth","offsetPanel","offsetLeft","offsetImage","imageWidth","scroll","scrollLeft","activeElement","undefined","changeSlice","length","nextImage","next","previousImage","previous","styleThumbnail","img","thumbnailSelected","circleType","xsSelectedCircle","selectedCircle","miniCircle","root","fullscreenStyle","closeButton","imageContainer","stack","appear","enter","exit","selectedImage","lowButtons","xsCircles","slice","divCounter","color","circles","normalButtons","hidden","i","thumbnailButton","propTypes","string","shape","xsMode","xsImage","isRequired","array","node","func","bool","number","name"],"sources":["../../../src/ImageCarousel/ImageCarousel.js"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport {\n setId,\n useUniqueId,\n HvButton,\n HvContainer,\n HvTypography,\n HvGrid,\n HvStack,\n HvPanel,\n useScrollTo,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { Button, makeStyles, withStyles, Fade } from \"@material-ui/core\";\n\nimport { Backwards, Forwards, Close, Fullscreen } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\n/**\n * ImageCarousel description/documentation paragraph\n */\nconst HvImageCarousel = (props) => {\n const {\n className,\n classes,\n documents,\n title,\n id,\n fullscreen: fullscreenProp = false,\n thumbnails = false,\n lowCardinality = false,\n infiniteCarousel = false,\n xs = false,\n onChange,\n counter = false,\n currentStep = 0,\n setCurrentStep,\n visibleArrows = false,\n variant = \"contain\",\n ...others\n } = props;\n const elementId = useUniqueId(id, \"hvcarousel\");\n const [fullscreen, setFullscreen] = useState(false);\n const options = documents.map((element) => ({\n src: element.src,\n value: setId(elementId, element.value),\n }));\n\n const [sliceStart, setSliceStart] = useState(0);\n const [selImage, setImage] = useState(currentStep);\n const [offset, setOffset] = useState(0);\n const [imageHover, setImageHover] = useState(false);\n let direction = \"next\";\n const useStyles = makeStyles((theme) => ({\n button: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n imageBox: {\n minWidth: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n allImages: {\n width: \"max-content\",\n display: \"flex\",\n },\n }));\n const style = useStyles();\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n 0,\n setId(elementId, \"panel\"),\n false,\n 100,\n documents,\n onChange,\n \"row\"\n );\n const [selectedBigIndex, setBigScrollTo] = useScrollTo(\n 0,\n setId(elementId, \"bigPanel\"),\n false,\n 0,\n options,\n onChange,\n \"row\"\n );\n const refBackwards = useRef(null);\n const refForwards = useRef(null);\n let typeCircle = \"circle\";\n\n const handleSelection = useCallback(\n (event, value, index) => {\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n setScrollTo(event, value, index, wrappedOnChange);\n },\n [onChange, setScrollTo]\n );\n\n const handleFocus = (focus) => {\n if (focus === refBackwards.current || focus === refForwards.current) focus.focus();\n };\n\n const handleBigSelection = useCallback(\n (event, value, index) => {\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n setBigScrollTo(event, value, index, wrappedOnChange);\n },\n [onChange, setBigScrollTo]\n );\n\n const handleVisibility = useCallback(\n (event, value, index) => {\n const image = document.getElementById(value);\n const panel = document.getElementById(setId(elementId, \"panel\"));\n const container = document.getElementById(setId(elementId, \"container\"));\n const containerWidth = container.offsetWidth;\n const offsetPanel = panel.offsetLeft;\n const offsetImage = image.offsetLeft;\n const imageWidth = image.offsetWidth;\n const scroll = panel.scrollLeft;\n const focus = document.activeElement;\n\n if (\n offsetPanel + offsetImage + offset + imageWidth - scroll > containerWidth ||\n offsetImage - scroll < 0\n ) {\n handleSelection(event, value, index);\n handleFocus(focus);\n }\n },\n [elementId, handleSelection, offset]\n );\n\n useEffect(() => {\n setCurrentStep?.(selImage);\n }, [selImage, setCurrentStep]);\n\n useEffect(() => {\n if (fullscreen) setOffset(150);\n else setOffset(0);\n\n if (thumbnails) {\n handleVisibility(undefined, documents[selImage].value, selImage, selectedIndex);\n }\n handleBigSelection(undefined, options[selImage].value, selImage, selectedBigIndex);\n }, [\n documents,\n fullscreen,\n handleBigSelection,\n handleVisibility,\n options,\n selImage,\n selectedBigIndex,\n selectedIndex,\n thumbnails,\n ]);\n\n const changeSlice = () => {\n if (direction === \"next\") {\n if (infiniteCarousel && selImage === documents.length - 1) setSliceStart(0);\n else if (selImage > sliceStart + 2 && selImage !== documents.length - 2)\n setSliceStart(sliceStart + 1);\n }\n if (direction === \"prev\") {\n if (infiniteCarousel && selImage === 0)\n setSliceStart(documents.length > 5 ? documents.length - 5 : 0);\n else if (selImage < sliceStart + 2 && selImage !== 1) setSliceStart(sliceStart - 1);\n }\n };\n\n const nextImage = () => {\n let next;\n if (selImage !== documents.length - 1) next = selImage + 1;\n else if (infiniteCarousel) next = 0;\n setImage(next);\n if (xs) {\n direction = \"next\";\n changeSlice();\n }\n };\n\n const previousImage = () => {\n let previous;\n if (selImage !== 0) previous = selImage - 1;\n else if (infiniteCarousel) previous = documents.length - 1;\n setImage(previous);\n if (xs) {\n direction = \"prev\";\n changeSlice();\n }\n };\n\n const styleThumbnail = (index) => {\n if (index !== selImage) return classes.img;\n return classes.thumbnailSelected;\n };\n\n const circleType = (index) => {\n if (index === selImage) {\n typeCircle = \"BigCircle\";\n if (xs) return classes.xsSelectedCircle;\n return classes.selectedCircle;\n }\n typeCircle = \"Circle\";\n return classes.miniCircle;\n };\n\n return (\n <HvContainer\n id={setId(elementId, \"container\")}\n className={clsx(\n className,\n classes.root,\n fullscreen ? classes.fullscreenStyle : \"\",\n xs ? \"xs\" : \"nxs\"\n )}\n {...others}\n >\n {!xs && (\n <div className={classes.title}>\n <div>{title}</div>\n {fullscreenProp && (\n <div>\n {fullscreen ? (\n <HvButton\n className={classes.closeButton}\n icon\n aria-label=\"Close\"\n onClick={() => setFullscreen(!fullscreen)}\n >\n <Close />\n </HvButton>\n ) : (\n <HvButton icon aria-label=\"Fullscreen\" onClick={() => setFullscreen(true)}>\n <Fullscreen />\n </HvButton>\n )}\n </div>\n )}\n </div>\n )}\n <HvContainer\n className={clsx(\n classes.imageContainer,\n !xs ? \"nxs\" : \"\",\n fullscreen ? \"fullscreen\" : \"notFullscreen\"\n )}\n onFocus={() => setImageHover(true)}\n onMouseOver={() => setImageHover(true)}\n onBlur={() => setImageHover(false)}\n onMouseOut={() => setImageHover(false)}\n >\n <HvPanel\n className={clsx(classes.stack, xs ? \"xs\" : \"nxs\")}\n id={setId(elementId, \"bigPanel\")}\n >\n {options.map((element, index) => (\n <div className={style.imageBox} id={element.value} key={`div ${element.value}`}>\n <Fade in={selImage === index || xs} timeout={{ appear: 500, enter: 1200, exit: 200 }}>\n <img\n className={clsx(\n classes.selectedImage,\n xs ? \"xs\" : \"nxs\",\n fullscreen ? \"fullscreen\" : \"notFullscreen\",\n variant\n )}\n src={element.src}\n alt={element.value}\n key={`image ${element.value}`}\n />\n </Fade>\n </div>\n ))}\n </HvPanel>\n {(xs || lowCardinality) && (\n <div className={clsx(classes.lowButtons, !xs ? \"nxs\" : \"\")}>\n <div>\n <Fade in={imageHover || visibleArrows}>\n <HvButton\n ref={refBackwards}\n className={classes.button}\n icon\n aria-label=\"Backwards\"\n onClick={(event) => previousImage(event)}\n >\n <Backwards />\n </HvButton>\n </Fade>\n </div>\n <div>\n <Fade in={imageHover || visibleArrows}>\n <HvButton\n ref={refForwards}\n className={classes.button}\n icon\n aria-label=\"Forwards\"\n onClick={(event) => nextImage(event)}\n >\n <Forwards />\n </HvButton>\n </Fade>\n </div>\n </div>\n )}\n {xs && (\n <div className={classes.xsCircles}>\n {documents\n .map((element, index) => (\n <span\n className={circleType(index)}\n title={typeCircle}\n key={`Circle ${element.value}`}\n />\n ))\n .slice(sliceStart, sliceStart + 5)}\n </div>\n )}\n {counter && (\n <div className={clsx(classes.divCounter, !xs ? \"nxs\" : \"\")}>\n <span className={classes.counter}>\n <HvTypography variant=\"normalText\" style={{ color: \"white\" }}>\n {`${selImage + 1}/${documents.length}`}\n </HvTypography>\n </span>\n </div>\n )}\n </HvContainer>\n {!xs && (\n <>\n {lowCardinality ? (\n <div className={classes.circles}>\n {documents.map((element, index) => (\n <span\n className={circleType(index)}\n title={`${typeCircle} ${index}`}\n key={`Circle ${element.value}`}\n />\n ))}\n </div>\n ) : (\n <HvGrid\n className={clsx(classes.normalButtons)}\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n >\n <HvGrid item>\n <HvButton\n className={infiniteCarousel || selImage !== 0 ? \"\" : classes.hidden}\n ref={refBackwards}\n icon\n aria-label=\"Backwards\"\n onClick={(event) => previousImage(event)}\n >\n <Backwards />\n </HvButton>\n </HvGrid>\n <HvGrid item>\n <HvTypography variant=\"highlightText\" component=\"a\">\n {selImage + 1}\n </HvTypography>\n <HvTypography variant=\"normalText\" component=\"a\">\n {` / ${documents.length}`}\n </HvTypography>\n </HvGrid>\n <HvGrid item>\n <HvButton\n className={\n infiniteCarousel || selImage !== documents.length - 1 ? \"\" : classes.hidden\n }\n ref={refForwards}\n icon\n aria-label=\"Forwards\"\n onClick={(event) => nextImage(event)}\n >\n <Forwards />\n </HvButton>\n </HvGrid>\n </HvGrid>\n )}\n {thumbnails && (\n <HvPanel className={classes.panel} id={setId(elementId, \"panel\")}>\n <HvStack key=\"Thumbnails\" direction=\"row\" spacing=\"xs\" withNavigation>\n {documents.map((element, i) => (\n <Button\n id={element.value}\n key={`Button ${element.value}`}\n className={classes.thumbnailButton}\n onClick={() => setImage(i)}\n >\n <img\n className={styleThumbnail(i)}\n src={element.src}\n alt={element.value}\n key={`Thumbnail ${element.value}`}\n />\n </Button>\n ))}\n </HvStack>\n </HvPanel>\n )}\n </>\n )}\n </HvContainer>\n );\n};\n\nHvImageCarousel.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root class.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the component SelectedImage.\n */\n selectedImage: PropTypes.string,\n /**\n * Styles applied to xs mode\n */\n xsMode: PropTypes.string,\n /**\n * Styles applied to image in xsMode\n */\n xsImage: PropTypes.string,\n /**\n * Styles applied to panel with low cardinality circles\n */\n circles: PropTypes.string,\n /**\n * Styles applied to xs mode circles\n */\n xsCircles: PropTypes.string,\n /**\n * Styles applied to unavailable button\n */\n hidden: PropTypes.string,\n /**\n * Styles applied to the carousel title\n */\n title: PropTypes.string,\n /**\n * Styles applied to the counter\n */\n counter: PropTypes.string,\n /**\n * Styles applied to the div with the counter\n */\n divCounter: PropTypes.string,\n /**\n * Styles applied to the thumbnails\n */\n img: PropTypes.string,\n /**\n * Styles applied to the selected thumbnail\n */\n thumbnailSelected: PropTypes.string,\n /**\n * Styles applied to the thumbnail button\n */\n thumbnailButton: PropTypes.string,\n /**\n * Styles applied to the low cardinality circles\n */\n miniCircle: PropTypes.string,\n /**\n * Styles applied to the circle of the selected image\n */\n selectedCircle: PropTypes.string,\n /**\n * Styles applied to the circle of the selected image in xsmode\n */\n xsSelectedCircle: PropTypes.string,\n /**\n * Styles applied to the panel with low cardinality buttons\n */\n lowButtons: PropTypes.string,\n /**\n * Styles applied to the container of the selected image\n */\n imageContainer: PropTypes.string,\n /**\n * Styles applied to the panel with the thumbnails\n */\n stack: PropTypes.string,\n /**\n * Styles applied to the panel that contains the buttons and counter in default mode\n */\n normalButtons: PropTypes.string,\n /**\n * Styles applied to fullscreen mode.\n */\n fullscreenStyle: PropTypes.string,\n /**\n * Styles applied to close button in fullscreen mode.\n */\n closeButton: PropTypes.string,\n /**\n * Styles applied to change image buttons.\n */\n button: PropTypes.string,\n /**\n * Styles applied to thumbnails panel.\n */\n panel: PropTypes.string,\n }).isRequired,\n /**\n * Documents to be displayed.\n */\n documents: PropTypes.array.isRequired,\n /**\n * Title of the image carousel\n */\n title: PropTypes.node,\n /**\n * A function called each time the selected image changes.\n */\n onChange: PropTypes.func,\n /**\n * Id to be applied to the root node.\n */\n id: PropTypes.string,\n /**\n * A flag that activates the thumbnails.\n */\n thumbnails: PropTypes.bool,\n /**\n * A flag that switches to low cardinality mode\n */\n lowCardinality: PropTypes.bool,\n /**\n * A flag that activates the infinite carousel behavior\n */\n infiniteCarousel: PropTypes.bool,\n /**\n * A flag that activates a counter on the top right corner of the selected image\n */\n counter: PropTypes.bool,\n /**\n * Set Image Carousel to fullscreen mode\n */\n fullscreen: PropTypes.bool,\n /**\n * Set selected image to a particular image in documents\n */\n currentStep: PropTypes.number,\n /**\n * Function that changes the selected image\n */\n setCurrentStep: PropTypes.func,\n /**\n * Image Carousel set to xs mode\n */\n xs: PropTypes.bool,\n /**\n * Arrows always displayed in low cardinality or xs mode\n */\n visibleArrows: PropTypes.bool,\n /**\n * Selected image fit variant\n */\n variant: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvImageCarousel\" })(HvImageCarousel);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/ImageCarousel/index.js"],"sourcesContent":["export { default } from \"./ImageCarousel\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB"}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|