@fountain-ui/core 1.15.0 → 1.18.0
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/CHANGELOG.md +24 -0
- package/build/commonjs/Modal/Modal.js +10 -1
- package/build/commonjs/Modal/Modal.js.map +1 -1
- package/build/commonjs/Modal/index.js +10 -2
- package/build/commonjs/Modal/index.js.map +1 -1
- package/build/commonjs/Tabs/Tabs.js +12 -1
- package/build/commonjs/Tabs/Tabs.js.map +1 -1
- package/build/commonjs/hooks/useCollapsibleAppBar.js +7 -1
- package/build/commonjs/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +7 -0
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/commonjs/index.js +7 -0
- package/build/commonjs/index.js.map +1 -1
- package/build/module/Modal/Modal.js +6 -1
- package/build/module/Modal/Modal.js.map +1 -1
- package/build/module/Modal/index.js +1 -1
- package/build/module/Modal/index.js.map +1 -1
- package/build/module/Tabs/Tabs.js +12 -1
- package/build/module/Tabs/Tabs.js.map +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js +8 -2
- package/build/module/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +8 -1
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/index.js +1 -1
- package/build/module/index.js.map +1 -1
- package/build/typescript/Modal/Modal.d.ts +11 -0
- package/build/typescript/Modal/ModalProps.d.ts +2 -1
- package/build/typescript/Modal/index.d.ts +2 -1
- package/build/typescript/Tabs/TabsProps.d.ts +12 -0
- package/build/typescript/hooks/useCollapsibleAppBar.d.ts +1 -0
- package/build/typescript/hooks/useFadeInAppBar.d.ts +1 -0
- package/build/typescript/index.d.ts +2 -1
- package/package.json +2 -2
- package/src/Modal/Modal.tsx +15 -1
- package/src/Modal/ModalProps.ts +2 -1
- package/src/Modal/index.ts +3 -2
- package/src/Tabs/Tabs.tsx +12 -1
- package/src/Tabs/TabsProps.ts +23 -0
- package/src/hooks/useCollapsibleAppBar.ts +7 -2
- package/src/hooks/useFadeInAppBar.ts +9 -1
- package/src/index.ts +2 -1
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Platform } from 'react-native';
|
|
2
|
+
import { Keyboard, Platform } from 'react-native';
|
|
3
3
|
import Animated from 'react-native-reanimated';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { useHeight } from '../internal/hooks';
|
|
6
6
|
import useElevationStyle from './useElevationStyle';
|
|
7
7
|
import useAppbarStyles from './useAppbarStyles';
|
|
8
8
|
const defaultOptions = {
|
|
9
|
+
keyboardDismissMode: 'none',
|
|
9
10
|
translucent: false
|
|
10
11
|
};
|
|
11
12
|
const ANIMATION_DURATION_MILLIS = 100;
|
|
12
13
|
const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
|
|
13
14
|
export default function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
14
15
|
const {
|
|
15
|
-
translucent
|
|
16
|
+
translucent,
|
|
17
|
+
keyboardDismissMode
|
|
16
18
|
} = { ...defaultOptions,
|
|
17
19
|
...userOptions
|
|
18
20
|
};
|
|
@@ -71,6 +73,10 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
71
73
|
|
|
72
74
|
const scrollHandler = Animated.useAnimatedScrollHandler({
|
|
73
75
|
onBeginDrag: () => {
|
|
76
|
+
if (keyboardDismissMode === 'on-drag') {
|
|
77
|
+
Animated.runOnJS(Keyboard.dismiss)();
|
|
78
|
+
}
|
|
79
|
+
|
|
74
80
|
lastTranslateY.value = translateY.value;
|
|
75
81
|
},
|
|
76
82
|
onMomentumBegin: () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Platform","Animated","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","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","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, 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 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 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 }: 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 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","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,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Platform } from 'react-native';
|
|
2
|
+
import { Keyboard, Platform } from 'react-native';
|
|
3
3
|
import Animated from 'react-native-reanimated';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { rgb } from '@fountain-ui/utils';
|
|
@@ -10,6 +10,7 @@ const defaultOptions = {
|
|
|
10
10
|
fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
|
|
11
11
|
fadeInEndY: appBarHeight => appBarHeight,
|
|
12
12
|
floating: true,
|
|
13
|
+
keyboardDismissMode: 'none',
|
|
13
14
|
translucent: false
|
|
14
15
|
};
|
|
15
16
|
const shadowOffset = Platform.OS === 'ios' ? {
|
|
@@ -22,6 +23,7 @@ export default function useFadeInAppBar(userOptions = defaultOptions) {
|
|
|
22
23
|
fadeInBeginY,
|
|
23
24
|
fadeInEndY,
|
|
24
25
|
floating,
|
|
26
|
+
keyboardDismissMode,
|
|
25
27
|
translucent
|
|
26
28
|
} = { ...defaultOptions,
|
|
27
29
|
...userOptions
|
|
@@ -50,6 +52,11 @@ export default function useFadeInAppBar(userOptions = defaultOptions) {
|
|
|
50
52
|
opacity: normalized.value
|
|
51
53
|
}));
|
|
52
54
|
const scrollHandler = Animated.useAnimatedScrollHandler({
|
|
55
|
+
onBeginDrag: () => {
|
|
56
|
+
if (keyboardDismissMode === 'on-drag') {
|
|
57
|
+
Animated.runOnJS(Keyboard.dismiss)();
|
|
58
|
+
}
|
|
59
|
+
},
|
|
53
60
|
onScroll: event => {
|
|
54
61
|
const offsetY = event.contentOffset.y;
|
|
55
62
|
const distance = Math.max(toOffsetY - fromOffsetY, 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFadeInAppBar.ts"],"names":["React","Platform","Animated","useSafeAreaInsets","rgb","useHeight","useAppbarStyles","defaultOptions","backgroundColor","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","translucent","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAgBC,QAAhB,
|
|
1
|
+
{"version":3,"sources":["useFadeInAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","rgb","useHeight","useAppbarStyles","defaultOptions","backgroundColor","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","translucent","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","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 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 backgroundColor?: string;\n fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n fadeInEndY?: number | ((appBarHeight: number) => number);\n floating?: boolean;\n keyboardDismissMode?: 'none' | 'on-drag';\n translucent?: boolean;\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 backgroundColor: '#ffffff',\n fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n fadeInEndY: (appBarHeight) => appBarHeight,\n floating: true,\n keyboardDismissMode: 'none',\n translucent: false,\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n const {\n backgroundColor,\n fadeInBeginY,\n fadeInEndY,\n floating,\n keyboardDismissMode,\n translucent,\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\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 [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 translucent ? { paddingTop: safeAreaInsets.top } : undefined,\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/build/module/index.js
CHANGED
|
@@ -68,7 +68,7 @@ export { default as Menu } from './Menu';
|
|
|
68
68
|
export * from './Menu';
|
|
69
69
|
export { default as MenuItem } from './MenuItem';
|
|
70
70
|
export * from './MenuItem';
|
|
71
|
-
export { default as Modal } from './Modal';
|
|
71
|
+
export { default as Modal, createModalCloseEvent } from './Modal';
|
|
72
72
|
export * from './Modal';
|
|
73
73
|
export { default as Pagination } from './Pagination';
|
|
74
74
|
export * from './Pagination';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["default","Accordion","AppBar","AspectRatio","Avatar","Badge","Button","ButtonBase","Card","CardActions","CardContent","CardMedia","Checkbox","Chip","CircularProgress","Column","Dialog","DialogActions","DialogContent","DialogMedia","DialogTitle","Divider","Fab","IconButton","Image","Link","List","ListItem","ListItemIcon","ListItemSecondaryAction","ListItemText","ListSubheader","Menu","MenuItem","Modal","Pagination","PaginationItem","Paper","Portal","Radio","RadioGroup","Row","Slide","Slider","Snackbar","SnackbarContent","Spacer","SvgIcon","Switch","Tab","TabBase","Tabs","TextField","Toolbar","Tooltip","Typography"],"mappings":"AAAA,cAAc,UAAd;AAEA,cAAc,SAAd;AAEA,cAAc,SAAd;AAEA,cAAc,SAAd;AAEA,SAASA,OAAO,IAAIC,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASD,OAAO,IAAIE,MAApB,QAAkC,UAAlC;AACA,cAAc,UAAd;AAEA,SAASF,OAAO,IAAIG,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASH,OAAO,IAAII,MAApB,QAAkC,UAAlC;AACA,cAAc,UAAd;AAEA,SAASJ,OAAO,IAAIK,KAApB,QAAiC,SAAjC;AACA,cAAc,SAAd;AAEA,SAASL,OAAO,IAAIM,MAApB,QAAkC,UAAlC;AACA,cAAc,UAAd;AAEA,SAASN,OAAO,IAAIO,UAApB,QAAsC,cAAtC;AACA,cAAc,cAAd;AAEA,SAASP,OAAO,IAAIQ,IAApB,QAAgC,QAAhC;AACA,cAAc,QAAd;AAEA,SAASR,OAAO,IAAIS,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAAST,OAAO,IAAIU,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASV,OAAO,IAAIW,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASX,OAAO,IAAIY,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASZ,OAAO,IAAIa,IAApB,QAAgC,QAAhC;AACA,cAAc,QAAd;AAEA,SAASb,OAAO,IAAIc,gBAApB,QAA4C,oBAA5C;AACA,cAAc,oBAAd;AAEA,SAASd,OAAO,IAAIe,MAApB,QAAkC,UAAlC;AACA,cAAc,UAAd;AAEA,SAASf,OAAO,IAAIgB,MAApB,QAAkC,UAAlC;AACA,cAAc,UAAd;AAEA,SAAShB,OAAO,IAAIiB,aAApB,QAAyC,iBAAzC;AACA,cAAc,iBAAd;AAEA,SAASjB,OAAO,IAAIkB,aAApB,QAAyC,iBAAzC;AACA,cAAc,iBAAd;AAEA,SAASlB,OAAO,IAAImB,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASnB,OAAO,IAAIoB,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASpB,OAAO,IAAIqB,OAApB,QAAmC,WAAnC;AACA,cAAc,WAAd;AAEA,SAASrB,OAAO,IAAIsB,GAApB,QAA+B,OAA/B;AACA,cAAc,OAAd;AAEA,SAAStB,OAAO,IAAIuB,UAApB,QAAsC,cAAtC;AACA,cAAc,cAAd;AAEA,SAASvB,OAAO,IAAIwB,KAApB,QAAiC,SAAjC;AACA,cAAc,SAAd;AAEA,SAASxB,OAAO,IAAIyB,IAApB,QAAgC,QAAhC;AACA,cAAc,QAAd;AAEA,SAASzB,OAAO,IAAI0B,IAApB,QAAgC,QAAhC;AACA,cAAc,QAAd;AAEA,SAAS1B,OAAO,IAAI2B,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAAS3B,OAAO,IAAI4B,YAApB,QAAwC,gBAAxC;AACA,cAAc,gBAAd;AAEA,SAAS5B,OAAO,IAAI6B,uBAApB,QAAmD,2BAAnD;AACA,cAAc,2BAAd;AAEA,SAAS7B,OAAO,IAAI8B,YAApB,QAAwC,gBAAxC;AACA,cAAc,gBAAd;AAEA,SAAS9B,OAAO,IAAI+B,aAApB,QAAyC,iBAAzC;AACA,cAAc,iBAAd;AAEA,SAAS/B,OAAO,IAAIgC,IAApB,QAAgC,QAAhC;AACA,cAAc,QAAd;AAEA,SAAShC,OAAO,IAAIiC,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASjC,OAAO,IAAIkC,KAApB,
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["default","Accordion","AppBar","AspectRatio","Avatar","Badge","Button","ButtonBase","Card","CardActions","CardContent","CardMedia","Checkbox","Chip","CircularProgress","Column","Dialog","DialogActions","DialogContent","DialogMedia","DialogTitle","Divider","Fab","IconButton","Image","Link","List","ListItem","ListItemIcon","ListItemSecondaryAction","ListItemText","ListSubheader","Menu","MenuItem","Modal","createModalCloseEvent","Pagination","PaginationItem","Paper","Portal","Radio","RadioGroup","Row","Slide","Slider","Snackbar","SnackbarContent","Spacer","SvgIcon","Switch","Tab","TabBase","Tabs","TextField","Toolbar","Tooltip","Typography"],"mappings":"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","sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport * from './Modal';\n\nexport { default as Pagination } from './Pagination';\nexport * from './Pagination';\n\nexport { default as PaginationItem } from './PaginationItem';\nexport * from './PaginationItem';\n\nexport { default as Paper } from './Paper';\nexport * from './Paper';\n\nexport { default as Portal } from './Portal';\nexport * from './Portal';\n\nexport { default as Radio } from './Radio';\nexport * from './Radio';\n\nexport { default as RadioGroup } from './RadioGroup';\nexport * from './RadioGroup';\n\nexport { default as Row } from './Row';\nexport * from './Row';\n\nexport { default as Slide } from './Slide';\nexport * from './Slide';\n\nexport { default as Slider } from './Slider';\nexport * from './Slider';\n\nexport { default as Snackbar } from './Snackbar';\nexport * from './Snackbar';\n\nexport { default as SnackbarContent } from './SnackbarContent';\nexport * from './SnackbarContent';\n\nexport { default as Spacer } from './Spacer';\nexport * from './Spacer';\n\nexport { default as SvgIcon } from './SvgIcon';\nexport * from './SvgIcon';\n\nexport { default as Switch } from './Switch';\nexport * from './Switch';\n\nexport { default as Tab } from './Tab';\nexport * from './Tab';\n\nexport { default as TabBase } from './TabBase';\nexport * from './TabBase';\n\nexport { default as Tabs } from './Tabs';\nexport * from './Tabs';\n\nexport { default as TextField } from './TextField';\nexport * from './TextField';\n\nexport { default as Toolbar } from './Toolbar';\nexport * from './Toolbar';\n\nexport { default as Tooltip } from './Tooltip';\nexport * from './Tooltip';\n\nexport { default as Typography } from './Typography';\nexport * from './Typography';\n\nexport * from './animated';\n"]}
|
|
@@ -1,3 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type ModalProps from './ModalProps';
|
|
3
|
+
export declare type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';
|
|
4
|
+
export interface ModalCloseEvent {
|
|
5
|
+
metadata: {
|
|
6
|
+
reason: ModalCloseReasonType;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
export declare const createModalCloseEvent: (reason: ModalCloseReasonType) => {
|
|
10
|
+
metadata: {
|
|
11
|
+
reason: ModalCloseReasonType;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
3
14
|
export default function Modal(props: ModalProps): JSX.Element | null;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
3
|
import type { ComponentProps, OverridableComponentProps } from '../types';
|
|
4
|
+
import { ModalCloseEvent } from './Modal';
|
|
4
5
|
export default interface ModalProps extends OverridableComponentProps<ViewProps, {
|
|
5
6
|
/**
|
|
6
7
|
* Style object provided to animation component.
|
|
@@ -28,7 +29,7 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
|
|
|
28
29
|
/**
|
|
29
30
|
* Callback fired when the component requests to be closed.
|
|
30
31
|
*/
|
|
31
|
-
onClose?: () => void;
|
|
32
|
+
onClose?: (event?: ModalCloseEvent) => void;
|
|
32
33
|
/**
|
|
33
34
|
* If `true`, the modal is visible.
|
|
34
35
|
*/
|
|
@@ -3,6 +3,8 @@ import type { ViewProps } from 'react-native';
|
|
|
3
3
|
import Animated from 'react-native-reanimated';
|
|
4
4
|
import type { TabVariant } from '../Tab';
|
|
5
5
|
import type { OverridableComponentProps } from '../types';
|
|
6
|
+
export declare type KeyboardDismissMode = 'none' | 'on-drag' | 'interactive';
|
|
7
|
+
export declare type KeyboardShouldPersistTaps = 'never' | boolean | 'always' | 'handled';
|
|
6
8
|
export default interface TabsProps extends OverridableComponentProps<ViewProps, {
|
|
7
9
|
/**
|
|
8
10
|
* Collection of Tab components.
|
|
@@ -17,6 +19,16 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
|
|
|
17
19
|
* @default false
|
|
18
20
|
*/
|
|
19
21
|
disableIndicator?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* keyboard dismissing condition of dragging.
|
|
24
|
+
* @default 'none'
|
|
25
|
+
*/
|
|
26
|
+
keyboardDismissMode?: KeyboardDismissMode;
|
|
27
|
+
/**
|
|
28
|
+
* keyboard persisting condition of tapping.
|
|
29
|
+
* @default 'never'
|
|
30
|
+
*/
|
|
31
|
+
keyboardShouldPersistTaps?: KeyboardShouldPersistTaps;
|
|
20
32
|
/**
|
|
21
33
|
* Callback fired when a tab is selected.
|
|
22
34
|
*/
|
|
@@ -8,6 +8,7 @@ export interface Options {
|
|
|
8
8
|
fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);
|
|
9
9
|
fadeInEndY?: number | ((appBarHeight: number) => number);
|
|
10
10
|
floating?: boolean;
|
|
11
|
+
keyboardDismissMode?: 'none' | 'on-drag';
|
|
11
12
|
translucent?: boolean;
|
|
12
13
|
}
|
|
13
14
|
export interface FadeInAppBar {
|
|
@@ -68,7 +68,8 @@ export { default as Menu } from './Menu';
|
|
|
68
68
|
export * from './Menu';
|
|
69
69
|
export { default as MenuItem } from './MenuItem';
|
|
70
70
|
export * from './MenuItem';
|
|
71
|
-
export { default as Modal } from './Modal';
|
|
71
|
+
export { default as Modal, createModalCloseEvent } from './Modal';
|
|
72
|
+
export type { ModalCloseEvent } from './Modal';
|
|
72
73
|
export * from './Modal';
|
|
73
74
|
export { default as Pagination } from './Pagination';
|
|
74
75
|
export * from './Pagination';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.18.0",
|
|
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": "bd7415304a03e570da7517dbc569b18ad17d0639"
|
|
71
71
|
}
|
package/src/Modal/Modal.tsx
CHANGED
|
@@ -6,6 +6,20 @@ import Slide from '../Slide';
|
|
|
6
6
|
import SimpleBackdrop from './SimpleBackdrop';
|
|
7
7
|
import type ModalProps from './ModalProps';
|
|
8
8
|
|
|
9
|
+
export type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';
|
|
10
|
+
|
|
11
|
+
export interface ModalCloseEvent {
|
|
12
|
+
metadata: {
|
|
13
|
+
reason: ModalCloseReasonType
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const createModalCloseEvent = (reason: ModalCloseReasonType) => ({
|
|
18
|
+
metadata: {
|
|
19
|
+
reason,
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
|
|
9
23
|
export default function Modal(props: ModalProps) {
|
|
10
24
|
const {
|
|
11
25
|
animationStyle,
|
|
@@ -21,7 +35,7 @@ export default function Modal(props: ModalProps) {
|
|
|
21
35
|
|
|
22
36
|
const handleBackdropPress = () => {
|
|
23
37
|
if (onClose) {
|
|
24
|
-
onClose();
|
|
38
|
+
onClose(createModalCloseEvent('OUTSIDE_PRESS'));
|
|
25
39
|
}
|
|
26
40
|
};
|
|
27
41
|
|
package/src/Modal/ModalProps.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
3
|
import type { ComponentProps, OverridableComponentProps } from '../types';
|
|
4
|
+
import { ModalCloseEvent } from './Modal';
|
|
4
5
|
|
|
5
6
|
export default interface ModalProps extends OverridableComponentProps<ViewProps, {
|
|
6
7
|
/**
|
|
@@ -34,7 +35,7 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
|
|
|
34
35
|
/**
|
|
35
36
|
* Callback fired when the component requests to be closed.
|
|
36
37
|
*/
|
|
37
|
-
onClose?: () => void,
|
|
38
|
+
onClose?: (event?: ModalCloseEvent) => void,
|
|
38
39
|
|
|
39
40
|
/**
|
|
40
41
|
* If `true`, the modal is visible.
|
package/src/Modal/index.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { default } from './Modal';
|
|
2
|
-
export type {
|
|
1
|
+
export { default, createModalCloseEvent } from './Modal';
|
|
2
|
+
export type { ModalCloseEvent } from './Modal';
|
|
3
|
+
export type { default as ModalProps } from './ModalProps';
|
package/src/Tabs/Tabs.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { LayoutChangeEvent, ScrollView, View } from 'react-native';
|
|
2
|
+
import { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';
|
|
3
3
|
import Animated, { Easing } from 'react-native-reanimated';
|
|
4
4
|
import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
5
5
|
import { isEveryDefined } from '@fountain-ui/utils';
|
|
@@ -39,6 +39,8 @@ export default function Tabs(props: TabsProps) {
|
|
|
39
39
|
children,
|
|
40
40
|
index: indexProp,
|
|
41
41
|
disableIndicator = false,
|
|
42
|
+
keyboardDismissMode = 'none',
|
|
43
|
+
keyboardShouldPersistTaps = 'never',
|
|
42
44
|
onChange,
|
|
43
45
|
scrollable = false,
|
|
44
46
|
scrollValue: scrollValueProp,
|
|
@@ -101,6 +103,12 @@ export default function Tabs(props: TabsProps) {
|
|
|
101
103
|
]));
|
|
102
104
|
};
|
|
103
105
|
|
|
106
|
+
const onMouseDown = (e: GestureResponderEvent) => {
|
|
107
|
+
if (keyboardShouldPersistTaps === 'always') {
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
|
|
104
112
|
const onPress = () => {
|
|
105
113
|
onChange?.(index);
|
|
106
114
|
// @ts-ignore
|
|
@@ -117,6 +125,7 @@ export default function Tabs(props: TabsProps) {
|
|
|
117
125
|
enableIndicator: enableIndicatorPlaceholder,
|
|
118
126
|
onLayout,
|
|
119
127
|
onPress,
|
|
128
|
+
onMouseDown,
|
|
120
129
|
variant,
|
|
121
130
|
selected,
|
|
122
131
|
style: scrollable ? undefined : styles.fixedTab,
|
|
@@ -153,6 +162,8 @@ export default function Tabs(props: TabsProps) {
|
|
|
153
162
|
scrollsToTop={false}
|
|
154
163
|
showsHorizontalScrollIndicator={false}
|
|
155
164
|
showsVerticalScrollIndicator={false}
|
|
165
|
+
keyboardDismissMode={keyboardDismissMode}
|
|
166
|
+
keyboardShouldPersistTaps={keyboardShouldPersistTaps}
|
|
156
167
|
>
|
|
157
168
|
{tabElements}
|
|
158
169
|
{indicator}
|
package/src/Tabs/TabsProps.ts
CHANGED
|
@@ -4,6 +4,17 @@ import Animated from 'react-native-reanimated';
|
|
|
4
4
|
import type { TabVariant } from '../Tab';
|
|
5
5
|
import type { OverridableComponentProps } from '../types';
|
|
6
6
|
|
|
7
|
+
export type KeyboardDismissMode =
|
|
8
|
+
'none'
|
|
9
|
+
| 'on-drag'
|
|
10
|
+
| 'interactive'; // ios only
|
|
11
|
+
|
|
12
|
+
export type KeyboardShouldPersistTaps =
|
|
13
|
+
'never'
|
|
14
|
+
| boolean
|
|
15
|
+
| 'always'
|
|
16
|
+
| 'handled'; // app only
|
|
17
|
+
|
|
7
18
|
export default interface TabsProps extends OverridableComponentProps<ViewProps, {
|
|
8
19
|
/**
|
|
9
20
|
* Collection of Tab components.
|
|
@@ -21,6 +32,18 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
|
|
|
21
32
|
*/
|
|
22
33
|
disableIndicator?: boolean;
|
|
23
34
|
|
|
35
|
+
/**
|
|
36
|
+
* keyboard dismissing condition of dragging.
|
|
37
|
+
* @default 'none'
|
|
38
|
+
*/
|
|
39
|
+
keyboardDismissMode?: KeyboardDismissMode,
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* keyboard persisting condition of tapping.
|
|
43
|
+
* @default 'never'
|
|
44
|
+
*/
|
|
45
|
+
keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,
|
|
46
|
+
|
|
24
47
|
/**
|
|
25
48
|
* Callback fired when a tab is selected.
|
|
26
49
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
|
|
2
|
+
import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
|
|
3
3
|
import Animated from 'react-native-reanimated';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { useHeight } from '../internal/hooks';
|
|
@@ -22,6 +22,7 @@ export interface ContentInsets {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
export interface Options {
|
|
25
|
+
keyboardDismissMode?: 'none' | 'on-drag';
|
|
25
26
|
translucent?: boolean;
|
|
26
27
|
}
|
|
27
28
|
|
|
@@ -35,6 +36,7 @@ export interface CollapsibleAppBar {
|
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
const defaultOptions: Required<Options> = {
|
|
39
|
+
keyboardDismissMode: 'none',
|
|
38
40
|
translucent: false,
|
|
39
41
|
};
|
|
40
42
|
|
|
@@ -43,7 +45,7 @@ const ANIMATION_DURATION_MILLIS = 100;
|
|
|
43
45
|
const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
|
|
44
46
|
|
|
45
47
|
export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
|
|
46
|
-
const { translucent }: Required<Options> = {
|
|
48
|
+
const { translucent, keyboardDismissMode }: Required<Options> = {
|
|
47
49
|
...defaultOptions,
|
|
48
50
|
...userOptions,
|
|
49
51
|
};
|
|
@@ -106,6 +108,9 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
|
|
|
106
108
|
|
|
107
109
|
const scrollHandler = Animated.useAnimatedScrollHandler({
|
|
108
110
|
onBeginDrag: () => {
|
|
111
|
+
if (keyboardDismissMode === 'on-drag') {
|
|
112
|
+
Animated.runOnJS(Keyboard.dismiss)();
|
|
113
|
+
}
|
|
109
114
|
lastTranslateY.value = translateY.value;
|
|
110
115
|
},
|
|
111
116
|
onMomentumBegin: () => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
|
|
2
|
+
import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
|
|
3
3
|
import Animated from 'react-native-reanimated';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { rgb } from '@fountain-ui/utils';
|
|
@@ -17,6 +17,7 @@ export interface Options {
|
|
|
17
17
|
fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);
|
|
18
18
|
fadeInEndY?: number | ((appBarHeight: number) => number);
|
|
19
19
|
floating?: boolean;
|
|
20
|
+
keyboardDismissMode?: 'none' | 'on-drag';
|
|
20
21
|
translucent?: boolean;
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -34,6 +35,7 @@ const defaultOptions: Required<Options> = {
|
|
|
34
35
|
fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
|
|
35
36
|
fadeInEndY: (appBarHeight) => appBarHeight,
|
|
36
37
|
floating: true,
|
|
38
|
+
keyboardDismissMode: 'none',
|
|
37
39
|
translucent: false,
|
|
38
40
|
};
|
|
39
41
|
|
|
@@ -45,6 +47,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
|
|
|
45
47
|
fadeInBeginY,
|
|
46
48
|
fadeInEndY,
|
|
47
49
|
floating,
|
|
50
|
+
keyboardDismissMode,
|
|
48
51
|
translucent,
|
|
49
52
|
}: Required<Options> = {
|
|
50
53
|
...defaultOptions,
|
|
@@ -89,6 +92,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
|
|
|
89
92
|
}));
|
|
90
93
|
|
|
91
94
|
const scrollHandler = Animated.useAnimatedScrollHandler({
|
|
95
|
+
onBeginDrag: () => {
|
|
96
|
+
if (keyboardDismissMode === 'on-drag') {
|
|
97
|
+
Animated.runOnJS(Keyboard.dismiss)();
|
|
98
|
+
}
|
|
99
|
+
},
|
|
92
100
|
onScroll: (event) => {
|
|
93
101
|
const offsetY = event.contentOffset.y;
|
|
94
102
|
|
package/src/index.ts
CHANGED
|
@@ -105,7 +105,8 @@ export * from './Menu';
|
|
|
105
105
|
export { default as MenuItem } from './MenuItem';
|
|
106
106
|
export * from './MenuItem';
|
|
107
107
|
|
|
108
|
-
export { default as Modal } from './Modal';
|
|
108
|
+
export { default as Modal, createModalCloseEvent } from './Modal';
|
|
109
|
+
export type { ModalCloseEvent } from './Modal';
|
|
109
110
|
export * from './Modal';
|
|
110
111
|
|
|
111
112
|
export { default as Pagination } from './Pagination';
|