@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,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
|
-
};
|
@@ -1,65 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.useDragScroll = void 0;
|
7
|
-
var _react = /*#__PURE__*/require("react");
|
8
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
9
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
10
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
11
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
12
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
13
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
14
|
-
var SCROLL_SPEED = 2;
|
15
|
-
var useDragScroll = exports.useDragScroll = function useDragScroll(scrollRef, isDragScrollDisabled) {
|
16
|
-
var _useState = (0, _react.useState)(false),
|
17
|
-
_useState2 = _slicedToArray(_useState, 2),
|
18
|
-
isDragging = _useState2[0],
|
19
|
-
setDragging = _useState2[1];
|
20
|
-
var _useState3 = (0, _react.useState)(0),
|
21
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
22
|
-
startX = _useState4[0],
|
23
|
-
setStartX = _useState4[1];
|
24
|
-
var _useState5 = (0, _react.useState)(0),
|
25
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
26
|
-
scrollLeft = _useState6[0],
|
27
|
-
setScrollLeft = _useState6[1];
|
28
|
-
var handleMouseMove = (0, _react.useCallback)(function (e) {
|
29
|
-
if (isDragging && scrollRef && scrollRef.current) {
|
30
|
-
var dx = (e.clientX - startX) * SCROLL_SPEED;
|
31
|
-
scrollRef.current.scrollLeft = scrollLeft - dx;
|
32
|
-
}
|
33
|
-
}, [scrollRef, scrollLeft, isDragging, startX]);
|
34
|
-
var handleMouseUp = (0, _react.useCallback)(function () {
|
35
|
-
setDragging(false);
|
36
|
-
if (scrollRef && scrollRef.current) {
|
37
|
-
scrollRef.current.style.cursor = 'grab';
|
38
|
-
}
|
39
|
-
}, [scrollRef, setDragging]);
|
40
|
-
var handleMouseDown = (0, _react.useCallback)(function (e) {
|
41
|
-
setDragging(true);
|
42
|
-
if (scrollRef && scrollRef.current) {
|
43
|
-
setStartX(e.clientX);
|
44
|
-
setScrollLeft(scrollRef.current.scrollLeft);
|
45
|
-
scrollRef.current.style.cursor = 'grabbing';
|
46
|
-
}
|
47
|
-
}, [scrollRef, setDragging, setStartX, setScrollLeft, handleMouseUp, handleMouseMove]);
|
48
|
-
(0, _react.useEffect)(function () {
|
49
|
-
if (scrollRef && scrollRef.current && !isDragScrollDisabled) {
|
50
|
-
scrollRef.current.style.userSelect = 'none';
|
51
|
-
scrollRef.current.addEventListener('mousedown', handleMouseDown);
|
52
|
-
scrollRef.current.addEventListener('mouseup', handleMouseUp);
|
53
|
-
scrollRef.current.addEventListener('mouseleave', handleMouseUp);
|
54
|
-
scrollRef.current.addEventListener('mousemove', handleMouseMove);
|
55
|
-
}
|
56
|
-
return function () {
|
57
|
-
if (scrollRef && scrollRef.current && !isDragScrollDisabled) {
|
58
|
-
scrollRef.current.removeEventListener('mousedown', handleMouseDown);
|
59
|
-
scrollRef.current.removeEventListener('mouseup', handleMouseUp);
|
60
|
-
scrollRef.current.removeEventListener('mouseleave', handleMouseUp);
|
61
|
-
scrollRef.current.removeEventListener('mousemove', handleMouseMove);
|
62
|
-
}
|
63
|
-
};
|
64
|
-
}, [scrollRef, handleMouseDown, handleMouseUp, handleMouseMove, isDragScrollDisabled]);
|
65
|
-
};
|
@@ -1,18 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.Carousel = void 0;
|
7
|
-
Object.defineProperty(exports, "CarouselItem", {
|
8
|
-
enumerable: true,
|
9
|
-
get: function get() {
|
10
|
-
return _Carousel.CarouselItem;
|
11
|
-
}
|
12
|
-
});
|
13
|
-
exports.mergedConfig = void 0;
|
14
|
-
var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
|
15
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
16
|
-
var _Carousel2 = /*#__PURE__*/require("./Carousel.config");
|
17
|
-
var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselConfig, _Carousel2.config);
|
18
|
-
var Carousel = exports.Carousel = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
@@ -1,80 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentProps } from 'react';
|
3
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
-
import styled from 'styled-components';
|
5
|
-
|
6
|
-
import { WithTheme } from '../../../_helpers';
|
7
|
-
|
8
|
-
import { Carousel, CarouselItem } from './Carousel';
|
9
|
-
|
10
|
-
type StoryCarouselProps = ComponentProps<typeof Carousel>;
|
11
|
-
|
12
|
-
const meta: Meta<StoryCarouselProps> = {
|
13
|
-
title: 'b2c/Data Display/Carousel',
|
14
|
-
component: Carousel,
|
15
|
-
decorators: [WithTheme],
|
16
|
-
argTypes: {
|
17
|
-
align: {
|
18
|
-
options: ['center', 'start', 'end'],
|
19
|
-
control: {
|
20
|
-
type: 'inline-radio',
|
21
|
-
},
|
22
|
-
},
|
23
|
-
isDragScrollDisabled: {
|
24
|
-
control: 'boolean',
|
25
|
-
},
|
26
|
-
},
|
27
|
-
args: {
|
28
|
-
align: 'center',
|
29
|
-
isDragScrollDisabled: false,
|
30
|
-
},
|
31
|
-
parameters: {
|
32
|
-
controls: {
|
33
|
-
include: ['align', 'isDragScrollDisabled'],
|
34
|
-
},
|
35
|
-
},
|
36
|
-
};
|
37
|
-
|
38
|
-
export default meta;
|
39
|
-
|
40
|
-
const items = Array(25)
|
41
|
-
.fill({
|
42
|
-
title: 'Заголовок',
|
43
|
-
})
|
44
|
-
.map(({ title }, i) => ({
|
45
|
-
id: i,
|
46
|
-
title: `${title} ${i}`,
|
47
|
-
}));
|
48
|
-
|
49
|
-
const StyledCard = styled.div`
|
50
|
-
position: relative;
|
51
|
-
border-radius: 8px;
|
52
|
-
width: 350px;
|
53
|
-
height: 50px;
|
54
|
-
padding: 8px;
|
55
|
-
background-color: #add8e6;
|
56
|
-
`;
|
57
|
-
|
58
|
-
const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
|
59
|
-
const [index, setIndex] = React.useState(0);
|
60
|
-
|
61
|
-
return (
|
62
|
-
<Carousel
|
63
|
-
index={index}
|
64
|
-
detectActive
|
65
|
-
onIndexChange={setIndex}
|
66
|
-
scrollAlign={align}
|
67
|
-
isDragScrollDisabled={isDragScrollDisabled}
|
68
|
-
>
|
69
|
-
{items.map((item, i) => (
|
70
|
-
<CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
|
71
|
-
<StyledCard>{item.title}</StyledCard>
|
72
|
-
</CarouselItem>
|
73
|
-
))}
|
74
|
-
</Carousel>
|
75
|
-
);
|
76
|
-
};
|
77
|
-
|
78
|
-
export const Default: StoryObj<StoryCarouselProps> = {
|
79
|
-
render: (args) => <StoryDefault {...args} />,
|
80
|
-
};
|
@@ -1,18 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.Carousel = void 0;
|
7
|
-
Object.defineProperty(exports, "CarouselItem", {
|
8
|
-
enumerable: true,
|
9
|
-
get: function get() {
|
10
|
-
return _Carousel.CarouselItem;
|
11
|
-
}
|
12
|
-
});
|
13
|
-
exports.mergedConfig = void 0;
|
14
|
-
var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
|
15
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
16
|
-
var _Carousel2 = /*#__PURE__*/require("./Carousel.config");
|
17
|
-
var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselConfig, _Carousel2.config);
|
18
|
-
var Carousel = exports.Carousel = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|