@salutejs/plasma-new-hope 0.321.1-canary.1945.14661970912.0 → 0.321.1-canary.1946.14663041744.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.css +0 -7
- package/cjs/index.js +0 -7
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/index.js +0 -11
- package/emotion/es/index.js +1 -2
- package/es/index.css +0 -7
- package/es/index.js +0 -3
- package/es/index.js.map +1 -1
- package/package.json +4 -4
- package/styled-components/cjs/index.js +0 -11
- package/styled-components/es/index.js +1 -2
- package/types/index.d.ts +0 -1
- package/types/index.d.ts.map +1 -1
- package/cjs/components/Carousel/Carousel.css +0 -4
- package/cjs/components/Carousel/Carousel.js +0 -80
- package/cjs/components/Carousel/Carousel.js.map +0 -1
- package/cjs/components/Carousel/Carousel.styles.js +0 -67
- package/cjs/components/Carousel/Carousel.styles.js.map +0 -1
- package/cjs/components/Carousel/Carousel.styles_1lyqijv.css +0 -4
- package/cjs/components/Carousel/CarouselItem.js +0 -53
- package/cjs/components/Carousel/CarouselItem.js.map +0 -1
- package/cjs/components/Carousel/CarouselItem_cqjszm.css +0 -1
- package/cjs/components/Carousel/useCarousel.js +0 -487
- package/cjs/components/Carousel/useCarousel.js.map +0 -1
- package/cjs/components/Carousel/useDragScroll.js +0 -62
- package/cjs/components/Carousel/useDragScroll.js.map +0 -1
- package/emotion/cjs/components/Carousel/Carousel.js +0 -77
- package/emotion/cjs/components/Carousel/Carousel.styles.js +0 -49
- package/emotion/cjs/components/Carousel/Carousel.types.js +0 -5
- package/emotion/cjs/components/Carousel/CarouselItem.js +0 -38
- package/emotion/cjs/components/Carousel/index.js +0 -32
- package/emotion/cjs/components/Carousel/useCarousel.js +0 -478
- package/emotion/cjs/components/Carousel/useDragScroll.js +0 -65
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -10
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +0 -18
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +0 -10
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.js +0 -18
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
- package/emotion/es/components/Carousel/Carousel.js +0 -69
- package/emotion/es/components/Carousel/Carousel.styles.js +0 -42
- package/emotion/es/components/Carousel/Carousel.types.js +0 -1
- package/emotion/es/components/Carousel/CarouselItem.js +0 -31
- package/emotion/es/components/Carousel/index.js +0 -3
- package/emotion/es/components/Carousel/useCarousel.js +0 -468
- package/emotion/es/components/Carousel/useDragScroll.js +0 -59
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -4
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.js +0 -6
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.config.js +0 -4
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.js +0 -6
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
- package/es/components/Carousel/Carousel.css +0 -4
- package/es/components/Carousel/Carousel.js +0 -71
- package/es/components/Carousel/Carousel.js.map +0 -1
- package/es/components/Carousel/Carousel.styles.js +0 -60
- package/es/components/Carousel/Carousel.styles.js.map +0 -1
- package/es/components/Carousel/Carousel.styles_1lyqijv.css +0 -4
- package/es/components/Carousel/CarouselItem.js +0 -45
- package/es/components/Carousel/CarouselItem.js.map +0 -1
- package/es/components/Carousel/CarouselItem_cqjszm.css +0 -1
- package/es/components/Carousel/useCarousel.js +0 -472
- package/es/components/Carousel/useCarousel.js.map +0 -1
- package/es/components/Carousel/useDragScroll.js +0 -58
- package/es/components/Carousel/useDragScroll.js.map +0 -1
- package/styled-components/cjs/components/Carousel/Carousel.js +0 -77
- package/styled-components/cjs/components/Carousel/Carousel.styles.js +0 -38
- package/styled-components/cjs/components/Carousel/Carousel.types.js +0 -5
- package/styled-components/cjs/components/Carousel/CarouselItem.js +0 -37
- package/styled-components/cjs/components/Carousel/index.js +0 -32
- package/styled-components/cjs/components/Carousel/useCarousel.js +0 -478
- package/styled-components/cjs/components/Carousel/useDragScroll.js +0 -65
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -10
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +0 -18
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +0 -10
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.js +0 -18
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
- package/styled-components/es/components/Carousel/Carousel.js +0 -69
- package/styled-components/es/components/Carousel/Carousel.styles.js +0 -30
- package/styled-components/es/components/Carousel/Carousel.types.js +0 -1
- package/styled-components/es/components/Carousel/CarouselItem.js +0 -30
- package/styled-components/es/components/Carousel/index.js +0 -3
- package/styled-components/es/components/Carousel/useCarousel.js +0 -468
- package/styled-components/es/components/Carousel/useDragScroll.js +0 -59
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.js +0 -6
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.config.js +0 -4
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.js +0 -6
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
- package/types/components/Carousel/Carousel.d.ts +0 -22
- package/types/components/Carousel/Carousel.d.ts.map +0 -1
- package/types/components/Carousel/Carousel.styles.d.ts +0 -16
- package/types/components/Carousel/Carousel.styles.d.ts.map +0 -1
- package/types/components/Carousel/Carousel.types.d.ts +0 -111
- package/types/components/Carousel/Carousel.types.d.ts.map +0 -1
- package/types/components/Carousel/CarouselItem.d.ts +0 -4
- package/types/components/Carousel/CarouselItem.d.ts.map +0 -1
- package/types/components/Carousel/index.d.ts +0 -5
- package/types/components/Carousel/index.d.ts.map +0 -1
- package/types/components/Carousel/useCarousel.d.ts +0 -63
- package/types/components/Carousel/useCarousel.d.ts.map +0 -1
- package/types/components/Carousel/useDragScroll.d.ts +0 -3
- package/types/components/Carousel/useDragScroll.d.ts.map +0 -1
@@ -1,77 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
5
|
-
value: true
|
6
|
-
});
|
7
|
-
exports.carouselRoot = exports.carouselConfig = void 0;
|
8
|
-
var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
|
9
|
-
var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
|
10
|
-
var _Carousel = /*#__PURE__*/require("./Carousel.styles");
|
11
|
-
var _useCarousel2 = /*#__PURE__*/require("./useCarousel");
|
12
|
-
var _useDragScroll = /*#__PURE__*/require("./useDragScroll");
|
13
|
-
var _excluded = ["index", "scrollSnapType", "scrollAlign", "detectActive", "detectThreshold", "scaleCallback", "scaleResetCallback", "onIndexChange", "paddingStart", "paddingEnd", "children", "ariaLive", "isDragScrollDisabled"];
|
14
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
15
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
16
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
17
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
18
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
19
|
-
/**
|
20
|
-
* Компонент для создания списков с прокруткой.
|
21
|
-
*/
|
22
|
-
var carouselRoot = exports.carouselRoot = function carouselRoot(Root) {
|
23
|
-
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
24
|
-
var _ref$index = _ref.index,
|
25
|
-
index = _ref$index === void 0 ? 0 : _ref$index,
|
26
|
-
_ref$scrollSnapType = _ref.scrollSnapType,
|
27
|
-
scrollSnapType = _ref$scrollSnapType === void 0 ? 'mandatory' : _ref$scrollSnapType,
|
28
|
-
scrollAlign = _ref.scrollAlign,
|
29
|
-
detectActive = _ref.detectActive,
|
30
|
-
detectThreshold = _ref.detectThreshold,
|
31
|
-
scaleCallback = _ref.scaleCallback,
|
32
|
-
scaleResetCallback = _ref.scaleResetCallback,
|
33
|
-
onIndexChange = _ref.onIndexChange,
|
34
|
-
paddingStart = _ref.paddingStart,
|
35
|
-
paddingEnd = _ref.paddingEnd,
|
36
|
-
children = _ref.children,
|
37
|
-
_ref$ariaLive = _ref.ariaLive,
|
38
|
-
ariaLive = _ref$ariaLive === void 0 ? 'off' : _ref$ariaLive,
|
39
|
-
_ref$isDragScrollDisa = _ref.isDragScrollDisabled,
|
40
|
-
isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
|
41
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
42
|
-
var axis = 'x';
|
43
|
-
var _useCarousel = (0, _useCarousel2.useCarousel)({
|
44
|
-
index: index,
|
45
|
-
axis: axis,
|
46
|
-
scrollAlign: scrollAlign,
|
47
|
-
detectActive: detectActive,
|
48
|
-
detectThreshold: detectThreshold,
|
49
|
-
scaleCallback: scaleCallback,
|
50
|
-
scaleResetCallback: scaleResetCallback,
|
51
|
-
onIndexChange: onIndexChange
|
52
|
-
}),
|
53
|
-
scrollRef = _useCarousel.scrollRef,
|
54
|
-
trackRef = _useCarousel.trackRef;
|
55
|
-
var handleRef = (0, _plasmaCore.useForkRef)(scrollRef, ref);
|
56
|
-
(0, _useDragScroll.useDragScroll)(scrollRef, isDragScrollDisabled);
|
57
|
-
return /*#__PURE__*/_react["default"].createElement(Root, {
|
58
|
-
index: index
|
59
|
-
}, /*#__PURE__*/_react["default"].createElement(_Carousel.CarouselWrapper, _extends({
|
60
|
-
ref: handleRef,
|
61
|
-
scrollSnapType: scrollSnapType
|
62
|
-
}, rest), /*#__PURE__*/_react["default"].createElement(_Carousel.CarouselTrack, {
|
63
|
-
ref: trackRef,
|
64
|
-
paddingStart: paddingStart,
|
65
|
-
paddingEnd: paddingEnd,
|
66
|
-
"aria-live": ariaLive
|
67
|
-
}, children)));
|
68
|
-
});
|
69
|
-
};
|
70
|
-
var carouselConfig = exports.carouselConfig = {
|
71
|
-
name: 'Carousel',
|
72
|
-
tag: 'div',
|
73
|
-
layout: carouselRoot,
|
74
|
-
base: _Carousel.base,
|
75
|
-
variations: {},
|
76
|
-
defaults: {}
|
77
|
-
};
|
@@ -1,38 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
5
|
-
value: true
|
6
|
-
});
|
7
|
-
exports.base = exports.CarouselWrapper = exports.CarouselTrack = exports.CarouselGridWrapper = void 0;
|
8
|
-
var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
|
9
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
10
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
11
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
|
12
|
-
|
13
|
-
/**
|
14
|
-
* Компонент применяется, если требуется компенсировать отступы контейнера в сетке.
|
15
|
-
* При обертывании вокруг ``Carousel``, добавляет карусели и ее прокрутке дополнительные отступы.
|
16
|
-
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
17
|
-
*/
|
18
|
-
var CarouselGridWrapper = exports.CarouselGridWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
19
|
-
componentId: "plasma-new-hope__sc-9g0yg0-0"
|
20
|
-
})(["overflow:hidden;margin-left:calc(var(--plasma-grid-margin) * -1);margin-right:calc(var(--plasma-grid-margin) * -1);"]);
|
21
|
-
var CarouselWrapper = exports.CarouselWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
22
|
-
componentId: "plasma-new-hope__sc-9g0yg0-1"
|
23
|
-
})(["position:relative;margin:0;padding:0;list-style:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:", ";", " &{scroll-padding:0 var(--plasma-grid-margin);padding-left:var(--plasma-grid-margin);}user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"], function (_ref) {
|
24
|
-
var scrollSnapType = _ref.scrollSnapType;
|
25
|
-
return "x ".concat(scrollSnapType);
|
26
|
-
}, CarouselGridWrapper);
|
27
|
-
var CarouselTrack = exports.CarouselTrack = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
28
|
-
componentId: "plasma-new-hope__sc-9g0yg0-2"
|
29
|
-
})(["display:inline-flex;flex-direction:row;padding-left:", ";padding-right:", ";", " &{padding-right:", ";}"], function (_ref2) {
|
30
|
-
var paddingStart = _ref2.paddingStart;
|
31
|
-
return paddingStart || 0;
|
32
|
-
}, function (_ref3) {
|
33
|
-
var paddingEnd = _ref3.paddingEnd;
|
34
|
-
return paddingEnd || 0;
|
35
|
-
}, CarouselGridWrapper, function (_ref4) {
|
36
|
-
var paddingEnd = _ref4.paddingEnd;
|
37
|
-
return paddingEnd || 'var(--plasma-grid-margin)';
|
38
|
-
});
|
@@ -1,37 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.CarouselItem = void 0;
|
7
|
-
var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
|
8
|
-
var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
|
9
|
-
var _excluded = ["scrollSnapAlign", "scrollSnapStop", "children"];
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
11
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
12
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
13
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
14
|
-
var StyledItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
15
|
-
componentId: "plasma-new-hope__sc-1h5d6du-0"
|
16
|
-
})(["scroll-snap-align:", ";scroll-snap-stop:", ";"], function (_ref) {
|
17
|
-
var scrollSnapAlign = _ref.scrollSnapAlign;
|
18
|
-
return scrollSnapAlign || 'none';
|
19
|
-
}, function (_ref2) {
|
20
|
-
var scrollSnapAlign = _ref2.scrollSnapAlign,
|
21
|
-
scrollSnapStop = _ref2.scrollSnapStop;
|
22
|
-
return scrollSnapAlign ? scrollSnapStop : 'normal';
|
23
|
-
});
|
24
|
-
var CarouselItem = exports.CarouselItem = function CarouselItem(_ref3) {
|
25
|
-
var _ref3$scrollSnapAlign = _ref3.scrollSnapAlign,
|
26
|
-
scrollSnapAlign = _ref3$scrollSnapAlign === void 0 ? 'center' : _ref3$scrollSnapAlign,
|
27
|
-
_ref3$scrollSnapStop = _ref3.scrollSnapStop,
|
28
|
-
scrollSnapStop = _ref3$scrollSnapStop === void 0 ? 'always' : _ref3$scrollSnapStop,
|
29
|
-
children = _ref3.children,
|
30
|
-
rest = _objectWithoutProperties(_ref3, _excluded);
|
31
|
-
return /*#__PURE__*/_react["default"].createElement(StyledItem, _extends({
|
32
|
-
scrollSnapAlign: scrollSnapAlign,
|
33
|
-
scrollSnapStop: scrollSnapStop,
|
34
|
-
role: "group",
|
35
|
-
"aria-roledescription": "slide"
|
36
|
-
}, rest), children);
|
37
|
-
};
|
@@ -1,32 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
Object.defineProperty(exports, "CarouselGridWrapper", {
|
7
|
-
enumerable: true,
|
8
|
-
get: function get() {
|
9
|
-
return _Carousel2.CarouselGridWrapper;
|
10
|
-
}
|
11
|
-
});
|
12
|
-
Object.defineProperty(exports, "CarouselItem", {
|
13
|
-
enumerable: true,
|
14
|
-
get: function get() {
|
15
|
-
return _CarouselItem.CarouselItem;
|
16
|
-
}
|
17
|
-
});
|
18
|
-
Object.defineProperty(exports, "carouselConfig", {
|
19
|
-
enumerable: true,
|
20
|
-
get: function get() {
|
21
|
-
return _Carousel.carouselConfig;
|
22
|
-
}
|
23
|
-
});
|
24
|
-
Object.defineProperty(exports, "carouselRoot", {
|
25
|
-
enumerable: true,
|
26
|
-
get: function get() {
|
27
|
-
return _Carousel.carouselRoot;
|
28
|
-
}
|
29
|
-
});
|
30
|
-
var _Carousel = /*#__PURE__*/require("./Carousel");
|
31
|
-
var _Carousel2 = /*#__PURE__*/require("./Carousel.styles");
|
32
|
-
var _CarouselItem = /*#__PURE__*/require("./CarouselItem");
|
@@ -1,478 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.getCalculatedPos = exports.getCalculatedOffset = exports.animatedScrollToX = void 0;
|
7
|
-
exports.getCarouselItems = getCarouselItems;
|
8
|
-
exports.useCarousel = exports.scrollToPos = exports.getItemSlot = void 0;
|
9
|
-
exports.useDebouncedFunction = useDebouncedFunction;
|
10
|
-
var _react = /*#__PURE__*/require("react");
|
11
|
-
var _lodash = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("lodash.throttle"));
|
12
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
13
|
-
/**
|
14
|
-
* Подсчет смещения из-за паддингов.
|
15
|
-
*/
|
16
|
-
var getCalculatedOffset = exports.getCalculatedOffset = function getCalculatedOffset(scrollEl, trackEl, axis) {
|
17
|
-
var paddingProp = axis === 'x' ? 'paddingLeft' : 'paddingTop';
|
18
|
-
return parseInt(getComputedStyle(scrollEl)[paddingProp], 10) + parseInt(getComputedStyle(trackEl)[paddingProp], 10);
|
19
|
-
};
|
20
|
-
var positionModByScrollAlign = function positionModByScrollAlign(_ref) {
|
21
|
-
var scrollAlign = _ref.scrollAlign,
|
22
|
-
position = _ref.position,
|
23
|
-
carouselSize = _ref.carouselSize,
|
24
|
-
itemSize = _ref.itemSize,
|
25
|
-
offset = _ref.offset,
|
26
|
-
scrollStart = _ref.scrollStart,
|
27
|
-
axis = _ref.axis;
|
28
|
-
if (scrollAlign === 'start') {
|
29
|
-
var inaccuracy = 1;
|
30
|
-
var paddingOffset = axis === 'y' ? offset - itemSize / 2 + inaccuracy : 0;
|
31
|
-
return position + paddingOffset;
|
32
|
-
}
|
33
|
-
if (scrollAlign === 'center') {
|
34
|
-
return position - carouselSize / 2 + itemSize / 2;
|
35
|
-
}
|
36
|
-
if (scrollAlign === 'end') {
|
37
|
-
return position - carouselSize + itemSize + offset;
|
38
|
-
}
|
39
|
-
if (scrollAlign === 'activeDirection') {
|
40
|
-
if (position >= scrollStart + carouselSize - itemSize) {
|
41
|
-
return position - carouselSize + itemSize + offset;
|
42
|
-
}
|
43
|
-
if (position > scrollStart) {
|
44
|
-
return scrollStart;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
return position;
|
48
|
-
};
|
49
|
-
|
50
|
-
/**
|
51
|
-
* Подсчет скролла до переданного индекса.
|
52
|
-
*/
|
53
|
-
var getCalculatedPos = exports.getCalculatedPos = function getCalculatedPos(_ref2) {
|
54
|
-
var scrollEl = _ref2.scrollEl,
|
55
|
-
items = _ref2.items,
|
56
|
-
axis = _ref2.axis,
|
57
|
-
index = _ref2.index,
|
58
|
-
offset = _ref2.offset,
|
59
|
-
scrollAlign = _ref2.scrollAlign;
|
60
|
-
var position = scrollAlign === 'center' ? offset : 0;
|
61
|
-
var carouselSize;
|
62
|
-
var itemSize;
|
63
|
-
var scrollStart;
|
64
|
-
if (items.item(index) === null) {
|
65
|
-
return position;
|
66
|
-
}
|
67
|
-
for (var i = 0; i < index; i++) {
|
68
|
-
if (axis === 'x') {
|
69
|
-
var _items$item$offsetWid, _items$item;
|
70
|
-
position += (_items$item$offsetWid = (_items$item = items.item(i)) === null || _items$item === void 0 ? void 0 : _items$item.offsetWidth) !== null && _items$item$offsetWid !== void 0 ? _items$item$offsetWid : 0;
|
71
|
-
} else {
|
72
|
-
var _items$item$offsetHei, _items$item2;
|
73
|
-
position += (_items$item$offsetHei = (_items$item2 = items.item(i)) === null || _items$item2 === void 0 ? void 0 : _items$item2.offsetHeight) !== null && _items$item$offsetHei !== void 0 ? _items$item$offsetHei : 0;
|
74
|
-
}
|
75
|
-
}
|
76
|
-
if (axis === 'x') {
|
77
|
-
var _items$item$offsetWid2, _items$item3;
|
78
|
-
carouselSize = scrollEl.offsetWidth;
|
79
|
-
itemSize = (_items$item$offsetWid2 = (_items$item3 = items.item(index)) === null || _items$item3 === void 0 ? void 0 : _items$item3.offsetWidth) !== null && _items$item$offsetWid2 !== void 0 ? _items$item$offsetWid2 : 0;
|
80
|
-
scrollStart = scrollEl.scrollLeft;
|
81
|
-
} else {
|
82
|
-
var _items$item$offsetHei2, _items$item4;
|
83
|
-
carouselSize = scrollEl.offsetHeight;
|
84
|
-
itemSize = (_items$item$offsetHei2 = (_items$item4 = items.item(index)) === null || _items$item4 === void 0 ? void 0 : _items$item4.offsetHeight) !== null && _items$item$offsetHei2 !== void 0 ? _items$item$offsetHei2 : 0;
|
85
|
-
scrollStart = scrollEl.scrollTop;
|
86
|
-
}
|
87
|
-
return positionModByScrollAlign({
|
88
|
-
scrollAlign: scrollAlign,
|
89
|
-
position: position,
|
90
|
-
carouselSize: carouselSize,
|
91
|
-
itemSize: itemSize,
|
92
|
-
offset: offset,
|
93
|
-
scrollStart: scrollStart,
|
94
|
-
axis: axis
|
95
|
-
});
|
96
|
-
};
|
97
|
-
var DEFAULT_DURATION = 300;
|
98
|
-
|
99
|
-
// https://css-tricks.com/emulating-css-timing-functions-javascript/
|
100
|
-
var tfs = {
|
101
|
-
linear: function linear(t) {
|
102
|
-
return t;
|
103
|
-
},
|
104
|
-
// eslint-disable-next-line
|
105
|
-
easeIn: function easeIn(t) {
|
106
|
-
return Math.pow(t, 1.675);
|
107
|
-
},
|
108
|
-
// eslint-disable-next-line
|
109
|
-
easeOut: function easeOut(t) {
|
110
|
-
return 1 - Math.pow(1 - t, 1.675);
|
111
|
-
},
|
112
|
-
easeInOut: function easeInOut(t) {
|
113
|
-
return 0.5 * (Math.sin((t - 0.5) * Math.PI) + 1);
|
114
|
-
}
|
115
|
-
};
|
116
|
-
/**
|
117
|
-
* Плавная прокрутка по горизонтали
|
118
|
-
* @param {Element} elem
|
119
|
-
* @param {number} pos
|
120
|
-
* @param {number} duration
|
121
|
-
* @param {string} timingFunction
|
122
|
-
*/
|
123
|
-
var animatedScrollToX = exports.animatedScrollToX = function animatedScrollToX(elem, pos) {
|
124
|
-
var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_DURATION;
|
125
|
-
var timingFunction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'easeInOut';
|
126
|
-
var startTime;
|
127
|
-
var startX = elem.scrollLeft;
|
128
|
-
var endX = Math.max(0, Math.min(elem.scrollWidth - elem.clientWidth, pos));
|
129
|
-
var handleNewAnimationFrame = function handleNewAnimationFrame() {
|
130
|
-
startTime = startTime || Date.now();
|
131
|
-
var timePos = Math.min(1, Math.max(1, Date.now() - startTime) / duration);
|
132
|
-
var scrollPos = tfs[timingFunction](timePos);
|
133
|
-
var left = startX + (endX - startX) * scrollPos;
|
134
|
-
elem.scrollTo({
|
135
|
-
left: left
|
136
|
-
});
|
137
|
-
if (timePos !== 1) window.requestAnimationFrame(handleNewAnimationFrame);
|
138
|
-
};
|
139
|
-
window.requestAnimationFrame(handleNewAnimationFrame);
|
140
|
-
};
|
141
|
-
|
142
|
-
/**
|
143
|
-
* Прокрутка к указанной позиции с анимацией или без.
|
144
|
-
*/
|
145
|
-
var scrollToPos = exports.scrollToPos = function scrollToPos(_ref3) {
|
146
|
-
var scrollEl = _ref3.scrollEl,
|
147
|
-
pos = _ref3.pos,
|
148
|
-
axis = _ref3.axis,
|
149
|
-
animated = _ref3.animated,
|
150
|
-
duration = _ref3.duration,
|
151
|
-
timingFunction = _ref3.timingFunction;
|
152
|
-
if (axis === 'x' && Math.abs(pos - scrollEl.scrollLeft) > 1) {
|
153
|
-
if (animated) {
|
154
|
-
animatedScrollToX(scrollEl, pos, duration, timingFunction);
|
155
|
-
} else {
|
156
|
-
scrollEl.scrollTo({
|
157
|
-
left: pos
|
158
|
-
});
|
159
|
-
}
|
160
|
-
}
|
161
|
-
};
|
162
|
-
var round = function round(n) {
|
163
|
-
return Math.round(n * 100) / 100;
|
164
|
-
};
|
165
|
-
|
166
|
-
/**
|
167
|
-
* Получить позицию (слот) айтема в каруселе.
|
168
|
-
* Каждый айтем имеет свой слот относительно вьюпорта карусели.
|
169
|
-
*/
|
170
|
-
var getItemSlot = exports.getItemSlot = function getItemSlot(itemIndex, itemEnd, itemSize, scrollStart, scrollSize, scrollAlign) {
|
171
|
-
var prevIndex = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
|
172
|
-
var offset = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 0;
|
173
|
-
/**
|
174
|
-
* Граница и центр скролла (видимой части).
|
175
|
-
* Смещение + размер.
|
176
|
-
*/
|
177
|
-
var scrollEnd = scrollStart + scrollSize;
|
178
|
-
var scrollCenter = scrollStart + scrollSize / 2;
|
179
|
-
var itemCenter = itemEnd - itemSize / 2;
|
180
|
-
if (scrollAlign === 'center') {
|
181
|
-
return round((itemCenter - scrollCenter) / itemSize);
|
182
|
-
}
|
183
|
-
if (scrollAlign === 'start') {
|
184
|
-
return round((itemEnd - itemSize - scrollStart) / itemSize);
|
185
|
-
}
|
186
|
-
if (scrollAlign === 'end') {
|
187
|
-
return round((itemEnd - (scrollSize + scrollStart)) / itemSize);
|
188
|
-
}
|
189
|
-
if (scrollAlign === 'activeDirection') {
|
190
|
-
var prevStart = offset + itemSize * prevIndex;
|
191
|
-
var prevEnd = prevStart + itemSize;
|
192
|
-
var prevVisible = prevEnd > scrollStart && prevStart < scrollEnd;
|
193
|
-
if (!prevVisible) {
|
194
|
-
if (prevIndex < itemIndex) {
|
195
|
-
return round((itemEnd - (scrollSize + scrollStart)) / itemSize);
|
196
|
-
}
|
197
|
-
return round((itemEnd - itemSize - scrollStart) / itemSize);
|
198
|
-
}
|
199
|
-
}
|
200
|
-
return null;
|
201
|
-
};
|
202
|
-
function getCarouselItems(track) {
|
203
|
-
return track.children;
|
204
|
-
}
|
205
|
-
function useDebouncedFunction(func, delay, cleanUp) {
|
206
|
-
var timeoutRef = (0, _react.useRef)();
|
207
|
-
|
208
|
-
/**
|
209
|
-
* Очистка таймера
|
210
|
-
*/
|
211
|
-
function clearTimer() {
|
212
|
-
if (timeoutRef.current) {
|
213
|
-
clearTimeout(timeoutRef.current);
|
214
|
-
timeoutRef.current = undefined;
|
215
|
-
}
|
216
|
-
}
|
217
|
-
|
218
|
-
/**
|
219
|
-
* Очищаем таймер при анмаунте компонента, если cleanUp выставлен в true
|
220
|
-
* и тем самым отменяем последний запланированный вызов
|
221
|
-
*/
|
222
|
-
(0, _react.useEffect)(function () {
|
223
|
-
return cleanUp ? clearTimer : undefined;
|
224
|
-
}, [cleanUp]);
|
225
|
-
return function () {
|
226
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
227
|
-
args[_key] = arguments[_key];
|
228
|
-
}
|
229
|
-
clearTimer();
|
230
|
-
timeoutRef.current = setTimeout(function () {
|
231
|
-
return func.apply(void 0, args);
|
232
|
-
}, delay);
|
233
|
-
};
|
234
|
-
}
|
235
|
-
var THROTTLE_DEFAULT_MS = 100;
|
236
|
-
var DEBOUNCE_DEFAULT_MS = 150;
|
237
|
-
var useCarousel = exports.useCarousel = function useCarousel(_ref4) {
|
238
|
-
var index = _ref4.index,
|
239
|
-
_ref4$axis = _ref4.axis,
|
240
|
-
axis = _ref4$axis === void 0 ? 'x' : _ref4$axis,
|
241
|
-
_ref4$detectActive = _ref4.detectActive,
|
242
|
-
detectActive = _ref4$detectActive === void 0 ? false : _ref4$detectActive,
|
243
|
-
_ref4$detectThreshold = _ref4.detectThreshold,
|
244
|
-
detectThreshold = _ref4$detectThreshold === void 0 ? 0.5 : _ref4$detectThreshold,
|
245
|
-
_ref4$scrollAlign = _ref4.scrollAlign,
|
246
|
-
scrollAlign = _ref4$scrollAlign === void 0 ? 'center' : _ref4$scrollAlign,
|
247
|
-
scaleCallback = _ref4.scaleCallback,
|
248
|
-
scaleResetCallback = _ref4.scaleResetCallback,
|
249
|
-
onIndexChange = _ref4.onIndexChange,
|
250
|
-
onDetectActiveItem = _ref4.onDetectActiveItem,
|
251
|
-
_ref4$animatedScrollB = _ref4.animatedScrollByIndex,
|
252
|
-
animatedScrollByIndex = _ref4$animatedScrollB === void 0 ? false : _ref4$animatedScrollB,
|
253
|
-
_ref4$throttleMs = _ref4.throttleMs,
|
254
|
-
throttleMs = _ref4$throttleMs === void 0 ? THROTTLE_DEFAULT_MS : _ref4$throttleMs,
|
255
|
-
_ref4$debounceMs = _ref4.debounceMs,
|
256
|
-
debounceMs = _ref4$debounceMs === void 0 ? DEBOUNCE_DEFAULT_MS : _ref4$debounceMs;
|
257
|
-
var prevIndex = (0, _react.useRef)(null);
|
258
|
-
var direction = (0, _react.useRef)(null);
|
259
|
-
var offset = (0, _react.useRef)(0);
|
260
|
-
var scrollRef = (0, _react.useRef)(null);
|
261
|
-
var trackRef = (0, _react.useRef)(null);
|
262
|
-
|
263
|
-
/**
|
264
|
-
* Для того, чтобы не спамить изменениями индекса.
|
265
|
-
* Задержка дебаунса слегка больше, чем у тротлинга.
|
266
|
-
* Таким образом, событие срабатывает при завершении скролла.
|
267
|
-
*/
|
268
|
-
var debouncedOnIndexChange = useDebouncedFunction(function (i) {
|
269
|
-
return onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(i);
|
270
|
-
}, debounceMs);
|
271
|
-
|
272
|
-
/**
|
273
|
-
* Вычисление центрального элемента.
|
274
|
-
* Подсчет: от 0 до 1, какое количество ширины/высоты
|
275
|
-
* каждого элемента находится по центру скролла.
|
276
|
-
*/
|
277
|
-
var throttledDetectActiveItem = (0, _react.useMemo)(function () {
|
278
|
-
return (0, _lodash["default"])(function () {
|
279
|
-
if (!detectActive || scrollRef.current === null || trackRef.current === null) {
|
280
|
-
return;
|
281
|
-
}
|
282
|
-
|
283
|
-
/**
|
284
|
-
* Правая (или нижняя для Оу) граница элемента.
|
285
|
-
*/
|
286
|
-
var itemEdge = offset.current;
|
287
|
-
|
288
|
-
/**
|
289
|
-
* Смещение (отрицательный или положительный отступ)
|
290
|
-
* и размер карусели (для Ox - ширина, для Oy - высота).
|
291
|
-
*/
|
292
|
-
var scrollPos = scrollRef.current[axis === 'x' ? 'scrollLeft' : 'scrollTop'];
|
293
|
-
var scrollSize = scrollRef.current[axis === 'x' ? 'offsetWidth' : 'offsetHeight'];
|
294
|
-
|
295
|
-
/**
|
296
|
-
* Граница скролла (видимой части).
|
297
|
-
* Смещение + размер.
|
298
|
-
*/
|
299
|
-
var scrollEdge = scrollPos + scrollSize;
|
300
|
-
|
301
|
-
/**
|
302
|
-
* Элементы перед, после и в видимой части.
|
303
|
-
* перед [ ВИДИМЫЕ ] после
|
304
|
-
*/
|
305
|
-
var prevItems = [];
|
306
|
-
var nextItems = [];
|
307
|
-
var count = 0;
|
308
|
-
var items = getCarouselItems(trackRef.current);
|
309
|
-
|
310
|
-
/**
|
311
|
-
* Проходим по всему списку, суммируя ширины элементов,
|
312
|
-
* пока не найдем один элемент, чей центр будет в центре карусели.
|
313
|
-
*/
|
314
|
-
for (var itemIndex = 0; itemIndex < items.length; itemIndex++) {
|
315
|
-
var _prevIndex$current;
|
316
|
-
var item = items.item(itemIndex);
|
317
|
-
if (item === null) {
|
318
|
-
// eslint-disable-next-line no-continue
|
319
|
-
continue;
|
320
|
-
}
|
321
|
-
|
322
|
-
/**
|
323
|
-
* Для Ox - ширина, для Oy - высота.
|
324
|
-
*/
|
325
|
-
var itemSize = item[axis === 'x' ? 'offsetWidth' : 'offsetHeight'];
|
326
|
-
|
327
|
-
/**
|
328
|
-
* Все элементы правее вьюпорта выпадают из процедуры.
|
329
|
-
* Сравниваем по предыдущему элементу.
|
330
|
-
* [ ... ] ...|n| <- Левый край элемента за пределами начала видимой части
|
331
|
-
*/
|
332
|
-
if (itemEdge > scrollEdge) {
|
333
|
-
if (scaleCallback && scaleResetCallback) {
|
334
|
-
nextItems.push(item);
|
335
|
-
}
|
336
|
-
// eslint-disable-next-line no-continue
|
337
|
-
continue;
|
338
|
-
}
|
339
|
-
itemEdge += itemSize;
|
340
|
-
|
341
|
-
/**
|
342
|
-
* Все элементы левее вьюпорта выпадают из процедуры.
|
343
|
-
* Сравниваем по текущему элементу.
|
344
|
-
* Правый край элемента за пределами начала видимой части -> |p|... [ ... ]
|
345
|
-
*/
|
346
|
-
if (scrollPos > itemEdge) {
|
347
|
-
if (scaleCallback && scaleResetCallback) {
|
348
|
-
prevItems.push(item);
|
349
|
-
}
|
350
|
-
// eslint-disable-next-line no-continue
|
351
|
-
continue;
|
352
|
-
}
|
353
|
-
var itemSlot = getItemSlot(itemIndex, itemEdge, itemSize, scrollPos, scrollSize, scrollAlign, (_prevIndex$current = prevIndex.current) !== null && _prevIndex$current !== void 0 ? _prevIndex$current : 0, offset.current);
|
354
|
-
if (itemSlot !== null) {
|
355
|
-
if (detectThreshold && Math.abs(itemSlot) <= detectThreshold) {
|
356
|
-
onDetectActiveItem === null || onDetectActiveItem === void 0 || onDetectActiveItem(itemIndex);
|
357
|
-
debouncedOnIndexChange === null || debouncedOnIndexChange === void 0 || debouncedOnIndexChange(itemIndex);
|
358
|
-
}
|
359
|
-
if (scaleCallback) {
|
360
|
-
scaleCallback(item, itemSlot);
|
361
|
-
/**
|
362
|
-
* Количество айтемов в видимой части.
|
363
|
-
*/
|
364
|
-
count++;
|
365
|
-
}
|
366
|
-
}
|
367
|
-
}
|
368
|
-
if (scaleCallback && scaleResetCallback) {
|
369
|
-
window.requestAnimationFrame(function () {
|
370
|
-
if (direction.current) {
|
371
|
-
if (nextItems.length) {
|
372
|
-
nextItems.splice(0, count).forEach(function (elem) {
|
373
|
-
return scaleCallback(elem, count);
|
374
|
-
});
|
375
|
-
if (nextItems.length) {
|
376
|
-
nextItems.splice(0, count).forEach(function (elem) {
|
377
|
-
return scaleResetCallback(elem);
|
378
|
-
});
|
379
|
-
}
|
380
|
-
}
|
381
|
-
} else if (prevItems.length) {
|
382
|
-
var prItemsRev = prevItems.reverse();
|
383
|
-
prItemsRev.splice(0, count).forEach(function (elem) {
|
384
|
-
return scaleCallback(elem, count * -1);
|
385
|
-
});
|
386
|
-
if (prItemsRev.length) {
|
387
|
-
prItemsRev.splice(0, count).forEach(function (elem) {
|
388
|
-
return scaleResetCallback(elem);
|
389
|
-
});
|
390
|
-
}
|
391
|
-
}
|
392
|
-
});
|
393
|
-
}
|
394
|
-
}, throttleMs);
|
395
|
-
}, [axis, debouncedOnIndexChange, detectActive, detectThreshold, onDetectActiveItem, scaleCallback, scaleResetCallback, scrollAlign, throttleMs]);
|
396
|
-
|
397
|
-
/**
|
398
|
-
* Прокрутка до нужной позиции индекса.
|
399
|
-
*/
|
400
|
-
var toIndex = (0, _react.useCallback)(function (i) {
|
401
|
-
var scrollEl = scrollRef.current;
|
402
|
-
var items = trackRef.current ? getCarouselItems(trackRef.current) : null;
|
403
|
-
if (scrollEl && items && items.length > 0 && i >= 0) {
|
404
|
-
scrollToPos({
|
405
|
-
scrollEl: scrollEl,
|
406
|
-
pos: getCalculatedPos({
|
407
|
-
scrollEl: scrollEl,
|
408
|
-
items: items,
|
409
|
-
axis: axis,
|
410
|
-
index: i,
|
411
|
-
offset: offset.current,
|
412
|
-
scrollAlign: scrollAlign
|
413
|
-
}),
|
414
|
-
axis: axis,
|
415
|
-
/**
|
416
|
-
* Без анимации при переходе на другой конец списка
|
417
|
-
*/
|
418
|
-
animated: animatedScrollByIndex && (prevIndex.current === null || Math.abs(i - prevIndex.current) !== items.length - 1)
|
419
|
-
});
|
420
|
-
prevIndex.current = i;
|
421
|
-
}
|
422
|
-
}, [animatedScrollByIndex, axis, scrollAlign]);
|
423
|
-
(0, _react.useEffect)(function () {
|
424
|
-
if (scrollRef.current && trackRef.current) {
|
425
|
-
offset.current = getCalculatedOffset(scrollRef.current, trackRef.current, axis);
|
426
|
-
}
|
427
|
-
}, [axis]);
|
428
|
-
|
429
|
-
/**
|
430
|
-
* Операции на маунте/анмаунте компонента.
|
431
|
-
* Создать слушатели событи и т.п.
|
432
|
-
*/
|
433
|
-
(0, _react.useEffect)(function () {
|
434
|
-
var carouselElement = scrollRef.current;
|
435
|
-
if (carouselElement) {
|
436
|
-
carouselElement.addEventListener('scroll', throttledDetectActiveItem);
|
437
|
-
}
|
438
|
-
return function () {
|
439
|
-
if (carouselElement) {
|
440
|
-
carouselElement.removeEventListener('scroll', throttledDetectActiveItem);
|
441
|
-
}
|
442
|
-
};
|
443
|
-
}, [throttledDetectActiveItem]);
|
444
|
-
|
445
|
-
/**
|
446
|
-
* Нужно вызвать только при первом рендере
|
447
|
-
*/
|
448
|
-
(0, _react.useEffect)(function () {
|
449
|
-
requestAnimationFrame(function () {
|
450
|
-
/**
|
451
|
-
* Прокрутка до начального индекса.
|
452
|
-
*/
|
453
|
-
toIndex(index);
|
454
|
-
|
455
|
-
/**
|
456
|
-
* Если на момент запуска карусель уже находится на нужной позиции,
|
457
|
-
* событие скролла не произойдет, не сработает и определение центра,
|
458
|
-
* необходимо вызвать его вручную.
|
459
|
-
*/
|
460
|
-
throttledDetectActiveItem();
|
461
|
-
});
|
462
|
-
|
463
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
464
|
-
}, []);
|
465
|
-
|
466
|
-
/**
|
467
|
-
* Прокрутка до нужной позиции индекса, если индекс изменился.
|
468
|
-
*/
|
469
|
-
(0, _react.useEffect)(function () {
|
470
|
-
if (index !== prevIndex.current) {
|
471
|
-
toIndex(index);
|
472
|
-
}
|
473
|
-
}, [index, toIndex]);
|
474
|
-
return {
|
475
|
-
scrollRef: scrollRef,
|
476
|
-
trackRef: trackRef
|
477
|
-
};
|
478
|
-
};
|