@fountain-ui/lab 2.0.0-beta.12 → 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 +12 -7
- package/build/commonjs/Carousel/Carousel.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js +13 -13
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
- package/build/commonjs/Carousel/components/InternalContext.js.map +1 -1
- package/build/commonjs/Carousel/components/ItemView.js +4 -2
- package/build/commonjs/Carousel/components/ItemView.js.map +1 -1
- package/build/commonjs/Carousel/components/RootView.js +21 -3
- package/build/commonjs/Carousel/components/RootView.js.map +1 -1
- package/build/commonjs/Carousel/components/ScrollViewGesture.js +12 -7
- package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useAutoplayController.js +4 -1
- package/build/commonjs/Carousel/hooks/useAutoplayController.js.map +1 -1
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js +57 -19
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/commonjs/Carousel/types.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerNative.js +45 -17
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js +7 -7
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/Carousel/Carousel.js +12 -7
- package/build/module/Carousel/Carousel.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js +13 -13
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
- package/build/module/Carousel/components/InternalContext.js.map +1 -1
- package/build/module/Carousel/components/ItemView.js +4 -2
- package/build/module/Carousel/components/ItemView.js.map +1 -1
- package/build/module/Carousel/components/RootView.js +22 -4
- package/build/module/Carousel/components/RootView.js.map +1 -1
- package/build/module/Carousel/components/ScrollViewGesture.js +12 -7
- package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/module/Carousel/hooks/useAutoplayController.js +4 -1
- package/build/module/Carousel/hooks/useAutoplayController.js.map +1 -1
- package/build/module/Carousel/hooks/usePagingAnimation.js +57 -19
- package/build/module/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/module/Carousel/types.js.map +1 -1
- package/build/module/ViewPager/ViewPagerNative.js +45 -17
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js +8 -8
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/typescript/Carousel/CarouselProps.d.ts +4 -3
- package/build/typescript/Carousel/animation/parallaxItemStyleFactory.d.ts +5 -5
- package/build/typescript/Carousel/components/InternalContext.d.ts +2 -2
- package/build/typescript/Carousel/components/ItemView.d.ts +2 -0
- package/build/typescript/Carousel/components/RootView.d.ts +4 -4
- package/build/typescript/Carousel/components/ScrollViewGesture.d.ts +1 -1
- package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts +3 -3
- package/build/typescript/Carousel/types.d.ts +25 -3
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +1 -1
- package/build/typescript/ViewPager/ViewPagerProps.d.ts +1 -1
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +1 -1
- package/package.json +2 -2
- package/src/Carousel/Carousel.tsx +7 -6
- package/src/Carousel/CarouselProps.ts +4 -3
- package/src/Carousel/animation/parallaxItemStyleFactory.ts +23 -23
- package/src/Carousel/components/InternalContext.ts +2 -2
- package/src/Carousel/components/ItemView.tsx +12 -2
- package/src/Carousel/components/RootView.tsx +19 -6
- package/src/Carousel/components/ScrollViewGesture.tsx +15 -8
- package/src/Carousel/hooks/useAutoplayController.ts +4 -1
- package/src/Carousel/hooks/usePagingAnimation.ts +70 -23
- package/src/Carousel/types.ts +33 -3
- package/src/ViewPager/ViewPagerNative.tsx +49 -16
- package/src/ViewPager/ViewPagerProps.ts +1 -1
- package/src/ViewPager/ViewPagerWeb.tsx +8 -8
|
@@ -65,7 +65,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
65
65
|
const {
|
|
66
66
|
finalizeAnimation,
|
|
67
67
|
globalInterpolation,
|
|
68
|
-
|
|
68
|
+
startPagingAnimation
|
|
69
69
|
} = (0, _hooks.usePagingAnimation)({
|
|
70
70
|
controlledTx,
|
|
71
71
|
createScrollAnimation,
|
|
@@ -79,7 +79,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
79
79
|
const autoplayController = (0, _hooks.useAutoplayController)({
|
|
80
80
|
enabled: autoplay,
|
|
81
81
|
intervalMillis: autoplayInterval,
|
|
82
|
-
startPagingAnimation
|
|
82
|
+
startPagingAnimation
|
|
83
83
|
});
|
|
84
84
|
(0, _hooks.useDimensionChangeReaction)({
|
|
85
85
|
controlledTx,
|
|
@@ -87,10 +87,15 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
87
87
|
itemWidth
|
|
88
88
|
});
|
|
89
89
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
getCurrentIndex,
|
|
91
|
+
next: () => startPagingAnimation('directional', {
|
|
92
|
+
direction: 'next'
|
|
93
|
+
}),
|
|
94
|
+
prev: () => startPagingAnimation('directional', {
|
|
95
|
+
direction: 'prev'
|
|
96
|
+
}),
|
|
97
|
+
scrollTo: option => startPagingAnimation('index', option)
|
|
98
|
+
}), [startPagingAnimation, getCurrentIndex]);
|
|
94
99
|
const contextValue = (0, _react.useMemo)(() => ({
|
|
95
100
|
createItemStyle,
|
|
96
101
|
data,
|
|
@@ -121,7 +126,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
121
126
|
finalizeAnimation: finalizeAnimation,
|
|
122
127
|
offsetTx: offsetTx,
|
|
123
128
|
scrollEnabled: scrollEnabled,
|
|
124
|
-
|
|
129
|
+
startPagingAnimation: startPagingAnimation
|
|
125
130
|
}, /*#__PURE__*/_react.default.createElement(_components.RootView, {
|
|
126
131
|
data: data,
|
|
127
132
|
itemHeight: itemHeight,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","useLoopedData","initialTx","controlledTx","useRef","Animated","Value","current","offsetTx","currentIndex","getCurrentIndex","lastIndex","monitorElement","useIndexController","numberOfOriginalData","length","itemVisibilityStore","useItemVisibilityStore","numberOfData","finalizeAnimation","globalInterpolation","
|
|
1
|
+
{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","useLoopedData","initialTx","controlledTx","useRef","Animated","Value","current","offsetTx","currentIndex","getCurrentIndex","lastIndex","monitorElement","useIndexController","numberOfOriginalData","length","itemVisibilityStore","useItemVisibilityStore","numberOfData","finalizeAnimation","globalInterpolation","startPagingAnimation","usePagingAnimation","autoplayController","useAutoplayController","enabled","intervalMillis","useDimensionChangeReaction","useImperativeHandle","next","direction","prev","scrollTo","option","contextValue","useMemo","Math","max","visible","resume","pause","memo"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n useAutoplayController,\n useDimensionChangeReaction,\n useIndexController,\n useItemVisibilityStore,\n useLoopedData,\n usePagingAnimation,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n const {\n autoplay = false,\n autoplayInterval = 3000,\n createItemStyle = createDefaultItemStyle,\n createScrollAnimation = createDefaultScrollAnimation,\n data: originalData,\n disableSmartAutoplay = false,\n initialIndex = 0,\n itemHeight,\n itemWidth,\n loop = false,\n onIndexChange,\n renderItem,\n scrollEnabled = true,\n style,\n windowSize = 5,\n } = props;\n\n const data = useLoopedData(originalData, loop);\n\n const initialTx = itemWidth * initialIndex;\n const controlledTx = useRef(new Animated.Value(initialTx)).current;\n const offsetTx = useRef(new Animated.Value(0)).current;\n\n const {\n currentIndex,\n getCurrentIndex,\n lastIndex,\n monitorElement,\n } = useIndexController({\n controlledTx,\n initialIndex,\n itemWidth,\n numberOfOriginalData: originalData.length,\n onIndexChange,\n });\n\n const itemVisibilityStore = useItemVisibilityStore({\n currentIndex,\n numberOfData: data.length,\n windowSize,\n });\n\n const {\n finalizeAnimation,\n globalInterpolation,\n startPagingAnimation,\n } = usePagingAnimation({\n controlledTx,\n createScrollAnimation,\n getCurrentIndex,\n itemWidth,\n lastIndex,\n loop,\n numberOfData: data.length,\n offsetTx,\n });\n\n const autoplayController = useAutoplayController({\n enabled: autoplay,\n intervalMillis: autoplayInterval,\n startPagingAnimation,\n });\n\n useDimensionChangeReaction({\n controlledTx,\n currentIndex,\n itemWidth,\n });\n\n useImperativeHandle(\n ref,\n () => ({\n getCurrentIndex,\n next: () => startPagingAnimation('directional', { direction: 'next' }),\n prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n scrollTo: (option) => startPagingAnimation('index', option),\n }),\n [startPagingAnimation, getCurrentIndex],\n );\n\n const contextValue = useMemo(() => ({\n createItemStyle,\n data,\n globalInterpolation,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n loop,\n }), [\n createItemStyle,\n data,\n globalInterpolation,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n loop,\n ]);\n\n return (\n <InternalContext.Provider value={contextValue}>\n {monitorElement}\n\n <ViewabilityTrackerView\n enabled={autoplay && !disableSmartAutoplay}\n measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n onViewabilityChange={({ visible }) => {\n if (visible) {\n autoplayController.resume();\n } else {\n autoplayController.pause();\n }\n }}\n >\n <ScrollViewGesture\n autoplayController={autoplayController}\n finalizeAnimation={finalizeAnimation}\n offsetTx={offsetTx}\n scrollEnabled={scrollEnabled}\n startPagingAnimation={startPagingAnimation}\n >\n <RootView\n data={data}\n itemHeight={itemHeight}\n originalData={originalData}\n renderItem={renderItem}\n style={style}\n />\n </ScrollViewGesture>\n </ViewabilityTrackerView>\n </InternalContext.Provider>\n );\n});\n\nexport default memo(Carousel);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA;;AAQA;;AACA;;;;;;;;AAEA,MAAMA,QAAQ,gBAAG,IAAAC,iBAAA,EAA4C,SAASD,QAAT,CAAkBE,KAAlB,EAAyBC,GAAzB,EAA8B;EACvF,MAAM;IACFC,QAAQ,GAAG,KADT;IAEFC,gBAAgB,GAAG,IAFjB;IAGFC,eAAe,GAAGC,iCAHhB;IAIFC,qBAAqB,GAAGC,uCAJtB;IAKFC,IAAI,EAAEC,YALJ;IAMFC,oBAAoB,GAAG,KANrB;IAOFC,YAAY,GAAG,CAPb;IAQFC,UARE;IASFC,SATE;IAUFC,IAAI,GAAG,KAVL;IAWFC,aAXE;IAYFC,UAZE;IAaFC,aAAa,GAAG,IAbd;IAcFC,KAdE;IAeFC,UAAU,GAAG;EAfX,IAgBFnB,KAhBJ;EAkBA,MAAMQ,IAAI,GAAG,IAAAY,oBAAA,EAAcX,YAAd,EAA4BK,IAA5B,CAAb;EAEA,MAAMO,SAAS,GAAGR,SAAS,GAAGF,YAA9B;EACA,MAAMW,YAAY,GAAG,IAAAC,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmBJ,SAAnB,CAAP,EAAsCK,OAA3D;EACA,MAAMC,QAAQ,GAAG,IAAAJ,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAA/C;EAEA,MAAM;IACFE,YADE;IAEFC,eAFE;IAGFC,SAHE;IAIFC;EAJE,IAKF,IAAAC,yBAAA,EAAmB;IACnBV,YADmB;IAEnBX,YAFmB;IAGnBE,SAHmB;IAInBoB,oBAAoB,EAAExB,YAAY,CAACyB,MAJhB;IAKnBnB;EALmB,CAAnB,CALJ;EAaA,MAAMoB,mBAAmB,GAAG,IAAAC,6BAAA,EAAuB;IAC/CR,YAD+C;IAE/CS,YAAY,EAAE7B,IAAI,CAAC0B,MAF4B;IAG/Cf;EAH+C,CAAvB,CAA5B;EAMA,MAAM;IACFmB,iBADE;IAEFC,mBAFE;IAGFC;EAHE,IAIF,IAAAC,yBAAA,EAAmB;IACnBnB,YADmB;IAEnBhB,qBAFmB;IAGnBuB,eAHmB;IAInBhB,SAJmB;IAKnBiB,SALmB;IAMnBhB,IANmB;IAOnBuB,YAAY,EAAE7B,IAAI,CAAC0B,MAPA;IAQnBP;EARmB,CAAnB,CAJJ;EAeA,MAAMe,kBAAkB,GAAG,IAAAC,4BAAA,EAAsB;IAC7CC,OAAO,EAAE1C,QADoC;IAE7C2C,cAAc,EAAE1C,gBAF6B;IAG7CqC;EAH6C,CAAtB,CAA3B;EAMA,IAAAM,iCAAA,EAA2B;IACvBxB,YADuB;IAEvBM,YAFuB;IAGvBf;EAHuB,CAA3B;EAMA,IAAAkC,0BAAA,EACI9C,GADJ,EAEI,OAAO;IACH4B,eADG;IAEHmB,IAAI,EAAE,MAAMR,oBAAoB,CAAC,aAAD,EAAgB;MAAES,SAAS,EAAE;IAAb,CAAhB,CAF7B;IAGHC,IAAI,EAAE,MAAMV,oBAAoB,CAAC,aAAD,EAAgB;MAAES,SAAS,EAAE;IAAb,CAAhB,CAH7B;IAIHE,QAAQ,EAAGC,MAAD,IAAYZ,oBAAoB,CAAC,OAAD,EAAUY,MAAV;EAJvC,CAAP,CAFJ,EAQI,CAACZ,oBAAD,EAAuBX,eAAvB,CARJ;EAWA,MAAMwB,YAAY,GAAG,IAAAC,cAAA,EAAQ,OAAO;IAChClD,eADgC;IAEhCI,IAFgC;IAGhC+B,mBAHgC;IAIhC3B,UAJgC;IAKhCC,SALgC;IAMhCsB,mBANgC;IAOhCrB;EAPgC,CAAP,CAAR,EAQjB,CACAV,eADA,EAEAI,IAFA,EAGA+B,mBAHA,EAIA3B,UAJA,EAKAC,SALA,EAMAsB,mBANA,EAOArB,IAPA,CARiB,CAArB;EAkBA,oBACI,6BAAC,2BAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAEuC;EAAjC,GACKtB,cADL,eAGI,6BAAC,+BAAD;IACI,OAAO,EAAE7B,QAAQ,IAAI,CAACQ,oBAD1B;IAEI,yBAAyB,EAAE6C,IAAI,CAACC,GAAL,CAAS,IAAT,EAAerD,gBAAf,CAF/B;IAGI,mBAAmB,EAAE,QAAiB;MAAA,IAAhB;QAAEsD;MAAF,CAAgB;;MAClC,IAAIA,OAAJ,EAAa;QACTf,kBAAkB,CAACgB,MAAnB;MACH,CAFD,MAEO;QACHhB,kBAAkB,CAACiB,KAAnB;MACH;IACJ;EATL,gBAWI,6BAAC,6BAAD;IACI,kBAAkB,EAAEjB,kBADxB;IAEI,iBAAiB,EAAEJ,iBAFvB;IAGI,QAAQ,EAAEX,QAHd;IAII,aAAa,EAAEV,aAJnB;IAKI,oBAAoB,EAAEuB;EAL1B,gBAOI,6BAAC,oBAAD;IACI,IAAI,EAAEhC,IADV;IAEI,UAAU,EAAEI,UAFhB;IAGI,YAAY,EAAEH,YAHlB;IAII,UAAU,EAAEO,UAJhB;IAKI,KAAK,EAAEE;EALX,EAPJ,CAXJ,CAHJ,CADJ;AAiCH,CArIgB,CAAjB;;4BAuIe,IAAA0C,WAAA,EAAK9D,QAAL,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, RenderItem } from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n ref?: RefObject<CarouselInstance>;\n\n /**\n * If `true`, enable autoplay.\n * @default false\n */\n autoplay?: boolean;\n\n /**\n * Delay in ms until navigating to the next item.\n * @default 3000\n */\n autoplayInterval?: number;\n\n /**\n * The item style creator function.\n * @default createDefaultItemStyle\n */\n createItemStyle?: CreateItemStyle;\n\n /**\n * The scroll animation creator function.\n * @default createDefaultScrollAnimation\n */\n createScrollAnimation?: CreateScrollAnimation;\n\n /**\n * Data for render items.\n */\n data: ReadonlyArray<ItemT>;\n\n /**\n * If `true`, carousel will detect its own viewability and control autoplay automatically.\n * @default false\n */\n disableSmartAutoplay?: boolean;\n\n /**\n * Index of initial item that should be selected.\n * @default 0\n */\n initialIndex?: number;\n\n /**\n * The item
|
|
1
|
+
{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, ItemHeight, RenderItem } from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n ref?: RefObject<CarouselInstance>;\n\n /**\n * If `true`, enable autoplay.\n * @default false\n */\n autoplay?: boolean;\n\n /**\n * Delay in ms until navigating to the next item.\n * @default 3000\n */\n autoplayInterval?: number;\n\n /**\n * The item style creator function.\n * @default createDefaultItemStyle\n */\n createItemStyle?: CreateItemStyle;\n\n /**\n * The scroll animation creator function.\n * @default createDefaultScrollAnimation\n */\n createScrollAnimation?: CreateScrollAnimation;\n\n /**\n * Data for render items.\n */\n data: ReadonlyArray<ItemT>;\n\n /**\n * If `true`, carousel will detect its own viewability and control autoplay automatically.\n * @default false\n */\n disableSmartAutoplay?: boolean;\n\n /**\n * Index of initial item that should be selected.\n * @default 0\n */\n initialIndex?: number;\n\n /**\n * The item height.\n * For a performance reason, always consider to provide a number value.\n */\n itemHeight: ItemHeight;\n\n /**\n * The item width.\n */\n itemWidth: number;\n\n /**\n * Enable infinite loop mode.\n * @default false\n */\n loop?: boolean;\n\n /**\n * Callback fired when an index is changed.\n */\n onIndexChange?: (newIndex: number) => void;\n\n /**\n * Takes an item from data and renders it into the list.\n */\n renderItem: RenderItem<ItemT>;\n\n /**\n * Whether to enable scroll gesture.\n * @default true\n */\n scrollEnabled?: boolean;\n\n /**\n * The maximum number of items that can respond to pan gesture events.\n * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)\n * 0 means all items will respond to pan gesture events.\n * @default 5\n */\n windowSize?: number;\n}> {}\n"],"mappings":""}
|
|
@@ -8,21 +8,21 @@ exports.default = parallaxItemStyleFactory;
|
|
|
8
8
|
var _animationUtils = require("./animationUtils");
|
|
9
9
|
|
|
10
10
|
const defaultParallaxAnimationConfig = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
activeItemScale: 0.9,
|
|
12
|
+
activeItemOpacity: 1,
|
|
13
|
+
adjacentItemScale: Math.pow(0.9, 2),
|
|
14
|
+
adjacentItemOpacity: 0.5,
|
|
15
|
+
scrollingOffset: 50
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
function parallaxItemStyleFactory() {
|
|
19
19
|
let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParallaxAnimationConfig;
|
|
20
20
|
const {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
activeItemOpacity,
|
|
22
|
+
activeItemScale,
|
|
23
|
+
adjacentItemOpacity,
|
|
24
|
+
adjacentItemScale,
|
|
25
|
+
scrollingOffset
|
|
26
26
|
} = { ...config,
|
|
27
27
|
...defaultParallaxAnimationConfig
|
|
28
28
|
};
|
|
@@ -30,7 +30,7 @@ function parallaxItemStyleFactory() {
|
|
|
30
30
|
const createItemStyle = (itemInterpolation, itemWidth) => {
|
|
31
31
|
const translate = itemInterpolation.interpolate({
|
|
32
32
|
inputRange: _animationUtils.itemInterpolationInputRange,
|
|
33
|
-
outputRange: [-itemWidth +
|
|
33
|
+
outputRange: [-itemWidth + scrollingOffset, 0, itemWidth - scrollingOffset]
|
|
34
34
|
});
|
|
35
35
|
const zIndex = itemInterpolation.interpolate({
|
|
36
36
|
inputRange: _animationUtils.itemInterpolationInputRange,
|
|
@@ -39,12 +39,12 @@ function parallaxItemStyleFactory() {
|
|
|
39
39
|
});
|
|
40
40
|
const scale = itemInterpolation.interpolate({
|
|
41
41
|
inputRange: _animationUtils.itemInterpolationInputRange,
|
|
42
|
-
outputRange: [
|
|
42
|
+
outputRange: [adjacentItemScale, activeItemScale, adjacentItemScale],
|
|
43
43
|
extrapolate: 'clamp'
|
|
44
44
|
});
|
|
45
45
|
const opacity = itemInterpolation.interpolate({
|
|
46
46
|
inputRange: _animationUtils.itemInterpolationInputRange,
|
|
47
|
-
outputRange: [
|
|
47
|
+
outputRange: [adjacentItemOpacity, activeItemOpacity, adjacentItemOpacity],
|
|
48
48
|
extrapolate: 'clamp'
|
|
49
49
|
});
|
|
50
50
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultParallaxAnimationConfig","
|
|
1
|
+
{"version":3,"names":["defaultParallaxAnimationConfig","activeItemScale","activeItemOpacity","adjacentItemScale","Math","pow","adjacentItemOpacity","scrollingOffset","parallaxItemStyleFactory","config","createItemStyle","itemInterpolation","itemWidth","translate","interpolate","inputRange","itemInterpolationInputRange","outputRange","zIndex","extrapolate","scale","opacity","transform","translateX"],"sources":["parallaxItemStyleFactory.ts"],"sourcesContent":["import type { CreateItemStyle } from '../types';\nimport { itemInterpolationInputRange } from './animationUtils';\n\nexport interface ParallaxAnimationConfig {\n activeItemScale?: number;\n activeItemOpacity?: number;\n adjacentItemScale?: number;\n adjacentItemOpacity?: number;\n scrollingOffset?: number;\n}\n\nconst defaultParallaxAnimationConfig: Required<Readonly<ParallaxAnimationConfig>> = {\n activeItemScale: 0.9,\n activeItemOpacity: 1,\n adjacentItemScale: Math.pow(0.9, 2),\n adjacentItemOpacity: 0.5,\n scrollingOffset: 50,\n};\n\nexport default function parallaxItemStyleFactory(config: ParallaxAnimationConfig = defaultParallaxAnimationConfig) {\n const {\n activeItemOpacity,\n activeItemScale,\n adjacentItemOpacity,\n adjacentItemScale,\n scrollingOffset,\n }: Required<ParallaxAnimationConfig> = {\n ...config,\n ...defaultParallaxAnimationConfig,\n };\n\n const createItemStyle: CreateItemStyle = (itemInterpolation, itemWidth) => {\n const translate = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [\n -itemWidth + scrollingOffset,\n 0,\n itemWidth - scrollingOffset,\n ],\n });\n\n const zIndex = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [0, itemWidth, 0],\n extrapolate: 'clamp',\n });\n\n const scale = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [\n adjacentItemScale,\n activeItemScale,\n adjacentItemScale,\n ],\n extrapolate: 'clamp',\n });\n\n const opacity = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [\n adjacentItemOpacity,\n activeItemOpacity,\n adjacentItemOpacity,\n ],\n extrapolate: 'clamp',\n });\n\n return {\n transform: [\n { translateX: translate },\n { scale },\n ],\n zIndex,\n opacity,\n };\n };\n\n return createItemStyle;\n};\n"],"mappings":";;;;;;;AACA;;AAUA,MAAMA,8BAA2E,GAAG;EAChFC,eAAe,EAAE,GAD+D;EAEhFC,iBAAiB,EAAE,CAF6D;EAGhFC,iBAAiB,EAAEC,IAAI,CAACC,GAAL,CAAS,GAAT,EAAc,CAAd,CAH6D;EAIhFC,mBAAmB,EAAE,GAJ2D;EAKhFC,eAAe,EAAE;AAL+D,CAApF;;AAQe,SAASC,wBAAT,GAAoG;EAAA,IAAlEC,MAAkE,uEAAhCT,8BAAgC;EAC/G,MAAM;IACFE,iBADE;IAEFD,eAFE;IAGFK,mBAHE;IAIFH,iBAJE;IAKFI;EALE,IAMiC,EACnC,GAAGE,MADgC;IAEnC,GAAGT;EAFgC,CANvC;;EAWA,MAAMU,eAAgC,GAAG,CAACC,iBAAD,EAAoBC,SAApB,KAAkC;IACvE,MAAMC,SAAS,GAAGF,iBAAiB,CAACG,WAAlB,CAA8B;MAC5CC,UAAU,EAAEC,2CADgC;MAE5CC,WAAW,EAAE,CACT,CAACL,SAAD,GAAaL,eADJ,EAET,CAFS,EAGTK,SAAS,GAAGL,eAHH;IAF+B,CAA9B,CAAlB;IASA,MAAMW,MAAM,GAAGP,iBAAiB,CAACG,WAAlB,CAA8B;MACzCC,UAAU,EAAEC,2CAD6B;MAEzCC,WAAW,EAAE,CAAC,CAAD,EAAIL,SAAJ,EAAe,CAAf,CAF4B;MAGzCO,WAAW,EAAE;IAH4B,CAA9B,CAAf;IAMA,MAAMC,KAAK,GAAGT,iBAAiB,CAACG,WAAlB,CAA8B;MACxCC,UAAU,EAAEC,2CAD4B;MAExCC,WAAW,EAAE,CACTd,iBADS,EAETF,eAFS,EAGTE,iBAHS,CAF2B;MAOxCgB,WAAW,EAAE;IAP2B,CAA9B,CAAd;IAUA,MAAME,OAAO,GAAGV,iBAAiB,CAACG,WAAlB,CAA8B;MAC1CC,UAAU,EAAEC,2CAD8B;MAE1CC,WAAW,EAAE,CACTX,mBADS,EAETJ,iBAFS,EAGTI,mBAHS,CAF6B;MAO1Ca,WAAW,EAAE;IAP6B,CAA9B,CAAhB;IAUA,OAAO;MACHG,SAAS,EAAE,CACP;QAAEC,UAAU,EAAEV;MAAd,CADO,EAEP;QAAEO;MAAF,CAFO,CADR;MAKHF,MALG;MAMHG;IANG,CAAP;EAQH,CA5CD;;EA8CA,OAAOX,eAAP;AACH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","Animated","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","InternalContext","createContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n createItemStyle: CreateItemStyle;\n data: ReadonlyArray<ItemT>;\n globalInterpolation: Animated.AnimatedInterpolation;\n itemHeight:
|
|
1
|
+
{"version":3,"names":["mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","Animated","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","InternalContext","createContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n createItemStyle: CreateItemStyle;\n data: ReadonlyArray<ItemT>;\n globalInterpolation: Animated.AnimatedInterpolation;\n itemHeight: ItemHeight;\n itemWidth: number;\n itemVisibilityStore: ItemVisibilityStore;\n loop: boolean;\n}\n\nconst mockItemVisibilityStore: ItemVisibilityStore = {\n dispatch: () => void 0,\n subscribe: () => () => void 0,\n removeAllListeners: () => void 0,\n};\n\nconst initialValue: Readonly<InternalContextValue<any>> = {\n createItemStyle: () => ({}),\n data: [],\n globalInterpolation: Animated.add(new Animated.Value(0), 0),\n itemHeight: 0,\n itemWidth: 0,\n itemVisibilityStore: mockItemVisibilityStore,\n loop: false,\n};\n\nconst InternalContext = createContext<InternalContextValue<any>>(initialValue);\n\nexport default InternalContext;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAaA,MAAMA,uBAA4C,GAAG;EACjDC,QAAQ,EAAE,MAAM,KAAK,CAD4B;EAEjDC,SAAS,EAAE,MAAM,MAAM,KAAK,CAFqB;EAGjDC,kBAAkB,EAAE,MAAM,KAAK;AAHkB,CAArD;AAMA,MAAMC,YAAiD,GAAG;EACtDC,eAAe,EAAE,OAAO,EAAP,CADqC;EAEtDC,IAAI,EAAE,EAFgD;EAGtDC,mBAAmB,EAAEC,qBAAA,CAASC,GAAT,CAAa,IAAID,qBAAA,CAASE,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEb,uBANiC;EAOtDc,IAAI,EAAE;AAPgD,CAA1D;AAUA,MAAMC,eAAe,gBAAG,IAAAC,oBAAA,EAAyCZ,YAAzC,CAAxB;eAEeW,e"}
|
|
@@ -24,7 +24,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
24
24
|
function ItemView(props) {
|
|
25
25
|
const {
|
|
26
26
|
children,
|
|
27
|
-
index
|
|
27
|
+
index,
|
|
28
|
+
onLayout
|
|
28
29
|
} = props;
|
|
29
30
|
const {
|
|
30
31
|
createItemStyle,
|
|
@@ -46,9 +47,10 @@ function ItemView(props) {
|
|
|
46
47
|
}, [itemVisibilityStore]);
|
|
47
48
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
48
49
|
children: visible ? children(interpolation) : null,
|
|
50
|
+
onLayout: onLayout,
|
|
49
51
|
style: [{
|
|
50
52
|
width: itemWidth,
|
|
51
|
-
height: itemHeight
|
|
53
|
+
height: itemHeight !== 'auto' ? itemHeight : undefined
|
|
52
54
|
}, styles.absolute, // @ts-ignore
|
|
53
55
|
itemStyle]
|
|
54
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ItemView","props","children","index","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport { useItemInterpolation } from '../hooks';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n index: number;\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {
|
|
1
|
+
{"version":3,"names":["ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport { useItemInterpolation } from '../hooks';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n index: number;\n onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {\n children,\n index,\n onLayout,\n } = props;\n\n const {\n createItemStyle,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n } = useContext(InternalContext);\n\n const [visible, setVisible] = useState(false);\n\n const interpolation = useItemInterpolation(index);\n\n const itemStyle = useMemo(\n () => createItemStyle(interpolation, itemWidth),\n [createItemStyle, interpolation],\n );\n\n useEffect(() => {\n return itemVisibilityStore.subscribe(ranges => {\n const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n setVisible(nextVisible);\n });\n }, [itemVisibilityStore]);\n\n return (\n <Animated.View\n children={visible ? children(interpolation) : null}\n onLayout={onLayout}\n style={[\n {\n width: itemWidth,\n height: itemHeight !== 'auto' ? itemHeight : undefined,\n },\n styles.absolute,\n // @ts-ignore\n itemStyle,\n ]}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n absolute: {\n position: 'absolute',\n },\n});\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC;EAJE,IAKF,IAAAC,iBAAA,EAAWC,wBAAX,CALJ;EAOA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,2BAAA,EAAqBZ,KAArB,CAAtB;EAEA,MAAMa,SAAS,GAAG,IAAAC,cAAA,EACd,MAAMZ,eAAe,CAACS,aAAD,EAAgBP,SAAhB,CADP,EAEd,CAACF,eAAD,EAAkBS,aAAlB,CAFc,CAAlB;EAKA,IAAAI,gBAAA,EAAU,MAAM;IACZ,OAAOV,mBAAmB,CAACW,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBrB,KAAK,IAAIoB,IAAT,IAAiBpB,KAAK,IAAIqB,EAA1C;MAAA,CAAZ,CAApB;MACAZ,UAAU,CAACS,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALD,EAKG,CAACb,mBAAD,CALH;EAOA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,QAAQ,EAAEG,OAAO,GAAGT,QAAQ,CAACY,aAAD,CAAX,GAA6B,IADlD;IAEI,QAAQ,EAAEV,QAFd;IAGI,KAAK,EAAE,CACH;MACIqB,KAAK,EAAElB,SADX;MAEImB,MAAM,EAAEpB,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCqB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAb,SAPG;EAHX,EADJ;AAeH;;AAAA;;AAED,MAAMY,MAAM,GAAGE,gBAAA,CAAWC,MAAX,CAAkB;EAC7BF,QAAQ,EAAE;IACNG,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
@@ -28,7 +28,8 @@ const styles = _core.StyleSheet.create({
|
|
|
28
28
|
},
|
|
29
29
|
horizontal: {
|
|
30
30
|
flexDirection: 'row',
|
|
31
|
-
|
|
31
|
+
overflowX: 'hidden',
|
|
32
|
+
overflowY: 'visible'
|
|
32
33
|
}
|
|
33
34
|
});
|
|
34
35
|
|
|
@@ -41,10 +42,27 @@ const RootView = /*#__PURE__*/(0, _react.forwardRef)(function RootView(props, re
|
|
|
41
42
|
style,
|
|
42
43
|
...otherProps
|
|
43
44
|
} = props;
|
|
45
|
+
const [maxHeightOfRenderedItems, setMaxHeightOfRenderedItems] = (0, _react.useState)(0);
|
|
46
|
+
|
|
47
|
+
const handleItemLayout = e => {
|
|
48
|
+
const {
|
|
49
|
+
nativeEvent: {
|
|
50
|
+
layout: {
|
|
51
|
+
height
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
} = e;
|
|
55
|
+
const heightInt = Math.round(height);
|
|
56
|
+
|
|
57
|
+
if (heightInt > maxHeightOfRenderedItems) {
|
|
58
|
+
setMaxHeightOfRenderedItems(heightInt);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
44
61
|
|
|
45
62
|
const renderItemView = (item, index) => /*#__PURE__*/_react.default.createElement(_ItemView.default, {
|
|
46
63
|
key: index,
|
|
47
|
-
index: index
|
|
64
|
+
index: index,
|
|
65
|
+
onLayout: itemHeight === 'auto' ? handleItemLayout : undefined
|
|
48
66
|
}, interpolation => renderItem({
|
|
49
67
|
item,
|
|
50
68
|
index: index % originalData.length,
|
|
@@ -52,7 +70,7 @@ const RootView = /*#__PURE__*/(0, _react.forwardRef)(function RootView(props, re
|
|
|
52
70
|
}));
|
|
53
71
|
|
|
54
72
|
const viewStyles = [styles.root, styles.horizontal, {
|
|
55
|
-
height: itemHeight
|
|
73
|
+
height: itemHeight === 'auto' ? maxHeightOfRenderedItems : itemHeight
|
|
56
74
|
}, style];
|
|
57
75
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
|
|
58
76
|
ref: ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","width","justifyContent","horizontal","flexDirection","
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","width","justifyContent","horizontal","flexDirection","overflowX","overflowY","RootView","forwardRef","props","ref","data","itemHeight","originalData","renderItem","style","otherProps","maxHeightOfRenderedItems","setMaxHeightOfRenderedItems","useState","handleItemLayout","e","nativeEvent","layout","height","heightInt","Math","round","renderItemView","item","index","undefined","interpolation","length","viewStyles","map","memo"],"sources":["RootView.tsx"],"sourcesContent":["import React, { forwardRef, memo, ReactElement, useState } from 'react';\nimport type { View, ViewProps, LayoutChangeEvent } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { ItemHeight, RenderItem } from '../types';\nimport ItemView from './ItemView';\n\nconst styles = StyleSheet.create({\n root: {\n width: '100%',\n justifyContent: 'center',\n },\n horizontal: {\n flexDirection: 'row',\n overflowX: 'hidden',\n overflowY: 'visible',\n },\n});\n\nexport type RootViewProps<ItemT> = ViewProps & {\n data: ReadonlyArray<ItemT>;\n itemHeight: ItemHeight;\n originalData: ReadonlyArray<ItemT>;\n renderItem: RenderItem<ItemT>;\n};\n\nconst RootView = forwardRef<View, RootViewProps<any>>(function RootView(props, ref) {\n const {\n data,\n itemHeight,\n originalData,\n renderItem,\n style,\n ...otherProps\n } = props;\n\n const [maxHeightOfRenderedItems, setMaxHeightOfRenderedItems] = useState(0);\n\n const handleItemLayout = (e: LayoutChangeEvent) => {\n const { nativeEvent: { layout: { height } } } = e;\n\n const heightInt = Math.round(height);\n if (heightInt > maxHeightOfRenderedItems) {\n setMaxHeightOfRenderedItems(heightInt);\n }\n };\n\n const renderItemView = (item: any, index: number): ReactElement => (\n <ItemView\n key={index}\n index={index}\n onLayout={itemHeight === 'auto' ? handleItemLayout : undefined}\n >\n {(interpolation) => renderItem({\n item,\n index: index % originalData.length,\n interpolation,\n })}\n </ItemView>\n );\n\n const viewStyles = [\n styles.root,\n styles.horizontal,\n { height: itemHeight === 'auto' ? maxHeightOfRenderedItems : itemHeight },\n style,\n ];\n\n return (\n <Animated.View\n ref={ref}\n {...otherProps}\n children={data.map(renderItemView)}\n style={viewStyles}\n />\n );\n});\n\nexport default memo(RootView);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,gBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,KAAK,EAAE,MADL;IAEFC,cAAc,EAAE;EAFd,CADuB;EAK7BC,UAAU,EAAE;IACRC,aAAa,EAAE,KADP;IAERC,SAAS,EAAE,QAFH;IAGRC,SAAS,EAAE;EAHH;AALiB,CAAlB,CAAf;;AAmBA,MAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EAAqC,SAASD,QAAT,CAAkBE,KAAlB,EAAyBC,GAAzB,EAA8B;EAChF,MAAM;IACFC,IADE;IAEFC,UAFE;IAGFC,YAHE;IAIFC,UAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFP,KAPJ;EASA,MAAM,CAACQ,wBAAD,EAA2BC,2BAA3B,IAA0D,IAAAC,eAAA,EAAS,CAAT,CAAhE;;EAEA,MAAMC,gBAAgB,GAAIC,CAAD,IAA0B;IAC/C,MAAM;MAAEC,WAAW,EAAE;QAAEC,MAAM,EAAE;UAAEC;QAAF;MAAV;IAAf,IAA0CH,CAAhD;IAEA,MAAMI,SAAS,GAAGC,IAAI,CAACC,KAAL,CAAWH,MAAX,CAAlB;;IACA,IAAIC,SAAS,GAAGR,wBAAhB,EAA0C;MACtCC,2BAA2B,CAACO,SAAD,CAA3B;IACH;EACJ,CAPD;;EASA,MAAMG,cAAc,GAAG,CAACC,IAAD,EAAYC,KAAZ,kBACnB,6BAAC,iBAAD;IACI,GAAG,EAAEA,KADT;IAEI,KAAK,EAAEA,KAFX;IAGI,QAAQ,EAAElB,UAAU,KAAK,MAAf,GAAwBQ,gBAAxB,GAA2CW;EAHzD,GAKMC,aAAD,IAAmBlB,UAAU,CAAC;IAC3Be,IAD2B;IAE3BC,KAAK,EAAEA,KAAK,GAAGjB,YAAY,CAACoB,MAFD;IAG3BD;EAH2B,CAAD,CALlC,CADJ;;EAcA,MAAME,UAAU,GAAG,CACfrC,MAAM,CAACG,IADQ,EAEfH,MAAM,CAACM,UAFQ,EAGf;IAAEqB,MAAM,EAAEZ,UAAU,KAAK,MAAf,GAAwBK,wBAAxB,GAAmDL;EAA7D,CAHe,EAIfG,KAJe,CAAnB;EAOA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,GAAG,EAAEL;EADT,GAEQM,UAFR;IAGI,QAAQ,EAAEL,IAAI,CAACwB,GAAL,CAASP,cAAT,CAHd;IAII,KAAK,EAAEM;EAJX,GADJ;AAQH,CAlDgB,CAAjB;;4BAoDe,IAAAE,WAAA,EAAK7B,QAAL,C"}
|
|
@@ -15,14 +15,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
15
15
|
|
|
16
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
17
|
|
|
18
|
-
const SCROLL_TO_ADJACENT_TX_THRESHOLD =
|
|
19
|
-
const SCROLL_TO_ADJACENT_VX_THRESHOLD =
|
|
18
|
+
const SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;
|
|
19
|
+
const SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;
|
|
20
20
|
const ACTIVE_OFFSET_ABS_X = 5;
|
|
21
21
|
const activeOffsetX = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
|
|
22
22
|
const endAnimationStates = [_reactNativeGestureHandler.State.CANCELLED, _reactNativeGestureHandler.State.END];
|
|
23
23
|
|
|
24
24
|
function shouldScrollToAdjacent(translationX, velocityX) {
|
|
25
|
-
|
|
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;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
function ScrollViewGesture(props) {
|
|
@@ -32,7 +34,7 @@ function ScrollViewGesture(props) {
|
|
|
32
34
|
finalizeAnimation,
|
|
33
35
|
offsetTx,
|
|
34
36
|
scrollEnabled,
|
|
35
|
-
|
|
37
|
+
startPagingAnimation
|
|
36
38
|
} = props;
|
|
37
39
|
const {
|
|
38
40
|
pause: pauseAutoplay,
|
|
@@ -59,11 +61,14 @@ function ScrollViewGesture(props) {
|
|
|
59
61
|
} = event;
|
|
60
62
|
|
|
61
63
|
if (endAnimationStates.includes(state)) {
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
+
const direction = shouldScrollToAdjacent(translationX, velocityX) ? translationX < 0 ? 'next' : 'prev' : 'stay';
|
|
65
|
+
startPagingAnimation('directional', {
|
|
66
|
+
direction: direction,
|
|
67
|
+
isOriginatedFromGesture: true
|
|
68
|
+
});
|
|
64
69
|
resumeAutoplay();
|
|
65
70
|
}
|
|
66
|
-
}, [
|
|
71
|
+
}, [startPagingAnimation, resumeAutoplay]);
|
|
67
72
|
return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
|
|
68
73
|
activeOffsetX: activeOffsetX,
|
|
69
74
|
children: children,
|
|
@@ -1 +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","Math","abs","ScrollViewGesture","props","autoplayController","children","finalizeAnimation","offsetTx","scrollEnabled","
|
|
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"}
|
|
@@ -23,7 +23,10 @@ function useAutoplayController(config) {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
executor.execute(() => {
|
|
26
|
-
startPagingAnimation('
|
|
26
|
+
startPagingAnimation('directional', {
|
|
27
|
+
direction: 'next',
|
|
28
|
+
isOriginatedFromGesture: false
|
|
29
|
+
});
|
|
27
30
|
play();
|
|
28
31
|
}, intervalMillis);
|
|
29
32
|
}, [intervalMillis, startPagingAnimation]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useAutoplayController","config","enabled","intervalMillis","startPagingAnimation","paused","useRef","executor","useDeferredExecutor","play","useCallback","current","execute","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('next', false);\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,
|
|
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"}
|
|
@@ -24,7 +24,7 @@ function directionToValue(itemWidth) {
|
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
function usePagingAnimation(
|
|
27
|
+
function usePagingAnimation(params) {
|
|
28
28
|
const {
|
|
29
29
|
controlledTx,
|
|
30
30
|
createScrollAnimation,
|
|
@@ -34,7 +34,7 @@ function usePagingAnimation(config) {
|
|
|
34
34
|
loop,
|
|
35
35
|
numberOfData,
|
|
36
36
|
offsetTx
|
|
37
|
-
} =
|
|
37
|
+
} = params;
|
|
38
38
|
const animationRef = (0, _react.useRef)(null);
|
|
39
39
|
const toValueRef = (0, _react.useRef)(0);
|
|
40
40
|
const globalInterpolation = (0, _react.useMemo)(() => _reactNative.Animated.add(controlledTx, offsetTx), [controlledTx, offsetTx]);
|
|
@@ -84,39 +84,77 @@ function usePagingAnimation(config) {
|
|
|
84
84
|
stopUnfinishedSnapAnimation();
|
|
85
85
|
resetBoundary();
|
|
86
86
|
}, [controlledTx]);
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
const startPagingAnimation = (0, _react.useCallback)((type, config) => {
|
|
88
|
+
const configWithDefaults = {
|
|
89
|
+
animated: true,
|
|
90
|
+
...config
|
|
91
|
+
};
|
|
90
92
|
const currentIndex = getCurrentIndex();
|
|
93
|
+
const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
|
|
94
|
+
|
|
95
|
+
const getValueByDirectionalPagingOnLoopDisabled = _config => {
|
|
96
|
+
const {
|
|
97
|
+
direction,
|
|
98
|
+
isOriginatedFromGesture
|
|
99
|
+
} = _config;
|
|
91
100
|
|
|
92
|
-
const computeToValueOnNoLoop = () => {
|
|
93
101
|
if (currentIndex === 0 && direction === 'prev') {
|
|
94
|
-
return
|
|
102
|
+
return isOriginatedFromGesture ? getValueByDirectionOnAllAdjacentItemsVisible('stay') : -lastIndex * itemWidth; // last position
|
|
95
103
|
} else if (currentIndex === lastIndex && direction === 'next') {
|
|
96
|
-
return
|
|
104
|
+
return isOriginatedFromGesture ? getValueByDirectionOnAllAdjacentItemsVisible('stay') : lastIndex * itemWidth; // first position
|
|
97
105
|
}
|
|
98
106
|
|
|
99
|
-
return
|
|
107
|
+
return getValueByDirectionOnAllAdjacentItemsVisible(direction);
|
|
100
108
|
};
|
|
101
109
|
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
110
|
+
const getValueByDirectionalPaging = _config => {
|
|
111
|
+
const _configWithDefaults = {
|
|
112
|
+
isOriginatedFromGesture: false,
|
|
113
|
+
..._config
|
|
114
|
+
};
|
|
115
|
+
return loop ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction) : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
const getValueByIndexPaging = _ref => {
|
|
107
119
|
let {
|
|
108
|
-
|
|
120
|
+
index
|
|
109
121
|
} = _ref;
|
|
110
122
|
|
|
111
|
-
if (
|
|
112
|
-
|
|
123
|
+
if (index < 0 || index > lastIndex || index === currentIndex) {
|
|
124
|
+
// no animation if index is invalid or equals to current index
|
|
125
|
+
return 0;
|
|
113
126
|
}
|
|
114
|
-
|
|
127
|
+
|
|
128
|
+
const distance = Math.abs(currentIndex - index) * itemWidth;
|
|
129
|
+
const direction = index > currentIndex ? -1 : 1;
|
|
130
|
+
return distance * direction;
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
const toValue = type === 'directional' // @ts-ignore
|
|
134
|
+
? getValueByDirectionalPaging(configWithDefaults) // @ts-ignore
|
|
135
|
+
: getValueByIndexPaging(configWithDefaults);
|
|
136
|
+
toValueRef.current = toValue;
|
|
137
|
+
|
|
138
|
+
if (configWithDefaults.animated) {
|
|
139
|
+
const animation = createScrollAnimation(offsetTx, toValue);
|
|
140
|
+
animationRef.current = animation;
|
|
141
|
+
animation.start(_ref2 => {
|
|
142
|
+
let {
|
|
143
|
+
finished
|
|
144
|
+
} = _ref2;
|
|
145
|
+
|
|
146
|
+
if (finished) {
|
|
147
|
+
finalizeAnimation();
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
} else {
|
|
151
|
+
finalizeAnimation();
|
|
152
|
+
}
|
|
115
153
|
}, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop]);
|
|
116
154
|
return {
|
|
117
155
|
globalInterpolation,
|
|
118
156
|
finalizeAnimation,
|
|
119
|
-
|
|
157
|
+
startPagingAnimation
|
|
120
158
|
};
|
|
121
159
|
}
|
|
122
160
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["directionToValue","itemWidth","direction","usePagingAnimation","config","controlledTx","createScrollAnimation","getCurrentIndex","lastIndex","loop","numberOfData","offsetTx","animationRef","useRef","toValueRef","globalInterpolation","useMemo","Animated","add","useEffect","subscriptionId","addListener","value","currentTx","maxWidth","Math","abs","round","setValue","removeListener","finalizeAnimation","useCallback","stopUnfinishedSnapAnimation","current","stop","resetBoundary","setOffset","flattenOffset","Platform","OS","_value","startAnimation","isGesture","getToValueByDirection","currentIndex","computeToValueOnNoLoop","toValue","animation","start","finished"],"sources":["usePagingAnimation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Animated, Platform } from 'react-native';\nimport type { CreateScrollAnimation, GetCurrentIndex, PagingDirection, StartPagingAnimation } from '../types';\n\nexport interface PagingAnimationConfig {\n controlledTx: Animated.Value;\n createScrollAnimation: CreateScrollAnimation;\n getCurrentIndex: GetCurrentIndex;\n itemWidth: number;\n lastIndex: number;\n loop: boolean;\n numberOfData: number;\n offsetTx: Animated.Value;\n}\n\nexport interface UsePagingAnimation {\n finalizeAnimation: () => void;\n globalInterpolation: Animated.AnimatedInterpolation;\n startAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nexport default function usePagingAnimation(config: PagingAnimationConfig): UsePagingAnimation {\n const {\n controlledTx,\n createScrollAnimation,\n getCurrentIndex,\n itemWidth,\n lastIndex,\n loop,\n numberOfData,\n offsetTx,\n } = config;\n\n const animationRef = useRef<Animated.CompositeAnimation | null>(null);\n const toValueRef = useRef<number>(0);\n\n const globalInterpolation = useMemo(\n () => Animated.add(controlledTx, offsetTx),\n [controlledTx, offsetTx],\n );\n\n useEffect(() => {\n const subscriptionId = controlledTx.addListener((value) => {\n const currentTx = value.value;\n\n // Prevent infinite loop\n if (currentTx !== 0) {\n const maxWidth = numberOfData * itemWidth;\n\n if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {\n // reset position\n controlledTx.setValue(0);\n }\n }\n });\n\n return () => {\n controlledTx.removeListener(subscriptionId);\n };\n }, [numberOfData, itemWidth]);\n\n const finalizeAnimation = useCallback(() => {\n const stopUnfinishedSnapAnimation = () => {\n if (animationRef.current) {\n animationRef.current?.stop();\n animationRef.current = null;\n }\n };\n\n const resetBoundary = () => {\n controlledTx.setOffset(toValueRef.current);\n controlledTx.flattenOffset();\n\n // FIXME: react-native-web bug maybe?\n // `AnimatedValue.flattenOffset()` does not trigger any event listener.\n // Accessing value directly via `_value` is dangerous but working on web (`useNativeDriver` always false).\n // So setting same value with `value.setValue(value._value)` will trigger event listener.\n if (Platform.OS === 'web') {\n // @ts-ignore\n controlledTx.setValue(controlledTx._value);\n }\n\n offsetTx.setValue(0);\n toValueRef.current = 0;\n };\n\n stopUnfinishedSnapAnimation();\n\n resetBoundary();\n }, [controlledTx]);\n\n const startAnimation = useCallback((direction: PagingDirection, isGesture: boolean = false) => {\n const getToValueByDirection = directionToValue(itemWidth);\n\n const currentIndex = getCurrentIndex();\n\n const computeToValueOnNoLoop = (): number => {\n if (currentIndex === 0 && direction === 'prev') {\n return isGesture\n ? getToValueByDirection('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isGesture\n ? getToValueByDirection('stay')\n : lastIndex * itemWidth; // first position\n }\n return getToValueByDirection(direction);\n };\n\n const toValue = loop ? getToValueByDirection(direction) : computeToValueOnNoLoop();\n const animation = createScrollAnimation(offsetTx, toValue);\n\n animationRef.current = animation;\n toValueRef.current = toValue;\n\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n ]);\n\n return {\n globalInterpolation,\n finalizeAnimation,\n startAnimation,\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["directionToValue","itemWidth","direction","usePagingAnimation","params","controlledTx","createScrollAnimation","getCurrentIndex","lastIndex","loop","numberOfData","offsetTx","animationRef","useRef","toValueRef","globalInterpolation","useMemo","Animated","add","useEffect","subscriptionId","addListener","value","currentTx","maxWidth","Math","abs","round","setValue","removeListener","finalizeAnimation","useCallback","stopUnfinishedSnapAnimation","current","stop","resetBoundary","setOffset","flattenOffset","Platform","OS","_value","startPagingAnimation","type","config","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","toValue","animation","start","finished"],"sources":["usePagingAnimation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Animated, Platform } from 'react-native';\nimport type {\n CreateScrollAnimation,\n DirectionalPagingAnimationConfig,\n GetCurrentIndex,\n IndexPagingAnimationConfig,\n PagingAnimationConfig,\n PagingAnimationType,\n PagingDirection,\n StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimationParameters {\n controlledTx: Animated.Value;\n createScrollAnimation: CreateScrollAnimation;\n getCurrentIndex: GetCurrentIndex;\n itemWidth: number;\n lastIndex: number;\n loop: boolean;\n numberOfData: number;\n offsetTx: Animated.Value;\n}\n\nexport interface UsePagingAnimation {\n finalizeAnimation: () => void;\n globalInterpolation: Animated.AnimatedInterpolation;\n startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nexport default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation {\n const {\n controlledTx,\n createScrollAnimation,\n getCurrentIndex,\n itemWidth,\n lastIndex,\n loop,\n numberOfData,\n offsetTx,\n } = params;\n\n const animationRef = useRef<Animated.CompositeAnimation | null>(null);\n const toValueRef = useRef<number>(0);\n\n const globalInterpolation = useMemo(\n () => Animated.add(controlledTx, offsetTx),\n [controlledTx, offsetTx],\n );\n\n useEffect(() => {\n const subscriptionId = controlledTx.addListener((value) => {\n const currentTx = value.value;\n\n // Prevent infinite loop\n if (currentTx !== 0) {\n const maxWidth = numberOfData * itemWidth;\n\n if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {\n // reset position\n controlledTx.setValue(0);\n }\n }\n });\n\n return () => {\n controlledTx.removeListener(subscriptionId);\n };\n }, [numberOfData, itemWidth]);\n\n const finalizeAnimation = useCallback(() => {\n const stopUnfinishedSnapAnimation = () => {\n if (animationRef.current) {\n animationRef.current?.stop();\n animationRef.current = null;\n }\n };\n\n const resetBoundary = () => {\n controlledTx.setOffset(toValueRef.current);\n controlledTx.flattenOffset();\n\n // FIXME: react-native-web bug maybe?\n // `AnimatedValue.flattenOffset()` does not trigger any event listener.\n // Accessing value directly via `_value` is dangerous but working on web (`useNativeDriver` always false).\n // So setting same value with `value.setValue(value._value)` will trigger event listener.\n if (Platform.OS === 'web') {\n // @ts-ignore\n controlledTx.setValue(controlledTx._value);\n }\n\n offsetTx.setValue(0);\n toValueRef.current = 0;\n };\n\n stopUnfinishedSnapAnimation();\n\n resetBoundary();\n }, [controlledTx]);\n\n const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n const configWithDefaults: PagingAnimationConfig = {\n animated: true,\n ...config,\n };\n\n const currentIndex = getCurrentIndex();\n\n const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n\n const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n const { direction, isOriginatedFromGesture } = _config;\n\n if (currentIndex === 0 && direction === 'prev') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : lastIndex * itemWidth; // first position\n }\n return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n };\n\n const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n const _configWithDefaults: DirectionalPagingAnimationConfig = {\n isOriginatedFromGesture: false,\n ..._config,\n };\n\n return loop\n ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n };\n\n const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n if (index < 0 || index > lastIndex || index === currentIndex) {\n // no animation if index is invalid or equals to current index\n return 0;\n }\n\n const distance = Math.abs(currentIndex - index) * itemWidth;\n const direction = index > currentIndex ? -1 : 1;\n\n return distance * direction;\n };\n\n const toValue = type === 'directional'\n // @ts-ignore\n ? getValueByDirectionalPaging(configWithDefaults)\n // @ts-ignore\n : getValueByIndexPaging(configWithDefaults);\n\n toValueRef.current = toValue;\n\n if (configWithDefaults.animated) {\n const animation = createScrollAnimation(offsetTx, toValue);\n animationRef.current = animation;\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n } else {\n finalizeAnimation();\n }\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n ]);\n\n return {\n globalInterpolation,\n finalizeAnimation,\n startPagingAnimation,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["directions"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n (): number;\n}\n\nexport interface IndexController {\n currentIndex: number;\n getCurrentIndex: GetCurrentIndex;\n lastIndex: number;\n monitorElement: ReactElement;\n}\n\nexport interface StartPagingAnimation {\n (
|
|
1
|
+
{"version":3,"names":["directions"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n (): number;\n}\n\nexport interface IndexController {\n currentIndex: number;\n getCurrentIndex: GetCurrentIndex;\n lastIndex: number;\n monitorElement: ReactElement;\n}\n\nexport type PagingAnimationType = 'directional' | 'index';\n\nexport interface BasePagingAnimationConfig {\n animated?: boolean;\n}\n\nexport interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {\n direction: PagingDirection;\n isOriginatedFromGesture?: boolean;\n}\n\nexport interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {\n index: number;\n}\n\nexport type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;\n\nexport interface StartPagingAnimation {\n (type: PagingAnimationType, config: PagingAnimationConfig): void;\n}\n\nexport type VisibleIndexRanges = Array<[number, number]>;\n\nexport interface StoreSubscription {\n (): void;\n}\n\nexport interface ItemVisibilityStore {\n dispatch: (ranges: VisibleIndexRanges) => void;\n subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;\n removeAllListeners: () => void;\n}\n\nexport interface AutoplayController {\n pause: () => void;\n resume: () => void;\n}\n\nexport interface ScrollToOption {\n index: number;\n animated?: boolean;\n}\n\nexport interface CarouselInstance {\n /**\n * Get current visible item index.\n */\n getCurrentIndex: GetCurrentIndex;\n\n /**\n * Scroll to next visible item.\n */\n next: () => void;\n\n /**\n * Scroll to previous visible item.\n */\n prev: () => void;\n\n /**\n * Scroll to desired indexed item.\n * Invalid index is ignored.\n */\n scrollTo: (option: ScrollToOption) => void;\n}\n"],"mappings":";;;;;AAGA,MAAMA,UAAU,GAAG,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,CAAnB"}
|