@fountain-ui/core 2.0.0-beta.47 → 2.0.0-beta.48
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/Tab/TabIndicator.js +0 -1
- package/build/commonjs/Tab/TabIndicator.js.map +1 -1
- package/build/commonjs/Tabs/TabIndicator.js +0 -1
- package/build/commonjs/Tabs/TabIndicator.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +5 -29
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/Tab/TabIndicator.js +0 -1
- package/build/module/Tab/TabIndicator.js.map +1 -1
- package/build/module/Tabs/TabIndicator.js +0 -1
- package/build/module/Tabs/TabIndicator.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +6 -30
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/package.json +2 -2
- package/src/Tab/TabIndicator.tsx +0 -1
- package/src/Tabs/TabIndicator.tsx +0 -1
- package/src/hooks/useFadeInAppBar.ts +6 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","color","theme","useTheme","root","backgroundColor","palette","main","
|
|
1
|
+
{"version":3,"names":["useStyles","color","theme","useTheme","root","backgroundColor","palette","main","bottom","height","left","right","position","TabIndicator","styles","React","memo"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabIndicatorColor } from './TabProps';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =\n function (color: TabIndicatorColor): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette[color].main,\n bottom: 0,\n height: 2,\n left: 12,\n right: 12,\n position: 'absolute',\n },\n };\n };\n\nconst TabIndicator = function TabIndicator({ color }: { color: TabIndicatorColor }) {\n const styles = useStyles(color);\n\n return (\n <View\n style={styles.root}\n />\n );\n};\n\nexport default React.memo(TabIndicator);\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAKA,MAAMA,SAA2D,GAC7D,UAAUC,KAAV,EAAwD;EACpD,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcL,KAAd,EAAqBM,IADpC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,IAAI,EAAE,EAJJ;MAKFC,KAAK,EAAE,EALL;MAMFC,QAAQ,EAAE;IANR;EADH,CAAP;AAUH,CAdL;;AAgBA,MAAMC,YAAY,GAAG,SAASA,YAAT,OAA+D;EAAA,IAAzC;IAAEZ;EAAF,CAAyC;EAChF,MAAMa,MAAM,GAAGd,SAAS,CAACC,KAAD,CAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEa,MAAM,CAACV;EADlB,EADJ;AAKH,CARD;;4BAUeW,cAAA,CAAMC,IAAN,CAAWH,YAAX,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","color","theme","useTheme","root","backgroundColor","palette","main","
|
|
1
|
+
{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","color","theme","useTheme","root","backgroundColor","palette","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","Animated","timing","duration","easing","Easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","useCallback","currentIndex","x1","x2","defaultCoordinate","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","useAnimatedValue","scaleX","indexStore","useContext","InternalContext","useEffect","scrollToIndex","index","getState","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 2;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =\n function (color: TabIndicatorColor): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette[color].main,\n left: 0,\n bottom: 0,\n width: INDICATOR_WIDTH,\n height: INDICATOR_HEIGHT,\n position: 'absolute',\n },\n disabled: {\n height: 0,\n },\n };\n };\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n Animated.timing(value, {\n toValue: toValue,\n duration: 300,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true,\n }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n const {\n color = 'primary',\n coordinates,\n disabled,\n initialIndex,\n scrollable,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles(color);\n\n const computeAnimationValues = useCallback((currentIndex: number) => {\n const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n const tabWidth = x2 - x1;\n\n const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n return { tx: nextTranslateX, sx: nextScaleX };\n }, [coordinates, scrollable]);\n\n const {\n tx: initialTx,\n sx: initialSx,\n } = computeAnimationValues(initialIndex);\n\n const translateX = useAnimatedValue(initialTx);\n const scaleX = useAnimatedValue(initialSx);\n\n const { indexStore } = useContext(InternalContext);\n\n useEffect(() => {\n const scrollToIndex = (index: number) => {\n const { tx, sx } = computeAnimationValues(index);\n\n startAnimation(translateX, tx);\n startAnimation(scaleX, sx);\n };\n\n scrollToIndex(indexStore.getState());\n\n return indexStore.subscribe(scrollToIndex);\n }, [\n computeAnimationValues,\n coordinates,\n indexStore,\n ]);\n\n return (\n <Animated.View\n style={[\n styles.root,\n disabled ? styles.disabled : undefined,\n { transform: [{ translateX }, { scaleX }] },\n style,\n ]}\n {...otherProps}\n />\n );\n};\n"],"mappings":"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"}
|
|
@@ -29,10 +29,6 @@ const defaultOptions = {
|
|
|
29
29
|
floating: true,
|
|
30
30
|
keyboardDismissMode: 'none'
|
|
31
31
|
};
|
|
32
|
-
const shadowOffset = _reactNative.Platform.OS === 'ios' ? {
|
|
33
|
-
width: 0,
|
|
34
|
-
height: 1
|
|
35
|
-
} : undefined;
|
|
36
32
|
|
|
37
33
|
function useFadeInAppBar() {
|
|
38
34
|
let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
|
|
@@ -62,31 +58,11 @@ function useFadeInAppBar() {
|
|
|
62
58
|
const animatedAppBarStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
63
59
|
const [r, g, b] = rgbValues;
|
|
64
60
|
const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
if (_reactNative.Platform.OS === 'android') {
|
|
73
|
-
return {
|
|
74
|
-
backgroundColor,
|
|
75
|
-
elevation: normalized.value >= 1 ? 6 : 0
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
if (_reactNative.Platform.OS === 'ios') {
|
|
80
|
-
return {
|
|
81
|
-
backgroundColor,
|
|
82
|
-
shadowColor: '#000',
|
|
83
|
-
shadowOffset,
|
|
84
|
-
shadowRadius: 1,
|
|
85
|
-
shadowOpacity: normalized.value >= 1 ? 0.25 : 0
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
return {};
|
|
61
|
+
return {
|
|
62
|
+
backgroundColor,
|
|
63
|
+
borderColor: theme.palette.divider,
|
|
64
|
+
borderBottomWidth: normalized.value >= 1 ? 1 : 0
|
|
65
|
+
};
|
|
90
66
|
}, [rgbValues]);
|
|
91
67
|
const animatedTitleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
92
68
|
opacity: normalized.value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","
|
|
1
|
+
{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","useMemo","beginY","scrollY","useSharedValue","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","rgb","animatedAppBarStyle","useAnimatedStyle","r","g","b","backgroundColor","value","borderColor","divider","borderBottomWidth","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","undefined","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } 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 scrollY: SharedValue<number>;\n dy: SharedValue<number>;\n normalized: 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\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] = 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 scrollY = useSharedValue<number>(0);\n const dy = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const normalized = useSharedValue<number>(0);\n\n const originalBackgroundColor = theme.palette.background.default;\n const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n const animatedAppBarStyle = useAnimatedStyle(() => {\n const [r, g, b] = rgbValues;\n const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n return {\n backgroundColor,\n borderColor: theme.palette.divider,\n borderBottomWidth: normalized.value >= 1 ? 1 : 0,\n };\n }, [rgbValues]);\n\n const animatedTitleStyle = useAnimatedStyle(() => ({\n opacity: normalized.value,\n }), []);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(Keyboard.dismiss)();\n }\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n scrollY.value = offsetY;\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 }, [keyboardDismissMode]);\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 scrollY,\n dy,\n normalized,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","useTheme","useStyles","color","theme","root","backgroundColor","palette","main","
|
|
1
|
+
{"version":3,"names":["React","View","useTheme","useStyles","color","theme","root","backgroundColor","palette","main","bottom","height","left","right","position","TabIndicator","styles","memo"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabIndicatorColor } from './TabProps';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =\n function (color: TabIndicatorColor): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette[color].main,\n bottom: 0,\n height: 2,\n left: 12,\n right: 12,\n position: 'absolute',\n },\n };\n };\n\nconst TabIndicator = function TabIndicator({ color }: { color: TabIndicatorColor }) {\n const styles = useStyles(color);\n\n return (\n <View\n style={styles.root}\n />\n );\n};\n\nexport default React.memo(TabIndicator);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,QAAT,QAAyB,WAAzB;;AAKA,MAAMC,SAA2D,GAC7D,UAAUC,KAAV,EAAwD;EACpD,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcJ,KAAd,EAAqBK,IADpC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,IAAI,EAAE,EAJJ;MAKFC,KAAK,EAAE,EALL;MAMFC,QAAQ,EAAE;IANR;EADH,CAAP;AAUH,CAdL;;AAgBA,MAAMC,YAAY,GAAG,SAASA,YAAT,OAA+D;EAAA,IAAzC;IAAEX;EAAF,CAAyC;EAChF,MAAMY,MAAM,GAAGb,SAAS,CAACC,KAAD,CAAxB;EAEA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEY,MAAM,CAACV;EADlB,EADJ;AAKH,CARD;;AAUA,4BAAeN,KAAK,CAACiB,IAAN,CAAWF,YAAX,CAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useContext","useEffect","Animated","Easing","useTheme","useAnimatedValue","defaultCoordinate","InternalContext","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","color","theme","root","backgroundColor","palette","main","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useContext","useEffect","Animated","Easing","useTheme","useAnimatedValue","defaultCoordinate","InternalContext","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","color","theme","root","backgroundColor","palette","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","timing","duration","easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","currentIndex","x1","x2","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","scaleX","indexStore","scrollToIndex","index","getState","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 2;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =\n function (color: TabIndicatorColor): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette[color].main,\n left: 0,\n bottom: 0,\n width: INDICATOR_WIDTH,\n height: INDICATOR_HEIGHT,\n position: 'absolute',\n },\n disabled: {\n height: 0,\n },\n };\n };\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n Animated.timing(value, {\n toValue: toValue,\n duration: 300,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true,\n }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n const {\n color = 'primary',\n coordinates,\n disabled,\n initialIndex,\n scrollable,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles(color);\n\n const computeAnimationValues = useCallback((currentIndex: number) => {\n const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n const tabWidth = x2 - x1;\n\n const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n return { tx: nextTranslateX, sx: nextScaleX };\n }, [coordinates, scrollable]);\n\n const {\n tx: initialTx,\n sx: initialSx,\n } = computeAnimationValues(initialIndex);\n\n const translateX = useAnimatedValue(initialTx);\n const scaleX = useAnimatedValue(initialSx);\n\n const { indexStore } = useContext(InternalContext);\n\n useEffect(() => {\n const scrollToIndex = (index: number) => {\n const { tx, sx } = computeAnimationValues(index);\n\n startAnimation(translateX, tx);\n startAnimation(scaleX, sx);\n };\n\n scrollToIndex(indexStore.getState());\n\n return indexStore.subscribe(scrollToIndex);\n }, [\n computeAnimationValues,\n coordinates,\n indexStore,\n ]);\n\n return (\n <Animated.View\n style={[\n styles.root,\n disabled ? styles.disabled : undefined,\n { transform: [{ translateX }, { scaleX }] },\n style,\n ]}\n {...otherProps}\n />\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
import { Keyboard
|
|
2
|
+
import { Keyboard } from 'react-native';
|
|
3
3
|
import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { rgb } from '@fountain-ui/utils';
|
|
@@ -12,10 +12,6 @@ const defaultOptions = {
|
|
|
12
12
|
floating: true,
|
|
13
13
|
keyboardDismissMode: 'none'
|
|
14
14
|
};
|
|
15
|
-
const shadowOffset = Platform.OS === 'ios' ? {
|
|
16
|
-
width: 0,
|
|
17
|
-
height: 1
|
|
18
|
-
} : undefined;
|
|
19
15
|
export default function useFadeInAppBar() {
|
|
20
16
|
let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
|
|
21
17
|
const {
|
|
@@ -44,31 +40,11 @@ export default function useFadeInAppBar() {
|
|
|
44
40
|
const animatedAppBarStyle = useAnimatedStyle(() => {
|
|
45
41
|
const [r, g, b] = rgbValues;
|
|
46
42
|
const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
if (Platform.OS === 'android') {
|
|
55
|
-
return {
|
|
56
|
-
backgroundColor,
|
|
57
|
-
elevation: normalized.value >= 1 ? 6 : 0
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
if (Platform.OS === 'ios') {
|
|
62
|
-
return {
|
|
63
|
-
backgroundColor,
|
|
64
|
-
shadowColor: '#000',
|
|
65
|
-
shadowOffset,
|
|
66
|
-
shadowRadius: 1,
|
|
67
|
-
shadowOpacity: normalized.value >= 1 ? 0.25 : 0
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
return {};
|
|
43
|
+
return {
|
|
44
|
+
backgroundColor,
|
|
45
|
+
borderColor: theme.palette.divider,
|
|
46
|
+
borderBottomWidth: normalized.value >= 1 ? 1 : 0
|
|
47
|
+
};
|
|
72
48
|
}, [rgbValues]);
|
|
73
49
|
const animatedTitleStyle = useAnimatedStyle(() => ({
|
|
74
50
|
opacity: normalized.value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","Keyboard","
|
|
1
|
+
{"version":3,"names":["useMemo","Keyboard","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","beginY","scrollY","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","animatedAppBarStyle","r","g","b","backgroundColor","value","borderColor","divider","borderBottomWidth","animatedTitleStyle","opacity","scrollHandler","onBeginDrag","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","undefined","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } 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 scrollY: SharedValue<number>;\n dy: SharedValue<number>;\n normalized: 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\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] = 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 scrollY = useSharedValue<number>(0);\n const dy = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const normalized = useSharedValue<number>(0);\n\n const originalBackgroundColor = theme.palette.background.default;\n const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n const animatedAppBarStyle = useAnimatedStyle(() => {\n const [r, g, b] = rgbValues;\n const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n return {\n backgroundColor,\n borderColor: theme.palette.divider,\n borderBottomWidth: normalized.value >= 1 ? 1 : 0,\n };\n }, [rgbValues]);\n\n const animatedTitleStyle = useAnimatedStyle(() => ({\n opacity: normalized.value,\n }), []);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(Keyboard.dismiss)();\n }\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n scrollY.value = offsetY;\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 }, [keyboardDismissMode]);\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 scrollY,\n dy,\n normalized,\n };\n};\n"],"mappings":"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"}
|
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.48",
|
|
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": "e5a9a25dc3bc906cd80eb617d33f26dfe4b18c60"
|
|
71
71
|
}
|
package/src/Tab/TabIndicator.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
import { Falsy, Keyboard,
|
|
2
|
+
import { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
|
|
3
3
|
import type { SharedValue } from 'react-native-reanimated';
|
|
4
4
|
import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
|
|
5
5
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
@@ -38,8 +38,6 @@ const defaultOptions: Required<Options> = {
|
|
|
38
38
|
keyboardDismissMode: 'none',
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 1 } : undefined;
|
|
42
|
-
|
|
43
41
|
export default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {
|
|
44
42
|
const {
|
|
45
43
|
fadeInBeginY,
|
|
@@ -83,25 +81,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
|
|
|
83
81
|
const [r, g, b] = rgbValues;
|
|
84
82
|
const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
|
|
85
83
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
backgroundColor,
|
|
92
|
-
elevation: normalized.value >= 1 ? 6 : 0,
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
if (Platform.OS === 'ios') {
|
|
96
|
-
return {
|
|
97
|
-
backgroundColor,
|
|
98
|
-
shadowColor: '#000',
|
|
99
|
-
shadowOffset,
|
|
100
|
-
shadowRadius: 1,
|
|
101
|
-
shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
|
-
return {};
|
|
84
|
+
return {
|
|
85
|
+
backgroundColor,
|
|
86
|
+
borderColor: theme.palette.divider,
|
|
87
|
+
borderBottomWidth: normalized.value >= 1 ? 1 : 0,
|
|
88
|
+
};
|
|
105
89
|
}, [rgbValues]);
|
|
106
90
|
|
|
107
91
|
const animatedTitleStyle = useAnimatedStyle(() => ({
|