@fountain-ui/lab 2.0.0-beta.12 → 2.0.0-beta.15
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 +39 -37
- package/build/commonjs/Carousel/Carousel.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js +2 -2
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js +15 -15
- 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 +6 -4
- 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 +18 -13
- package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/commonjs/Carousel/{hooks → components}/useItemInterpolation.js +6 -4
- package/build/commonjs/Carousel/components/useItemInterpolation.js.map +1 -0
- package/build/commonjs/Carousel/hooks/index.js +0 -16
- package/build/commonjs/Carousel/hooks/index.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/useIndexController.js +15 -46
- package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js +12 -12
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js +121 -69
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/commonjs/Carousel/tick.js +16 -0
- package/build/commonjs/Carousel/tick.js.map +1 -0
- package/build/commonjs/Carousel/types.js.map +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +53 -47
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/InternalContext.js +17 -0
- package/build/commonjs/ViewPager/InternalContext.js.map +1 -0
- package/build/commonjs/ViewPager/ViewPagerNative.js +74 -23
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js +23 -12
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/types.js +6 -0
- package/build/commonjs/ViewPager/types.js.map +1 -0
- package/build/commonjs/ViewPager/usePageStore.js +35 -0
- package/build/commonjs/ViewPager/usePageStore.js.map +1 -0
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js +6 -6
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/module/Carousel/Carousel.js +39 -39
- package/build/module/Carousel/Carousel.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js +2 -2
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js +15 -15
- 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 +5 -3
- 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 +18 -13
- package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/module/Carousel/{hooks → components}/useItemInterpolation.js +3 -3
- package/build/module/Carousel/components/useItemInterpolation.js.map +1 -0
- package/build/module/Carousel/hooks/index.js +0 -2
- package/build/module/Carousel/hooks/index.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/useIndexController.js +14 -39
- package/build/module/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/module/Carousel/hooks/useItemVisibilityStore.js +10 -11
- package/build/module/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/module/Carousel/hooks/usePagingAnimation.js +122 -69
- package/build/module/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/module/Carousel/tick.js +6 -0
- package/build/module/Carousel/tick.js.map +1 -0
- package/build/module/Carousel/types.js.map +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js +53 -47
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/InternalContext.js +7 -0
- package/build/module/ViewPager/InternalContext.js.map +1 -0
- package/build/module/ViewPager/ViewPagerNative.js +72 -23
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js +21 -13
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/types.js +2 -0
- package/build/module/ViewPager/types.js.map +1 -0
- package/build/module/ViewPager/usePageStore.js +25 -0
- package/build/module/ViewPager/usePageStore.js.map +1 -0
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/ViewabilityTrackerView/measureViewability.js +2 -2
- package/build/module/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.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 +3 -3
- package/build/typescript/Carousel/{hooks → components}/useItemInterpolation.d.ts +0 -0
- package/build/typescript/Carousel/hooks/index.d.ts +0 -2
- package/build/typescript/Carousel/hooks/useIndexController.d.ts +0 -2
- package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +5 -2
- package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts +8 -10
- package/build/typescript/Carousel/tick.d.ts +2 -0
- package/build/typescript/Carousel/types.d.ts +26 -5
- package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts +1 -1
- package/build/typescript/ViewPager/InternalContext.d.ts +7 -0
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +2 -2
- package/build/typescript/ViewPager/ViewPagerProps.d.ts +4 -22
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +2 -2
- package/build/typescript/ViewPager/index.d.ts +2 -1
- package/build/typescript/ViewPager/types.d.ts +19 -0
- package/build/typescript/ViewPager/usePageStore.d.ts +2 -0
- package/build/typescript/ViewPager/utils.d.ts +1 -1
- package/package.json +3 -3
- package/src/Carousel/Carousel.tsx +32 -40
- package/src/Carousel/CarouselProps.ts +4 -3
- package/src/Carousel/animation/createDefaultScrollAnimation.ts +2 -2
- package/src/Carousel/animation/parallaxItemStyleFactory.ts +24 -24
- package/src/Carousel/components/InternalContext.ts +2 -2
- package/src/Carousel/components/ItemView.tsx +13 -3
- package/src/Carousel/components/RootView.tsx +19 -6
- package/src/Carousel/components/ScrollViewGesture.tsx +23 -15
- package/src/Carousel/{hooks → components}/useItemInterpolation.ts +3 -3
- package/src/Carousel/hooks/index.ts +0 -2
- package/src/Carousel/hooks/useAutoplayController.ts +4 -1
- package/src/Carousel/hooks/useIndexController.tsx +14 -44
- package/src/Carousel/hooks/useItemVisibilityStore.ts +17 -13
- package/src/Carousel/hooks/usePagingAnimation.ts +161 -83
- package/src/Carousel/tick.ts +6 -0
- package/src/Carousel/types.ts +34 -5
- package/src/ViewPager/ChildrenMemoizedPage.tsx +53 -50
- package/src/ViewPager/InternalContext.ts +13 -0
- package/src/ViewPager/ViewPagerNative.tsx +91 -44
- package/src/ViewPager/ViewPagerProps.ts +4 -27
- package/src/ViewPager/ViewPagerWeb.tsx +28 -23
- package/src/ViewPager/index.ts +2 -1
- package/src/ViewPager/types.ts +24 -0
- package/src/ViewPager/usePageStore.ts +30 -0
- package/src/ViewPager/utils.tsx +1 -1
- package/src/ViewabilityTrackerView/measureViewability.ts +1 -3
- package/src/hooks/useUnstableCollapsibleAppBar.ts +1 -1
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js +0 -23
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
- package/build/commonjs/Carousel/hooks/useItemInterpolation.js.map +0 -1
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js +0 -14
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
- package/build/module/Carousel/hooks/useItemInterpolation.js.map +0 -1
- package/build/typescript/Carousel/hooks/useDimensionChangeReaction.d.ts +0 -7
- package/src/Carousel/hooks/useDimensionChangeReaction.ts +0 -25
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["computeRectSize","rect","bottom","top","right","left","normalizePagePosition","value","Number","isFinite","MAX_SAFE_INTEGER","normalizeViewSize","size","
|
|
1
|
+
{"version":3,"names":["computeRectSize","rect","bottom","top","right","left","normalizePagePosition","value","Number","isFinite","MAX_SAFE_INTEGER","normalizeViewSize","size","measureViewability","view","windowWidth","windowHeight","onViewabilityDetailMeasured","measure","x","y","width","height","pageX","pageY","safePageX","safePageY","visibleRect","clamp","visibleRectSize","viewSize","visiblePercent","Math","round"],"sources":["measureViewability.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport { clamp } from '@fountain-ui/utils';\n\ninterface Rect {\n top: number,\n bottom: number;\n left: number;\n right: number;\n}\n\nexport interface ViewabilityDetail {\n visiblePercent: number;\n}\n\nexport interface MeasureViewabilityParameters {\n view: View;\n windowWidth: number;\n windowHeight: number;\n onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;\n}\n\nconst computeRectSize = (rect: Rect): number =>\n (rect.bottom - rect.top) * (rect.right - rect.left);\n\nconst normalizePagePosition = (value?: number): number =>\n (value != null && Number.isFinite(value)) ? value : Number.MAX_SAFE_INTEGER;\n\nconst normalizeViewSize = (size: number): number =>\n Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;\n\nexport default function measureViewability({\n view,\n windowWidth,\n windowHeight,\n onViewabilityDetailMeasured,\n}: MeasureViewabilityParameters) {\n view.measure((x, y, width, height, pageX?: number, pageY?: number) => {\n const safePageX = normalizePagePosition(pageX);\n const safePageY = normalizePagePosition(pageY);\n\n const visibleRect: Rect = {\n top: clamp(safePageY, 0, windowHeight),\n bottom: clamp(safePageY + height, 0, windowHeight),\n left: clamp(safePageX, 0, windowWidth),\n right: clamp(safePageX + width, 0, windowWidth),\n };\n\n const visibleRectSize = computeRectSize(visibleRect);\n const viewSize = normalizeViewSize(width * height);\n const visiblePercent = Math.round(visibleRectSize / viewSize * 100);\n\n onViewabilityDetailMeasured?.({ visiblePercent });\n });\n};\n"],"mappings":";;;;;;;AACA;;AAoBA,MAAMA,eAAe,GAAIC,IAAD,IACpB,CAACA,IAAI,CAACC,MAAL,GAAcD,IAAI,CAACE,GAApB,KAA4BF,IAAI,CAACG,KAAL,GAAaH,IAAI,CAACI,IAA9C,CADJ;;AAGA,MAAMC,qBAAqB,GAAIC,KAAD,IACzBA,KAAK,IAAI,IAAT,IAAiBC,MAAM,CAACC,QAAP,CAAgBF,KAAhB,CAAlB,GAA4CA,KAA5C,GAAoDC,MAAM,CAACE,gBAD/D;;AAGA,MAAMC,iBAAiB,GAAIC,IAAD,IACtBJ,MAAM,CAACC,QAAP,CAAgBG,IAAhB,KAAyBA,IAAI,GAAG,CAAhC,GAAoCA,IAApC,GAA2CJ,MAAM,CAACE,gBADtD;;AAGe,SAASG,kBAAT,OAKkB;EAAA,IALU;IACvCC,IADuC;IAEvCC,WAFuC;IAGvCC,YAHuC;IAIvCC;EAJuC,CAKV;EAC7BH,IAAI,CAACI,OAAL,CAAa,CAACC,CAAD,EAAIC,CAAJ,EAAOC,KAAP,EAAcC,MAAd,EAAsBC,KAAtB,EAAsCC,KAAtC,KAAyD;IAClE,MAAMC,SAAS,GAAGnB,qBAAqB,CAACiB,KAAD,CAAvC;IACA,MAAMG,SAAS,GAAGpB,qBAAqB,CAACkB,KAAD,CAAvC;IAEA,MAAMG,WAAiB,GAAG;MACtBxB,GAAG,EAAE,IAAAyB,YAAA,EAAMF,SAAN,EAAiB,CAAjB,EAAoBV,YAApB,CADiB;MAEtBd,MAAM,EAAE,IAAA0B,YAAA,EAAMF,SAAS,GAAGJ,MAAlB,EAA0B,CAA1B,EAA6BN,YAA7B,CAFc;MAGtBX,IAAI,EAAE,IAAAuB,YAAA,EAAMH,SAAN,EAAiB,CAAjB,EAAoBV,WAApB,CAHgB;MAItBX,KAAK,EAAE,IAAAwB,YAAA,EAAMH,SAAS,GAAGJ,KAAlB,EAAyB,CAAzB,EAA4BN,WAA5B;IAJe,CAA1B;IAOA,MAAMc,eAAe,GAAG7B,eAAe,CAAC2B,WAAD,CAAvC;IACA,MAAMG,QAAQ,GAAGnB,iBAAiB,CAACU,KAAK,GAAGC,MAAT,CAAlC;IACA,MAAMS,cAAc,GAAGC,IAAI,CAACC,KAAL,CAAWJ,eAAe,GAAGC,QAAlB,GAA6B,GAAxC,CAAvB;IAEAb,2BAA2B,SAA3B,IAAAA,2BAA2B,WAA3B,YAAAA,2BAA2B,CAAG;MAAEc;IAAF,CAAH,CAA3B;EACH,CAhBD;AAiBH;;AAAA"}
|
|
@@ -181,7 +181,7 @@ function useUnstableCollapsibleAppBar() {
|
|
|
181
181
|
duration: ANIMATION_DURATION_MILLIS
|
|
182
182
|
});
|
|
183
183
|
}
|
|
184
|
-
}, []);
|
|
184
|
+
}, [appBarHeight]);
|
|
185
185
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
186
186
|
const appBarStyle = [animatedStyle, {
|
|
187
187
|
paddingTop: safeAreaInsets.top
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n vectorY: SharedValue<number>;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n const refLatestTwoValues = useRef([0, 0]);\n\n refLatestTwoValues.current.shift();\n refLatestTwoValues.current.push(value);\n\n return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { shouldTranslateYReset }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const prevOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n const vectorY = useSharedValue<number>(0);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n if (shouldTranslateYReset) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n offsetsRef.current = [];\n overlapped.value = false;\n }\n\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n }\n };\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n const deltaY = offsetY - prevOffsetY.value;\n vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n prevOffsetY.value = offsetY;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n }, []);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n vectorY,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n vectorY: SharedValue<number>;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n const refLatestTwoValues = useRef([0, 0]);\n\n refLatestTwoValues.current.shift();\n refLatestTwoValues.current.push(value);\n\n return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { shouldTranslateYReset }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const prevOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n const vectorY = useSharedValue<number>(0);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n if (shouldTranslateYReset) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n offsetsRef.current = [];\n overlapped.value = false;\n }\n\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n }\n };\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n const deltaY = offsetY - prevOffsetY.value;\n vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n prevOffsetY.value = offsetY;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n }, [appBarHeight]);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n vectorY,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n };\n};\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
|
|
1
|
+
import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
import ViewabilityTrackerView from '../ViewabilityTrackerView';
|
|
4
|
-
import { useAutoplayController,
|
|
4
|
+
import { useAutoplayController, useIndexController, useItemVisibilityStore, useLoopedData, usePagingAnimation } from './hooks';
|
|
5
5
|
import { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';
|
|
6
6
|
import { InternalContext, RootView, ScrollViewGesture } from './components';
|
|
7
7
|
const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
@@ -16,7 +16,7 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
16
16
|
itemHeight,
|
|
17
17
|
itemWidth,
|
|
18
18
|
loop = false,
|
|
19
|
-
onIndexChange,
|
|
19
|
+
onIndexChange: onIndexChangeProp,
|
|
20
20
|
renderItem,
|
|
21
21
|
scrollEnabled = true,
|
|
22
22
|
style,
|
|
@@ -24,54 +24,54 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
24
24
|
} = props;
|
|
25
25
|
const data = useLoopedData(originalData, loop);
|
|
26
26
|
const initialTx = itemWidth * initialIndex;
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
getCurrentIndex,
|
|
32
|
-
lastIndex,
|
|
33
|
-
monitorElement
|
|
34
|
-
} = useIndexController({
|
|
35
|
-
controlledTx,
|
|
27
|
+
const offsetX = useRef(new Animated.Value(initialTx)).current;
|
|
28
|
+
const translateX = useRef(new Animated.Value(0)).current;
|
|
29
|
+
const globalInterpolation = Animated.add(offsetX, translateX);
|
|
30
|
+
const [itemVisibilityStore, onIndexChange] = useItemVisibilityStore({
|
|
36
31
|
initialIndex,
|
|
37
|
-
itemWidth,
|
|
38
|
-
numberOfOriginalData: originalData.length,
|
|
39
|
-
onIndexChange
|
|
40
|
-
});
|
|
41
|
-
const itemVisibilityStore = useItemVisibilityStore({
|
|
42
|
-
currentIndex,
|
|
43
32
|
numberOfData: data.length,
|
|
44
33
|
windowSize
|
|
45
34
|
});
|
|
35
|
+
const handleIndexChange = useCallback(newIndex => {
|
|
36
|
+
onIndexChange(newIndex);
|
|
37
|
+
onIndexChangeProp === null || onIndexChangeProp === void 0 ? void 0 : onIndexChangeProp(newIndex);
|
|
38
|
+
}, [onIndexChange, onIndexChangeProp]);
|
|
39
|
+
const indexController = useIndexController({
|
|
40
|
+
initialIndex,
|
|
41
|
+
itemWidth,
|
|
42
|
+
numberOfOriginalData: originalData.length,
|
|
43
|
+
onIndexChange: handleIndexChange
|
|
44
|
+
});
|
|
46
45
|
const {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
getCurrentIndex
|
|
47
|
+
} = indexController;
|
|
48
|
+
const {
|
|
49
|
+
interruptAnimation,
|
|
50
|
+
startPagingAnimation
|
|
50
51
|
} = usePagingAnimation({
|
|
51
|
-
controlledTx,
|
|
52
52
|
createScrollAnimation,
|
|
53
|
-
getCurrentIndex,
|
|
54
53
|
itemWidth,
|
|
55
|
-
|
|
54
|
+
indexController,
|
|
56
55
|
loop,
|
|
57
56
|
numberOfData: data.length,
|
|
58
|
-
|
|
57
|
+
offsetX,
|
|
58
|
+
translateX
|
|
59
59
|
});
|
|
60
60
|
const autoplayController = useAutoplayController({
|
|
61
61
|
enabled: autoplay,
|
|
62
62
|
intervalMillis: autoplayInterval,
|
|
63
|
-
startPagingAnimation
|
|
64
|
-
});
|
|
65
|
-
useDimensionChangeReaction({
|
|
66
|
-
controlledTx,
|
|
67
|
-
currentIndex,
|
|
68
|
-
itemWidth
|
|
63
|
+
startPagingAnimation
|
|
69
64
|
});
|
|
70
65
|
useImperativeHandle(ref, () => ({
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
66
|
+
getCurrentIndex,
|
|
67
|
+
next: () => startPagingAnimation('directional', {
|
|
68
|
+
direction: 'next'
|
|
69
|
+
}),
|
|
70
|
+
prev: () => startPagingAnimation('directional', {
|
|
71
|
+
direction: 'prev'
|
|
72
|
+
}),
|
|
73
|
+
scrollTo: option => startPagingAnimation('index', option)
|
|
74
|
+
}), [startPagingAnimation, getCurrentIndex]);
|
|
75
75
|
const contextValue = useMemo(() => ({
|
|
76
76
|
createItemStyle,
|
|
77
77
|
data,
|
|
@@ -83,7 +83,7 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
83
83
|
}), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop]);
|
|
84
84
|
return /*#__PURE__*/React.createElement(InternalContext.Provider, {
|
|
85
85
|
value: contextValue
|
|
86
|
-
},
|
|
86
|
+
}, /*#__PURE__*/React.createElement(ViewabilityTrackerView, {
|
|
87
87
|
enabled: autoplay && !disableSmartAutoplay,
|
|
88
88
|
measurementIntervalMillis: Math.max(3000, autoplayInterval),
|
|
89
89
|
onViewabilityChange: _ref => {
|
|
@@ -99,10 +99,10 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
99
99
|
}
|
|
100
100
|
}, /*#__PURE__*/React.createElement(ScrollViewGesture, {
|
|
101
101
|
autoplayController: autoplayController,
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
interruptAnimation: interruptAnimation,
|
|
103
|
+
translateX: translateX,
|
|
104
104
|
scrollEnabled: scrollEnabled,
|
|
105
|
-
|
|
105
|
+
startPagingAnimation: startPagingAnimation
|
|
106
106
|
}, /*#__PURE__*/React.createElement(RootView, {
|
|
107
107
|
data: data,
|
|
108
108
|
itemHeight: itemHeight,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","memo","useImperativeHandle","useMemo","useRef","Animated","ViewabilityTrackerView","useAutoplayController","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","memo","useCallback","useImperativeHandle","useMemo","useRef","Animated","ViewabilityTrackerView","useAutoplayController","useIndexController","useItemVisibilityStore","useLoopedData","usePagingAnimation","createDefaultItemStyle","createDefaultScrollAnimation","InternalContext","RootView","ScrollViewGesture","Carousel","props","ref","autoplay","autoplayInterval","createItemStyle","createScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","onIndexChangeProp","renderItem","scrollEnabled","style","windowSize","initialTx","offsetX","Value","current","translateX","globalInterpolation","add","itemVisibilityStore","numberOfData","length","handleIndexChange","newIndex","indexController","numberOfOriginalData","getCurrentIndex","interruptAnimation","startPagingAnimation","autoplayController","enabled","intervalMillis","next","direction","prev","scrollTo","option","contextValue","Math","max","visible","resume","pause"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useCallback, 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 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: onIndexChangeProp,\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 offsetX = useRef(new Animated.Value(initialTx)).current;\n const translateX = useRef(new Animated.Value(0)).current;\n const globalInterpolation = Animated.add(offsetX, translateX);\n\n const [itemVisibilityStore, onIndexChange] = useItemVisibilityStore({\n initialIndex,\n numberOfData: data.length,\n windowSize,\n });\n\n const handleIndexChange = useCallback((newIndex: number) => {\n onIndexChange(newIndex);\n onIndexChangeProp?.(newIndex);\n }, [onIndexChange, onIndexChangeProp]);\n\n const indexController = useIndexController({\n initialIndex,\n itemWidth,\n numberOfOriginalData: originalData.length,\n onIndexChange: handleIndexChange,\n });\n\n const { getCurrentIndex } = indexController;\n\n const {\n interruptAnimation,\n startPagingAnimation,\n } = usePagingAnimation({\n createScrollAnimation,\n itemWidth,\n indexController,\n loop,\n numberOfData: data.length,\n offsetX,\n translateX,\n });\n\n const autoplayController = useAutoplayController({\n enabled: autoplay,\n intervalMillis: autoplayInterval,\n startPagingAnimation,\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 <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 interruptAnimation={interruptAnimation}\n translateX={translateX}\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":"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"}
|
|
@@ -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":""}
|
|
@@ -2,8 +2,8 @@ import { Animated, Easing } from 'react-native';
|
|
|
2
2
|
export default function createDefaultScrollAnimation(animatedValue, toValue) {
|
|
3
3
|
return Animated.timing(animatedValue, {
|
|
4
4
|
toValue: toValue,
|
|
5
|
-
duration:
|
|
6
|
-
easing: Easing.bezier(0.
|
|
5
|
+
duration: 220,
|
|
6
|
+
easing: Easing.bezier(0.35, 0.5, 0.5, 0.75),
|
|
7
7
|
useNativeDriver: true
|
|
8
8
|
});
|
|
9
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Animated","Easing","createDefaultScrollAnimation","animatedValue","toValue","timing","duration","easing","bezier","useNativeDriver"],"sources":["createDefaultScrollAnimation.ts"],"sourcesContent":["import { Animated, Easing } from 'react-native';\n\nexport default function createDefaultScrollAnimation(\n animatedValue: Animated.Value,\n toValue: number,\n): Animated.CompositeAnimation {\n return Animated.timing(animatedValue, {\n toValue: toValue,\n duration:
|
|
1
|
+
{"version":3,"names":["Animated","Easing","createDefaultScrollAnimation","animatedValue","toValue","timing","duration","easing","bezier","useNativeDriver"],"sources":["createDefaultScrollAnimation.ts"],"sourcesContent":["import { Animated, Easing } from 'react-native';\n\nexport default function createDefaultScrollAnimation(\n animatedValue: Animated.Value,\n toValue: number,\n): Animated.CompositeAnimation {\n return Animated.timing(animatedValue, {\n toValue: toValue,\n duration: 220,\n easing: Easing.bezier(0.35, 0.5, 0.5, 0.75),\n useNativeDriver: true,\n });\n};\n"],"mappings":"AAAA,SAASA,QAAT,EAAmBC,MAAnB,QAAiC,cAAjC;AAEA,eAAe,SAASC,4BAAT,CACXC,aADW,EAEXC,OAFW,EAGgB;EAC3B,OAAOJ,QAAQ,CAACK,MAAT,CAAgBF,aAAhB,EAA+B;IAClCC,OAAO,EAAEA,OADyB;IAElCE,QAAQ,EAAE,GAFwB;IAGlCC,MAAM,EAAEN,MAAM,CAACO,MAAP,CAAc,IAAd,EAAoB,GAApB,EAAyB,GAAzB,EAA8B,IAA9B,CAH0B;IAIlCC,eAAe,EAAE;EAJiB,CAA/B,CAAP;AAMH;AAAA"}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
import { itemInterpolationInputRange } from './animationUtils';
|
|
2
2
|
const defaultParallaxAnimationConfig = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
activeItemScale: 0.9,
|
|
4
|
+
activeItemOpacity: 1,
|
|
5
|
+
adjacentItemScale: Math.pow(0.9, 2),
|
|
6
|
+
adjacentItemOpacity: 0.5,
|
|
7
|
+
scrollingOffset: 50
|
|
8
8
|
};
|
|
9
9
|
export default function parallaxItemStyleFactory() {
|
|
10
10
|
let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParallaxAnimationConfig;
|
|
11
11
|
const {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = { ...
|
|
18
|
-
...
|
|
12
|
+
activeItemOpacity,
|
|
13
|
+
activeItemScale,
|
|
14
|
+
adjacentItemOpacity,
|
|
15
|
+
adjacentItemScale,
|
|
16
|
+
scrollingOffset
|
|
17
|
+
} = { ...defaultParallaxAnimationConfig,
|
|
18
|
+
...config
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
const createItemStyle = (itemInterpolation, itemWidth) => {
|
|
22
22
|
const translate = itemInterpolation.interpolate({
|
|
23
23
|
inputRange: itemInterpolationInputRange,
|
|
24
|
-
outputRange: [-itemWidth +
|
|
24
|
+
outputRange: [-itemWidth + scrollingOffset, 0, itemWidth - scrollingOffset]
|
|
25
25
|
});
|
|
26
26
|
const zIndex = itemInterpolation.interpolate({
|
|
27
27
|
inputRange: itemInterpolationInputRange,
|
|
@@ -30,12 +30,12 @@ export default function parallaxItemStyleFactory() {
|
|
|
30
30
|
});
|
|
31
31
|
const scale = itemInterpolation.interpolate({
|
|
32
32
|
inputRange: itemInterpolationInputRange,
|
|
33
|
-
outputRange: [
|
|
33
|
+
outputRange: [adjacentItemScale, activeItemScale, adjacentItemScale],
|
|
34
34
|
extrapolate: 'clamp'
|
|
35
35
|
});
|
|
36
36
|
const opacity = itemInterpolation.interpolate({
|
|
37
37
|
inputRange: itemInterpolationInputRange,
|
|
38
|
-
outputRange: [
|
|
38
|
+
outputRange: [adjacentItemOpacity, activeItemOpacity, adjacentItemOpacity],
|
|
39
39
|
extrapolate: 'clamp'
|
|
40
40
|
});
|
|
41
41
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["itemInterpolationInputRange","defaultParallaxAnimationConfig","
|
|
1
|
+
{"version":3,"names":["itemInterpolationInputRange","defaultParallaxAnimationConfig","activeItemScale","activeItemOpacity","adjacentItemScale","Math","pow","adjacentItemOpacity","scrollingOffset","parallaxItemStyleFactory","config","createItemStyle","itemInterpolation","itemWidth","translate","interpolate","inputRange","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 ...defaultParallaxAnimationConfig,\n ...config,\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,SAASA,2BAAT,QAA4C,kBAA5C;AAUA,MAAMC,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;AAQA,eAAe,SAASC,wBAAT,GAAoG;EAAA,IAAlEC,MAAkE,uEAAhCT,8BAAgC;EAC/G,MAAM;IACFE,iBADE;IAEFD,eAFE;IAGFK,mBAHE;IAIFH,iBAJE;IAKFI;EALE,IAMiC,EACnC,GAAGP,8BADgC;IAEnC,GAAGS;EAFgC,CANvC;;EAWA,MAAMC,eAAgC,GAAG,CAACC,iBAAD,EAAoBC,SAApB,KAAkC;IACvE,MAAMC,SAAS,GAAGF,iBAAiB,CAACG,WAAlB,CAA8B;MAC5CC,UAAU,EAAEhB,2BADgC;MAE5CiB,WAAW,EAAE,CACT,CAACJ,SAAD,GAAaL,eADJ,EAET,CAFS,EAGTK,SAAS,GAAGL,eAHH;IAF+B,CAA9B,CAAlB;IASA,MAAMU,MAAM,GAAGN,iBAAiB,CAACG,WAAlB,CAA8B;MACzCC,UAAU,EAAEhB,2BAD6B;MAEzCiB,WAAW,EAAE,CAAC,CAAD,EAAIJ,SAAJ,EAAe,CAAf,CAF4B;MAGzCM,WAAW,EAAE;IAH4B,CAA9B,CAAf;IAMA,MAAMC,KAAK,GAAGR,iBAAiB,CAACG,WAAlB,CAA8B;MACxCC,UAAU,EAAEhB,2BAD4B;MAExCiB,WAAW,EAAE,CACTb,iBADS,EAETF,eAFS,EAGTE,iBAHS,CAF2B;MAOxCe,WAAW,EAAE;IAP2B,CAA9B,CAAd;IAUA,MAAME,OAAO,GAAGT,iBAAiB,CAACG,WAAlB,CAA8B;MAC1CC,UAAU,EAAEhB,2BAD8B;MAE1CiB,WAAW,EAAE,CACTV,mBADS,EAETJ,iBAFS,EAGTI,mBAHS,CAF6B;MAO1CY,WAAW,EAAE;IAP6B,CAA9B,CAAhB;IAUA,OAAO;MACHG,SAAS,EAAE,CACP;QAAEC,UAAU,EAAET;MAAd,CADO,EAEP;QAAEM;MAAF,CAFO,CADR;MAKHF,MALG;MAMHG;IANG,CAAP;EAQH,CA5CD;;EA8CA,OAAOV,eAAP;AACH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","Animated","mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","InternalContext"],"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":["createContext","Animated","mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","InternalContext"],"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,SAASA,aAAT,QAA8B,OAA9B;AACA,SAASC,QAAT,QAAyB,cAAzB;AAaA,MAAMC,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,EAAER,QAAQ,CAACS,GAAT,CAAa,IAAIT,QAAQ,CAACU,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEZ,uBANiC;EAOtDa,IAAI,EAAE;AAPgD,CAA1D;AAUA,MAAMC,eAAe,gBAAGhB,aAAa,CAA4BM,YAA5B,CAArC;AAEA,eAAeU,eAAf"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React, { useContext, useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
import { StyleSheet } from '@fountain-ui/core';
|
|
4
|
-
import
|
|
4
|
+
import useItemInterpolation from './useItemInterpolation';
|
|
5
5
|
import InternalContext from './InternalContext';
|
|
6
6
|
export default function ItemView(props) {
|
|
7
7
|
const {
|
|
8
8
|
children,
|
|
9
|
-
index
|
|
9
|
+
index,
|
|
10
|
+
onLayout
|
|
10
11
|
} = props;
|
|
11
12
|
const {
|
|
12
13
|
createItemStyle,
|
|
@@ -28,9 +29,10 @@ export default function ItemView(props) {
|
|
|
28
29
|
}, [itemVisibilityStore]);
|
|
29
30
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
30
31
|
children: visible ? children(interpolation) : null,
|
|
32
|
+
onLayout: onLayout,
|
|
31
33
|
style: [{
|
|
32
34
|
width: itemWidth,
|
|
33
|
-
height: itemHeight
|
|
35
|
+
height: itemHeight !== 'auto' ? itemHeight : undefined
|
|
34
36
|
}, styles.absolute, // @ts-ignore
|
|
35
37
|
itemStyle]
|
|
36
38
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","styles","absolute","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
|
|
1
|
+
{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","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 './useItemInterpolation';\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,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,EAAgDC,QAAhD,QAAgE,OAAhE;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC;EAJE,IAKFhB,UAAU,CAACO,eAAD,CALd;EAOA,MAAM,CAACU,OAAD,EAAUC,UAAV,IAAwBf,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMgB,aAAa,GAAGb,oBAAoB,CAACK,KAAD,CAA1C;EAEA,MAAMS,SAAS,GAAGlB,OAAO,CACrB,MAAMW,eAAe,CAACM,aAAD,EAAgBJ,SAAhB,CADA,EAErB,CAACF,eAAD,EAAkBM,aAAlB,CAFqB,CAAzB;EAKAlB,SAAS,CAAC,MAAM;IACZ,OAAOe,mBAAmB,CAACK,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBf,KAAK,IAAIc,IAAT,IAAiBd,KAAK,IAAIe,EAA1C;MAAA,CAAZ,CAApB;MACAR,UAAU,CAACK,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACP,mBAAD,CALM,CAAT;EAOA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAEC,OAAO,GAAGP,QAAQ,CAACS,aAAD,CAAX,GAA6B,IADlD;IAEI,QAAQ,EAAEP,QAFd;IAGI,KAAK,EAAE,CACH;MACIe,KAAK,EAAEZ,SADX;MAEIa,MAAM,EAAEd,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCe;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAX,SAPG;EAHX,EADJ;AAeH;AAAA;AAED,MAAMU,MAAM,GAAGzB,UAAU,CAAC2B,MAAX,CAAkB;EAC7BD,QAAQ,EAAE;IACNE,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
import React, { memo,
|
|
3
|
+
import React, { forwardRef, memo, useState } from 'react';
|
|
4
4
|
import { Animated } from 'react-native';
|
|
5
5
|
import { StyleSheet } from '@fountain-ui/core';
|
|
6
6
|
import ItemView from './ItemView';
|
|
@@ -11,7 +11,8 @@ const styles = StyleSheet.create({
|
|
|
11
11
|
},
|
|
12
12
|
horizontal: {
|
|
13
13
|
flexDirection: 'row',
|
|
14
|
-
|
|
14
|
+
overflowX: 'hidden',
|
|
15
|
+
overflowY: 'visible'
|
|
15
16
|
}
|
|
16
17
|
});
|
|
17
18
|
const RootView = /*#__PURE__*/forwardRef(function RootView(props, ref) {
|
|
@@ -23,10 +24,27 @@ const RootView = /*#__PURE__*/forwardRef(function RootView(props, ref) {
|
|
|
23
24
|
style,
|
|
24
25
|
...otherProps
|
|
25
26
|
} = props;
|
|
27
|
+
const [maxHeightOfRenderedItems, setMaxHeightOfRenderedItems] = useState(0);
|
|
28
|
+
|
|
29
|
+
const handleItemLayout = e => {
|
|
30
|
+
const {
|
|
31
|
+
nativeEvent: {
|
|
32
|
+
layout: {
|
|
33
|
+
height
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
} = e;
|
|
37
|
+
const heightInt = Math.round(height);
|
|
38
|
+
|
|
39
|
+
if (heightInt > maxHeightOfRenderedItems) {
|
|
40
|
+
setMaxHeightOfRenderedItems(heightInt);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
26
43
|
|
|
27
44
|
const renderItemView = (item, index) => /*#__PURE__*/React.createElement(ItemView, {
|
|
28
45
|
key: index,
|
|
29
|
-
index: index
|
|
46
|
+
index: index,
|
|
47
|
+
onLayout: itemHeight === 'auto' ? handleItemLayout : undefined
|
|
30
48
|
}, interpolation => renderItem({
|
|
31
49
|
item,
|
|
32
50
|
index: index % originalData.length,
|
|
@@ -34,7 +52,7 @@ const RootView = /*#__PURE__*/forwardRef(function RootView(props, ref) {
|
|
|
34
52
|
}));
|
|
35
53
|
|
|
36
54
|
const viewStyles = [styles.root, styles.horizontal, {
|
|
37
|
-
height: itemHeight
|
|
55
|
+
height: itemHeight === 'auto' ? maxHeightOfRenderedItems : itemHeight
|
|
38
56
|
}, style];
|
|
39
57
|
return /*#__PURE__*/React.createElement(Animated.View, _extends({
|
|
40
58
|
ref: ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","memo","useState","Animated","StyleSheet","ItemView","styles","create","root","width","justifyContent","horizontal","flexDirection","overflowX","overflowY","RootView","props","ref","data","itemHeight","originalData","renderItem","style","otherProps","maxHeightOfRenderedItems","setMaxHeightOfRenderedItems","handleItemLayout","e","nativeEvent","layout","height","heightInt","Math","round","renderItemView","item","index","undefined","interpolation","length","viewStyles","map"],"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,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,IAA5B,EAAgDC,QAAhD,QAAgE,OAAhE;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AAEA,OAAOC,QAAP,MAAqB,YAArB;AAEA,MAAMC,MAAM,GAAGF,UAAU,CAACG,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,gBAAGf,UAAU,CAA2B,SAASe,QAAT,CAAkBC,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,IAA0DvB,QAAQ,CAAC,CAAD,CAAxE;;EAEA,MAAMwB,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,GAAGP,wBAAhB,EAA0C;MACtCC,2BAA2B,CAACM,SAAD,CAA3B;IACH;EACJ,CAPD;;EASA,MAAMG,cAAc,GAAG,CAACC,IAAD,EAAYC,KAAZ,kBACnB,oBAAC,QAAD;IACI,GAAG,EAAEA,KADT;IAEI,KAAK,EAAEA,KAFX;IAGI,QAAQ,EAAEjB,UAAU,KAAK,MAAf,GAAwBO,gBAAxB,GAA2CW;EAHzD,GAKMC,aAAD,IAAmBjB,UAAU,CAAC;IAC3Bc,IAD2B;IAE3BC,KAAK,EAAEA,KAAK,GAAGhB,YAAY,CAACmB,MAFD;IAG3BD;EAH2B,CAAD,CALlC,CADJ;;EAcA,MAAME,UAAU,GAAG,CACflC,MAAM,CAACE,IADQ,EAEfF,MAAM,CAACK,UAFQ,EAGf;IAAEmB,MAAM,EAAEX,UAAU,KAAK,MAAf,GAAwBK,wBAAxB,GAAmDL;EAA7D,CAHe,EAIfG,KAJe,CAAnB;EAOA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,GAAG,EAAEL;EADT,GAEQM,UAFR;IAGI,QAAQ,EAAEL,IAAI,CAACuB,GAAL,CAASP,cAAT,CAHd;IAII,KAAK,EAAEM;EAJX,GADJ;AAQH,CAlD0B,CAA3B;AAoDA,4BAAevC,IAAI,CAACc,QAAD,CAAnB"}
|