@r0b0t3d/react-native-carousel 3.4.0 → 3.4.4
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/README.md +4 -1
- package/lib/commonjs/components/Carousel.js +9 -10
- package/lib/commonjs/components/Carousel.js.map +1 -1
- package/lib/commonjs/components/PageItem.js +19 -8
- package/lib/commonjs/components/PageItem.js.map +1 -1
- package/lib/commonjs/components/PaginationIndicator.js +66 -48
- package/lib/commonjs/components/PaginationIndicator.js.map +1 -1
- package/lib/module/components/Carousel.js +10 -11
- package/lib/module/components/Carousel.js.map +1 -1
- package/lib/module/components/PageItem.js +20 -9
- package/lib/module/components/PageItem.js.map +1 -1
- package/lib/module/components/PaginationIndicator.js +68 -46
- package/lib/module/components/PaginationIndicator.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Carousel.tsx +10 -9
- package/src/components/PageItem.tsx +28 -17
- package/src/components/PaginationIndicator.tsx +86 -62
- package/lib/.DS_Store +0 -0
- package/src/.DS_Store +0 -0
package/README.md
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
# react-native-carousel
|
|
2
|
+
[](https://hits.seeyoufarm.com)
|
|
3
|
+
|
|
2
4
|
|
|
5
|
+
|
|
3
6
|
## Getting started
|
|
4
7
|
|
|
5
8
|
`$ yarn add @r0b0t3d/react-native-carousel`
|
|
@@ -190,4 +193,4 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
|
|
|
190
193
|
|
|
191
194
|
## License
|
|
192
195
|
|
|
193
|
-
MIT
|
|
196
|
+
MIT
|
|
@@ -56,9 +56,9 @@ function Carousel({
|
|
|
56
56
|
}) {
|
|
57
57
|
const currentPage = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
58
58
|
const animatedScroll = (0, _reactNativeReanimated.useSharedValue)(currentPage.value * sliderWidth);
|
|
59
|
-
const freeze = (0, _reactNativeReanimated.useSharedValue)(
|
|
59
|
+
const freeze = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
60
60
|
const [isDragging, setDragging] = (0, _react.useState)(false);
|
|
61
|
-
const expectedPosition = (0,
|
|
61
|
+
const expectedPosition = (0, _reactNativeReanimated.useSharedValue)(-1);
|
|
62
62
|
const pageMapper = (0, _react.useRef)({});
|
|
63
63
|
const {
|
|
64
64
|
currentPage: animatedPage,
|
|
@@ -68,7 +68,7 @@ function Carousel({
|
|
|
68
68
|
const padding = (sliderWidth - itemWidth) / 2;
|
|
69
69
|
return firstItemAlignment === 'center' || loop ? padding : spaceHeadTail;
|
|
70
70
|
}, [sliderWidth, itemWidth, firstItemAlignment, loop, spaceHeadTail]);
|
|
71
|
-
const scrollViewRef = (0,
|
|
71
|
+
const scrollViewRef = (0, _reactNativeReanimated.useAnimatedRef)();
|
|
72
72
|
const offsets = (0, _react.useMemo)(() => {
|
|
73
73
|
return (0, _utils.generateOffsets)({
|
|
74
74
|
sliderWidth,
|
|
@@ -124,7 +124,7 @@ function Carousel({
|
|
|
124
124
|
}
|
|
125
125
|
}, [getRef, offsets]);
|
|
126
126
|
const jumpTo = (0, _react.useCallback)((page, delay = 200) => {
|
|
127
|
-
expectedPosition.
|
|
127
|
+
expectedPosition.value = page;
|
|
128
128
|
|
|
129
129
|
if (_reactNative.Platform.OS === 'android') {
|
|
130
130
|
freeze.value = true;
|
|
@@ -197,7 +197,7 @@ function Carousel({
|
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
if (pageNum !== currentPage.value) {
|
|
200
|
-
if (expectedPosition.
|
|
200
|
+
if (expectedPosition.value === pageNum) {
|
|
201
201
|
freeze.value = false;
|
|
202
202
|
}
|
|
203
203
|
|
|
@@ -293,10 +293,9 @@ function Carousel({
|
|
|
293
293
|
}
|
|
294
294
|
|
|
295
295
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
296
|
-
style:
|
|
297
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({
|
|
298
|
-
ref: scrollViewRef
|
|
299
|
-
}, scrollViewProps, {
|
|
296
|
+
style: style
|
|
297
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({}, scrollViewProps, {
|
|
298
|
+
ref: scrollViewRef,
|
|
300
299
|
style: styles.container,
|
|
301
300
|
horizontal: true,
|
|
302
301
|
disableScrollViewPanResponder: true,
|
|
@@ -306,7 +305,7 @@ function Carousel({
|
|
|
306
305
|
snapToStart: true,
|
|
307
306
|
snapToEnd: true,
|
|
308
307
|
decelerationRate: "fast",
|
|
309
|
-
scrollEventThrottle:
|
|
308
|
+
scrollEventThrottle: 4,
|
|
310
309
|
onScroll: scrollHandler,
|
|
311
310
|
bounces: false,
|
|
312
311
|
contentContainerStyle: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Carousel.tsx"],"names":["width","wWidth","Dimensions","get","Carousel","style","data","initialPage","loop","additionalPagesPerSide","autoPlay","duration","animation","sliderWidth","itemWidth","firstItemAlignment","inactiveOpacity","inactiveScale","spaceBetween","spaceHeadTail","renderItem","onPageChange","scrollViewProps","keyExtractor","currentPage","animatedScroll","value","freeze","isDragging","setDragging","expectedPosition","pageMapper","animatedPage","totalPage","horizontalPadding","padding","scrollViewRef","offsets","itemCount","length","pageItems","headItems","slice","tailItems","newItems","i","current","getActualPage","page","getRef","scrollTo","getNode","handleScrollTo","animated","x","y","jumpTo","delay","Platform","OS","setTimeout","goNext","next","goPrev","prev","snapToItem","index","console","error","pageIndex","indices","Object","keys","filter","idx","Number","map","toIndex","setCarouselHandlers","handlePageChange","actualPage","refreshPage","offset","pageNum","beginDrag","endDrag","getItemKey","item","id","scrollHandler","onScroll","event","contentOffset","onBeginDrag","_e","onEndDrag","containerStyle","paddingLeft","paddingRight","renderPage","styles","container","paddingHorizontal","StyleSheet","create","flex"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React, {\n useState,\n useRef,\n useEffect,\n useCallback,\n useMemo,\n} from 'react';\nimport { View, Dimensions, StyleSheet, Platform } from 'react-native';\nimport { useInterval } from '@r0b0t3d/react-native-hooks';\nimport Animated, {\n useSharedValue,\n useAnimatedScrollHandler,\n runOnJS,\n} from 'react-native-reanimated';\nimport type { CarouselProps } from '../types';\nimport PageItem from './PageItem';\nimport { findNearestPage, generateOffsets } from '../utils';\nimport { useCarouselContext } from './useCarouselContext';\nimport { useInternalCarouselContext } from './useInternalCarouselContext';\n\nconst { width: wWidth } = Dimensions.get('screen');\n\nfunction Carousel<TData>({\n style,\n data,\n initialPage = 0,\n loop = false,\n additionalPagesPerSide = 2,\n autoPlay = false,\n duration = 1000,\n animation,\n sliderWidth = wWidth,\n itemWidth = wWidth,\n firstItemAlignment = 'center',\n inactiveOpacity = 1,\n inactiveScale = 1,\n spaceBetween = 0,\n spaceHeadTail = 0,\n renderItem,\n onPageChange,\n scrollViewProps = {},\n keyExtractor,\n}: CarouselProps<TData>) {\n const currentPage = useSharedValue(0);\n const animatedScroll = useSharedValue(currentPage.value * sliderWidth);\n const freeze = useSharedValue(loop);\n const [isDragging, setDragging] = useState(false);\n const expectedPosition = useRef(-1);\n const pageMapper = useRef<Record<number, number>>({});\n const { currentPage: animatedPage, totalPage } = useCarouselContext();\n\n const horizontalPadding = useMemo(() => {\n const padding = (sliderWidth - itemWidth) / 2;\n return firstItemAlignment === 'center' || loop ? padding : spaceHeadTail;\n }, [sliderWidth, itemWidth, firstItemAlignment, loop, spaceHeadTail]);\n\n const scrollViewRef = useRef<any>(null);\n\n const offsets = useMemo(() => {\n return generateOffsets({\n sliderWidth,\n itemWidth,\n itemCount: data.length + (loop ? additionalPagesPerSide * 2 : 0),\n horizontalPadding,\n });\n }, [sliderWidth, itemWidth, data, horizontalPadding]);\n\n const pageItems = useMemo(() => {\n if (!data) {\n return [];\n }\n totalPage.value = data.length;\n if (loop) {\n const headItems = data.slice(\n data.length - additionalPagesPerSide,\n data.length\n );\n const tailItems = data.slice(0, additionalPagesPerSide);\n const newItems = [...headItems, ...data, ...tailItems];\n for (let i = 0; i < newItems.length; i++) {\n pageMapper.current[i] =\n (data.length - additionalPagesPerSide + i) % data.length;\n }\n return newItems;\n } else {\n for (let i = 0; i < data.length; i++) {\n pageMapper.current[i] = i;\n }\n return data;\n }\n }, [data, loop]);\n\n const getActualPage = useCallback((page: number) => {\n return pageMapper.current[page];\n }, []);\n\n const getRef = useCallback(() => {\n if (!scrollViewRef.current) return;\n if (scrollViewRef.current.scrollTo) {\n return scrollViewRef.current;\n }\n return scrollViewRef.current.getNode();\n }, []);\n\n const handleScrollTo = useCallback(\n (page: number, animated = true) => {\n if (getRef()) {\n getRef().scrollTo({ x: offsets[page], y: 0, animated });\n }\n },\n [getRef, offsets]\n );\n\n const jumpTo = useCallback(\n (page: number, delay = 200) => {\n expectedPosition.current = page;\n if (Platform.OS === 'android') {\n freeze.value = true;\n }\n setTimeout(() => {\n animatedScroll.value = offsets[page];\n handleScrollTo(page, false);\n }, delay);\n },\n [handleScrollTo, animatedScroll, freeze]\n );\n\n const goNext = useCallback(() => {\n const next = currentPage.value + 1;\n handleScrollTo(next);\n }, [handleScrollTo]);\n\n const goPrev = useCallback(() => {\n const prev = currentPage.value - 1;\n handleScrollTo(prev);\n }, [handleScrollTo]);\n\n const snapToItem = useCallback(\n (index: number, animated = true) => {\n if (index < 0 || index >= data.length) {\n console.error(`Index not valid ${index}`);\n return;\n }\n let pageIndex = index;\n if (loop) {\n const indices: number[] = Object.keys(pageMapper.current)\n .filter((idx) => pageMapper.current[Number(idx)] === index)\n .map((idx) => Number(idx));\n const toIndex = findNearestPage(currentPage.value, indices, 10);\n pageIndex = indices[toIndex];\n }\n handleScrollTo(pageIndex, animated);\n },\n [handleScrollTo]\n );\n\n const { setCarouselHandlers } = useInternalCarouselContext();\n\n useEffect(() => {\n if (setCarouselHandlers) {\n setCarouselHandlers({\n goNext,\n goPrev,\n snapToItem,\n });\n }\n }, [goNext, goPrev, snapToItem, setCarouselHandlers]);\n\n const handlePageChange = useCallback(\n (page: number) => {\n const actualPage = getActualPage(page);\n animatedPage.value = actualPage;\n if (onPageChange) {\n onPageChange(actualPage);\n }\n if (!loop) return;\n if (page === pageItems.length - 1) {\n jumpTo(additionalPagesPerSide * 2 - 1);\n } else if (page === 0) {\n jumpTo(pageItems.length - additionalPagesPerSide * 2);\n }\n },\n [onPageChange, loop, getActualPage, jumpTo, pageItems]\n );\n\n const refreshPage = useCallback(\n (offset) => {\n 'worklet';\n const pageNum = findNearestPage(offset, offsets, 20);\n if (pageNum === -1) {\n return;\n }\n if (pageNum !== currentPage.value) {\n if (expectedPosition.current === pageNum) {\n freeze.value = false;\n }\n currentPage.value = pageNum;\n runOnJS(handlePageChange)(pageNum);\n }\n },\n [isDragging, offsets, handlePageChange]\n );\n\n useInterval(\n () => {\n goNext();\n },\n !autoPlay || !loop || isDragging ? -1 : duration\n );\n\n useEffect(() => {\n if (initialPage < 0 || initialPage >= data.length) {\n console.error(`Invalid initialPage ${initialPage}`);\n return;\n }\n let pageIndex = initialPage;\n if (loop) {\n pageIndex = initialPage + additionalPagesPerSide;\n }\n if (currentPage.value !== pageIndex) {\n setTimeout(() => {\n handleScrollTo(pageIndex, false);\n freeze.value = false;\n });\n }\n }, []);\n\n const beginDrag = useCallback(() => {\n if (autoPlay) {\n setDragging(true);\n }\n }, [autoPlay]);\n\n const endDrag = useCallback(() => {\n if (autoPlay) {\n setTimeout(() => setDragging(false), 200);\n }\n }, [autoPlay]);\n\n const getItemKey = useCallback(\n (item: TData, index: number): string => {\n if (keyExtractor) {\n return `${keyExtractor(item, index)}-${index}`;\n }\n if ((item as any).id) {\n return `${(item as any).id}-${index}`;\n }\n console.error('You need implement keyExtractor');\n return '';\n },\n [keyExtractor]\n );\n\n const scrollHandler = useAnimatedScrollHandler(\n {\n onScroll: (event) => {\n animatedScroll.value = event.contentOffset.x;\n refreshPage(animatedScroll.value);\n },\n onBeginDrag: (_e) => {\n runOnJS(beginDrag)();\n },\n onEndDrag: (_e) => {\n runOnJS(endDrag)();\n },\n },\n [beginDrag, endDrag, refreshPage]\n );\n\n const containerStyle = useCallback(\n (index: number) => {\n if (firstItemAlignment === 'start') {\n return {\n paddingLeft: index === 0 ? 0 : spaceBetween / 2,\n paddingRight: index === data.length - 1 ? 0 : spaceBetween / 2,\n };\n }\n return {\n paddingLeft: spaceBetween / 2,\n paddingRight: spaceBetween / 2,\n };\n },\n [spaceBetween, firstItemAlignment]\n );\n\n function renderPage(item: TData, i: number) {\n return (\n <PageItem\n key={getItemKey(item, i)}\n containerStyle={containerStyle(i)}\n item={item}\n index={i}\n offset={offsets[i]}\n itemWidth={itemWidth}\n animatedValue={animatedScroll}\n animation={animation}\n renderItem={renderItem}\n freeze={freeze}\n inactiveOpacity={inactiveOpacity}\n inactiveScale={inactiveScale}\n />\n );\n }\n\n return (\n <View style={[style]}>\n <Animated.ScrollView\n ref={scrollViewRef}\n {...scrollViewProps}\n style={styles.container}\n horizontal\n disableScrollViewPanResponder\n disableIntervalMomentum\n showsHorizontalScrollIndicator={false}\n snapToOffsets={offsets}\n snapToStart\n snapToEnd\n decelerationRate=\"fast\"\n scrollEventThrottle={16}\n onScroll={scrollHandler}\n bounces={false}\n contentContainerStyle={{\n paddingHorizontal: horizontalPadding,\n }}\n >\n {pageItems.map(renderPage)}\n </Animated.ScrollView>\n </View>\n );\n}\n\nexport default Carousel;\n\nconst styles = StyleSheet.create({\n container: { flex: 1 },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["Carousel.tsx"],"names":["width","wWidth","Dimensions","get","Carousel","style","data","initialPage","loop","additionalPagesPerSide","autoPlay","duration","animation","sliderWidth","itemWidth","firstItemAlignment","inactiveOpacity","inactiveScale","spaceBetween","spaceHeadTail","renderItem","onPageChange","scrollViewProps","keyExtractor","currentPage","animatedScroll","value","freeze","isDragging","setDragging","expectedPosition","pageMapper","animatedPage","totalPage","horizontalPadding","padding","scrollViewRef","offsets","itemCount","length","pageItems","headItems","slice","tailItems","newItems","i","current","getActualPage","page","getRef","scrollTo","getNode","handleScrollTo","animated","x","y","jumpTo","delay","Platform","OS","setTimeout","goNext","next","goPrev","prev","snapToItem","index","console","error","pageIndex","indices","Object","keys","filter","idx","Number","map","toIndex","setCarouselHandlers","handlePageChange","actualPage","refreshPage","offset","pageNum","beginDrag","endDrag","getItemKey","item","id","scrollHandler","onScroll","event","contentOffset","onBeginDrag","_e","onEndDrag","containerStyle","paddingLeft","paddingRight","renderPage","styles","container","paddingHorizontal","StyleSheet","create","flex"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React, {\n useState,\n useRef,\n useEffect,\n useCallback,\n useMemo,\n} from 'react';\nimport { View, Dimensions, StyleSheet, Platform } from 'react-native';\nimport { useInterval } from '@r0b0t3d/react-native-hooks';\nimport Animated, {\n useSharedValue,\n useAnimatedScrollHandler,\n runOnJS,\n useAnimatedRef,\n} from 'react-native-reanimated';\nimport type { CarouselProps } from '../types';\nimport PageItem from './PageItem';\nimport { findNearestPage, generateOffsets } from '../utils';\nimport { useCarouselContext } from './useCarouselContext';\nimport { useInternalCarouselContext } from './useInternalCarouselContext';\n\nconst { width: wWidth } = Dimensions.get('screen');\n\nfunction Carousel<TData>({\n style,\n data,\n initialPage = 0,\n loop = false,\n additionalPagesPerSide = 2,\n autoPlay = false,\n duration = 1000,\n animation,\n sliderWidth = wWidth,\n itemWidth = wWidth,\n firstItemAlignment = 'center',\n inactiveOpacity = 1,\n inactiveScale = 1,\n spaceBetween = 0,\n spaceHeadTail = 0,\n renderItem,\n onPageChange,\n scrollViewProps = {},\n keyExtractor,\n}: CarouselProps<TData>) {\n const currentPage = useSharedValue(0);\n const animatedScroll = useSharedValue(currentPage.value * sliderWidth);\n const freeze = useSharedValue(false);\n const [isDragging, setDragging] = useState(false);\n const expectedPosition = useSharedValue(-1);\n const pageMapper = useRef<Record<number, number>>({});\n const { currentPage: animatedPage, totalPage } = useCarouselContext();\n\n const horizontalPadding = useMemo(() => {\n const padding = (sliderWidth - itemWidth) / 2;\n return firstItemAlignment === 'center' || loop ? padding : spaceHeadTail;\n }, [sliderWidth, itemWidth, firstItemAlignment, loop, spaceHeadTail]);\n\n const scrollViewRef = useAnimatedRef<any>();\n\n const offsets = useMemo(() => {\n return generateOffsets({\n sliderWidth,\n itemWidth,\n itemCount: data.length + (loop ? additionalPagesPerSide * 2 : 0),\n horizontalPadding,\n });\n }, [sliderWidth, itemWidth, data, horizontalPadding]);\n\n const pageItems = useMemo(() => {\n if (!data) {\n return [];\n }\n totalPage.value = data.length;\n if (loop) {\n const headItems = data.slice(\n data.length - additionalPagesPerSide,\n data.length\n );\n const tailItems = data.slice(0, additionalPagesPerSide);\n const newItems = [...headItems, ...data, ...tailItems];\n for (let i = 0; i < newItems.length; i++) {\n pageMapper.current[i] =\n (data.length - additionalPagesPerSide + i) % data.length;\n }\n return newItems;\n } else {\n for (let i = 0; i < data.length; i++) {\n pageMapper.current[i] = i;\n }\n return data;\n }\n }, [data, loop]);\n\n const getActualPage = useCallback((page: number) => {\n return pageMapper.current[page];\n }, []);\n\n const getRef = useCallback(() => {\n if (!scrollViewRef.current) return;\n if (scrollViewRef.current.scrollTo) {\n return scrollViewRef.current;\n }\n return scrollViewRef.current.getNode();\n }, []);\n\n const handleScrollTo = useCallback(\n (page: number, animated = true) => {\n if (getRef()) {\n getRef().scrollTo({ x: offsets[page], y: 0, animated });\n }\n },\n [getRef, offsets]\n );\n\n const jumpTo = useCallback(\n (page: number, delay = 200) => {\n expectedPosition.value = page;\n if (Platform.OS === 'android') {\n freeze.value = true;\n }\n setTimeout(() => {\n animatedScroll.value = offsets[page];\n handleScrollTo(page, false);\n }, delay);\n },\n [handleScrollTo, animatedScroll, freeze]\n );\n\n const goNext = useCallback(() => {\n const next = currentPage.value + 1;\n handleScrollTo(next);\n }, [handleScrollTo]);\n\n const goPrev = useCallback(() => {\n const prev = currentPage.value - 1;\n handleScrollTo(prev);\n }, [handleScrollTo]);\n\n const snapToItem = useCallback(\n (index: number, animated = true) => {\n if (index < 0 || index >= data.length) {\n console.error(`Index not valid ${index}`);\n return;\n }\n let pageIndex = index;\n if (loop) {\n const indices: number[] = Object.keys(pageMapper.current)\n .filter((idx) => pageMapper.current[Number(idx)] === index)\n .map((idx) => Number(idx));\n const toIndex = findNearestPage(currentPage.value, indices, 10);\n pageIndex = indices[toIndex];\n }\n handleScrollTo(pageIndex, animated);\n },\n [handleScrollTo]\n );\n\n const { setCarouselHandlers } = useInternalCarouselContext();\n\n useEffect(() => {\n if (setCarouselHandlers) {\n setCarouselHandlers({\n goNext,\n goPrev,\n snapToItem,\n });\n }\n }, [goNext, goPrev, snapToItem, setCarouselHandlers]);\n\n const handlePageChange = useCallback(\n (page: number) => {\n const actualPage = getActualPage(page);\n animatedPage.value = actualPage;\n if (onPageChange) {\n onPageChange(actualPage);\n }\n if (!loop) return;\n if (page === pageItems.length - 1) {\n jumpTo(additionalPagesPerSide * 2 - 1);\n } else if (page === 0) {\n jumpTo(pageItems.length - additionalPagesPerSide * 2);\n }\n },\n [onPageChange, loop, getActualPage, jumpTo, pageItems]\n );\n\n const refreshPage = useCallback(\n (offset) => {\n 'worklet';\n const pageNum = findNearestPage(offset, offsets, 20); \n if (pageNum === -1) {\n return;\n }\n if (pageNum !== currentPage.value) {\n if (expectedPosition.value === pageNum) {\n freeze.value = false;\n }\n currentPage.value = pageNum;\n runOnJS(handlePageChange)(pageNum);\n }\n },\n [isDragging, offsets, handlePageChange]\n );\n\n useInterval(\n () => {\n goNext();\n },\n !autoPlay || !loop || isDragging ? -1 : duration\n );\n\n useEffect(() => {\n if (initialPage < 0 || initialPage >= data.length) {\n console.error(`Invalid initialPage ${initialPage}`);\n return;\n }\n let pageIndex = initialPage;\n if (loop) {\n pageIndex = initialPage + additionalPagesPerSide;\n }\n if (currentPage.value !== pageIndex) {\n setTimeout(() => {\n handleScrollTo(pageIndex, false);\n freeze.value = false;\n });\n }\n }, []);\n\n const beginDrag = useCallback(() => {\n if (autoPlay) {\n setDragging(true);\n }\n }, [autoPlay]);\n\n const endDrag = useCallback(() => {\n if (autoPlay) {\n setTimeout(() => setDragging(false), 200);\n }\n }, [autoPlay]);\n\n const getItemKey = useCallback(\n (item: TData, index: number): string => {\n if (keyExtractor) {\n return `${keyExtractor(item, index)}-${index}`;\n }\n if ((item as any).id) {\n return `${(item as any).id}-${index}`;\n }\n console.error('You need implement keyExtractor');\n return '';\n },\n [keyExtractor]\n );\n\n const scrollHandler = useAnimatedScrollHandler(\n {\n onScroll: (event) => {\n animatedScroll.value = event.contentOffset.x;\n refreshPage(animatedScroll.value);\n },\n onBeginDrag: (_e) => {\n runOnJS(beginDrag)();\n },\n onEndDrag: (_e) => {\n runOnJS(endDrag)();\n },\n },\n [beginDrag, endDrag, refreshPage]\n );\n\n const containerStyle = useCallback(\n (index: number) => {\n if (firstItemAlignment === 'start') {\n return {\n paddingLeft: index === 0 ? 0 : spaceBetween / 2,\n paddingRight: index === data.length - 1 ? 0 : spaceBetween / 2,\n };\n }\n return {\n paddingLeft: spaceBetween / 2,\n paddingRight: spaceBetween / 2,\n };\n },\n [spaceBetween, firstItemAlignment]\n );\n\n function renderPage(item: TData, i: number) {\n return (\n <PageItem\n key={getItemKey(item, i)}\n containerStyle={containerStyle(i)}\n item={item}\n index={i}\n offset={offsets[i]}\n itemWidth={itemWidth}\n animatedValue={animatedScroll}\n animation={animation}\n renderItem={renderItem}\n freeze={freeze}\n inactiveOpacity={inactiveOpacity}\n inactiveScale={inactiveScale}\n />\n );\n }\n\n return (\n <View style={style}>\n <Animated.ScrollView\n {...scrollViewProps}\n ref={scrollViewRef}\n style={styles.container}\n horizontal\n disableScrollViewPanResponder\n disableIntervalMomentum\n showsHorizontalScrollIndicator={false}\n snapToOffsets={offsets}\n snapToStart\n snapToEnd\n decelerationRate=\"fast\"\n scrollEventThrottle={4}\n onScroll={scrollHandler}\n bounces={false}\n contentContainerStyle={{\n paddingHorizontal: horizontalPadding,\n }}\n >\n {pageItems.map(renderPage)}\n </Animated.ScrollView>\n </View>\n );\n}\n\nexport default Carousel;\n\nconst styles = StyleSheet.create({\n container: { flex: 1 },\n});\n"]}
|
|
@@ -31,27 +31,38 @@ function PageItem({
|
|
|
31
31
|
inactiveScale,
|
|
32
32
|
containerStyle
|
|
33
33
|
}) {
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
const scale = (0, _reactNativeReanimated.useDerivedValue)(() => {
|
|
35
|
+
const inputRange = [offset - itemWidth, offset, offset + itemWidth];
|
|
36
|
+
const scaleOutputRange = [inactiveScale, 1, inactiveScale];
|
|
37
|
+
return (0, _reactNativeReanimated.interpolate)(animatedValue.value, inputRange, scaleOutputRange);
|
|
38
|
+
}, []);
|
|
39
|
+
const translateX = (0, _reactNativeReanimated.useDerivedValue)(() => {
|
|
36
40
|
const inputRange = [offset - itemWidth, offset, offset + itemWidth];
|
|
37
|
-
const scaleOutputRange = freeze.value ? [1, 1, 1] : [inactiveScale, 1, inactiveScale];
|
|
38
|
-
const opacityOutputRange = freeze.value ? [1, 1, 1] : [inactiveOpacity, 1, inactiveOpacity];
|
|
39
41
|
const parallaxOutputRange = freeze.value ? [0, 0, 0] : [-itemWidth / 2, 0, itemWidth / 4];
|
|
42
|
+
return (0, _reactNativeReanimated.interpolate)(animatedValue.value, inputRange, parallaxOutputRange);
|
|
43
|
+
}, []);
|
|
44
|
+
const opacity = (0, _reactNativeReanimated.useDerivedValue)(() => {
|
|
45
|
+
const inputRange = [offset - itemWidth, offset, offset + itemWidth];
|
|
46
|
+
const opacityOutputRange = freeze.value ? [1, 1, 1] : [inactiveOpacity, 1, inactiveOpacity];
|
|
47
|
+
return (0, _reactNativeReanimated.interpolate)(animatedValue.value, inputRange, opacityOutputRange);
|
|
48
|
+
}, []); // @ts-ignore
|
|
49
|
+
|
|
50
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
40
51
|
const transform = [{
|
|
41
|
-
scale:
|
|
52
|
+
scale: scale.value
|
|
42
53
|
}];
|
|
43
54
|
|
|
44
55
|
if (animation === 'parallax') {
|
|
45
56
|
transform.push({
|
|
46
|
-
translateX:
|
|
57
|
+
translateX: translateX.value
|
|
47
58
|
});
|
|
48
59
|
}
|
|
49
60
|
|
|
50
61
|
return {
|
|
51
|
-
opacity:
|
|
62
|
+
opacity: opacity.value,
|
|
52
63
|
transform
|
|
53
64
|
};
|
|
54
|
-
}, [
|
|
65
|
+
}, []);
|
|
55
66
|
|
|
56
67
|
function renderContent() {
|
|
57
68
|
if (renderItem) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PageItem.tsx"],"names":["PageItem","item","index","offset","renderItem","animatedValue","animation","freeze","itemWidth","inactiveOpacity","inactiveScale","containerStyle","
|
|
1
|
+
{"version":3,"sources":["PageItem.tsx"],"names":["PageItem","item","index","offset","renderItem","animatedValue","animation","freeze","itemWidth","inactiveOpacity","inactiveScale","containerStyle","scale","inputRange","scaleOutputRange","value","translateX","parallaxOutputRange","opacity","opacityOutputRange","animatedStyle","transform","push","renderContent","scrollPosition","source","StyleSheet","absoluteFillObject","height","undefined","width","console","error","overflow","flex"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React from 'react';\nimport { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport type { CarouselProps } from '../types';\n\ntype Props<TData> = {\n item: TData;\n index: number;\n offset: number;\n renderItem: CarouselProps['renderItem'];\n animatedValue: Animated.SharedValue<number>;\n animation?: 'parallax';\n freeze: Animated.SharedValue<boolean>;\n itemWidth: number;\n inactiveOpacity: number;\n inactiveScale: number;\n containerStyle: StyleProp<ViewStyle>;\n};\n\nexport default function PageItem<TData = any>({\n item,\n index,\n offset,\n renderItem,\n animatedValue,\n animation,\n freeze,\n itemWidth,\n inactiveOpacity,\n inactiveScale,\n containerStyle,\n}: Props<TData>) {\n const scale = useDerivedValue(() => {\n const inputRange = [offset - itemWidth, offset, offset + itemWidth];\n const scaleOutputRange = [inactiveScale, 1, inactiveScale];\n return interpolate(animatedValue.value, inputRange, scaleOutputRange);\n }, []);\n\n const translateX = useDerivedValue(() => {\n const inputRange = [offset - itemWidth, offset, offset + itemWidth];\n const parallaxOutputRange = freeze.value\n ? [0, 0, 0]\n : [-itemWidth / 2, 0, itemWidth / 4];\n\n return interpolate(animatedValue.value, inputRange, parallaxOutputRange);\n }, []);\n\n const opacity = useDerivedValue(() => {\n const inputRange = [offset - itemWidth, offset, offset + itemWidth];\n const opacityOutputRange = freeze.value\n ? [1, 1, 1]\n : [inactiveOpacity, 1, inactiveOpacity];\n return interpolate(animatedValue.value, inputRange, opacityOutputRange);\n }, []);\n // @ts-ignore\n const animatedStyle = useAnimatedStyle(() => {\n const transform: ViewStyle['transform'] = [\n {\n scale: scale.value,\n },\n ];\n if (animation === 'parallax') {\n transform.push({\n translateX: translateX.value,\n });\n }\n return {\n opacity: opacity.value,\n transform,\n };\n }, []);\n\n function renderContent() {\n if (renderItem) {\n return renderItem(\n { item, index },\n { scrollPosition: animatedValue, offset }\n );\n }\n if (typeof item === 'object' && (item as any).source) {\n return (\n <Image\n source={(item as any).source}\n style={{\n ...StyleSheet.absoluteFillObject,\n height: undefined,\n width: undefined,\n }}\n resizeMode=\"cover\"\n />\n );\n }\n console.error('You need implement renderItem');\n return null;\n }\n\n return (\n <View\n collapsable={false}\n style={[\n {\n width: itemWidth,\n overflow: 'hidden',\n },\n containerStyle,\n ]}\n >\n <Animated.View style={[{ flex: 1 }, animatedStyle]}>\n {renderContent()}\n </Animated.View>\n </View>\n );\n}\n"]}
|
|
@@ -25,21 +25,6 @@ const defaultIndicatorConfigs = {
|
|
|
25
25
|
indicatorSelectedWidth: 6,
|
|
26
26
|
spaceBetween: 3
|
|
27
27
|
};
|
|
28
|
-
|
|
29
|
-
const styles = _reactNative.StyleSheet.create({
|
|
30
|
-
container: {
|
|
31
|
-
flexDirection: 'row',
|
|
32
|
-
alignItems: 'center'
|
|
33
|
-
},
|
|
34
|
-
dotContainer: {
|
|
35
|
-
alignItems: 'center',
|
|
36
|
-
justifyContent: 'center'
|
|
37
|
-
},
|
|
38
|
-
dotSelectedStyle: {
|
|
39
|
-
position: 'absolute'
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
|
|
43
28
|
const defaultSpringConfig = {
|
|
44
29
|
stiffness: 1000,
|
|
45
30
|
damping: 500,
|
|
@@ -50,15 +35,15 @@ const defaultSpringConfig = {
|
|
|
50
35
|
};
|
|
51
36
|
|
|
52
37
|
function PaginationIndicator({
|
|
53
|
-
// totalPage,
|
|
54
38
|
containerStyle,
|
|
55
39
|
indicatorStyle,
|
|
56
40
|
activeIndicatorStyle,
|
|
57
41
|
indicatorConfigs
|
|
58
42
|
}) {
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
43
|
+
const {
|
|
44
|
+
currentPage,
|
|
45
|
+
totalPage
|
|
46
|
+
} = (0, _useCarouselContext.useCarouselContext)();
|
|
62
47
|
const configs = (0, _react.useMemo)(() => {
|
|
63
48
|
return { ...defaultIndicatorConfigs,
|
|
64
49
|
...indicatorConfigs
|
|
@@ -74,7 +59,8 @@ function PaginationIndicator({
|
|
|
74
59
|
}]
|
|
75
60
|
};
|
|
76
61
|
}, []);
|
|
77
|
-
|
|
62
|
+
|
|
63
|
+
function renderItem(pageNumber) {
|
|
78
64
|
// @ts-ignore
|
|
79
65
|
if (activeIndicatorStyle !== null && activeIndicatorStyle !== void 0 && activeIndicatorStyle.width) {
|
|
80
66
|
console.error('Do not use activeIndicatorStyle: { width }. Please use indicatorConfigs: { indicatorSelectedWidth } instead');
|
|
@@ -85,37 +71,19 @@ function PaginationIndicator({
|
|
|
85
71
|
console.error('Do not use indicatorStyle: { width }. Please use indicatorConfigs: { indicatorWidth } instead');
|
|
86
72
|
}
|
|
87
73
|
|
|
88
|
-
|
|
89
|
-
width: configs.indicatorSelectedWidth,
|
|
90
|
-
height: configs.indicatorWidth,
|
|
91
|
-
marginEnd: configs.spaceBetween
|
|
92
|
-
}, activeIndicatorStyle, {
|
|
93
|
-
// Disable backgroundColor in activeIndicatorStyle
|
|
94
|
-
backgroundColor: undefined
|
|
95
|
-
}]);
|
|
96
|
-
|
|
97
|
-
const dotStyle = _reactNative.StyleSheet.flatten([{
|
|
98
|
-
width: configs.indicatorWidth,
|
|
99
|
-
height: configs.indicatorWidth,
|
|
100
|
-
borderRadius: configs.indicatorWidth / 2,
|
|
101
|
-
backgroundColor: configs.indicatorColor
|
|
102
|
-
}, indicatorStyle]);
|
|
103
|
-
|
|
104
|
-
const aStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
105
|
-
return {
|
|
106
|
-
width: (0, _reactNativeReanimated.withSpring)(currentPage.value === pageNumber ? configs.indicatorSelectedWidth : configs.indicatorWidth, defaultSpringConfig)
|
|
107
|
-
};
|
|
108
|
-
}, []);
|
|
109
|
-
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(IndicatorItem, {
|
|
110
75
|
key: `index${pageNumber}`,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
76
|
+
currentPage: currentPage,
|
|
77
|
+
pageNumber: pageNumber,
|
|
78
|
+
configs: configs,
|
|
79
|
+
indicatorStyle: indicatorStyle,
|
|
80
|
+
activeIndicatorStyle: activeIndicatorStyle
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
|
|
116
84
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
117
85
|
style: [styles.container, containerStyle]
|
|
118
|
-
}, [...Array(
|
|
86
|
+
}, [...Array(totalPage.value).keys()].map(renderItem), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
119
87
|
style: [styles.dotSelectedStyle, {
|
|
120
88
|
width: configs.indicatorSelectedWidth,
|
|
121
89
|
height: configs.indicatorWidth,
|
|
@@ -124,4 +92,54 @@ function PaginationIndicator({
|
|
|
124
92
|
}, activeIndicatorStyle, animatedStyle]
|
|
125
93
|
}));
|
|
126
94
|
}
|
|
95
|
+
|
|
96
|
+
function IndicatorItem({
|
|
97
|
+
currentPage,
|
|
98
|
+
pageNumber,
|
|
99
|
+
configs,
|
|
100
|
+
activeIndicatorStyle,
|
|
101
|
+
indicatorStyle
|
|
102
|
+
}) {
|
|
103
|
+
const dotContainerStyle = (0, _react.useMemo)(() => [styles.dotContainer, {
|
|
104
|
+
width: configs.indicatorSelectedWidth,
|
|
105
|
+
height: configs.indicatorWidth,
|
|
106
|
+
marginEnd: configs.spaceBetween
|
|
107
|
+
}, activeIndicatorStyle, {
|
|
108
|
+
// Disable backgroundColor in activeIndicatorStyle
|
|
109
|
+
backgroundColor: undefined
|
|
110
|
+
}], [activeIndicatorStyle]);
|
|
111
|
+
const dotStyle = (0, _react.useMemo)(() => [{
|
|
112
|
+
width: configs.indicatorWidth,
|
|
113
|
+
height: configs.indicatorWidth,
|
|
114
|
+
borderRadius: configs.indicatorWidth / 2,
|
|
115
|
+
backgroundColor: configs.indicatorColor
|
|
116
|
+
}, indicatorStyle], [indicatorStyle]);
|
|
117
|
+
const animatedWidth = (0, _reactNativeReanimated.useDerivedValue)(() => {
|
|
118
|
+
return (0, _reactNativeReanimated.withSpring)(currentPage.value === pageNumber ? configs.indicatorSelectedWidth : configs.indicatorWidth, defaultSpringConfig);
|
|
119
|
+
});
|
|
120
|
+
const aStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
121
|
+
return {
|
|
122
|
+
width: animatedWidth.value
|
|
123
|
+
};
|
|
124
|
+
}, []);
|
|
125
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
126
|
+
style: [dotContainerStyle, aStyle]
|
|
127
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
128
|
+
style: dotStyle
|
|
129
|
+
}));
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
const styles = _reactNative.StyleSheet.create({
|
|
133
|
+
container: {
|
|
134
|
+
flexDirection: 'row',
|
|
135
|
+
alignItems: 'center'
|
|
136
|
+
},
|
|
137
|
+
dotContainer: {
|
|
138
|
+
alignItems: 'center',
|
|
139
|
+
justifyContent: 'center'
|
|
140
|
+
},
|
|
141
|
+
dotSelectedStyle: {
|
|
142
|
+
position: 'absolute'
|
|
143
|
+
}
|
|
144
|
+
});
|
|
127
145
|
//# sourceMappingURL=PaginationIndicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PaginationIndicator.tsx"],"names":["defaultIndicatorConfigs","indicatorColor","indicatorWidth","indicatorSelectedColor","indicatorSelectedWidth","spaceBetween","
|
|
1
|
+
{"version":3,"sources":["PaginationIndicator.tsx"],"names":["defaultIndicatorConfigs","indicatorColor","indicatorWidth","indicatorSelectedColor","indicatorSelectedWidth","spaceBetween","defaultSpringConfig","stiffness","damping","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","PaginationIndicator","containerStyle","indicatorStyle","activeIndicatorStyle","indicatorConfigs","currentPage","totalPage","configs","translateX","value","animatedStyle","transform","renderItem","pageNumber","width","console","error","styles","container","Array","keys","map","dotSelectedStyle","height","borderRadius","backgroundColor","IndicatorItem","dotContainerStyle","dotContainer","marginEnd","undefined","dotStyle","animatedWidth","aStyle","StyleSheet","create","flexDirection","alignItems","justifyContent","position"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAMA;;;;;;AATA;AAWA,MAAMA,uBAAyC,GAAG;AAChDC,EAAAA,cAAc,EAAE,MADgC;AAEhDC,EAAAA,cAAc,EAAE,CAFgC;AAGhDC,EAAAA,sBAAsB,EAAE,MAHwB;AAIhDC,EAAAA,sBAAsB,EAAE,CAJwB;AAKhDC,EAAAA,YAAY,EAAE;AALkC,CAAlD;AAQA,MAAMC,mBAAmB,GAAG;AAC1BC,EAAAA,SAAS,EAAE,IADe;AAE1BC,EAAAA,OAAO,EAAE,GAFiB;AAG1BC,EAAAA,IAAI,EAAE,CAHoB;AAI1BC,EAAAA,iBAAiB,EAAE,IAJO;AAK1BC,EAAAA,yBAAyB,EAAE,IALD;AAM1BC,EAAAA,kBAAkB,EAAE;AANM,CAA5B;;AASe,SAASC,mBAAT,CAA6B;AAC1CC,EAAAA,cAD0C;AAE1CC,EAAAA,cAF0C;AAG1CC,EAAAA,oBAH0C;AAI1CC,EAAAA;AAJ0C,CAA7B,EAKK;AAClB,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAA6B,6CAAnC;AAEA,QAAMC,OAAO,GAAG,oBAAQ,MAAM;AAC5B,WAAO,EACL,GAAGpB,uBADE;AAEL,SAAGiB;AAFE,KAAP;AAID,GALe,EAKb,CAACA,gBAAD,CALa,CAAhB;AAOA,QAAMI,UAAU,GAAG,4CAAgB,MAAM;AACvC,WAAO,uCACLH,WAAW,CAACI,KAAZ,IAAqBF,OAAO,CAAClB,cAAR,GAA0BkB,OAAO,CAACf,YAAvD,CADK,EAELC,mBAFK,CAAP;AAID,GALkB,EAKhB,EALgB,CAAnB;AAOA,QAAMiB,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAE,CACT;AACEH,QAAAA,UAAU,EAAEA,UAAU,CAACC;AADzB,OADS;AADN,KAAP;AAOD,GARqB,EAQnB,EARmB,CAAtB;;AAUA,WAASG,UAAT,CAAoBC,UAApB,EAAwC;AACtC;AACA,QAAIV,oBAAJ,aAAIA,oBAAJ,eAAIA,oBAAoB,CAAEW,KAA1B,EAAiC;AAC/BC,MAAAA,OAAO,CAACC,KAAR,CACE,6GADF;AAGD,KANqC,CAOtC;;;AACA,QAAId,cAAJ,aAAIA,cAAJ,eAAIA,cAAc,CAAEY,KAApB,EAA2B;AACzBC,MAAAA,OAAO,CAACC,KAAR,CACE,+FADF;AAGD;;AACD,wBACE,6BAAC,aAAD;AACE,MAAA,GAAG,EAAG,QAAOH,UAAW,EAD1B;AAEE,MAAA,WAAW,EAAER,WAFf;AAGE,MAAA,UAAU,EAAEQ,UAHd;AAIE,MAAA,OAAO,EAAEN,OAJX;AAKE,MAAA,cAAc,EAAEL,cALlB;AAME,MAAA,oBAAoB,EAAEC;AANxB,MADF;AAUD;;AAED,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACc,MAAM,CAACC,SAAR,EAAmBjB,cAAnB;AAAb,KACG,CAAC,GAAGkB,KAAK,CAACb,SAAS,CAACG,KAAX,CAAL,CAAuBW,IAAvB,EAAJ,EAAmCC,GAAnC,CAAuCT,UAAvC,CADH,eAEE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACLK,MAAM,CAACK,gBADF,EAEL;AACER,MAAAA,KAAK,EAAEP,OAAO,CAAChB,sBADjB;AAEEgC,MAAAA,MAAM,EAAEhB,OAAO,CAAClB,cAFlB;AAGEmC,MAAAA,YAAY,EAAEjB,OAAO,CAAClB,cAAR,GAA0B,CAH1C;AAIEoC,MAAAA,eAAe,EAAElB,OAAO,CAACjB;AAJ3B,KAFK,EAQLa,oBARK,EASLO,aATK;AADT,IAFF,CADF;AAkBD;;AAED,SAASgB,aAAT,CAAuB;AACrBrB,EAAAA,WADqB;AAErBQ,EAAAA,UAFqB;AAGrBN,EAAAA,OAHqB;AAIrBJ,EAAAA,oBAJqB;AAKrBD,EAAAA;AALqB,CAAvB,EAYG;AACD,QAAMyB,iBAAuC,GAAG,oBAAQ,MAAK,CAC3DV,MAAM,CAACW,YADoD,EAE3D;AACEd,IAAAA,KAAK,EAAEP,OAAO,CAAChB,sBADjB;AAEEgC,IAAAA,MAAM,EAAEhB,OAAO,CAAClB,cAFlB;AAGEwC,IAAAA,SAAS,EAAEtB,OAAO,CAACf;AAHrB,GAF2D,EAO3DW,oBAP2D,EAQ3D;AACE;AACAsB,IAAAA,eAAe,EAAEK;AAFnB,GAR2D,CAAb,EAY7C,CAAC3B,oBAAD,CAZ6C,CAAhD;AAcA,QAAM4B,QAA8B,GAAG,oBAAQ,MAAM,CACnD;AACEjB,IAAAA,KAAK,EAAEP,OAAO,CAAClB,cADjB;AAEEkC,IAAAA,MAAM,EAAEhB,OAAO,CAAClB,cAFlB;AAGEmC,IAAAA,YAAY,EAAEjB,OAAO,CAAClB,cAAR,GAA0B,CAH1C;AAIEoC,IAAAA,eAAe,EAAElB,OAAO,CAACnB;AAJ3B,GADmD,EAOnDc,cAPmD,CAAd,EAQpC,CAACA,cAAD,CARoC,CAAvC;AAUA,QAAM8B,aAAa,GAAG,4CAAgB,MAAM;AAC1C,WAAO,uCACL3B,WAAW,CAACI,KAAZ,KAAsBI,UAAtB,GACIN,OAAO,CAAChB,sBADZ,GAEIgB,OAAO,CAAClB,cAHP,EAILI,mBAJK,CAAP;AAMD,GAPqB,CAAtB;AASA,QAAMwC,MAAM,GAAG,6CAAiB,MAAM;AACpC,WAAO;AACLnB,MAAAA,KAAK,EAAEkB,aAAa,CAACvB;AADhB,KAAP;AAGD,GAJc,EAIZ,EAJY,CAAf;AAMA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACkB,iBAAD,EAAoBM,MAApB;AAAtB,kBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEF;AAAb,IADF,CADF;AAKD;;AAED,MAAMd,MAAM,GAAGiB,wBAAWC,MAAX,CAAkB;AAC/BjB,EAAAA,SAAS,EAAE;AACTkB,IAAAA,aAAa,EAAE,KADN;AAETC,IAAAA,UAAU,EAAE;AAFH,GADoB;AAK/BT,EAAAA,YAAY,EAAE;AACZS,IAAAA,UAAU,EAAE,QADA;AAEZC,IAAAA,cAAc,EAAE;AAFJ,GALiB;AAS/BhB,EAAAA,gBAAgB,EAAE;AAChBiB,IAAAA,QAAQ,EAAE;AADM;AATa,CAAlB,CAAf","sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React, { useMemo } from 'react';\nimport { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';\nimport Animated, {\n useAnimatedStyle,\n useDerivedValue,\n withSpring,\n} from 'react-native-reanimated';\nimport type { IndicatorConfigs, PaginationProps } from '../types';\nimport { useCarouselContext } from './useCarouselContext';\n\nconst defaultIndicatorConfigs: IndicatorConfigs = {\n indicatorColor: 'gray',\n indicatorWidth: 6,\n indicatorSelectedColor: 'blue',\n indicatorSelectedWidth: 6,\n spaceBetween: 3,\n};\n\nconst defaultSpringConfig = {\n stiffness: 1000,\n damping: 500,\n mass: 3,\n overshootClamping: true,\n restDisplacementThreshold: 0.01,\n restSpeedThreshold: 0.01,\n};\n\nexport default function PaginationIndicator({\n containerStyle,\n indicatorStyle,\n activeIndicatorStyle,\n indicatorConfigs,\n}: PaginationProps) {\n const { currentPage, totalPage } = useCarouselContext();\n\n const configs = useMemo(() => {\n return {\n ...defaultIndicatorConfigs,\n ...indicatorConfigs,\n };\n }, [indicatorConfigs]);\n\n const translateX = useDerivedValue(() => {\n return withSpring(\n currentPage.value * (configs.indicatorWidth! + configs.spaceBetween!),\n defaultSpringConfig\n );\n }, []);\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n transform: [\n {\n translateX: translateX.value,\n },\n ],\n };\n }, []);\n\n function renderItem(pageNumber: number) {\n // @ts-ignore\n if (activeIndicatorStyle?.width) {\n console.error(\n 'Do not use activeIndicatorStyle: { width }. Please use indicatorConfigs: { indicatorSelectedWidth } instead'\n );\n }\n // @ts-ignore\n if (indicatorStyle?.width) {\n console.error(\n 'Do not use indicatorStyle: { width }. Please use indicatorConfigs: { indicatorWidth } instead'\n );\n }\n return (\n <IndicatorItem\n key={`index${pageNumber}`}\n currentPage={currentPage}\n pageNumber={pageNumber}\n configs={configs}\n indicatorStyle={indicatorStyle}\n activeIndicatorStyle={activeIndicatorStyle}\n />\n );\n }\n\n return (\n <View style={[styles.container, containerStyle]}>\n {[...Array(totalPage.value).keys()].map(renderItem)}\n <Animated.View\n style={[\n styles.dotSelectedStyle,\n {\n width: configs.indicatorSelectedWidth,\n height: configs.indicatorWidth,\n borderRadius: configs.indicatorWidth! / 2,\n backgroundColor: configs.indicatorSelectedColor,\n },\n activeIndicatorStyle,\n animatedStyle,\n ]}\n />\n </View>\n );\n}\n\nfunction IndicatorItem({\n currentPage,\n pageNumber,\n configs,\n activeIndicatorStyle,\n indicatorStyle,\n}: {\n currentPage: Animated.SharedValue<number>;\n pageNumber: number;\n configs: IndicatorConfigs;\n activeIndicatorStyle?: StyleProp<ViewStyle>;\n indicatorStyle?: StyleProp<ViewStyle>;\n}) {\n const dotContainerStyle: StyleProp<ViewStyle> = useMemo(()=> [\n styles.dotContainer,\n {\n width: configs.indicatorSelectedWidth,\n height: configs.indicatorWidth,\n marginEnd: configs.spaceBetween,\n },\n activeIndicatorStyle,\n {\n // Disable backgroundColor in activeIndicatorStyle\n backgroundColor: undefined,\n },\n ], [activeIndicatorStyle]);\n\n const dotStyle: StyleProp<ViewStyle> = useMemo(() => [\n {\n width: configs.indicatorWidth,\n height: configs.indicatorWidth,\n borderRadius: configs.indicatorWidth! / 2,\n backgroundColor: configs.indicatorColor,\n },\n indicatorStyle,\n ], [indicatorStyle]);\n\n const animatedWidth = useDerivedValue(() => {\n return withSpring(\n currentPage.value === pageNumber\n ? configs.indicatorSelectedWidth!\n : configs.indicatorWidth!,\n defaultSpringConfig\n );\n });\n\n const aStyle = useAnimatedStyle(() => {\n return {\n width: animatedWidth.value,\n };\n }, []);\n\n return (\n <Animated.View style={[dotContainerStyle, aStyle]}>\n <View style={dotStyle} />\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n dotContainer: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n dotSelectedStyle: {\n position: 'absolute',\n },\n});"]}
|
|
@@ -4,7 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
4
4
|
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
5
5
|
import { View, Dimensions, StyleSheet, Platform } from 'react-native';
|
|
6
6
|
import { useInterval } from '@r0b0t3d/react-native-hooks';
|
|
7
|
-
import Animated, { useSharedValue, useAnimatedScrollHandler, runOnJS } from 'react-native-reanimated';
|
|
7
|
+
import Animated, { useSharedValue, useAnimatedScrollHandler, runOnJS, useAnimatedRef } from 'react-native-reanimated';
|
|
8
8
|
import PageItem from './PageItem';
|
|
9
9
|
import { findNearestPage, generateOffsets } from '../utils';
|
|
10
10
|
import { useCarouselContext } from './useCarouselContext';
|
|
@@ -36,9 +36,9 @@ function Carousel({
|
|
|
36
36
|
}) {
|
|
37
37
|
const currentPage = useSharedValue(0);
|
|
38
38
|
const animatedScroll = useSharedValue(currentPage.value * sliderWidth);
|
|
39
|
-
const freeze = useSharedValue(
|
|
39
|
+
const freeze = useSharedValue(false);
|
|
40
40
|
const [isDragging, setDragging] = useState(false);
|
|
41
|
-
const expectedPosition =
|
|
41
|
+
const expectedPosition = useSharedValue(-1);
|
|
42
42
|
const pageMapper = useRef({});
|
|
43
43
|
const {
|
|
44
44
|
currentPage: animatedPage,
|
|
@@ -48,7 +48,7 @@ function Carousel({
|
|
|
48
48
|
const padding = (sliderWidth - itemWidth) / 2;
|
|
49
49
|
return firstItemAlignment === 'center' || loop ? padding : spaceHeadTail;
|
|
50
50
|
}, [sliderWidth, itemWidth, firstItemAlignment, loop, spaceHeadTail]);
|
|
51
|
-
const scrollViewRef =
|
|
51
|
+
const scrollViewRef = useAnimatedRef();
|
|
52
52
|
const offsets = useMemo(() => {
|
|
53
53
|
return generateOffsets({
|
|
54
54
|
sliderWidth,
|
|
@@ -104,7 +104,7 @@ function Carousel({
|
|
|
104
104
|
}
|
|
105
105
|
}, [getRef, offsets]);
|
|
106
106
|
const jumpTo = useCallback((page, delay = 200) => {
|
|
107
|
-
expectedPosition.
|
|
107
|
+
expectedPosition.value = page;
|
|
108
108
|
|
|
109
109
|
if (Platform.OS === 'android') {
|
|
110
110
|
freeze.value = true;
|
|
@@ -177,7 +177,7 @@ function Carousel({
|
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
if (pageNum !== currentPage.value) {
|
|
180
|
-
if (expectedPosition.
|
|
180
|
+
if (expectedPosition.value === pageNum) {
|
|
181
181
|
freeze.value = false;
|
|
182
182
|
}
|
|
183
183
|
|
|
@@ -273,10 +273,9 @@ function Carousel({
|
|
|
273
273
|
}
|
|
274
274
|
|
|
275
275
|
return /*#__PURE__*/React.createElement(View, {
|
|
276
|
-
style:
|
|
277
|
-
}, /*#__PURE__*/React.createElement(Animated.ScrollView, _extends({
|
|
278
|
-
ref: scrollViewRef
|
|
279
|
-
}, scrollViewProps, {
|
|
276
|
+
style: style
|
|
277
|
+
}, /*#__PURE__*/React.createElement(Animated.ScrollView, _extends({}, scrollViewProps, {
|
|
278
|
+
ref: scrollViewRef,
|
|
280
279
|
style: styles.container,
|
|
281
280
|
horizontal: true,
|
|
282
281
|
disableScrollViewPanResponder: true,
|
|
@@ -286,7 +285,7 @@ function Carousel({
|
|
|
286
285
|
snapToStart: true,
|
|
287
286
|
snapToEnd: true,
|
|
288
287
|
decelerationRate: "fast",
|
|
289
|
-
scrollEventThrottle:
|
|
288
|
+
scrollEventThrottle: 4,
|
|
290
289
|
onScroll: scrollHandler,
|
|
291
290
|
bounces: false,
|
|
292
291
|
contentContainerStyle: {
|