@hitachivantara/uikit-react-lab 3.52.3 → 3.55.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/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +130 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +196 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js +53 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js +49 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +173 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js +25 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +133 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js +31 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/StepNavigation/StepNavigation.js +389 -0
- package/dist/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/StepNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/index.js +16 -0
- package/dist/StepNavigation/index.js.map +1 -0
- package/dist/StepNavigation/styles.js +41 -0
- package/dist/StepNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/utils.js +15 -0
- package/dist/StepNavigation/utils.js.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +19 -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/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js +112 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js +176 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js +45 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +132 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js +113 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/legacy/StepNavigation/StepNavigation.js +353 -0
- package/dist/legacy/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/styles.js +33 -0
- package/dist/legacy/StepNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/utils.js +6 -0
- package/dist/legacy/StepNavigation/utils.js.map +1 -0
- package/dist/legacy/index.d.ts +6 -0
- package/dist/legacy/index.js +2 -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/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js +111 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js +175 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js +43 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +121 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js +110 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/modern/StepNavigation/StepNavigation.js +336 -0
- package/dist/modern/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/styles.js +31 -0
- package/dist/modern/StepNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/utils.js +6 -0
- package/dist/modern/StepNavigation/utils.js.map +1 -0
- package/dist/modern/index.d.ts +6 -0
- package/dist/modern/index.js +2 -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
|