@fountain-ui/lab 2.0.0-beta.4 → 2.0.0-beta.7
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/AnimatedY/AnimatedY.js +3 -5
- package/build/commonjs/AnimatedY/AnimatedY.js.map +1 -1
- package/build/commonjs/AnimatedY/AnimatedYProps.js.map +1 -1
- package/build/commonjs/AnimatedY/index.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetNative.js +1 -1
- package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetWeb.js +2 -6
- package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/commonjs/BottomSheet/TransparentBackdrop.js +1 -1
- package/build/commonjs/BottomSheet/TransparentBackdrop.js.map +1 -1
- package/build/commonjs/BottomSheet/index.js.map +1 -1
- package/build/commonjs/BottomSheet/index.native.js.map +1 -1
- package/build/commonjs/Carousel/CarouselNative.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/CarouselWeb.js +1 -1
- package/build/commonjs/Carousel/CarouselWeb.js.map +1 -1
- package/build/commonjs/Carousel/index.js.map +1 -1
- package/build/commonjs/Carousel/index.native.js.map +1 -1
- package/build/commonjs/Carousel/utils.js +1 -1
- package/build/commonjs/Carousel/utils.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewer.js +16 -11
- package/build/commonjs/ComicViewer/ComicViewer.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewerItemProps.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/commonjs/ComicViewer/ViewerItem.js +4 -3
- package/build/commonjs/ComicViewer/ViewerItem.js.map +1 -1
- package/build/commonjs/ComicViewer/index.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePicker.js +2 -2
- package/build/commonjs/DateTimePicker/DateTimePicker.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePickerProps.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePickerProvider.js.map +1 -1
- package/build/commonjs/DateTimePicker/YearPicker.js +21 -17
- package/build/commonjs/DateTimePicker/YearPicker.js.map +1 -1
- package/build/commonjs/DateTimePicker/index.js +4 -4
- package/build/commonjs/DateTimePicker/index.js.map +1 -1
- package/build/commonjs/DateTimePicker/utils.js +2 -1
- package/build/commonjs/DateTimePicker/utils.js.map +1 -1
- package/build/commonjs/FlipCard/FlipCard.js +5 -11
- package/build/commonjs/FlipCard/FlipCard.js.map +1 -1
- package/build/commonjs/FlipCard/FlipCardProps.js.map +1 -1
- package/build/commonjs/FlipCard/index.js.map +1 -1
- package/build/commonjs/StatusBarProvider/Provider.js +1 -1
- package/build/commonjs/StatusBarProvider/Provider.js.map +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
- package/build/commonjs/StatusBarProvider/index.js.map +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/index.native.js.map +1 -1
- package/build/commonjs/ViewPager/utils.js +13 -11
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/hooks/index.js.map +1 -1
- package/build/commonjs/hooks/useAppbarStyles.js.map +1 -1
- package/build/commonjs/hooks/useElevationStyle.js.map +1 -1
- package/build/commonjs/hooks/useHeight.js +5 -4
- package/build/commonjs/hooks/useHeight.js.map +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +20 -33
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js +7 -9
- package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
- package/build/commonjs/hooks/useWidth.js.map +1 -1
- package/build/commonjs/index.js +10 -10
- package/build/commonjs/index.js.map +1 -1
- package/build/module/AnimatedY/AnimatedY.js +4 -4
- package/build/module/AnimatedY/AnimatedY.js.map +1 -1
- package/build/module/AnimatedY/AnimatedYProps.js.map +1 -1
- package/build/module/AnimatedY/index.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetWeb.js +2 -6
- package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/module/BottomSheet/TransparentBackdrop.js +1 -1
- package/build/module/BottomSheet/TransparentBackdrop.js.map +1 -1
- package/build/module/BottomSheet/index.js.map +1 -1
- package/build/module/BottomSheet/index.native.js.map +1 -1
- package/build/module/Carousel/CarouselNative.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/CarouselWeb.js +1 -1
- package/build/module/Carousel/CarouselWeb.js.map +1 -1
- package/build/module/Carousel/index.js.map +1 -1
- package/build/module/Carousel/index.native.js.map +1 -1
- package/build/module/Carousel/utils.js.map +1 -1
- package/build/module/ComicViewer/ComicViewer.js +16 -11
- package/build/module/ComicViewer/ComicViewer.js.map +1 -1
- package/build/module/ComicViewer/ComicViewerItemProps.js.map +1 -1
- package/build/module/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/module/ComicViewer/ViewerItem.js +4 -3
- package/build/module/ComicViewer/ViewerItem.js.map +1 -1
- package/build/module/ComicViewer/index.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePicker.js +2 -2
- package/build/module/DateTimePicker/DateTimePicker.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePickerProps.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePickerProvider.js.map +1 -1
- package/build/module/DateTimePicker/YearPicker.js +21 -17
- package/build/module/DateTimePicker/YearPicker.js.map +1 -1
- package/build/module/DateTimePicker/index.js.map +1 -1
- package/build/module/DateTimePicker/utils.js +2 -1
- package/build/module/DateTimePicker/utils.js.map +1 -1
- package/build/module/FlipCard/FlipCard.js +5 -5
- package/build/module/FlipCard/FlipCard.js.map +1 -1
- package/build/module/FlipCard/FlipCardProps.js.map +1 -1
- package/build/module/FlipCard/index.js.map +1 -1
- package/build/module/StatusBarProvider/Provider.js.map +1 -1
- package/build/module/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/module/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
- package/build/module/StatusBarProvider/index.js.map +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/index.native.js.map +1 -1
- package/build/module/ViewPager/utils.js +11 -10
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/hooks/index.js.map +1 -1
- package/build/module/hooks/useAppbarStyles.js.map +1 -1
- package/build/module/hooks/useElevationStyle.js.map +1 -1
- package/build/module/hooks/useHeight.js +4 -3
- package/build/module/hooks/useHeight.js.map +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js +20 -23
- package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useUnstableToggleDisplayStyle.js +7 -5
- package/build/module/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
- package/build/module/hooks/useWidth.js.map +1 -1
- package/build/module/index.js.map +1 -1
- package/build/typescript/AnimatedY/AnimatedY.d.ts +0 -1
- package/build/typescript/BottomSheet/BottomSheetNative.d.ts +0 -1
- package/build/typescript/BottomSheet/BottomSheetWeb.d.ts +0 -1
- package/build/typescript/BottomSheet/TransparentBackdrop.d.ts +0 -1
- package/build/typescript/Carousel/CarouselNative.d.ts +0 -1
- package/build/typescript/ComicViewer/ComicViewer.d.ts +0 -1
- package/build/typescript/DateTimePicker/DateTimePicker.d.ts +0 -1
- package/build/typescript/DateTimePicker/YearPicker.d.ts +0 -1
- package/build/typescript/FlipCard/FlipCard.d.ts +0 -1
- package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts +0 -1
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +0 -1
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +0 -1
- package/build/typescript/hooks/useUnstableCollapsibleAppBar.d.ts +2 -3
- package/build/typescript/hooks/useUnstableToggleDisplayStyle.d.ts +2 -2
- package/package.json +6 -5
- package/src/AnimatedY/AnimatedY.tsx +4 -4
- package/src/DateTimePicker/DateTimePicker.tsx +2 -2
- package/src/FlipCard/FlipCard.tsx +6 -6
- package/src/hooks/useHeight.ts +2 -2
- package/src/hooks/useUnstableCollapsibleAppBar.ts +25 -23
- package/src/hooks/useUnstableToggleDisplayStyle.ts +6 -5
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
3
|
-
export default function useHeight(
|
|
2
|
+
import { useWorkletCallback } from 'react-native-reanimated';
|
|
3
|
+
export default function useHeight() {
|
|
4
|
+
let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
4
5
|
const [height, setHeight] = React.useState(initialHeight);
|
|
5
|
-
const onLayout =
|
|
6
|
+
const onLayout = useWorkletCallback(e => {
|
|
6
7
|
setHeight(e.nativeEvent.layout.height);
|
|
7
8
|
}, []);
|
|
8
9
|
return [height, onLayout];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","useWorkletCallback","useHeight","initialHeight","height","setHeight","useState","onLayout","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { useWorkletCallback } from 'react-native-reanimated';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n const [height, setHeight] = React.useState<number>(initialHeight);\n\n const onLayout = useWorkletCallback((e) => {\n setHeight(e.nativeEvent.layout.height);\n }, []);\n\n return [height, onLayout];\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,kBAAT,QAAmC,yBAAnC;AAIA,eAAe,SAASC,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBL,KAAK,CAACM,QAAN,CAAuBH,aAAvB,CAA5B;EAEA,MAAMI,QAAQ,GAAGN,kBAAkB,CAAEO,CAAD,IAAO;IACvCH,SAAS,CAACG,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBN,MAAtB,CAAT;EACH,CAFkC,EAEhC,EAFgC,CAAnC;EAIA,OAAO,CAACA,MAAD,EAASG,QAAT,CAAP;AACH;AAAA"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
2
|
import { Platform } from 'react-native';
|
|
3
|
-
import
|
|
3
|
+
import { useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import useAppbarStyles from './useAppbarStyles';
|
|
6
6
|
import useElevationStyle from './useElevationStyle';
|
|
7
7
|
import useHeight from './useHeight';
|
|
8
8
|
const defaultOptions = {
|
|
9
|
-
translucent: false,
|
|
10
9
|
shouldTranslateYReset: false
|
|
11
10
|
};
|
|
12
11
|
const ANIMATION_DURATION_MILLIS = 100;
|
|
@@ -19,9 +18,9 @@ function useLargerValueOfLastTwoValues(value) {
|
|
|
19
18
|
return Math.max(...refLatestTwoValues.current);
|
|
20
19
|
}
|
|
21
20
|
|
|
22
|
-
export default function useUnstableCollapsibleAppBar(
|
|
21
|
+
export default function useUnstableCollapsibleAppBar() {
|
|
22
|
+
let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
|
|
23
23
|
const {
|
|
24
|
-
translucent,
|
|
25
24
|
shouldTranslateYReset
|
|
26
25
|
} = { ...defaultOptions,
|
|
27
26
|
...userOptions
|
|
@@ -31,15 +30,15 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
|
|
|
31
30
|
const [appBarHeight, onAppBarLayout] = useHeight();
|
|
32
31
|
const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
|
|
33
32
|
const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
|
|
34
|
-
const maxTranslateY =
|
|
35
|
-
const translateY =
|
|
36
|
-
const lastTranslateY =
|
|
37
|
-
const lastOffsetY =
|
|
38
|
-
const prevOffsetY =
|
|
39
|
-
const overlapped =
|
|
40
|
-
const vectorY =
|
|
33
|
+
const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
|
|
34
|
+
const translateY = useSharedValue(0);
|
|
35
|
+
const lastTranslateY = useSharedValue(0);
|
|
36
|
+
const lastOffsetY = useSharedValue(0);
|
|
37
|
+
const prevOffsetY = useSharedValue(0);
|
|
38
|
+
const overlapped = useSharedValue(false);
|
|
39
|
+
const vectorY = useSharedValue(0);
|
|
41
40
|
const elevationStyle = useElevationStyle(4);
|
|
42
|
-
const animatedStyle =
|
|
41
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
43
42
|
return Platform.OS === 'web' ? {
|
|
44
43
|
transform: [{
|
|
45
44
|
translateY: translateY.value
|
|
@@ -60,13 +59,11 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
|
|
|
60
59
|
const offsetsRef = React.useRef([]);
|
|
61
60
|
|
|
62
61
|
const onScrollViewChanged = nextIndex => {
|
|
63
|
-
var _offsetsRef$current$n;
|
|
64
|
-
|
|
65
62
|
const prevIndex = indexRef.current;
|
|
66
63
|
|
|
67
64
|
if (prevIndex === nextIndex) {
|
|
68
65
|
if (shouldTranslateYReset) {
|
|
69
|
-
translateY.value =
|
|
66
|
+
translateY.value = withTiming(0, {
|
|
70
67
|
duration: ANIMATION_DURATION_MILLIS
|
|
71
68
|
});
|
|
72
69
|
vectorY.value = 0;
|
|
@@ -78,21 +75,21 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
|
|
|
78
75
|
}
|
|
79
76
|
|
|
80
77
|
offsetsRef.current[prevIndex] = lastOffsetY.value;
|
|
81
|
-
const savedOffsetY =
|
|
78
|
+
const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;
|
|
82
79
|
lastOffsetY.value = savedOffsetY;
|
|
83
80
|
indexRef.current = nextIndex; // Determine whether to overlap every time index is changed.
|
|
84
81
|
|
|
85
82
|
overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
|
|
86
83
|
|
|
87
84
|
if (translateY.value < 0 && savedOffsetY < appBarHeight) {
|
|
88
|
-
translateY.value =
|
|
85
|
+
translateY.value = withTiming(0, {
|
|
89
86
|
duration: ANIMATION_DURATION_MILLIS
|
|
90
87
|
});
|
|
91
88
|
vectorY.value = 0;
|
|
92
89
|
}
|
|
93
90
|
};
|
|
94
91
|
|
|
95
|
-
const scrollHandler =
|
|
92
|
+
const scrollHandler = useAnimatedScrollHandler({
|
|
96
93
|
onBeginDrag: () => {
|
|
97
94
|
lastTranslateY.value = translateY.value;
|
|
98
95
|
},
|
|
@@ -114,13 +111,13 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
|
|
|
114
111
|
} else {
|
|
115
112
|
if (offsetY > -maxTy) {
|
|
116
113
|
if (ty === 0) {
|
|
117
|
-
translateY.value =
|
|
114
|
+
translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
|
|
118
115
|
duration: ANIMATION_DURATION_MILLIS
|
|
119
116
|
});
|
|
120
117
|
}
|
|
121
118
|
} else {
|
|
122
119
|
if (ty === maxTy) {
|
|
123
|
-
translateY.value =
|
|
120
|
+
translateY.value = withTiming(0, {
|
|
124
121
|
duration: ANIMATION_DURATION_MILLIS
|
|
125
122
|
});
|
|
126
123
|
}
|
|
@@ -146,15 +143,15 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
|
|
|
146
143
|
const threshold = maxTy * 0.5;
|
|
147
144
|
const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
|
|
148
145
|
overlapped.value = offsetY + nextTranslateY > 0;
|
|
149
|
-
translateY.value =
|
|
146
|
+
translateY.value = withTiming(nextTranslateY, {
|
|
150
147
|
duration: ANIMATION_DURATION_MILLIS
|
|
151
148
|
});
|
|
152
149
|
}
|
|
153
150
|
});
|
|
154
151
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
155
|
-
const appBarStyle = [animatedStyle,
|
|
152
|
+
const appBarStyle = [animatedStyle, {
|
|
156
153
|
paddingTop: safeAreaInsets.top
|
|
157
|
-
}
|
|
154
|
+
}, hasCollapsible ? styles.floating : undefined];
|
|
158
155
|
return {
|
|
159
156
|
appBarStyle,
|
|
160
157
|
vectorY,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useUnstableCollapsibleAppBar.ts"],"names":["React","useRef","Platform","Animated","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","translucent","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","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","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","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated 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 translucent?: boolean;\n shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n vectorY: Animated.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 translucent: false,\n shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\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\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const {\n translucent,\n shouldTranslateYReset,\n }: 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 = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n const translateY = Animated.useSharedValue<number>(0);\n const lastTranslateY = Animated.useSharedValue<number>(0);\n const lastOffsetY = Animated.useSharedValue<number>(0);\n const prevOffsetY = Animated.useSharedValue<number>(0);\n const overlapped = Animated.useSharedValue<boolean>(false);\n const vectorY = Animated.useSharedValue<number>(0);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = Animated.useAnimatedStyle(() => {\n return Platform.OS === 'web' ? ({\n transform: [{ translateY: translateY.value }],\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n }) : ({\n transform: [{ translateY: translateY.value }],\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n });\n });\n\n const indexRef = React.useRef<number>(0);\n const offsetsRef = React.useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n if (shouldTranslateYReset) {\n translateY.value = Animated.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 = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n }\n };\n\n const scrollHandler = Animated.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 = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = Animated.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 = Animated.withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n });\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n translucent ? { paddingTop: safeAreaInsets.top } : undefined,\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"]}
|
|
1
|
+
{"version":3,"names":["React","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 React, { 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\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\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);\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 return Platform.OS === 'web' ? ({\n transform: [{ translateY: translateY.value }],\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n }) : ({\n transform: [{ translateY: translateY.value }],\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n });\n });\n\n const indexRef = React.useRef<number>(0);\n const offsetsRef = React.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,14 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
export default function useAnimatedDisplayStyle(vectorY
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
|
|
2
|
+
export default function useAnimatedDisplayStyle(vectorY) {
|
|
3
|
+
let threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
|
|
4
|
+
let defaultDisplay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flex';
|
|
5
|
+
const display = useSharedValue(defaultDisplay);
|
|
6
|
+
useAnimatedReaction(() => vectorY.value, vy => {
|
|
5
7
|
if (vy >= threshold) {
|
|
6
8
|
display.value = 'none';
|
|
7
9
|
} else if (vy < threshold) {
|
|
8
10
|
display.value = 'flex';
|
|
9
11
|
}
|
|
10
12
|
});
|
|
11
|
-
return
|
|
13
|
+
return useAnimatedStyle(() => ({
|
|
12
14
|
display: display.value
|
|
13
15
|
}));
|
|
14
16
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useAnimatedReaction","useAnimatedStyle","useSharedValue","useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","value","vy"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n vectorY: SharedValue<number>,\n threshold: number = 200,\n defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n const display = useSharedValue(defaultDisplay);\n\n useAnimatedReaction(\n () => vectorY.value,\n (vy) => {\n if (vy >= threshold) {\n display.value = 'none';\n } else if (vy < threshold) {\n display.value = 'flex';\n }\n },\n );\n\n return useAnimatedStyle(() => ({\n display: display.value,\n }));\n};\n"],"mappings":"AACA,SAASA,mBAAT,EAA8BC,gBAA9B,EAAgDC,cAAhD,QAAsE,yBAAtE;AAEA,eAAe,SAASC,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAGL,cAAc,CAACI,cAAD,CAA9B;EAEAN,mBAAmB,CACf,MAAMI,OAAO,CAACI,KADC,EAEdC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIJ,SAAV,EAAqB;MACjBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGJ,SAAT,EAAoB;MACvBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH;EACJ,CARc,CAAnB;EAWA,OAAOP,gBAAgB,CAAC,OAAO;IAC3BM,OAAO,EAAEA,OAAO,CAACC;EADU,CAAP,CAAD,CAAvB;AAGH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","useWindowDimensions","useWidth","window","width","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"sources":["useWidth.ts"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n const window = useWindowDimensions();\n const [width, setWidth] = React.useState(window.width);\n\n const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n const newWidth = e.nativeEvent.layout.width;\n\n if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n setWidth(newWidth);\n }\n }, []);\n\n return [width, onLayout];\n}"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAA4BC,mBAA5B,QAAkE,cAAlE;AAEA,eAAe,SAASC,QAAT,GAAqD;EAChE,MAAMC,MAAM,GAAGF,mBAAmB,EAAlC;EACA,MAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBL,KAAK,CAACM,QAAN,CAAeH,MAAM,CAACC,KAAtB,CAA1B;EAEA,MAAMG,QAAQ,GAAGP,KAAK,CAACQ,WAAN,CAAmBC,CAAD,IAA0B;IACzD,MAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBR,KAAtC;;IAEA,IAAIM,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWV,KAAX,CAA7C,EAAgE;MAC5DC,QAAQ,CAACK,QAAD,CAAR;IACH;EACJ,CANgB,EAMd,EANc,CAAjB;EAQA,OAAO,CAACN,KAAD,EAAQG,QAAR,CAAP;AACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","ComicViewer","StatusBarProvider","useStatusBarContext"],"sources":["index.ts"],"sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASN,OAAO,IAAIO,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Falsy, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
|
|
2
|
-
import
|
|
2
|
+
import type { SharedValue } from 'react-native-reanimated';
|
|
3
3
|
declare type WebOnlyStyle = {
|
|
4
4
|
boxShadow: any;
|
|
5
5
|
};
|
|
@@ -13,12 +13,11 @@ export interface ContentInsets {
|
|
|
13
13
|
right?: number;
|
|
14
14
|
}
|
|
15
15
|
export interface Options {
|
|
16
|
-
translucent?: boolean;
|
|
17
16
|
shouldTranslateYReset?: boolean;
|
|
18
17
|
}
|
|
19
18
|
export interface CollapsibleAppBar {
|
|
20
19
|
appBarStyle: ViewStyleProp;
|
|
21
|
-
vectorY:
|
|
20
|
+
vectorY: SharedValue<number>;
|
|
22
21
|
onAppBarLayout: OnLayoutCallback;
|
|
23
22
|
onCollapsibleToolbarLayout: OnLayoutCallback;
|
|
24
23
|
onScroll: OnScroll;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
export default function useAnimatedDisplayStyle(vectorY:
|
|
1
|
+
import type { SharedValue } from 'react-native-reanimated';
|
|
2
|
+
export default function useAnimatedDisplayStyle(vectorY: SharedValue<number>, threshold?: number, defaultDisplay?: 'flex' | 'none'): {
|
|
3
3
|
display: "flex" | "none";
|
|
4
4
|
};
|
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.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Fountain-UI Team",
|
|
6
6
|
"description": "Incubator for Fountain-UI React components.",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"prepare": "bob build"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@emotion/react": "^11.
|
|
19
|
-
"@emotion/styled": "^11.
|
|
20
|
-
"@fountain-ui/icons": "^2.0.0-beta.
|
|
18
|
+
"@emotion/react": "^11.10.0",
|
|
19
|
+
"@emotion/styled": "^11.10.0",
|
|
20
|
+
"@fountain-ui/icons": "^2.0.0-beta.6",
|
|
21
21
|
"@fountain-ui/utils": "^2.0.0-beta.3",
|
|
22
22
|
"react-native-calendars": "1.1267.0"
|
|
23
23
|
},
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"react": "^16.8.0 || ^17.0.0",
|
|
30
30
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
31
31
|
"react-native": "^0.63.0",
|
|
32
|
+
"react-native-gesture-handler": "^2.0.0",
|
|
32
33
|
"react-native-snap-carousel": "^3.9.0",
|
|
33
34
|
"react-slick": "^0.25.0"
|
|
34
35
|
},
|
|
@@ -84,5 +85,5 @@
|
|
|
84
85
|
"publishConfig": {
|
|
85
86
|
"access": "public"
|
|
86
87
|
},
|
|
87
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "92adfb973082a3ebaa68ab16d8144230523b36d8"
|
|
88
89
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Animated, { Easing } from 'react-native-reanimated';
|
|
2
|
+
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
3
3
|
import type AnimatedYProps from './AnimatedYProps';
|
|
4
4
|
|
|
5
5
|
export default function AnimatedY(props: AnimatedYProps) {
|
|
@@ -9,14 +9,14 @@ export default function AnimatedY(props: AnimatedYProps) {
|
|
|
9
9
|
style,
|
|
10
10
|
} = props;
|
|
11
11
|
|
|
12
|
-
const animatedY =
|
|
13
|
-
const animatedStyle =
|
|
12
|
+
const animatedY = useSharedValue(translateY);
|
|
13
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
14
14
|
transform: [{ translateY: animatedY.value }],
|
|
15
15
|
}));
|
|
16
16
|
|
|
17
17
|
React.useEffect(() => {
|
|
18
18
|
if (translateY >= 0) {
|
|
19
|
-
animatedY.value =
|
|
19
|
+
animatedY.value = withTiming(translateY, {
|
|
20
20
|
duration: 150,
|
|
21
21
|
easing: Easing.out(Easing.exp),
|
|
22
22
|
});
|
|
@@ -82,8 +82,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
|
|
|
82
82
|
/>
|
|
83
83
|
)}
|
|
84
84
|
theme={{
|
|
85
|
-
backgroundColor: theme.palette.
|
|
86
|
-
calendarBackground: theme.palette.
|
|
85
|
+
backgroundColor: theme.palette.paper.default,
|
|
86
|
+
calendarBackground: theme.palette.paper.default,
|
|
87
87
|
dayTextColor: theme.palette.text.primary,
|
|
88
88
|
textDisabledColor: theme.palette.text.hint,
|
|
89
89
|
}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
2
|
import { StyleSheet, View } from 'react-native';
|
|
3
|
-
import Animated from 'react-native-reanimated';
|
|
3
|
+
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
4
|
import type FlipCardProps from './FlipCardProps';
|
|
5
5
|
|
|
6
6
|
const styles = StyleSheet.create({
|
|
@@ -27,9 +27,9 @@ export default function FlipCard(props: FlipCardProps) {
|
|
|
27
27
|
style,
|
|
28
28
|
} = props;
|
|
29
29
|
|
|
30
|
-
const sharedAngle =
|
|
30
|
+
const sharedAngle = useSharedValue(0);
|
|
31
31
|
|
|
32
|
-
const animatedFrontCardStyle =
|
|
32
|
+
const animatedFrontCardStyle = useAnimatedStyle(() => {
|
|
33
33
|
return {
|
|
34
34
|
zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
|
|
35
35
|
transform: [
|
|
@@ -39,7 +39,7 @@ export default function FlipCard(props: FlipCardProps) {
|
|
|
39
39
|
};
|
|
40
40
|
});
|
|
41
41
|
|
|
42
|
-
const animatedBackCardStyle =
|
|
42
|
+
const animatedBackCardStyle = useAnimatedStyle(() => {
|
|
43
43
|
return {
|
|
44
44
|
zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
|
|
45
45
|
transform: [
|
|
@@ -51,7 +51,7 @@ export default function FlipCard(props: FlipCardProps) {
|
|
|
51
51
|
|
|
52
52
|
useEffect(() => {
|
|
53
53
|
sharedAngle.value = 0;
|
|
54
|
-
sharedAngle.value =
|
|
54
|
+
sharedAngle.value = withTiming(180, { duration: 500 });
|
|
55
55
|
}, [reanimationKey]);
|
|
56
56
|
|
|
57
57
|
return (
|
|
@@ -65,4 +65,4 @@ export default function FlipCard(props: FlipCardProps) {
|
|
|
65
65
|
</Animated.View>
|
|
66
66
|
</View>
|
|
67
67
|
);
|
|
68
|
-
};
|
|
68
|
+
};
|
package/src/hooks/useHeight.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ViewProps } from 'react-native';
|
|
3
|
-
import
|
|
3
|
+
import { useWorkletCallback } from 'react-native-reanimated';
|
|
4
4
|
|
|
5
5
|
type OnLayoutCallback = ViewProps['onLayout'];
|
|
6
6
|
|
|
7
7
|
export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
|
|
8
8
|
const [height, setHeight] = React.useState<number>(initialHeight);
|
|
9
9
|
|
|
10
|
-
const onLayout =
|
|
10
|
+
const onLayout = useWorkletCallback((e) => {
|
|
11
11
|
setHeight(e.nativeEvent.layout.height);
|
|
12
12
|
}, []);
|
|
13
13
|
|