@fountain-ui/core 2.0.0-beta.6 → 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/hooks/useCollapsibleAppBar.js +3 -5
- package/build/commonjs/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +4 -6
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js +3 -5
- package/build/module/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +4 -6
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/build/typescript/hooks/useCollapsibleAppBar.d.ts +0 -1
- package/build/typescript/hooks/useFadeInAppBar.d.ts +0 -1
- package/package.json +2 -2
- package/src/hooks/useCollapsibleAppBar.ts +2 -4
- package/src/hooks/useFadeInAppBar.ts +1 -4
|
@@ -22,15 +22,13 @@ var _useAppbarStyles = _interopRequireDefault(require("./useAppbarStyles"));
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
23
|
|
|
24
24
|
const defaultOptions = {
|
|
25
|
-
keyboardDismissMode: 'none'
|
|
26
|
-
translucent: false
|
|
25
|
+
keyboardDismissMode: 'none'
|
|
27
26
|
};
|
|
28
27
|
const ANIMATION_DURATION_MILLIS = 100;
|
|
29
28
|
const SUPPORTS_DRAG_DETECTION = _reactNative.Platform.OS !== 'web';
|
|
30
29
|
|
|
31
30
|
function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
32
31
|
const {
|
|
33
|
-
translucent,
|
|
34
32
|
keyboardDismissMode
|
|
35
33
|
} = { ...defaultOptions,
|
|
36
34
|
...userOptions
|
|
@@ -159,9 +157,9 @@ function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
159
157
|
});
|
|
160
158
|
|
|
161
159
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
162
|
-
const appBarStyle = [animatedStyle,
|
|
160
|
+
const appBarStyle = [animatedStyle, {
|
|
163
161
|
paddingTop: safeAreaInsets.top
|
|
164
|
-
}
|
|
162
|
+
}, hasCollapsible ? styles.floating : undefined];
|
|
165
163
|
return {
|
|
166
164
|
appBarStyle,
|
|
167
165
|
onAppBarLayout,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","keyboardDismissMode","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\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 keyboardDismissMode?: 'none' | 'on-drag';\n translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { translucent, keyboardDismissMode }: 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 [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 overlapped = Animated.useSharedValue<boolean>(false);\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 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 };\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n Animated.runOnJS(Keyboard.dismiss)();\n }\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 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 onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","keyboardDismissMode","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\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 keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode }: 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 [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 overlapped = Animated.useSharedValue<boolean>(false);\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 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 };\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n Animated.runOnJS(Keyboard.dismiss)();\n }\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 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 { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"]}
|
|
@@ -27,8 +27,7 @@ const defaultOptions = {
|
|
|
27
27
|
fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
|
|
28
28
|
fadeInEndY: appBarHeight => appBarHeight,
|
|
29
29
|
floating: true,
|
|
30
|
-
keyboardDismissMode: 'none'
|
|
31
|
-
translucent: false
|
|
30
|
+
keyboardDismissMode: 'none'
|
|
32
31
|
};
|
|
33
32
|
const shadowOffset = _reactNative.Platform.OS === 'ios' ? {
|
|
34
33
|
width: 0,
|
|
@@ -40,8 +39,7 @@ function useFadeInAppBar(userOptions = defaultOptions) {
|
|
|
40
39
|
fadeInBeginY,
|
|
41
40
|
fadeInEndY,
|
|
42
41
|
floating,
|
|
43
|
-
keyboardDismissMode
|
|
44
|
-
translucent
|
|
42
|
+
keyboardDismissMode
|
|
45
43
|
} = { ...defaultOptions,
|
|
46
44
|
...userOptions
|
|
47
45
|
};
|
|
@@ -100,9 +98,9 @@ function useFadeInAppBar(userOptions = defaultOptions) {
|
|
|
100
98
|
}
|
|
101
99
|
});
|
|
102
100
|
|
|
103
|
-
const appBarStyle = [animatedAppBarStyle,
|
|
101
|
+
const appBarStyle = [animatedAppBarStyle, {
|
|
104
102
|
paddingTop: safeAreaInsets.top
|
|
105
|
-
}
|
|
103
|
+
}, floating ? styles.floating : undefined];
|
|
106
104
|
return {
|
|
107
105
|
appBarStyle,
|
|
108
106
|
titleStyle: [animatedTitleStyle],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFadeInAppBar.ts"],"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","
|
|
1
|
+
{"version":3,"sources":["useFadeInAppBar.ts"],"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","React","useMemo","beginY","dy","Animated","useSharedValue","lastOffsetY","normalized","backgroundColor","palette","background","default","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n fadeInEndY?: number | ((appBarHeight: number) => number);\n floating?: boolean;\n keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n appBarStyle: ViewStyleProp;\n titleStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n dy: Animated.SharedValue<number>;\n normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n fadeInEndY: (appBarHeight) => appBarHeight,\n floating: true,\n keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n const {\n fadeInBeginY,\n fadeInEndY,\n floating,\n keyboardDismissMode,\n }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const theme = useTheme();\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n\n const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n const endY = typeof fadeInEndY === 'function'\n ? fadeInEndY(appBarHeight)\n : fadeInEndY;\n\n const beginY = typeof fadeInBeginY === 'function'\n ? fadeInBeginY(endY, appBarHeight)\n : fadeInBeginY;\n\n return [beginY, endY];\n }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n const dy = Animated.useSharedValue<number>(0);\n const lastOffsetY = Animated.useSharedValue<number>(0);\n const normalized = Animated.useSharedValue<number>(0);\n\n const backgroundColor = theme.palette.background.default;\n const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n elevation: normalized.value >= 1 ? 6 : 0,\n shadowColor: '#000',\n shadowOffset,\n shadowRadius: 4.65,\n shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n }));\n\n const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n opacity: normalized.value,\n }));\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n Animated.runOnJS(Keyboard.dismiss)();\n }\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const distance = Math.max(toOffsetY - fromOffsetY, 1);\n const localOffsetY = offsetY - fromOffsetY;\n\n dy.value = offsetY - lastOffsetY.value;\n\n normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n });\n\n const appBarStyle = [\n animatedAppBarStyle,\n { paddingTop: safeAreaInsets.top },\n floating ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n titleStyle: [animatedTitleStyle],\n onAppBarLayout,\n onScroll: scrollHandler,\n dy,\n normalized,\n };\n};\n"]}
|
|
@@ -6,14 +6,12 @@ import { useHeight } from '../internal/hooks';
|
|
|
6
6
|
import useElevationStyle from './useElevationStyle';
|
|
7
7
|
import useAppbarStyles from './useAppbarStyles';
|
|
8
8
|
const defaultOptions = {
|
|
9
|
-
keyboardDismissMode: 'none'
|
|
10
|
-
translucent: false
|
|
9
|
+
keyboardDismissMode: 'none'
|
|
11
10
|
};
|
|
12
11
|
const ANIMATION_DURATION_MILLIS = 100;
|
|
13
12
|
const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
|
|
14
13
|
export default function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
15
14
|
const {
|
|
16
|
-
translucent,
|
|
17
15
|
keyboardDismissMode
|
|
18
16
|
} = { ...defaultOptions,
|
|
19
17
|
...userOptions
|
|
@@ -132,9 +130,9 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
132
130
|
}
|
|
133
131
|
});
|
|
134
132
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
135
|
-
const appBarStyle = [animatedStyle,
|
|
133
|
+
const appBarStyle = [animatedStyle, {
|
|
136
134
|
paddingTop: safeAreaInsets.top
|
|
137
|
-
}
|
|
135
|
+
}, hasCollapsible ? styles.floating : undefined];
|
|
138
136
|
return {
|
|
139
137
|
appBarStyle,
|
|
140
138
|
onAppBarLayout,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\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 keyboardDismissMode?: 'none' | 'on-drag';\n translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { translucent, keyboardDismissMode }: 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 [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 overlapped = Animated.useSharedValue<boolean>(false);\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 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 };\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n Animated.runOnJS(Keyboard.dismiss)();\n }\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 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 onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\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 keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode }: 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 [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 overlapped = Animated.useSharedValue<boolean>(false);\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 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 };\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n Animated.runOnJS(Keyboard.dismiss)();\n }\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 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 { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"]}
|
|
@@ -10,8 +10,7 @@ const defaultOptions = {
|
|
|
10
10
|
fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
|
|
11
11
|
fadeInEndY: appBarHeight => appBarHeight,
|
|
12
12
|
floating: true,
|
|
13
|
-
keyboardDismissMode: 'none'
|
|
14
|
-
translucent: false
|
|
13
|
+
keyboardDismissMode: 'none'
|
|
15
14
|
};
|
|
16
15
|
const shadowOffset = Platform.OS === 'ios' ? {
|
|
17
16
|
width: 0,
|
|
@@ -22,8 +21,7 @@ export default function useFadeInAppBar(userOptions = defaultOptions) {
|
|
|
22
21
|
fadeInBeginY,
|
|
23
22
|
fadeInEndY,
|
|
24
23
|
floating,
|
|
25
|
-
keyboardDismissMode
|
|
26
|
-
translucent
|
|
24
|
+
keyboardDismissMode
|
|
27
25
|
} = { ...defaultOptions,
|
|
28
26
|
...userOptions
|
|
29
27
|
};
|
|
@@ -72,9 +70,9 @@ export default function useFadeInAppBar(userOptions = defaultOptions) {
|
|
|
72
70
|
lastOffsetY.value = event.contentOffset.y;
|
|
73
71
|
}
|
|
74
72
|
});
|
|
75
|
-
const appBarStyle = [animatedAppBarStyle,
|
|
73
|
+
const appBarStyle = [animatedAppBarStyle, {
|
|
76
74
|
paddingTop: safeAreaInsets.top
|
|
77
|
-
}
|
|
75
|
+
}, floating ? styles.floating : undefined];
|
|
78
76
|
return {
|
|
79
77
|
appBarStyle,
|
|
80
78
|
titleStyle: [animatedTitleStyle],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFadeInAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","
|
|
1
|
+
{"version":3,"sources":["useFadeInAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","backgroundColor","palette","background","default","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n fadeInEndY?: number | ((appBarHeight: number) => number);\n floating?: boolean;\n keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n appBarStyle: ViewStyleProp;\n titleStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n dy: Animated.SharedValue<number>;\n normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n fadeInEndY: (appBarHeight) => appBarHeight,\n floating: true,\n keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n const {\n fadeInBeginY,\n fadeInEndY,\n floating,\n keyboardDismissMode,\n }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const theme = useTheme();\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n\n const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n const endY = typeof fadeInEndY === 'function'\n ? fadeInEndY(appBarHeight)\n : fadeInEndY;\n\n const beginY = typeof fadeInBeginY === 'function'\n ? fadeInBeginY(endY, appBarHeight)\n : fadeInBeginY;\n\n return [beginY, endY];\n }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n const dy = Animated.useSharedValue<number>(0);\n const lastOffsetY = Animated.useSharedValue<number>(0);\n const normalized = Animated.useSharedValue<number>(0);\n\n const backgroundColor = theme.palette.background.default;\n const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n elevation: normalized.value >= 1 ? 6 : 0,\n shadowColor: '#000',\n shadowOffset,\n shadowRadius: 4.65,\n shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n }));\n\n const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n opacity: normalized.value,\n }));\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n Animated.runOnJS(Keyboard.dismiss)();\n }\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const distance = Math.max(toOffsetY - fromOffsetY, 1);\n const localOffsetY = offsetY - fromOffsetY;\n\n dy.value = offsetY - lastOffsetY.value;\n\n normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n });\n\n const appBarStyle = [\n animatedAppBarStyle,\n { paddingTop: safeAreaInsets.top },\n floating ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n titleStyle: [animatedTitleStyle],\n onAppBarLayout,\n onScroll: scrollHandler,\n dy,\n normalized,\n };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.7",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "10ec965daab032df7f6e7e09f793de59b9b5f787"
|
|
71
71
|
}
|
|
@@ -23,7 +23,6 @@ export interface ContentInsets {
|
|
|
23
23
|
|
|
24
24
|
export interface Options {
|
|
25
25
|
keyboardDismissMode?: 'none' | 'on-drag';
|
|
26
|
-
translucent?: boolean;
|
|
27
26
|
}
|
|
28
27
|
|
|
29
28
|
export interface CollapsibleAppBar {
|
|
@@ -37,7 +36,6 @@ export interface CollapsibleAppBar {
|
|
|
37
36
|
|
|
38
37
|
const defaultOptions: Required<Options> = {
|
|
39
38
|
keyboardDismissMode: 'none',
|
|
40
|
-
translucent: false,
|
|
41
39
|
};
|
|
42
40
|
|
|
43
41
|
const ANIMATION_DURATION_MILLIS = 100;
|
|
@@ -45,7 +43,7 @@ const ANIMATION_DURATION_MILLIS = 100;
|
|
|
45
43
|
const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
|
|
46
44
|
|
|
47
45
|
export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
|
|
48
|
-
const {
|
|
46
|
+
const { keyboardDismissMode }: Required<Options> = {
|
|
49
47
|
...defaultOptions,
|
|
50
48
|
...userOptions,
|
|
51
49
|
};
|
|
@@ -180,7 +178,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
|
|
|
180
178
|
|
|
181
179
|
const appBarStyle = [
|
|
182
180
|
animatedStyle,
|
|
183
|
-
|
|
181
|
+
{ paddingTop: safeAreaInsets.top },
|
|
184
182
|
hasCollapsible ? styles.floating : undefined,
|
|
185
183
|
];
|
|
186
184
|
|
|
@@ -18,7 +18,6 @@ export interface Options {
|
|
|
18
18
|
fadeInEndY?: number | ((appBarHeight: number) => number);
|
|
19
19
|
floating?: boolean;
|
|
20
20
|
keyboardDismissMode?: 'none' | 'on-drag';
|
|
21
|
-
translucent?: boolean;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
export interface FadeInAppBar {
|
|
@@ -35,7 +34,6 @@ const defaultOptions: Required<Options> = {
|
|
|
35
34
|
fadeInEndY: (appBarHeight) => appBarHeight,
|
|
36
35
|
floating: true,
|
|
37
36
|
keyboardDismissMode: 'none',
|
|
38
|
-
translucent: false,
|
|
39
37
|
};
|
|
40
38
|
|
|
41
39
|
const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;
|
|
@@ -46,7 +44,6 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
|
|
|
46
44
|
fadeInEndY,
|
|
47
45
|
floating,
|
|
48
46
|
keyboardDismissMode,
|
|
49
|
-
translucent,
|
|
50
47
|
}: Required<Options> = {
|
|
51
48
|
...defaultOptions,
|
|
52
49
|
...userOptions,
|
|
@@ -118,7 +115,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
|
|
|
118
115
|
|
|
119
116
|
const appBarStyle = [
|
|
120
117
|
animatedAppBarStyle,
|
|
121
|
-
|
|
118
|
+
{ paddingTop: safeAreaInsets.top },
|
|
122
119
|
floating ? styles.floating : undefined,
|
|
123
120
|
];
|
|
124
121
|
|