@fountain-ui/lab 3.0.0-alpha.24 → 3.0.0-alpha.25
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/BottomSheet/BottomSheetNative.js +1 -12
- package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetWeb.js +1 -2
- package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/commonjs/Carousel/components/InternalContext.js.map +1 -1
- package/build/commonjs/Carousel/components/ItemView.js.map +1 -1
- package/build/commonjs/Carousel/components/useItemInterpolation.js.map +1 -1
- package/build/commonjs/Carousel/hooks/usePagingAnimator.js.map +1 -1
- package/build/commonjs/Carousel/types.js.map +1 -1
- package/build/commonjs/ComicViewer/ViewerItem.js.map +1 -1
- package/build/commonjs/DateTimePicker/YearPicker.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js +1 -11
- package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetWeb.js +1 -2
- package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/module/Carousel/components/InternalContext.js.map +1 -1
- package/build/module/Carousel/components/ItemView.js.map +1 -1
- package/build/module/Carousel/components/useItemInterpolation.js.map +1 -1
- package/build/module/Carousel/hooks/usePagingAnimator.js.map +1 -1
- package/build/module/Carousel/types.js.map +1 -1
- package/build/module/ComicViewer/ViewerItem.js.map +1 -1
- package/build/module/DateTimePicker/YearPicker.js.map +1 -1
- package/build/typescript/Carousel/components/InternalContext.d.ts +1 -1
- package/build/typescript/Carousel/components/ItemView.d.ts +1 -1
- package/build/typescript/Carousel/components/useItemInterpolation.d.ts +1 -1
- package/build/typescript/Carousel/hooks/usePagingAnimator.d.ts +1 -1
- package/build/typescript/Carousel/types.d.ts +2 -2
- package/build/typescript/hooks/useUnstableToggleDisplayStyle.d.ts +1 -1
- package/package.json +7 -7
- package/src/BottomSheet/BottomSheetNative.tsx +2 -15
- package/src/BottomSheet/BottomSheetWeb.tsx +1 -3
- package/src/Carousel/components/InternalContext.ts +1 -1
- package/src/Carousel/components/ItemView.tsx +1 -1
- package/src/Carousel/components/useItemInterpolation.ts +1 -1
- package/src/Carousel/hooks/usePagingAnimator.ts +1 -1
- package/src/Carousel/types.ts +2 -2
- package/src/ComicViewer/ViewerItem.tsx +2 -2
- package/src/DateTimePicker/YearPicker.tsx +1 -1
- package/build/commonjs/BottomSheet/useDynamicSnapPoints.native.js +0 -22
- package/build/commonjs/BottomSheet/useDynamicSnapPoints.native.js.map +0 -1
- package/build/module/BottomSheet/useDynamicSnapPoints.native.js +0 -14
- package/build/module/BottomSheet/useDynamicSnapPoints.native.js.map +0 -1
- package/build/typescript/BottomSheet/useDynamicSnapPoints.native.d.ts +0 -21
- package/src/BottomSheet/useDynamicSnapPoints.native.ts +0 -15
|
@@ -19,8 +19,6 @@ var _styles = require("@fountain-ui/styles");
|
|
|
19
19
|
|
|
20
20
|
var _TransparentBackdrop = _interopRequireDefault(require("./TransparentBackdrop"));
|
|
21
21
|
|
|
22
|
-
var _useDynamicSnapPoints = _interopRequireDefault(require("./useDynamicSnapPoints.native"));
|
|
23
|
-
|
|
24
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
23
|
|
|
26
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -145,12 +143,6 @@ function BottomSheet(props) {
|
|
|
145
143
|
}).start();
|
|
146
144
|
};
|
|
147
145
|
|
|
148
|
-
const {
|
|
149
|
-
animatedHandleHeight,
|
|
150
|
-
animatedSnapPoints,
|
|
151
|
-
animatedContentHeight,
|
|
152
|
-
handleContentLayout
|
|
153
|
-
} = (0, _useDynamicSnapPoints.default)(snapPoints);
|
|
154
146
|
return /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModalProvider, null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModal, {
|
|
155
147
|
backdropComponent: isBackdropTransparent ? _TransparentBackdrop.default : OpacityAwareBackdrop // @ts-ignore
|
|
156
148
|
,
|
|
@@ -166,16 +158,13 @@ function BottomSheet(props) {
|
|
|
166
158
|
maxDynamicContentSize: maxDynamicContentSize,
|
|
167
159
|
detached: Boolean(topElement),
|
|
168
160
|
onAnimate: topElement ? onAnimate : undefined,
|
|
169
|
-
snapPoints:
|
|
170
|
-
handleHeight: animatedHandleHeight,
|
|
171
|
-
contentHeight: animatedContentHeight
|
|
161
|
+
snapPoints: snapPoints
|
|
172
162
|
}, topElement ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
173
163
|
style: topElementAnimationStyle
|
|
174
164
|
}, /*#__PURE__*/_react.default.createElement(_core.Column, {
|
|
175
165
|
onLayout: handleTopElementLayout,
|
|
176
166
|
style: topElementLocationStyle
|
|
177
167
|
}, topElement)) : null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetView, {
|
|
178
|
-
onLayout: handleContentLayout,
|
|
179
168
|
style: contentWrapperStyle
|
|
180
169
|
}, children)));
|
|
181
170
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","css","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","useSafeAreaInsets","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","useDynamicSnapPoints","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n BottomSheetBackdrop,\n BottomSheetBackdropProps,\n BottomSheetModal,\n BottomSheetModalProvider,\n BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.75,\n backgroundStyle: backgroundStyleProp,\n borderRadius: borderRadiusProp,\n children,\n enableDynamicSizing = true,\n topElement,\n index,\n maxHeightNormalizedRatio = 0.8,\n onChange,\n snapPoints = [],\n style: styleProp,\n } = props;\n\n const indexRef = useRef<number>(-1);\n const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n const { height: windowHeight } = useWindowDimensions();\n const [topElementHeight, setTopElementHeight] = useState(0);\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const handleChange = useCallback((newIndex: number) => {\n indexRef.current = newIndex;\n\n if (onChange) {\n onChange(newIndex);\n }\n }, [onChange]);\n\n const handleDismiss = useCallback(() => {\n handleChange(-1);\n }, [handleChange]);\n\n useEffect(() => {\n if (index === indexRef.current) {\n return;\n }\n\n if (indexRef.current < 0 && index >= 0) {\n bottomSheetRef.current?.present();\n } else if (indexRef.current >= 0 && index < 0) {\n bottomSheetRef.current?.dismiss();\n } else {\n // @ts-ignore\n bottomSheetRef.current?.snapToIndex(index);\n }\n }, [index]);\n\n const theme = useTheme();\n\n const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n const backgroundStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n },\n backgroundStyleProp,\n ]);\n\n const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n const contentWrapperStyle: ViewStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n flexShrink: 1,\n maxHeight: maxDynamicContentSize,\n minHeight: 325,\n overflow: 'hidden',\n paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n paddingTop: DEFAULT_PADDING_TOP,\n },\n styleProp,\n ]);\n\n const isBackdropTransparent = backdropOpacity <= 0;\n\n const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n <BottomSheetBackdrop\n {...props}\n appearsOnIndex={0}\n disappearsOnIndex={-1}\n opacity={backdropOpacity}\n pressBehavior={onChange ? 'close' : 'none'}\n />\n );\n\n const topElementOpacity = useAnimatedValue(0);\n const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n const topElementLocationStyle: ExtendedStyle = {\n position: 'absolute',\n width: '100%',\n bottom: 0,\n };\n const onAnimate = (fromIndex: number, toIndex: number) => {\n const isVisible = toIndex > -1;\n\n Animated.timing(topElementOpacity, {\n toValue: isVisible ? 1 : 0,\n duration: 0,\n useNativeDriver: isNotAndroid12,\n }).start();\n };\n\n const {\n animatedHandleHeight,\n animatedSnapPoints,\n animatedContentHeight,\n handleContentLayout,\n } = useDynamicSnapPoints(snapPoints);\n\n return (\n <BottomSheetModalProvider>\n <BottomSheetModal\n backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n // @ts-ignore\n backgroundStyle={backgroundStyle}\n enableOverDrag={false}\n index={index}\n handleComponent={NoHandle}\n onChange={handleChange}\n onDismiss={handleDismiss}\n ref={bottomSheetRef}\n enablePanDownToClose={Boolean(onChange)}\n enableDynamicSizing={enableDynamicSizing}\n maxDynamicContentSize={maxDynamicContentSize}\n detached={Boolean(topElement)}\n onAnimate={topElement ? onAnimate : undefined}\n snapPoints={animatedSnapPoints}\n handleHeight={animatedHandleHeight}\n contentHeight={animatedContentHeight}\n >\n {topElement ? (\n <Animated.View style={topElementAnimationStyle}>\n <Column\n onLayout={handleTopElementLayout}\n style={topElementLocationStyle}\n >\n {topElement}\n </Column>\n </Animated.View>\n ) : null}\n\n <BottomSheetView\n onLayout={handleContentLayout}\n style={contentWrapperStyle}\n >\n {children}\n </BottomSheetView>\n </BottomSheetModal>\n </BottomSheetModalProvider>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","css","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","useSafeAreaInsets","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n BottomSheetBackdrop,\n BottomSheetBackdropProps,\n BottomSheetModal,\n BottomSheetModalProvider,\n BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.75,\n backgroundStyle: backgroundStyleProp,\n borderRadius: borderRadiusProp,\n children,\n enableDynamicSizing = true,\n topElement,\n index,\n maxHeightNormalizedRatio = 0.8,\n onChange,\n snapPoints = [],\n style: styleProp,\n } = props;\n\n const indexRef = useRef<number>(-1);\n const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n const { height: windowHeight } = useWindowDimensions();\n const [topElementHeight, setTopElementHeight] = useState(0);\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const handleChange = useCallback((newIndex: number) => {\n indexRef.current = newIndex;\n\n if (onChange) {\n onChange(newIndex);\n }\n }, [onChange]);\n\n const handleDismiss = useCallback(() => {\n handleChange(-1);\n }, [handleChange]);\n\n useEffect(() => {\n if (index === indexRef.current) {\n return;\n }\n\n if (indexRef.current < 0 && index >= 0) {\n bottomSheetRef.current?.present();\n } else if (indexRef.current >= 0 && index < 0) {\n bottomSheetRef.current?.dismiss();\n } else {\n // @ts-ignore\n bottomSheetRef.current?.snapToIndex(index);\n }\n }, [index]);\n\n const theme = useTheme();\n\n const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n const backgroundStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n },\n backgroundStyleProp,\n ]);\n\n const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n const contentWrapperStyle: ViewStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n flexShrink: 1,\n maxHeight: maxDynamicContentSize,\n minHeight: 325,\n overflow: 'hidden',\n paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n paddingTop: DEFAULT_PADDING_TOP,\n },\n styleProp,\n ]);\n\n const isBackdropTransparent = backdropOpacity <= 0;\n\n const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n <BottomSheetBackdrop\n {...props}\n appearsOnIndex={0}\n disappearsOnIndex={-1}\n opacity={backdropOpacity}\n pressBehavior={onChange ? 'close' : 'none'}\n />\n );\n\n const topElementOpacity = useAnimatedValue(0);\n const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n const topElementLocationStyle: ExtendedStyle = {\n position: 'absolute',\n width: '100%',\n bottom: 0,\n };\n const onAnimate = (fromIndex: number, toIndex: number) => {\n const isVisible = toIndex > -1;\n\n Animated.timing(topElementOpacity, {\n toValue: isVisible ? 1 : 0,\n duration: 0,\n useNativeDriver: isNotAndroid12,\n }).start();\n };\n\n return (\n <BottomSheetModalProvider>\n <BottomSheetModal\n backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n // @ts-ignore\n backgroundStyle={backgroundStyle}\n enableOverDrag={false}\n index={index}\n handleComponent={NoHandle}\n onChange={handleChange}\n onDismiss={handleDismiss}\n ref={bottomSheetRef}\n enablePanDownToClose={Boolean(onChange)}\n enableDynamicSizing={enableDynamicSizing}\n maxDynamicContentSize={maxDynamicContentSize}\n detached={Boolean(topElement)}\n onAnimate={topElement ? onAnimate : undefined}\n snapPoints={snapPoints}\n >\n {topElement ? (\n <Animated.View style={topElementAnimationStyle}>\n <Column\n onLayout={handleTopElementLayout}\n style={topElementLocationStyle}\n >\n {topElement}\n </Column>\n </Animated.View>\n ) : null}\n\n <BottomSheetView style={contentWrapperStyle}>\n {children}\n </BottomSheetView>\n </BottomSheetModal>\n </BottomSheetModalProvider>\n );\n};\n"],"mappings":"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"}
|
|
@@ -86,7 +86,6 @@ function BottomSheet(props) {
|
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
|
|
89
|
-
const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');
|
|
90
89
|
const {
|
|
91
90
|
convertedSnapPoints,
|
|
92
91
|
handleLayout,
|
|
@@ -94,7 +93,7 @@ function BottomSheet(props) {
|
|
|
94
93
|
} = (0, _useDynamicSnapPoints.default)({
|
|
95
94
|
enableDynamicSizing,
|
|
96
95
|
maxDynamicContentSize,
|
|
97
|
-
snapPoints
|
|
96
|
+
snapPoints
|
|
98
97
|
});
|
|
99
98
|
const translateY = convertedSnapPoints.length > 0 ? highestSnapPoint - (convertedSnapPoints[index] ?? 0) : 0;
|
|
100
99
|
const contentStyles = (0, _core.css)([styles.paper, { ...(borderRadius ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","length","contentStyles","css","maxHeight","StyleSheet","absoluteFill","top"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n const theme = useTheme();\n\n return {\n root: {\n justifyContent: 'flex-end',\n zIndex: theme.zIndex.dialog,\n },\n animated: {\n alignSelf: 'center',\n maxWidth: 720,\n width: '100%',\n },\n paper: {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: theme.shape.radius.xxl,\n borderTopRightRadius: theme.shape.radius.xxl,\n flexGrow: 1,\n minHeight: 325,\n overflow: 'hidden',\n paddingBottom: theme.spacing(6),\n paddingTop: theme.spacing(5.5),\n },\n topElementLocation: {\n position: 'absolute',\n width: '100%',\n },\n };\n};\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.75,\n borderRadius,\n children,\n enableDynamicSizing = true,\n topElement,\n index,\n maxHeightNormalizedRatio = 0.8,\n onChange,\n snapPoints = [],\n style: styleProp,\n } = props;\n\n const styles = useStyles();\n\n const { height: windowHeight } = useWindowDimensions();\n\n const [topElementHeight, setTopElementHeight] = useState(0);\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const handleClose = () => {\n if (onChange) {\n onChange(-1);\n }\n };\n\n const {\n convertedSnapPoints,\n handleLayout,\n highestSnapPoint,\n } = useDynamicSnapPoints({\n enableDynamicSizing,\n maxDynamicContentSize,\n snapPoints,\n });\n\n const translateY = convertedSnapPoints.length > 0\n ? highestSnapPoint - (convertedSnapPoints[index] ?? 0)\n : 0;\n\n const contentStyles = css([\n styles.paper,\n {\n ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n ...(!enableDynamicSizing && highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n maxHeight: maxDynamicContentSize,\n },\n styleProp,\n ]);\n\n return (\n <Modal\n backdropOpacity={backdropOpacity}\n onClose={handleClose}\n visible={index >= 0}\n style={css([StyleSheet.absoluteFill, styles.root])}\n >\n <AnimatedY translateY={translateY}>\n {topElement ? (\n <Column\n onLayout={handleTopElementLayout}\n style={[styles.topElementLocation, { top: -topElementHeight }]}\n >\n {topElement}\n </Column>\n ) : null}\n\n <View\n onLayout={handleLayout}\n style={contentStyles}\n >\n {children}\n </View>\n </AnimatedY>\n </Modal>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","Animated","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","needsOffscreenAlphaCompositingOnItem","InternalContext","createContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n createItemStyle: CreateItemStyle;\n data: ReadonlyArray<ItemT>;\n globalInterpolation: Animated.AnimatedInterpolation
|
|
1
|
+
{"version":3,"names":["mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","Animated","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","needsOffscreenAlphaCompositingOnItem","InternalContext","createContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n createItemStyle: CreateItemStyle;\n data: ReadonlyArray<ItemT>;\n globalInterpolation: Animated.AnimatedInterpolation<string>;\n itemHeight: ItemHeight;\n itemWidth: number;\n itemVisibilityStore: ItemVisibilityStore;\n loop: boolean;\n needsOffscreenAlphaCompositingOnItem: boolean;\n}\n\nconst mockItemVisibilityStore: ItemVisibilityStore = {\n dispatch: () => void 0,\n subscribe: () => () => void 0,\n removeAllListeners: () => void 0,\n};\n\nconst initialValue: Readonly<InternalContextValue<any>> = {\n createItemStyle: () => ({}),\n data: [],\n globalInterpolation: Animated.add(new Animated.Value(0), 0),\n itemHeight: 0,\n itemWidth: 0,\n itemVisibilityStore: mockItemVisibilityStore,\n loop: false,\n needsOffscreenAlphaCompositingOnItem: false,\n};\n\nconst InternalContext = createContext<InternalContextValue<any>>(initialValue);\n\nexport default InternalContext;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAcA,MAAMA,uBAA4C,GAAG;EACjDC,QAAQ,EAAE,MAAM,KAAK,CAD4B;EAEjDC,SAAS,EAAE,MAAM,MAAM,KAAK,CAFqB;EAGjDC,kBAAkB,EAAE,MAAM,KAAK;AAHkB,CAArD;AAMA,MAAMC,YAAiD,GAAG;EACtDC,eAAe,EAAE,OAAO,EAAP,CADqC;EAEtDC,IAAI,EAAE,EAFgD;EAGtDC,mBAAmB,EAAEC,qBAAA,CAASC,GAAT,CAAa,IAAID,qBAAA,CAASE,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEb,uBANiC;EAOtDc,IAAI,EAAE,KAPgD;EAQtDC,oCAAoC,EAAE;AARgB,CAA1D;AAWA,MAAMC,eAAe,gBAAG,IAAAC,oBAAA,EAAyCb,YAAzC,CAAxB;eAEeY,e"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","needsOffscreenAlphaCompositingOnItem","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n index: number;\n onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {\n children,\n index,\n onLayout,\n } = props;\n\n const {\n createItemStyle,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n needsOffscreenAlphaCompositingOnItem,\n } = useContext(InternalContext);\n\n const [visible, setVisible] = useState(false);\n\n const interpolation = useItemInterpolation(index);\n\n const itemStyle = useMemo(\n () => createItemStyle(interpolation, itemWidth),\n [createItemStyle, interpolation, itemWidth],\n );\n\n useEffect(() => {\n return itemVisibilityStore.subscribe(ranges => {\n const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n setVisible(nextVisible);\n });\n }, [index, itemVisibilityStore]);\n\n return (\n <Animated.View\n needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}\n children={visible ? children(interpolation) : null}\n onLayout={onLayout}\n style={[\n {\n width: itemWidth,\n height: itemHeight !== 'auto' ? itemHeight : undefined,\n },\n styles.absolute,\n // @ts-ignore\n itemStyle,\n ]}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n absolute: {\n position: 'absolute',\n },\n});\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC,mBAJE;IAKFC;EALE,IAMF,IAAAC,iBAAA,EAAWC,wBAAX,CANJ;EAQA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,6BAAA,EAAqBb,KAArB,CAAtB;EAEA,MAAMc,SAAS,GAAG,IAAAC,cAAA,EACd,MAAMb,eAAe,CAACU,aAAD,EAAgBR,SAAhB,CADP,EAEd,CAACF,eAAD,EAAkBU,aAAlB,EAAiCR,SAAjC,CAFc,CAAlB;EAKA,IAAAY,gBAAA,EAAU,MAAM;IACZ,OAAOX,mBAAmB,CAACY,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBtB,KAAK,IAAIqB,IAAT,IAAiBrB,KAAK,IAAIsB,EAA1C;MAAA,CAAZ,CAApB;MACAZ,UAAU,CAACS,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALD,EAKG,CAACnB,KAAD,EAAQK,mBAAR,CALH;EAOA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,8BAA8B,EAAEC,oCADpC;IAEI,QAAQ,EAAEG,OAAO,GAAGV,QAAQ,CAACa,aAAD,CAAX,GAA6B,IAFlD;IAGI,QAAQ,EAAEX,QAHd;IAII,KAAK,EAAE,CACH;MACIsB,KAAK,EAAEnB,SADX;MAEIoB,MAAM,EAAErB,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCsB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAb,SAPG;EAJX,EADJ;AAgBH;;AAAA;;AAED,MAAMY,MAAM,GAAGE,gBAAA,CAAWC,MAAX,CAAkB;EAC7BF,QAAQ,EAAE;IACNG,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
1
|
+
{"version":3,"names":["ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","needsOffscreenAlphaCompositingOnItem","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation<string>) => ReactElement | null;\n index: number;\n onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {\n children,\n index,\n onLayout,\n } = props;\n\n const {\n createItemStyle,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n needsOffscreenAlphaCompositingOnItem,\n } = useContext(InternalContext);\n\n const [visible, setVisible] = useState(false);\n\n const interpolation = useItemInterpolation(index);\n\n const itemStyle = useMemo(\n () => createItemStyle(interpolation, itemWidth),\n [createItemStyle, interpolation, itemWidth],\n );\n\n useEffect(() => {\n return itemVisibilityStore.subscribe(ranges => {\n const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n setVisible(nextVisible);\n });\n }, [index, itemVisibilityStore]);\n\n return (\n <Animated.View\n needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}\n children={visible ? children(interpolation) : null}\n onLayout={onLayout}\n style={[\n {\n width: itemWidth,\n height: itemHeight !== 'auto' ? itemHeight : undefined,\n },\n styles.absolute,\n // @ts-ignore\n itemStyle,\n ]}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n absolute: {\n position: 'absolute',\n },\n});\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC,mBAJE;IAKFC;EALE,IAMF,IAAAC,iBAAA,EAAWC,wBAAX,CANJ;EAQA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,6BAAA,EAAqBb,KAArB,CAAtB;EAEA,MAAMc,SAAS,GAAG,IAAAC,cAAA,EACd,MAAMb,eAAe,CAACU,aAAD,EAAgBR,SAAhB,CADP,EAEd,CAACF,eAAD,EAAkBU,aAAlB,EAAiCR,SAAjC,CAFc,CAAlB;EAKA,IAAAY,gBAAA,EAAU,MAAM;IACZ,OAAOX,mBAAmB,CAACY,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBtB,KAAK,IAAIqB,IAAT,IAAiBrB,KAAK,IAAIsB,EAA1C;MAAA,CAAZ,CAApB;MACAZ,UAAU,CAACS,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALD,EAKG,CAACnB,KAAD,EAAQK,mBAAR,CALH;EAOA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,8BAA8B,EAAEC,oCADpC;IAEI,QAAQ,EAAEG,OAAO,GAAGV,QAAQ,CAACa,aAAD,CAAX,GAA6B,IAFlD;IAGI,QAAQ,EAAEX,QAHd;IAII,KAAK,EAAE,CACH;MACIsB,KAAK,EAAEnB,SADX;MAEIoB,MAAM,EAAErB,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCsB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAb,SAPG;EAJX,EADJ;AAgBH;;AAAA;;AAED,MAAMY,MAAM,GAAGE,gBAAA,CAAWC,MAAX,CAAkB;EAC7BF,QAAQ,EAAE;IACNG,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","useContext","InternalContext","numberOfData","length","interpolationConfigOnLoop","useMemo","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","localOffsetX","interpolate","Animated","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport InternalContext from './InternalContext';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const localOffsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(localOffsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,MAAMA,0BAA0B,GAAG,CAAnC;;AAEe,SAASC,oBAAT,CAA8BC,KAA9B,
|
|
1
|
+
{"version":3,"names":["OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","useContext","InternalContext","numberOfData","length","interpolationConfigOnLoop","useMemo","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","localOffsetX","interpolate","Animated","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport InternalContext from './InternalContext';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation<string> {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const localOffsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(localOffsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["directionToValue","itemWidth","direction","toValueCompensator","toValue","currentOffset","remainder","Math","abs","halfOfItemWidth","compensateVector","usePagingAnimator","config","createScrollAnimation","indexController","initialIndex","loop","numberOfData","getCurrentIndex","lastIndex","notifyScrollStateHasChanged","initialOffsetX","accumulativeOffsetX","useAnimatedValue","animationOffsetX","gestureTranslationX","globalInterpolation","useMemo","Animated","add","toValueRef","useRef","currentOffsetRef","isAnimatingRef","maxWidth","ensureOffsetBoundary","useCallback","offset","isCloseToEnd","signOfOffset","requireNewOffset","newOffset","nextOffset","current","setValue","interruptAnimation","stopAnimation","lastValue","prevOffset","totalOffset","state","finalizeAnimation","startPagingAnimation","type","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","compensateToValue","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","wantedToValue","lastGestureTranslationX","Number","isFinite","animation","start","finished"],"sources":["usePagingAnimator.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue } from '@fountain-ui/core';\nimport type {\n CreateScrollAnimation,\n DirectionalPagingAnimationConfig,\n IndexController,\n IndexPagingAnimationConfig,\n PagingAnimationConfig,\n PagingAnimationType,\n PagingDirection,\n StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimatorConfig {\n createScrollAnimation: CreateScrollAnimation;\n itemWidth: number;\n indexController: IndexController;\n initialIndex: number;\n loop: boolean;\n numberOfData: number;\n}\n\nexport interface PagingAnimator {\n gestureTranslationX: Animated.Value;\n globalInterpolation: Animated.AnimatedInterpolation;\n interruptAnimation: () => void;\n startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nfunction toValueCompensator(itemWidth: number) {\n return function (toValue: number, currentOffset: number): number {\n const remainder = Math.abs(currentOffset % itemWidth);\n\n const halfOfItemWidth = Math.abs(itemWidth / 2);\n const compensateVector = remainder > halfOfItemWidth\n ? remainder - itemWidth\n : remainder;\n\n const direction = currentOffset > 0 ? -1 : 1;\n\n return toValue + (direction * compensateVector);\n };\n}\n\nexport default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {\n const {\n createScrollAnimation,\n itemWidth,\n indexController,\n initialIndex,\n loop,\n numberOfData,\n } = config;\n\n const {\n getCurrentIndex,\n lastIndex,\n notifyScrollStateHasChanged,\n } = indexController;\n\n const initialOffsetX = itemWidth * initialIndex;\n const accumulativeOffsetX = useAnimatedValue(initialOffsetX);\n const animationOffsetX = useAnimatedValue(0);\n const gestureTranslationX = useAnimatedValue(0);\n\n const globalInterpolation = useMemo(() => {\n return Animated.add(\n Animated.add(accumulativeOffsetX, animationOffsetX),\n gestureTranslationX,\n );\n }, []);\n\n const toValueRef = useRef<number>(0);\n const currentOffsetRef = useRef<number>(0);\n\n const isAnimatingRef = useRef<boolean>(false);\n\n const maxWidth = Math.abs(numberOfData * itemWidth);\n\n const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {\n if (loop) {\n const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);\n if (isCloseToEnd) {\n const signOfOffset = offset > 0 ? 1 : -1;\n return offset + (-signOfOffset * maxWidth);\n }\n }\n\n return offset % maxWidth;\n }, [itemWidth, loop, maxWidth]);\n\n const requireNewOffset = useCallback((newOffset: number) => {\n const nextOffset = ensureOffsetBoundary(newOffset);\n\n currentOffsetRef.current = nextOffset;\n accumulativeOffsetX.setValue(nextOffset);\n\n toValueRef.current = 0;\n animationOffsetX.setValue(0);\n }, [\n ensureOffsetBoundary,\n ]);\n\n const interruptAnimation = useCallback(() => {\n if (!isAnimatingRef.current) {\n return;\n }\n\n animationOffsetX.stopAnimation(lastValue => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const totalOffset = prevOffset + lastValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });\n });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const finalizeAnimation = useCallback(() => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const toValue = toValueRef.current;\n const totalOffset = prevOffset + toValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n if (isAnimatingRef.current) {\n return;\n }\n\n const configWithDefaults: PagingAnimationConfig = {\n animated: true,\n ...config,\n };\n\n const currentIndex = getCurrentIndex();\n\n const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n const compensateToValue = toValueCompensator(itemWidth);\n\n const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n const { direction, isOriginatedFromGesture } = _config;\n\n if (currentIndex === 0 && direction === 'prev') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : lastIndex * itemWidth; // first position\n }\n return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n };\n\n const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n const _configWithDefaults: DirectionalPagingAnimationConfig = {\n isOriginatedFromGesture: false,\n ..._config,\n };\n\n return loop\n ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n };\n\n const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n if (index < 0 || index > lastIndex || index === currentIndex) {\n // no animation if index is invalid or equals to current index\n return 0;\n }\n\n const distance = Math.abs(currentIndex - index) * itemWidth;\n const direction = index > currentIndex ? -1 : 1;\n\n return distance * direction;\n };\n\n const wantedToValue = type === 'directional'\n // @ts-ignore\n ? getValueByDirectionalPaging(configWithDefaults)\n // @ts-ignore\n : getValueByIndexPaging(configWithDefaults);\n\n const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);\n\n toValueRef.current = toValue;\n isAnimatingRef.current = true;\n\n notifyScrollStateHasChanged({\n offset: currentOffsetRef.current + toValue,\n state: 'dragging',\n });\n\n const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;\n if (Number.isFinite(lastGestureTranslationX)) {\n animationOffsetX.setValue(lastGestureTranslationX);\n gestureTranslationX.setValue(0);\n }\n\n if (configWithDefaults.animated) {\n const animation = createScrollAnimation(animationOffsetX, toValue);\n\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n } else {\n finalizeAnimation();\n }\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n notifyScrollStateHasChanged,\n ]);\n\n return {\n gestureTranslationX,\n globalInterpolation,\n interruptAnimation,\n startPagingAnimation,\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["directionToValue","itemWidth","direction","toValueCompensator","toValue","currentOffset","remainder","Math","abs","halfOfItemWidth","compensateVector","usePagingAnimator","config","createScrollAnimation","indexController","initialIndex","loop","numberOfData","getCurrentIndex","lastIndex","notifyScrollStateHasChanged","initialOffsetX","accumulativeOffsetX","useAnimatedValue","animationOffsetX","gestureTranslationX","globalInterpolation","useMemo","Animated","add","toValueRef","useRef","currentOffsetRef","isAnimatingRef","maxWidth","ensureOffsetBoundary","useCallback","offset","isCloseToEnd","signOfOffset","requireNewOffset","newOffset","nextOffset","current","setValue","interruptAnimation","stopAnimation","lastValue","prevOffset","totalOffset","state","finalizeAnimation","startPagingAnimation","type","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","compensateToValue","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","wantedToValue","lastGestureTranslationX","Number","isFinite","animation","start","finished"],"sources":["usePagingAnimator.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue } from '@fountain-ui/core';\nimport type {\n CreateScrollAnimation,\n DirectionalPagingAnimationConfig,\n IndexController,\n IndexPagingAnimationConfig,\n PagingAnimationConfig,\n PagingAnimationType,\n PagingDirection,\n StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimatorConfig {\n createScrollAnimation: CreateScrollAnimation;\n itemWidth: number;\n indexController: IndexController;\n initialIndex: number;\n loop: boolean;\n numberOfData: number;\n}\n\nexport interface PagingAnimator {\n gestureTranslationX: Animated.Value;\n globalInterpolation: Animated.AnimatedInterpolation<string>;\n interruptAnimation: () => void;\n startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nfunction toValueCompensator(itemWidth: number) {\n return function (toValue: number, currentOffset: number): number {\n const remainder = Math.abs(currentOffset % itemWidth);\n\n const halfOfItemWidth = Math.abs(itemWidth / 2);\n const compensateVector = remainder > halfOfItemWidth\n ? remainder - itemWidth\n : remainder;\n\n const direction = currentOffset > 0 ? -1 : 1;\n\n return toValue + (direction * compensateVector);\n };\n}\n\nexport default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {\n const {\n createScrollAnimation,\n itemWidth,\n indexController,\n initialIndex,\n loop,\n numberOfData,\n } = config;\n\n const {\n getCurrentIndex,\n lastIndex,\n notifyScrollStateHasChanged,\n } = indexController;\n\n const initialOffsetX = itemWidth * initialIndex;\n const accumulativeOffsetX = useAnimatedValue(initialOffsetX);\n const animationOffsetX = useAnimatedValue(0);\n const gestureTranslationX = useAnimatedValue(0);\n\n const globalInterpolation = useMemo(() => {\n return Animated.add(\n Animated.add(accumulativeOffsetX, animationOffsetX),\n gestureTranslationX,\n );\n }, []);\n\n const toValueRef = useRef<number>(0);\n const currentOffsetRef = useRef<number>(0);\n\n const isAnimatingRef = useRef<boolean>(false);\n\n const maxWidth = Math.abs(numberOfData * itemWidth);\n\n const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {\n if (loop) {\n const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);\n if (isCloseToEnd) {\n const signOfOffset = offset > 0 ? 1 : -1;\n return offset + (-signOfOffset * maxWidth);\n }\n }\n\n return offset % maxWidth;\n }, [itemWidth, loop, maxWidth]);\n\n const requireNewOffset = useCallback((newOffset: number) => {\n const nextOffset = ensureOffsetBoundary(newOffset);\n\n currentOffsetRef.current = nextOffset;\n accumulativeOffsetX.setValue(nextOffset);\n\n toValueRef.current = 0;\n animationOffsetX.setValue(0);\n }, [\n ensureOffsetBoundary,\n ]);\n\n const interruptAnimation = useCallback(() => {\n if (!isAnimatingRef.current) {\n return;\n }\n\n animationOffsetX.stopAnimation(lastValue => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const totalOffset = prevOffset + lastValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });\n });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const finalizeAnimation = useCallback(() => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const toValue = toValueRef.current;\n const totalOffset = prevOffset + toValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n if (isAnimatingRef.current) {\n return;\n }\n\n const configWithDefaults: PagingAnimationConfig = {\n animated: true,\n ...config,\n };\n\n const currentIndex = getCurrentIndex();\n\n const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n const compensateToValue = toValueCompensator(itemWidth);\n\n const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n const { direction, isOriginatedFromGesture } = _config;\n\n if (currentIndex === 0 && direction === 'prev') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : lastIndex * itemWidth; // first position\n }\n return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n };\n\n const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n const _configWithDefaults: DirectionalPagingAnimationConfig = {\n isOriginatedFromGesture: false,\n ..._config,\n };\n\n return loop\n ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n };\n\n const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n if (index < 0 || index > lastIndex || index === currentIndex) {\n // no animation if index is invalid or equals to current index\n return 0;\n }\n\n const distance = Math.abs(currentIndex - index) * itemWidth;\n const direction = index > currentIndex ? -1 : 1;\n\n return distance * direction;\n };\n\n const wantedToValue = type === 'directional'\n // @ts-ignore\n ? getValueByDirectionalPaging(configWithDefaults)\n // @ts-ignore\n : getValueByIndexPaging(configWithDefaults);\n\n const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);\n\n toValueRef.current = toValue;\n isAnimatingRef.current = true;\n\n notifyScrollStateHasChanged({\n offset: currentOffsetRef.current + toValue,\n state: 'dragging',\n });\n\n const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;\n if (Number.isFinite(lastGestureTranslationX)) {\n animationOffsetX.setValue(lastGestureTranslationX);\n gestureTranslationX.setValue(0);\n }\n\n if (configWithDefaults.animated) {\n const animation = createScrollAnimation(animationOffsetX, toValue);\n\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n } else {\n finalizeAnimation();\n }\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n notifyScrollStateHasChanged,\n ]);\n\n return {\n gestureTranslationX,\n globalInterpolation,\n interruptAnimation,\n startPagingAnimation,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["directions","scrollStates"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nconst scrollStates = ['idle', 'dragging', 'interrupted'] as const;\n\nexport type ScrollState = (typeof scrollStates)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation
|
|
1
|
+
{"version":3,"names":["directions","scrollStates"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nconst scrollStates = ['idle', 'dragging', 'interrupted'] as const;\n\nexport type ScrollState = (typeof scrollStates)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation<string> }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation<string>, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n (): number;\n}\n\nexport interface OnIndexChange {\n (itemIndex: number): void;\n}\n\nexport interface OnPositionChange {\n (position: number): void;\n}\n\nexport interface ScrollStateChangeEvent {\n offset: number;\n state: ScrollState;\n}\n\nexport interface IndexController {\n getCurrentIndex: GetCurrentIndex;\n lastIndex: number;\n notifyScrollStateHasChanged: (event: ScrollStateChangeEvent) => void;\n}\n\nexport type PagingAnimationType = 'directional' | 'index';\n\nexport interface BasePagingAnimationConfig {\n animated?: boolean;\n lastGestureTranslationX?: number;\n}\n\nexport interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {\n direction: PagingDirection;\n isOriginatedFromGesture?: boolean;\n}\n\nexport interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {\n index: number;\n}\n\nexport type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;\n\nexport interface StartPagingAnimation {\n (type: PagingAnimationType, config: PagingAnimationConfig): void;\n}\n\nexport type VisibleIndexRanges = Array<[number, number]>;\n\nexport interface StoreSubscription {\n (): void;\n}\n\nexport interface ItemVisibilityStore {\n dispatch: (ranges: VisibleIndexRanges) => void;\n subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;\n removeAllListeners: () => void;\n}\n\nexport interface AutoplayController {\n pause: () => void;\n resume: () => void;\n}\n\nexport interface ScrollToOption {\n index: number;\n animated?: boolean;\n}\n\nexport interface CarouselInstance {\n /**\n * Get current visible item index.\n */\n getCurrentIndex: GetCurrentIndex;\n\n /**\n * Scroll to next visible item.\n */\n next: () => void;\n\n /**\n * Scroll to previous visible item.\n */\n prev: () => void;\n\n /**\n * Scroll to desired indexed item.\n * Invalid index is ignored.\n */\n scrollTo: (option: ScrollToOption) => void;\n}\n"],"mappings":";;;;;AAGA,MAAMA,UAAU,GAAG,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,CAAnB;AAIA,MAAMC,YAAY,GAAG,CAAC,MAAD,EAAS,UAAT,EAAqB,aAArB,CAArB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ViewerItem","props","height","url","width","imageKey","invisiblePaddingTop","onError","onLoad","onPress","onReloadPress","reloadButtonVisible","styles","view","paddingTop","image","error","placeholder","uri","EncodedTile","css","alignSelf"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, TouchableWithoutFeedback, View } from 'react-native';\nimport { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';\nimport ReloadButton from './ReloadButton';\nimport EncodedTile from './EncodedTile';\n\nexport interface ViewerItemProps {\n /**\n * Image width.\n */\n width: number;\n\n /**\n * Image height.\n */\n height: number;\n\n /**\n * Need invisible paddingTop viewer vertically expanded.\n */\n invisiblePaddingTop: number;\n\n /**\n * Image sourceUrl for displaying.\n */\n url?: string;\n\n /**\n * Error handler.\n */\n onError?: ImageProps['onError'];\n\n /**\n * Load handler.\n */\n onLoad?: ImageProps['onLoad'];\n\n /**\n * Handle Reload button press event.\n */\n onReloadPress?: ImageProps['onError'];\n\n /**\n * Handle item press event.\n */\n onPress?: () => void;\n\n /**\n * If true, reload button visible.\n * @default false\n */\n reloadButtonVisible?: boolean;\n\n /**\n * FuiImage key for trigger image rerender.\n */\n imageKey: string;\n}\n\nexport default function ViewerItem(props: ViewerItemProps) {\n const {\n height,\n url,\n width,\n imageKey,\n invisiblePaddingTop,\n onError,\n onLoad,\n onPress,\n onReloadPress,\n reloadButtonVisible = false,\n } = props;\n\n const styles = {\n view: {\n height,\n width: '100%',\n paddingTop: invisiblePaddingTop,\n },\n image: {\n height: height - invisiblePaddingTop,\n width,\n },\n };\n\n const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;\n\n const placeholder = <Image\n source={{ uri: EncodedTile }}\n resizeMode={'cover'}\n style={styles.image}\n />;\n\n return (\n <TouchableWithoutFeedback onPress={onPress}>\n <View style={styles.view}>\n <FuiImage\n key={imageKey}\n cache={'web'}\n disableDrag={true}\n disableLongClick={true}\n disableOutline={true}\n error={error}\n onError={onError}\n onLoad={onLoad}\n loading={'eager'}\n placeholder={placeholder}\n source={{ uri: url }}\n square={true}\n style={css([\n { alignSelf: 'center' },\n styles.image,\n ])}\n />\n </View>\n </TouchableWithoutFeedback>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAuDe,SAASA,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,MADE;IAEFC,GAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC,mBALE;IAMFC,OANE;IAOFC,MAPE;IAQFC,OARE;IASFC,aATE;IAUFC,mBAAmB,GAAG;EAVpB,IAWFV,KAXJ;EAaA,MAAMW,MAAM,GAAG;IACXC,IAAI,EAAE;MACFX,MADE;MAEFE,KAAK,EAAE,MAFL;MAGFU,UAAU,EAAER;IAHV,CADK;IAMXS,KAAK,EAAE;MACHb,MAAM,EAAEA,MAAM,GAAGI,mBADd;MAEHF;IAFG;EANI,CAAf;EAYA,MAAMY,KAAK,GAAGL,mBAAmB,gBAAG,6BAAC,qBAAD;IAAc,OAAO,EAAED;EAAvB,EAAH,GAA6C,IAA9E;;EAEA,MAAMO,WAAW,gBAAG,6BAAC,kBAAD;IAChB,MAAM,EAAE;MAAEC,GAAG,EAAEC;IAAP,CADQ;IAEhB,UAAU,EAAE,OAFI;IAGhB,KAAK,EAAEP,MAAM,CAACG;EAHE,EAApB;;EAMA,oBACI,6BAAC,qCAAD;IAA0B,OAAO,EAAEN;EAAnC,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,gBACI,6BAAC,WAAD;IACI,GAAG,EAAER,QADT;IAEI,KAAK,EAAE,KAFX;IAGI,WAAW,EAAE,IAHjB;IAII,gBAAgB,EAAE,IAJtB;IAKI,cAAc,EAAE,IALpB;IAMI,KAAK,EAAEW,KANX;IAOI,OAAO,EAAET,OAPb;IAQI,MAAM,EAAEC,MARZ;IASI,OAAO,EAAE,OATb;IAUI,WAAW,EAAES,WAVjB;IAWI,MAAM,EAAE;MAAEC,GAAG,EAAEf;IAAP,CAXZ;IAYI,MAAM,EAAE,IAZZ;IAaI,KAAK,EAAE,IAAAiB,SAAA,EAAI,CACP;MAAEC,SAAS,EAAE;IAAb,CADO,EAEPT,MAAM,CAACG,KAFA,CAAJ;EAbX,EADJ,CADJ,CADJ;AAwBH;;AAAA"}
|
|
1
|
+
{"version":3,"names":["ViewerItem","props","height","url","width","imageKey","invisiblePaddingTop","onError","onLoad","onPress","onReloadPress","reloadButtonVisible","styles","view","paddingTop","image","error","placeholder","uri","EncodedTile","css","alignSelf"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Image, TouchableWithoutFeedback, View } from 'react-native';\nimport { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';\nimport ReloadButton from './ReloadButton';\nimport EncodedTile from './EncodedTile';\n\nexport interface ViewerItemProps {\n /**\n * Image width.\n */\n width: number;\n\n /**\n * Image height.\n */\n height: number;\n\n /**\n * Need invisible paddingTop viewer vertically expanded.\n */\n invisiblePaddingTop: number;\n\n /**\n * Image sourceUrl for displaying.\n */\n url?: string;\n\n /**\n * Error handler.\n */\n onError?: ImageProps['onError'];\n\n /**\n * Load handler.\n */\n onLoad?: ImageProps['onLoad'];\n\n /**\n * Handle Reload button press event.\n */\n onReloadPress?: ImageProps['onError'];\n\n /**\n * Handle item press event.\n */\n onPress?: () => void;\n\n /**\n * If true, reload button visible.\n * @default false\n */\n reloadButtonVisible?: boolean;\n\n /**\n * FuiImage key for trigger image rerender.\n */\n imageKey: string;\n}\n\nexport default function ViewerItem(props: ViewerItemProps) {\n const {\n height,\n url,\n width,\n imageKey,\n invisiblePaddingTop,\n onError,\n onLoad,\n onPress,\n onReloadPress,\n reloadButtonVisible = false,\n } = props;\n\n const styles = {\n view: {\n height,\n width: '100%' as DimensionValue,\n paddingTop: invisiblePaddingTop,\n },\n image: {\n height: height - invisiblePaddingTop,\n width,\n },\n };\n\n const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;\n\n const placeholder = <Image\n source={{ uri: EncodedTile }}\n resizeMode={'cover'}\n style={styles.image}\n />;\n\n return (\n <TouchableWithoutFeedback onPress={onPress}>\n <View style={styles.view}>\n <FuiImage\n key={imageKey}\n cache={'web'}\n disableDrag={true}\n disableLongClick={true}\n disableOutline={true}\n error={error}\n onError={onError}\n onLoad={onLoad}\n loading={'eager'}\n placeholder={placeholder}\n source={{ uri: url }}\n square={true}\n style={css([\n { alignSelf: 'center' },\n styles.image,\n ])}\n />\n </View>\n </TouchableWithoutFeedback>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAuDe,SAASA,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,MADE;IAEFC,GAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC,mBALE;IAMFC,OANE;IAOFC,MAPE;IAQFC,OARE;IASFC,aATE;IAUFC,mBAAmB,GAAG;EAVpB,IAWFV,KAXJ;EAaA,MAAMW,MAAM,GAAG;IACXC,IAAI,EAAE;MACFX,MADE;MAEFE,KAAK,EAAE,MAFL;MAGFU,UAAU,EAAER;IAHV,CADK;IAMXS,KAAK,EAAE;MACHb,MAAM,EAAEA,MAAM,GAAGI,mBADd;MAEHF;IAFG;EANI,CAAf;EAYA,MAAMY,KAAK,GAAGL,mBAAmB,gBAAG,6BAAC,qBAAD;IAAc,OAAO,EAAED;EAAvB,EAAH,GAA6C,IAA9E;;EAEA,MAAMO,WAAW,gBAAG,6BAAC,kBAAD;IAChB,MAAM,EAAE;MAAEC,GAAG,EAAEC;IAAP,CADQ;IAEhB,UAAU,EAAE,OAFI;IAGhB,KAAK,EAAEP,MAAM,CAACG;EAHE,EAApB;;EAMA,oBACI,6BAAC,qCAAD;IAA0B,OAAO,EAAEN;EAAnC,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,gBACI,6BAAC,WAAD;IACI,GAAG,EAAER,QADT;IAEI,KAAK,EAAE,KAFX;IAGI,WAAW,EAAE,IAHjB;IAII,gBAAgB,EAAE,IAJtB;IAKI,cAAc,EAAE,IALpB;IAMI,KAAK,EAAEW,KANX;IAOI,OAAO,EAAET,OAPb;IAQI,MAAM,EAAEC,MARZ;IASI,OAAO,EAAE,OATb;IAUI,WAAW,EAAES,WAVjB;IAWI,MAAM,EAAE;MAAEC,GAAG,EAAEf;IAAP,CAXZ;IAYI,MAAM,EAAE,IAZZ;IAaI,KAAK,EAAE,IAAAiB,SAAA,EAAI,CACP;MAAEC,SAAS,EAAE;IAAb,CADO,EAEPT,MAAM,CAACG,KAFA,CAAJ;EAbX,EADJ,CADJ,CADJ;AAwBH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["initYear","itemHeight","useStyles","theme","useTheme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","getYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","formatDate","toString","newDate","setYear"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n date: Date;\n locale?: string,\n maxDate?: Date;\n minDate?: Date;\n onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n const theme = useTheme();\n\n return {\n list: {\n marginTop: theme.spacing(1),\n maxHeight: 270,\n },\n };\n};\n\nconst YearPicker = ({\n date,\n locale,\n maxDate,\n minDate,\n onYearPress,\n}: YearPickerProps) => {\n const styles = useStyles();\n\n const ref = React.useRef<FlatList | null>(null);\n\n const minYear = minDate ? getYear(minDate) : initYear;\n const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n React.useEffect(() => {\n ref.current?.scrollToItem({\n animated: false,\n item: getYear(date),\n });\n }, [date]);\n\n const getItemLayout = (data:
|
|
1
|
+
{"version":3,"names":["initYear","itemHeight","useStyles","theme","useTheme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","getYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","formatDate","toString","newDate","setYear"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n date: Date;\n locale?: string,\n maxDate?: Date;\n minDate?: Date;\n onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n const theme = useTheme();\n\n return {\n list: {\n marginTop: theme.spacing(1),\n maxHeight: 270,\n },\n };\n};\n\nconst YearPicker = ({\n date,\n locale,\n maxDate,\n minDate,\n onYearPress,\n}: YearPickerProps) => {\n const styles = useStyles();\n\n const ref = React.useRef<FlatList | null>(null);\n\n const minYear = minDate ? getYear(minDate) : initYear;\n const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n React.useEffect(() => {\n ref.current?.scrollToItem({\n animated: false,\n item: getYear(date),\n });\n }, [date]);\n\n const getItemLayout = (data: ArrayLike<number> | null | undefined, index: number) => ({\n length: itemHeight,\n offset: itemHeight * index,\n index,\n });\n\n return (\n <Column>\n <Typography\n children={formatDate(date, locale)}\n color={'strong'}\n variant={'body3'}\n />\n <FlatList\n data={years}\n keyExtractor={item => item.toString()}\n renderItem={({ item }) => (\n <Button\n children={item.toString()}\n variant={'text'}\n onPress={() => {\n const newDate = setYear(date, item);\n onYearPress(newDate);\n }}\n />\n )}\n getItemLayout={getItemLayout}\n style={styles.list}\n ref={ref}\n />\n </Column>\n );\n};\n\nexport default YearPicker;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGb,SAAS,EAAxB;;EAEA,MAAMc,GAAG,GAAGC,cAAA,CAAMC,MAAN,CAA8B,IAA9B,CAAZ;;EAEA,MAAMC,OAAO,GAAGN,OAAO,GAAG,IAAAO,gBAAA,EAAQP,OAAR,CAAH,GAAsBb,QAA7C;EACA,MAAMqB,OAAO,GAAGT,OAAO,GAAG,IAAAQ,gBAAA,EAAQR,OAAR,CAAH,GAAsB,IAAAQ,gBAAA,EAAQ,IAAIE,IAAJ,EAAR,CAA7C;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGF,OAAV,GAAoB,CAArB,CAAL,CAA6BM,IAA7B,CAAkCN,OAAlC,EAA2CO,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;;EAEAX,cAAA,CAAMY,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAb,GAAG,CAACc,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAE,IAAAb,gBAAA,EAAQV,IAAR;IAFgB,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMwB,aAAa,GAAG,CAACC,IAAD,EAA6CC,KAA7C,MAAgE;IAClFC,MAAM,EAAEpC,UAD0E;IAElFqC,MAAM,EAAErC,UAAU,GAAGmC,KAF6D;IAGlFA;EAHkF,CAAhE,CAAtB;;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,gBAAD;IACI,QAAQ,EAAE,IAAAG,iBAAA,EAAW7B,IAAX,EAAiBC,MAAjB,CADd;IAEI,KAAK,EAAE,QAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,6BAAC,qBAAD;IACI,IAAI,EAAEY,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACO,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEP;MAAF,CAAD;MAAA,oBACR,6BAAC,YAAD;QACI,QAAQ,EAAEA,IAAI,CAACO,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG,IAAAC,gBAAA,EAAQhC,IAAR,EAAcuB,IAAd,CAAhB;UACAnB,WAAW,CAAC2B,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEP,aAbnB;IAcI,KAAK,EAAEnB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;eAwDeP,U"}
|
|
@@ -7,7 +7,6 @@ import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, Bottom
|
|
|
7
7
|
import { Column, css, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
|
|
8
8
|
import { useTheme } from '@fountain-ui/styles';
|
|
9
9
|
import TransparentBackdrop from './TransparentBackdrop';
|
|
10
|
-
import useDynamicSnapPoints from './useDynamicSnapPoints.native';
|
|
11
10
|
|
|
12
11
|
const NoHandle = () => null;
|
|
13
12
|
|
|
@@ -123,12 +122,6 @@ export default function BottomSheet(props) {
|
|
|
123
122
|
}).start();
|
|
124
123
|
};
|
|
125
124
|
|
|
126
|
-
const {
|
|
127
|
-
animatedHandleHeight,
|
|
128
|
-
animatedSnapPoints,
|
|
129
|
-
animatedContentHeight,
|
|
130
|
-
handleContentLayout
|
|
131
|
-
} = useDynamicSnapPoints(snapPoints);
|
|
132
125
|
return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
|
|
133
126
|
backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop // @ts-ignore
|
|
134
127
|
,
|
|
@@ -144,16 +137,13 @@ export default function BottomSheet(props) {
|
|
|
144
137
|
maxDynamicContentSize: maxDynamicContentSize,
|
|
145
138
|
detached: Boolean(topElement),
|
|
146
139
|
onAnimate: topElement ? onAnimate : undefined,
|
|
147
|
-
snapPoints:
|
|
148
|
-
handleHeight: animatedHandleHeight,
|
|
149
|
-
contentHeight: animatedContentHeight
|
|
140
|
+
snapPoints: snapPoints
|
|
150
141
|
}, topElement ? /*#__PURE__*/React.createElement(Animated.View, {
|
|
151
142
|
style: topElementAnimationStyle
|
|
152
143
|
}, /*#__PURE__*/React.createElement(Column, {
|
|
153
144
|
onLayout: handleTopElementLayout,
|
|
154
145
|
style: topElementLocationStyle
|
|
155
146
|
}, topElement)) : null, /*#__PURE__*/React.createElement(BottomSheetView, {
|
|
156
|
-
onLayout: handleContentLayout,
|
|
157
147
|
style: contentWrapperStyle
|
|
158
148
|
}, children)));
|
|
159
149
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","useSafeAreaInsets","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","useDynamicSnapPoints","NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n BottomSheetBackdrop,\n BottomSheetBackdropProps,\n BottomSheetModal,\n BottomSheetModalProvider,\n BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.75,\n backgroundStyle: backgroundStyleProp,\n borderRadius: borderRadiusProp,\n children,\n enableDynamicSizing = true,\n topElement,\n index,\n maxHeightNormalizedRatio = 0.8,\n onChange,\n snapPoints = [],\n style: styleProp,\n } = props;\n\n const indexRef = useRef<number>(-1);\n const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n const { height: windowHeight } = useWindowDimensions();\n const [topElementHeight, setTopElementHeight] = useState(0);\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const handleChange = useCallback((newIndex: number) => {\n indexRef.current = newIndex;\n\n if (onChange) {\n onChange(newIndex);\n }\n }, [onChange]);\n\n const handleDismiss = useCallback(() => {\n handleChange(-1);\n }, [handleChange]);\n\n useEffect(() => {\n if (index === indexRef.current) {\n return;\n }\n\n if (indexRef.current < 0 && index >= 0) {\n bottomSheetRef.current?.present();\n } else if (indexRef.current >= 0 && index < 0) {\n bottomSheetRef.current?.dismiss();\n } else {\n // @ts-ignore\n bottomSheetRef.current?.snapToIndex(index);\n }\n }, [index]);\n\n const theme = useTheme();\n\n const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n const backgroundStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n },\n backgroundStyleProp,\n ]);\n\n const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n const contentWrapperStyle: ViewStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n flexShrink: 1,\n maxHeight: maxDynamicContentSize,\n minHeight: 325,\n overflow: 'hidden',\n paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n paddingTop: DEFAULT_PADDING_TOP,\n },\n styleProp,\n ]);\n\n const isBackdropTransparent = backdropOpacity <= 0;\n\n const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n <BottomSheetBackdrop\n {...props}\n appearsOnIndex={0}\n disappearsOnIndex={-1}\n opacity={backdropOpacity}\n pressBehavior={onChange ? 'close' : 'none'}\n />\n );\n\n const topElementOpacity = useAnimatedValue(0);\n const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n const topElementLocationStyle: ExtendedStyle = {\n position: 'absolute',\n width: '100%',\n bottom: 0,\n };\n const onAnimate = (fromIndex: number, toIndex: number) => {\n const isVisible = toIndex > -1;\n\n Animated.timing(topElementOpacity, {\n toValue: isVisible ? 1 : 0,\n duration: 0,\n useNativeDriver: isNotAndroid12,\n }).start();\n };\n\n const {\n animatedHandleHeight,\n animatedSnapPoints,\n animatedContentHeight,\n handleContentLayout,\n } = useDynamicSnapPoints(snapPoints);\n\n return (\n <BottomSheetModalProvider>\n <BottomSheetModal\n backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n // @ts-ignore\n backgroundStyle={backgroundStyle}\n enableOverDrag={false}\n index={index}\n handleComponent={NoHandle}\n onChange={handleChange}\n onDismiss={handleDismiss}\n ref={bottomSheetRef}\n enablePanDownToClose={Boolean(onChange)}\n enableDynamicSizing={enableDynamicSizing}\n maxDynamicContentSize={maxDynamicContentSize}\n detached={Boolean(topElement)}\n onAnimate={topElement ? onAnimate : undefined}\n snapPoints={animatedSnapPoints}\n handleHeight={animatedHandleHeight}\n contentHeight={animatedContentHeight}\n >\n {topElement ? (\n <Animated.View style={topElementAnimationStyle}>\n <Column\n onLayout={handleTopElementLayout}\n style={topElementLocationStyle}\n >\n {topElement}\n </Column>\n </Animated.View>\n ) : null}\n\n <BottomSheetView\n onLayout={handleContentLayout}\n style={contentWrapperStyle}\n >\n {children}\n </BottomSheetView>\n </BottomSheetModal>\n </BottomSheetModalProvider>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","useSafeAreaInsets","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n BottomSheetBackdrop,\n BottomSheetBackdropProps,\n BottomSheetModal,\n BottomSheetModalProvider,\n BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.75,\n backgroundStyle: backgroundStyleProp,\n borderRadius: borderRadiusProp,\n children,\n enableDynamicSizing = true,\n topElement,\n index,\n maxHeightNormalizedRatio = 0.8,\n onChange,\n snapPoints = [],\n style: styleProp,\n } = props;\n\n const indexRef = useRef<number>(-1);\n const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n const { height: windowHeight } = useWindowDimensions();\n const [topElementHeight, setTopElementHeight] = useState(0);\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const handleChange = useCallback((newIndex: number) => {\n indexRef.current = newIndex;\n\n if (onChange) {\n onChange(newIndex);\n }\n }, [onChange]);\n\n const handleDismiss = useCallback(() => {\n handleChange(-1);\n }, [handleChange]);\n\n useEffect(() => {\n if (index === indexRef.current) {\n return;\n }\n\n if (indexRef.current < 0 && index >= 0) {\n bottomSheetRef.current?.present();\n } else if (indexRef.current >= 0 && index < 0) {\n bottomSheetRef.current?.dismiss();\n } else {\n // @ts-ignore\n bottomSheetRef.current?.snapToIndex(index);\n }\n }, [index]);\n\n const theme = useTheme();\n\n const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n const backgroundStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n },\n backgroundStyleProp,\n ]);\n\n const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n const contentWrapperStyle: ViewStyle = css([\n {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n flexShrink: 1,\n maxHeight: maxDynamicContentSize,\n minHeight: 325,\n overflow: 'hidden',\n paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n paddingTop: DEFAULT_PADDING_TOP,\n },\n styleProp,\n ]);\n\n const isBackdropTransparent = backdropOpacity <= 0;\n\n const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n <BottomSheetBackdrop\n {...props}\n appearsOnIndex={0}\n disappearsOnIndex={-1}\n opacity={backdropOpacity}\n pressBehavior={onChange ? 'close' : 'none'}\n />\n );\n\n const topElementOpacity = useAnimatedValue(0);\n const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n const topElementLocationStyle: ExtendedStyle = {\n position: 'absolute',\n width: '100%',\n bottom: 0,\n };\n const onAnimate = (fromIndex: number, toIndex: number) => {\n const isVisible = toIndex > -1;\n\n Animated.timing(topElementOpacity, {\n toValue: isVisible ? 1 : 0,\n duration: 0,\n useNativeDriver: isNotAndroid12,\n }).start();\n };\n\n return (\n <BottomSheetModalProvider>\n <BottomSheetModal\n backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n // @ts-ignore\n backgroundStyle={backgroundStyle}\n enableOverDrag={false}\n index={index}\n handleComponent={NoHandle}\n onChange={handleChange}\n onDismiss={handleDismiss}\n ref={bottomSheetRef}\n enablePanDownToClose={Boolean(onChange)}\n enableDynamicSizing={enableDynamicSizing}\n maxDynamicContentSize={maxDynamicContentSize}\n detached={Boolean(topElement)}\n onAnimate={topElement ? onAnimate : undefined}\n snapPoints={snapPoints}\n >\n {topElement ? (\n <Animated.View style={topElementAnimationStyle}>\n <Column\n onLayout={handleTopElementLayout}\n style={topElementLocationStyle}\n >\n {topElement}\n </Column>\n </Animated.View>\n ) : null}\n\n <BottomSheetView style={contentWrapperStyle}>\n {children}\n </BottomSheetView>\n </BottomSheetModal>\n </BottomSheetModalProvider>\n );\n};\n"],"mappings":"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"}
|
|
@@ -68,7 +68,6 @@ export default function BottomSheet(props) {
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
|
|
71
|
-
const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');
|
|
72
71
|
const {
|
|
73
72
|
convertedSnapPoints,
|
|
74
73
|
handleLayout,
|
|
@@ -76,7 +75,7 @@ export default function BottomSheet(props) {
|
|
|
76
75
|
} = useDynamicSnapPoints({
|
|
77
76
|
enableDynamicSizing,
|
|
78
77
|
maxDynamicContentSize,
|
|
79
|
-
snapPoints
|
|
78
|
+
snapPoints
|
|
80
79
|
});
|
|
81
80
|
const translateY = convertedSnapPoints.length > 0 ? highestSnapPoint - (convertedSnapPoints[index] ?? 0) : 0;
|
|
82
81
|
const contentStyles = css([styles.paper, { ...(borderRadius ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useWindowDimensions","View","Column","css","Modal","StyleSheet","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","
|
|
1
|
+
{"version":3,"names":["React","useState","useWindowDimensions","View","Column","css","Modal","StyleSheet","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","translateY","length","contentStyles","maxHeight","absoluteFill","top"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n const theme = useTheme();\n\n return {\n root: {\n justifyContent: 'flex-end',\n zIndex: theme.zIndex.dialog,\n },\n animated: {\n alignSelf: 'center',\n maxWidth: 720,\n width: '100%',\n },\n paper: {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: theme.shape.radius.xxl,\n borderTopRightRadius: theme.shape.radius.xxl,\n flexGrow: 1,\n minHeight: 325,\n overflow: 'hidden',\n paddingBottom: theme.spacing(6),\n paddingTop: theme.spacing(5.5),\n },\n topElementLocation: {\n position: 'absolute',\n width: '100%',\n },\n };\n};\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.75,\n borderRadius,\n children,\n enableDynamicSizing = true,\n topElement,\n index,\n maxHeightNormalizedRatio = 0.8,\n onChange,\n snapPoints = [],\n style: styleProp,\n } = props;\n\n const styles = useStyles();\n\n const { height: windowHeight } = useWindowDimensions();\n\n const [topElementHeight, setTopElementHeight] = useState(0);\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const handleClose = () => {\n if (onChange) {\n onChange(-1);\n }\n };\n\n const {\n convertedSnapPoints,\n handleLayout,\n highestSnapPoint,\n } = useDynamicSnapPoints({\n enableDynamicSizing,\n maxDynamicContentSize,\n snapPoints,\n });\n\n const translateY = convertedSnapPoints.length > 0\n ? highestSnapPoint - (convertedSnapPoints[index] ?? 0)\n : 0;\n\n const contentStyles = css([\n styles.paper,\n {\n ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n ...(!enableDynamicSizing && highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n maxHeight: maxDynamicContentSize,\n },\n styleProp,\n ]);\n\n return (\n <Modal\n backdropOpacity={backdropOpacity}\n onClose={handleClose}\n visible={index >= 0}\n style={css([StyleSheet.absoluteFill, styles.root])}\n >\n <AnimatedY translateY={translateY}>\n {topElement ? (\n <Column\n onLayout={handleTopElementLayout}\n style={[styles.topElementLocation, { top: -topElementHeight }]}\n >\n {topElement}\n </Column>\n ) : null}\n\n <View\n onLayout={handleLayout}\n style={contentStyles}\n >\n {children}\n </View>\n </AnimatedY>\n </Modal>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","Animated","mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","needsOffscreenAlphaCompositingOnItem","InternalContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n createItemStyle: CreateItemStyle;\n data: ReadonlyArray<ItemT>;\n globalInterpolation: Animated.AnimatedInterpolation
|
|
1
|
+
{"version":3,"names":["createContext","Animated","mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","needsOffscreenAlphaCompositingOnItem","InternalContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n createItemStyle: CreateItemStyle;\n data: ReadonlyArray<ItemT>;\n globalInterpolation: Animated.AnimatedInterpolation<string>;\n itemHeight: ItemHeight;\n itemWidth: number;\n itemVisibilityStore: ItemVisibilityStore;\n loop: boolean;\n needsOffscreenAlphaCompositingOnItem: boolean;\n}\n\nconst mockItemVisibilityStore: ItemVisibilityStore = {\n dispatch: () => void 0,\n subscribe: () => () => void 0,\n removeAllListeners: () => void 0,\n};\n\nconst initialValue: Readonly<InternalContextValue<any>> = {\n createItemStyle: () => ({}),\n data: [],\n globalInterpolation: Animated.add(new Animated.Value(0), 0),\n itemHeight: 0,\n itemWidth: 0,\n itemVisibilityStore: mockItemVisibilityStore,\n loop: false,\n needsOffscreenAlphaCompositingOnItem: false,\n};\n\nconst InternalContext = createContext<InternalContextValue<any>>(initialValue);\n\nexport default InternalContext;\n"],"mappings":"AAAA,SAASA,aAAT,QAA8B,OAA9B;AACA,SAASC,QAAT,QAAyB,cAAzB;AAcA,MAAMC,uBAA4C,GAAG;EACjDC,QAAQ,EAAE,MAAM,KAAK,CAD4B;EAEjDC,SAAS,EAAE,MAAM,MAAM,KAAK,CAFqB;EAGjDC,kBAAkB,EAAE,MAAM,KAAK;AAHkB,CAArD;AAMA,MAAMC,YAAiD,GAAG;EACtDC,eAAe,EAAE,OAAO,EAAP,CADqC;EAEtDC,IAAI,EAAE,EAFgD;EAGtDC,mBAAmB,EAAER,QAAQ,CAACS,GAAT,CAAa,IAAIT,QAAQ,CAACU,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEZ,uBANiC;EAOtDa,IAAI,EAAE,KAPgD;EAQtDC,oCAAoC,EAAE;AARgB,CAA1D;AAWA,MAAMC,eAAe,gBAAGjB,aAAa,CAA4BM,YAA5B,CAArC;AAEA,eAAeW,eAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","needsOffscreenAlphaCompositingOnItem","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n index: number;\n onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {\n children,\n index,\n onLayout,\n } = props;\n\n const {\n createItemStyle,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n needsOffscreenAlphaCompositingOnItem,\n } = useContext(InternalContext);\n\n const [visible, setVisible] = useState(false);\n\n const interpolation = useItemInterpolation(index);\n\n const itemStyle = useMemo(\n () => createItemStyle(interpolation, itemWidth),\n [createItemStyle, interpolation, itemWidth],\n );\n\n useEffect(() => {\n return itemVisibilityStore.subscribe(ranges => {\n const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n setVisible(nextVisible);\n });\n }, [index, itemVisibilityStore]);\n\n return (\n <Animated.View\n needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}\n children={visible ? children(interpolation) : null}\n onLayout={onLayout}\n style={[\n {\n width: itemWidth,\n height: itemHeight !== 'auto' ? itemHeight : undefined,\n },\n styles.absolute,\n // @ts-ignore\n itemStyle,\n ]}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n absolute: {\n position: 'absolute',\n },\n});\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,EAAgDC,QAAhD,QAAgE,OAAhE;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC,mBAJE;IAKFC;EALE,IAMFjB,UAAU,CAACO,eAAD,CANd;EAQA,MAAM,CAACW,OAAD,EAAUC,UAAV,IAAwBhB,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMiB,aAAa,GAAGd,oBAAoB,CAACK,KAAD,CAA1C;EAEA,MAAMU,SAAS,GAAGnB,OAAO,CACrB,MAAMW,eAAe,CAACO,aAAD,EAAgBL,SAAhB,CADA,EAErB,CAACF,eAAD,EAAkBO,aAAlB,EAAiCL,SAAjC,CAFqB,CAAzB;EAKAd,SAAS,CAAC,MAAM;IACZ,OAAOe,mBAAmB,CAACM,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBhB,KAAK,IAAIe,IAAT,IAAiBf,KAAK,IAAIgB,EAA1C;MAAA,CAAZ,CAApB;MACAR,UAAU,CAACK,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACb,KAAD,EAAQK,mBAAR,CALM,CAAT;EAOA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,8BAA8B,EAAEC,oCADpC;IAEI,QAAQ,EAAEC,OAAO,GAAGR,QAAQ,CAACU,aAAD,CAAX,GAA6B,IAFlD;IAGI,QAAQ,EAAER,QAHd;IAII,KAAK,EAAE,CACH;MACIgB,KAAK,EAAEb,SADX;MAEIc,MAAM,EAAEf,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCgB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAX,SAPG;EAJX,EADJ;AAgBH;AAAA;AAED,MAAMU,MAAM,GAAG1B,UAAU,CAAC4B,MAAX,CAAkB;EAC7BD,QAAQ,EAAE;IACNE,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
1
|
+
{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","needsOffscreenAlphaCompositingOnItem","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation<string>) => ReactElement | null;\n index: number;\n onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {\n children,\n index,\n onLayout,\n } = props;\n\n const {\n createItemStyle,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n needsOffscreenAlphaCompositingOnItem,\n } = useContext(InternalContext);\n\n const [visible, setVisible] = useState(false);\n\n const interpolation = useItemInterpolation(index);\n\n const itemStyle = useMemo(\n () => createItemStyle(interpolation, itemWidth),\n [createItemStyle, interpolation, itemWidth],\n );\n\n useEffect(() => {\n return itemVisibilityStore.subscribe(ranges => {\n const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n setVisible(nextVisible);\n });\n }, [index, itemVisibilityStore]);\n\n return (\n <Animated.View\n needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}\n children={visible ? children(interpolation) : null}\n onLayout={onLayout}\n style={[\n {\n width: itemWidth,\n height: itemHeight !== 'auto' ? itemHeight : undefined,\n },\n styles.absolute,\n // @ts-ignore\n itemStyle,\n ]}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n absolute: {\n position: 'absolute',\n },\n});\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,EAAgDC,QAAhD,QAAgE,OAAhE;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC,mBAJE;IAKFC;EALE,IAMFjB,UAAU,CAACO,eAAD,CANd;EAQA,MAAM,CAACW,OAAD,EAAUC,UAAV,IAAwBhB,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMiB,aAAa,GAAGd,oBAAoB,CAACK,KAAD,CAA1C;EAEA,MAAMU,SAAS,GAAGnB,OAAO,CACrB,MAAMW,eAAe,CAACO,aAAD,EAAgBL,SAAhB,CADA,EAErB,CAACF,eAAD,EAAkBO,aAAlB,EAAiCL,SAAjC,CAFqB,CAAzB;EAKAd,SAAS,CAAC,MAAM;IACZ,OAAOe,mBAAmB,CAACM,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBhB,KAAK,IAAIe,IAAT,IAAiBf,KAAK,IAAIgB,EAA1C;MAAA,CAAZ,CAApB;MACAR,UAAU,CAACK,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACb,KAAD,EAAQK,mBAAR,CALM,CAAT;EAOA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,8BAA8B,EAAEC,oCADpC;IAEI,QAAQ,EAAEC,OAAO,GAAGR,QAAQ,CAACU,aAAD,CAAX,GAA6B,IAFlD;IAGI,QAAQ,EAAER,QAHd;IAII,KAAK,EAAE,CACH;MACIgB,KAAK,EAAEb,SADX;MAEIc,MAAM,EAAEf,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCgB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAX,SAPG;EAJX,EADJ;AAgBH;AAAA;AAED,MAAMU,MAAM,GAAG1B,UAAU,CAAC4B,MAAX,CAAkB;EAC7BD,QAAQ,EAAE;IACNE,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","useMemo","Animated","InternalContext","OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","numberOfData","length","interpolationConfigOnLoop","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","localOffsetX","interpolate","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport InternalContext from './InternalContext';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const localOffsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(localOffsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,OAApC;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,MAAMC,0BAA0B,GAAG,CAAnC;AAEA,eAAe,SAASC,oBAAT,CAA8BC,KAA9B,
|
|
1
|
+
{"version":3,"names":["useContext","useMemo","Animated","InternalContext","OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","numberOfData","length","interpolationConfigOnLoop","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","localOffsetX","interpolate","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport InternalContext from './InternalContext';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation<string> {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const localOffsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(localOffsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useMemo","useRef","Animated","useAnimatedValue","directionToValue","itemWidth","direction","toValueCompensator","toValue","currentOffset","remainder","Math","abs","halfOfItemWidth","compensateVector","usePagingAnimator","config","createScrollAnimation","indexController","initialIndex","loop","numberOfData","getCurrentIndex","lastIndex","notifyScrollStateHasChanged","initialOffsetX","accumulativeOffsetX","animationOffsetX","gestureTranslationX","globalInterpolation","add","toValueRef","currentOffsetRef","isAnimatingRef","maxWidth","ensureOffsetBoundary","offset","isCloseToEnd","signOfOffset","requireNewOffset","newOffset","nextOffset","current","setValue","interruptAnimation","stopAnimation","lastValue","prevOffset","totalOffset","state","finalizeAnimation","startPagingAnimation","type","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","compensateToValue","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","wantedToValue","lastGestureTranslationX","Number","isFinite","animation","start","finished"],"sources":["usePagingAnimator.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue } from '@fountain-ui/core';\nimport type {\n CreateScrollAnimation,\n DirectionalPagingAnimationConfig,\n IndexController,\n IndexPagingAnimationConfig,\n PagingAnimationConfig,\n PagingAnimationType,\n PagingDirection,\n StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimatorConfig {\n createScrollAnimation: CreateScrollAnimation;\n itemWidth: number;\n indexController: IndexController;\n initialIndex: number;\n loop: boolean;\n numberOfData: number;\n}\n\nexport interface PagingAnimator {\n gestureTranslationX: Animated.Value;\n globalInterpolation: Animated.AnimatedInterpolation;\n interruptAnimation: () => void;\n startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nfunction toValueCompensator(itemWidth: number) {\n return function (toValue: number, currentOffset: number): number {\n const remainder = Math.abs(currentOffset % itemWidth);\n\n const halfOfItemWidth = Math.abs(itemWidth / 2);\n const compensateVector = remainder > halfOfItemWidth\n ? remainder - itemWidth\n : remainder;\n\n const direction = currentOffset > 0 ? -1 : 1;\n\n return toValue + (direction * compensateVector);\n };\n}\n\nexport default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {\n const {\n createScrollAnimation,\n itemWidth,\n indexController,\n initialIndex,\n loop,\n numberOfData,\n } = config;\n\n const {\n getCurrentIndex,\n lastIndex,\n notifyScrollStateHasChanged,\n } = indexController;\n\n const initialOffsetX = itemWidth * initialIndex;\n const accumulativeOffsetX = useAnimatedValue(initialOffsetX);\n const animationOffsetX = useAnimatedValue(0);\n const gestureTranslationX = useAnimatedValue(0);\n\n const globalInterpolation = useMemo(() => {\n return Animated.add(\n Animated.add(accumulativeOffsetX, animationOffsetX),\n gestureTranslationX,\n );\n }, []);\n\n const toValueRef = useRef<number>(0);\n const currentOffsetRef = useRef<number>(0);\n\n const isAnimatingRef = useRef<boolean>(false);\n\n const maxWidth = Math.abs(numberOfData * itemWidth);\n\n const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {\n if (loop) {\n const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);\n if (isCloseToEnd) {\n const signOfOffset = offset > 0 ? 1 : -1;\n return offset + (-signOfOffset * maxWidth);\n }\n }\n\n return offset % maxWidth;\n }, [itemWidth, loop, maxWidth]);\n\n const requireNewOffset = useCallback((newOffset: number) => {\n const nextOffset = ensureOffsetBoundary(newOffset);\n\n currentOffsetRef.current = nextOffset;\n accumulativeOffsetX.setValue(nextOffset);\n\n toValueRef.current = 0;\n animationOffsetX.setValue(0);\n }, [\n ensureOffsetBoundary,\n ]);\n\n const interruptAnimation = useCallback(() => {\n if (!isAnimatingRef.current) {\n return;\n }\n\n animationOffsetX.stopAnimation(lastValue => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const totalOffset = prevOffset + lastValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });\n });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const finalizeAnimation = useCallback(() => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const toValue = toValueRef.current;\n const totalOffset = prevOffset + toValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n if (isAnimatingRef.current) {\n return;\n }\n\n const configWithDefaults: PagingAnimationConfig = {\n animated: true,\n ...config,\n };\n\n const currentIndex = getCurrentIndex();\n\n const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n const compensateToValue = toValueCompensator(itemWidth);\n\n const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n const { direction, isOriginatedFromGesture } = _config;\n\n if (currentIndex === 0 && direction === 'prev') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : lastIndex * itemWidth; // first position\n }\n return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n };\n\n const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n const _configWithDefaults: DirectionalPagingAnimationConfig = {\n isOriginatedFromGesture: false,\n ..._config,\n };\n\n return loop\n ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n };\n\n const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n if (index < 0 || index > lastIndex || index === currentIndex) {\n // no animation if index is invalid or equals to current index\n return 0;\n }\n\n const distance = Math.abs(currentIndex - index) * itemWidth;\n const direction = index > currentIndex ? -1 : 1;\n\n return distance * direction;\n };\n\n const wantedToValue = type === 'directional'\n // @ts-ignore\n ? getValueByDirectionalPaging(configWithDefaults)\n // @ts-ignore\n : getValueByIndexPaging(configWithDefaults);\n\n const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);\n\n toValueRef.current = toValue;\n isAnimatingRef.current = true;\n\n notifyScrollStateHasChanged({\n offset: currentOffsetRef.current + toValue,\n state: 'dragging',\n });\n\n const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;\n if (Number.isFinite(lastGestureTranslationX)) {\n animationOffsetX.setValue(lastGestureTranslationX);\n gestureTranslationX.setValue(0);\n }\n\n if (configWithDefaults.animated) {\n const animation = createScrollAnimation(animationOffsetX, toValue);\n\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n } else {\n finalizeAnimation();\n }\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n notifyScrollStateHasChanged,\n ]);\n\n return {\n gestureTranslationX,\n globalInterpolation,\n interruptAnimation,\n startPagingAnimation,\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["useCallback","useMemo","useRef","Animated","useAnimatedValue","directionToValue","itemWidth","direction","toValueCompensator","toValue","currentOffset","remainder","Math","abs","halfOfItemWidth","compensateVector","usePagingAnimator","config","createScrollAnimation","indexController","initialIndex","loop","numberOfData","getCurrentIndex","lastIndex","notifyScrollStateHasChanged","initialOffsetX","accumulativeOffsetX","animationOffsetX","gestureTranslationX","globalInterpolation","add","toValueRef","currentOffsetRef","isAnimatingRef","maxWidth","ensureOffsetBoundary","offset","isCloseToEnd","signOfOffset","requireNewOffset","newOffset","nextOffset","current","setValue","interruptAnimation","stopAnimation","lastValue","prevOffset","totalOffset","state","finalizeAnimation","startPagingAnimation","type","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","compensateToValue","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","wantedToValue","lastGestureTranslationX","Number","isFinite","animation","start","finished"],"sources":["usePagingAnimator.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue } from '@fountain-ui/core';\nimport type {\n CreateScrollAnimation,\n DirectionalPagingAnimationConfig,\n IndexController,\n IndexPagingAnimationConfig,\n PagingAnimationConfig,\n PagingAnimationType,\n PagingDirection,\n StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimatorConfig {\n createScrollAnimation: CreateScrollAnimation;\n itemWidth: number;\n indexController: IndexController;\n initialIndex: number;\n loop: boolean;\n numberOfData: number;\n}\n\nexport interface PagingAnimator {\n gestureTranslationX: Animated.Value;\n globalInterpolation: Animated.AnimatedInterpolation<string>;\n interruptAnimation: () => void;\n startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nfunction toValueCompensator(itemWidth: number) {\n return function (toValue: number, currentOffset: number): number {\n const remainder = Math.abs(currentOffset % itemWidth);\n\n const halfOfItemWidth = Math.abs(itemWidth / 2);\n const compensateVector = remainder > halfOfItemWidth\n ? remainder - itemWidth\n : remainder;\n\n const direction = currentOffset > 0 ? -1 : 1;\n\n return toValue + (direction * compensateVector);\n };\n}\n\nexport default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {\n const {\n createScrollAnimation,\n itemWidth,\n indexController,\n initialIndex,\n loop,\n numberOfData,\n } = config;\n\n const {\n getCurrentIndex,\n lastIndex,\n notifyScrollStateHasChanged,\n } = indexController;\n\n const initialOffsetX = itemWidth * initialIndex;\n const accumulativeOffsetX = useAnimatedValue(initialOffsetX);\n const animationOffsetX = useAnimatedValue(0);\n const gestureTranslationX = useAnimatedValue(0);\n\n const globalInterpolation = useMemo(() => {\n return Animated.add(\n Animated.add(accumulativeOffsetX, animationOffsetX),\n gestureTranslationX,\n );\n }, []);\n\n const toValueRef = useRef<number>(0);\n const currentOffsetRef = useRef<number>(0);\n\n const isAnimatingRef = useRef<boolean>(false);\n\n const maxWidth = Math.abs(numberOfData * itemWidth);\n\n const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {\n if (loop) {\n const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);\n if (isCloseToEnd) {\n const signOfOffset = offset > 0 ? 1 : -1;\n return offset + (-signOfOffset * maxWidth);\n }\n }\n\n return offset % maxWidth;\n }, [itemWidth, loop, maxWidth]);\n\n const requireNewOffset = useCallback((newOffset: number) => {\n const nextOffset = ensureOffsetBoundary(newOffset);\n\n currentOffsetRef.current = nextOffset;\n accumulativeOffsetX.setValue(nextOffset);\n\n toValueRef.current = 0;\n animationOffsetX.setValue(0);\n }, [\n ensureOffsetBoundary,\n ]);\n\n const interruptAnimation = useCallback(() => {\n if (!isAnimatingRef.current) {\n return;\n }\n\n animationOffsetX.stopAnimation(lastValue => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const totalOffset = prevOffset + lastValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });\n });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const finalizeAnimation = useCallback(() => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const toValue = toValueRef.current;\n const totalOffset = prevOffset + toValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n if (isAnimatingRef.current) {\n return;\n }\n\n const configWithDefaults: PagingAnimationConfig = {\n animated: true,\n ...config,\n };\n\n const currentIndex = getCurrentIndex();\n\n const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n const compensateToValue = toValueCompensator(itemWidth);\n\n const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n const { direction, isOriginatedFromGesture } = _config;\n\n if (currentIndex === 0 && direction === 'prev') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : lastIndex * itemWidth; // first position\n }\n return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n };\n\n const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n const _configWithDefaults: DirectionalPagingAnimationConfig = {\n isOriginatedFromGesture: false,\n ..._config,\n };\n\n return loop\n ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n };\n\n const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n if (index < 0 || index > lastIndex || index === currentIndex) {\n // no animation if index is invalid or equals to current index\n return 0;\n }\n\n const distance = Math.abs(currentIndex - index) * itemWidth;\n const direction = index > currentIndex ? -1 : 1;\n\n return distance * direction;\n };\n\n const wantedToValue = type === 'directional'\n // @ts-ignore\n ? getValueByDirectionalPaging(configWithDefaults)\n // @ts-ignore\n : getValueByIndexPaging(configWithDefaults);\n\n const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);\n\n toValueRef.current = toValue;\n isAnimatingRef.current = true;\n\n notifyScrollStateHasChanged({\n offset: currentOffsetRef.current + toValue,\n state: 'dragging',\n });\n\n const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;\n if (Number.isFinite(lastGestureTranslationX)) {\n animationOffsetX.setValue(lastGestureTranslationX);\n gestureTranslationX.setValue(0);\n }\n\n if (configWithDefaults.animated) {\n const animation = createScrollAnimation(animationOffsetX, toValue);\n\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n } else {\n finalizeAnimation();\n }\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n notifyScrollStateHasChanged,\n ]);\n\n return {\n gestureTranslationX,\n globalInterpolation,\n interruptAnimation,\n startPagingAnimation,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["directions","scrollStates"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nconst scrollStates = ['idle', 'dragging', 'interrupted'] as const;\n\nexport type ScrollState = (typeof scrollStates)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation
|
|
1
|
+
{"version":3,"names":["directions","scrollStates"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nconst scrollStates = ['idle', 'dragging', 'interrupted'] as const;\n\nexport type ScrollState = (typeof scrollStates)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation<string> }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation<string>, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n (): number;\n}\n\nexport interface OnIndexChange {\n (itemIndex: number): void;\n}\n\nexport interface OnPositionChange {\n (position: number): void;\n}\n\nexport interface ScrollStateChangeEvent {\n offset: number;\n state: ScrollState;\n}\n\nexport interface IndexController {\n getCurrentIndex: GetCurrentIndex;\n lastIndex: number;\n notifyScrollStateHasChanged: (event: ScrollStateChangeEvent) => void;\n}\n\nexport type PagingAnimationType = 'directional' | 'index';\n\nexport interface BasePagingAnimationConfig {\n animated?: boolean;\n lastGestureTranslationX?: number;\n}\n\nexport interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {\n direction: PagingDirection;\n isOriginatedFromGesture?: boolean;\n}\n\nexport interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {\n index: number;\n}\n\nexport type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;\n\nexport interface StartPagingAnimation {\n (type: PagingAnimationType, config: PagingAnimationConfig): void;\n}\n\nexport type VisibleIndexRanges = Array<[number, number]>;\n\nexport interface StoreSubscription {\n (): void;\n}\n\nexport interface ItemVisibilityStore {\n dispatch: (ranges: VisibleIndexRanges) => void;\n subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;\n removeAllListeners: () => void;\n}\n\nexport interface AutoplayController {\n pause: () => void;\n resume: () => void;\n}\n\nexport interface ScrollToOption {\n index: number;\n animated?: boolean;\n}\n\nexport interface CarouselInstance {\n /**\n * Get current visible item index.\n */\n getCurrentIndex: GetCurrentIndex;\n\n /**\n * Scroll to next visible item.\n */\n next: () => void;\n\n /**\n * Scroll to previous visible item.\n */\n prev: () => void;\n\n /**\n * Scroll to desired indexed item.\n * Invalid index is ignored.\n */\n scrollTo: (option: ScrollToOption) => void;\n}\n"],"mappings":"AAGA,MAAMA,UAAU,GAAG,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,CAAnB;AAIA,MAAMC,YAAY,GAAG,CAAC,MAAD,EAAS,UAAT,EAAqB,aAArB,CAArB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Image","TouchableWithoutFeedback","View","css","FuiImage","ReloadButton","EncodedTile","ViewerItem","props","height","url","width","imageKey","invisiblePaddingTop","onError","onLoad","onPress","onReloadPress","reloadButtonVisible","styles","view","paddingTop","image","error","placeholder","uri","alignSelf"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, TouchableWithoutFeedback, View } from 'react-native';\nimport { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';\nimport ReloadButton from './ReloadButton';\nimport EncodedTile from './EncodedTile';\n\nexport interface ViewerItemProps {\n /**\n * Image width.\n */\n width: number;\n\n /**\n * Image height.\n */\n height: number;\n\n /**\n * Need invisible paddingTop viewer vertically expanded.\n */\n invisiblePaddingTop: number;\n\n /**\n * Image sourceUrl for displaying.\n */\n url?: string;\n\n /**\n * Error handler.\n */\n onError?: ImageProps['onError'];\n\n /**\n * Load handler.\n */\n onLoad?: ImageProps['onLoad'];\n\n /**\n * Handle Reload button press event.\n */\n onReloadPress?: ImageProps['onError'];\n\n /**\n * Handle item press event.\n */\n onPress?: () => void;\n\n /**\n * If true, reload button visible.\n * @default false\n */\n reloadButtonVisible?: boolean;\n\n /**\n * FuiImage key for trigger image rerender.\n */\n imageKey: string;\n}\n\nexport default function ViewerItem(props: ViewerItemProps) {\n const {\n height,\n url,\n width,\n imageKey,\n invisiblePaddingTop,\n onError,\n onLoad,\n onPress,\n onReloadPress,\n reloadButtonVisible = false,\n } = props;\n\n const styles = {\n view: {\n height,\n width: '100%',\n paddingTop: invisiblePaddingTop,\n },\n image: {\n height: height - invisiblePaddingTop,\n width,\n },\n };\n\n const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;\n\n const placeholder = <Image\n source={{ uri: EncodedTile }}\n resizeMode={'cover'}\n style={styles.image}\n />;\n\n return (\n <TouchableWithoutFeedback onPress={onPress}>\n <View style={styles.view}>\n <FuiImage\n key={imageKey}\n cache={'web'}\n disableDrag={true}\n disableLongClick={true}\n disableOutline={true}\n error={error}\n onError={onError}\n onLoad={onLoad}\n loading={'eager'}\n placeholder={placeholder}\n source={{ uri: url }}\n square={true}\n style={css([\n { alignSelf: 'center' },\n styles.image,\n ])}\n />\n </View>\n </TouchableWithoutFeedback>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,
|
|
1
|
+
{"version":3,"names":["React","Image","TouchableWithoutFeedback","View","css","FuiImage","ReloadButton","EncodedTile","ViewerItem","props","height","url","width","imageKey","invisiblePaddingTop","onError","onLoad","onPress","onReloadPress","reloadButtonVisible","styles","view","paddingTop","image","error","placeholder","uri","alignSelf"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Image, TouchableWithoutFeedback, View } from 'react-native';\nimport { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';\nimport ReloadButton from './ReloadButton';\nimport EncodedTile from './EncodedTile';\n\nexport interface ViewerItemProps {\n /**\n * Image width.\n */\n width: number;\n\n /**\n * Image height.\n */\n height: number;\n\n /**\n * Need invisible paddingTop viewer vertically expanded.\n */\n invisiblePaddingTop: number;\n\n /**\n * Image sourceUrl for displaying.\n */\n url?: string;\n\n /**\n * Error handler.\n */\n onError?: ImageProps['onError'];\n\n /**\n * Load handler.\n */\n onLoad?: ImageProps['onLoad'];\n\n /**\n * Handle Reload button press event.\n */\n onReloadPress?: ImageProps['onError'];\n\n /**\n * Handle item press event.\n */\n onPress?: () => void;\n\n /**\n * If true, reload button visible.\n * @default false\n */\n reloadButtonVisible?: boolean;\n\n /**\n * FuiImage key for trigger image rerender.\n */\n imageKey: string;\n}\n\nexport default function ViewerItem(props: ViewerItemProps) {\n const {\n height,\n url,\n width,\n imageKey,\n invisiblePaddingTop,\n onError,\n onLoad,\n onPress,\n onReloadPress,\n reloadButtonVisible = false,\n } = props;\n\n const styles = {\n view: {\n height,\n width: '100%' as DimensionValue,\n paddingTop: invisiblePaddingTop,\n },\n image: {\n height: height - invisiblePaddingTop,\n width,\n },\n };\n\n const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;\n\n const placeholder = <Image\n source={{ uri: EncodedTile }}\n resizeMode={'cover'}\n style={styles.image}\n />;\n\n return (\n <TouchableWithoutFeedback onPress={onPress}>\n <View style={styles.view}>\n <FuiImage\n key={imageKey}\n cache={'web'}\n disableDrag={true}\n disableLongClick={true}\n disableOutline={true}\n error={error}\n onError={onError}\n onLoad={onLoad}\n loading={'eager'}\n placeholder={placeholder}\n source={{ uri: url }}\n square={true}\n style={css([\n { alignSelf: 'center' },\n styles.image,\n ])}\n />\n </View>\n </TouchableWithoutFeedback>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAyBC,KAAzB,EAAgCC,wBAAhC,EAA0DC,IAA1D,QAAsE,cAAtE;AACA,SAASC,GAAT,EAAcH,KAAK,IAAII,QAAvB,QAAmD,mBAAnD;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAuDA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,MADE;IAEFC,GAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC,mBALE;IAMFC,OANE;IAOFC,MAPE;IAQFC,OARE;IASFC,aATE;IAUFC,mBAAmB,GAAG;EAVpB,IAWFV,KAXJ;EAaA,MAAMW,MAAM,GAAG;IACXC,IAAI,EAAE;MACFX,MADE;MAEFE,KAAK,EAAE,MAFL;MAGFU,UAAU,EAAER;IAHV,CADK;IAMXS,KAAK,EAAE;MACHb,MAAM,EAAEA,MAAM,GAAGI,mBADd;MAEHF;IAFG;EANI,CAAf;EAYA,MAAMY,KAAK,GAAGL,mBAAmB,gBAAG,oBAAC,YAAD;IAAc,OAAO,EAAED;EAAvB,EAAH,GAA6C,IAA9E;EAEA,MAAMO,WAAW,gBAAG,oBAAC,KAAD;IAChB,MAAM,EAAE;MAAEC,GAAG,EAAEnB;IAAP,CADQ;IAEhB,UAAU,EAAE,OAFI;IAGhB,KAAK,EAAEa,MAAM,CAACG;EAHE,EAApB;EAMA,oBACI,oBAAC,wBAAD;IAA0B,OAAO,EAAEN;EAAnC,gBACI,oBAAC,IAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,gBACI,oBAAC,QAAD;IACI,GAAG,EAAER,QADT;IAEI,KAAK,EAAE,KAFX;IAGI,WAAW,EAAE,IAHjB;IAII,gBAAgB,EAAE,IAJtB;IAKI,cAAc,EAAE,IALpB;IAMI,KAAK,EAAEW,KANX;IAOI,OAAO,EAAET,OAPb;IAQI,MAAM,EAAEC,MARZ;IASI,OAAO,EAAE,OATb;IAUI,WAAW,EAAES,WAVjB;IAWI,MAAM,EAAE;MAAEC,GAAG,EAAEf;IAAP,CAXZ;IAYI,MAAM,EAAE,IAZZ;IAaI,KAAK,EAAEP,GAAG,CAAC,CACP;MAAEuB,SAAS,EAAE;IAAb,CADO,EAEPP,MAAM,CAACG,KAFA,CAAD;EAbd,EADJ,CADJ,CADJ;AAwBH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","FlatList","getYear","setYear","Button","Column","Typography","useTheme","formatDate","initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n date: Date;\n locale?: string,\n maxDate?: Date;\n minDate?: Date;\n onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n const theme = useTheme();\n\n return {\n list: {\n marginTop: theme.spacing(1),\n maxHeight: 270,\n },\n };\n};\n\nconst YearPicker = ({\n date,\n locale,\n maxDate,\n minDate,\n onYearPress,\n}: YearPickerProps) => {\n const styles = useStyles();\n\n const ref = React.useRef<FlatList | null>(null);\n\n const minYear = minDate ? getYear(minDate) : initYear;\n const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n React.useEffect(() => {\n ref.current?.scrollToItem({\n animated: false,\n item: getYear(date),\n });\n }, [date]);\n\n const getItemLayout = (data:
|
|
1
|
+
{"version":3,"names":["React","FlatList","getYear","setYear","Button","Column","Typography","useTheme","formatDate","initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n date: Date;\n locale?: string,\n maxDate?: Date;\n minDate?: Date;\n onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n const theme = useTheme();\n\n return {\n list: {\n marginTop: theme.spacing(1),\n maxHeight: 270,\n },\n };\n};\n\nconst YearPicker = ({\n date,\n locale,\n maxDate,\n minDate,\n onYearPress,\n}: YearPickerProps) => {\n const styles = useStyles();\n\n const ref = React.useRef<FlatList | null>(null);\n\n const minYear = minDate ? getYear(minDate) : initYear;\n const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n React.useEffect(() => {\n ref.current?.scrollToItem({\n animated: false,\n item: getYear(date),\n });\n }, [date]);\n\n const getItemLayout = (data: ArrayLike<number> | null | undefined, index: number) => ({\n length: itemHeight,\n offset: itemHeight * index,\n index,\n });\n\n return (\n <Column>\n <Typography\n children={formatDate(date, locale)}\n color={'strong'}\n variant={'body3'}\n />\n <FlatList\n data={years}\n keyExtractor={item => item.toString()}\n renderItem={({ item }) => (\n <Button\n children={item.toString()}\n variant={'text'}\n onPress={() => {\n const newDate = setYear(date, item);\n onYearPress(newDate);\n }}\n />\n )}\n getItemLayout={getItemLayout}\n style={styles.list}\n ref={ref}\n />\n </Column>\n );\n};\n\nexport default YearPicker;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,OAAT,EAAkBC,OAAlB,QAAiC,UAAjC;AAEA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,UAAzB,EAAqCC,QAArC,QAAqD,mBAArD;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,MAAMC,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAO;IACHM,IAAI,EAAE;MACFC,SAAS,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGZ,SAAS,EAAxB;EAEA,MAAMa,GAAG,GAAGxB,KAAK,CAACyB,MAAN,CAA8B,IAA9B,CAAZ;EAEA,MAAMC,OAAO,GAAGL,OAAO,GAAGnB,OAAO,CAACmB,OAAD,CAAV,GAAsBZ,QAA7C;EACA,MAAMkB,OAAO,GAAGP,OAAO,GAAGlB,OAAO,CAACkB,OAAD,CAAV,GAAsBlB,OAAO,CAAC,IAAI0B,IAAJ,EAAD,CAApD;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGD,OAAV,GAAoB,CAArB,CAAL,CAA6BK,IAA7B,CAAkCL,OAAlC,EAA2CM,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;EAEAlC,KAAK,CAACmC,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAX,GAAG,CAACY,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAErC,OAAO,CAACgB,IAAD;IAFS,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMsB,aAAa,GAAG,CAACC,IAAD,EAA6CC,KAA7C,MAAgE;IAClFC,MAAM,EAAEjC,UAD0E;IAElFkC,MAAM,EAAElC,UAAU,GAAGgC,KAF6D;IAGlFA;EAHkF,CAAhE,CAAtB;;EAMA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,QAAQ,EAAElC,UAAU,CAACU,IAAD,EAAOC,MAAP,CADxB;IAEI,KAAK,EAAE,QAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,oBAAC,QAAD;IACI,IAAI,EAAEU,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACM,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEN;MAAF,CAAD;MAAA,oBACR,oBAAC,MAAD;QACI,QAAQ,EAAEA,IAAI,CAACM,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG3C,OAAO,CAACe,IAAD,EAAOqB,IAAP,CAAvB;UACAjB,WAAW,CAACwB,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEN,aAbnB;IAcI,KAAK,EAAEjB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;AAwDA,eAAeP,UAAf"}
|
|
@@ -4,7 +4,7 @@ import type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types'
|
|
|
4
4
|
export interface InternalContextValue<ItemT> {
|
|
5
5
|
createItemStyle: CreateItemStyle;
|
|
6
6
|
data: ReadonlyArray<ItemT>;
|
|
7
|
-
globalInterpolation: Animated.AnimatedInterpolation
|
|
7
|
+
globalInterpolation: Animated.AnimatedInterpolation<string>;
|
|
8
8
|
itemHeight: ItemHeight;
|
|
9
9
|
itemWidth: number;
|
|
10
10
|
itemVisibilityStore: ItemVisibilityStore;
|
|
@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
|
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
3
|
import { Animated } from 'react-native';
|
|
4
4
|
export interface ItemViewProps {
|
|
5
|
-
children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;
|
|
5
|
+
children: (interpolation: Animated.AnimatedInterpolation<string>) => ReactElement | null;
|
|
6
6
|
index: number;
|
|
7
7
|
onLayout?: ViewProps['onLayout'];
|
|
8
8
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { Animated } from 'react-native';
|
|
2
|
-
export default function useItemInterpolation(index: number): Animated.AnimatedInterpolation
|
|
2
|
+
export default function useItemInterpolation(index: number): Animated.AnimatedInterpolation<string>;
|
|
@@ -10,7 +10,7 @@ export interface PagingAnimatorConfig {
|
|
|
10
10
|
}
|
|
11
11
|
export interface PagingAnimator {
|
|
12
12
|
gestureTranslationX: Animated.Value;
|
|
13
|
-
globalInterpolation: Animated.AnimatedInterpolation
|
|
13
|
+
globalInterpolation: Animated.AnimatedInterpolation<string>;
|
|
14
14
|
interruptAnimation: () => void;
|
|
15
15
|
startPagingAnimation: StartPagingAnimation;
|
|
16
16
|
}
|
|
@@ -9,14 +9,14 @@ export interface RenderItem<T> {
|
|
|
9
9
|
(info: {
|
|
10
10
|
item: T;
|
|
11
11
|
index: number;
|
|
12
|
-
interpolation: Animated.AnimatedInterpolation
|
|
12
|
+
interpolation: Animated.AnimatedInterpolation<string>;
|
|
13
13
|
}): ReactElement | null;
|
|
14
14
|
}
|
|
15
15
|
export interface CreateScrollAnimation {
|
|
16
16
|
(aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;
|
|
17
17
|
}
|
|
18
18
|
export interface CreateItemStyle {
|
|
19
|
-
(itemInterpolation: Animated.AnimatedInterpolation
|
|
19
|
+
(itemInterpolation: Animated.AnimatedInterpolation<string>, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;
|
|
20
20
|
}
|
|
21
21
|
export interface GetCurrentIndex {
|
|
22
22
|
(): number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/lab",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.25",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Fountain-UI Team",
|
|
6
6
|
"description": "Incubator for Fountain-UI React components.",
|
|
@@ -17,20 +17,20 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@emotion/react": "^11.10.0",
|
|
19
19
|
"@emotion/styled": "^11.10.0",
|
|
20
|
-
"@fountain-ui/icons": "3.0.0-alpha.
|
|
20
|
+
"@fountain-ui/icons": "3.0.0-alpha.14",
|
|
21
21
|
"@fountain-ui/utils": "^3.0.0-alpha.1",
|
|
22
22
|
"react-native-calendars": "1.1267.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@fountain-ui/core": "^3.0.0-alpha.1",
|
|
26
|
-
"@gorhom/bottom-sheet": "^
|
|
26
|
+
"@gorhom/bottom-sheet": "^5.0.0",
|
|
27
27
|
"date-fns": "^2.0.0",
|
|
28
28
|
"react": "^16.8.0 || ^17.0.0",
|
|
29
29
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
30
30
|
"react-native": "^0.63.0",
|
|
31
31
|
"react-native-gesture-handler": "^2.16.0",
|
|
32
32
|
"react-native-pager-view": "^4.0.0",
|
|
33
|
-
"react-native-safe-area-context": "
|
|
33
|
+
"react-native-safe-area-context": "5.1.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependenciesMeta": {
|
|
36
36
|
"@gorhom/bottom-sheet": {
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@gorhom/bottom-sheet": "^
|
|
47
|
+
"@gorhom/bottom-sheet": "^5.0.0",
|
|
48
48
|
"date-fns": "^2.23.0",
|
|
49
49
|
"react-native-pager-view": "^4.2.4",
|
|
50
|
-
"react-native-safe-area-context": "
|
|
50
|
+
"react-native-safe-area-context": "5.1.0"
|
|
51
51
|
},
|
|
52
52
|
"react-native-builder-bob": {
|
|
53
53
|
"source": "./src",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "e0a58a15b36ab1bc34163c1791d151214a89aac5"
|
|
75
75
|
}
|
|
@@ -12,7 +12,6 @@ import { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@f
|
|
|
12
12
|
import { useTheme } from '@fountain-ui/styles';
|
|
13
13
|
import type BottomSheetProps from './BottomSheetProps';
|
|
14
14
|
import TransparentBackdrop from './TransparentBackdrop';
|
|
15
|
-
import useDynamicSnapPoints from './useDynamicSnapPoints.native';
|
|
16
15
|
|
|
17
16
|
const NoHandle = () => null;
|
|
18
17
|
|
|
@@ -134,13 +133,6 @@ export default function BottomSheet(props: BottomSheetProps) {
|
|
|
134
133
|
}).start();
|
|
135
134
|
};
|
|
136
135
|
|
|
137
|
-
const {
|
|
138
|
-
animatedHandleHeight,
|
|
139
|
-
animatedSnapPoints,
|
|
140
|
-
animatedContentHeight,
|
|
141
|
-
handleContentLayout,
|
|
142
|
-
} = useDynamicSnapPoints(snapPoints);
|
|
143
|
-
|
|
144
136
|
return (
|
|
145
137
|
<BottomSheetModalProvider>
|
|
146
138
|
<BottomSheetModal
|
|
@@ -158,9 +150,7 @@ export default function BottomSheet(props: BottomSheetProps) {
|
|
|
158
150
|
maxDynamicContentSize={maxDynamicContentSize}
|
|
159
151
|
detached={Boolean(topElement)}
|
|
160
152
|
onAnimate={topElement ? onAnimate : undefined}
|
|
161
|
-
snapPoints={
|
|
162
|
-
handleHeight={animatedHandleHeight}
|
|
163
|
-
contentHeight={animatedContentHeight}
|
|
153
|
+
snapPoints={snapPoints}
|
|
164
154
|
>
|
|
165
155
|
{topElement ? (
|
|
166
156
|
<Animated.View style={topElementAnimationStyle}>
|
|
@@ -173,10 +163,7 @@ export default function BottomSheet(props: BottomSheetProps) {
|
|
|
173
163
|
</Animated.View>
|
|
174
164
|
) : null}
|
|
175
165
|
|
|
176
|
-
<BottomSheetView
|
|
177
|
-
onLayout={handleContentLayout}
|
|
178
|
-
style={contentWrapperStyle}
|
|
179
|
-
>
|
|
166
|
+
<BottomSheetView style={contentWrapperStyle}>
|
|
180
167
|
{children}
|
|
181
168
|
</BottomSheetView>
|
|
182
169
|
</BottomSheetModal>
|
|
@@ -74,8 +74,6 @@ export default function BottomSheet(props: BottomSheetProps) {
|
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
|
|
77
|
-
const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');
|
|
78
|
-
|
|
79
77
|
const {
|
|
80
78
|
convertedSnapPoints,
|
|
81
79
|
handleLayout,
|
|
@@ -83,7 +81,7 @@ export default function BottomSheet(props: BottomSheetProps) {
|
|
|
83
81
|
} = useDynamicSnapPoints({
|
|
84
82
|
enableDynamicSizing,
|
|
85
83
|
maxDynamicContentSize,
|
|
86
|
-
snapPoints
|
|
84
|
+
snapPoints,
|
|
87
85
|
});
|
|
88
86
|
|
|
89
87
|
const translateY = convertedSnapPoints.length > 0
|
|
@@ -5,7 +5,7 @@ import type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types'
|
|
|
5
5
|
export interface InternalContextValue<ItemT> {
|
|
6
6
|
createItemStyle: CreateItemStyle;
|
|
7
7
|
data: ReadonlyArray<ItemT>;
|
|
8
|
-
globalInterpolation: Animated.AnimatedInterpolation
|
|
8
|
+
globalInterpolation: Animated.AnimatedInterpolation<string>;
|
|
9
9
|
itemHeight: ItemHeight;
|
|
10
10
|
itemWidth: number;
|
|
11
11
|
itemVisibilityStore: ItemVisibilityStore;
|
|
@@ -7,7 +7,7 @@ import useItemInterpolation from './useItemInterpolation';
|
|
|
7
7
|
import InternalContext from './InternalContext';
|
|
8
8
|
|
|
9
9
|
export interface ItemViewProps {
|
|
10
|
-
children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;
|
|
10
|
+
children: (interpolation: Animated.AnimatedInterpolation<string>) => ReactElement | null;
|
|
11
11
|
index: number;
|
|
12
12
|
onLayout?: ViewProps['onLayout'];
|
|
13
13
|
}
|
|
@@ -4,7 +4,7 @@ import InternalContext from './InternalContext';
|
|
|
4
4
|
|
|
5
5
|
const OVERSCROLL_FRICTION_FACTOR = 4;
|
|
6
6
|
|
|
7
|
-
export default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {
|
|
7
|
+
export default function useItemInterpolation(index: number): Animated.AnimatedInterpolation<string> {
|
|
8
8
|
const {
|
|
9
9
|
itemWidth,
|
|
10
10
|
data,
|
|
@@ -23,7 +23,7 @@ export interface PagingAnimatorConfig {
|
|
|
23
23
|
|
|
24
24
|
export interface PagingAnimator {
|
|
25
25
|
gestureTranslationX: Animated.Value;
|
|
26
|
-
globalInterpolation: Animated.AnimatedInterpolation
|
|
26
|
+
globalInterpolation: Animated.AnimatedInterpolation<string>;
|
|
27
27
|
interruptAnimation: () => void;
|
|
28
28
|
startPagingAnimation: StartPagingAnimation;
|
|
29
29
|
}
|
package/src/Carousel/types.ts
CHANGED
|
@@ -12,7 +12,7 @@ export type ScrollState = (typeof scrollStates)[number];
|
|
|
12
12
|
export type ItemHeight = number | 'auto';
|
|
13
13
|
|
|
14
14
|
export interface RenderItem<T> {
|
|
15
|
-
(info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;
|
|
15
|
+
(info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation<string> }): ReactElement | null;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export interface CreateScrollAnimation {
|
|
@@ -20,7 +20,7 @@ export interface CreateScrollAnimation {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export interface CreateItemStyle {
|
|
23
|
-
(itemInterpolation: Animated.AnimatedInterpolation
|
|
23
|
+
(itemInterpolation: Animated.AnimatedInterpolation<string>, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export interface GetCurrentIndex {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Image, TouchableWithoutFeedback, View } from 'react-native';
|
|
2
|
+
import { DimensionValue, Image, TouchableWithoutFeedback, View } from 'react-native';
|
|
3
3
|
import { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';
|
|
4
4
|
import ReloadButton from './ReloadButton';
|
|
5
5
|
import EncodedTile from './EncodedTile';
|
|
@@ -74,7 +74,7 @@ export default function ViewerItem(props: ViewerItemProps) {
|
|
|
74
74
|
const styles = {
|
|
75
75
|
view: {
|
|
76
76
|
height,
|
|
77
|
-
width: '100%',
|
|
77
|
+
width: '100%' as DimensionValue,
|
|
78
78
|
paddingTop: invisiblePaddingTop,
|
|
79
79
|
},
|
|
80
80
|
image: {
|
|
@@ -51,7 +51,7 @@ const YearPicker = ({
|
|
|
51
51
|
});
|
|
52
52
|
}, [date]);
|
|
53
53
|
|
|
54
|
-
const getItemLayout = (data:
|
|
54
|
+
const getItemLayout = (data: ArrayLike<number> | null | undefined, index: number) => ({
|
|
55
55
|
length: itemHeight,
|
|
56
56
|
offset: itemHeight * index,
|
|
57
57
|
index,
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = useDynamicSnapPoints;
|
|
7
|
-
|
|
8
|
-
var _bottomSheet = require("@gorhom/bottom-sheet");
|
|
9
|
-
|
|
10
|
-
function useDynamicSnapPoints(snapPoints) {
|
|
11
|
-
if (snapPoints !== null && snapPoints !== void 0 && snapPoints.includes('CONTENT_HEIGHT')) {
|
|
12
|
-
return (0, _bottomSheet.useBottomSheetDynamicSnapPoints)(snapPoints);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
return {
|
|
16
|
-
animatedHandleHeight: undefined,
|
|
17
|
-
animatedSnapPoints: snapPoints,
|
|
18
|
-
animatedContentHeight: undefined,
|
|
19
|
-
handleContentLayout: undefined
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
//# sourceMappingURL=useDynamicSnapPoints.native.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useDynamicSnapPoints","snapPoints","includes","useBottomSheetDynamicSnapPoints","animatedHandleHeight","undefined","animatedSnapPoints","animatedContentHeight","handleContentLayout"],"sources":["useDynamicSnapPoints.native.ts"],"sourcesContent":["import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\n\nexport default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']) {\n if (snapPoints?.includes('CONTENT_HEIGHT')) {\n return useBottomSheetDynamicSnapPoints(snapPoints);\n }\n\n return {\n animatedHandleHeight: undefined,\n animatedSnapPoints: snapPoints,\n animatedContentHeight: undefined,\n handleContentLayout: undefined,\n };\n}\n"],"mappings":";;;;;;;AAAA;;AAGe,SAASA,oBAAT,CAA8BC,UAA9B,EAA0E;EACrF,IAAIA,UAAJ,aAAIA,UAAJ,eAAIA,UAAU,CAAEC,QAAZ,CAAqB,gBAArB,CAAJ,EAA4C;IACxC,OAAO,IAAAC,4CAAA,EAAgCF,UAAhC,CAAP;EACH;;EAED,OAAO;IACHG,oBAAoB,EAAEC,SADnB;IAEHC,kBAAkB,EAAEL,UAFjB;IAGHM,qBAAqB,EAAEF,SAHpB;IAIHG,mBAAmB,EAAEH;EAJlB,CAAP;AAMH"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';
|
|
2
|
-
export default function useDynamicSnapPoints(snapPoints) {
|
|
3
|
-
if (snapPoints !== null && snapPoints !== void 0 && snapPoints.includes('CONTENT_HEIGHT')) {
|
|
4
|
-
return useBottomSheetDynamicSnapPoints(snapPoints);
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
return {
|
|
8
|
-
animatedHandleHeight: undefined,
|
|
9
|
-
animatedSnapPoints: snapPoints,
|
|
10
|
-
animatedContentHeight: undefined,
|
|
11
|
-
handleContentLayout: undefined
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=useDynamicSnapPoints.native.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useBottomSheetDynamicSnapPoints","useDynamicSnapPoints","snapPoints","includes","animatedHandleHeight","undefined","animatedSnapPoints","animatedContentHeight","handleContentLayout"],"sources":["useDynamicSnapPoints.native.ts"],"sourcesContent":["import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\n\nexport default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']) {\n if (snapPoints?.includes('CONTENT_HEIGHT')) {\n return useBottomSheetDynamicSnapPoints(snapPoints);\n }\n\n return {\n animatedHandleHeight: undefined,\n animatedSnapPoints: snapPoints,\n animatedContentHeight: undefined,\n handleContentLayout: undefined,\n };\n}\n"],"mappings":"AAAA,SAASA,+BAAT,QAAgD,sBAAhD;AAGA,eAAe,SAASC,oBAAT,CAA8BC,UAA9B,EAA0E;EACrF,IAAIA,UAAJ,aAAIA,UAAJ,eAAIA,UAAU,CAAEC,QAAZ,CAAqB,gBAArB,CAAJ,EAA4C;IACxC,OAAOH,+BAA+B,CAACE,UAAD,CAAtC;EACH;;EAED,OAAO;IACHE,oBAAoB,EAAEC,SADnB;IAEHC,kBAAkB,EAAEJ,UAFjB;IAGHK,qBAAqB,EAAEF,SAHpB;IAIHG,mBAAmB,EAAEH;EAJlB,CAAP;AAMH"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/// <reference types="react-native-reanimated" />
|
|
2
|
-
import type BottomSheetProps from './BottomSheetProps';
|
|
3
|
-
export default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']): {
|
|
4
|
-
animatedSnapPoints: Readonly<{
|
|
5
|
-
value: (string | number)[];
|
|
6
|
-
}>;
|
|
7
|
-
animatedHandleHeight: import("react-native-reanimated").SharedValue<number>;
|
|
8
|
-
animatedContentHeight: import("react-native-reanimated").SharedValue<number>;
|
|
9
|
-
handleContentLayout: ({ nativeEvent: { layout: { height }, }, }: {
|
|
10
|
-
nativeEvent: {
|
|
11
|
-
layout: {
|
|
12
|
-
height: number;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
}) => void;
|
|
16
|
-
} | {
|
|
17
|
-
animatedHandleHeight: undefined;
|
|
18
|
-
animatedSnapPoints: (string | number)[] | undefined;
|
|
19
|
-
animatedContentHeight: undefined;
|
|
20
|
-
handleContentLayout: undefined;
|
|
21
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';
|
|
2
|
-
import type BottomSheetProps from './BottomSheetProps';
|
|
3
|
-
|
|
4
|
-
export default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']) {
|
|
5
|
-
if (snapPoints?.includes('CONTENT_HEIGHT')) {
|
|
6
|
-
return useBottomSheetDynamicSnapPoints(snapPoints);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
return {
|
|
10
|
-
animatedHandleHeight: undefined,
|
|
11
|
-
animatedSnapPoints: snapPoints,
|
|
12
|
-
animatedContentHeight: undefined,
|
|
13
|
-
handleContentLayout: undefined,
|
|
14
|
-
};
|
|
15
|
-
}
|