@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":["ChildrenMemoizedPage","defaultInitialPage","defaultLoading","defaultOffscreenPageRerenderLimit","defaultPageComponent"],"sources":["utils.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"names":["ChildrenMemoizedPage","defaultInitialPage","defaultLoading","defaultOffscreenPageRerenderLimit","defaultPageComponent"],"sources":["utils.tsx"],"sourcesContent":["import ChildrenMemoizedPage from './ChildrenMemoizedPage';\nimport type { Loading, PageComponent } from './types';\n\nexport const defaultInitialPage: number = 0;\n\nexport const defaultLoading: Loading = 'lazy';\n\nexport const defaultOffscreenPageRerenderLimit: number = 0;\n\nexport const defaultPageComponent: PageComponent = ChildrenMemoizedPage;\n"],"mappings":"AAAA,OAAOA,oBAAP,MAAiC,wBAAjC;AAGA,OAAO,MAAMC,kBAA0B,GAAG,CAAnC;AAEP,OAAO,MAAMC,cAAuB,GAAG,MAAhC;AAEP,OAAO,MAAMC,iCAAyC,GAAG,CAAlD;AAEP,OAAO,MAAMC,oBAAmC,GAAGJ,oBAA5C"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { clamp } from '@fountain-ui/utils';
|
|
2
|
+
|
|
1
3
|
const computeRectSize = rect => (rect.bottom - rect.top) * (rect.right - rect.left);
|
|
2
4
|
|
|
3
5
|
const normalizePagePosition = value => value != null && Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
|
|
4
6
|
|
|
5
7
|
const normalizeViewSize = size => Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
|
|
6
8
|
|
|
7
|
-
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
8
|
-
|
|
9
9
|
export default function measureViewability(_ref) {
|
|
10
10
|
let {
|
|
11
11
|
view,
|
|
@@ -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":["clamp","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","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,SAASA,KAAT,QAAsB,oBAAtB;;AAoBA,MAAMC,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;;AAGA,eAAe,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,EAAEJ,KAAK,CAAC2B,SAAD,EAAY,CAAZ,EAAeV,YAAf,CADY;MAEtBd,MAAM,EAAEH,KAAK,CAAC2B,SAAS,GAAGJ,MAAb,EAAqB,CAArB,EAAwBN,YAAxB,CAFS;MAGtBX,IAAI,EAAEN,KAAK,CAAC0B,SAAD,EAAY,CAAZ,EAAeV,WAAf,CAHW;MAItBX,KAAK,EAAEL,KAAK,CAAC0B,SAAS,GAAGJ,KAAb,EAAoB,CAApB,EAAuBN,WAAvB;IAJU,CAA1B;IAOA,MAAMa,eAAe,GAAG5B,eAAe,CAAC2B,WAAD,CAAvC;IACA,MAAME,QAAQ,GAAGlB,iBAAiB,CAACU,KAAK,GAAGC,MAAT,CAAlC;IACA,MAAMQ,cAAc,GAAGC,IAAI,CAACC,KAAL,CAAWJ,eAAe,GAAGC,QAAlB,GAA6B,GAAxC,CAAvB;IAEAZ,2BAA2B,SAA3B,IAAAA,2BAA2B,WAA3B,YAAAA,2BAA2B,CAAG;MAAEa;IAAF,CAAH,CAA3B;EACH,CAhBD;AAiBH;AAAA"}
|
|
@@ -165,7 +165,7 @@ export default function useUnstableCollapsibleAppBar() {
|
|
|
165
165
|
duration: ANIMATION_DURATION_MILLIS
|
|
166
166
|
});
|
|
167
167
|
}
|
|
168
|
-
}, []);
|
|
168
|
+
}, [appBarHeight]);
|
|
169
169
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
170
170
|
const appBarStyle = [animatedStyle, {
|
|
171
171
|
paddingTop: safeAreaInsets.top
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","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":["useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","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,6 +1,6 @@
|
|
|
1
1
|
import type { RefObject } from 'react';
|
|
2
2
|
import type { ComponentProps } from '@fountain-ui/core';
|
|
3
|
-
import type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, RenderItem } from './types';
|
|
3
|
+
import type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, ItemHeight, RenderItem } from './types';
|
|
4
4
|
export default interface CarouselProps<ItemT = any> extends ComponentProps<{
|
|
5
5
|
ref?: RefObject<CarouselInstance>;
|
|
6
6
|
/**
|
|
@@ -38,9 +38,10 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
|
|
|
38
38
|
*/
|
|
39
39
|
initialIndex?: number;
|
|
40
40
|
/**
|
|
41
|
-
* The item
|
|
41
|
+
* The item height.
|
|
42
|
+
* For a performance reason, always consider to provide a number value.
|
|
42
43
|
*/
|
|
43
|
-
itemHeight:
|
|
44
|
+
itemHeight: ItemHeight;
|
|
44
45
|
/**
|
|
45
46
|
* The item width.
|
|
46
47
|
*/
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { CreateItemStyle } from '../types';
|
|
2
2
|
export interface ParallaxAnimationConfig {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
activeItemScale?: number;
|
|
4
|
+
activeItemOpacity?: number;
|
|
5
|
+
adjacentItemScale?: number;
|
|
6
|
+
adjacentItemOpacity?: number;
|
|
7
|
+
scrollingOffset?: number;
|
|
8
8
|
}
|
|
9
9
|
export default function parallaxItemStyleFactory(config?: ParallaxAnimationConfig): CreateItemStyle;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
|
-
import type { CreateItemStyle, ItemVisibilityStore } from '../types';
|
|
3
|
+
import type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';
|
|
4
4
|
export interface InternalContextValue<ItemT> {
|
|
5
5
|
createItemStyle: CreateItemStyle;
|
|
6
6
|
data: ReadonlyArray<ItemT>;
|
|
7
7
|
globalInterpolation: Animated.AnimatedInterpolation;
|
|
8
|
-
itemHeight:
|
|
8
|
+
itemHeight: ItemHeight;
|
|
9
9
|
itemWidth: number;
|
|
10
10
|
itemVisibilityStore: ItemVisibilityStore;
|
|
11
11
|
loop: boolean;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import type { ReactElement } from 'react';
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
2
3
|
import { Animated } from 'react-native';
|
|
3
4
|
export interface ItemViewProps {
|
|
4
5
|
children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;
|
|
5
6
|
index: number;
|
|
7
|
+
onLayout?: ViewProps['onLayout'];
|
|
6
8
|
}
|
|
7
9
|
export default function ItemView(props: ItemViewProps): JSX.Element;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
import type { RenderItem } from '../types';
|
|
2
|
+
import type { View, ViewProps } from 'react-native';
|
|
3
|
+
import type { ItemHeight, RenderItem } from '../types';
|
|
4
4
|
export declare type RootViewProps<ItemT> = ViewProps & {
|
|
5
5
|
data: ReadonlyArray<ItemT>;
|
|
6
|
-
itemHeight:
|
|
6
|
+
itemHeight: ItemHeight;
|
|
7
7
|
originalData: ReadonlyArray<ItemT>;
|
|
8
8
|
renderItem: RenderItem<ItemT>;
|
|
9
9
|
};
|
|
10
10
|
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ViewProps & {
|
|
11
11
|
data: readonly any[];
|
|
12
|
-
itemHeight:
|
|
12
|
+
itemHeight: ItemHeight;
|
|
13
13
|
originalData: readonly any[];
|
|
14
14
|
renderItem: RenderItem<any>;
|
|
15
15
|
} & React.RefAttributes<View>>>;
|
|
@@ -4,9 +4,9 @@ import type { AutoplayController, StartPagingAnimation } from '../types';
|
|
|
4
4
|
export interface ScrollViewGestureProps {
|
|
5
5
|
autoplayController: AutoplayController;
|
|
6
6
|
children: ReactNode;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
interruptAnimation: () => void;
|
|
8
|
+
translateX: Animated.Value;
|
|
9
9
|
scrollEnabled: boolean;
|
|
10
|
-
|
|
10
|
+
startPagingAnimation: StartPagingAnimation;
|
|
11
11
|
}
|
|
12
12
|
export default function ScrollViewGesture(props: ScrollViewGestureProps): JSX.Element;
|
|
File without changes
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
export { default as useAutoplayController } from './useAutoplayController';
|
|
2
|
-
export { default as useDimensionChangeReaction } from './useDimensionChangeReaction';
|
|
3
2
|
export { default as useIndexController } from './useIndexController';
|
|
4
|
-
export { default as useItemInterpolation } from './useItemInterpolation';
|
|
5
3
|
export { default as useLoopedData } from './useLoopedData';
|
|
6
4
|
export { default as usePagingAnimation } from './usePagingAnimation';
|
|
7
5
|
export { default as useItemVisibilityStore } from './useItemVisibilityStore';
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import type { ItemVisibilityStore } from '../types';
|
|
2
2
|
export interface Parameters {
|
|
3
|
-
|
|
3
|
+
initialIndex: number;
|
|
4
4
|
numberOfData: number;
|
|
5
5
|
windowSize: number;
|
|
6
6
|
}
|
|
7
|
-
export
|
|
7
|
+
export interface OnIndexChange {
|
|
8
|
+
(newIndex: number): void;
|
|
9
|
+
}
|
|
10
|
+
export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnIndexChange];
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import { Animated } from 'react-native';
|
|
2
|
-
import type { CreateScrollAnimation,
|
|
3
|
-
export interface
|
|
4
|
-
controlledTx: Animated.Value;
|
|
2
|
+
import type { CreateScrollAnimation, IndexController, StartPagingAnimation } from '../types';
|
|
3
|
+
export interface PagingAnimationParameters {
|
|
5
4
|
createScrollAnimation: CreateScrollAnimation;
|
|
6
|
-
getCurrentIndex: GetCurrentIndex;
|
|
7
5
|
itemWidth: number;
|
|
8
|
-
|
|
6
|
+
indexController: IndexController;
|
|
9
7
|
loop: boolean;
|
|
10
8
|
numberOfData: number;
|
|
11
|
-
|
|
9
|
+
offsetX: Animated.Value;
|
|
10
|
+
translateX: Animated.Value;
|
|
12
11
|
}
|
|
13
12
|
export interface UsePagingAnimation {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
startAnimation: StartPagingAnimation;
|
|
13
|
+
interruptAnimation: () => void;
|
|
14
|
+
startPagingAnimation: StartPagingAnimation;
|
|
17
15
|
}
|
|
18
|
-
export default function usePagingAnimation(
|
|
16
|
+
export default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation;
|
|
@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
|
|
|
2
2
|
import type { Animated, ViewProps } from 'react-native';
|
|
3
3
|
declare const directions: readonly ["next", "prev", "stay"];
|
|
4
4
|
export declare type PagingDirection = (typeof directions)[number];
|
|
5
|
+
export declare type ItemHeight = number | 'auto';
|
|
5
6
|
export interface RenderItem<T> {
|
|
6
7
|
(info: {
|
|
7
8
|
item: T;
|
|
@@ -19,13 +20,24 @@ export interface GetCurrentIndex {
|
|
|
19
20
|
(): number;
|
|
20
21
|
}
|
|
21
22
|
export interface IndexController {
|
|
22
|
-
currentIndex: number;
|
|
23
23
|
getCurrentIndex: GetCurrentIndex;
|
|
24
24
|
lastIndex: number;
|
|
25
|
-
|
|
25
|
+
notifyOffsetHasChanged: (offset: number) => void;
|
|
26
26
|
}
|
|
27
|
+
export declare type PagingAnimationType = 'directional' | 'index';
|
|
28
|
+
export interface BasePagingAnimationConfig {
|
|
29
|
+
animated?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {
|
|
32
|
+
direction: PagingDirection;
|
|
33
|
+
isOriginatedFromGesture?: boolean;
|
|
34
|
+
}
|
|
35
|
+
export interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {
|
|
36
|
+
index: number;
|
|
37
|
+
}
|
|
38
|
+
export declare type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;
|
|
27
39
|
export interface StartPagingAnimation {
|
|
28
|
-
(
|
|
40
|
+
(type: PagingAnimationType, config: PagingAnimationConfig): void;
|
|
29
41
|
}
|
|
30
42
|
export declare type VisibleIndexRanges = Array<[number, number]>;
|
|
31
43
|
export interface StoreSubscription {
|
|
@@ -40,7 +52,15 @@ export interface AutoplayController {
|
|
|
40
52
|
pause: () => void;
|
|
41
53
|
resume: () => void;
|
|
42
54
|
}
|
|
55
|
+
export interface ScrollToOption {
|
|
56
|
+
index: number;
|
|
57
|
+
animated?: boolean;
|
|
58
|
+
}
|
|
43
59
|
export interface CarouselInstance {
|
|
60
|
+
/**
|
|
61
|
+
* Get current visible item index.
|
|
62
|
+
*/
|
|
63
|
+
getCurrentIndex: GetCurrentIndex;
|
|
44
64
|
/**
|
|
45
65
|
* Scroll to next visible item.
|
|
46
66
|
*/
|
|
@@ -50,8 +70,9 @@ export interface CarouselInstance {
|
|
|
50
70
|
*/
|
|
51
71
|
prev: () => void;
|
|
52
72
|
/**
|
|
53
|
-
*
|
|
73
|
+
* Scroll to desired indexed item.
|
|
74
|
+
* Invalid index is ignored.
|
|
54
75
|
*/
|
|
55
|
-
|
|
76
|
+
scrollTo: (option: ScrollToOption) => void;
|
|
56
77
|
}
|
|
57
78
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { PageProps } from './
|
|
2
|
+
import type { PageProps } from './types';
|
|
3
3
|
declare function Page(props: PageProps): JSX.Element;
|
|
4
4
|
declare const _default: React.MemoExoticComponent<typeof Page>;
|
|
5
5
|
export default _default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { MonoStore } from '@fountain-ui/core';
|
|
3
|
+
export interface InternalContextValue {
|
|
4
|
+
pageStore: MonoStore<number>;
|
|
5
|
+
}
|
|
6
|
+
declare const InternalContext: import("react").Context<InternalContextValue>;
|
|
7
|
+
export default InternalContext;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type ViewPagerProps from './ViewPagerProps';
|
|
3
|
-
import type { ViewPagerInstance } from './
|
|
4
|
-
declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "
|
|
3
|
+
import type { ViewPagerInstance } from './types';
|
|
4
|
+
declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
|
|
5
5
|
export default ViewPager;
|
|
@@ -1,24 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
import type { ComponentProps } from '@fountain-ui/core';
|
|
5
|
-
export declare type KeyboardDismissMode = 'none' | 'on-drag';
|
|
6
|
-
export declare type PageProps = PropsWithChildren<ViewProps> & {
|
|
7
|
-
index: number;
|
|
8
|
-
loading: ViewPagerProps['loading'];
|
|
9
|
-
offscreenPageRerenderLimit: number;
|
|
10
|
-
sharedIndex: SharedValue<number>;
|
|
11
|
-
rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
|
|
12
|
-
};
|
|
13
|
-
export declare type PageComponent = ComponentType<PageProps>;
|
|
14
|
-
export declare type Loading = 'lazy' | 'eager';
|
|
15
|
-
export interface ViewPagerInstance {
|
|
16
|
-
/**
|
|
17
|
-
* Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
|
|
18
|
-
* @param index
|
|
19
|
-
*/
|
|
20
|
-
setPage: (index: number) => void;
|
|
21
|
-
}
|
|
1
|
+
import type { ReactNode, Ref } from 'react';
|
|
2
|
+
import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
|
|
3
|
+
import type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';
|
|
22
4
|
export default interface ViewPagerProps extends ComponentProps<{
|
|
23
5
|
ref?: Ref<ViewPagerInstance>;
|
|
24
6
|
/**
|
|
@@ -67,6 +49,6 @@ export default interface ViewPagerProps extends ComponentProps<{
|
|
|
67
49
|
/**
|
|
68
50
|
* Unstable API.
|
|
69
51
|
*/
|
|
70
|
-
|
|
52
|
+
UNSTABLE_sharedPage?: SyncAnimatedValue;
|
|
71
53
|
}> {
|
|
72
54
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type ViewPagerProps from './ViewPagerProps';
|
|
3
|
-
import type { ViewPagerInstance } from './
|
|
4
|
-
declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "
|
|
3
|
+
import type { ViewPagerInstance } from './types';
|
|
4
|
+
declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
|
|
5
5
|
export default ViewPager;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default } from './ViewPagerWeb';
|
|
2
|
-
export type { default as ViewPagerProps
|
|
2
|
+
export type { default as ViewPagerProps } from './ViewPagerProps';
|
|
3
|
+
export type { ViewPagerInstance } from './types';
|
|
3
4
|
export { useViewPagerPageState } from './PageStateContext';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ComponentType, PropsWithChildren } from 'react';
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
3
|
+
export declare type PageProps = PropsWithChildren<ViewProps> & {
|
|
4
|
+
index: number;
|
|
5
|
+
initialPage: number;
|
|
6
|
+
loading: Loading;
|
|
7
|
+
offscreenPageRerenderLimit: number;
|
|
8
|
+
rerenderKey?: any;
|
|
9
|
+
};
|
|
10
|
+
export declare type KeyboardDismissMode = 'none' | 'on-drag';
|
|
11
|
+
export declare type PageComponent = ComponentType<PageProps>;
|
|
12
|
+
export declare type Loading = 'lazy' | 'eager';
|
|
13
|
+
export interface ViewPagerInstance {
|
|
14
|
+
/**
|
|
15
|
+
* Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
|
|
16
|
+
* @param index
|
|
17
|
+
*/
|
|
18
|
+
setPage: (index: number) => void;
|
|
19
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Loading, PageComponent } from './
|
|
1
|
+
import type { Loading, PageComponent } from './types';
|
|
2
2
|
export declare const defaultInitialPage: number;
|
|
3
3
|
export declare const defaultLoading: Loading;
|
|
4
4
|
export declare const defaultOffscreenPageRerenderLimit: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/lab",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.15",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Fountain-UI Team",
|
|
6
6
|
"description": "Incubator for Fountain-UI React components.",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@emotion/react": "^11.10.0",
|
|
19
19
|
"@emotion/styled": "^11.10.0",
|
|
20
20
|
"@fountain-ui/icons": "^2.0.0-beta.6",
|
|
21
|
-
"@fountain-ui/utils": "^2.0.0-beta.
|
|
21
|
+
"@fountain-ui/utils": "^2.0.0-beta.4",
|
|
22
22
|
"react-native-calendars": "1.1267.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "9c4af6d69493666d86b7736892f778af775a3c80"
|
|
74
74
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
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
4
|
import type CarouselProps from './CarouselProps';
|
|
5
5
|
import type { CarouselInstance } from './types';
|
|
6
6
|
import {
|
|
7
7
|
useAutoplayController,
|
|
8
|
-
useDimensionChangeReaction,
|
|
9
8
|
useIndexController,
|
|
10
9
|
useItemVisibilityStore,
|
|
11
10
|
useLoopedData,
|
|
@@ -26,7 +25,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
|
|
|
26
25
|
itemHeight,
|
|
27
26
|
itemWidth,
|
|
28
27
|
loop = false,
|
|
29
|
-
onIndexChange,
|
|
28
|
+
onIndexChange: onIndexChangeProp,
|
|
30
29
|
renderItem,
|
|
31
30
|
scrollEnabled = true,
|
|
32
31
|
style,
|
|
@@ -36,63 +35,58 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
|
|
|
36
35
|
const data = useLoopedData(originalData, loop);
|
|
37
36
|
|
|
38
37
|
const initialTx = itemWidth * initialIndex;
|
|
39
|
-
const
|
|
40
|
-
const
|
|
38
|
+
const offsetX = useRef(new Animated.Value(initialTx)).current;
|
|
39
|
+
const translateX = useRef(new Animated.Value(0)).current;
|
|
40
|
+
const globalInterpolation = Animated.add(offsetX, translateX);
|
|
41
41
|
|
|
42
|
-
const {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
42
|
+
const [itemVisibilityStore, onIndexChange] = useItemVisibilityStore({
|
|
43
|
+
initialIndex,
|
|
44
|
+
numberOfData: data.length,
|
|
45
|
+
windowSize,
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
const handleIndexChange = useCallback((newIndex: number) => {
|
|
49
|
+
onIndexChange(newIndex);
|
|
50
|
+
onIndexChangeProp?.(newIndex);
|
|
51
|
+
}, [onIndexChange, onIndexChangeProp]);
|
|
52
|
+
|
|
53
|
+
const indexController = useIndexController({
|
|
49
54
|
initialIndex,
|
|
50
55
|
itemWidth,
|
|
51
56
|
numberOfOriginalData: originalData.length,
|
|
52
|
-
onIndexChange,
|
|
57
|
+
onIndexChange: handleIndexChange,
|
|
53
58
|
});
|
|
54
59
|
|
|
55
|
-
const
|
|
56
|
-
currentIndex,
|
|
57
|
-
numberOfData: data.length,
|
|
58
|
-
windowSize,
|
|
59
|
-
});
|
|
60
|
+
const { getCurrentIndex } = indexController;
|
|
60
61
|
|
|
61
62
|
const {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
startAnimation,
|
|
63
|
+
interruptAnimation,
|
|
64
|
+
startPagingAnimation,
|
|
65
65
|
} = usePagingAnimation({
|
|
66
|
-
controlledTx,
|
|
67
66
|
createScrollAnimation,
|
|
68
|
-
getCurrentIndex,
|
|
69
67
|
itemWidth,
|
|
70
|
-
|
|
68
|
+
indexController,
|
|
71
69
|
loop,
|
|
72
70
|
numberOfData: data.length,
|
|
73
|
-
|
|
71
|
+
offsetX,
|
|
72
|
+
translateX,
|
|
74
73
|
});
|
|
75
74
|
|
|
76
75
|
const autoplayController = useAutoplayController({
|
|
77
76
|
enabled: autoplay,
|
|
78
77
|
intervalMillis: autoplayInterval,
|
|
79
|
-
startPagingAnimation
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
useDimensionChangeReaction({
|
|
83
|
-
controlledTx,
|
|
84
|
-
currentIndex,
|
|
85
|
-
itemWidth,
|
|
78
|
+
startPagingAnimation,
|
|
86
79
|
});
|
|
87
80
|
|
|
88
81
|
useImperativeHandle(
|
|
89
82
|
ref,
|
|
90
83
|
() => ({
|
|
91
|
-
next: () => startAnimation('next'),
|
|
92
|
-
prev: () => startAnimation('prev'),
|
|
93
84
|
getCurrentIndex,
|
|
85
|
+
next: () => startPagingAnimation('directional', { direction: 'next' }),
|
|
86
|
+
prev: () => startPagingAnimation('directional', { direction: 'prev' }),
|
|
87
|
+
scrollTo: (option) => startPagingAnimation('index', option),
|
|
94
88
|
}),
|
|
95
|
-
[
|
|
89
|
+
[startPagingAnimation, getCurrentIndex],
|
|
96
90
|
);
|
|
97
91
|
|
|
98
92
|
const contextValue = useMemo(() => ({
|
|
@@ -115,8 +109,6 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
|
|
|
115
109
|
|
|
116
110
|
return (
|
|
117
111
|
<InternalContext.Provider value={contextValue}>
|
|
118
|
-
{monitorElement}
|
|
119
|
-
|
|
120
112
|
<ViewabilityTrackerView
|
|
121
113
|
enabled={autoplay && !disableSmartAutoplay}
|
|
122
114
|
measurementIntervalMillis={Math.max(3000, autoplayInterval)}
|
|
@@ -130,10 +122,10 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
|
|
|
130
122
|
>
|
|
131
123
|
<ScrollViewGesture
|
|
132
124
|
autoplayController={autoplayController}
|
|
133
|
-
|
|
134
|
-
|
|
125
|
+
interruptAnimation={interruptAnimation}
|
|
126
|
+
translateX={translateX}
|
|
135
127
|
scrollEnabled={scrollEnabled}
|
|
136
|
-
|
|
128
|
+
startPagingAnimation={startPagingAnimation}
|
|
137
129
|
>
|
|
138
130
|
<RootView
|
|
139
131
|
data={data}
|