@fountain-ui/lab 2.0.0-beta.10 → 2.0.0-beta.13
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/build/commonjs/Carousel/Carousel.js +142 -0
- package/build/commonjs/Carousel/Carousel.js.map +1 -0
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/animation/animationUtils.js +9 -0
- package/build/commonjs/Carousel/animation/animationUtils.js.map +1 -0
- package/build/commonjs/Carousel/animation/createDefaultItemStyle.js +15 -0
- package/build/commonjs/Carousel/animation/createDefaultItemStyle.js.map +1 -0
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js +20 -0
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js.map +1 -0
- package/build/commonjs/Carousel/animation/index.js +40 -0
- package/build/commonjs/Carousel/animation/index.js.map +1 -0
- package/build/commonjs/Carousel/animation/normalItemStyleFactory.js +27 -0
- package/build/commonjs/Carousel/animation/normalItemStyleFactory.js.map +1 -0
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js +65 -0
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js.map +1 -0
- package/build/commonjs/Carousel/components/InternalContext.js +29 -0
- package/build/commonjs/Carousel/components/InternalContext.js.map +1 -0
- package/build/commonjs/Carousel/components/ItemView.js +66 -0
- package/build/commonjs/Carousel/components/ItemView.js.map +1 -0
- package/build/commonjs/Carousel/components/RootView.js +86 -0
- package/build/commonjs/Carousel/components/RootView.js.map +1 -0
- package/build/commonjs/Carousel/components/ScrollViewGesture.js +81 -0
- package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -0
- package/build/commonjs/Carousel/components/index.js +40 -0
- package/build/commonjs/Carousel/components/index.js.map +1 -0
- package/build/commonjs/Carousel/hooks/index.js +64 -0
- package/build/commonjs/Carousel/hooks/index.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useAutoplayController.js +58 -0
- package/build/commonjs/Carousel/hooks/useAutoplayController.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js +23 -0
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useIndexController.js +70 -0
- package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useItemInterpolation.js +63 -0
- package/build/commonjs/Carousel/hooks/useItemInterpolation.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js +95 -0
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useLoopedData.js +33 -0
- package/build/commonjs/Carousel/hooks/useLoopedData.js.map +1 -0
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js +162 -0
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +1 -0
- package/build/commonjs/Carousel/index.js +16 -2
- package/build/commonjs/Carousel/index.js.map +1 -1
- package/build/commonjs/Carousel/types.js +7 -0
- package/build/commonjs/Carousel/types.js.map +1 -0
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +86 -21
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/PageStateContext.js +22 -0
- package/build/commonjs/ViewPager/PageStateContext.js.map +1 -0
- package/build/commonjs/ViewPager/ViewPagerNative.js +82 -34
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js +35 -26
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js +8 -0
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/index.native.js +8 -0
- package/build/commonjs/ViewPager/index.native.js.map +1 -1
- package/build/commonjs/ViewPager/utils.js +5 -41
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/ViewabilityTrackerView/Viewability.js +2 -0
- package/build/commonjs/ViewabilityTrackerView/Viewability.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerView.js +45 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerView.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerViewProps.js +2 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerViewProps.js.map +1 -0
- package/build/commonjs/{Carousel/index.native.js → ViewabilityTrackerView/index.js} +3 -3
- package/build/commonjs/ViewabilityTrackerView/index.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js +42 -0
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/useViewabilityTracker.js +88 -0
- package/build/commonjs/ViewabilityTrackerView/useViewabilityTracker.js.map +1 -0
- package/build/commonjs/hooks/index.js +16 -0
- package/build/commonjs/hooks/index.js.map +1 -1
- package/build/commonjs/hooks/useDeferredExecutor.js +45 -0
- package/build/commonjs/hooks/useDeferredExecutor.js.map +1 -0
- package/build/commonjs/hooks/useIsMounted.js +22 -0
- package/build/commonjs/hooks/useIsMounted.js.map +1 -0
- package/build/commonjs/index.js +22 -1
- package/build/commonjs/index.js.map +1 -1
- package/build/module/Carousel/Carousel.js +120 -0
- package/build/module/Carousel/Carousel.js.map +1 -0
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/animation/animationUtils.js +2 -0
- package/build/module/Carousel/animation/animationUtils.js.map +1 -0
- package/build/module/Carousel/animation/createDefaultItemStyle.js +3 -0
- package/build/module/Carousel/animation/createDefaultItemStyle.js.map +1 -0
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js +11 -0
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js.map +1 -0
- package/build/module/Carousel/animation/index.js +5 -0
- package/build/module/Carousel/animation/index.js.map +1 -0
- package/build/module/Carousel/animation/normalItemStyleFactory.js +18 -0
- package/build/module/Carousel/animation/normalItemStyleFactory.js.map +1 -0
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js +55 -0
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js.map +1 -0
- package/build/module/Carousel/components/InternalContext.js +19 -0
- package/build/module/Carousel/components/InternalContext.js.map +1 -0
- package/build/module/Carousel/components/ItemView.js +46 -0
- package/build/module/Carousel/components/ItemView.js.map +1 -0
- package/build/module/Carousel/components/RootView.js +65 -0
- package/build/module/Carousel/components/RootView.js.map +1 -0
- package/build/module/Carousel/components/ScrollViewGesture.js +67 -0
- package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -0
- package/build/module/Carousel/components/index.js +5 -0
- package/build/module/Carousel/components/index.js.map +1 -0
- package/build/module/Carousel/hooks/index.js +8 -0
- package/build/module/Carousel/hooks/index.js.map +1 -0
- package/build/module/Carousel/hooks/useAutoplayController.js +48 -0
- package/build/module/Carousel/hooks/useAutoplayController.js.map +1 -0
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js +14 -0
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js.map +1 -0
- package/build/module/Carousel/hooks/useIndexController.js +54 -0
- package/build/module/Carousel/hooks/useIndexController.js.map +1 -0
- package/build/module/Carousel/hooks/useItemInterpolation.js +51 -0
- package/build/module/Carousel/hooks/useItemInterpolation.js.map +1 -0
- package/build/module/Carousel/hooks/useItemVisibilityStore.js +87 -0
- package/build/module/Carousel/hooks/useItemVisibilityStore.js.map +1 -0
- package/build/module/Carousel/hooks/useLoopedData.js +24 -0
- package/build/module/Carousel/hooks/useLoopedData.js.map +1 -0
- package/build/module/Carousel/hooks/usePagingAnimation.js +153 -0
- package/build/module/Carousel/hooks/usePagingAnimation.js.map +1 -0
- package/build/module/Carousel/index.js +2 -1
- package/build/module/Carousel/index.js.map +1 -1
- package/build/module/Carousel/types.js +3 -0
- package/build/module/Carousel/types.js.map +1 -0
- package/build/module/ViewPager/ChildrenMemoizedPage.js +80 -23
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/PageStateContext.js +10 -0
- package/build/module/ViewPager/PageStateContext.js.map +1 -0
- package/build/module/ViewPager/ViewPagerNative.js +81 -34
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js +29 -24
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js +1 -0
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/index.native.js +1 -0
- package/build/module/ViewPager/index.native.js.map +1 -1
- package/build/module/ViewPager/utils.js +2 -32
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/ViewabilityTrackerView/Viewability.js +2 -0
- package/build/module/ViewabilityTrackerView/Viewability.js.map +1 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerView.js +28 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerView.js.map +1 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerViewProps.js +2 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerViewProps.js.map +1 -0
- package/build/module/ViewabilityTrackerView/index.js +2 -0
- package/build/module/ViewabilityTrackerView/index.js.map +1 -0
- package/build/module/ViewabilityTrackerView/measureViewability.js +34 -0
- package/build/module/ViewabilityTrackerView/measureViewability.js.map +1 -0
- package/build/module/ViewabilityTrackerView/useViewabilityTracker.js +73 -0
- package/build/module/ViewabilityTrackerView/useViewabilityTracker.js.map +1 -0
- package/build/module/hooks/index.js +2 -0
- package/build/module/hooks/index.js.map +1 -1
- package/build/module/hooks/useDeferredExecutor.js +33 -0
- package/build/module/hooks/useDeferredExecutor.js.map +1 -0
- package/build/module/hooks/useIsMounted.js +13 -0
- package/build/module/hooks/useIsMounted.js.map +1 -0
- package/build/module/index.js +2 -0
- package/build/module/index.js.map +1 -1
- package/build/typescript/Carousel/Carousel.d.ts +5 -0
- package/build/typescript/Carousel/CarouselProps.d.ts +33 -48
- package/build/typescript/Carousel/animation/animationUtils.d.ts +1 -0
- package/build/typescript/Carousel/animation/createDefaultItemStyle.d.ts +2 -0
- package/build/typescript/Carousel/animation/createDefaultScrollAnimation.d.ts +2 -0
- package/build/typescript/Carousel/animation/index.d.ts +4 -0
- package/build/typescript/Carousel/animation/normalItemStyleFactory.d.ts +2 -0
- package/build/typescript/Carousel/animation/parallaxItemStyleFactory.d.ts +9 -0
- package/build/typescript/Carousel/components/InternalContext.d.ts +14 -0
- package/build/typescript/Carousel/components/ItemView.d.ts +9 -0
- package/build/typescript/Carousel/components/RootView.d.ts +16 -0
- package/build/typescript/Carousel/components/ScrollViewGesture.d.ts +12 -0
- package/build/typescript/Carousel/components/index.d.ts +4 -0
- package/build/typescript/Carousel/hooks/index.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useAutoplayController.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useDimensionChangeReaction.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useIndexController.d.ts +10 -0
- package/build/typescript/Carousel/hooks/useItemInterpolation.d.ts +2 -0
- package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useLoopedData.d.ts +1 -0
- package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts +18 -0
- package/build/typescript/Carousel/index.d.ts +3 -1
- package/build/typescript/Carousel/types.d.ts +79 -0
- package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts +2 -1
- package/build/typescript/ViewPager/PageStateContext.d.ts +7 -0
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +4 -1
- package/build/typescript/ViewPager/ViewPagerProps.d.ts +31 -19
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +4 -1
- package/build/typescript/ViewPager/index.d.ts +2 -1
- package/build/typescript/ViewPager/index.native.d.ts +1 -0
- package/build/typescript/ViewPager/utils.d.ts +3 -19
- package/build/typescript/ViewabilityTrackerView/Viewability.d.ts +3 -0
- package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerView.d.ts +2 -0
- package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerViewProps.d.ts +22 -0
- package/build/typescript/ViewabilityTrackerView/index.d.ts +2 -0
- package/build/typescript/ViewabilityTrackerView/measureViewability.d.ts +11 -0
- package/build/typescript/ViewabilityTrackerView/useViewabilityTracker.d.ts +11 -0
- package/build/typescript/hooks/index.d.ts +2 -0
- package/build/typescript/hooks/useDeferredExecutor.d.ts +11 -0
- package/build/typescript/hooks/useIsMounted.d.ts +4 -0
- package/build/typescript/index.d.ts +2 -0
- package/package.json +4 -19
- package/src/Carousel/Carousel.tsx +152 -0
- package/src/Carousel/CarouselProps.ts +35 -53
- package/src/Carousel/animation/animationUtils.ts +1 -0
- package/src/Carousel/animation/createDefaultItemStyle.ts +3 -0
- package/src/Carousel/animation/createDefaultScrollAnimation.ts +13 -0
- package/src/Carousel/animation/index.ts +4 -0
- package/src/Carousel/animation/normalItemStyleFactory.ts +19 -0
- package/src/Carousel/animation/parallaxItemStyleFactory.ts +79 -0
- package/src/Carousel/components/InternalContext.ts +33 -0
- package/src/Carousel/components/ItemView.tsx +66 -0
- package/src/Carousel/components/RootView.tsx +79 -0
- package/src/Carousel/components/ScrollViewGesture.tsx +87 -0
- package/src/Carousel/components/index.ts +4 -0
- package/src/Carousel/hooks/index.ts +7 -0
- package/src/Carousel/hooks/useAutoplayController.ts +57 -0
- package/src/Carousel/hooks/useDimensionChangeReaction.ts +25 -0
- package/src/Carousel/hooks/useIndexController.tsx +76 -0
- package/src/Carousel/hooks/useItemInterpolation.ts +107 -0
- package/src/Carousel/hooks/useItemVisibilityStore.ts +107 -0
- package/src/Carousel/hooks/useLoopedData.ts +26 -0
- package/src/Carousel/hooks/usePagingAnimation.ts +195 -0
- package/src/Carousel/index.ts +4 -2
- package/src/Carousel/types.ts +97 -0
- package/src/ViewPager/ChildrenMemoizedPage.tsx +97 -23
- package/src/ViewPager/PageStateContext.ts +15 -0
- package/src/ViewPager/ViewPagerNative.tsx +101 -39
- package/src/ViewPager/ViewPagerProps.ts +33 -19
- package/src/ViewPager/ViewPagerWeb.tsx +38 -29
- package/src/ViewPager/index.native.ts +1 -0
- package/src/ViewPager/index.ts +2 -1
- package/src/ViewPager/utils.tsx +4 -56
- package/src/ViewabilityTrackerView/Viewability.ts +3 -0
- package/src/ViewabilityTrackerView/ViewabilityTrackerView.tsx +33 -0
- package/src/ViewabilityTrackerView/ViewabilityTrackerViewProps.ts +25 -0
- package/src/ViewabilityTrackerView/index.ts +2 -0
- package/src/ViewabilityTrackerView/measureViewability.ts +56 -0
- package/src/ViewabilityTrackerView/useViewabilityTracker.ts +85 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useDeferredExecutor.ts +46 -0
- package/src/hooks/useIsMounted.ts +19 -0
- package/src/index.ts +3 -0
- package/build/commonjs/Carousel/CarouselNative.js +0 -72
- package/build/commonjs/Carousel/CarouselNative.js.map +0 -1
- package/build/commonjs/Carousel/CarouselWeb.js +0 -237
- package/build/commonjs/Carousel/CarouselWeb.js.map +0 -1
- package/build/commonjs/Carousel/index.native.js.map +0 -1
- package/build/commonjs/Carousel/utils.js +0 -19
- package/build/commonjs/Carousel/utils.js.map +0 -1
- package/build/module/Carousel/CarouselNative.js +0 -54
- package/build/module/Carousel/CarouselNative.js.map +0 -1
- package/build/module/Carousel/CarouselWeb.js +0 -215
- package/build/module/Carousel/CarouselWeb.js.map +0 -1
- package/build/module/Carousel/index.native.js +0 -2
- package/build/module/Carousel/index.native.js.map +0 -1
- package/build/module/Carousel/utils.js +0 -7
- package/build/module/Carousel/utils.js.map +0 -1
- package/build/typescript/Carousel/CarouselNative.d.ts +0 -2
- package/build/typescript/Carousel/CarouselWeb.d.ts +0 -4
- package/build/typescript/Carousel/index.native.d.ts +0 -1
- package/build/typescript/Carousel/utils.d.ts +0 -6
- package/src/Carousel/CarouselNative.tsx +0 -67
- package/src/Carousel/CarouselWeb.tsx +0 -222
- package/src/Carousel/index.native.ts +0 -1
- package/src/Carousel/utils.ts +0 -11
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = ScrollViewGesture;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _reactNativeGestureHandler = require("react-native-gesture-handler");
|
|
13
|
+
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
|
|
18
|
+
const SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;
|
|
19
|
+
const SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;
|
|
20
|
+
const ACTIVE_OFFSET_ABS_X = 5;
|
|
21
|
+
const activeOffsetX = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
|
|
22
|
+
const endAnimationStates = [_reactNativeGestureHandler.State.CANCELLED, _reactNativeGestureHandler.State.END];
|
|
23
|
+
|
|
24
|
+
function shouldScrollToAdjacent(translationX, velocityX) {
|
|
25
|
+
const isSameDirection = translationX * velocityX > 0;
|
|
26
|
+
const isEnoughMovement = Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD || Math.abs(velocityX) >= SCROLL_TO_ADJACENT_VX_THRESHOLD;
|
|
27
|
+
return isSameDirection && isEnoughMovement;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function ScrollViewGesture(props) {
|
|
31
|
+
const {
|
|
32
|
+
autoplayController,
|
|
33
|
+
children,
|
|
34
|
+
finalizeAnimation,
|
|
35
|
+
offsetTx,
|
|
36
|
+
scrollEnabled,
|
|
37
|
+
startPagingAnimation
|
|
38
|
+
} = props;
|
|
39
|
+
const {
|
|
40
|
+
pause: pauseAutoplay,
|
|
41
|
+
resume: resumeAutoplay
|
|
42
|
+
} = autoplayController;
|
|
43
|
+
const handleGestureBegin = (0, _react.useCallback)(() => {
|
|
44
|
+
pauseAutoplay();
|
|
45
|
+
finalizeAnimation();
|
|
46
|
+
}, [finalizeAnimation, pauseAutoplay]);
|
|
47
|
+
const handleGestureEvent = (0, _react.useCallback)(_reactNative.Animated.event([{
|
|
48
|
+
nativeEvent: {
|
|
49
|
+
translationX: offsetTx
|
|
50
|
+
}
|
|
51
|
+
}], {
|
|
52
|
+
useNativeDriver: true
|
|
53
|
+
}), []);
|
|
54
|
+
const handleHandlerStateChange = (0, _react.useCallback)(event => {
|
|
55
|
+
const {
|
|
56
|
+
nativeEvent: {
|
|
57
|
+
translationX,
|
|
58
|
+
velocityX,
|
|
59
|
+
state
|
|
60
|
+
}
|
|
61
|
+
} = event;
|
|
62
|
+
|
|
63
|
+
if (endAnimationStates.includes(state)) {
|
|
64
|
+
const direction = shouldScrollToAdjacent(translationX, velocityX) ? translationX < 0 ? 'next' : 'prev' : 'stay';
|
|
65
|
+
startPagingAnimation('directional', {
|
|
66
|
+
direction: direction,
|
|
67
|
+
isOriginatedFromGesture: true
|
|
68
|
+
});
|
|
69
|
+
resumeAutoplay();
|
|
70
|
+
}
|
|
71
|
+
}, [startPagingAnimation, resumeAutoplay]);
|
|
72
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
|
|
73
|
+
activeOffsetX: activeOffsetX,
|
|
74
|
+
children: children,
|
|
75
|
+
enabled: scrollEnabled,
|
|
76
|
+
onBegan: handleGestureBegin,
|
|
77
|
+
onGestureEvent: handleGestureEvent,
|
|
78
|
+
onHandlerStateChange: handleHandlerStateChange
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=ScrollViewGesture.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","GestureHandlerState","CANCELLED","END","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","finalizeAnimation","offsetTx","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","handleGestureBegin","useCallback","handleGestureEvent","Animated","event","nativeEvent","useNativeDriver","handleHandlerStateChange","state","includes","direction","isOriginatedFromGesture"],"sources":["ScrollViewGesture.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useCallback } from 'react';\nimport { Animated } from 'react-native';\nimport type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';\nimport { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';\nimport type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';\n\nexport interface ScrollViewGestureProps {\n autoplayController: AutoplayController;\n children: ReactNode;\n finalizeAnimation: () => void;\n offsetTx: Animated.Value,\n scrollEnabled: boolean;\n startPagingAnimation: StartPagingAnimation;\n}\n\nconst SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;\nconst SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;\n\nconst ACTIVE_OFFSET_ABS_X = 5;\nconst activeOffsetX: number[] = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];\n\nconst endAnimationStates: Readonly<GestureHandlerState[]> = [\n GestureHandlerState.CANCELLED,\n GestureHandlerState.END,\n];\n\nfunction shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {\n const isSameDirection = translationX * velocityX > 0;\n const isEnoughMovement =\n Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD\n || Math.abs(velocityX) >= SCROLL_TO_ADJACENT_VX_THRESHOLD;\n\n return isSameDirection && isEnoughMovement;\n}\n\nexport default function ScrollViewGesture(props: ScrollViewGestureProps) {\n const {\n autoplayController,\n children,\n finalizeAnimation,\n offsetTx,\n scrollEnabled,\n startPagingAnimation,\n } = props;\n\n const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;\n\n const handleGestureBegin = useCallback(() => {\n pauseAutoplay();\n\n finalizeAnimation();\n }, [finalizeAnimation, pauseAutoplay]);\n\n const handleGestureEvent = useCallback(Animated.event(\n [{ nativeEvent: { translationX: offsetTx } }],\n { useNativeDriver: true },\n ), []);\n\n const handleHandlerStateChange = useCallback((event: PanGestureHandlerStateChangeEvent) => {\n const { nativeEvent: { translationX, velocityX, state } } = event;\n\n if (endAnimationStates.includes(state)) {\n const direction: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)\n ? (translationX < 0 ? 'next' : 'prev')\n : 'stay';\n\n startPagingAnimation(\n 'directional',\n { direction: direction, isOriginatedFromGesture: true },\n );\n\n resumeAutoplay();\n }\n }, [startPagingAnimation, resumeAutoplay]);\n\n return (\n <PanGestureHandler\n activeOffsetX={activeOffsetX}\n children={children}\n enabled={scrollEnabled}\n onBegan={handleGestureBegin}\n onGestureEvent={handleGestureEvent}\n onHandlerStateChange={handleHandlerStateChange}\n />\n );\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;;;;;AAYA,MAAMA,+BAA+B,GAAG,EAAxC;AACA,MAAMC,+BAA+B,GAAG,IAAxC;AAEA,MAAMC,mBAAmB,GAAG,CAA5B;AACA,MAAMC,aAAuB,GAAG,CAAC,CAACD,mBAAF,EAAuBA,mBAAvB,CAAhC;AAEA,MAAME,kBAAmD,GAAG,CACxDC,gCAAA,CAAoBC,SADoC,EAExDD,gCAAA,CAAoBE,GAFoC,CAA5D;;AAKA,SAASC,sBAAT,CAAgCC,YAAhC,EAAsDC,SAAtD,EAAkF;EAC9E,MAAMC,eAAe,GAAGF,YAAY,GAAGC,SAAf,GAA2B,CAAnD;EACA,MAAME,gBAAgB,GAClBC,IAAI,CAACC,GAAL,CAASL,YAAT,KAA0BT,+BAA1B,IACGa,IAAI,CAACC,GAAL,CAASJ,SAAT,KAAuBT,+BAF9B;EAIA,OAAOU,eAAe,IAAIC,gBAA1B;AACH;;AAEc,SAASG,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IACFC,kBADE;IAEFC,QAFE;IAGFC,iBAHE;IAIFC,QAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM;IAAEO,KAAK,EAAEC,aAAT;IAAwBC,MAAM,EAAEC;EAAhC,IAAmDT,kBAAzD;EAEA,MAAMU,kBAAkB,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACzCJ,aAAa;IAEbL,iBAAiB;EACpB,CAJ0B,EAIxB,CAACA,iBAAD,EAAoBK,aAApB,CAJwB,CAA3B;EAMA,MAAMK,kBAAkB,GAAG,IAAAD,kBAAA,EAAYE,qBAAA,CAASC,KAAT,CACnC,CAAC;IAAEC,WAAW,EAAE;MAAEvB,YAAY,EAAEW;IAAhB;EAAf,CAAD,CADmC,EAEnC;IAAEa,eAAe,EAAE;EAAnB,CAFmC,CAAZ,EAGxB,EAHwB,CAA3B;EAKA,MAAMC,wBAAwB,GAAG,IAAAN,kBAAA,EAAaG,KAAD,IAA8C;IACvF,MAAM;MAAEC,WAAW,EAAE;QAAEvB,YAAF;QAAgBC,SAAhB;QAA2ByB;MAA3B;IAAf,IAAsDJ,KAA5D;;IAEA,IAAI3B,kBAAkB,CAACgC,QAAnB,CAA4BD,KAA5B,CAAJ,EAAwC;MACpC,MAAME,SAA0B,GAAG7B,sBAAsB,CAACC,YAAD,EAAeC,SAAf,CAAtB,GAC5BD,YAAY,GAAG,CAAf,GAAmB,MAAnB,GAA4B,MADA,GAE7B,MAFN;MAIAa,oBAAoB,CAChB,aADgB,EAEhB;QAAEe,SAAS,EAAEA,SAAb;QAAwBC,uBAAuB,EAAE;MAAjD,CAFgB,CAApB;MAKAZ,cAAc;IACjB;EACJ,CAfgC,EAe9B,CAACJ,oBAAD,EAAuBI,cAAvB,CAf8B,CAAjC;EAiBA,oBACI,6BAAC,4CAAD;IACI,aAAa,EAAEvB,aADnB;IAEI,QAAQ,EAAEe,QAFd;IAGI,OAAO,EAAEG,aAHb;IAII,OAAO,EAAEM,kBAJb;IAKI,cAAc,EAAEE,kBALpB;IAMI,oBAAoB,EAAEK;EAN1B,EADJ;AAUH"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "InternalContext", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _InternalContext.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "ItemView", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _ItemView.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "RootView", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _RootView.default;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "ScrollViewGesture", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _ScrollViewGesture.default;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
var _InternalContext = _interopRequireDefault(require("./InternalContext"));
|
|
32
|
+
|
|
33
|
+
var _ItemView = _interopRequireDefault(require("./ItemView"));
|
|
34
|
+
|
|
35
|
+
var _RootView = _interopRequireDefault(require("./RootView"));
|
|
36
|
+
|
|
37
|
+
var _ScrollViewGesture = _interopRequireDefault(require("./ScrollViewGesture"));
|
|
38
|
+
|
|
39
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
40
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as InternalContext } from './InternalContext';\nexport { default as ItemView } from './ItemView';\nexport { default as RootView } from './RootView';\nexport { default as ScrollViewGesture } from './ScrollViewGesture';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "useAutoplayController", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _useAutoplayController.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "useDimensionChangeReaction", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _useDimensionChangeReaction.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "useIndexController", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _useIndexController.default;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "useItemInterpolation", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _useItemInterpolation.default;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "useItemVisibilityStore", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _useItemVisibilityStore.default;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "useLoopedData", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _useLoopedData.default;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "usePagingAnimation", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return _usePagingAnimation.default;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
var _useAutoplayController = _interopRequireDefault(require("./useAutoplayController"));
|
|
50
|
+
|
|
51
|
+
var _useDimensionChangeReaction = _interopRequireDefault(require("./useDimensionChangeReaction"));
|
|
52
|
+
|
|
53
|
+
var _useIndexController = _interopRequireDefault(require("./useIndexController"));
|
|
54
|
+
|
|
55
|
+
var _useItemInterpolation = _interopRequireDefault(require("./useItemInterpolation"));
|
|
56
|
+
|
|
57
|
+
var _useLoopedData = _interopRequireDefault(require("./useLoopedData"));
|
|
58
|
+
|
|
59
|
+
var _usePagingAnimation = _interopRequireDefault(require("./usePagingAnimation"));
|
|
60
|
+
|
|
61
|
+
var _useItemVisibilityStore = _interopRequireDefault(require("./useItemVisibilityStore"));
|
|
62
|
+
|
|
63
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useAutoplayController } from './useAutoplayController';\nexport { default as useDimensionChangeReaction } from './useDimensionChangeReaction';\nexport { default as useIndexController } from './useIndexController';\nexport { default as useItemInterpolation } from './useItemInterpolation';\nexport { default as useLoopedData } from './useLoopedData';\nexport { default as usePagingAnimation } from './usePagingAnimation';\nexport { default as useItemVisibilityStore } from './useItemVisibilityStore';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useAutoplayController;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _hooks = require("../../hooks");
|
|
11
|
+
|
|
12
|
+
function useAutoplayController(config) {
|
|
13
|
+
const {
|
|
14
|
+
enabled,
|
|
15
|
+
intervalMillis,
|
|
16
|
+
startPagingAnimation
|
|
17
|
+
} = config;
|
|
18
|
+
const paused = (0, _react.useRef)(false);
|
|
19
|
+
const executor = (0, _hooks.useDeferredExecutor)();
|
|
20
|
+
const play = (0, _react.useCallback)(() => {
|
|
21
|
+
if (paused.current) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
executor.execute(() => {
|
|
26
|
+
startPagingAnimation('directional', {
|
|
27
|
+
direction: 'next',
|
|
28
|
+
isOriginatedFromGesture: false
|
|
29
|
+
});
|
|
30
|
+
play();
|
|
31
|
+
}, intervalMillis);
|
|
32
|
+
}, [intervalMillis, startPagingAnimation]);
|
|
33
|
+
const pause = (0, _react.useCallback)(() => {
|
|
34
|
+
executor.cancel();
|
|
35
|
+
paused.current = true;
|
|
36
|
+
}, []);
|
|
37
|
+
const resume = (0, _react.useCallback)(() => {
|
|
38
|
+
paused.current = false;
|
|
39
|
+
|
|
40
|
+
if (enabled) {
|
|
41
|
+
play();
|
|
42
|
+
}
|
|
43
|
+
}, [play, enabled]);
|
|
44
|
+
(0, _react.useEffect)(() => {
|
|
45
|
+
if (enabled) {
|
|
46
|
+
resume();
|
|
47
|
+
} else {
|
|
48
|
+
pause();
|
|
49
|
+
}
|
|
50
|
+
}, [enabled]);
|
|
51
|
+
return {
|
|
52
|
+
pause,
|
|
53
|
+
resume
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
;
|
|
58
|
+
//# sourceMappingURL=useAutoplayController.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useAutoplayController","config","enabled","intervalMillis","startPagingAnimation","paused","useRef","executor","useDeferredExecutor","play","useCallback","current","execute","direction","isOriginatedFromGesture","pause","cancel","resume","useEffect"],"sources":["useAutoplayController.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { AutoplayController, StartPagingAnimation } from '../types';\nimport { useDeferredExecutor } from '../../hooks';\n\nexport interface AutoplayConfig {\n enabled: boolean;\n intervalMillis: number;\n startPagingAnimation: StartPagingAnimation;\n}\n\nexport default function useAutoplayController(config: AutoplayConfig): AutoplayController {\n const {\n enabled,\n intervalMillis,\n startPagingAnimation,\n } = config;\n\n const paused = useRef<boolean>(false);\n\n const executor = useDeferredExecutor();\n\n const play = useCallback(() => {\n if (paused.current) {\n return;\n }\n\n executor.execute(() => {\n startPagingAnimation(\n 'directional',\n { direction: 'next', isOriginatedFromGesture: false },\n );\n play();\n }, intervalMillis);\n }, [intervalMillis, startPagingAnimation]);\n\n const pause = useCallback(() => {\n executor.cancel();\n paused.current = true;\n }, []);\n\n const resume = useCallback(() => {\n paused.current = false;\n if (enabled) {\n play();\n }\n }, [play, enabled]);\n\n useEffect(() => {\n if (enabled) {\n resume();\n } else {\n pause();\n }\n }, [enabled]);\n\n return { pause, resume };\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAQe,SAASA,qBAAT,CAA+BC,MAA/B,EAA2E;EACtF,MAAM;IACFC,OADE;IAEFC,cAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,MAAMI,MAAM,GAAG,IAAAC,aAAA,EAAgB,KAAhB,CAAf;EAEA,MAAMC,QAAQ,GAAG,IAAAC,0BAAA,GAAjB;EAEA,MAAMC,IAAI,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC3B,IAAIL,MAAM,CAACM,OAAX,EAAoB;MAChB;IACH;;IAEDJ,QAAQ,CAACK,OAAT,CAAiB,MAAM;MACnBR,oBAAoB,CAChB,aADgB,EAEhB;QAAES,SAAS,EAAE,MAAb;QAAqBC,uBAAuB,EAAE;MAA9C,CAFgB,CAApB;MAIAL,IAAI;IACP,CAND,EAMGN,cANH;EAOH,CAZY,EAYV,CAACA,cAAD,EAAiBC,oBAAjB,CAZU,CAAb;EAcA,MAAMW,KAAK,GAAG,IAAAL,kBAAA,EAAY,MAAM;IAC5BH,QAAQ,CAACS,MAAT;IACAX,MAAM,CAACM,OAAP,GAAiB,IAAjB;EACH,CAHa,EAGX,EAHW,CAAd;EAKA,MAAMM,MAAM,GAAG,IAAAP,kBAAA,EAAY,MAAM;IAC7BL,MAAM,CAACM,OAAP,GAAiB,KAAjB;;IACA,IAAIT,OAAJ,EAAa;MACTO,IAAI;IACP;EACJ,CALc,EAKZ,CAACA,IAAD,EAAOP,OAAP,CALY,CAAf;EAOA,IAAAgB,gBAAA,EAAU,MAAM;IACZ,IAAIhB,OAAJ,EAAa;MACTe,MAAM;IACT,CAFD,MAEO;MACHF,KAAK;IACR;EACJ,CAND,EAMG,CAACb,OAAD,CANH;EAQA,OAAO;IAAEa,KAAF;IAASE;EAAT,CAAP;AACH;;AAAA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useDimensionChangeReaction;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
function useDimensionChangeReaction(params) {
|
|
11
|
+
const {
|
|
12
|
+
controlledTx,
|
|
13
|
+
currentIndex,
|
|
14
|
+
itemWidth
|
|
15
|
+
} = params;
|
|
16
|
+
(0, _react.useEffect)(() => {
|
|
17
|
+
const newTx = -currentIndex * itemWidth;
|
|
18
|
+
controlledTx.setValue(newTx);
|
|
19
|
+
}, [controlledTx, currentIndex, itemWidth]);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
;
|
|
23
|
+
//# sourceMappingURL=useDimensionChangeReaction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useDimensionChangeReaction","params","controlledTx","currentIndex","itemWidth","useEffect","newTx","setValue"],"sources":["useDimensionChangeReaction.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Animated } from 'react-native';\n\nexport interface Parameters {\n controlledTx: Animated.AnimatedValue;\n currentIndex: number;\n itemWidth: number;\n}\n\nexport default function useDimensionChangeReaction(params: Parameters) {\n const {\n controlledTx,\n currentIndex,\n itemWidth,\n } = params;\n\n useEffect(() => {\n const newTx = -currentIndex * itemWidth;\n controlledTx.setValue(newTx);\n }, [\n controlledTx,\n currentIndex,\n itemWidth,\n ]);\n};\n"],"mappings":";;;;;;;AAAA;;AASe,SAASA,0BAAT,CAAoCC,MAApC,EAAwD;EACnE,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,IAAAI,gBAAA,EAAU,MAAM;IACZ,MAAMC,KAAK,GAAG,CAACH,YAAD,GAAgBC,SAA9B;IACAF,YAAY,CAACK,QAAb,CAAsBD,KAAtB;EACH,CAHD,EAGG,CACCJ,YADD,EAECC,YAFD,EAGCC,SAHD,CAHH;AAQH;;AAAA"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useIndexController;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
+
|
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
|
|
16
|
+
const normalizeIndex = (maybeIndex, numberOfData) => Math.abs(Math.floor(maybeIndex)) % numberOfData;
|
|
17
|
+
|
|
18
|
+
function useIndexController(params) {
|
|
19
|
+
const {
|
|
20
|
+
controlledTx,
|
|
21
|
+
initialIndex,
|
|
22
|
+
itemWidth,
|
|
23
|
+
numberOfOriginalData,
|
|
24
|
+
onIndexChange
|
|
25
|
+
} = params;
|
|
26
|
+
const indexRef = (0, _react.useRef)(initialIndex);
|
|
27
|
+
const [index, setIndex] = (0, _react.useState)(indexRef.current);
|
|
28
|
+
const maybeIndex = (0, _react.useMemo)(() => {
|
|
29
|
+
const negative = new _reactNative.Animated.Value(-1);
|
|
30
|
+
|
|
31
|
+
const reversedTx = _reactNative.Animated.multiply(controlledTx, negative);
|
|
32
|
+
|
|
33
|
+
const normalized = _reactNative.Animated.divide(reversedTx, itemWidth);
|
|
34
|
+
|
|
35
|
+
return _reactNative.Animated.modulo(normalized, numberOfOriginalData);
|
|
36
|
+
}, [controlledTx, itemWidth, numberOfOriginalData]);
|
|
37
|
+
(0, _react.useEffect)(() => {
|
|
38
|
+
const subscriptionId = maybeIndex.addListener(observedValue => {
|
|
39
|
+
const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);
|
|
40
|
+
|
|
41
|
+
if (indexRef.current !== newIndex) {
|
|
42
|
+
indexRef.current = newIndex;
|
|
43
|
+
setIndex(newIndex);
|
|
44
|
+
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(newIndex);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
return () => {
|
|
48
|
+
maybeIndex.removeListener(subscriptionId);
|
|
49
|
+
};
|
|
50
|
+
}, [maybeIndex, numberOfOriginalData, onIndexChange]);
|
|
51
|
+
const getCurrentIndex = (0, _react.useCallback)(() => indexRef.current, []);
|
|
52
|
+
return {
|
|
53
|
+
currentIndex: index,
|
|
54
|
+
getCurrentIndex,
|
|
55
|
+
lastIndex: numberOfOriginalData - 1,
|
|
56
|
+
monitorElement: /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
57
|
+
collapsable: false,
|
|
58
|
+
style: [{
|
|
59
|
+
zIndex: maybeIndex
|
|
60
|
+
}, {
|
|
61
|
+
width: 1,
|
|
62
|
+
height: 1,
|
|
63
|
+
position: 'absolute'
|
|
64
|
+
}]
|
|
65
|
+
})
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
;
|
|
70
|
+
//# sourceMappingURL=useIndexController.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["normalizeIndex","maybeIndex","numberOfData","Math","abs","floor","useIndexController","params","controlledTx","initialIndex","itemWidth","numberOfOriginalData","onIndexChange","indexRef","useRef","index","setIndex","useState","current","useMemo","negative","Animated","Value","reversedTx","multiply","normalized","divide","modulo","useEffect","subscriptionId","addListener","observedValue","newIndex","value","removeListener","getCurrentIndex","useCallback","currentIndex","lastIndex","monitorElement","zIndex","width","height","position"],"sources":["useIndexController.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated } from 'react-native';\nimport type { IndexController } from '../types';\n\nexport interface UseIndexControllerParameters {\n controlledTx: Animated.AnimatedValue;\n initialIndex: number;\n itemWidth: number;\n numberOfOriginalData: number;\n onIndexChange?: (newIndex: number) => void;\n}\n\nconst normalizeIndex = (maybeIndex: number, numberOfData: number): number =>\n Math.abs(Math.floor(maybeIndex)) % numberOfData;\n\nexport default function useIndexController(params: UseIndexControllerParameters): IndexController {\n const {\n controlledTx,\n initialIndex,\n itemWidth,\n numberOfOriginalData,\n onIndexChange,\n } = params;\n\n const indexRef = useRef<number>(initialIndex);\n const [index, setIndex] = useState<number>(indexRef.current);\n\n const maybeIndex = useMemo(() => {\n const negative = new Animated.Value(-1);\n const reversedTx = Animated.multiply(controlledTx, negative);\n const normalized = Animated.divide(reversedTx, itemWidth);\n return Animated.modulo(normalized, numberOfOriginalData);\n }, [\n controlledTx,\n itemWidth,\n numberOfOriginalData,\n ]);\n\n useEffect(() => {\n const subscriptionId = maybeIndex.addListener((observedValue) => {\n const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);\n\n if (indexRef.current !== newIndex) {\n indexRef.current = newIndex;\n setIndex(newIndex);\n\n onIndexChange?.(newIndex);\n }\n });\n\n return () => {\n maybeIndex.removeListener(subscriptionId);\n };\n }, [\n maybeIndex,\n numberOfOriginalData,\n onIndexChange,\n ]);\n\n const getCurrentIndex = useCallback(() => indexRef.current, []);\n\n return {\n currentIndex: index,\n getCurrentIndex,\n lastIndex: numberOfOriginalData - 1,\n monitorElement: (\n <Animated.View\n collapsable={false}\n style={[\n { zIndex: maybeIndex },\n { width: 1, height: 1, position: 'absolute' },\n ]}\n />\n ),\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAWA,MAAMA,cAAc,GAAG,CAACC,UAAD,EAAqBC,YAArB,KACnBC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,KAAL,CAAWJ,UAAX,CAAT,IAAmCC,YADvC;;AAGe,SAASI,kBAAT,CAA4BC,MAA5B,EAAmF;EAC9F,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC,SAHE;IAIFC,oBAJE;IAKFC;EALE,IAMFL,MANJ;EAQA,MAAMM,QAAQ,GAAG,IAAAC,aAAA,EAAeL,YAAf,CAAjB;EACA,MAAM,CAACM,KAAD,EAAQC,QAAR,IAAoB,IAAAC,eAAA,EAAiBJ,QAAQ,CAACK,OAA1B,CAA1B;EAEA,MAAMjB,UAAU,GAAG,IAAAkB,cAAA,EAAQ,MAAM;IAC7B,MAAMC,QAAQ,GAAG,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAC,CAApB,CAAjB;;IACA,MAAMC,UAAU,GAAGF,qBAAA,CAASG,QAAT,CAAkBhB,YAAlB,EAAgCY,QAAhC,CAAnB;;IACA,MAAMK,UAAU,GAAGJ,qBAAA,CAASK,MAAT,CAAgBH,UAAhB,EAA4Bb,SAA5B,CAAnB;;IACA,OAAOW,qBAAA,CAASM,MAAT,CAAgBF,UAAhB,EAA4Bd,oBAA5B,CAAP;EACH,CALkB,EAKhB,CACCH,YADD,EAECE,SAFD,EAGCC,oBAHD,CALgB,CAAnB;EAWA,IAAAiB,gBAAA,EAAU,MAAM;IACZ,MAAMC,cAAc,GAAG5B,UAAU,CAAC6B,WAAX,CAAwBC,aAAD,IAAmB;MAC7D,MAAMC,QAAQ,GAAGhC,cAAc,CAAC+B,aAAa,CAACE,KAAf,EAAsBtB,oBAAtB,CAA/B;;MAEA,IAAIE,QAAQ,CAACK,OAAT,KAAqBc,QAAzB,EAAmC;QAC/BnB,QAAQ,CAACK,OAAT,GAAmBc,QAAnB;QACAhB,QAAQ,CAACgB,QAAD,CAAR;QAEApB,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGoB,QAAH,CAAb;MACH;IACJ,CATsB,CAAvB;IAWA,OAAO,MAAM;MACT/B,UAAU,CAACiC,cAAX,CAA0BL,cAA1B;IACH,CAFD;EAGH,CAfD,EAeG,CACC5B,UADD,EAECU,oBAFD,EAGCC,aAHD,CAfH;EAqBA,MAAMuB,eAAe,GAAG,IAAAC,kBAAA,EAAY,MAAMvB,QAAQ,CAACK,OAA3B,EAAoC,EAApC,CAAxB;EAEA,OAAO;IACHmB,YAAY,EAAEtB,KADX;IAEHoB,eAFG;IAGHG,SAAS,EAAE3B,oBAAoB,GAAG,CAH/B;IAIH4B,cAAc,eACV,6BAAC,qBAAD,CAAU,IAAV;MACI,WAAW,EAAE,KADjB;MAEI,KAAK,EAAE,CACH;QAAEC,MAAM,EAAEvC;MAAV,CADG,EAEH;QAAEwC,KAAK,EAAE,CAAT;QAAYC,MAAM,EAAE,CAApB;QAAuBC,QAAQ,EAAE;MAAjC,CAFG;IAFX;EALD,CAAP;AAcH;;AAAA"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useItemInterpolation;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _components = require("../components");
|
|
13
|
+
|
|
14
|
+
const OVERSCROLL_FRICTION_FACTOR = 4;
|
|
15
|
+
|
|
16
|
+
function useItemInterpolation(index) {
|
|
17
|
+
const {
|
|
18
|
+
itemWidth,
|
|
19
|
+
data,
|
|
20
|
+
globalInterpolation,
|
|
21
|
+
loop
|
|
22
|
+
} = (0, _react.useContext)(_components.InternalContext);
|
|
23
|
+
const numberOfData = data.length;
|
|
24
|
+
const interpolationConfigOnLoop = (0, _react.useMemo)(() => {
|
|
25
|
+
const lastIndex = numberOfData - 1;
|
|
26
|
+
const maxWidth = Math.abs(itemWidth * numberOfData);
|
|
27
|
+
const halfOfItemWidth = 0.5 * itemWidth;
|
|
28
|
+
const positiveCount = Math.round(lastIndex / 2);
|
|
29
|
+
const startPosition = index > positiveCount ? (index - numberOfData) * itemWidth : itemWidth * index;
|
|
30
|
+
const max = positiveCount * itemWidth;
|
|
31
|
+
const min = -((lastIndex - positiveCount) * itemWidth);
|
|
32
|
+
const inputRange = [-maxWidth, min - halfOfItemWidth - startPosition - Number.MIN_VALUE, min - halfOfItemWidth - startPosition, 0, max + halfOfItemWidth - startPosition, max + halfOfItemWidth - startPosition + Number.MIN_VALUE, maxWidth];
|
|
33
|
+
const outputRange = [startPosition, max + halfOfItemWidth - Number.MIN_VALUE, min - halfOfItemWidth, startPosition, max + halfOfItemWidth, min - halfOfItemWidth + Number.MIN_VALUE, startPosition];
|
|
34
|
+
return {
|
|
35
|
+
inputRange,
|
|
36
|
+
outputRange,
|
|
37
|
+
extrapolate: 'clamp'
|
|
38
|
+
};
|
|
39
|
+
}, [index, itemWidth, numberOfData]);
|
|
40
|
+
const interpolationConfigOnNoLoop = (0, _react.useMemo)(() => {
|
|
41
|
+
const lastIndex = numberOfData - 1;
|
|
42
|
+
const maxWidth = itemWidth * lastIndex;
|
|
43
|
+
const startPosition = itemWidth * index;
|
|
44
|
+
const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;
|
|
45
|
+
const inputRange = [-(maxWidth + itemWidth), // overscroll
|
|
46
|
+
-maxWidth, 0, itemWidth // overscroll
|
|
47
|
+
];
|
|
48
|
+
const outputRange = [-maxWidth + startPosition - friction, -maxWidth + startPosition, startPosition, startPosition + friction];
|
|
49
|
+
return {
|
|
50
|
+
inputRange,
|
|
51
|
+
outputRange,
|
|
52
|
+
extrapolate: 'clamp'
|
|
53
|
+
};
|
|
54
|
+
}, [index, itemWidth, numberOfData]);
|
|
55
|
+
return (0, _react.useMemo)(() => {
|
|
56
|
+
const interpolationConfig = loop ? interpolationConfigOnLoop : interpolationConfigOnNoLoop;
|
|
57
|
+
const offsetX = globalInterpolation.interpolate(interpolationConfig);
|
|
58
|
+
return _reactNative.Animated.divide(offsetX, itemWidth);
|
|
59
|
+
}, [globalInterpolation, interpolationConfigOnLoop, interpolationConfigOnNoLoop, itemWidth, loop]);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
;
|
|
63
|
+
//# sourceMappingURL=useItemInterpolation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","useContext","InternalContext","numberOfData","length","interpolationConfigOnLoop","useMemo","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","offsetX","interpolate","Animated","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport { InternalContext } from '../components';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const offsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(offsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useItemVisibilityStore;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
11
|
+
|
|
12
|
+
class SimpleItemVisibilityStore {
|
|
13
|
+
constructor(initialValue) {
|
|
14
|
+
_defineProperty(this, "store", void 0);
|
|
15
|
+
|
|
16
|
+
_defineProperty(this, "listeners", []);
|
|
17
|
+
|
|
18
|
+
this.store = initialValue;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
subscribe(listener) {
|
|
22
|
+
this.listeners.push(listener);
|
|
23
|
+
listener(this.store);
|
|
24
|
+
return () => {
|
|
25
|
+
const index = this.listeners.indexOf(listener);
|
|
26
|
+
this.listeners.splice(index, 1);
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
dispatch(ranges) {
|
|
31
|
+
this.store = ranges;
|
|
32
|
+
|
|
33
|
+
for (const id in this.listeners) {
|
|
34
|
+
const listener = this.listeners[id];
|
|
35
|
+
listener === null || listener === void 0 ? void 0 : listener(ranges);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
removeAllListeners() {
|
|
40
|
+
this.listeners.splice(0, this.listeners.length);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function normalize(windowSize, numberOfData) {
|
|
46
|
+
if (windowSize <= 0) {
|
|
47
|
+
return numberOfData;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (windowSize > 0 && windowSize % 2 === 0) {
|
|
51
|
+
return windowSize + 1;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return windowSize;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function mod(value, modulo) {
|
|
58
|
+
return (value % modulo + modulo) % modulo;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
function makeVisibleIndexRanges(numberOfData, windowSize, index) {
|
|
62
|
+
const ws = normalize(windowSize, numberOfData);
|
|
63
|
+
const firstIndex = 0;
|
|
64
|
+
const lastIndex = numberOfData - 1;
|
|
65
|
+
const halfNumberOfAdjacent = Math.floor(ws / 2);
|
|
66
|
+
const leftSide = index - halfNumberOfAdjacent;
|
|
67
|
+
const rightSide = index + halfNumberOfAdjacent;
|
|
68
|
+
const leftRanges = leftSide >= 0 ? [[leftSide, index]] : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];
|
|
69
|
+
const rightRanges = rightSide < numberOfData ? [[index, rightSide]] : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]]; // @ts-ignore
|
|
70
|
+
|
|
71
|
+
return [...leftRanges, ...rightRanges];
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function useItemVisibilityStore(params) {
|
|
75
|
+
const {
|
|
76
|
+
currentIndex,
|
|
77
|
+
numberOfData,
|
|
78
|
+
windowSize
|
|
79
|
+
} = params;
|
|
80
|
+
const [initialRange] = (0, _react.useState)(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));
|
|
81
|
+
const store = (0, _react.useRef)(new SimpleItemVisibilityStore(initialRange)).current;
|
|
82
|
+
(0, _react.useEffect)(() => {
|
|
83
|
+
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);
|
|
84
|
+
store.dispatch(newRanges);
|
|
85
|
+
}, [currentIndex, numberOfData, windowSize]);
|
|
86
|
+
(0, _react.useEffect)(() => {
|
|
87
|
+
return () => {
|
|
88
|
+
store.removeAllListeners();
|
|
89
|
+
};
|
|
90
|
+
}, []);
|
|
91
|
+
return store;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
;
|
|
95
|
+
//# sourceMappingURL=useItemVisibilityStore.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SimpleItemVisibilityStore","constructor","initialValue","store","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","ranges","id","removeAllListeners","length","normalize","windowSize","numberOfData","mod","value","modulo","makeVisibleIndexRanges","ws","firstIndex","lastIndex","halfNumberOfAdjacent","Math","floor","leftSide","rightSide","leftRanges","rightRanges","useItemVisibilityStore","params","currentIndex","initialRange","useState","useRef","current","useEffect","newRanges"],"sources":["useItemVisibilityStore.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ItemVisibilityStore, VisibleIndexRanges } from '../types';\n\nexport interface Parameters {\n currentIndex: number;\n numberOfData: number;\n windowSize: number;\n}\n\nclass SimpleItemVisibilityStore implements ItemVisibilityStore {\n\n private store: VisibleIndexRanges;\n\n constructor(initialValue: VisibleIndexRanges) {\n this.store = initialValue;\n }\n\n private listeners: Array<(ranges: VisibleIndexRanges) => void> = [];\n\n subscribe(listener: (ranges: VisibleIndexRanges) => void) {\n this.listeners.push(listener);\n\n listener(this.store);\n\n return () => {\n const index = this.listeners.indexOf(listener);\n this.listeners.splice(index, 1);\n };\n }\n\n dispatch(ranges: VisibleIndexRanges): void {\n this.store = ranges;\n for (const id in this.listeners) {\n const listener = this.listeners[id];\n listener?.(ranges);\n }\n }\n\n removeAllListeners(): void {\n this.listeners.splice(0, this.listeners.length);\n }\n\n}\n\nfunction normalize(windowSize: number, numberOfData: number): number {\n if (windowSize <= 0) {\n return numberOfData;\n }\n if (windowSize > 0 && windowSize % 2 === 0) {\n return windowSize + 1;\n }\n return windowSize;\n}\n\nfunction mod(value: number, modulo: number): number {\n return ((value % modulo) + modulo) % modulo;\n}\n\nfunction makeVisibleIndexRanges(numberOfData: number, windowSize: number, index: number): VisibleIndexRanges {\n const ws = normalize(windowSize, numberOfData);\n\n const firstIndex = 0;\n const lastIndex = numberOfData - 1;\n const halfNumberOfAdjacent = Math.floor(ws / 2);\n\n const leftSide = index - halfNumberOfAdjacent;\n const rightSide = index + halfNumberOfAdjacent;\n\n const leftRanges = leftSide >= 0\n ? [[leftSide, index]]\n : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];\n\n const rightRanges = rightSide < numberOfData\n ? [[index, rightSide]]\n : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]];\n\n // @ts-ignore\n return [\n ...leftRanges,\n ...rightRanges,\n ];\n}\n\nexport default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore {\n const {\n currentIndex,\n numberOfData,\n windowSize,\n } = params;\n\n const [initialRange] = useState(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));\n const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;\n\n useEffect(() => {\n const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);\n\n store.dispatch(newRanges);\n }, [currentIndex, numberOfData, windowSize]);\n\n useEffect(() => {\n return () => {\n store.removeAllListeners();\n };\n }, []);\n\n return store;\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useLoopedData;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
function useLoopedData(originalData, loop) {
|
|
11
|
+
return (0, _react.useMemo)(() => {
|
|
12
|
+
if (!loop) {
|
|
13
|
+
return originalData;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const numberOfData = originalData.length;
|
|
17
|
+
|
|
18
|
+
if (numberOfData === 1) {
|
|
19
|
+
const [first] = originalData;
|
|
20
|
+
return [first, first, first];
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
if (numberOfData === 2) {
|
|
24
|
+
const [first, second] = originalData;
|
|
25
|
+
return [first, second, first, second];
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return originalData;
|
|
29
|
+
}, [originalData, loop]);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
;
|
|
33
|
+
//# sourceMappingURL=useLoopedData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useLoopedData","originalData","loop","useMemo","numberOfData","length","first","second"],"sources":["useLoopedData.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport default function useLoopedData<ItemT>(\n originalData: ReadonlyArray<ItemT>,\n loop: boolean,\n): ReadonlyArray<ItemT> {\n return useMemo(() => {\n if (!loop) {\n return originalData;\n }\n\n const numberOfData = originalData.length;\n\n if (numberOfData === 1) {\n const [first] = originalData;\n return [first, first, first];\n }\n\n if (numberOfData === 2) {\n const [first, second] = originalData;\n return [first, second, first, second];\n }\n\n return originalData;\n }, [originalData, loop]);\n};\n"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,aAAT,CACXC,YADW,EAEXC,IAFW,EAGS;EACpB,OAAO,IAAAC,cAAA,EAAQ,MAAM;IACjB,IAAI,CAACD,IAAL,EAAW;MACP,OAAOD,YAAP;IACH;;IAED,MAAMG,YAAY,GAAGH,YAAY,CAACI,MAAlC;;IAEA,IAAID,YAAY,KAAK,CAArB,EAAwB;MACpB,MAAM,CAACE,KAAD,IAAUL,YAAhB;MACA,OAAO,CAACK,KAAD,EAAQA,KAAR,EAAeA,KAAf,CAAP;IACH;;IAED,IAAIF,YAAY,KAAK,CAArB,EAAwB;MACpB,MAAM,CAACE,KAAD,EAAQC,MAAR,IAAkBN,YAAxB;MACA,OAAO,CAACK,KAAD,EAAQC,MAAR,EAAgBD,KAAhB,EAAuBC,MAAvB,CAAP;IACH;;IAED,OAAON,YAAP;EACH,CAlBM,EAkBJ,CAACA,YAAD,EAAeC,IAAf,CAlBI,CAAP;AAmBH;;AAAA"}
|