@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.
Files changed (105) hide show
  1. package/cjs/index.css +0 -7
  2. package/cjs/index.js +0 -7
  3. package/cjs/index.js.map +1 -1
  4. package/emotion/cjs/index.js +0 -11
  5. package/emotion/es/index.js +1 -2
  6. package/es/index.css +0 -7
  7. package/es/index.js +0 -3
  8. package/es/index.js.map +1 -1
  9. package/package.json +4 -4
  10. package/styled-components/cjs/index.js +0 -11
  11. package/styled-components/es/index.js +1 -2
  12. package/types/index.d.ts +0 -1
  13. package/types/index.d.ts.map +1 -1
  14. package/cjs/components/Carousel/Carousel.css +0 -4
  15. package/cjs/components/Carousel/Carousel.js +0 -80
  16. package/cjs/components/Carousel/Carousel.js.map +0 -1
  17. package/cjs/components/Carousel/Carousel.styles.js +0 -67
  18. package/cjs/components/Carousel/Carousel.styles.js.map +0 -1
  19. package/cjs/components/Carousel/Carousel.styles_1lyqijv.css +0 -4
  20. package/cjs/components/Carousel/CarouselItem.js +0 -53
  21. package/cjs/components/Carousel/CarouselItem.js.map +0 -1
  22. package/cjs/components/Carousel/CarouselItem_cqjszm.css +0 -1
  23. package/cjs/components/Carousel/useCarousel.js +0 -487
  24. package/cjs/components/Carousel/useCarousel.js.map +0 -1
  25. package/cjs/components/Carousel/useDragScroll.js +0 -62
  26. package/cjs/components/Carousel/useDragScroll.js.map +0 -1
  27. package/emotion/cjs/components/Carousel/Carousel.js +0 -77
  28. package/emotion/cjs/components/Carousel/Carousel.styles.js +0 -49
  29. package/emotion/cjs/components/Carousel/Carousel.types.js +0 -5
  30. package/emotion/cjs/components/Carousel/CarouselItem.js +0 -38
  31. package/emotion/cjs/components/Carousel/index.js +0 -32
  32. package/emotion/cjs/components/Carousel/useCarousel.js +0 -478
  33. package/emotion/cjs/components/Carousel/useDragScroll.js +0 -65
  34. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -10
  35. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +0 -18
  36. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
  37. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +0 -10
  38. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.js +0 -18
  39. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
  40. package/emotion/es/components/Carousel/Carousel.js +0 -69
  41. package/emotion/es/components/Carousel/Carousel.styles.js +0 -42
  42. package/emotion/es/components/Carousel/Carousel.types.js +0 -1
  43. package/emotion/es/components/Carousel/CarouselItem.js +0 -31
  44. package/emotion/es/components/Carousel/index.js +0 -3
  45. package/emotion/es/components/Carousel/useCarousel.js +0 -468
  46. package/emotion/es/components/Carousel/useDragScroll.js +0 -59
  47. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -4
  48. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.js +0 -6
  49. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
  50. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.config.js +0 -4
  51. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.js +0 -6
  52. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
  53. package/es/components/Carousel/Carousel.css +0 -4
  54. package/es/components/Carousel/Carousel.js +0 -71
  55. package/es/components/Carousel/Carousel.js.map +0 -1
  56. package/es/components/Carousel/Carousel.styles.js +0 -60
  57. package/es/components/Carousel/Carousel.styles.js.map +0 -1
  58. package/es/components/Carousel/Carousel.styles_1lyqijv.css +0 -4
  59. package/es/components/Carousel/CarouselItem.js +0 -45
  60. package/es/components/Carousel/CarouselItem.js.map +0 -1
  61. package/es/components/Carousel/CarouselItem_cqjszm.css +0 -1
  62. package/es/components/Carousel/useCarousel.js +0 -472
  63. package/es/components/Carousel/useCarousel.js.map +0 -1
  64. package/es/components/Carousel/useDragScroll.js +0 -58
  65. package/es/components/Carousel/useDragScroll.js.map +0 -1
  66. package/styled-components/cjs/components/Carousel/Carousel.js +0 -77
  67. package/styled-components/cjs/components/Carousel/Carousel.styles.js +0 -38
  68. package/styled-components/cjs/components/Carousel/Carousel.types.js +0 -5
  69. package/styled-components/cjs/components/Carousel/CarouselItem.js +0 -37
  70. package/styled-components/cjs/components/Carousel/index.js +0 -32
  71. package/styled-components/cjs/components/Carousel/useCarousel.js +0 -478
  72. package/styled-components/cjs/components/Carousel/useDragScroll.js +0 -65
  73. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -10
  74. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +0 -18
  75. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
  76. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +0 -10
  77. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.js +0 -18
  78. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
  79. package/styled-components/es/components/Carousel/Carousel.js +0 -69
  80. package/styled-components/es/components/Carousel/Carousel.styles.js +0 -30
  81. package/styled-components/es/components/Carousel/Carousel.types.js +0 -1
  82. package/styled-components/es/components/Carousel/CarouselItem.js +0 -30
  83. package/styled-components/es/components/Carousel/index.js +0 -3
  84. package/styled-components/es/components/Carousel/useCarousel.js +0 -468
  85. package/styled-components/es/components/Carousel/useDragScroll.js +0 -59
  86. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +0 -4
  87. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.js +0 -6
  88. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +0 -80
  89. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.config.js +0 -4
  90. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.js +0 -6
  91. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +0 -80
  92. package/types/components/Carousel/Carousel.d.ts +0 -22
  93. package/types/components/Carousel/Carousel.d.ts.map +0 -1
  94. package/types/components/Carousel/Carousel.styles.d.ts +0 -16
  95. package/types/components/Carousel/Carousel.styles.d.ts.map +0 -1
  96. package/types/components/Carousel/Carousel.types.d.ts +0 -111
  97. package/types/components/Carousel/Carousel.types.d.ts.map +0 -1
  98. package/types/components/Carousel/CarouselItem.d.ts +0 -4
  99. package/types/components/Carousel/CarouselItem.d.ts.map +0 -1
  100. package/types/components/Carousel/index.d.ts +0 -5
  101. package/types/components/Carousel/index.d.ts.map +0 -1
  102. package/types/components/Carousel/useCarousel.d.ts +0 -63
  103. package/types/components/Carousel/useCarousel.d.ts.map +0 -1
  104. package/types/components/Carousel/useDragScroll.d.ts +0 -3
  105. 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,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -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
- };