@cleartrip/ct-design-peek-carousel 1.2.0-SNAPSHOT-test-peekCarousel.0 → 1.2.0-SNAPSHOT-test-peekCarousel.1.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/dist/PeekCarousel.d.ts.map +1 -1
- package/dist/constants.d.ts +2 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/ct-design-peek-carousel.browser.cjs.js +1 -1
- package/dist/ct-design-peek-carousel.browser.cjs.js.map +1 -1
- package/dist/ct-design-peek-carousel.browser.esm.js +1 -1
- package/dist/ct-design-peek-carousel.browser.esm.js.map +1 -1
- package/dist/ct-design-peek-carousel.cjs.js +70 -64
- package/dist/ct-design-peek-carousel.cjs.js.map +1 -1
- package/dist/ct-design-peek-carousel.esm.js +71 -64
- package/dist/ct-design-peek-carousel.esm.js.map +1 -1
- package/dist/ct-design-peek-carousel.umd.js +74 -67
- package/dist/ct-design-peek-carousel.umd.js.map +1 -1
- package/dist/type.d.ts +2 -1
- package/dist/type.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { __assign } from 'tslib';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React, { forwardRef, useState, useRef,
|
|
3
|
+
import React, { forwardRef, useState, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
|
|
4
4
|
import { useSwipeable } from 'react-swipeable';
|
|
5
|
-
import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
|
|
6
5
|
import { Container } from '@cleartrip/ct-design-container';
|
|
7
6
|
|
|
8
7
|
var SLIDER_DIRECTION;
|
|
@@ -12,38 +11,42 @@ var SLIDER_DIRECTION;
|
|
|
12
11
|
})(SLIDER_DIRECTION || (SLIDER_DIRECTION = {}));
|
|
13
12
|
var SWIPE_THRESHOLD_VELOCITY = 0.2;
|
|
14
13
|
var SWIPE_THRESHOLD_DELTA = 50;
|
|
15
|
-
|
|
16
|
-
var
|
|
17
|
-
var distance = index - effectiveIndex;
|
|
18
|
-
var absDistance = Math.abs(distance);
|
|
19
|
-
var scale;
|
|
20
|
-
if (absDistance < 1) {
|
|
21
|
-
scale = 1.0 - absDistance * 0.15;
|
|
22
|
-
}
|
|
23
|
-
else {
|
|
24
|
-
scale = 0.85;
|
|
25
|
-
}
|
|
26
|
-
return {
|
|
27
|
-
transform: "scale(".concat(scale, ")"),
|
|
28
|
-
};
|
|
29
|
-
};
|
|
14
|
+
var MIN_SCALE = 0.7;
|
|
15
|
+
var MAX_SCALE = 1.0;
|
|
30
16
|
|
|
31
17
|
var PeekCarousel = forwardRef(function (props, ref) {
|
|
32
18
|
var _a;
|
|
33
|
-
var children = props.children, onSlide = props.onSlide, _b = props.startIndex, startIndex = _b === void 0 ? 0 : _b, height = props.height, _c = props.animationDelay, animationDelay = _c === void 0 ?
|
|
19
|
+
var children = props.children, onSlide = props.onSlide, _b = props.startIndex, startIndex = _b === void 0 ? 0 : _b, height = props.height, _c = props.animationDelay, animationDelay = _c === void 0 ? 250 : _c, cardWidth = props.cardWidth, _d = props.slideMargin, slideMargin = _d === void 0 ? 0 : _d, _e = props.thresholdVelocity, thresholdVelocity = _e === void 0 ? SWIPE_THRESHOLD_VELOCITY : _e, _f = props.thresholdDelta, thresholdDelta = _f === void 0 ? SWIPE_THRESHOLD_DELTA : _f, styleConfig = props.styleConfig, _g = props.virtualized, virtualized = _g === void 0 ? false : _g, _h = props.overscan, overscan = _h === void 0 ? 2 : _h, placeholder = props.placeholder;
|
|
34
20
|
var _j = styleConfig || {}, relativeBaseContainerProps = _j.relativeBaseContainerProps, rootContainerProps = _j.rootContainerProps, sliderCardContainerProps = _j.sliderCardContainerProps, sliderRootContainerProps = _j.sliderRootContainerProps, sliderCardRootContainerProps = _j.sliderCardRootContainerProps;
|
|
35
21
|
var totalCount = (_a = children === null || children === void 0 ? void 0 : children.length) !== null && _a !== void 0 ? _a : 0;
|
|
36
|
-
var _k = useState(
|
|
37
|
-
var _l = useState(0), dragOffset = _l[0], setDragOffset = _l[1];
|
|
38
|
-
var _m = useState(false), isDragging = _m[0], setIsDragging = _m[1];
|
|
22
|
+
var _k = useState(startIndex), activeIndex = _k[0], setActiveIndex = _k[1];
|
|
39
23
|
var sliderRef = useRef(null);
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
if (
|
|
43
|
-
|
|
44
|
-
|
|
24
|
+
var cardsRef = useRef(new Map());
|
|
25
|
+
var updateCardScales = useCallback(function (effectiveIndex, duration) {
|
|
26
|
+
if (duration === void 0) { duration = 0; }
|
|
27
|
+
var baseIndex = Math.round(effectiveIndex);
|
|
28
|
+
var start = Math.max(0, baseIndex - overscan);
|
|
29
|
+
var end = Math.min(totalCount - 1, baseIndex + overscan);
|
|
30
|
+
for (var i = start; i <= end; i++) {
|
|
31
|
+
var card = cardsRef.current.get(i);
|
|
32
|
+
if (!card)
|
|
33
|
+
continue;
|
|
34
|
+
var distance = Math.abs(i - effectiveIndex);
|
|
35
|
+
var scale = distance < 1 ? MAX_SCALE - distance * (MAX_SCALE - MIN_SCALE) : MIN_SCALE;
|
|
36
|
+
card.style.transform = "scale(".concat(scale, ")");
|
|
37
|
+
card.style.transition = duration > 0 ? "transform ".concat(duration, "ms cubic-bezier(0.25, 0.1, 0.25, 1)") : 'none';
|
|
38
|
+
}
|
|
39
|
+
}, [totalCount, overscan]);
|
|
40
|
+
var setCardRef = useCallback(function (index) { return function (el) {
|
|
41
|
+
if (el)
|
|
42
|
+
cardsRef.current.set(index, el);
|
|
43
|
+
else
|
|
44
|
+
cardsRef.current.delete(index);
|
|
45
|
+
}; }, []);
|
|
45
46
|
var cardWidthPx = parseFloat(cardWidth) || 0;
|
|
46
|
-
var
|
|
47
|
+
var scaleGap = (cardWidthPx * (1 - MIN_SCALE)) / 2;
|
|
48
|
+
var layoutMargin = slideMargin - scaleGap;
|
|
49
|
+
var stepSize = cardWidthPx + layoutMargin;
|
|
47
50
|
var centerPadding = "calc(50% - ".concat(cardWidthPx / 2, "px)");
|
|
48
51
|
var visibleRange = useMemo(function () {
|
|
49
52
|
if (!virtualized)
|
|
@@ -55,10 +58,14 @@ var PeekCarousel = forwardRef(function (props, ref) {
|
|
|
55
58
|
}, [virtualized, activeIndex, overscan, totalCount]);
|
|
56
59
|
var goToIndex = useCallback(function (index) {
|
|
57
60
|
var clampedIndex = Math.max(0, Math.min(index, totalCount - 1));
|
|
58
|
-
if (
|
|
59
|
-
|
|
61
|
+
if (sliderRef.current) {
|
|
62
|
+
sliderRef.current.style.transform = "translateX(".concat(-clampedIndex * stepSize, "px)");
|
|
63
|
+
sliderRef.current.style.transition = "transform ".concat(animationDelay, "ms cubic-bezier(0.25, 0.1, 0.25, 1)");
|
|
64
|
+
}
|
|
65
|
+
updateCardScales(clampedIndex, animationDelay);
|
|
66
|
+
setTimeout(function () { return setActiveIndex(clampedIndex); }, animationDelay);
|
|
60
67
|
onSlide === null || onSlide === void 0 ? void 0 : onSlide(clampedIndex);
|
|
61
|
-
}, [totalCount,
|
|
68
|
+
}, [totalCount, stepSize, animationDelay, updateCardScales, onSlide]);
|
|
62
69
|
var goToItemById = useCallback(function (id) {
|
|
63
70
|
if (!children)
|
|
64
71
|
return;
|
|
@@ -67,44 +74,36 @@ var PeekCarousel = forwardRef(function (props, ref) {
|
|
|
67
74
|
goToIndex(index);
|
|
68
75
|
}, [children, goToIndex]);
|
|
69
76
|
useImperativeHandle(ref, function () { return ({ goToIndex: goToIndex, goToItemById: goToItemById }); }, [goToIndex, goToItemById]);
|
|
70
|
-
var onNavigateClick = useCallback(function (direction) {
|
|
71
|
-
var nextIndex = direction === SLIDER_DIRECTION.NEXT ? activeIndex + 1 : activeIndex - 1;
|
|
72
|
-
goToIndex(nextIndex);
|
|
73
|
-
}, [activeIndex, goToIndex]);
|
|
74
77
|
var handleSwiped = useCallback(function (e, direction) {
|
|
75
|
-
if (rafRef.current)
|
|
76
|
-
cancelAnimationFrame(rafRef.current);
|
|
77
|
-
setIsDragging(false);
|
|
78
|
-
setDragOffset(0);
|
|
79
|
-
if (sliderRef.current)
|
|
80
|
-
sliderRef.current.style.transition = '';
|
|
81
78
|
if (Math.abs(e.deltaX) > thresholdDelta || e.velocity > thresholdVelocity) {
|
|
82
|
-
|
|
79
|
+
var nextIndex = direction === SLIDER_DIRECTION.NEXT ? activeIndex + 1 : activeIndex - 1;
|
|
80
|
+
goToIndex(nextIndex);
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
if (sliderRef.current) {
|
|
84
|
+
sliderRef.current.style.transition = "transform ".concat(animationDelay, "ms cubic-bezier(0.25, 0.1, 0.25, 1)");
|
|
85
|
+
sliderRef.current.style.transform = "translateX(".concat(-activeIndex * stepSize, "px)");
|
|
86
|
+
}
|
|
87
|
+
updateCardScales(activeIndex, animationDelay);
|
|
83
88
|
}
|
|
84
|
-
}, [thresholdDelta, thresholdVelocity,
|
|
89
|
+
}, [thresholdDelta, thresholdVelocity, activeIndex, stepSize, animationDelay, goToIndex, updateCardScales]);
|
|
85
90
|
var handlers = useSwipeable({
|
|
86
91
|
onSwiping: function (e) {
|
|
87
|
-
setIsDragging(true);
|
|
88
92
|
var currentBaseX = -activeIndex * stepSize;
|
|
89
93
|
var maxLeft = -(totalCount - 1) * stepSize;
|
|
90
94
|
var maxRight = 0;
|
|
91
95
|
var proposedX = currentBaseX + e.deltaX;
|
|
92
|
-
var
|
|
96
|
+
var clampedX = Math.max(maxLeft, Math.min(maxRight, proposedX));
|
|
93
97
|
if (sliderRef.current) {
|
|
94
|
-
sliderRef.current.style.transform = "translateX(".concat(
|
|
98
|
+
sliderRef.current.style.transform = "translateX(".concat(clampedX, "px)");
|
|
95
99
|
sliderRef.current.style.transition = 'none';
|
|
96
100
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
rafRef.current = requestAnimationFrame(function () {
|
|
100
|
-
setDragOffset(clampedOffset);
|
|
101
|
-
rafRef.current = null;
|
|
102
|
-
});
|
|
101
|
+
var effectiveIndex = -clampedX / stepSize;
|
|
102
|
+
updateCardScales(effectiveIndex, 0);
|
|
103
103
|
},
|
|
104
104
|
onSwipedLeft: function (e) { return handleSwiped(e, SLIDER_DIRECTION.NEXT); },
|
|
105
105
|
onSwipedRight: function (e) { return handleSwiped(e, SLIDER_DIRECTION.PREV); },
|
|
106
106
|
onTouchStartOrOnMouseDown: function () {
|
|
107
|
-
setIsDragging(true);
|
|
108
107
|
if (sliderRef.current)
|
|
109
108
|
sliderRef.current.style.transition = 'none';
|
|
110
109
|
},
|
|
@@ -113,26 +112,34 @@ var PeekCarousel = forwardRef(function (props, ref) {
|
|
|
113
112
|
preventScrollOnSwipe: true,
|
|
114
113
|
});
|
|
115
114
|
var baseX = -activeIndex * stepSize;
|
|
116
|
-
var
|
|
117
|
-
var
|
|
118
|
-
|
|
119
|
-
|
|
115
|
+
var finalTransform = "translateX(".concat(baseX, "px)");
|
|
116
|
+
var defaultPlaceholder = useMemo(function () { return (jsx(Container, { className: 'w-100p h-100p br-16', css: {
|
|
117
|
+
backgroundColor: '#f5f5f5',
|
|
118
|
+
border: '1px solid rgba(0, 0, 0, 0.08)',
|
|
119
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
|
|
120
|
+
} })); }, []);
|
|
121
|
+
return (jsx(Container, __assign({ className: "flex flex-middle flex-center o-hidden w-100p ".concat((rootContainerProps === null || rootContainerProps === void 0 ? void 0 : rootContainerProps.className) || ''), css: __assign({}, rootContainerProps === null || rootContainerProps === void 0 ? void 0 : rootContainerProps.css) }, { children: jsx(Container, __assign({}, handlers, { className: "w-100p ".concat((relativeBaseContainerProps === null || relativeBaseContainerProps === void 0 ? void 0 : relativeBaseContainerProps.className) || ''), css: __assign({ height: height }, relativeBaseContainerProps === null || relativeBaseContainerProps === void 0 ? void 0 : relativeBaseContainerProps.css) }, { children: jsx(Container, __assign({ ref: sliderRef, className: "flex h-100p ".concat((sliderRootContainerProps === null || sliderRootContainerProps === void 0 ? void 0 : sliderRootContainerProps.className) || ''), css: sliderRootContainerProps === null || sliderRootContainerProps === void 0 ? void 0 : sliderRootContainerProps.css, style: {
|
|
120
122
|
paddingLeft: centerPadding,
|
|
121
123
|
paddingRight: centerPadding,
|
|
122
124
|
transform: finalTransform,
|
|
123
|
-
transition:
|
|
125
|
+
transition: "transform ".concat(animationDelay, "ms cubic-bezier(0.4, 0, 0.2, 1)"),
|
|
126
|
+
willChange: 'transform',
|
|
127
|
+
backfaceVisibility: 'hidden',
|
|
124
128
|
} }, { children: Array.from({ length: totalCount }, function (_, index) {
|
|
125
|
-
var transform = getStyles(index, effectiveIndex).transform;
|
|
126
129
|
var isVisible = !virtualized || (visibleRange && index >= visibleRange.start && index <= visibleRange.end);
|
|
130
|
+
var isActive = index === activeIndex;
|
|
127
131
|
if (!isVisible) {
|
|
128
|
-
return (jsx(Container, { style: {
|
|
132
|
+
return (jsx(Container, __assign({ className: 'flex-no-shrink h-100p flex-middle flex-center', style: {
|
|
129
133
|
width: cardWidth,
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
} },
|
|
134
|
+
marginRight: index === totalCount - 1 ? 0 : layoutMargin,
|
|
135
|
+
transform: "scale(".concat(MIN_SCALE, ")"),
|
|
136
|
+
pointerEvents: 'none',
|
|
137
|
+
} }, { children: placeholder !== null && placeholder !== void 0 ? placeholder : defaultPlaceholder })));
|
|
134
138
|
}
|
|
135
|
-
return (jsx(Container, __assign({ className: "flex-no-shrink h-100p flex-middle flex-center ".concat((sliderCardRootContainerProps === null || sliderCardRootContainerProps === void 0 ? void 0 : sliderCardRootContainerProps.className) || ''), css: __assign({ width: cardWidth,
|
|
139
|
+
return (jsx(Container, __assign({ ref: setCardRef(index), className: "flex-no-shrink h-100p flex-middle flex-center ".concat((sliderCardRootContainerProps === null || sliderCardRootContainerProps === void 0 ? void 0 : sliderCardRootContainerProps.className) || ''), css: __assign({ width: cardWidth, marginRight: index === totalCount - 1 ? 0 : layoutMargin }, sliderCardRootContainerProps === null || sliderCardRootContainerProps === void 0 ? void 0 : sliderCardRootContainerProps.css), style: {
|
|
140
|
+
transform: "scale(".concat(isActive ? MAX_SCALE : MIN_SCALE, ")"),
|
|
141
|
+
pointerEvents: isActive ? 'auto' : 'none',
|
|
142
|
+
} }, { children: jsx(Container, __assign({ className: "slider-single-content w-100p h-100p flex-middle flex-center o-hidden br-16 ".concat((sliderCardContainerProps === null || sliderCardContainerProps === void 0 ? void 0 : sliderCardContainerProps.className) || ''), css: sliderCardContainerProps === null || sliderCardContainerProps === void 0 ? void 0 : sliderCardContainerProps.css }, { children: children === null || children === void 0 ? void 0 : children[index] })) }), "slider-".concat(index)));
|
|
136
143
|
}) })) })) })));
|
|
137
144
|
});
|
|
138
145
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-peek-carousel.esm.js","sources":["../packages/components/PeekCarousel/src/constants.ts","../packages/components/PeekCarousel/src/
|
|
1
|
+
{"version":3,"file":"ct-design-peek-carousel.esm.js","sources":["../packages/components/PeekCarousel/src/constants.ts","../packages/components/PeekCarousel/src/PeekCarousel.tsx"],"sourcesContent":[null,null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('react-swipeable'), require('@cleartrip/ct-design-
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'react-swipeable', '@cleartrip/ct-design-
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemPeekCarousel = {}, global.jsxRuntime, global.React, global.reactSwipeable, global.
|
|
5
|
-
})(this, (function (exports, jsxRuntime, React, reactSwipeable,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('react-swipeable'), require('@cleartrip/ct-design-container')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'react-swipeable', '@cleartrip/ct-design-container'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemPeekCarousel = {}, global.jsxRuntime, global.React, global.reactSwipeable, global.ctDesignContainer));
|
|
5
|
+
})(this, (function (exports, jsxRuntime, React, reactSwipeable, ctDesignContainer) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
8
|
|
|
9
9
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
10
|
-
var useIsomorphicEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicEffect);
|
|
11
10
|
|
|
12
11
|
/******************************************************************************
|
|
13
12
|
Copyright (c) Microsoft Corporation.
|
|
@@ -47,38 +46,42 @@
|
|
|
47
46
|
})(SLIDER_DIRECTION || (SLIDER_DIRECTION = {}));
|
|
48
47
|
var SWIPE_THRESHOLD_VELOCITY = 0.2;
|
|
49
48
|
var SWIPE_THRESHOLD_DELTA = 50;
|
|
50
|
-
|
|
51
|
-
var
|
|
52
|
-
var distance = index - effectiveIndex;
|
|
53
|
-
var absDistance = Math.abs(distance);
|
|
54
|
-
var scale;
|
|
55
|
-
if (absDistance < 1) {
|
|
56
|
-
scale = 1.0 - absDistance * 0.15;
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
scale = 0.85;
|
|
60
|
-
}
|
|
61
|
-
return {
|
|
62
|
-
transform: "scale(".concat(scale, ")"),
|
|
63
|
-
};
|
|
64
|
-
};
|
|
49
|
+
var MIN_SCALE = 0.7;
|
|
50
|
+
var MAX_SCALE = 1.0;
|
|
65
51
|
|
|
66
52
|
var PeekCarousel = React.forwardRef(function (props, ref) {
|
|
67
53
|
var _a;
|
|
68
|
-
var children = props.children, onSlide = props.onSlide, _b = props.startIndex, startIndex = _b === void 0 ? 0 : _b, height = props.height, _c = props.animationDelay, animationDelay = _c === void 0 ?
|
|
54
|
+
var children = props.children, onSlide = props.onSlide, _b = props.startIndex, startIndex = _b === void 0 ? 0 : _b, height = props.height, _c = props.animationDelay, animationDelay = _c === void 0 ? 250 : _c, cardWidth = props.cardWidth, _d = props.slideMargin, slideMargin = _d === void 0 ? 0 : _d, _e = props.thresholdVelocity, thresholdVelocity = _e === void 0 ? SWIPE_THRESHOLD_VELOCITY : _e, _f = props.thresholdDelta, thresholdDelta = _f === void 0 ? SWIPE_THRESHOLD_DELTA : _f, styleConfig = props.styleConfig, _g = props.virtualized, virtualized = _g === void 0 ? false : _g, _h = props.overscan, overscan = _h === void 0 ? 2 : _h, placeholder = props.placeholder;
|
|
69
55
|
var _j = styleConfig || {}, relativeBaseContainerProps = _j.relativeBaseContainerProps, rootContainerProps = _j.rootContainerProps, sliderCardContainerProps = _j.sliderCardContainerProps, sliderRootContainerProps = _j.sliderRootContainerProps, sliderCardRootContainerProps = _j.sliderCardRootContainerProps;
|
|
70
56
|
var totalCount = (_a = children === null || children === void 0 ? void 0 : children.length) !== null && _a !== void 0 ? _a : 0;
|
|
71
|
-
var _k = React.useState(
|
|
72
|
-
var _l = React.useState(0), dragOffset = _l[0], setDragOffset = _l[1];
|
|
73
|
-
var _m = React.useState(false), isDragging = _m[0], setIsDragging = _m[1];
|
|
57
|
+
var _k = React.useState(startIndex), activeIndex = _k[0], setActiveIndex = _k[1];
|
|
74
58
|
var sliderRef = React.useRef(null);
|
|
75
|
-
var
|
|
76
|
-
|
|
77
|
-
if (
|
|
78
|
-
|
|
79
|
-
|
|
59
|
+
var cardsRef = React.useRef(new Map());
|
|
60
|
+
var updateCardScales = React.useCallback(function (effectiveIndex, duration) {
|
|
61
|
+
if (duration === void 0) { duration = 0; }
|
|
62
|
+
var baseIndex = Math.round(effectiveIndex);
|
|
63
|
+
var start = Math.max(0, baseIndex - overscan);
|
|
64
|
+
var end = Math.min(totalCount - 1, baseIndex + overscan);
|
|
65
|
+
for (var i = start; i <= end; i++) {
|
|
66
|
+
var card = cardsRef.current.get(i);
|
|
67
|
+
if (!card)
|
|
68
|
+
continue;
|
|
69
|
+
var distance = Math.abs(i - effectiveIndex);
|
|
70
|
+
var scale = distance < 1 ? MAX_SCALE - distance * (MAX_SCALE - MIN_SCALE) : MIN_SCALE;
|
|
71
|
+
card.style.transform = "scale(".concat(scale, ")");
|
|
72
|
+
card.style.transition = duration > 0 ? "transform ".concat(duration, "ms cubic-bezier(0.25, 0.1, 0.25, 1)") : 'none';
|
|
73
|
+
}
|
|
74
|
+
}, [totalCount, overscan]);
|
|
75
|
+
var setCardRef = React.useCallback(function (index) { return function (el) {
|
|
76
|
+
if (el)
|
|
77
|
+
cardsRef.current.set(index, el);
|
|
78
|
+
else
|
|
79
|
+
cardsRef.current.delete(index);
|
|
80
|
+
}; }, []);
|
|
80
81
|
var cardWidthPx = parseFloat(cardWidth) || 0;
|
|
81
|
-
var
|
|
82
|
+
var scaleGap = (cardWidthPx * (1 - MIN_SCALE)) / 2;
|
|
83
|
+
var layoutMargin = slideMargin - scaleGap;
|
|
84
|
+
var stepSize = cardWidthPx + layoutMargin;
|
|
82
85
|
var centerPadding = "calc(50% - ".concat(cardWidthPx / 2, "px)");
|
|
83
86
|
var visibleRange = React.useMemo(function () {
|
|
84
87
|
if (!virtualized)
|
|
@@ -90,10 +93,14 @@
|
|
|
90
93
|
}, [virtualized, activeIndex, overscan, totalCount]);
|
|
91
94
|
var goToIndex = React.useCallback(function (index) {
|
|
92
95
|
var clampedIndex = Math.max(0, Math.min(index, totalCount - 1));
|
|
93
|
-
if (
|
|
94
|
-
|
|
96
|
+
if (sliderRef.current) {
|
|
97
|
+
sliderRef.current.style.transform = "translateX(".concat(-clampedIndex * stepSize, "px)");
|
|
98
|
+
sliderRef.current.style.transition = "transform ".concat(animationDelay, "ms cubic-bezier(0.25, 0.1, 0.25, 1)");
|
|
99
|
+
}
|
|
100
|
+
updateCardScales(clampedIndex, animationDelay);
|
|
101
|
+
setTimeout(function () { return setActiveIndex(clampedIndex); }, animationDelay);
|
|
95
102
|
onSlide === null || onSlide === void 0 ? void 0 : onSlide(clampedIndex);
|
|
96
|
-
}, [totalCount,
|
|
103
|
+
}, [totalCount, stepSize, animationDelay, updateCardScales, onSlide]);
|
|
97
104
|
var goToItemById = React.useCallback(function (id) {
|
|
98
105
|
if (!children)
|
|
99
106
|
return;
|
|
@@ -102,44 +109,36 @@
|
|
|
102
109
|
goToIndex(index);
|
|
103
110
|
}, [children, goToIndex]);
|
|
104
111
|
React.useImperativeHandle(ref, function () { return ({ goToIndex: goToIndex, goToItemById: goToItemById }); }, [goToIndex, goToItemById]);
|
|
105
|
-
var onNavigateClick = React.useCallback(function (direction) {
|
|
106
|
-
var nextIndex = direction === SLIDER_DIRECTION.NEXT ? activeIndex + 1 : activeIndex - 1;
|
|
107
|
-
goToIndex(nextIndex);
|
|
108
|
-
}, [activeIndex, goToIndex]);
|
|
109
112
|
var handleSwiped = React.useCallback(function (e, direction) {
|
|
110
|
-
if (rafRef.current)
|
|
111
|
-
cancelAnimationFrame(rafRef.current);
|
|
112
|
-
setIsDragging(false);
|
|
113
|
-
setDragOffset(0);
|
|
114
|
-
if (sliderRef.current)
|
|
115
|
-
sliderRef.current.style.transition = '';
|
|
116
113
|
if (Math.abs(e.deltaX) > thresholdDelta || e.velocity > thresholdVelocity) {
|
|
117
|
-
|
|
114
|
+
var nextIndex = direction === SLIDER_DIRECTION.NEXT ? activeIndex + 1 : activeIndex - 1;
|
|
115
|
+
goToIndex(nextIndex);
|
|
116
|
+
}
|
|
117
|
+
else {
|
|
118
|
+
if (sliderRef.current) {
|
|
119
|
+
sliderRef.current.style.transition = "transform ".concat(animationDelay, "ms cubic-bezier(0.25, 0.1, 0.25, 1)");
|
|
120
|
+
sliderRef.current.style.transform = "translateX(".concat(-activeIndex * stepSize, "px)");
|
|
121
|
+
}
|
|
122
|
+
updateCardScales(activeIndex, animationDelay);
|
|
118
123
|
}
|
|
119
|
-
}, [thresholdDelta, thresholdVelocity,
|
|
124
|
+
}, [thresholdDelta, thresholdVelocity, activeIndex, stepSize, animationDelay, goToIndex, updateCardScales]);
|
|
120
125
|
var handlers = reactSwipeable.useSwipeable({
|
|
121
126
|
onSwiping: function (e) {
|
|
122
|
-
setIsDragging(true);
|
|
123
127
|
var currentBaseX = -activeIndex * stepSize;
|
|
124
128
|
var maxLeft = -(totalCount - 1) * stepSize;
|
|
125
129
|
var maxRight = 0;
|
|
126
130
|
var proposedX = currentBaseX + e.deltaX;
|
|
127
|
-
var
|
|
131
|
+
var clampedX = Math.max(maxLeft, Math.min(maxRight, proposedX));
|
|
128
132
|
if (sliderRef.current) {
|
|
129
|
-
sliderRef.current.style.transform = "translateX(".concat(
|
|
133
|
+
sliderRef.current.style.transform = "translateX(".concat(clampedX, "px)");
|
|
130
134
|
sliderRef.current.style.transition = 'none';
|
|
131
135
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
rafRef.current = requestAnimationFrame(function () {
|
|
135
|
-
setDragOffset(clampedOffset);
|
|
136
|
-
rafRef.current = null;
|
|
137
|
-
});
|
|
136
|
+
var effectiveIndex = -clampedX / stepSize;
|
|
137
|
+
updateCardScales(effectiveIndex, 0);
|
|
138
138
|
},
|
|
139
139
|
onSwipedLeft: function (e) { return handleSwiped(e, SLIDER_DIRECTION.NEXT); },
|
|
140
140
|
onSwipedRight: function (e) { return handleSwiped(e, SLIDER_DIRECTION.PREV); },
|
|
141
141
|
onTouchStartOrOnMouseDown: function () {
|
|
142
|
-
setIsDragging(true);
|
|
143
142
|
if (sliderRef.current)
|
|
144
143
|
sliderRef.current.style.transition = 'none';
|
|
145
144
|
},
|
|
@@ -148,26 +147,34 @@
|
|
|
148
147
|
preventScrollOnSwipe: true,
|
|
149
148
|
});
|
|
150
149
|
var baseX = -activeIndex * stepSize;
|
|
151
|
-
var
|
|
152
|
-
var
|
|
153
|
-
|
|
154
|
-
|
|
150
|
+
var finalTransform = "translateX(".concat(baseX, "px)");
|
|
151
|
+
var defaultPlaceholder = React.useMemo(function () { return (jsxRuntime.jsx(ctDesignContainer.Container, { className: 'w-100p h-100p br-16', css: {
|
|
152
|
+
backgroundColor: '#f5f5f5',
|
|
153
|
+
border: '1px solid rgba(0, 0, 0, 0.08)',
|
|
154
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
|
|
155
|
+
} })); }, []);
|
|
156
|
+
return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: "flex flex-middle flex-center o-hidden w-100p ".concat((rootContainerProps === null || rootContainerProps === void 0 ? void 0 : rootContainerProps.className) || ''), css: __assign({}, rootContainerProps === null || rootContainerProps === void 0 ? void 0 : rootContainerProps.css) }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({}, handlers, { className: "w-100p ".concat((relativeBaseContainerProps === null || relativeBaseContainerProps === void 0 ? void 0 : relativeBaseContainerProps.className) || ''), css: __assign({ height: height }, relativeBaseContainerProps === null || relativeBaseContainerProps === void 0 ? void 0 : relativeBaseContainerProps.css) }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ ref: sliderRef, className: "flex h-100p ".concat((sliderRootContainerProps === null || sliderRootContainerProps === void 0 ? void 0 : sliderRootContainerProps.className) || ''), css: sliderRootContainerProps === null || sliderRootContainerProps === void 0 ? void 0 : sliderRootContainerProps.css, style: {
|
|
155
157
|
paddingLeft: centerPadding,
|
|
156
158
|
paddingRight: centerPadding,
|
|
157
159
|
transform: finalTransform,
|
|
158
|
-
transition:
|
|
160
|
+
transition: "transform ".concat(animationDelay, "ms cubic-bezier(0.4, 0, 0.2, 1)"),
|
|
161
|
+
willChange: 'transform',
|
|
162
|
+
backfaceVisibility: 'hidden',
|
|
159
163
|
} }, { children: Array.from({ length: totalCount }, function (_, index) {
|
|
160
|
-
var transform = getStyles(index, effectiveIndex).transform;
|
|
161
164
|
var isVisible = !virtualized || (visibleRange && index >= visibleRange.start && index <= visibleRange.end);
|
|
165
|
+
var isActive = index === activeIndex;
|
|
162
166
|
if (!isVisible) {
|
|
163
|
-
return (jsxRuntime.jsx(ctDesignContainer.Container, { style: {
|
|
167
|
+
return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex-no-shrink h-100p flex-middle flex-center', style: {
|
|
164
168
|
width: cardWidth,
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
} },
|
|
169
|
+
marginRight: index === totalCount - 1 ? 0 : layoutMargin,
|
|
170
|
+
transform: "scale(".concat(MIN_SCALE, ")"),
|
|
171
|
+
pointerEvents: 'none',
|
|
172
|
+
} }, { children: placeholder !== null && placeholder !== void 0 ? placeholder : defaultPlaceholder })));
|
|
169
173
|
}
|
|
170
|
-
return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: "flex-no-shrink h-100p flex-middle flex-center ".concat((sliderCardRootContainerProps === null || sliderCardRootContainerProps === void 0 ? void 0 : sliderCardRootContainerProps.className) || ''), css: __assign({ width: cardWidth,
|
|
174
|
+
return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ ref: setCardRef(index), className: "flex-no-shrink h-100p flex-middle flex-center ".concat((sliderCardRootContainerProps === null || sliderCardRootContainerProps === void 0 ? void 0 : sliderCardRootContainerProps.className) || ''), css: __assign({ width: cardWidth, marginRight: index === totalCount - 1 ? 0 : layoutMargin }, sliderCardRootContainerProps === null || sliderCardRootContainerProps === void 0 ? void 0 : sliderCardRootContainerProps.css), style: {
|
|
175
|
+
transform: "scale(".concat(isActive ? MAX_SCALE : MIN_SCALE, ")"),
|
|
176
|
+
pointerEvents: isActive ? 'auto' : 'none',
|
|
177
|
+
} }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: "slider-single-content w-100p h-100p flex-middle flex-center o-hidden br-16 ".concat((sliderCardContainerProps === null || sliderCardContainerProps === void 0 ? void 0 : sliderCardContainerProps.className) || ''), css: sliderCardContainerProps === null || sliderCardContainerProps === void 0 ? void 0 : sliderCardContainerProps.css }, { children: children === null || children === void 0 ? void 0 : children[index] })) }), "slider-".concat(index)));
|
|
171
178
|
}) })) })) })));
|
|
172
179
|
});
|
|
173
180
|
|