@semcore/carousel 16.1.1 → 16.1.2-prerelease.3
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/README.md +1 -31
- package/lib/cjs/Carousel.js +122 -121
- package/lib/cjs/Carousel.js.map +1 -1
- package/lib/cjs/Carousel.types.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +4 -5
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/Carousel.js +120 -118
- package/lib/es6/Carousel.js.map +1 -1
- package/lib/es6/Carousel.types.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/esm/Carousel.mjs +117 -113
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/Carousel.d.ts +1 -1
- package/lib/types/Carousel.types.d.ts +2 -2
- package/package.json +9 -9
- package/src/Carousel.tsx +107 -94
- package/src/Carousel.types.ts +2 -2
- package/src/translations/__intergalactic-dynamic-locales.ts +2 -2
package/lib/es6/Carousel.js
CHANGED
|
@@ -3,12 +3,13 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
|
3
3
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
4
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
5
5
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
6
|
-
import
|
|
6
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
8
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
9
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
-
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
9
10
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
11
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
11
|
-
import { assignProps as
|
|
12
|
+
import { assignProps as _assignProps0 } from "@semcore/core";
|
|
12
13
|
import { assignProps as _assignProps9 } from "@semcore/core";
|
|
13
14
|
import { assignProps as _assignProps8 } from "@semcore/core";
|
|
14
15
|
import { assignProps as _assignProps7 } from "@semcore/core";
|
|
@@ -18,43 +19,44 @@ import { assignProps as _assignProps4 } from "@semcore/core";
|
|
|
18
19
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
19
20
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
20
21
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
21
|
-
|
|
22
|
-
import {
|
|
22
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
23
|
+
import { createBreakpoints } from '@semcore/breakpoints';
|
|
23
24
|
import Button from '@semcore/button';
|
|
24
|
-
import
|
|
25
|
-
import { Box, Flex } from '@semcore/flex-box';
|
|
26
|
-
import ChevronRight from '@semcore/icon/ChevronRight/l';
|
|
27
|
-
import ChevronLeft from '@semcore/icon/ChevronLeft/l';
|
|
28
|
-
import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
|
|
25
|
+
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
29
26
|
import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
|
|
30
|
-
import {
|
|
27
|
+
import { findAllComponents } from '@semcore/core/lib/utils/findComponent';
|
|
31
28
|
import logger from '@semcore/core/lib/utils/logger';
|
|
29
|
+
import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
|
|
30
|
+
import { Box, Flex } from '@semcore/flex-box';
|
|
31
|
+
import ChevronLeft from '@semcore/icon/ChevronLeft/l';
|
|
32
|
+
import ChevronRight from '@semcore/icon/ChevronRight/l';
|
|
33
|
+
import Modal from '@semcore/modal';
|
|
34
|
+
import React from 'react';
|
|
32
35
|
/*!__reshadow-styles__:"./style/carousel.shadow.css"*/
|
|
33
|
-
var style = (
|
|
36
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SCarousel_1ezuo_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_1ezuo_gg_{display:flex;transition:transform var(--duration_1ezuo) ease-in-out}.___SContentBox_1ezuo_gg_,.___SModalBox_1ezuo_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_1ezuo_gg_:has(.___SItem_1ezuo_gg_:focus-visible):after,.___SModalBox_1ezuo_gg_:has(.___SItem_1ezuo_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}.___SModalContainer_1ezuo_gg_{display:flex;transition:transform var(--duration_1ezuo) ease-in-out}.___SItem_1ezuo_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1ezuo);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_1ezuo_gg_.__zoomIn_1ezuo_gg_{cursor:zoom-in}.___SItem_1ezuo_gg_.__zoomOut_1ezuo_gg_{cursor:zoom-out}.___SIndicators_1ezuo_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;outline:0;position:relative}.___SIndicator_1ezuo_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_1ezuo_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_1ezuo_gg_.__active_1ezuo_gg_{opacity:1}.___SIndicator_1ezuo_gg_.__inverted_1ezuo_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_1ezuo_gg_,.___SPrev_1ezuo_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_1ezuo_gg_ .___SNextButton_1ezuo_gg_ span:has(>svg:only-child),.___SNext_1ezuo_gg_ .___SPrevButton_1ezuo_gg_ span:has(>svg:only-child),.___SPrev_1ezuo_gg_ .___SNextButton_1ezuo_gg_ span:has(>svg:only-child),.___SPrev_1ezuo_gg_ .___SPrevButton_1ezuo_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)}.___SPrev_1ezuo_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_1ezuo_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_1ezuo_gg_.__disabled_1ezuo_gg_,.___SPrev_1ezuo_gg_.__disabled_1ezuo_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1ezuo_gg_{transition:none}}", /*__inner_css_end__*/"1ezuo_gg_"),
|
|
34
37
|
/*__reshadow_css_end__*/
|
|
35
38
|
{
|
|
36
|
-
"__SCarousel": "
|
|
37
|
-
"__SContainer": "
|
|
38
|
-
"--duration": "--
|
|
39
|
-
"__SModalContainer": "
|
|
40
|
-
"__SItem": "
|
|
41
|
-
"--transform": "--
|
|
42
|
-
"_zoomIn": "
|
|
43
|
-
"_zoomOut": "
|
|
44
|
-
"__SIndicators": "
|
|
45
|
-
"__SIndicator": "
|
|
46
|
-
"_active": "
|
|
47
|
-
"_inverted": "
|
|
48
|
-
"__SPrev": "
|
|
49
|
-
"__SNext": "
|
|
50
|
-
"_disabled": "
|
|
51
|
-
"__SContentBox": "
|
|
52
|
-
"__SModalBox": "
|
|
53
|
-
"__SPrevButton": "
|
|
54
|
-
"__SNextButton": "
|
|
39
|
+
"__SCarousel": "___SCarousel_1ezuo_gg_",
|
|
40
|
+
"__SContainer": "___SContainer_1ezuo_gg_",
|
|
41
|
+
"--duration": "--duration_1ezuo",
|
|
42
|
+
"__SModalContainer": "___SModalContainer_1ezuo_gg_",
|
|
43
|
+
"__SItem": "___SItem_1ezuo_gg_",
|
|
44
|
+
"--transform": "--transform_1ezuo",
|
|
45
|
+
"_zoomIn": "__zoomIn_1ezuo_gg_",
|
|
46
|
+
"_zoomOut": "__zoomOut_1ezuo_gg_",
|
|
47
|
+
"__SIndicators": "___SIndicators_1ezuo_gg_",
|
|
48
|
+
"__SIndicator": "___SIndicator_1ezuo_gg_",
|
|
49
|
+
"_active": "__active_1ezuo_gg_",
|
|
50
|
+
"_inverted": "__inverted_1ezuo_gg_",
|
|
51
|
+
"__SPrev": "___SPrev_1ezuo_gg_",
|
|
52
|
+
"__SNext": "___SNext_1ezuo_gg_",
|
|
53
|
+
"_disabled": "__disabled_1ezuo_gg_",
|
|
54
|
+
"__SContentBox": "___SContentBox_1ezuo_gg_",
|
|
55
|
+
"__SModalBox": "___SModalBox_1ezuo_gg_",
|
|
56
|
+
"__SPrevButton": "___SPrevButton_1ezuo_gg_",
|
|
57
|
+
"__SNextButton": "___SNextButton_1ezuo_gg_"
|
|
55
58
|
});
|
|
56
|
-
import {
|
|
57
|
-
import { createBreakpoints } from '@semcore/breakpoints';
|
|
59
|
+
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
58
60
|
var MAP_TRANSFORM = {
|
|
59
61
|
ArrowLeft: 'left',
|
|
60
62
|
ArrowRight: 'right'
|
|
@@ -66,19 +68,17 @@ var isSmallScreen = function isSmallScreen(index) {
|
|
|
66
68
|
return index === 1;
|
|
67
69
|
};
|
|
68
70
|
var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
69
|
-
_inherits(CarouselRoot, _Component);
|
|
70
|
-
var _super = _createSuper(CarouselRoot);
|
|
71
71
|
function CarouselRoot(props) {
|
|
72
|
-
var
|
|
72
|
+
var _ref18, _props$index;
|
|
73
73
|
var _this;
|
|
74
74
|
_classCallCheck(this, CarouselRoot);
|
|
75
|
-
_this =
|
|
76
|
-
_defineProperty(
|
|
77
|
-
_defineProperty(
|
|
78
|
-
_defineProperty(
|
|
79
|
-
_defineProperty(
|
|
80
|
-
_defineProperty(
|
|
81
|
-
_defineProperty(
|
|
75
|
+
_this = _callSuper(this, CarouselRoot, [props]);
|
|
76
|
+
_defineProperty(_this, "defaultItemsCount", 0);
|
|
77
|
+
_defineProperty(_this, "refCarousel", /*#__PURE__*/React.createRef());
|
|
78
|
+
_defineProperty(_this, "refContainer", /*#__PURE__*/React.createRef());
|
|
79
|
+
_defineProperty(_this, "refModalContainer", /*#__PURE__*/React.createRef());
|
|
80
|
+
_defineProperty(_this, "_touchStartCoord", -1);
|
|
81
|
+
_defineProperty(_this, "handlerKeyDown", function (e) {
|
|
82
82
|
var firstSlide = 1;
|
|
83
83
|
var lastSlide = _this.state.items.length + 1;
|
|
84
84
|
switch (e.key) {
|
|
@@ -116,7 +116,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
116
116
|
_this.handleToggleZoomModal();
|
|
117
117
|
}
|
|
118
118
|
});
|
|
119
|
-
_defineProperty(
|
|
119
|
+
_defineProperty(_this, "toggleItem", function (item) {
|
|
120
120
|
var removeItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
121
121
|
_this.setState(function (prevState) {
|
|
122
122
|
var newItems = removeItem ? prevState.items.filter(function (element) {
|
|
@@ -130,7 +130,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
130
130
|
_this.defaultItemsCount++;
|
|
131
131
|
}
|
|
132
132
|
});
|
|
133
|
-
_defineProperty(
|
|
133
|
+
_defineProperty(_this, "transformContainer", function () {
|
|
134
134
|
var transform = _this.state.selectedIndex * -1 * 100;
|
|
135
135
|
if (_this.refContainer.current) {
|
|
136
136
|
_this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
|
|
@@ -139,7 +139,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
139
139
|
_this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
|
|
140
140
|
}
|
|
141
141
|
});
|
|
142
|
-
_defineProperty(
|
|
142
|
+
_defineProperty(_this, "getDirection", function (currentIndex, nextIndex) {
|
|
143
143
|
var bounded = _this.asProps.bounded;
|
|
144
144
|
if (bounded) {
|
|
145
145
|
return currentIndex < nextIndex ? 'right' : 'left';
|
|
@@ -166,7 +166,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
166
166
|
var left = tmpArr.indexOf(nextIndex);
|
|
167
167
|
return left - tmpCurrentIndex < 0 ? 'left' : 'right';
|
|
168
168
|
});
|
|
169
|
-
_defineProperty(
|
|
169
|
+
_defineProperty(_this, "slideToValue", function (nextIndex) {
|
|
170
170
|
var selectedIndex = _this.state.selectedIndex;
|
|
171
171
|
var direction = selectedIndex < nextIndex ? 'right' : 'left';
|
|
172
172
|
var diff = Math.abs(selectedIndex - nextIndex);
|
|
@@ -175,7 +175,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
175
175
|
diff--;
|
|
176
176
|
}
|
|
177
177
|
});
|
|
178
|
-
_defineProperty(
|
|
178
|
+
_defineProperty(_this, "transformItem", function (direction) {
|
|
179
179
|
var bounded = _this.asProps.bounded;
|
|
180
180
|
var _this$state = _this.state,
|
|
181
181
|
items = _this$state.items,
|
|
@@ -220,12 +220,12 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
220
220
|
return;
|
|
221
221
|
}
|
|
222
222
|
});
|
|
223
|
-
_defineProperty(
|
|
223
|
+
_defineProperty(_this, "bindHandlerClick", function (direction) {
|
|
224
224
|
return function () {
|
|
225
225
|
_this.transformItem(direction);
|
|
226
226
|
};
|
|
227
227
|
});
|
|
228
|
-
_defineProperty(
|
|
228
|
+
_defineProperty(_this, "bindHandlerClickIndicator", function (value) {
|
|
229
229
|
return function () {
|
|
230
230
|
var _this$state2 = _this.state,
|
|
231
231
|
selectedIndex = _this$state2.selectedIndex,
|
|
@@ -237,10 +237,10 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
237
237
|
_this.handlers.index(value);
|
|
238
238
|
};
|
|
239
239
|
});
|
|
240
|
-
_defineProperty(
|
|
240
|
+
_defineProperty(_this, "handlerTouchStart", function (e) {
|
|
241
241
|
_this._touchStartCoord = e.changedTouches[0].clientX;
|
|
242
242
|
});
|
|
243
|
-
_defineProperty(
|
|
243
|
+
_defineProperty(_this, "handlerTouchEnd", function (e) {
|
|
244
244
|
var touchEndCoord = e.changedTouches[0].clientX;
|
|
245
245
|
var delta = touchEndCoord - _this._touchStartCoord;
|
|
246
246
|
if (delta > 50) {
|
|
@@ -249,7 +249,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
249
249
|
_this.transformItem('right');
|
|
250
250
|
}
|
|
251
251
|
});
|
|
252
|
-
_defineProperty(
|
|
252
|
+
_defineProperty(_this, "handleToggleZoomModal", function () {
|
|
253
253
|
_this.setState(function (prevState) {
|
|
254
254
|
return {
|
|
255
255
|
isOpenZoom: !prevState.isOpenZoom
|
|
@@ -260,7 +260,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
260
260
|
}
|
|
261
261
|
});
|
|
262
262
|
});
|
|
263
|
-
_defineProperty(
|
|
263
|
+
_defineProperty(_this, "bindHandlerKeydownControl", function (direction) {
|
|
264
264
|
return function (e) {
|
|
265
265
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
266
266
|
e.preventDefault();
|
|
@@ -272,21 +272,22 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
272
272
|
_this.state = {
|
|
273
273
|
items: [],
|
|
274
274
|
isOpenZoom: false,
|
|
275
|
-
selectedIndex: (
|
|
275
|
+
selectedIndex: (_ref18 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref18 !== void 0 ? _ref18 : 0
|
|
276
276
|
};
|
|
277
277
|
return _this;
|
|
278
278
|
}
|
|
279
|
-
|
|
279
|
+
_inherits(CarouselRoot, _Component);
|
|
280
|
+
return _createClass(CarouselRoot, [{
|
|
280
281
|
key: "uncontrolledProps",
|
|
281
282
|
value: function uncontrolledProps() {
|
|
282
283
|
var _this2 = this;
|
|
283
284
|
return {
|
|
284
285
|
index: [null, function (_index) {
|
|
285
286
|
var _this2$refCarousel$cu;
|
|
286
|
-
(_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0
|
|
287
|
+
(_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 || _this2$refCarousel$cu.blur();
|
|
287
288
|
setTimeout(function () {
|
|
288
289
|
var _this2$refCarousel$cu2;
|
|
289
|
-
(_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0
|
|
290
|
+
(_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 || _this2$refCarousel$cu2.focus();
|
|
290
291
|
}, 0);
|
|
291
292
|
}]
|
|
292
293
|
};
|
|
@@ -332,7 +333,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
332
333
|
}
|
|
333
334
|
}, {
|
|
334
335
|
key: "getItemProps",
|
|
335
|
-
value: function getItemProps(
|
|
336
|
+
value: function getItemProps(_props, index) {
|
|
336
337
|
var zoom = this.asProps.zoom;
|
|
337
338
|
var isCurrent = this.isSelected(index);
|
|
338
339
|
return {
|
|
@@ -361,10 +362,10 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
361
362
|
disabled = selectedIndex === 0;
|
|
362
363
|
}
|
|
363
364
|
return {
|
|
364
|
-
onClick: this.bindHandlerClick('left'),
|
|
365
|
-
onKeyDown: this.bindHandlerKeydownControl('left'),
|
|
365
|
+
'onClick': this.bindHandlerClick('left'),
|
|
366
|
+
'onKeyDown': this.bindHandlerKeydownControl('left'),
|
|
366
367
|
disabled: disabled,
|
|
367
|
-
label: getI18nText('prev'),
|
|
368
|
+
'label': getI18nText('prev'),
|
|
368
369
|
'aria-controls': "igc-".concat(uid, "-carousel")
|
|
369
370
|
};
|
|
370
371
|
}
|
|
@@ -383,10 +384,10 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
383
384
|
disabled = selectedIndex === items.length - 1;
|
|
384
385
|
}
|
|
385
386
|
return {
|
|
386
|
-
onClick: this.bindHandlerClick('right'),
|
|
387
|
-
onKeyDown: this.bindHandlerKeydownControl('right'),
|
|
387
|
+
'onClick': this.bindHandlerClick('right'),
|
|
388
|
+
'onKeyDown': this.bindHandlerKeydownControl('right'),
|
|
388
389
|
disabled: disabled,
|
|
389
|
-
label: getI18nText('next'),
|
|
390
|
+
'label': getI18nText('next'),
|
|
390
391
|
'aria-controls': "igc-".concat(uid, "-carousel")
|
|
391
392
|
};
|
|
392
393
|
}
|
|
@@ -397,15 +398,15 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
397
398
|
var items = this.state.items;
|
|
398
399
|
var getI18nText = this.asProps.getI18nText;
|
|
399
400
|
return {
|
|
400
|
-
items: items.map(function (
|
|
401
|
+
'items': items.map(function (_item, key) {
|
|
401
402
|
return {
|
|
402
403
|
active: _this4.isSelected(key),
|
|
403
404
|
onClick: _this4.bindHandlerClickIndicator(key),
|
|
404
405
|
key: key
|
|
405
406
|
};
|
|
406
407
|
}),
|
|
407
|
-
role: 'tablist',
|
|
408
|
-
tabIndex: 0,
|
|
408
|
+
'role': 'tablist',
|
|
409
|
+
'tabIndex': 0,
|
|
409
410
|
'aria-label': getI18nText('slides')
|
|
410
411
|
};
|
|
411
412
|
}
|
|
@@ -415,7 +416,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
415
416
|
var isCurrent = this.isSelected(index);
|
|
416
417
|
var getI18nText = this.asProps.getI18nText;
|
|
417
418
|
return {
|
|
418
|
-
role: 'tab',
|
|
419
|
+
'role': 'tab',
|
|
419
420
|
'aria-selected': isCurrent,
|
|
420
421
|
'aria-controls': "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
|
|
421
422
|
'aria-label': getI18nText('slide', {
|
|
@@ -461,7 +462,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
461
462
|
key: "renderModal",
|
|
462
463
|
value: function renderModal(isSmall, ComponentItems) {
|
|
463
464
|
var _ref = this.asProps,
|
|
464
|
-
|
|
465
|
+
_ref0,
|
|
465
466
|
_this5 = this;
|
|
466
467
|
var SModalContainer = Box;
|
|
467
468
|
var SModalBox = Box;
|
|
@@ -471,16 +472,16 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
471
472
|
duration = _this$asProps3.duration,
|
|
472
473
|
zoomWidth = _this$asProps3.zoomWidth;
|
|
473
474
|
var isOpenZoom = this.state.isOpenZoom;
|
|
474
|
-
return
|
|
475
|
+
return _ref0 = sstyled(styles), /*#__PURE__*/React.createElement(Modal, _ref0.cn("Modal", {
|
|
475
476
|
"visible": isOpenZoom,
|
|
476
477
|
"onClose": this.handleToggleZoomModal,
|
|
477
478
|
"ghost": true,
|
|
478
479
|
"closable": !isSmall
|
|
479
|
-
}), /*#__PURE__*/React.createElement(Flex,
|
|
480
|
+
}), /*#__PURE__*/React.createElement(Flex, _ref0.cn("Flex", {
|
|
480
481
|
"direction": isSmall ? 'column' : 'row'
|
|
481
482
|
}), !isSmall && /*#__PURE__*/React.createElement(Carousel.Prev, {
|
|
482
483
|
inverted: true
|
|
483
|
-
}), /*#__PURE__*/React.createElement(SModalBox,
|
|
484
|
+
}), /*#__PURE__*/React.createElement(SModalBox, _ref0.cn("SModalBox", {}), /*#__PURE__*/React.createElement(SModalContainer, _ref0.cn("SModalContainer", _objectSpread({}, _assignProps({
|
|
484
485
|
"aria-live": 'polite',
|
|
485
486
|
"use:duration": "".concat(duration, "ms"),
|
|
486
487
|
"ref": this.refModalContainer,
|
|
@@ -497,7 +498,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
497
498
|
zoomOut: true,
|
|
498
499
|
transform: _this5.isSelected(i) ? _this5.getTransform() : undefined
|
|
499
500
|
}));
|
|
500
|
-
}))), isSmall ? /*#__PURE__*/React.createElement(Flex,
|
|
501
|
+
}))), isSmall ? /*#__PURE__*/React.createElement(Flex, _ref0.cn("Flex", {
|
|
501
502
|
"justifyContent": 'center',
|
|
502
503
|
"mt": 2
|
|
503
504
|
}), /*#__PURE__*/React.createElement(Carousel.Prev, {
|
|
@@ -514,7 +515,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
514
515
|
key: "render",
|
|
515
516
|
value: function render() {
|
|
516
517
|
var _ref2 = this.asProps,
|
|
517
|
-
|
|
518
|
+
_ref1,
|
|
518
519
|
_this6 = this;
|
|
519
520
|
var SCarousel = Box;
|
|
520
521
|
var _this$asProps4 = this.asProps,
|
|
@@ -527,7 +528,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
527
528
|
indicators = _this$asProps4.indicators;
|
|
528
529
|
var ComponentItems = findAllComponents(Children, ['Carousel.Item']);
|
|
529
530
|
var Controls = findAllComponents(Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
|
|
530
|
-
return
|
|
531
|
+
return _ref1 = sstyled(styles), /*#__PURE__*/React.createElement(SCarousel, _ref1.cn("SCarousel", _objectSpread({}, _assignProps2({
|
|
531
532
|
"role": 'region',
|
|
532
533
|
"roledescription": 'carousel',
|
|
533
534
|
"onKeyDown": this.handlerKeyDown,
|
|
@@ -536,9 +537,9 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
536
537
|
"ref": this.refCarousel,
|
|
537
538
|
"id": "igc-".concat(uid, "-carousel"),
|
|
538
539
|
"aria-roledescription": ariaRoledescription
|
|
539
|
-
}, _ref2))), Controls.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex,
|
|
540
|
+
}, _ref2))), Controls.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, _ref1.cn("Flex", {}), /*#__PURE__*/React.createElement(Carousel.Prev, null), /*#__PURE__*/React.createElement(Carousel.ContentBox, null, /*#__PURE__*/React.createElement(Carousel.Container, {
|
|
540
541
|
"aria-label": ariaLabel
|
|
541
|
-
}, /*#__PURE__*/React.createElement(Children,
|
|
542
|
+
}, /*#__PURE__*/React.createElement(Children, _ref1.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 () {
|
|
542
543
|
return ComponentItems.map(function (item, index) {
|
|
543
544
|
return /*#__PURE__*/React.createElement(Carousel.Indicator, _extends({}, item.props, {
|
|
544
545
|
key: item.key,
|
|
@@ -549,12 +550,11 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
549
550
|
onClick: _this6.bindHandlerClickIndicator(index)
|
|
550
551
|
}));
|
|
551
552
|
});
|
|
552
|
-
})) : /*#__PURE__*/React.createElement(Children,
|
|
553
|
+
})) : /*#__PURE__*/React.createElement(Children, _ref1.cn("Children", {})), hasZoom && /*#__PURE__*/React.createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /*#__PURE__*/React.createElement(BreakPoints.Context.Consumer, null, function (mediaIndex) {
|
|
553
554
|
return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
|
|
554
555
|
})));
|
|
555
556
|
}
|
|
556
557
|
}]);
|
|
557
|
-
return CarouselRoot;
|
|
558
558
|
}(Component);
|
|
559
559
|
_defineProperty(CarouselRoot, "displayName", 'Carousel');
|
|
560
560
|
_defineProperty(CarouselRoot, "defaultProps", {
|
|
@@ -570,45 +570,46 @@ _defineProperty(CarouselRoot, "style", style);
|
|
|
570
570
|
_defineProperty(CarouselRoot, "enhance", enhance);
|
|
571
571
|
var Container = function Container(props) {
|
|
572
572
|
var _ref3 = arguments[0],
|
|
573
|
-
|
|
573
|
+
_ref10;
|
|
574
574
|
var SContainer = Box;
|
|
575
575
|
var styles = props.styles,
|
|
576
576
|
duration = props.duration;
|
|
577
|
-
return
|
|
577
|
+
return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref10.cn("SContainer", _objectSpread({}, _assignProps3({
|
|
578
578
|
"use:duration": "".concat(duration, "ms"),
|
|
579
579
|
"aria-live": 'polite'
|
|
580
580
|
}, _ref3))));
|
|
581
581
|
};
|
|
582
582
|
var ContentBox = function ContentBox(props) {
|
|
583
583
|
var _ref4 = arguments[0],
|
|
584
|
-
|
|
584
|
+
_ref11;
|
|
585
585
|
var SContentBox = Box;
|
|
586
586
|
var styles = props.styles;
|
|
587
|
-
return
|
|
587
|
+
return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(SContentBox, _ref11.cn("SContentBox", _objectSpread({}, _assignProps4({}, _ref4))));
|
|
588
588
|
};
|
|
589
589
|
var Item = /*#__PURE__*/function (_Component2) {
|
|
590
|
-
_inherits(Item, _Component2);
|
|
591
|
-
var _super2 = _createSuper(Item);
|
|
592
590
|
function Item() {
|
|
593
591
|
var _this7;
|
|
594
592
|
_classCallCheck(this, Item);
|
|
595
593
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
596
594
|
args[_key] = arguments[_key];
|
|
597
595
|
}
|
|
598
|
-
_this7 =
|
|
599
|
-
_defineProperty(
|
|
596
|
+
_this7 = _callSuper(this, Item, [].concat(args));
|
|
597
|
+
_defineProperty(_this7, "refItem", /*#__PURE__*/React.createRef());
|
|
600
598
|
return _this7;
|
|
601
599
|
}
|
|
602
|
-
|
|
600
|
+
_inherits(Item, _Component2);
|
|
601
|
+
return _createClass(Item, [{
|
|
603
602
|
key: "componentDidMount",
|
|
604
603
|
value: function componentDidMount() {
|
|
605
604
|
var _this$props = this.props,
|
|
606
605
|
toggleItem = _this$props.toggleItem,
|
|
607
606
|
transform = _this$props.transform;
|
|
608
607
|
var refItem = this.refItem.current;
|
|
609
|
-
toggleItem && refItem
|
|
610
|
-
|
|
611
|
-
|
|
608
|
+
if (toggleItem && refItem) {
|
|
609
|
+
toggleItem({
|
|
610
|
+
node: refItem
|
|
611
|
+
});
|
|
612
|
+
}
|
|
612
613
|
if (transform && refItem) {
|
|
613
614
|
refItem.style.transform = "translateX(".concat(transform, "%)");
|
|
614
615
|
}
|
|
@@ -618,9 +619,11 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
618
619
|
value: function componentWillUnmount() {
|
|
619
620
|
var toggleItem = this.props.toggleItem;
|
|
620
621
|
var refItem = this.refItem.current;
|
|
621
|
-
toggleItem && refItem
|
|
622
|
-
|
|
623
|
-
|
|
622
|
+
if (toggleItem && refItem) {
|
|
623
|
+
toggleItem({
|
|
624
|
+
node: refItem
|
|
625
|
+
}, true);
|
|
626
|
+
}
|
|
624
627
|
}
|
|
625
628
|
}, {
|
|
626
629
|
key: "componentDidUpdate",
|
|
@@ -635,7 +638,7 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
635
638
|
key: "render",
|
|
636
639
|
value: function render() {
|
|
637
640
|
var _ref5 = this.asProps,
|
|
638
|
-
|
|
641
|
+
_ref12;
|
|
639
642
|
var _this$props2 = this.props,
|
|
640
643
|
styles = _this$props2.styles,
|
|
641
644
|
index = _this$props2.index,
|
|
@@ -644,7 +647,7 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
644
647
|
zoomIn = _this$props2.zoomIn,
|
|
645
648
|
onToggleZoomModal = _this$props2.onToggleZoomModal;
|
|
646
649
|
var SItem = Box;
|
|
647
|
-
return
|
|
650
|
+
return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SItem, _ref12.cn("SItem", _objectSpread({}, _assignProps5({
|
|
648
651
|
"ref": this.refItem,
|
|
649
652
|
"role": 'tabpanel',
|
|
650
653
|
"data-carousel": "igc-".concat(uid, "-carousel"),
|
|
@@ -656,11 +659,10 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
656
659
|
}, _ref5))));
|
|
657
660
|
}
|
|
658
661
|
}]);
|
|
659
|
-
return Item;
|
|
660
662
|
}(Component);
|
|
661
663
|
var Prev = function Prev(props) {
|
|
662
664
|
var _ref6 = arguments[0],
|
|
663
|
-
|
|
665
|
+
_ref13;
|
|
664
666
|
var styles = props.styles,
|
|
665
667
|
children = props.children,
|
|
666
668
|
Children = props.Children,
|
|
@@ -670,9 +672,9 @@ var Prev = function Prev(props) {
|
|
|
670
672
|
inverted = props.inverted;
|
|
671
673
|
var SPrev = Box;
|
|
672
674
|
var SPrevButton = Button;
|
|
673
|
-
return
|
|
675
|
+
return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SPrev, _ref13.cn("SPrev", _objectSpread({}, _assignProps6({
|
|
674
676
|
"top": top
|
|
675
|
-
}, _ref6))), children ? /*#__PURE__*/React.createElement(Children,
|
|
677
|
+
}, _ref6))), children ? /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/React.createElement(SPrevButton, _ref13.cn("SPrevButton", {
|
|
676
678
|
"addonLeft": ChevronLeft,
|
|
677
679
|
"aria-label": label,
|
|
678
680
|
"theme": inverted ? 'invert' : 'muted',
|
|
@@ -683,7 +685,7 @@ var Prev = function Prev(props) {
|
|
|
683
685
|
};
|
|
684
686
|
var Next = function Next(props) {
|
|
685
687
|
var _ref7 = arguments[0],
|
|
686
|
-
|
|
688
|
+
_ref14;
|
|
687
689
|
var styles = props.styles,
|
|
688
690
|
children = props.children,
|
|
689
691
|
Children = props.Children,
|
|
@@ -693,9 +695,9 @@ var Next = function Next(props) {
|
|
|
693
695
|
inverted = props.inverted;
|
|
694
696
|
var SNext = Box;
|
|
695
697
|
var SNextButton = Button;
|
|
696
|
-
return
|
|
698
|
+
return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SNext, _ref14.cn("SNext", _objectSpread({}, _assignProps7({
|
|
697
699
|
"top": top
|
|
698
|
-
}, _ref7))), children ? /*#__PURE__*/React.createElement(Children,
|
|
700
|
+
}, _ref7))), children ? /*#__PURE__*/React.createElement(Children, _ref14.cn("Children", {})) : /*#__PURE__*/React.createElement(SNextButton, _ref14.cn("SNextButton", {
|
|
699
701
|
"addonLeft": ChevronRight,
|
|
700
702
|
"aria-label": label,
|
|
701
703
|
"theme": inverted ? 'invert' : 'muted',
|
|
@@ -704,19 +706,19 @@ var Next = function Next(props) {
|
|
|
704
706
|
"innerOutline": true
|
|
705
707
|
})));
|
|
706
708
|
};
|
|
707
|
-
var Indicators = function Indicators(
|
|
709
|
+
var Indicators = function Indicators(_ref19) {
|
|
708
710
|
var _ref8 = arguments[0],
|
|
709
|
-
|
|
710
|
-
var items =
|
|
711
|
-
styles =
|
|
712
|
-
Children =
|
|
713
|
-
inverted =
|
|
711
|
+
_ref16;
|
|
712
|
+
var items = _ref19.items,
|
|
713
|
+
styles = _ref19.styles,
|
|
714
|
+
Children = _ref19.Children,
|
|
715
|
+
inverted = _ref19.inverted;
|
|
714
716
|
var SIndicators = Box;
|
|
715
717
|
if (Children.origin) {
|
|
716
|
-
var
|
|
717
|
-
return
|
|
718
|
+
var _ref15;
|
|
719
|
+
return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, _assignProps8({}, _ref8))), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {})));
|
|
718
720
|
}
|
|
719
|
-
return
|
|
721
|
+
return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, _assignProps9({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
720
722
|
return /*#__PURE__*/React.createElement(Carousel.Indicator, _extends({
|
|
721
723
|
key: index
|
|
722
724
|
}, item, {
|
|
@@ -724,13 +726,13 @@ var Indicators = function Indicators(_ref21) {
|
|
|
724
726
|
}));
|
|
725
727
|
}));
|
|
726
728
|
};
|
|
727
|
-
var Indicator = function Indicator(
|
|
729
|
+
var Indicator = function Indicator(_ref20) {
|
|
728
730
|
var _ref9 = arguments[0],
|
|
729
|
-
|
|
730
|
-
var styles =
|
|
731
|
-
Children =
|
|
731
|
+
_ref17;
|
|
732
|
+
var styles = _ref20.styles,
|
|
733
|
+
Children = _ref20.Children;
|
|
732
734
|
var SIndicator = Box;
|
|
733
|
-
return
|
|
735
|
+
return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicator, _ref17.cn("SIndicator", _objectSpread({}, _assignProps0({}, _ref9))), /*#__PURE__*/React.createElement(Children, _ref17.cn("Children", {})));
|
|
734
736
|
};
|
|
735
737
|
var Carousel = createComponent(CarouselRoot, {
|
|
736
738
|
Container: Container,
|