@semcore/carousel 3.49.0 → 3.49.1
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/CHANGELOG.md +6 -0
- package/lib/cjs/Carousel.js +24 -22
- package/lib/cjs/Carousel.js.map +1 -1
- package/lib/es6/Carousel.js +24 -22
- package/lib/es6/Carousel.js.map +1 -1
- package/lib/esm/Carousel.mjs +531 -357
- package/lib/esm/index.mjs +2 -2
- package/lib/esm/style/carousel.shadow.css +149 -0
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
- package/lib/esm/translations/de.json.mjs +14 -10
- package/lib/esm/translations/en.json.mjs +14 -10
- package/lib/esm/translations/es.json.mjs +14 -10
- package/lib/esm/translations/fr.json.mjs +14 -10
- package/lib/esm/translations/it.json.mjs +14 -10
- package/lib/esm/translations/ja.json.mjs +14 -10
- package/lib/esm/translations/ko.json.mjs +14 -10
- package/lib/esm/translations/nl.json.mjs +14 -10
- package/lib/esm/translations/pl.json.mjs +14 -10
- package/lib/esm/translations/pt.json.mjs +14 -10
- package/lib/esm/translations/sv.json.mjs +14 -10
- package/lib/esm/translations/tr.json.mjs +14 -10
- package/lib/esm/translations/vi.json.mjs +14 -10
- package/lib/esm/translations/zh.json.mjs +14 -10
- package/package.json +7 -7
package/lib/esm/Carousel.mjs
CHANGED
|
@@ -1,517 +1,691 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { sstyled
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import { Flex
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import { localizedMessages
|
|
21
|
-
import
|
|
22
|
-
import { findAllComponents
|
|
23
|
-
import { createBreakpoints
|
|
24
|
-
import
|
|
25
|
-
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
4
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
5
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
6
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
11
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
12
|
+
import React from "react";
|
|
13
|
+
import Button from "@semcore/button";
|
|
14
|
+
import Modal from "@semcore/modal";
|
|
15
|
+
import { Flex, Box } from "@semcore/flex-box";
|
|
16
|
+
import ChevronRight from "@semcore/icon/ChevronRight/l";
|
|
17
|
+
import ChevronLeft from "@semcore/icon/ChevronLeft/l";
|
|
18
|
+
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
19
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
20
|
+
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
21
|
+
import logger from "@semcore/utils/lib/logger";
|
|
22
|
+
import { findAllComponents } from "@semcore/utils/lib/findComponent";
|
|
23
|
+
import { createBreakpoints } from "@semcore/breakpoints";
|
|
24
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
25
|
+
/*!__reshadow-styles__:"./style/carousel.shadow.css"*/
|
|
26
|
+
var style = (
|
|
26
27
|
/*__reshadow_css_start__*/
|
|
27
|
-
(
|
|
28
|
+
(sstyled.insert(
|
|
28
29
|
/*__inner_css_start__*/
|
|
29
|
-
'.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
"
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
30
|
+
'.___SCarousel_8p47l_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_8p47l_gg_{display:flex;transition:transform var(--duration_8p47l) ease-in-out}.___SContentBox_8p47l_gg_,.___SModalBox_8p47l_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_8p47l_gg_:has(.___SItem_8p47l_gg_.__keyboardFocused_8p47l_gg_):after,.___SModalBox_8p47l_gg_:has(.___SItem_8p47l_gg_.__keyboardFocused_8p47l_gg_):after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}.___SModalContainer_8p47l_gg_{display:flex;transition:transform var(--duration_8p47l) ease-in-out}.___SItem_8p47l_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_8p47l);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_8p47l_gg_.__zoomIn_8p47l_gg_{cursor:zoom-in}.___SItem_8p47l_gg_.__zoomOut_8p47l_gg_{cursor:zoom-out}.___SIndicators_8p47l_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_8p47l_gg_.__keyboardFocused_8p47l_gg_:after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px);top:0;left:3px}.___SIndicator_8p47l_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_8p47l_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_8p47l_gg_.__active_8p47l_gg_{opacity:1}.___SIndicator_8p47l_gg_.__inverted_8p47l_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_8p47l_gg_,.___SPrev_8p47l_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_8p47l_gg_ .___SNextButton_8p47l_gg_ span:has(>svg:only-child),.___SNext_8p47l_gg_ .___SPrevButton_8p47l_gg_ span:has(>svg:only-child),.___SPrev_8p47l_gg_ .___SNextButton_8p47l_gg_ span:has(>svg:only-child),.___SPrev_8p47l_gg_ .___SPrevButton_8p47l_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SNextButton_8p47l_gg_:focus-visible,.___SPrevButton_8p47l_gg_:focus-visible{box-shadow:none}.___SNextButton_8p47l_gg_:focus-visible:after,.___SPrevButton_8p47l_gg_:focus-visible:after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPrev_8p47l_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_8p47l_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_8p47l_gg_.__disabled_8p47l_gg_,.___SPrev_8p47l_gg_.__disabled_8p47l_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_8p47l_gg_{transition:none}}',
|
|
31
|
+
/*__inner_css_end__*/
|
|
32
|
+
"8p47l_gg_"
|
|
33
|
+
), /*__reshadow_css_end__*/
|
|
34
|
+
{
|
|
35
|
+
"__SCarousel": "___SCarousel_8p47l_gg_",
|
|
36
|
+
"__SContainer": "___SContainer_8p47l_gg_",
|
|
37
|
+
"--duration": "--duration_8p47l",
|
|
38
|
+
"__SModalContainer": "___SModalContainer_8p47l_gg_",
|
|
39
|
+
"__SItem": "___SItem_8p47l_gg_",
|
|
40
|
+
"--transform": "--transform_8p47l",
|
|
41
|
+
"_zoomIn": "__zoomIn_8p47l_gg_",
|
|
42
|
+
"_zoomOut": "__zoomOut_8p47l_gg_",
|
|
43
|
+
"__SIndicators": "___SIndicators_8p47l_gg_",
|
|
44
|
+
"_keyboardFocused": "__keyboardFocused_8p47l_gg_",
|
|
45
|
+
"__SIndicator": "___SIndicator_8p47l_gg_",
|
|
46
|
+
"_active": "__active_8p47l_gg_",
|
|
47
|
+
"_inverted": "__inverted_8p47l_gg_",
|
|
48
|
+
"__SPrev": "___SPrev_8p47l_gg_",
|
|
49
|
+
"__SNext": "___SNext_8p47l_gg_",
|
|
50
|
+
"_disabled": "__disabled_8p47l_gg_",
|
|
51
|
+
"__SContentBox": "___SContentBox_8p47l_gg_",
|
|
52
|
+
"__SModalBox": "___SModalBox_8p47l_gg_",
|
|
53
|
+
"__SPrevButton": "___SPrevButton_8p47l_gg_",
|
|
54
|
+
"__SNextButton": "___SNextButton_8p47l_gg_"
|
|
52
55
|
})
|
|
53
|
-
)
|
|
56
|
+
);
|
|
57
|
+
var MAP_TRANSFORM = {
|
|
54
58
|
ArrowLeft: "left",
|
|
55
59
|
ArrowRight: "right"
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
60
|
+
};
|
|
61
|
+
var enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)];
|
|
62
|
+
var media = ["(min-width: 481px)", "(max-width: 480px)"];
|
|
63
|
+
var BreakPoints = createBreakpoints(media);
|
|
64
|
+
var isSmallScreen = function isSmallScreen2(index) {
|
|
65
|
+
return index === 1;
|
|
66
|
+
};
|
|
67
|
+
var CarouselRoot = /* @__PURE__ */ function(_Component) {
|
|
68
|
+
_inherits(CarouselRoot2, _Component);
|
|
69
|
+
var _super = _createSuper(CarouselRoot2);
|
|
70
|
+
function CarouselRoot2(props) {
|
|
71
|
+
var _ref20, _props$index;
|
|
72
|
+
var _this;
|
|
73
|
+
_classCallCheck(this, CarouselRoot2);
|
|
74
|
+
_this = _super.call(this, props);
|
|
75
|
+
_defineProperty(_assertThisInitialized(_this), "defaultItemsCount", 0);
|
|
76
|
+
_defineProperty(_assertThisInitialized(_this), "refCarousel", /* @__PURE__ */ React.createRef());
|
|
77
|
+
_defineProperty(_assertThisInitialized(_this), "refContainer", /* @__PURE__ */ React.createRef());
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "refModalContainer", /* @__PURE__ */ React.createRef());
|
|
79
|
+
_defineProperty(_assertThisInitialized(_this), "_touchStartCoord", -1);
|
|
80
|
+
_defineProperty(_assertThisInitialized(_this), "handlerKeyDown", function(e) {
|
|
81
|
+
var firstSlide = 1;
|
|
82
|
+
var lastSlide = _this.state.items.length + 1;
|
|
83
|
+
switch (e.key) {
|
|
66
84
|
case "ArrowLeft":
|
|
67
85
|
case "ArrowRight": {
|
|
68
|
-
|
|
86
|
+
e.preventDefault();
|
|
87
|
+
_this.transformItem(MAP_TRANSFORM[e.key]);
|
|
69
88
|
break;
|
|
70
89
|
}
|
|
71
90
|
case "Home": {
|
|
72
|
-
|
|
91
|
+
e.preventDefault();
|
|
92
|
+
_this.slideToValue(firstSlide);
|
|
73
93
|
break;
|
|
74
94
|
}
|
|
75
95
|
case "End": {
|
|
76
|
-
|
|
96
|
+
e.preventDefault();
|
|
97
|
+
_this.slideToValue(lastSlide);
|
|
77
98
|
break;
|
|
78
99
|
}
|
|
79
100
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
101
|
+
if (e.metaKey) {
|
|
102
|
+
if (e.key === "ArrowLeft") {
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
_this.slideToValue(firstSlide);
|
|
105
|
+
} else if (e.key === "ArrowRight") {
|
|
106
|
+
e.preventDefault();
|
|
107
|
+
_this.slideToValue(lastSlide);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
if ((e.key === "Enter" || e.key === " ") && e.target instanceof HTMLDivElement && e.target.role === "tabpanel") {
|
|
111
|
+
_this.handleToggleZoomModal();
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
_defineProperty(_assertThisInitialized(_this), "toggleItem", function(item) {
|
|
115
|
+
var removeItem = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
116
|
+
_this.setState(function(prevState) {
|
|
117
|
+
var newItems = removeItem ? prevState.items.filter(function(element) {
|
|
118
|
+
return element.node !== item.node;
|
|
119
|
+
}) : [].concat(_toConsumableArray(prevState.items), [item]);
|
|
87
120
|
return {
|
|
88
|
-
items:
|
|
121
|
+
items: newItems
|
|
89
122
|
};
|
|
90
|
-
})
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
})
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
123
|
+
});
|
|
124
|
+
if (!removeItem) {
|
|
125
|
+
_this.defaultItemsCount++;
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
_defineProperty(_assertThisInitialized(_this), "transformContainer", function() {
|
|
129
|
+
var transform = _this.state.selectedIndex * -1 * 100;
|
|
130
|
+
if (_this.refContainer.current) {
|
|
131
|
+
_this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
|
|
132
|
+
}
|
|
133
|
+
if (_this.refModalContainer.current) {
|
|
134
|
+
_this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
_defineProperty(_assertThisInitialized(_this), "getDirection", function(currentIndex, nextIndex) {
|
|
138
|
+
var bounded = _this.asProps.bounded;
|
|
139
|
+
if (bounded) {
|
|
140
|
+
return currentIndex < nextIndex ? "right" : "left";
|
|
141
|
+
}
|
|
142
|
+
var items = _this.state.items;
|
|
143
|
+
var listIndex = items.map(function(_, ind) {
|
|
144
|
+
return ind;
|
|
145
|
+
});
|
|
146
|
+
var tmpArr = _toConsumableArray(listIndex);
|
|
147
|
+
var minTmpArr = tmpArr[0];
|
|
148
|
+
var maxTmpArr = tmpArr[tmpArr.length - 1];
|
|
149
|
+
if (tmpArr.length === 2) {
|
|
150
|
+
return currentIndex < nextIndex ? "right" : "left";
|
|
151
|
+
}
|
|
152
|
+
if (currentIndex === minTmpArr) {
|
|
153
|
+
tmpArr.unshift(maxTmpArr);
|
|
154
|
+
tmpArr.pop();
|
|
155
|
+
}
|
|
156
|
+
if (currentIndex === maxTmpArr) {
|
|
157
|
+
tmpArr.shift();
|
|
158
|
+
tmpArr.push(minTmpArr);
|
|
159
|
+
}
|
|
160
|
+
var tmpCurrentIndex = tmpArr.indexOf(currentIndex);
|
|
161
|
+
var left = tmpArr.indexOf(nextIndex);
|
|
162
|
+
return left - tmpCurrentIndex < 0 ? "left" : "right";
|
|
163
|
+
});
|
|
164
|
+
_defineProperty(_assertThisInitialized(_this), "slideToValue", function(nextIndex) {
|
|
165
|
+
var selectedIndex = _this.state.selectedIndex;
|
|
166
|
+
var direction = selectedIndex < nextIndex ? "right" : "left";
|
|
167
|
+
var diff = Math.abs(selectedIndex - nextIndex);
|
|
168
|
+
while (diff > 0) {
|
|
169
|
+
_this.transformItem(direction);
|
|
170
|
+
diff--;
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
_defineProperty(_assertThisInitialized(_this), "transformItem", function(direction) {
|
|
174
|
+
var bounded = _this.asProps.bounded;
|
|
175
|
+
var _this$state = _this.state, items = _this$state.items, selectedIndex = _this$state.selectedIndex;
|
|
176
|
+
var maxIndexIndicator = items.length - 1;
|
|
177
|
+
if (direction === "right") {
|
|
178
|
+
if (bounded && selectedIndex === maxIndexIndicator) {
|
|
179
|
+
_this.handlers.index(maxIndexIndicator);
|
|
114
180
|
return;
|
|
115
181
|
}
|
|
116
|
-
if (
|
|
117
|
-
|
|
182
|
+
if (_this.isControlled) {
|
|
183
|
+
_this.handlers.index(selectedIndex === maxIndexIndicator ? 0 : selectedIndex + 1);
|
|
118
184
|
return;
|
|
119
185
|
}
|
|
120
|
-
|
|
186
|
+
_this.setState(function(prevState) {
|
|
121
187
|
return {
|
|
122
|
-
selectedIndex:
|
|
188
|
+
selectedIndex: prevState.selectedIndex + 1
|
|
123
189
|
};
|
|
124
190
|
}, function() {
|
|
125
|
-
|
|
191
|
+
_this.transformContainer();
|
|
192
|
+
_this.handlers.index(_this.getIndex());
|
|
126
193
|
});
|
|
127
194
|
return;
|
|
128
195
|
}
|
|
129
|
-
if (
|
|
130
|
-
if (
|
|
131
|
-
|
|
196
|
+
if (direction === "left") {
|
|
197
|
+
if (bounded && selectedIndex === 0) {
|
|
198
|
+
_this.handlers.index(0);
|
|
132
199
|
return;
|
|
133
200
|
}
|
|
134
|
-
if (
|
|
135
|
-
|
|
201
|
+
if (_this.isControlled) {
|
|
202
|
+
_this.handlers.index(selectedIndex === 0 ? maxIndexIndicator : selectedIndex - 1);
|
|
136
203
|
return;
|
|
137
204
|
}
|
|
138
|
-
|
|
205
|
+
_this.setState(function(prevState) {
|
|
139
206
|
return {
|
|
140
|
-
selectedIndex:
|
|
207
|
+
selectedIndex: prevState.selectedIndex - 1
|
|
141
208
|
};
|
|
142
209
|
}, function() {
|
|
143
|
-
|
|
210
|
+
_this.transformContainer();
|
|
211
|
+
_this.handlers.index(_this.getIndex());
|
|
144
212
|
});
|
|
145
213
|
return;
|
|
146
214
|
}
|
|
147
|
-
})
|
|
215
|
+
});
|
|
216
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(direction) {
|
|
148
217
|
return function() {
|
|
149
|
-
|
|
218
|
+
_this.transformItem(direction);
|
|
150
219
|
};
|
|
151
|
-
})
|
|
220
|
+
});
|
|
221
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClickIndicator", function(value) {
|
|
152
222
|
return function() {
|
|
153
|
-
var
|
|
154
|
-
if (!
|
|
155
|
-
var
|
|
156
|
-
|
|
223
|
+
var _this$state2 = _this.state, selectedIndex = _this$state2.selectedIndex, items = _this$state2.items;
|
|
224
|
+
if (!_this.isControlled && value !== selectedIndex) {
|
|
225
|
+
var newValueIndex = Math.floor(selectedIndex / items.length) * items.length + value;
|
|
226
|
+
_this.slideToValue(newValueIndex);
|
|
157
227
|
}
|
|
158
|
-
|
|
228
|
+
_this.handlers.index(value);
|
|
159
229
|
};
|
|
160
|
-
})
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
230
|
+
});
|
|
231
|
+
_defineProperty(_assertThisInitialized(_this), "handlerTouchStart", function(e) {
|
|
232
|
+
_this._touchStartCoord = e.changedTouches[0].clientX;
|
|
233
|
+
});
|
|
234
|
+
_defineProperty(_assertThisInitialized(_this), "handlerTouchEnd", function(e) {
|
|
235
|
+
var touchEndCoord = e.changedTouches[0].clientX;
|
|
236
|
+
var delta = touchEndCoord - _this._touchStartCoord;
|
|
237
|
+
if (delta > 50) {
|
|
238
|
+
_this.transformItem("left");
|
|
239
|
+
} else if (delta < -50) {
|
|
240
|
+
_this.transformItem("right");
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
_defineProperty(_assertThisInitialized(_this), "handleToggleZoomModal", function() {
|
|
244
|
+
_this.setState(function(prevState) {
|
|
167
245
|
return {
|
|
168
|
-
isOpenZoom: !
|
|
246
|
+
isOpenZoom: !prevState.isOpenZoom
|
|
169
247
|
};
|
|
170
248
|
}, function() {
|
|
171
|
-
|
|
249
|
+
_this.state.isOpenZoom && _this.transformContainer();
|
|
172
250
|
});
|
|
173
|
-
})
|
|
174
|
-
|
|
175
|
-
|
|
251
|
+
});
|
|
252
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerKeydownControl", function(direction) {
|
|
253
|
+
return function(e) {
|
|
254
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
255
|
+
e.preventDefault();
|
|
256
|
+
_this.bindHandlerClick(direction)();
|
|
257
|
+
}
|
|
176
258
|
};
|
|
177
|
-
})
|
|
259
|
+
});
|
|
260
|
+
_this.isControlled = props.index !== void 0;
|
|
261
|
+
_this.state = {
|
|
178
262
|
items: [],
|
|
179
|
-
isOpenZoom:
|
|
180
|
-
selectedIndex: (
|
|
181
|
-
}
|
|
263
|
+
isOpenZoom: false,
|
|
264
|
+
selectedIndex: (_ref20 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref20 !== void 0 ? _ref20 : 0
|
|
265
|
+
};
|
|
266
|
+
return _this;
|
|
182
267
|
}
|
|
183
|
-
|
|
268
|
+
_createClass(CarouselRoot2, [{
|
|
184
269
|
key: "uncontrolledProps",
|
|
185
|
-
value: function() {
|
|
186
|
-
var
|
|
270
|
+
value: function uncontrolledProps() {
|
|
271
|
+
var _this2 = this;
|
|
187
272
|
return {
|
|
188
|
-
index: [null, function(
|
|
189
|
-
var
|
|
190
|
-
(
|
|
191
|
-
|
|
192
|
-
|
|
273
|
+
index: [null, function(_index) {
|
|
274
|
+
var _this2$refCarousel$cu;
|
|
275
|
+
(_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 ? void 0 : _this2$refCarousel$cu.blur();
|
|
276
|
+
setTimeout(function() {
|
|
277
|
+
var _this2$refCarousel$cu2;
|
|
278
|
+
(_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 ? void 0 : _this2$refCarousel$cu2.focus();
|
|
193
279
|
}, 0);
|
|
194
280
|
}]
|
|
195
281
|
};
|
|
196
282
|
}
|
|
197
283
|
}, {
|
|
198
284
|
key: "componentDidMount",
|
|
199
|
-
value: function() {
|
|
200
|
-
var
|
|
201
|
-
|
|
202
|
-
selectedIndex
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
285
|
+
value: function componentDidMount() {
|
|
286
|
+
var selectedIndex = this.state.selectedIndex;
|
|
287
|
+
if (selectedIndex !== 0) {
|
|
288
|
+
if (selectedIndex < 0 || selectedIndex >= this.defaultItemsCount) {
|
|
289
|
+
logger.warn(true, "You couldn't use value for the `index` or `defaultIndex` not from `Item's` length range.", CarouselRoot2.displayName);
|
|
290
|
+
this.setState({
|
|
291
|
+
selectedIndex: 0
|
|
292
|
+
});
|
|
293
|
+
} else {
|
|
294
|
+
this.transformContainer();
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
var deprecatedComponents = findAllComponents(this.asProps.Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
|
|
298
|
+
logger.warn(deprecatedComponents.length > 0, "Please, try to remove `Prev`, `Next`, `Indicators` and other children components from your Carousel, except only `Item` elements.", CarouselRoot2.displayName);
|
|
206
299
|
}
|
|
207
300
|
}, {
|
|
208
301
|
key: "componentDidUpdate",
|
|
209
|
-
value: function(
|
|
210
|
-
var
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
302
|
+
value: function componentDidUpdate(prevProps) {
|
|
303
|
+
var _this3 = this;
|
|
304
|
+
var index = this.asProps.index;
|
|
305
|
+
if (prevProps.index !== index && this.isControlled && index !== void 0) {
|
|
306
|
+
this.setState({
|
|
307
|
+
selectedIndex: index
|
|
308
|
+
}, function() {
|
|
309
|
+
return _this3.transformContainer();
|
|
310
|
+
});
|
|
311
|
+
}
|
|
216
312
|
}
|
|
217
313
|
}, {
|
|
218
314
|
key: "getContainerProps",
|
|
219
|
-
value: function() {
|
|
220
|
-
var
|
|
315
|
+
value: function getContainerProps() {
|
|
316
|
+
var duration = this.asProps.duration;
|
|
221
317
|
return {
|
|
222
318
|
ref: this.refContainer,
|
|
223
|
-
duration
|
|
319
|
+
duration
|
|
224
320
|
};
|
|
225
321
|
}
|
|
226
322
|
}, {
|
|
227
323
|
key: "getItemProps",
|
|
228
|
-
value: function(
|
|
229
|
-
var
|
|
324
|
+
value: function getItemProps(props, index) {
|
|
325
|
+
var zoom = this.asProps.zoom;
|
|
326
|
+
var isCurrent = this.isSelected(index);
|
|
230
327
|
return {
|
|
231
328
|
toggleItem: this.toggleItem,
|
|
232
329
|
uid: this.asProps.uid,
|
|
233
|
-
index
|
|
234
|
-
current:
|
|
235
|
-
zoomIn:
|
|
330
|
+
index,
|
|
331
|
+
current: isCurrent,
|
|
332
|
+
zoomIn: zoom,
|
|
236
333
|
onToggleZoomModal: this.handleToggleZoomModal,
|
|
237
|
-
transform:
|
|
334
|
+
transform: isCurrent ? this.getTransform() : void 0,
|
|
238
335
|
isOpenZoom: this.state.isOpenZoom
|
|
239
336
|
};
|
|
240
337
|
}
|
|
241
338
|
}, {
|
|
242
339
|
key: "getPrevProps",
|
|
243
|
-
value: function() {
|
|
244
|
-
var
|
|
245
|
-
|
|
340
|
+
value: function getPrevProps() {
|
|
341
|
+
var _this$asProps = this.asProps, bounded = _this$asProps.bounded, getI18nText = _this$asProps.getI18nText, uid = _this$asProps.uid;
|
|
342
|
+
var _this$state3 = this.state, items = _this$state3.items, selectedIndex = _this$state3.selectedIndex;
|
|
343
|
+
var disabled = false;
|
|
344
|
+
if (items.length && bounded) {
|
|
345
|
+
disabled = selectedIndex === 0;
|
|
346
|
+
}
|
|
347
|
+
return {
|
|
246
348
|
onClick: this.bindHandlerClick("left"),
|
|
247
349
|
onKeyDown: this.bindHandlerKeydownControl("left"),
|
|
248
|
-
disabled
|
|
249
|
-
label:
|
|
250
|
-
"aria-controls": "igc-".concat(
|
|
350
|
+
disabled,
|
|
351
|
+
label: getI18nText("prev"),
|
|
352
|
+
"aria-controls": "igc-".concat(uid, "-carousel")
|
|
251
353
|
};
|
|
252
354
|
}
|
|
253
355
|
}, {
|
|
254
356
|
key: "getNextProps",
|
|
255
|
-
value: function() {
|
|
256
|
-
var
|
|
257
|
-
|
|
357
|
+
value: function getNextProps() {
|
|
358
|
+
var _this$asProps2 = this.asProps, bounded = _this$asProps2.bounded, getI18nText = _this$asProps2.getI18nText, uid = _this$asProps2.uid;
|
|
359
|
+
var _this$state4 = this.state, items = _this$state4.items, selectedIndex = _this$state4.selectedIndex;
|
|
360
|
+
var disabled = false;
|
|
361
|
+
if (items.length && bounded) {
|
|
362
|
+
disabled = selectedIndex === items.length - 1;
|
|
363
|
+
}
|
|
364
|
+
return {
|
|
258
365
|
onClick: this.bindHandlerClick("right"),
|
|
259
366
|
onKeyDown: this.bindHandlerKeydownControl("right"),
|
|
260
|
-
disabled
|
|
261
|
-
label:
|
|
262
|
-
"aria-controls": "igc-".concat(
|
|
367
|
+
disabled,
|
|
368
|
+
label: getI18nText("next"),
|
|
369
|
+
"aria-controls": "igc-".concat(uid, "-carousel")
|
|
263
370
|
};
|
|
264
371
|
}
|
|
265
372
|
}, {
|
|
266
373
|
key: "getIndicatorsProps",
|
|
267
|
-
value: function() {
|
|
268
|
-
var
|
|
374
|
+
value: function getIndicatorsProps() {
|
|
375
|
+
var _this4 = this;
|
|
376
|
+
var items = this.state.items;
|
|
377
|
+
var getI18nText = this.asProps.getI18nText;
|
|
269
378
|
return {
|
|
270
|
-
items:
|
|
379
|
+
items: items.map(function(item, key) {
|
|
271
380
|
return {
|
|
272
|
-
active:
|
|
273
|
-
onClick:
|
|
274
|
-
key
|
|
381
|
+
active: _this4.isSelected(key),
|
|
382
|
+
onClick: _this4.bindHandlerClickIndicator(key),
|
|
383
|
+
key
|
|
275
384
|
};
|
|
276
385
|
}),
|
|
277
386
|
role: "tablist",
|
|
278
|
-
"aria-label":
|
|
387
|
+
"aria-label": getI18nText("slides")
|
|
279
388
|
};
|
|
280
389
|
}
|
|
281
390
|
}, {
|
|
282
391
|
key: "getIndicatorProps",
|
|
283
|
-
value: function(
|
|
284
|
-
var
|
|
392
|
+
value: function getIndicatorProps(_, index) {
|
|
393
|
+
var isCurrent = this.isSelected(index);
|
|
394
|
+
var getI18nText = this.asProps.getI18nText;
|
|
285
395
|
return {
|
|
286
396
|
role: "tab",
|
|
287
|
-
"aria-selected":
|
|
288
|
-
"aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(
|
|
289
|
-
"aria-label":
|
|
290
|
-
slideNumber:
|
|
397
|
+
"aria-selected": isCurrent,
|
|
398
|
+
"aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
|
|
399
|
+
"aria-label": getI18nText("slide", {
|
|
400
|
+
slideNumber: index + 1
|
|
291
401
|
})
|
|
292
402
|
};
|
|
293
403
|
}
|
|
294
404
|
}, {
|
|
295
405
|
key: "getTransform",
|
|
296
|
-
value: function() {
|
|
297
|
-
var
|
|
298
|
-
|
|
406
|
+
value: function getTransform() {
|
|
407
|
+
var _this$state5 = this.state, items = _this$state5.items, selectedIndex = _this$state5.selectedIndex;
|
|
408
|
+
var direction = selectedIndex > 0 ? 1 : -1;
|
|
409
|
+
var count = items.length === 0 ? 0 : Math.floor(selectedIndex / items.length) * direction;
|
|
410
|
+
var transform = selectedIndex > 0 && selectedIndex < items.length ? 0 : 100 * direction * count * items.length;
|
|
411
|
+
return transform;
|
|
299
412
|
}
|
|
300
413
|
}, {
|
|
301
414
|
key: "getIndex",
|
|
302
|
-
value: function() {
|
|
303
|
-
var
|
|
304
|
-
|
|
415
|
+
value: function getIndex() {
|
|
416
|
+
var _this$state6 = this.state, items = _this$state6.items, selectedIndex = _this$state6.selectedIndex;
|
|
417
|
+
if (items.length === 0) {
|
|
418
|
+
return 0;
|
|
419
|
+
}
|
|
420
|
+
if (selectedIndex >= 0) {
|
|
421
|
+
return selectedIndex % items.length;
|
|
422
|
+
}
|
|
423
|
+
return (items.length + selectedIndex % items.length) % items.length;
|
|
305
424
|
}
|
|
306
425
|
}, {
|
|
307
426
|
key: "isSelected",
|
|
308
|
-
value: function(
|
|
309
|
-
var
|
|
310
|
-
|
|
427
|
+
value: function isSelected(index) {
|
|
428
|
+
var items = this.state.items;
|
|
429
|
+
if (items.length === 0) {
|
|
430
|
+
return true;
|
|
431
|
+
}
|
|
432
|
+
return index === this.getIndex();
|
|
311
433
|
}
|
|
312
434
|
}, {
|
|
313
435
|
key: "renderModal",
|
|
314
|
-
value: function(
|
|
315
|
-
var
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}), /* @__PURE__ */
|
|
436
|
+
value: function renderModal(isSmall, ComponentItems) {
|
|
437
|
+
var _ref = this.asProps, _ref10, _this5 = this;
|
|
438
|
+
var SModalContainer = Box;
|
|
439
|
+
var SModalBox = Box;
|
|
440
|
+
var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, zoomWidth = _this$asProps3.zoomWidth;
|
|
441
|
+
var isOpenZoom = this.state.isOpenZoom;
|
|
442
|
+
return _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
|
|
443
|
+
"visible": isOpenZoom,
|
|
444
|
+
"onClose": this.handleToggleZoomModal,
|
|
445
|
+
"ghost": true,
|
|
446
|
+
"closable": !isSmall
|
|
447
|
+
}), /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
|
|
448
|
+
"direction": isSmall ? "column" : "row"
|
|
449
|
+
}), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Prev, {
|
|
450
|
+
inverted: true
|
|
451
|
+
}), /* @__PURE__ */ React.createElement(SModalBox, _ref10.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref10.cn("SModalContainer", _objectSpread({}, assignProps({
|
|
326
452
|
"aria-live": "polite",
|
|
327
|
-
"use:duration": "".concat(
|
|
328
|
-
ref: this.refModalContainer,
|
|
453
|
+
"use:duration": "".concat(duration, "ms"),
|
|
454
|
+
"ref": this.refModalContainer,
|
|
329
455
|
"use:w": void 0,
|
|
330
|
-
wMax:
|
|
331
|
-
},
|
|
332
|
-
return /* @__PURE__ */
|
|
333
|
-
key:
|
|
334
|
-
uid
|
|
335
|
-
index:
|
|
336
|
-
current:
|
|
456
|
+
"wMax": zoomWidth
|
|
457
|
+
}, _ref))), ComponentItems.map(function(item, i) {
|
|
458
|
+
return /* @__PURE__ */ React.createElement(Carousel.Item, _extends({}, item.props, {
|
|
459
|
+
key: item.key,
|
|
460
|
+
uid,
|
|
461
|
+
index: i,
|
|
462
|
+
current: _this5.isSelected(i),
|
|
337
463
|
toggleItem: void 0,
|
|
338
|
-
zoom:
|
|
339
|
-
zoomOut:
|
|
340
|
-
transform:
|
|
464
|
+
zoom: true,
|
|
465
|
+
zoomOut: true,
|
|
466
|
+
transform: _this5.isSelected(i) ? _this5.getTransform() : void 0
|
|
341
467
|
}));
|
|
342
|
-
}))),
|
|
343
|
-
justifyContent: "center",
|
|
344
|
-
mt: 2
|
|
345
|
-
}), /* @__PURE__ */
|
|
346
|
-
inverted:
|
|
347
|
-
}), /* @__PURE__ */
|
|
348
|
-
inverted:
|
|
349
|
-
})) : /* @__PURE__ */
|
|
350
|
-
inverted:
|
|
351
|
-
})), !
|
|
352
|
-
inverted:
|
|
468
|
+
}))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
|
|
469
|
+
"justifyContent": "center",
|
|
470
|
+
"mt": 2
|
|
471
|
+
}), /* @__PURE__ */ React.createElement(Carousel.Prev, {
|
|
472
|
+
inverted: true
|
|
473
|
+
}), /* @__PURE__ */ React.createElement(Carousel.Next, {
|
|
474
|
+
inverted: true
|
|
475
|
+
})) : /* @__PURE__ */ React.createElement(Carousel.Next, {
|
|
476
|
+
inverted: true
|
|
477
|
+
})), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Indicators, {
|
|
478
|
+
inverted: true
|
|
353
479
|
}));
|
|
354
480
|
}
|
|
355
481
|
}, {
|
|
356
482
|
key: "render",
|
|
357
|
-
value: function() {
|
|
358
|
-
var
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
"
|
|
368
|
-
|
|
369
|
-
"
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
483
|
+
value: function render() {
|
|
484
|
+
var _ref2 = this.asProps, _ref11, _this6 = this;
|
|
485
|
+
var SCarousel = Box;
|
|
486
|
+
var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, uid = _this$asProps4.uid, hasZoom = _this$asProps4.zoom, ariaLabel = _this$asProps4["aria-label"], ariaRoledescription = _this$asProps4["aria-roledescription"], indicators = _this$asProps4.indicators;
|
|
487
|
+
var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
|
|
488
|
+
var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
|
|
489
|
+
return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, assignProps({
|
|
490
|
+
"role": "region",
|
|
491
|
+
"roledescription": "carousel",
|
|
492
|
+
"onKeyDown": this.handlerKeyDown,
|
|
493
|
+
"onTouchStart": this.handlerTouchStart,
|
|
494
|
+
"onTouchEnd": this.handlerTouchEnd,
|
|
495
|
+
"ref": this.refCarousel,
|
|
496
|
+
"id": "igc-".concat(uid, "-carousel"),
|
|
497
|
+
"aria-roledescription": ariaRoledescription
|
|
498
|
+
}, _ref2))), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref11.cn("Flex", {}), /* @__PURE__ */ React.createElement(Carousel.Prev, null), /* @__PURE__ */ React.createElement(Carousel.ContentBox, null, /* @__PURE__ */ React.createElement(Carousel.Container, {
|
|
499
|
+
"aria-label": ariaLabel
|
|
500
|
+
}, /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})))), /* @__PURE__ */ React.createElement(Carousel.Next, null)), indicators === "default" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null), indicators === "preview" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null, function() {
|
|
501
|
+
return ComponentItems.map(function(item, index) {
|
|
502
|
+
return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({}, item.props, {
|
|
503
|
+
key: item.key,
|
|
374
504
|
w: 100,
|
|
375
505
|
h: 100,
|
|
376
506
|
"aria-roledescription": "slide",
|
|
377
|
-
active:
|
|
378
|
-
onClick:
|
|
507
|
+
active: _this6.isSelected(index),
|
|
508
|
+
onClick: _this6.bindHandlerClickIndicator(index)
|
|
379
509
|
}));
|
|
380
510
|
});
|
|
381
|
-
})) : /* @__PURE__ */
|
|
382
|
-
return
|
|
511
|
+
})) : /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
|
|
512
|
+
return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
|
|
383
513
|
})));
|
|
384
514
|
}
|
|
385
|
-
}])
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
515
|
+
}]);
|
|
516
|
+
return CarouselRoot2;
|
|
517
|
+
}(Component);
|
|
518
|
+
_defineProperty(CarouselRoot, "displayName", "Carousel");
|
|
519
|
+
_defineProperty(CarouselRoot, "defaultProps", {
|
|
389
520
|
defaultIndex: 0,
|
|
390
521
|
duration: 350,
|
|
391
522
|
step: 100,
|
|
392
|
-
bounded:
|
|
393
|
-
i18n:
|
|
523
|
+
bounded: false,
|
|
524
|
+
i18n: localizedMessages,
|
|
394
525
|
locale: "en",
|
|
395
526
|
indicators: "default"
|
|
396
527
|
});
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
var
|
|
400
|
-
var
|
|
401
|
-
|
|
402
|
-
|
|
528
|
+
_defineProperty(CarouselRoot, "style", style);
|
|
529
|
+
_defineProperty(CarouselRoot, "enhance", enhance);
|
|
530
|
+
var Container = function Container2(props) {
|
|
531
|
+
var _ref3 = arguments[0], _ref12;
|
|
532
|
+
var SContainer = Box;
|
|
533
|
+
var styles = props.styles, duration = props.duration;
|
|
534
|
+
return _ref12 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, assignProps({
|
|
535
|
+
"use:duration": "".concat(duration, "ms"),
|
|
403
536
|
"aria-live": "polite"
|
|
404
|
-
},
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
537
|
+
}, _ref3))));
|
|
538
|
+
};
|
|
539
|
+
var ContentBox = function ContentBox2(props) {
|
|
540
|
+
var _ref4 = arguments[0], _ref13;
|
|
541
|
+
var SContentBox = Box;
|
|
542
|
+
var styles = props.styles;
|
|
543
|
+
return _ref13 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
|
|
544
|
+
};
|
|
545
|
+
var Item = /* @__PURE__ */ function(_Component2) {
|
|
546
|
+
_inherits(Item2, _Component2);
|
|
547
|
+
var _super2 = _createSuper(Item2);
|
|
548
|
+
function Item2() {
|
|
549
|
+
var _this7;
|
|
550
|
+
_classCallCheck(this, Item2);
|
|
551
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
552
|
+
args[_key] = arguments[_key];
|
|
553
|
+
}
|
|
554
|
+
_this7 = _super2.call.apply(_super2, [this].concat(args));
|
|
555
|
+
_defineProperty(_assertThisInitialized(_this7), "refItem", /* @__PURE__ */ React.createRef());
|
|
556
|
+
_defineProperty(_assertThisInitialized(_this7), "keepFocusTimeout", void 0);
|
|
557
|
+
return _this7;
|
|
417
558
|
}
|
|
418
|
-
|
|
559
|
+
_createClass(Item2, [{
|
|
419
560
|
key: "componentDidMount",
|
|
420
|
-
value: function() {
|
|
421
|
-
var
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
561
|
+
value: function componentDidMount() {
|
|
562
|
+
var _this$props = this.props, toggleItem = _this$props.toggleItem, transform = _this$props.transform;
|
|
563
|
+
var refItem = this.refItem.current;
|
|
564
|
+
toggleItem && refItem && toggleItem({
|
|
565
|
+
node: refItem
|
|
566
|
+
});
|
|
567
|
+
if (transform && refItem) {
|
|
568
|
+
refItem.style.transform = "translateX(".concat(transform, "%)");
|
|
569
|
+
}
|
|
425
570
|
}
|
|
426
571
|
}, {
|
|
427
572
|
key: "componentWillUnmount",
|
|
428
|
-
value: function() {
|
|
429
|
-
var
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
573
|
+
value: function componentWillUnmount() {
|
|
574
|
+
var toggleItem = this.props.toggleItem;
|
|
575
|
+
var refItem = this.refItem.current;
|
|
576
|
+
toggleItem && refItem && toggleItem({
|
|
577
|
+
node: refItem
|
|
578
|
+
}, true);
|
|
579
|
+
clearTimeout(this.keepFocusTimeout);
|
|
433
580
|
}
|
|
434
581
|
}, {
|
|
435
582
|
key: "componentDidUpdate",
|
|
436
|
-
value: function(
|
|
437
|
-
var
|
|
583
|
+
value: function componentDidUpdate(prevProps) {
|
|
584
|
+
var _this8 = this;
|
|
438
585
|
clearTimeout(this.keepFocusTimeout);
|
|
439
|
-
var
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
586
|
+
var transform = this.props.transform;
|
|
587
|
+
var refItem = this.refItem.current;
|
|
588
|
+
if (prevProps.transform !== transform && refItem) {
|
|
589
|
+
refItem.style.transform = "translateX(".concat(transform, "%)");
|
|
590
|
+
}
|
|
591
|
+
if (this.props.current) {
|
|
592
|
+
this.keepFocusTimeout = setTimeout(function() {
|
|
593
|
+
var _document$activeEleme;
|
|
594
|
+
if (document.activeElement !== refItem && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.carousel) === (refItem === null || refItem === void 0 ? void 0 : refItem.dataset.carousel)) {
|
|
595
|
+
refItem === null || refItem === void 0 ? void 0 : refItem.focus();
|
|
596
|
+
}
|
|
597
|
+
}, 100);
|
|
598
|
+
}
|
|
599
|
+
if (prevProps.isOpenZoom === true && this.props.isOpenZoom === false && this.props.current && !this.props.zoomOut) {
|
|
600
|
+
this.keepFocusTimeout = setTimeout(function() {
|
|
601
|
+
var _this8$refItem$curren;
|
|
602
|
+
(_this8$refItem$curren = _this8.refItem.current) === null || _this8$refItem$curren === void 0 ? void 0 : _this8$refItem$curren.focus();
|
|
603
|
+
}, 200);
|
|
604
|
+
}
|
|
447
605
|
}
|
|
448
606
|
}, {
|
|
449
607
|
key: "render",
|
|
450
|
-
value: function() {
|
|
451
|
-
var
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
"
|
|
456
|
-
|
|
457
|
-
"
|
|
458
|
-
"
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
608
|
+
value: function render() {
|
|
609
|
+
var _ref5 = this.asProps, _ref14;
|
|
610
|
+
var _this$props2 = this.props, styles = _this$props2.styles, index = _this$props2.index, uid = _this$props2.uid, current = _this$props2.current, zoomIn = _this$props2.zoomIn, onToggleZoomModal = _this$props2.onToggleZoomModal;
|
|
611
|
+
var SItem = Box;
|
|
612
|
+
return _ref14 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, assignProps({
|
|
613
|
+
"ref": this.refItem,
|
|
614
|
+
"role": "tabpanel",
|
|
615
|
+
"data-carousel": "igc-".concat(uid, "-carousel"),
|
|
616
|
+
"id": "igc-".concat(uid, "-carousel-item-").concat(index),
|
|
617
|
+
"aria-current": current,
|
|
618
|
+
"use:tabIndex": current ? 0 : -1,
|
|
619
|
+
"onClick": zoomIn ? onToggleZoomModal : void 0,
|
|
620
|
+
"zoomIn": zoomIn
|
|
621
|
+
}, _ref5))));
|
|
462
622
|
}
|
|
463
|
-
}])
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
623
|
+
}]);
|
|
624
|
+
return Item2;
|
|
625
|
+
}(Component);
|
|
626
|
+
_defineProperty(Item, "enhance", [keyboardFocusEnhance(false)]);
|
|
627
|
+
var Prev = function Prev2(props) {
|
|
628
|
+
var _ref6 = arguments[0], _ref15;
|
|
629
|
+
var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top = props.top, top = _props$top === void 0 ? 0 : _props$top, inverted = props.inverted;
|
|
630
|
+
var SPrev = Box;
|
|
631
|
+
var SPrevButton = Button;
|
|
632
|
+
return _ref15 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, assignProps({
|
|
633
|
+
"top": top
|
|
634
|
+
}, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref15.cn("SPrevButton", {
|
|
635
|
+
"addonLeft": ChevronLeft,
|
|
636
|
+
"aria-label": label,
|
|
637
|
+
"theme": inverted ? "invert" : "muted",
|
|
638
|
+
"use": "tertiary",
|
|
639
|
+
"size": "l"
|
|
476
640
|
})));
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
641
|
+
};
|
|
642
|
+
var Next = function Next2(props) {
|
|
643
|
+
var _ref7 = arguments[0], _ref16;
|
|
644
|
+
var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top2 = props.top, top = _props$top2 === void 0 ? 0 : _props$top2, inverted = props.inverted;
|
|
645
|
+
var SNext = Box;
|
|
646
|
+
var SNextButton = Button;
|
|
647
|
+
return _ref16 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, assignProps({
|
|
648
|
+
"top": top
|
|
649
|
+
}, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref16.cn("SNextButton", {
|
|
650
|
+
"addonLeft": ChevronRight,
|
|
651
|
+
"aria-label": label,
|
|
652
|
+
"theme": inverted ? "invert" : "muted",
|
|
653
|
+
"use": "tertiary",
|
|
654
|
+
"size": "l"
|
|
487
655
|
})));
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
656
|
+
};
|
|
657
|
+
var Indicators = function Indicators2(_ref21) {
|
|
658
|
+
var _ref8 = arguments[0], _ref18;
|
|
659
|
+
var items = _ref21.items, styles = _ref21.styles, Children = _ref21.Children, inverted = _ref21.inverted;
|
|
660
|
+
var SIndicators = Box;
|
|
661
|
+
if (Children.origin) {
|
|
662
|
+
var _ref17;
|
|
663
|
+
return _ref17 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
|
|
493
664
|
}
|
|
494
|
-
return
|
|
495
|
-
return /* @__PURE__ */
|
|
496
|
-
key:
|
|
497
|
-
},
|
|
498
|
-
inverted
|
|
665
|
+
return _ref18 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
|
|
666
|
+
return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
|
|
667
|
+
key: index
|
|
668
|
+
}, item, {
|
|
669
|
+
inverted
|
|
499
670
|
}));
|
|
500
671
|
}));
|
|
501
672
|
};
|
|
502
|
-
|
|
503
|
-
var
|
|
504
|
-
var
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
673
|
+
Indicators.enhance = [keyboardFocusEnhance()];
|
|
674
|
+
var Indicator = function Indicator2(_ref22) {
|
|
675
|
+
var _ref9 = arguments[0], _ref19;
|
|
676
|
+
var styles = _ref22.styles, Children = _ref22.Children;
|
|
677
|
+
var SIndicator = Box;
|
|
678
|
+
return _ref19 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref19.cn("Children", {})));
|
|
679
|
+
};
|
|
680
|
+
var Carousel = createComponent(CarouselRoot, {
|
|
681
|
+
Container,
|
|
682
|
+
ContentBox,
|
|
683
|
+
Indicators,
|
|
684
|
+
Indicator,
|
|
685
|
+
Item,
|
|
686
|
+
Prev,
|
|
687
|
+
Next
|
|
514
688
|
});
|
|
515
689
|
export {
|
|
516
|
-
|
|
690
|
+
Carousel as default
|
|
517
691
|
};
|