@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.
Files changed (153) hide show
  1. package/build/commonjs/AnimatedY/AnimatedY.js +3 -5
  2. package/build/commonjs/AnimatedY/AnimatedY.js.map +1 -1
  3. package/build/commonjs/AnimatedY/AnimatedYProps.js.map +1 -1
  4. package/build/commonjs/AnimatedY/index.js.map +1 -1
  5. package/build/commonjs/BottomSheet/BottomSheetNative.js +1 -1
  6. package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
  7. package/build/commonjs/BottomSheet/BottomSheetProps.js.map +1 -1
  8. package/build/commonjs/BottomSheet/BottomSheetWeb.js +2 -6
  9. package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
  10. package/build/commonjs/BottomSheet/TransparentBackdrop.js +1 -1
  11. package/build/commonjs/BottomSheet/TransparentBackdrop.js.map +1 -1
  12. package/build/commonjs/BottomSheet/index.js.map +1 -1
  13. package/build/commonjs/BottomSheet/index.native.js.map +1 -1
  14. package/build/commonjs/Carousel/CarouselNative.js.map +1 -1
  15. package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
  16. package/build/commonjs/Carousel/CarouselWeb.js +1 -1
  17. package/build/commonjs/Carousel/CarouselWeb.js.map +1 -1
  18. package/build/commonjs/Carousel/index.js.map +1 -1
  19. package/build/commonjs/Carousel/index.native.js.map +1 -1
  20. package/build/commonjs/Carousel/utils.js +1 -1
  21. package/build/commonjs/Carousel/utils.js.map +1 -1
  22. package/build/commonjs/ComicViewer/ComicViewer.js +16 -11
  23. package/build/commonjs/ComicViewer/ComicViewer.js.map +1 -1
  24. package/build/commonjs/ComicViewer/ComicViewerItemProps.js.map +1 -1
  25. package/build/commonjs/ComicViewer/ComicViewerProps.js.map +1 -1
  26. package/build/commonjs/ComicViewer/ViewerItem.js +4 -3
  27. package/build/commonjs/ComicViewer/ViewerItem.js.map +1 -1
  28. package/build/commonjs/ComicViewer/index.js.map +1 -1
  29. package/build/commonjs/DateTimePicker/DateTimePicker.js +2 -2
  30. package/build/commonjs/DateTimePicker/DateTimePicker.js.map +1 -1
  31. package/build/commonjs/DateTimePicker/DateTimePickerProps.js.map +1 -1
  32. package/build/commonjs/DateTimePicker/DateTimePickerProvider.js.map +1 -1
  33. package/build/commonjs/DateTimePicker/YearPicker.js +21 -17
  34. package/build/commonjs/DateTimePicker/YearPicker.js.map +1 -1
  35. package/build/commonjs/DateTimePicker/index.js +4 -4
  36. package/build/commonjs/DateTimePicker/index.js.map +1 -1
  37. package/build/commonjs/DateTimePicker/utils.js +2 -1
  38. package/build/commonjs/DateTimePicker/utils.js.map +1 -1
  39. package/build/commonjs/FlipCard/FlipCard.js +5 -11
  40. package/build/commonjs/FlipCard/FlipCard.js.map +1 -1
  41. package/build/commonjs/FlipCard/FlipCardProps.js.map +1 -1
  42. package/build/commonjs/FlipCard/index.js.map +1 -1
  43. package/build/commonjs/StatusBarProvider/Provider.js +1 -1
  44. package/build/commonjs/StatusBarProvider/Provider.js.map +1 -1
  45. package/build/commonjs/StatusBarProvider/StatusBarProvider.js.map +1 -1
  46. package/build/commonjs/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
  47. package/build/commonjs/StatusBarProvider/index.js.map +1 -1
  48. package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +1 -1
  49. package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
  50. package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
  51. package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
  52. package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
  53. package/build/commonjs/ViewPager/index.js.map +1 -1
  54. package/build/commonjs/ViewPager/index.native.js.map +1 -1
  55. package/build/commonjs/ViewPager/utils.js +13 -11
  56. package/build/commonjs/ViewPager/utils.js.map +1 -1
  57. package/build/commonjs/hooks/index.js.map +1 -1
  58. package/build/commonjs/hooks/useAppbarStyles.js.map +1 -1
  59. package/build/commonjs/hooks/useElevationStyle.js.map +1 -1
  60. package/build/commonjs/hooks/useHeight.js +5 -4
  61. package/build/commonjs/hooks/useHeight.js.map +1 -1
  62. package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +20 -33
  63. package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
  64. package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js +7 -9
  65. package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
  66. package/build/commonjs/hooks/useWidth.js.map +1 -1
  67. package/build/commonjs/index.js +10 -10
  68. package/build/commonjs/index.js.map +1 -1
  69. package/build/module/AnimatedY/AnimatedY.js +4 -4
  70. package/build/module/AnimatedY/AnimatedY.js.map +1 -1
  71. package/build/module/AnimatedY/AnimatedYProps.js.map +1 -1
  72. package/build/module/AnimatedY/index.js.map +1 -1
  73. package/build/module/BottomSheet/BottomSheetNative.js +1 -1
  74. package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
  75. package/build/module/BottomSheet/BottomSheetProps.js.map +1 -1
  76. package/build/module/BottomSheet/BottomSheetWeb.js +2 -6
  77. package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
  78. package/build/module/BottomSheet/TransparentBackdrop.js +1 -1
  79. package/build/module/BottomSheet/TransparentBackdrop.js.map +1 -1
  80. package/build/module/BottomSheet/index.js.map +1 -1
  81. package/build/module/BottomSheet/index.native.js.map +1 -1
  82. package/build/module/Carousel/CarouselNative.js.map +1 -1
  83. package/build/module/Carousel/CarouselProps.js.map +1 -1
  84. package/build/module/Carousel/CarouselWeb.js +1 -1
  85. package/build/module/Carousel/CarouselWeb.js.map +1 -1
  86. package/build/module/Carousel/index.js.map +1 -1
  87. package/build/module/Carousel/index.native.js.map +1 -1
  88. package/build/module/Carousel/utils.js.map +1 -1
  89. package/build/module/ComicViewer/ComicViewer.js +16 -11
  90. package/build/module/ComicViewer/ComicViewer.js.map +1 -1
  91. package/build/module/ComicViewer/ComicViewerItemProps.js.map +1 -1
  92. package/build/module/ComicViewer/ComicViewerProps.js.map +1 -1
  93. package/build/module/ComicViewer/ViewerItem.js +4 -3
  94. package/build/module/ComicViewer/ViewerItem.js.map +1 -1
  95. package/build/module/ComicViewer/index.js.map +1 -1
  96. package/build/module/DateTimePicker/DateTimePicker.js +2 -2
  97. package/build/module/DateTimePicker/DateTimePicker.js.map +1 -1
  98. package/build/module/DateTimePicker/DateTimePickerProps.js.map +1 -1
  99. package/build/module/DateTimePicker/DateTimePickerProvider.js.map +1 -1
  100. package/build/module/DateTimePicker/YearPicker.js +21 -17
  101. package/build/module/DateTimePicker/YearPicker.js.map +1 -1
  102. package/build/module/DateTimePicker/index.js.map +1 -1
  103. package/build/module/DateTimePicker/utils.js +2 -1
  104. package/build/module/DateTimePicker/utils.js.map +1 -1
  105. package/build/module/FlipCard/FlipCard.js +5 -5
  106. package/build/module/FlipCard/FlipCard.js.map +1 -1
  107. package/build/module/FlipCard/FlipCardProps.js.map +1 -1
  108. package/build/module/FlipCard/index.js.map +1 -1
  109. package/build/module/StatusBarProvider/Provider.js.map +1 -1
  110. package/build/module/StatusBarProvider/StatusBarProvider.js.map +1 -1
  111. package/build/module/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
  112. package/build/module/StatusBarProvider/index.js.map +1 -1
  113. package/build/module/ViewPager/ChildrenMemoizedPage.js +1 -1
  114. package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
  115. package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
  116. package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
  117. package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
  118. package/build/module/ViewPager/index.js.map +1 -1
  119. package/build/module/ViewPager/index.native.js.map +1 -1
  120. package/build/module/ViewPager/utils.js +11 -10
  121. package/build/module/ViewPager/utils.js.map +1 -1
  122. package/build/module/hooks/index.js.map +1 -1
  123. package/build/module/hooks/useAppbarStyles.js.map +1 -1
  124. package/build/module/hooks/useElevationStyle.js.map +1 -1
  125. package/build/module/hooks/useHeight.js +4 -3
  126. package/build/module/hooks/useHeight.js.map +1 -1
  127. package/build/module/hooks/useUnstableCollapsibleAppBar.js +20 -23
  128. package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
  129. package/build/module/hooks/useUnstableToggleDisplayStyle.js +7 -5
  130. package/build/module/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
  131. package/build/module/hooks/useWidth.js.map +1 -1
  132. package/build/module/index.js.map +1 -1
  133. package/build/typescript/AnimatedY/AnimatedY.d.ts +0 -1
  134. package/build/typescript/BottomSheet/BottomSheetNative.d.ts +0 -1
  135. package/build/typescript/BottomSheet/BottomSheetWeb.d.ts +0 -1
  136. package/build/typescript/BottomSheet/TransparentBackdrop.d.ts +0 -1
  137. package/build/typescript/Carousel/CarouselNative.d.ts +0 -1
  138. package/build/typescript/ComicViewer/ComicViewer.d.ts +0 -1
  139. package/build/typescript/DateTimePicker/DateTimePicker.d.ts +0 -1
  140. package/build/typescript/DateTimePicker/YearPicker.d.ts +0 -1
  141. package/build/typescript/FlipCard/FlipCard.d.ts +0 -1
  142. package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts +0 -1
  143. package/build/typescript/ViewPager/ViewPagerNative.d.ts +0 -1
  144. package/build/typescript/ViewPager/ViewPagerWeb.d.ts +0 -1
  145. package/build/typescript/hooks/useUnstableCollapsibleAppBar.d.ts +2 -3
  146. package/build/typescript/hooks/useUnstableToggleDisplayStyle.d.ts +2 -2
  147. package/package.json +6 -5
  148. package/src/AnimatedY/AnimatedY.tsx +4 -4
  149. package/src/DateTimePicker/DateTimePicker.tsx +2 -2
  150. package/src/FlipCard/FlipCard.tsx +6 -6
  151. package/src/hooks/useHeight.ts +2 -2
  152. package/src/hooks/useUnstableCollapsibleAppBar.ts +25 -23
  153. package/src/hooks/useUnstableToggleDisplayStyle.ts +6 -5
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
- import Animated from 'react-native-reanimated';
3
- export default function useHeight(initialHeight = 0) {
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 = Animated.useWorkletCallback(e => {
6
+ const onLayout = useWorkletCallback(e => {
6
7
  setHeight(e.nativeEvent.layout.height);
7
8
  }, []);
8
9
  return [height, onLayout];
@@ -1 +1 @@
1
- {"version":3,"sources":["useHeight.ts"],"names":["React","Animated","useHeight","initialHeight","height","setHeight","useState","onLayout","useWorkletCallback","e","nativeEvent","layout"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,MAAqB,yBAArB;AAIA,eAAe,SAASC,SAAT,CAAmBC,aAAa,GAAG,CAAnC,EAAkE;AAC7E,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBL,KAAK,CAACM,QAAN,CAAuBH,aAAvB,CAA5B;AAEA,QAAMI,QAAQ,GAAGN,QAAQ,CAACO,kBAAT,CAA6BC,CAAD,IAAO;AAChDJ,IAAAA,SAAS,CAACI,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBP,MAAtB,CAAT;AACH,GAFgB,EAEd,EAFc,CAAjB;AAIA,SAAO,CAACA,MAAD,EAASG,QAAT,CAAP;AACH;AAAA","sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport Animated 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 = Animated.useWorkletCallback((e) => {\n setHeight(e.nativeEvent.layout.height);\n }, []);\n\n return [height, onLayout];\n};\n"]}
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 Animated from 'react-native-reanimated';
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(userOptions = defaultOptions) {
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 = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
35
- const translateY = Animated.useSharedValue(0);
36
- const lastTranslateY = Animated.useSharedValue(0);
37
- const lastOffsetY = Animated.useSharedValue(0);
38
- const prevOffsetY = Animated.useSharedValue(0);
39
- const overlapped = Animated.useSharedValue(false);
40
- const vectorY = Animated.useSharedValue(0);
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 = Animated.useAnimatedStyle(() => {
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 = Animated.withTiming(0, {
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 = (_offsetsRef$current$n = offsetsRef.current[nextIndex]) !== null && _offsetsRef$current$n !== void 0 ? _offsetsRef$current$n : 0;
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 = Animated.withTiming(0, {
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 = Animated.useAnimatedScrollHandler({
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 = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
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 = Animated.withTiming(0, {
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 = Animated.withTiming(nextTranslateY, {
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, translucent ? {
152
+ const appBarStyle = [animatedStyle, {
156
153
  paddingTop: safeAreaInsets.top
157
- } : undefined, hasCollapsible ? styles.floating : undefined];
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":"AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,SAAgBC,QAAhB,QAAwF,cAAxF;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,SAAP,MAAsB,aAAtB;AAgCA,MAAMC,cAAiC,GAAG;AACtCC,EAAAA,WAAW,EAAE,KADyB;AAEtCC,EAAAA,qBAAqB,EAAE;AAFe,CAA1C;AAKA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGV,QAAQ,CAACW,EAAT,KAAgB,KAAhD;;AAGA,SAASC,6BAAT,CAAuCC,KAAvC,EAAsD;AAClD,QAAMC,kBAAkB,GAAGf,MAAM,CAAC,CAAC,CAAD,EAAI,CAAJ,CAAD,CAAjC;AAEAe,EAAAA,kBAAkB,CAACC,OAAnB,CAA2BC,KAA3B;AACAF,EAAAA,kBAAkB,CAACC,OAAnB,CAA2BE,IAA3B,CAAgCJ,KAAhC;AAEA,SAAOK,IAAI,CAACC,GAAL,CAAS,GAAGL,kBAAkB,CAACC,OAA/B,CAAP;AACH;;AAGD,eAAe,SAASK,4BAAT,CAAsCC,WAAoB,GAAGf,cAA7D,EAAgG;AAC3G,QAAM;AACFC,IAAAA,WADE;AAEFC,IAAAA;AAFE,MAGiB,EACnB,GAAGF,cADgB;AAEnB,OAAGe;AAFgB,GAHvB;AAQA,QAAMC,MAAM,GAAGnB,eAAe,EAA9B;AAEA,QAAMoB,cAAc,GAAGrB,iBAAiB,EAAxC;AAEA,QAAM,CAACsB,YAAD,EAAeC,cAAf,IAAiCpB,SAAS,EAAhD;AACA,QAAMqB,eAAe,GAAGd,6BAA6B,CAACY,YAAD,CAArD;AACA,QAAM,CAACG,wBAAD,EAA2BC,0BAA3B,IAAyDvB,SAAS,EAAxE;AAEA,QAAMwB,aAAa,GAAG5B,QAAQ,CAAC6B,eAAT,CAAyB,MAAM,CAACH,wBAAhC,CAAtB;AAEA,QAAMI,UAAU,GAAG9B,QAAQ,CAAC+B,cAAT,CAAgC,CAAhC,CAAnB;AACA,QAAMC,cAAc,GAAGhC,QAAQ,CAAC+B,cAAT,CAAgC,CAAhC,CAAvB;AACA,QAAME,WAAW,GAAGjC,QAAQ,CAAC+B,cAAT,CAAgC,CAAhC,CAApB;AACA,QAAMG,WAAW,GAAGlC,QAAQ,CAAC+B,cAAT,CAAgC,CAAhC,CAApB;AACA,QAAMI,UAAU,GAAGnC,QAAQ,CAAC+B,cAAT,CAAiC,KAAjC,CAAnB;AACA,QAAMK,OAAO,GAAGpC,QAAQ,CAAC+B,cAAT,CAAgC,CAAhC,CAAhB;AAEA,QAAMM,cAAc,GAAGlC,iBAAiB,CAAC,CAAD,CAAxC;AACA,QAAMmC,aAAa,GAAGtC,QAAQ,CAACuC,gBAAT,CAA0B,MAAM;AAClD,WAAOxC,QAAQ,CAACW,EAAT,KAAgB,KAAhB,GAAyB;AAC5B8B,MAAAA,SAAS,EAAE,CAAC;AAAEV,QAAAA,UAAU,EAAEA,UAAU,CAAClB;AAAzB,OAAD,CADiB;AAE5B6B,MAAAA,SAAS,EAAEN,UAAU,CAACvB,KAAX,GAAmByB,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEI,SAAnC,GAA+C;AAF9B,KAAzB,GAGD;AACFD,MAAAA,SAAS,EAAE,CAAC;AAAEV,QAAAA,UAAU,EAAEA,UAAU,CAAClB;AAAzB,OAAD,CADT;AAEF8B,MAAAA,SAAS,EAAEP,UAAU,CAACvB,KAAX,GAAmByB,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEK,SAAnC,GAA+C,CAFxD;AAGFC,MAAAA,WAAW,EAAEN,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEM,WAH3B;AAIFC,MAAAA,YAAY,EAAEP,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEO,YAJ5B;AAKFC,MAAAA,YAAY,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,YAL5B;AAMFC,MAAAA,aAAa,EAAEX,UAAU,CAACvB,KAAX,GAAmByB,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAES,aAAnC,GAAmD;AANhE,KAHN;AAWH,GAZqB,CAAtB;AAcA,QAAMC,QAAQ,GAAGlD,KAAK,CAACC,MAAN,CAAqB,CAArB,CAAjB;AACA,QAAMkD,UAAU,GAAGnD,KAAK,CAACC,MAAN,CAA4B,EAA5B,CAAnB;;AAEA,QAAMmD,mBAAmB,GAAIC,SAAD,IAAuB;AAAA;;AAC/C,UAAMC,SAAS,GAAGJ,QAAQ,CAACjC,OAA3B;;AACA,QAAIqC,SAAS,KAAKD,SAAlB,EAA6B;AACzB,UAAI3C,qBAAJ,EAA2B;AACvBuB,QAAAA,UAAU,CAAClB,KAAX,GAAmBZ,QAAQ,CAACoD,UAAT,CAAoB,CAApB,EAAuB;AACtCC,UAAAA,QAAQ,EAAE7C;AAD4B,SAAvB,CAAnB;AAIA4B,QAAAA,OAAO,CAACxB,KAAR,GAAgB,CAAhB;AACAoC,QAAAA,UAAU,CAAClC,OAAX,GAAqB,EAArB;AACAqB,QAAAA,UAAU,CAACvB,KAAX,GAAmB,KAAnB;AACH;;AAED;AACH;;AAEDoC,IAAAA,UAAU,CAAClC,OAAX,CAAmBqC,SAAnB,IAAgClB,WAAW,CAACrB,KAA5C;AAEA,UAAM0C,YAAY,4BAAGN,UAAU,CAAClC,OAAX,CAAmBoC,SAAnB,CAAH,yEAAoC,CAAtD;AACAjB,IAAAA,WAAW,CAACrB,KAAZ,GAAoB0C,YAApB;AAEAP,IAAAA,QAAQ,CAACjC,OAAT,GAAmBoC,SAAnB,CArB+C,CAuB/C;;AACAf,IAAAA,UAAU,CAACvB,KAAX,GAAmB0C,YAAY,GAAG,CAAlC,CAxB+C,CA0B/C;;AACA,QAAIxB,UAAU,CAAClB,KAAX,GAAmB,CAAnB,IAAwB0C,YAAY,GAAG/B,YAA3C,EAAyD;AACrDO,MAAAA,UAAU,CAAClB,KAAX,GAAmBZ,QAAQ,CAACoD,UAAT,CAAoB,CAApB,EAAuB;AACtCC,QAAAA,QAAQ,EAAE7C;AAD4B,OAAvB,CAAnB;AAIA4B,MAAAA,OAAO,CAACxB,KAAR,GAAgB,CAAhB;AACH;AACJ,GAlCD;;AAoCA,QAAM2C,aAAa,GAAGvD,QAAQ,CAACwD,wBAAT,CAAkC;AACpDC,IAAAA,WAAW,EAAE,MAAM;AACfzB,MAAAA,cAAc,CAACpB,KAAf,GAAuBkB,UAAU,CAAClB,KAAlC;AACH,KAHmD;AAIpD8C,IAAAA,eAAe,EAAE,MAAM;AACnB1B,MAAAA,cAAc,CAACpB,KAAf,GAAuBkB,UAAU,CAAClB,KAAlC;AACH,KANmD;AAOpD+C,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACjB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEA,YAAMC,EAAE,GAAGlC,UAAU,CAAClB,KAAtB;AACA,YAAMqD,KAAK,GAAGrC,aAAa,CAAChB,KAA5B;AAEA,YAAMsD,MAAM,GAAGL,OAAO,GAAG3B,WAAW,CAACtB,KAArC;AACAwB,MAAAA,OAAO,CAACxB,KAAR,GAAiBwB,OAAO,CAACxB,KAAR,GAAgBsD,MAAhB,IAA0B,CAA1B,IAA+BL,OAAO,GAAG,CAA1C,GAA+CzB,OAAO,CAACxB,KAAR,GAAgBsD,MAA/D,GAAwEA,MAAxF;AACAhC,MAAAA,WAAW,CAACtB,KAAZ,GAAoBiD,OAApB;;AAEA,UAAIpD,uBAAJ,EAA6B;AACzB,cAAM0D,EAAE,GAAGN,OAAO,GAAG5B,WAAW,CAACrB,KAAjC;AAEAkB,QAAAA,UAAU,CAAClB,KAAX,GAAmBiD,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmB5C,IAAI,CAACmD,GAAL,CAASnD,IAAI,CAACC,GAAL,CAASc,cAAc,CAACpB,KAAf,GAAuBuD,EAAhC,EAAoCF,KAApC,CAAT,EAAqD,CAArD,CAAtC;AAEA9B,QAAAA,UAAU,CAACvB,KAAX,GAAmBiD,OAAO,GAAG/B,UAAU,CAAClB,KAArB,GAA6B,CAAhD;AACH,OAND,MAMO;AACH,YAAIiD,OAAO,GAAG,CAACI,KAAf,EAAsB;AAClB,cAAID,EAAE,KAAK,CAAX,EAAc;AACVlC,YAAAA,UAAU,CAAClB,KAAX,GAAmBZ,QAAQ,CAACoD,UAAT,CAAoBnC,IAAI,CAACmD,GAAL,CAASnD,IAAI,CAACC,GAAL,CAAS,CAAC2C,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAApB,EAA4D;AAC3EZ,cAAAA,QAAQ,EAAE7C;AADiE,aAA5D,CAAnB;AAGH;AACJ,SAND,MAMO;AACH,cAAIwD,EAAE,KAAKC,KAAX,EAAkB;AACdnC,YAAAA,UAAU,CAAClB,KAAX,GAAmBZ,QAAQ,CAACoD,UAAT,CAAoB,CAApB,EAAuB;AACtCC,cAAAA,QAAQ,EAAE7C;AAD4B,aAAvB,CAAnB;AAGH;AACJ;;AAED2B,QAAAA,UAAU,CAACvB,KAAX,GAAmBiD,OAAO,GAAG,CAA7B;AAEA5B,QAAAA,WAAW,CAACrB,KAAZ,GAAoBiD,OAApB;AACH;AACJ,KA1CmD;AA2CpDQ,IAAAA,SAAS,EAAGT,KAAD,IAAW;AAClB3B,MAAAA,WAAW,CAACrB,KAAZ,GAAoBgD,KAAK,CAACE,aAAN,CAAoBC,CAAxC;AACH,KA7CmD;AA8CpDO,IAAAA,aAAa,EAAGV,KAAD,IAAW;AACtB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEA9B,MAAAA,WAAW,CAACrB,KAAZ,GAAoBiD,OAApB;AAEA,YAAMG,EAAE,GAAGlC,UAAU,CAAClB,KAAtB;AACA,YAAMqD,KAAK,GAAGrC,aAAa,CAAChB,KAA5B,CANsB,CAQtB;;AACA,UAAIoD,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;AACxB;AACH;;AAED,YAAMO,SAAS,GAAGN,KAAK,GAAG,GAA1B;AAEA,YAAMO,cAAc,GAAIR,EAAE,GAAGO,SAAL,IAAkBV,OAAO,GAAGtC,YAA7B,GAA6C,CAA7C,GAAiD0C,KAAxE;AAEA9B,MAAAA,UAAU,CAACvB,KAAX,GAAmBiD,OAAO,GAAGW,cAAV,GAA2B,CAA9C;AAEA1C,MAAAA,UAAU,CAAClB,KAAX,GAAmBZ,QAAQ,CAACoD,UAAT,CAAoBoB,cAApB,EAAoC;AACnDnB,QAAAA,QAAQ,EAAE7C;AADyC,OAApC,CAAnB;AAGH;AApEmD,GAAlC,CAAtB;AAuEA,QAAMiE,cAAc,GAAG/C,wBAAwB,GAAG,CAAlD;AAEA,QAAMgD,WAAW,GAAG,CAChBpC,aADgB,EAEhBhC,WAAW,GAAG;AAAEqE,IAAAA,UAAU,EAAErD,cAAc,CAACsD;AAA7B,GAAH,GAAwCC,SAFnC,EAGhBJ,cAAc,GAAGpD,MAAM,CAACyD,QAAV,GAAqBD,SAHnB,CAApB;AAMA,SAAO;AACHH,IAAAA,WADG;AAEHtC,IAAAA,OAFG;AAGHZ,IAAAA,cAHG;AAIHG,IAAAA,0BAJG;AAKHgC,IAAAA,QAAQ,EAAEJ,aALP;AAMHN,IAAAA,mBANG;AAOH8B,IAAAA,mBAAmB,EAAE;AAAEH,MAAAA,GAAG,EAAEH,cAAc,GAAGhD,eAAH,GAAqB;AAA1C;AAPlB,GAAP;AASH;AAAA","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 Animated from 'react-native-reanimated';
2
- export default function useAnimatedDisplayStyle(vectorY, threshold = 200, defaultDisplay = 'flex') {
3
- const display = Animated.useSharedValue(defaultDisplay);
4
- Animated.useAnimatedReaction(() => vectorY.value, vy => {
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 Animated.useAnimatedStyle(() => ({
13
+ return useAnimatedStyle(() => ({
12
14
  display: display.value
13
15
  }));
14
16
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["useUnstableToggleDisplayStyle.ts"],"names":["Animated","useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"mappings":"AAAA,OAAOA,QAAP,MAAqB,yBAArB;AAEA,eAAe,SAASC,uBAAT,CACXC,OADW,EAEXC,SAAiB,GAAG,GAFT,EAGXC,cAA+B,GAAG,MAHvB,EAIb;AACE,QAAMC,OAAO,GAAGL,QAAQ,CAACM,cAAT,CAAwBF,cAAxB,CAAhB;AAEAJ,EAAAA,QAAQ,CAACO,mBAAT,CACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;AACJ,QAAIA,EAAE,IAAIN,SAAV,EAAqB;AACjBE,MAAAA,OAAO,CAACG,KAAR,GAAgB,MAAhB;AACH,KAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;AACvBE,MAAAA,OAAO,CAACG,KAAR,GAAgB,MAAhB;AACH;AACJ,GARL;AAWA,SAAOR,QAAQ,CAACU,gBAAT,CAA0B,OAAO;AACpCL,IAAAA,OAAO,EAAEA,OAAO,CAACG;AADmB,GAAP,CAA1B,CAAP;AAGH;AAAA","sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n vectorY: Animated.SharedValue<number>,\n threshold: number = 200,\n defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n const display = Animated.useSharedValue(defaultDisplay);\n\n Animated.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 Animated.useAnimatedStyle(() => ({\n display: display.value,\n }));\n};\n"]}
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,"sources":["useWidth.ts"],"names":["React","useWindowDimensions","useWidth","window","width","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAA4BC,mBAA5B,QAAkE,cAAlE;AAEA,eAAe,SAASC,QAAT,GAAqD;AAChE,QAAMC,MAAM,GAAGF,mBAAmB,EAAlC;AACA,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBL,KAAK,CAACM,QAAN,CAAeH,MAAM,CAACC,KAAtB,CAA1B;AAEA,QAAMG,QAAQ,GAAGP,KAAK,CAACQ,WAAN,CAAmBC,CAAD,IAA0B;AACzD,UAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBR,KAAtC;;AAEA,QAAIM,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWV,KAAX,CAA7C,EAAgE;AAC5DC,MAAAA,QAAQ,CAACK,QAAD,CAAR;AACH;AACJ,GANgB,EAMd,EANc,CAAjB;AAQA,SAAO,CAACN,KAAD,EAAQG,QAAR,CAAP;AACH","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}"]}
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,"sources":["index.ts"],"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","ComicViewer","StatusBarProvider","useStatusBarContext"],"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","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"]}
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,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type AnimatedYProps from './AnimatedYProps';
3
2
  export default function AnimatedY(props: AnimatedYProps): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type BottomSheetProps from './BottomSheetProps';
3
2
  export default function BottomSheet(props: BottomSheetProps): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type BottomSheetProps from './BottomSheetProps';
3
2
  export default function BottomSheet(props: BottomSheetProps): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
3
2
  export default function TransparentBackdrop(props: BottomSheetBackdropProps): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type CarouselProps from './CarouselProps';
3
2
  export default function Carousel<ItemT>(props: CarouselProps<ItemT>): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import { default as ComicViewerProps } from './ComicViewerProps';
3
2
  export default function ComicViewer<T>(props: ComicViewerProps<T>): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type DateTimePickerProps from './DateTimePickerProps';
3
2
  export default function DateTimePicker(props: DateTimePickerProps): JSX.Element;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  interface YearPickerProps {
3
2
  date: Date;
4
3
  locale?: string;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type FlipCardProps from './FlipCardProps';
3
2
  export default function FlipCard(props: FlipCardProps): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type StatusBarProviderProps from './StatusBarProviderProps';
3
2
  export default function StatusBarProvider(props: StatusBarProviderProps): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type ViewPagerProps from './ViewPagerProps';
3
2
  export default function ViewPager(props: ViewPagerProps): JSX.Element;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type ViewPagerProps from './ViewPagerProps';
3
2
  export default function ViewPager(props: ViewPagerProps): JSX.Element;
@@ -1,5 +1,5 @@
1
1
  import { Falsy, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
2
- import Animated from 'react-native-reanimated';
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: Animated.SharedValue<number>;
20
+ vectorY: SharedValue<number>;
22
21
  onAppBarLayout: OnLayoutCallback;
23
22
  onCollapsibleToolbarLayout: OnLayoutCallback;
24
23
  onScroll: OnScroll;
@@ -1,4 +1,4 @@
1
- import Animated from 'react-native-reanimated';
2
- export default function useAnimatedDisplayStyle(vectorY: Animated.SharedValue<number>, threshold?: number, defaultDisplay?: 'flex' | 'none'): {
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.4",
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.4.1",
19
- "@emotion/styled": "^11.0.0",
20
- "@fountain-ui/icons": "^2.0.0-beta.4",
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": "041cca35a665927dfc8185624c7be2c4a2e86041"
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 = Animated.useSharedValue(translateY);
13
- const animatedStyle = Animated.useAnimatedStyle(() => ({
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 = Animated.withTiming(translateY, {
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.background.default,
86
- calendarBackground: theme.palette.background.default,
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 = Animated.useSharedValue(0);
30
+ const sharedAngle = useSharedValue(0);
31
31
 
32
- const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
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 = Animated.useAnimatedStyle(() => {
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 = Animated.withTiming(180, { duration: 500 });
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
+ };
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import { ViewProps } from 'react-native';
3
- import Animated from 'react-native-reanimated';
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 = Animated.useWorkletCallback((e) => {
10
+ const onLayout = useWorkletCallback((e) => {
11
11
  setHeight(e.nativeEvent.layout.height);
12
12
  }, []);
13
13