@semcore/carousel 2.2.29 → 2.2.31
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 +12 -0
- package/lib/cjs/Carousel.js +43 -146
- package/lib/cjs/Carousel.js.map +1 -1
- package/lib/cjs/index.js +0 -2
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Carousel.js +43 -152
- package/lib/es6/Carousel.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Carousel.jsx +1 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.2.31] - 2023-04-14
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.50.0 ~> 3.50.2]).
|
|
10
|
+
|
|
11
|
+
## [2.2.30] - 2023-04-03
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Fixed carousel html roles.
|
|
16
|
+
|
|
5
17
|
## [2.2.29] - 2023-03-28
|
|
6
18
|
|
|
7
19
|
### Changed
|
package/lib/cjs/Carousel.js
CHANGED
|
@@ -1,65 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = void 0;
|
|
11
|
-
|
|
12
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
10
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
15
|
-
|
|
16
11
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
-
|
|
18
12
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
19
|
-
|
|
20
13
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
21
|
-
|
|
22
14
|
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
23
|
-
|
|
24
15
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
25
|
-
|
|
26
16
|
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
27
|
-
|
|
28
17
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
29
|
-
|
|
30
18
|
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
31
|
-
|
|
32
19
|
var _react = _interopRequireWildcard(require("react"));
|
|
33
|
-
|
|
34
20
|
var _flexBox = require("@semcore/flex-box");
|
|
35
|
-
|
|
36
21
|
var _l = _interopRequireDefault(require("@semcore/icon/ChevronRight/l"));
|
|
37
|
-
|
|
38
22
|
var _l2 = _interopRequireDefault(require("@semcore/icon/ChevronLeft/l"));
|
|
39
|
-
|
|
40
23
|
var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
41
|
-
|
|
42
24
|
/*__reshadow-styles__:"./style/carousel.shadow.css"*/
|
|
43
|
-
var style = (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
,
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"__SItem": "___SItem_2lqk1_gg_",
|
|
56
|
-
"--transform": "--transform_2lqk1",
|
|
57
|
-
"__SIndicators": "___SIndicators_2lqk1_gg_",
|
|
58
|
-
"__SIndicator": "___SIndicator_2lqk1_gg_",
|
|
59
|
-
"_active": "__active_2lqk1_gg_",
|
|
60
|
-
"__SPrev": "___SPrev_2lqk1_gg_",
|
|
61
|
-
"__SNext": "___SNext_2lqk1_gg_",
|
|
62
|
-
"_disabled": "__disabled_2lqk1_gg_"
|
|
25
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SCarousel_1mkco_gg_{overflow:hidden;outline:0}.___SContainer_1mkco_gg_{display:flex;transition:transform var(--duration_1mkco) ease-in-out}.___SItem_1mkco_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1mkco);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden}.___SIndicators_1mkco_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px)}.___SIndicator_1mkco_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_1mkco_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_1mkco_gg_.__active_1mkco_gg_{opacity:1}.___SNext_1mkco_gg_,.___SPrev_1mkco_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.___SPrev_1mkco_gg_{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SNext_1mkco_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SNext_1mkco_gg_.__disabled_1mkco_gg_,.___SPrev_1mkco_gg_.__disabled_1mkco_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1mkco_gg_{transition:none}}" /*__inner_css_end__*/, "1mkco_gg_") /*__reshadow_css_end__*/, {
|
|
26
|
+
"__SCarousel": "___SCarousel_1mkco_gg_",
|
|
27
|
+
"__SContainer": "___SContainer_1mkco_gg_",
|
|
28
|
+
"--duration": "--duration_1mkco",
|
|
29
|
+
"__SItem": "___SItem_1mkco_gg_",
|
|
30
|
+
"--transform": "--transform_1mkco",
|
|
31
|
+
"__SIndicators": "___SIndicators_1mkco_gg_",
|
|
32
|
+
"__SIndicator": "___SIndicator_1mkco_gg_",
|
|
33
|
+
"_active": "__active_1mkco_gg_",
|
|
34
|
+
"__SPrev": "___SPrev_1mkco_gg_",
|
|
35
|
+
"__SNext": "___SNext_1mkco_gg_",
|
|
36
|
+
"_disabled": "__disabled_1mkco_gg_"
|
|
63
37
|
});
|
|
64
38
|
var position = {
|
|
65
39
|
getItemMin: function getItemMin(items) {
|
|
@@ -91,15 +65,11 @@ var MAP_TRANSFORM = {
|
|
|
91
65
|
ArrowLeft: 'left',
|
|
92
66
|
ArrowRight: 'right'
|
|
93
67
|
};
|
|
94
|
-
|
|
95
68
|
var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
96
69
|
(0, _inherits2["default"])(CarouselRoot, _Component);
|
|
97
|
-
|
|
98
70
|
var _super = (0, _createSuper2["default"])(CarouselRoot);
|
|
99
|
-
|
|
100
71
|
function CarouselRoot(props) {
|
|
101
72
|
var _this;
|
|
102
|
-
|
|
103
73
|
(0, _classCallCheck2["default"])(this, CarouselRoot);
|
|
104
74
|
_this = _super.call(this, props);
|
|
105
75
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refContainer", /*#__PURE__*/_react["default"].createRef());
|
|
@@ -111,19 +81,15 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
111
81
|
case 'ArrowLeft':
|
|
112
82
|
case 'ArrowRight':
|
|
113
83
|
e.preventDefault();
|
|
114
|
-
|
|
115
84
|
var _this$controlTransfor = _this.controlTransformItem(MAP_TRANSFORM[e.key]),
|
|
116
|
-
|
|
117
|
-
|
|
85
|
+
activeItemIndex = _this$controlTransfor.activeItemIndex;
|
|
118
86
|
_this.handlers.index(activeItemIndex);
|
|
119
|
-
|
|
120
87
|
}
|
|
121
88
|
});
|
|
122
89
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleItem", function (item) {
|
|
123
90
|
var removeItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
124
91
|
var index = _this.asProps.index;
|
|
125
92
|
var items = _this.state.items;
|
|
126
|
-
|
|
127
93
|
if (removeItem) {
|
|
128
94
|
_this.updateItems(items.filter(function (element) {
|
|
129
95
|
return element.node !== item.node;
|
|
@@ -140,7 +106,6 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
140
106
|
};
|
|
141
107
|
}, function () {
|
|
142
108
|
var items = _this.state.items;
|
|
143
|
-
|
|
144
109
|
if (items.length < index && index !== 0) {
|
|
145
110
|
_this.slideToValue(_this.indexIndicator, index);
|
|
146
111
|
}
|
|
@@ -163,7 +128,6 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
163
128
|
if (bounded) {
|
|
164
129
|
return currentIndex < nextIndex ? 'right' : 'left';
|
|
165
130
|
}
|
|
166
|
-
|
|
167
131
|
var items = _this.state.items;
|
|
168
132
|
var listIndex = items.map(function (_, ind) {
|
|
169
133
|
return ind;
|
|
@@ -171,46 +135,37 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
171
135
|
var tmpArr = (0, _toConsumableArray2["default"])(listIndex);
|
|
172
136
|
var minTmpArr = tmpArr[0];
|
|
173
137
|
var maxTmpArr = tmpArr[tmpArr.length - 1];
|
|
174
|
-
|
|
175
138
|
if (tmpArr.length === 2) {
|
|
176
139
|
return currentIndex < nextIndex ? 'right' : 'left';
|
|
177
140
|
}
|
|
178
|
-
|
|
179
141
|
if (currentIndex === minTmpArr) {
|
|
180
142
|
tmpArr.unshift(maxTmpArr);
|
|
181
143
|
tmpArr.pop();
|
|
182
144
|
}
|
|
183
|
-
|
|
184
145
|
if (currentIndex === maxTmpArr) {
|
|
185
146
|
tmpArr.shift();
|
|
186
147
|
tmpArr.push(minTmpArr);
|
|
187
148
|
}
|
|
188
|
-
|
|
189
149
|
var tmpCurrentIndex = tmpArr.indexOf(currentIndex);
|
|
190
150
|
var left = tmpArr.indexOf(nextIndex);
|
|
191
151
|
return left - tmpCurrentIndex < 0 ? 'left' : 'right';
|
|
192
152
|
});
|
|
193
153
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "slideToValue", function (currentIndex, nextIndexItem, bounded) {
|
|
194
154
|
if (currentIndex === nextIndexItem) return false;
|
|
195
|
-
|
|
196
155
|
var direction = _this.getDirection(currentIndex, nextIndexItem, bounded || _this.asProps.bounded);
|
|
197
|
-
|
|
198
156
|
var i = currentIndex;
|
|
199
|
-
|
|
200
157
|
while (nextIndexItem !== i) {
|
|
201
158
|
var _this$transformItem = _this.transformItem(direction),
|
|
202
|
-
|
|
203
|
-
|
|
159
|
+
activeItemIndex = _this$transformItem.activeItemIndex;
|
|
204
160
|
i = activeItemIndex;
|
|
205
161
|
}
|
|
206
162
|
});
|
|
207
163
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "controlTransformItem", function (direction) {
|
|
208
164
|
var _this$asProps = _this.asProps,
|
|
209
|
-
|
|
210
|
-
|
|
165
|
+
bounded = _this$asProps.bounded,
|
|
166
|
+
index = _this$asProps.index;
|
|
211
167
|
var items = _this.state.items;
|
|
212
168
|
var maxIndexIndicator = items.length - 1;
|
|
213
|
-
|
|
214
169
|
if (_this.isControlled) {
|
|
215
170
|
if (direction === 'right') {
|
|
216
171
|
if (bounded && index === maxIndexIndicator) {
|
|
@@ -218,99 +173,77 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
218
173
|
activeItemIndex: maxIndexIndicator
|
|
219
174
|
};
|
|
220
175
|
}
|
|
221
|
-
|
|
222
176
|
return {
|
|
223
177
|
activeItemIndex: index === maxIndexIndicator ? 0 : index + 1
|
|
224
178
|
};
|
|
225
179
|
}
|
|
226
|
-
|
|
227
180
|
if (direction === 'left') {
|
|
228
181
|
if (bounded && index === 0) {
|
|
229
182
|
return {
|
|
230
183
|
activeItemIndex: 0
|
|
231
184
|
};
|
|
232
185
|
}
|
|
233
|
-
|
|
234
186
|
return {
|
|
235
187
|
activeItemIndex: index === 0 ? maxIndexIndicator : index - 1
|
|
236
188
|
};
|
|
237
189
|
}
|
|
238
190
|
}
|
|
239
|
-
|
|
240
191
|
return _this.transformItem(direction);
|
|
241
192
|
});
|
|
242
193
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "transformItem", function (direction) {
|
|
243
194
|
var _this$asProps2 = _this.asProps,
|
|
244
|
-
|
|
245
|
-
|
|
195
|
+
bounded = _this$asProps2.bounded,
|
|
196
|
+
step = _this$asProps2.step;
|
|
246
197
|
var items = _this.state.items;
|
|
247
198
|
var maxIndexIndicator = items.length - 1;
|
|
248
199
|
var nextItemPosition = undefined;
|
|
249
|
-
|
|
250
200
|
if (direction === 'right') {
|
|
251
201
|
if (bounded && _this.positionLeftItem === maxIndexIndicator) {
|
|
252
202
|
return {
|
|
253
203
|
activeItemIndex: maxIndexIndicator
|
|
254
204
|
};
|
|
255
205
|
}
|
|
256
|
-
|
|
257
206
|
_this.positionLeftItem += 1;
|
|
258
207
|
var positionItemMax = position.getMax(items);
|
|
259
|
-
|
|
260
208
|
if (_this.positionLeftItem > positionItemMax) {
|
|
261
209
|
nextItemPosition = position.getItemMin(items);
|
|
262
210
|
items[nextItemPosition].position = positionItemMax + 1;
|
|
263
211
|
items[nextItemPosition].transform += items.length * step;
|
|
264
|
-
|
|
265
212
|
_this.updateItems((0, _toConsumableArray2["default"])(items));
|
|
266
213
|
}
|
|
267
|
-
|
|
268
214
|
_this.indexIndicator += 1;
|
|
269
|
-
|
|
270
215
|
if (_this.indexIndicator > maxIndexIndicator) {
|
|
271
216
|
_this.indexIndicator = 0;
|
|
272
217
|
}
|
|
273
|
-
|
|
274
218
|
_this.transform -= step;
|
|
275
219
|
}
|
|
276
|
-
|
|
277
220
|
if (direction === 'left') {
|
|
278
221
|
if (bounded && _this.positionLeftItem === 0) {
|
|
279
222
|
return {
|
|
280
223
|
activeItemIndex: 0
|
|
281
224
|
};
|
|
282
225
|
}
|
|
283
|
-
|
|
284
226
|
_this.positionLeftItem -= 1;
|
|
285
227
|
var positionItemMin = position.getMin(items);
|
|
286
|
-
|
|
287
228
|
if (_this.positionLeftItem < positionItemMin) {
|
|
288
229
|
nextItemPosition = position.getItemMax(items);
|
|
289
230
|
items[nextItemPosition].position = positionItemMin - 1;
|
|
290
231
|
items[nextItemPosition].transform -= items.length * step;
|
|
291
|
-
|
|
292
232
|
_this.updateItems((0, _toConsumableArray2["default"])(items));
|
|
293
233
|
}
|
|
294
|
-
|
|
295
234
|
_this.indexIndicator -= 1;
|
|
296
|
-
|
|
297
235
|
if (_this.indexIndicator < 0) {
|
|
298
236
|
_this.indexIndicator = maxIndexIndicator;
|
|
299
237
|
}
|
|
300
|
-
|
|
301
238
|
_this.transform += step;
|
|
302
239
|
}
|
|
303
|
-
|
|
304
240
|
var activeItemIndex = items.findIndex(function (item) {
|
|
305
241
|
return item.position === _this.positionLeftItem;
|
|
306
242
|
});
|
|
307
|
-
|
|
308
243
|
if (items[activeItemIndex]) {
|
|
309
244
|
items[activeItemIndex].node.style.transform = "translateX(".concat(items[activeItemIndex].transform, "%)");
|
|
310
245
|
}
|
|
311
|
-
|
|
312
246
|
_this.transformContainer(_this.transform);
|
|
313
|
-
|
|
314
247
|
return {
|
|
315
248
|
activeItemIndex: activeItemIndex
|
|
316
249
|
};
|
|
@@ -318,15 +251,13 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
318
251
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClick", function (direction) {
|
|
319
252
|
return function () {
|
|
320
253
|
var _this$controlTransfor2 = _this.controlTransformItem(direction),
|
|
321
|
-
|
|
322
|
-
|
|
254
|
+
activeItemIndex = _this$controlTransfor2.activeItemIndex;
|
|
323
255
|
_this.handlers.index(activeItemIndex);
|
|
324
256
|
};
|
|
325
257
|
});
|
|
326
258
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClickIndicator", function (value) {
|
|
327
259
|
return function () {
|
|
328
260
|
!_this.isControlled && _this.slideToValue(_this.indexIndicator, value, true);
|
|
329
|
-
|
|
330
261
|
_this.handlers.index(value);
|
|
331
262
|
};
|
|
332
263
|
});
|
|
@@ -336,26 +267,21 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
336
267
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerTouchEnd", function (e) {
|
|
337
268
|
var touchEndCoord = e.changedTouches[0].clientX;
|
|
338
269
|
var delta = touchEndCoord - _this._touchStartCoord;
|
|
339
|
-
|
|
340
270
|
if (delta > 50) {
|
|
341
271
|
var _this$controlTransfor3 = _this.controlTransformItem('left'),
|
|
342
|
-
|
|
343
|
-
|
|
272
|
+
activeItemIndex = _this$controlTransfor3.activeItemIndex;
|
|
344
273
|
_this.handlers.index(activeItemIndex);
|
|
345
274
|
} else if (delta < -50) {
|
|
346
275
|
var _this$controlTransfor4 = _this.controlTransformItem('right'),
|
|
347
|
-
|
|
348
|
-
|
|
276
|
+
_activeItemIndex = _this$controlTransfor4.activeItemIndex;
|
|
349
277
|
_this.handlers.index(_activeItemIndex);
|
|
350
278
|
}
|
|
351
279
|
});
|
|
352
280
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerKeydownControl", function (direction) {
|
|
353
281
|
return function (e) {
|
|
354
282
|
var keyCode = e.keyCode;
|
|
355
|
-
|
|
356
283
|
if (keyCode === 13) {
|
|
357
284
|
e.preventDefault();
|
|
358
|
-
|
|
359
285
|
_this.bindHandlerClick(direction)();
|
|
360
286
|
}
|
|
361
287
|
};
|
|
@@ -366,7 +292,6 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
366
292
|
};
|
|
367
293
|
return _this;
|
|
368
294
|
}
|
|
369
|
-
|
|
370
295
|
(0, _createClass2["default"])(CarouselRoot, [{
|
|
371
296
|
key: "uncontrolledProps",
|
|
372
297
|
value: function uncontrolledProps() {
|
|
@@ -378,7 +303,6 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
378
303
|
key: "componentDidUpdate",
|
|
379
304
|
value: function componentDidUpdate(prevProps) {
|
|
380
305
|
var index = this.asProps.index;
|
|
381
|
-
|
|
382
306
|
if (prevProps.index !== index && this.isControlled) {
|
|
383
307
|
this.slideToValue(prevProps.index, index);
|
|
384
308
|
}
|
|
@@ -405,15 +329,13 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
405
329
|
key: "getPrevProps",
|
|
406
330
|
value: function getPrevProps() {
|
|
407
331
|
var _this$asProps3 = this.asProps,
|
|
408
|
-
|
|
409
|
-
|
|
332
|
+
index = _this$asProps3.index,
|
|
333
|
+
bounded = _this$asProps3.bounded;
|
|
410
334
|
var items = this.state.items;
|
|
411
335
|
var disabled = false;
|
|
412
|
-
|
|
413
336
|
if (items.length && bounded) {
|
|
414
337
|
disabled = index === 0;
|
|
415
338
|
}
|
|
416
|
-
|
|
417
339
|
return {
|
|
418
340
|
onClick: this.bindHandlerClick('left'),
|
|
419
341
|
onKeyDown: this.bindHandlerKeydownControl('left'),
|
|
@@ -424,15 +346,13 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
424
346
|
key: "getNextProps",
|
|
425
347
|
value: function getNextProps() {
|
|
426
348
|
var _this$asProps4 = this.asProps,
|
|
427
|
-
|
|
428
|
-
|
|
349
|
+
index = _this$asProps4.index,
|
|
350
|
+
bounded = _this$asProps4.bounded;
|
|
429
351
|
var items = this.state.items;
|
|
430
352
|
var disabled = false;
|
|
431
|
-
|
|
432
353
|
if (items.length && bounded) {
|
|
433
354
|
disabled = index === items.length - 1;
|
|
434
355
|
}
|
|
435
|
-
|
|
436
356
|
return {
|
|
437
357
|
onClick: this.bindHandlerClick('right'),
|
|
438
358
|
onKeyDown: this.bindHandlerKeydownControl('right'),
|
|
@@ -443,7 +363,6 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
443
363
|
key: "getIndicatorsProps",
|
|
444
364
|
value: function getIndicatorsProps() {
|
|
445
365
|
var _this2 = this;
|
|
446
|
-
|
|
447
366
|
var items = this.state.items;
|
|
448
367
|
var index = this.asProps.index;
|
|
449
368
|
return {
|
|
@@ -460,24 +379,21 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
460
379
|
key: "render",
|
|
461
380
|
value: function render() {
|
|
462
381
|
var _ref = this.asProps,
|
|
463
|
-
|
|
464
|
-
|
|
382
|
+
_ref8;
|
|
465
383
|
var SCarousel = _flexBox.Box;
|
|
466
384
|
var _this$asProps5 = this.asProps,
|
|
467
|
-
|
|
468
|
-
|
|
385
|
+
styles = _this$asProps5.styles,
|
|
386
|
+
Children = _this$asProps5.Children;
|
|
469
387
|
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCarousel, _ref8.cn("SCarousel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
470
388
|
"onKeyDown": this.handlerKeyDown,
|
|
471
389
|
"tabIndex": 0,
|
|
472
390
|
"onTouchStart": this.handlerTouchStart,
|
|
473
|
-
"onTouchEnd": this.handlerTouchEnd
|
|
474
|
-
"role": "list"
|
|
391
|
+
"onTouchEnd": this.handlerTouchEnd
|
|
475
392
|
}, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})));
|
|
476
393
|
}
|
|
477
394
|
}]);
|
|
478
395
|
return CarouselRoot;
|
|
479
396
|
}(_core.Component);
|
|
480
|
-
|
|
481
397
|
(0, _defineProperty2["default"])(CarouselRoot, "displayName", 'Carousel');
|
|
482
398
|
(0, _defineProperty2["default"])(CarouselRoot, "defaultProps", {
|
|
483
399
|
defaultIndex: 0,
|
|
@@ -487,31 +403,26 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
487
403
|
});
|
|
488
404
|
(0, _defineProperty2["default"])(CarouselRoot, "style", style);
|
|
489
405
|
(0, _defineProperty2["default"])(CarouselRoot, "enhance", [(0, _uniqueID["default"])()]);
|
|
490
|
-
|
|
491
406
|
var Container = function Container(props) {
|
|
492
407
|
var _ref2 = arguments[0],
|
|
493
|
-
|
|
494
|
-
|
|
408
|
+
_ref9;
|
|
495
409
|
var SContainer = _flexBox.Box;
|
|
496
410
|
var styles = props.styles,
|
|
497
|
-
|
|
411
|
+
duration = props.duration;
|
|
498
412
|
return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref9.cn("SContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
413
|
+
"role": "list",
|
|
499
414
|
"use:duration": "".concat(duration, "ms")
|
|
500
415
|
}, _ref2))));
|
|
501
416
|
};
|
|
502
|
-
|
|
503
417
|
var Item = function Item(props) {
|
|
504
418
|
var _ref3 = arguments[0],
|
|
505
|
-
|
|
506
|
-
|
|
419
|
+
_ref10;
|
|
507
420
|
var styles = props.styles,
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
421
|
+
toggleItem = props.toggleItem,
|
|
422
|
+
index = props.index,
|
|
423
|
+
uid = props.uid;
|
|
511
424
|
var SItem = _flexBox.Box;
|
|
512
|
-
|
|
513
425
|
var refItem = /*#__PURE__*/_react["default"].createRef();
|
|
514
|
-
|
|
515
426
|
(0, _react.useEffect)(function () {
|
|
516
427
|
// add item
|
|
517
428
|
toggleItem({
|
|
@@ -530,18 +441,15 @@ var Item = function Item(props) {
|
|
|
530
441
|
"id": "igc-".concat(uid, "-carousel-item-").concat(index)
|
|
531
442
|
}, _ref3))));
|
|
532
443
|
};
|
|
533
|
-
|
|
534
444
|
var Prev = function Prev(props) {
|
|
535
445
|
var _ref4 = arguments[0],
|
|
536
|
-
|
|
537
|
-
|
|
446
|
+
_ref11;
|
|
538
447
|
var styles = props.styles;
|
|
539
448
|
var SPrev = _flexBox.Box;
|
|
540
449
|
return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPrev, _ref11.cn("SPrev", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
541
450
|
"aria-hidden": "true"
|
|
542
451
|
}, _ref4))));
|
|
543
452
|
};
|
|
544
|
-
|
|
545
453
|
Prev.defaultProps = function () {
|
|
546
454
|
return {
|
|
547
455
|
children: /*#__PURE__*/_react["default"].createElement(_l2["default"], {
|
|
@@ -551,18 +459,15 @@ Prev.defaultProps = function () {
|
|
|
551
459
|
top: 0
|
|
552
460
|
};
|
|
553
461
|
};
|
|
554
|
-
|
|
555
462
|
var Next = function Next(props) {
|
|
556
463
|
var _ref5 = arguments[0],
|
|
557
|
-
|
|
558
|
-
|
|
464
|
+
_ref12;
|
|
559
465
|
var styles = props.styles;
|
|
560
466
|
var SNext = _flexBox.Box;
|
|
561
467
|
return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNext, _ref12.cn("SNext", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
562
468
|
"aria-hidden": "true"
|
|
563
469
|
}, _ref5))));
|
|
564
470
|
};
|
|
565
|
-
|
|
566
471
|
Next.defaultProps = function () {
|
|
567
472
|
return {
|
|
568
473
|
children: /*#__PURE__*/_react["default"].createElement(_l["default"], {
|
|
@@ -572,24 +477,19 @@ Next.defaultProps = function () {
|
|
|
572
477
|
top: 0
|
|
573
478
|
};
|
|
574
479
|
};
|
|
575
|
-
|
|
576
480
|
var Indicators = function Indicators(_ref16) {
|
|
577
481
|
var _ref6 = arguments[0],
|
|
578
|
-
|
|
579
|
-
|
|
482
|
+
_ref14;
|
|
580
483
|
var items = _ref16.items,
|
|
581
|
-
|
|
582
|
-
|
|
484
|
+
styles = _ref16.styles,
|
|
485
|
+
Children = _ref16.Children;
|
|
583
486
|
var SIndicators = _flexBox.Box;
|
|
584
|
-
|
|
585
487
|
if (Children.origin) {
|
|
586
488
|
var _ref13;
|
|
587
|
-
|
|
588
489
|
return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref13.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
589
490
|
"aria-hidden": "true"
|
|
590
491
|
}, _ref6))), /*#__PURE__*/_react["default"].createElement(Children, _ref13.cn("Children", {})));
|
|
591
492
|
}
|
|
592
|
-
|
|
593
493
|
return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref14.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
594
494
|
"aria-hidden": "true"
|
|
595
495
|
}, _ref6))), items.map(function (item, index) {
|
|
@@ -598,17 +498,14 @@ var Indicators = function Indicators(_ref16) {
|
|
|
598
498
|
}, item));
|
|
599
499
|
}));
|
|
600
500
|
};
|
|
601
|
-
|
|
602
501
|
var Indicator = function Indicator(_ref17) {
|
|
603
502
|
var _ref7 = arguments[0],
|
|
604
|
-
|
|
605
|
-
|
|
503
|
+
_ref15;
|
|
606
504
|
var styles = _ref17.styles,
|
|
607
|
-
|
|
505
|
+
Children = _ref17.Children;
|
|
608
506
|
var SIndicator = _flexBox.Box;
|
|
609
507
|
return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicator, _ref15.cn("SIndicator", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref7))), /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {})));
|
|
610
508
|
};
|
|
611
|
-
|
|
612
509
|
var Carousel = (0, _core["default"])(CarouselRoot, {
|
|
613
510
|
Container: Container,
|
|
614
511
|
Indicators: Indicators,
|