@fountain-ui/lab 3.0.0-alpha.2 → 3.0.0-alpha.20
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 +39 -12
- package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetWeb.js +15 -9
- package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/commonjs/BottomSheet/useDynamicSnapPoints.js +1 -7
- package/build/commonjs/BottomSheet/useDynamicSnapPoints.js.map +1 -1
- package/build/commonjs/BottomSheet/useDynamicSnapPoints.native.js +22 -0
- package/build/commonjs/BottomSheet/useDynamicSnapPoints.native.js.map +1 -0
- package/build/commonjs/Carousel/Carousel.js +4 -2
- package/build/commonjs/Carousel/Carousel.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/components/InternalContext.js +2 -1
- package/build/commonjs/Carousel/components/InternalContext.js.map +1 -1
- package/build/commonjs/Carousel/components/ItemView.js +3 -1
- package/build/commonjs/Carousel/components/ItemView.js.map +1 -1
- package/build/commonjs/ComicViewer/FastScroll.js +8 -10
- package/build/commonjs/ComicViewer/FastScroll.js.map +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProvider.js +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js +37 -13
- package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetWeb.js +14 -9
- package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/module/BottomSheet/useDynamicSnapPoints.js +2 -8
- package/build/module/BottomSheet/useDynamicSnapPoints.js.map +1 -1
- package/build/module/BottomSheet/useDynamicSnapPoints.native.js +14 -0
- package/build/module/BottomSheet/useDynamicSnapPoints.native.js.map +1 -0
- package/build/module/Carousel/Carousel.js +4 -2
- package/build/module/Carousel/Carousel.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/components/InternalContext.js +2 -1
- package/build/module/Carousel/components/InternalContext.js.map +1 -1
- package/build/module/Carousel/components/ItemView.js +3 -1
- package/build/module/Carousel/components/ItemView.js.map +1 -1
- package/build/module/ComicViewer/FastScroll.js +5 -8
- package/build/module/ComicViewer/FastScroll.js.map +1 -1
- package/build/module/StatusBarProvider/StatusBarProvider.js +1 -1
- package/build/module/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/typescript/BottomSheet/BottomSheetProps.d.ts +9 -1
- package/build/typescript/BottomSheet/useDynamicSnapPoints.native.d.ts +21 -0
- package/build/typescript/Carousel/Carousel.d.ts +1 -1
- package/build/typescript/Carousel/CarouselProps.d.ts +7 -0
- package/build/typescript/Carousel/components/InternalContext.d.ts +1 -0
- package/package.json +5 -4
- package/src/BottomSheet/BottomSheetNative.tsx +51 -18
- package/src/BottomSheet/BottomSheetProps.ts +11 -1
- package/src/BottomSheet/BottomSheetWeb.tsx +15 -7
- package/src/BottomSheet/useDynamicSnapPoints.native.ts +15 -0
- package/src/BottomSheet/useDynamicSnapPoints.ts +2 -9
- package/src/Carousel/Carousel.tsx +3 -0
- package/src/Carousel/CarouselProps.ts +8 -0
- package/src/Carousel/components/InternalContext.ts +2 -0
- package/src/Carousel/components/ItemView.tsx +2 -0
- package/src/ComicViewer/FastScroll.tsx +6 -12
- package/src/StatusBarProvider/StatusBarProvider.tsx +2 -2
- package/src/hooks/useUnstableCollapsibleAppBar.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["INDICATOR_WIDTH","styles","StyleSheet","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","offsetToPercentage","initialLastIndicatorOffset","percentageToOffset","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","right","R","defaultTo","onContentScroll","useCallback","event","current","nativeEvent","y","offset","getIsIndicatorDragging","useImperativeHandle","handleUpdate","setIsIndicatorDragging","pan","Gesture","Pan","onBegin","e","runOnJS","onUpdate","translationY","onFinalize","hide","withDelay","withTiming","duration","show","useEffect"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n indicator: {\n width: INDICATOR_WIDTH,\n height: 48,\n backgroundColor: '#767676',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: 16,\n },\n view: {\n position: 'absolute',\n width: 0,\n },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n const {\n absolutePosition,\n additionalLength = 0,\n contentLength,\n initialScrollPercentage = 0,\n movementRange,\n scrollContentToOffset,\n visibleDurations = { hideMillis: 200, showMillis: 350 },\n } = props;\n\n const totalContentLength = contentLength + additionalLength;\n\n const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n const isIndicatorDragging = useRef(false);\n\n const indicatorOpacity = useSharedValue(0);\n const [visible, setVisible] = useState(false);\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: indicatorOffset.value }],\n opacity: indicatorOpacity.value,\n }));\n\n const position = {\n ...absolutePosition,\n right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n };\n\n const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n if (!isIndicatorDragging.current) {\n const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n const offset = percentageToOffset(contentPercentage, movementRange);\n\n if (offset < 0 || indicatorOffset.value < 0) {\n lastIndicatorOffset.value = 0;\n indicatorOffset.value = 0;\n return;\n }\n\n if (offset > movementRange || indicatorOffset.value > movementRange) {\n lastIndicatorOffset.value = movementRange;\n indicatorOffset.value = movementRange;\n return;\n }\n\n lastIndicatorOffset.value = offset;\n indicatorOffset.value = offset;\n } else {\n setVisible(true);\n }\n }, [totalContentLength, movementRange]);\n\n const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n useImperativeHandle(\n ref,\n () => ({\n getIsIndicatorDragging,\n onContentScroll,\n setVisible,\n }),\n [onContentScroll],\n );\n\n const handleUpdate = () => {\n const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n scrollContentToOffset(offset);\n };\n\n const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n const pan = Gesture.Pan()\n .onBegin((e) => {\n indicatorOffset.value = lastIndicatorOffset.value;\n runOnJS(setIsIndicatorDragging)(true);\n })\n .onUpdate((e) => {\n if (indicatorOffset.value <= 0 && e.translationY < 0) {\n indicatorOffset.value = 0;\n return;\n }\n\n if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n indicatorOffset.value = movementRange;\n return;\n }\n\n indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n runOnJS(handleUpdate)();\n })\n .onFinalize((e) => {\n lastIndicatorOffset.value = indicatorOffset.value;\n runOnJS(setIsIndicatorDragging)(false);\n });\n\n const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n useEffect(() => {\n if (visible) {\n indicatorOffset.value = lastIndicatorOffset.value;\n show();\n } else {\n hide();\n }\n }, [visible]);\n\n return (\n <View\n style={[\n { height: movementRange },\n styles.view,\n position,\n ]}\n >\n <GestureDetector gesture={pan}>\n <Animated.View style={[\n animatedStyle,\n styles.indicator,\n ]}>\n <ChevronUp\n fill={'#ededed'}\n height={20}\n width={20}\n />\n <ChevronDown\n fill={'#ededed'}\n height={20}\n width={20}\n />\n </Animated.View>\n </GestureDetector>\n </View>\n );\n});\n\nexport default FastScroll;"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["INDICATOR_WIDTH","styles","StyleSheet","create","indicator","width","height","backgroundColor","baseColors","gray","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","offsetToPercentage","initialLastIndicatorOffset","percentageToOffset","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","right","R","defaultTo","onContentScroll","useCallback","event","current","nativeEvent","y","offset","getIsIndicatorDragging","useImperativeHandle","handleUpdate","setIsIndicatorDragging","pan","Gesture","Pan","onBegin","e","runOnJS","onUpdate","translationY","onFinalize","hide","withDelay","withTiming","duration","show","useEffect","commonColors","static","strongInverse"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport { baseColors, commonColors } from '@fountain-ui/styles';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n indicator: {\n width: INDICATOR_WIDTH,\n height: 48,\n backgroundColor: baseColors.gray['650'],\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: 16,\n },\n view: {\n position: 'absolute',\n width: 0,\n },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n const {\n absolutePosition,\n additionalLength = 0,\n contentLength,\n initialScrollPercentage = 0,\n movementRange,\n scrollContentToOffset,\n visibleDurations = { hideMillis: 200, showMillis: 350 },\n } = props;\n\n const totalContentLength = contentLength + additionalLength;\n\n const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n const isIndicatorDragging = useRef(false);\n\n const indicatorOpacity = useSharedValue(0);\n const [visible, setVisible] = useState(false);\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: indicatorOffset.value }],\n opacity: indicatorOpacity.value,\n }));\n\n const position = {\n ...absolutePosition,\n right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n };\n\n const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n if (!isIndicatorDragging.current) {\n const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n const offset = percentageToOffset(contentPercentage, movementRange);\n\n if (offset < 0 || indicatorOffset.value < 0) {\n lastIndicatorOffset.value = 0;\n indicatorOffset.value = 0;\n return;\n }\n\n if (offset > movementRange || indicatorOffset.value > movementRange) {\n lastIndicatorOffset.value = movementRange;\n indicatorOffset.value = movementRange;\n return;\n }\n\n lastIndicatorOffset.value = offset;\n indicatorOffset.value = offset;\n } else {\n setVisible(true);\n }\n }, [totalContentLength, movementRange]);\n\n const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n useImperativeHandle(\n ref,\n () => ({\n getIsIndicatorDragging,\n onContentScroll,\n setVisible,\n }),\n [onContentScroll],\n );\n\n const handleUpdate = () => {\n const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n scrollContentToOffset(offset);\n };\n\n const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n const pan = Gesture.Pan()\n .onBegin((e) => {\n indicatorOffset.value = lastIndicatorOffset.value;\n runOnJS(setIsIndicatorDragging)(true);\n })\n .onUpdate((e) => {\n if (indicatorOffset.value <= 0 && e.translationY < 0) {\n indicatorOffset.value = 0;\n return;\n }\n\n if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n indicatorOffset.value = movementRange;\n return;\n }\n\n indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n runOnJS(handleUpdate)();\n })\n .onFinalize((e) => {\n lastIndicatorOffset.value = indicatorOffset.value;\n runOnJS(setIsIndicatorDragging)(false);\n });\n\n const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n useEffect(() => {\n if (visible) {\n indicatorOffset.value = lastIndicatorOffset.value;\n show();\n } else {\n hide();\n }\n }, [visible]);\n\n return (\n <View\n style={[\n { height: movementRange },\n styles.view,\n position,\n ]}\n >\n <GestureDetector gesture={pan}>\n <Animated.View style={[\n animatedStyle,\n styles.indicator,\n ]}>\n <ChevronUp fill={commonColors.static.strongInverse}/>\n\n <ChevronDown fill={commonColors.static.strongInverse}/>\n </Animated.View>\n </GestureDetector>\n </View>\n );\n});\n\nexport default FastScroll;"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,eAAe,GAAG,EAAxB;;AAEA,MAAMC,MAAM,GAAGC,gBAAA,CAAWC,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,KAAK,EAAEL,eADA;IAEPM,MAAM,EAAE,EAFD;IAGPC,eAAe,EAAEC,kBAAA,CAAWC,IAAX,CAAgB,KAAhB,CAHV;IAIPC,aAAa,EAAE,QAJR;IAKPC,UAAU,EAAE,QALL;IAMPC,cAAc,EAAE,QANT;IAOPC,YAAY,EAAE;EAPP,CADkB;EAU7BC,IAAI,EAAE;IACFC,QAAQ,EAAE,UADR;IAEFV,KAAK,EAAE;EAFL;AAVuB,CAAlB,CAAf;;AAgBA,MAAMW,UAAU,gBAAGC,cAAA,CAAMC,UAAN,CAAiB,CAACC,KAAD,EAAyBC,GAAzB,KAAiC;EACjE,MAAM;IACFC,gBADE;IAEFC,gBAAgB,GAAG,CAFjB;IAGFC,aAHE;IAIFC,uBAAuB,GAAG,CAJxB;IAKFC,aALE;IAMFC,qBANE;IAOFC,gBAAgB,GAAG;MAAEC,UAAU,EAAE,GAAd;MAAmBC,UAAU,EAAE;IAA/B;EAPjB,IAQFV,KARJ;EAUA,MAAMW,kBAAkB,GAAGP,aAAa,GAAGD,gBAA3C;EAEA,MAAMS,aAAa,GAAGC,IAAI,CAACC,KAAL,CAAYT,uBAAuB,GAAG,GAA3B,GAAkCD,aAA7C,CAAtB;EACA,MAAMW,iBAAiB,GAAG,IAAAC,wBAAA,EAAmBJ,aAAnB,EAAkCD,kBAAlC,CAA1B;EACA,MAAMM,0BAA0B,GAAG,IAAAC,wBAAA,EAAmBH,iBAAnB,EAAsCT,aAAtC,CAAnC;EAEA,MAAMa,mBAAmB,GAAG,IAAAC,qCAAA,EAAeH,0BAAf,CAA5B;EACA,MAAMI,eAAe,GAAG,IAAAD,qCAAA,EAAeD,mBAAmB,CAACG,KAAnC,CAAxB;EAEA,MAAMC,mBAAmB,GAAG,IAAAC,aAAA,EAAO,KAAP,CAA5B;EAEA,MAAMC,gBAAgB,GAAG,IAAAL,qCAAA,EAAe,CAAf,CAAzB;EACA,MAAM,CAACM,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEX,eAAe,CAACC;IAA9B,CAAD,CAD+B;IAE1CW,OAAO,EAAER,gBAAgB,CAACH;EAFgB,CAAP,CAAjB,CAAtB;EAKA,MAAM1B,QAAQ,GAAG,EACb,GAAGM,gBADU;IAEbgC,KAAK,EAAEC,CAAC,CAACC,SAAF,CAAY,CAAZ,EAAelC,gBAAf,aAAeA,gBAAf,uBAAeA,gBAAgB,CAAEgC,KAAjC,IAA0CrD;EAFpC,CAAjB;EAKA,MAAMwD,eAAe,GAAG,IAAAC,kBAAA,EAAaC,KAAD,IAAoD;IACpF,IAAI,CAAChB,mBAAmB,CAACiB,OAAzB,EAAkC;MAC9B,MAAMzB,iBAAiB,GAAG,IAAAC,wBAAA,EAAmBuB,KAAK,CAACE,WAAN,CAAkB7B,aAAlB,CAAgC8B,CAAnD,EAAsD/B,kBAAtD,CAA1B;MACA,MAAMgC,MAAM,GAAG,IAAAzB,wBAAA,EAAmBH,iBAAnB,EAAsCT,aAAtC,CAAf;;MAEA,IAAIqC,MAAM,GAAG,CAAT,IAActB,eAAe,CAACC,KAAhB,GAAwB,CAA1C,EAA6C;QACzCH,mBAAmB,CAACG,KAApB,GAA4B,CAA5B;QACAD,eAAe,CAACC,KAAhB,GAAwB,CAAxB;QACA;MACH;;MAED,IAAIqB,MAAM,GAAGrC,aAAT,IAA0Be,eAAe,CAACC,KAAhB,GAAwBhB,aAAtD,EAAqE;QACjEa,mBAAmB,CAACG,KAApB,GAA4BhB,aAA5B;QACAe,eAAe,CAACC,KAAhB,GAAwBhB,aAAxB;QACA;MACH;;MAEDa,mBAAmB,CAACG,KAApB,GAA4BqB,MAA5B;MACAtB,eAAe,CAACC,KAAhB,GAAwBqB,MAAxB;IACH,CAlBD,MAkBO;MACHhB,UAAU,CAAC,IAAD,CAAV;IACH;EACJ,CAtBuB,EAsBrB,CAAChB,kBAAD,EAAqBL,aAArB,CAtBqB,CAAxB;;EAwBA,MAAMsC,sBAAsB,GAAG,MAAMrB,mBAAmB,CAACiB,OAAzD;;EAEA,IAAAK,0BAAA,EACI5C,GADJ,EAEI,OAAO;IACH2C,sBADG;IAEHP,eAFG;IAGHV;EAHG,CAAP,CAFJ,EAOI,CAACU,eAAD,CAPJ;;EAUA,MAAMS,YAAY,GAAG,MAAM;IACvB,MAAM/B,iBAAiB,GAAG,IAAAC,wBAAA,EAAmBK,eAAe,CAACC,KAAnC,EAA0ChB,aAA1C,CAA1B;IACA,MAAMqC,MAAM,GAAG,IAAAzB,wBAAA,EAAmBH,iBAAnB,EAAsCJ,kBAAtC,CAAf;IAEAJ,qBAAqB,CAACoC,MAAD,CAArB;EACH,CALD;;EAOA,MAAMI,sBAAsB,GAAIzB,KAAD,IAAoBC,mBAAmB,CAACiB,OAApB,GAA8BlB,KAAjF;;EAEA,MAAM0B,GAAG,GAAGC,kCAAA,CAAQC,GAAR,GACPC,OADO,CACEC,CAAD,IAAO;IACZ/B,eAAe,CAACC,KAAhB,GAAwBH,mBAAmB,CAACG,KAA5C;IACA,IAAA+B,8BAAA,EAAQN,sBAAR,EAAgC,IAAhC;EACH,CAJO,EAKPO,QALO,CAKGF,CAAD,IAAO;IACb,IAAI/B,eAAe,CAACC,KAAhB,IAAyB,CAAzB,IAA8B8B,CAAC,CAACG,YAAF,GAAiB,CAAnD,EAAsD;MAClDlC,eAAe,CAACC,KAAhB,GAAwB,CAAxB;MACA;IACH;;IAED,IAAID,eAAe,CAACC,KAAhB,IAAyBhB,aAAzB,IAA0C8C,CAAC,CAACG,YAAF,GAAiB,CAA/D,EAAkE;MAC9DlC,eAAe,CAACC,KAAhB,GAAwBhB,aAAxB;MACA;IACH;;IAEDe,eAAe,CAACC,KAAhB,GAAwBH,mBAAmB,CAACG,KAApB,GAA4B8B,CAAC,CAACG,YAAtD;IAEA,IAAAF,8BAAA,EAAQP,YAAR;EACH,CAnBO,EAoBPU,UApBO,CAoBKJ,CAAD,IAAO;IACfjC,mBAAmB,CAACG,KAApB,GAA4BD,eAAe,CAACC,KAA5C;IACA,IAAA+B,8BAAA,EAAQN,sBAAR,EAAgC,KAAhC;EACH,CAvBO,CAAZ;;EAyBA,MAAMU,IAAI,GAAG,MAAMhC,gBAAgB,CAACH,KAAjB,GAAyB,IAAAoC,gCAAA,EAAU,CAAV,EAAa,IAAAC,iCAAA,EAAW,CAAX,EAAc;IAAEC,QAAQ,EAAEpD,gBAAgB,CAACC;EAA7B,CAAd,CAAb,CAA5C;;EAEA,MAAMoD,IAAI,GAAG,MAAMpC,gBAAgB,CAACH,KAAjB,GAAyB,IAAAoC,gCAAA,EAAU,CAAV,EAAa,IAAAC,iCAAA,EAAW,CAAX,EAAc;IAAEC,QAAQ,EAAEpD,gBAAgB,CAACE;EAA7B,CAAd,CAAb,CAA5C;;EAEA,IAAAoD,gBAAA,EAAU,MAAM;IACZ,IAAIpC,OAAJ,EAAa;MACTL,eAAe,CAACC,KAAhB,GAAwBH,mBAAmB,CAACG,KAA5C;MACAuC,IAAI;IACP,CAHD,MAGO;MACHJ,IAAI;IACP;EACJ,CAPD,EAOG,CAAC/B,OAAD,CAPH;EASA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,CACH;MAAEvC,MAAM,EAAEmB;IAAV,CADG,EAEHxB,MAAM,CAACa,IAFJ,EAGHC,QAHG;EADX,gBAOI,6BAAC,0CAAD;IAAiB,OAAO,EAAEoD;EAA1B,gBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAClBnB,aADkB,EAElB/C,MAAM,CAACG,SAFW;EAAtB,gBAII,6BAAC,kBAAD;IAAW,IAAI,EAAE8E,oBAAA,CAAaC,MAAb,CAAoBC;EAArC,EAJJ,eAMI,6BAAC,oBAAD;IAAa,IAAI,EAAEF,oBAAA,CAAaC,MAAb,CAAoBC;EAAvC,EANJ,CADJ,CAPJ,CADJ;AAoBH,CA1IkB,CAAnB;;eA4IepE,U"}
|
|
@@ -45,7 +45,7 @@ function StatusBarProvider(props) {
|
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
const theme = (0, _core.useTheme)();
|
|
48
|
-
const defaultColor = theme.palette.background.
|
|
48
|
+
const defaultColor = theme.palette.background.base;
|
|
49
49
|
|
|
50
50
|
const [visible, setVisible] = _react.default.useState(initialVisible);
|
|
51
51
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["initialVisible","Platform","select","ios","android","StatusBarProvider","props","children","currentStatusBarPropsRef","useRef","initialStatusBarPropsStack","Array","statusBarPropsStackRef","mergeStatusBarPropsRef","current","theme","useTheme","defaultColor","palette","background","default","visible","setVisible","React","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","backgroundColor","OS","RNStatusBar","setBarStyle","animated","barStyle","setHidden","hidden","setTranslucent","translucent","updateStatusBarProps","statusBarProps","animatedBarStyle","R","isNil","restoreInitialStack","length","initialStatusBar","clearStack","pushStack","push","replaceStack","popStack","prevStack","undefined","pop","getCurrentStatusBarProps","shouldRenderBackgroundView","inset","useSafeAreaInsets","backgroundViewStyle","css","height","top","left","position","right","zIndex","statusBar"],"sources":["StatusBarProvider.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport * as R from 'ramda';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type { StatusBarProps } from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n ios: true,\n android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n const { children } = props;\n\n const currentStatusBarPropsRef = useRef<StatusBarProps | {}>({});\n\n const initialStatusBarPropsStack = new Array<StatusBarProps>();\n const statusBarPropsStackRef = useRef(initialStatusBarPropsStack);\n\n const mergeStatusBarPropsRef = (props: StatusBarProps) => {\n currentStatusBarPropsRef.current = {\n ...currentStatusBarPropsRef.current,\n ...props,\n };\n };\n\n const theme = useTheme();\n const defaultColor = theme.palette.background.default;\n\n const [visible, setVisible] = React.useState(initialVisible);\n const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n const setBackgroundColor = (value: string) => {\n mergeStatusBarPropsRef({ backgroundColor: value });\n\n if (Platform.OS === 'android') {\n RNStatusBar.setBackgroundColor(value);\n }\n\n if (Platform.OS === 'ios') {\n setBackgroundViewColor(value);\n }\n };\n\n const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n mergeStatusBarPropsRef({ barStyle: value });\n RNStatusBar.setBarStyle(value, animated);\n };\n\n const setHidden = (value: boolean) => {\n mergeStatusBarPropsRef({ hidden: value });\n\n if (Platform.OS === 'ios') {\n setVisible(!value);\n }\n\n RNStatusBar.setHidden(value);\n };\n\n const setTranslucent = (value: boolean) => {\n mergeStatusBarPropsRef({ translucent: value });\n\n if (Platform.OS === 'android') {\n RNStatusBar.setTranslucent(value);\n }\n };\n\n const updateStatusBarProps = (statusBarProps: StatusBarProps) => {\n const {\n barStyle,\n animatedBarStyle,\n backgroundColor,\n hidden,\n translucent,\n } = statusBarProps;\n\n if (!R.isNil(barStyle)) {\n setBarStyle(barStyle, animatedBarStyle);\n }\n\n if (!R.isNil(backgroundColor)) {\n setBackgroundColor(backgroundColor);\n }\n\n if (!R.isNil(hidden)) {\n setHidden(hidden);\n }\n\n if (!R.isNil(translucent)) {\n setTranslucent(translucent);\n }\n };\n\n const restoreInitialStack = () => {\n if (statusBarPropsStackRef.current.length === 0) {\n return;\n }\n\n const initialStatusBar = statusBarPropsStackRef.current[0];\n updateStatusBarProps(initialStatusBar);\n\n statusBarPropsStackRef.current = [statusBarPropsStackRef.current[0]];\n };\n\n const clearStack = () => {\n statusBarPropsStackRef.current = new Array<StatusBarProps>();\n };\n\n const pushStack = (statusBarProps: StatusBarProps) => {\n updateStatusBarProps(statusBarProps);\n statusBarPropsStackRef.current.push(currentStatusBarPropsRef.current);\n };\n\n const replaceStack = (statusBarProps: StatusBarProps) => {\n if (statusBarPropsStackRef.current.length === 0) {\n return;\n }\n\n updateStatusBarProps(statusBarProps);\n statusBarPropsStackRef.current[statusBarPropsStackRef.current.length - 1] = currentStatusBarPropsRef.current;\n };\n\n const popStack = () => {\n if (statusBarPropsStackRef.current.length === 0) {\n return;\n }\n\n const prevStack = statusBarPropsStackRef.current.length >= 2\n ? statusBarPropsStackRef.current[statusBarPropsStackRef.current.length - 2]\n : undefined;\n\n statusBarPropsStackRef.current.pop();\n\n if (R.isNil(prevStack)) {\n return;\n }\n\n updateStatusBarProps(prevStack);\n };\n\n const getCurrentStatusBarProps = () => currentStatusBarPropsRef.current;\n\n const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n const inset = useSafeAreaInsets();\n const backgroundViewStyle = css([\n {\n backgroundColor: backgroundViewColor,\n height: inset.top,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n zIndex: theme.zIndex.statusBar,\n },\n ]);\n\n return (\n <Provider value={{\n setBackgroundColor,\n setBarStyle,\n setHidden,\n setTranslucent,\n pushStack,\n popStack,\n replaceStack,\n getCurrentStatusBarProps,\n restoreInitialStack,\n clearStack,\n }}>\n {shouldRenderBackgroundView ? (\n <View style={backgroundViewStyle}/>\n ) : null}\n {children}\n </Provider>\n );\n}"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["initialVisible","Platform","select","ios","android","StatusBarProvider","props","children","currentStatusBarPropsRef","useRef","initialStatusBarPropsStack","Array","statusBarPropsStackRef","mergeStatusBarPropsRef","current","theme","useTheme","defaultColor","palette","background","base","visible","setVisible","React","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","backgroundColor","OS","RNStatusBar","setBarStyle","animated","barStyle","setHidden","hidden","setTranslucent","translucent","updateStatusBarProps","statusBarProps","animatedBarStyle","R","isNil","restoreInitialStack","length","initialStatusBar","clearStack","pushStack","push","replaceStack","popStack","prevStack","undefined","pop","getCurrentStatusBarProps","shouldRenderBackgroundView","inset","useSafeAreaInsets","backgroundViewStyle","css","height","top","left","position","right","zIndex","statusBar"],"sources":["StatusBarProvider.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport * as R from 'ramda';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type { StatusBarProps } from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n ios: true,\n android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n const { children } = props;\n\n const currentStatusBarPropsRef = useRef<StatusBarProps | {}>({});\n\n const initialStatusBarPropsStack = new Array<StatusBarProps>();\n const statusBarPropsStackRef = useRef(initialStatusBarPropsStack);\n\n const mergeStatusBarPropsRef = (props: StatusBarProps) => {\n currentStatusBarPropsRef.current = {\n ...currentStatusBarPropsRef.current,\n ...props,\n };\n };\n\n const theme = useTheme();\n const defaultColor = theme.palette.background.base;\n\n const [visible, setVisible] = React.useState(initialVisible);\n const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n const setBackgroundColor = (value: string) => {\n mergeStatusBarPropsRef({ backgroundColor: value });\n\n if (Platform.OS === 'android') {\n RNStatusBar.setBackgroundColor(value);\n }\n\n if (Platform.OS === 'ios') {\n setBackgroundViewColor(value);\n }\n };\n\n const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n mergeStatusBarPropsRef({ barStyle: value });\n RNStatusBar.setBarStyle(value, animated);\n };\n\n const setHidden = (value: boolean) => {\n mergeStatusBarPropsRef({ hidden: value });\n\n if (Platform.OS === 'ios') {\n setVisible(!value);\n }\n\n RNStatusBar.setHidden(value);\n };\n\n const setTranslucent = (value: boolean) => {\n mergeStatusBarPropsRef({ translucent: value });\n\n if (Platform.OS === 'android') {\n RNStatusBar.setTranslucent(value);\n }\n };\n\n const updateStatusBarProps = (statusBarProps: StatusBarProps) => {\n const {\n barStyle,\n animatedBarStyle,\n backgroundColor,\n hidden,\n translucent,\n } = statusBarProps;\n\n if (!R.isNil(barStyle)) {\n setBarStyle(barStyle, animatedBarStyle);\n }\n\n if (!R.isNil(backgroundColor)) {\n setBackgroundColor(backgroundColor);\n }\n\n if (!R.isNil(hidden)) {\n setHidden(hidden);\n }\n\n if (!R.isNil(translucent)) {\n setTranslucent(translucent);\n }\n };\n\n const restoreInitialStack = () => {\n if (statusBarPropsStackRef.current.length === 0) {\n return;\n }\n\n const initialStatusBar = statusBarPropsStackRef.current[0];\n updateStatusBarProps(initialStatusBar);\n\n statusBarPropsStackRef.current = [statusBarPropsStackRef.current[0]];\n };\n\n const clearStack = () => {\n statusBarPropsStackRef.current = new Array<StatusBarProps>();\n };\n\n const pushStack = (statusBarProps: StatusBarProps) => {\n updateStatusBarProps(statusBarProps);\n statusBarPropsStackRef.current.push(currentStatusBarPropsRef.current);\n };\n\n const replaceStack = (statusBarProps: StatusBarProps) => {\n if (statusBarPropsStackRef.current.length === 0) {\n return;\n }\n\n updateStatusBarProps(statusBarProps);\n statusBarPropsStackRef.current[statusBarPropsStackRef.current.length - 1] = currentStatusBarPropsRef.current;\n };\n\n const popStack = () => {\n if (statusBarPropsStackRef.current.length === 0) {\n return;\n }\n\n const prevStack = statusBarPropsStackRef.current.length >= 2\n ? statusBarPropsStackRef.current[statusBarPropsStackRef.current.length - 2]\n : undefined;\n\n statusBarPropsStackRef.current.pop();\n\n if (R.isNil(prevStack)) {\n return;\n }\n\n updateStatusBarProps(prevStack);\n };\n\n const getCurrentStatusBarProps = () => currentStatusBarPropsRef.current;\n\n const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n const inset = useSafeAreaInsets();\n const backgroundViewStyle = css([\n {\n backgroundColor: backgroundViewColor,\n height: inset.top,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n zIndex: theme.zIndex.statusBar,\n },\n ]);\n\n return (\n <Provider value={{\n setBackgroundColor,\n setBarStyle,\n setHidden,\n setTranslucent,\n pushStack,\n popStack,\n replaceStack,\n getCurrentStatusBarProps,\n restoreInitialStack,\n clearStack,\n }}>\n {shouldRenderBackgroundView ? (\n <View style={backgroundViewStyle}/>\n ) : null}\n {children}\n </Provider>\n );\n}\n"],"mappings":"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"}
|
|
@@ -179,7 +179,7 @@ function useUnstableCollapsibleAppBar() {
|
|
|
179
179
|
duration: ANIMATION_DURATION_MILLIS
|
|
180
180
|
});
|
|
181
181
|
}
|
|
182
|
-
}
|
|
182
|
+
});
|
|
183
183
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
184
184
|
const appBarStyle = [animatedStyle, {
|
|
185
185
|
paddingTop: safeAreaInsets.top
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n vectorY: SharedValue<number>;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n const refLatestTwoValues = useRef([0, 0]);\n\n refLatestTwoValues.current.shift();\n refLatestTwoValues.current.push(value);\n\n return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { shouldTranslateYReset }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const prevOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n const vectorY = useSharedValue<number>(0);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = useCallback((nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n if (shouldTranslateYReset) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n offsetsRef.current = [];\n overlapped.value = false;\n }\n\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n }\n }, [appBarHeight]);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n const deltaY = offsetY - prevOffsetY.value;\n vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n prevOffsetY.value = offsetY;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n }, [appBarHeight]);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n vectorY,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n vectorY: SharedValue<number>;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n const refLatestTwoValues = useRef([0, 0]);\n\n refLatestTwoValues.current.shift();\n refLatestTwoValues.current.push(value);\n\n return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { shouldTranslateYReset }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const prevOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n const vectorY = useSharedValue<number>(0);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = useCallback((nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n if (shouldTranslateYReset) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n offsetsRef.current = [];\n overlapped.value = false;\n }\n\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n }\n }, [appBarHeight]);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n const deltaY = offsetY - prevOffsetY.value;\n vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n prevOffsetY.value = offsetY;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n });\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n vectorY,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAOA;;AACA;;AACA;;AACA;;;;AA+BA,MAAMA,cAAiC,GAAG;EACtCC,qBAAqB,EAAE;AADe,CAA1C;AAIA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGC,qBAAA,CAASC,EAAT,KAAgB,KAAhD;;AAEA,SAASC,6BAAT,CAAuCC,KAAvC,EAAsD;EAClD,MAAMC,kBAAkB,GAAG,IAAAC,aAAA,EAAO,CAAC,CAAD,EAAI,CAAJ,CAAP,CAA3B;EAEAD,kBAAkB,CAACE,OAAnB,CAA2BC,KAA3B;EACAH,kBAAkB,CAACE,OAAnB,CAA2BE,IAA3B,CAAgCL,KAAhC;EAEA,OAAOM,IAAI,CAACC,GAAL,CAAS,GAAGN,kBAAkB,CAACE,OAA/B,CAAP;AACH;;AAEc,SAASK,4BAAT,GAAgG;EAAA,IAA1DC,WAA0D,uEAAnChB,cAAmC;EAC3G,MAAM;IAAEC;EAAF,IAA+C,EACjD,GAAGD,cAD8C;IAEjD,GAAGgB;EAF8C,CAArD;EAKA,MAAMC,MAAM,GAAG,IAAAC,wBAAA,GAAf;EAEA,MAAMC,cAAc,GAAG,IAAAC,6CAAA,GAAvB;EAEA,MAAM,CAACC,YAAD,EAAeC,cAAf,IAAiC,IAAAC,kBAAA,GAAvC;EACA,MAAMC,eAAe,GAAGlB,6BAA6B,CAACe,YAAD,CAArD;EACA,MAAM,CAACI,wBAAD,EAA2BC,0BAA3B,IAAyD,IAAAH,kBAAA,GAA/D;EAEA,MAAMI,aAAa,GAAG,IAAAC,sCAAA,EAAgB,MAAM,CAACH,wBAAvB,EAAiD,CAACA,wBAAD,CAAjD,CAAtB;EAEA,MAAMI,UAAU,GAAG,IAAAC,qCAAA,EAAuB,CAAvB,CAAnB;EACA,MAAMC,cAAc,GAAG,IAAAD,qCAAA,EAAuB,CAAvB,CAAvB;EACA,MAAME,WAAW,GAAG,IAAAF,qCAAA,EAAuB,CAAvB,CAApB;EACA,MAAMG,WAAW,GAAG,IAAAH,qCAAA,EAAuB,CAAvB,CAApB;EACA,MAAMI,UAAU,GAAG,IAAAJ,qCAAA,EAAwB,KAAxB,CAAnB;EACA,MAAMK,OAAO,GAAG,IAAAL,qCAAA,EAAuB,CAAvB,CAAhB;EAEA,MAAMM,cAAc,GAAG,IAAAC,0BAAA,EAAkB,CAAlB,CAAvB;EACA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,MAAMC,SAAS,GAAG,CAAC;MAAEX,UAAU,EAAEA,UAAU,CAACtB;IAAzB,CAAD,CAAlB;;IAEA,IAAIH,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;MACvB,OAAO;QACHmC,SADG;QAEHC,SAAS,EAAEP,UAAU,CAAC3B,KAAX,GAAmB6B,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEK,SAAnC,GAA+C;MAFvD,CAAP;IAIH;;IACD,IAAIrC,qBAAA,CAASC,EAAT,KAAgB,SAApB,EAA+B;MAC3B,OAAO;QACHmC,SADG;QAEHE,SAAS,EAAER,UAAU,CAAC3B,KAAX,GAAmB6B,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEM,SAAnC,GAA+C;MAFvD,CAAP;IAIH;;IACD,IAAItC,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;MACvB,OAAO;QACHmC,SADG;QAEHG,WAAW,EAAEP,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEO,WAF1B;QAGHC,YAAY,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,YAH3B;QAIHC,YAAY,EAAET,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAES,YAJ3B;QAKHC,aAAa,EAAEZ,UAAU,CAAC3B,KAAX,GAAmB6B,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEU,aAAnC,GAAmD;MAL/D,CAAP;IAOH;;IACD,OAAO,EAAP;EACH,CAzBqB,EAyBnB;IACC;AACR;AACA;EAHO,CAzBmB,CAAtB;EA+BA,MAAMC,QAAQ,GAAG,IAAAtC,aAAA,EAAe,CAAf,CAAjB;EACA,MAAMuC,UAAU,GAAG,IAAAvC,aAAA,EAAsB,EAAtB,CAAnB;EAEA,MAAMwC,mBAAmB,GAAG,IAAAC,kBAAA,EAAaC,SAAD,IAAuB;IAC3D,MAAMC,SAAS,GAAGL,QAAQ,CAACrC,OAA3B;;IACA,IAAI0C,SAAS,KAAKD,SAAlB,EAA6B;MACzB,IAAIlD,qBAAJ,EAA2B;QACvB4B,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAW,CAAX,EAAc;UAC7BC,QAAQ,EAAEpD;QADmB,CAAd,CAAnB;QAIAiC,OAAO,CAAC5B,KAAR,GAAgB,CAAhB;QACAyC,UAAU,CAACtC,OAAX,GAAqB,EAArB;QACAwB,UAAU,CAAC3B,KAAX,GAAmB,KAAnB;MACH;;MAED;IACH;;IAEDyC,UAAU,CAACtC,OAAX,CAAmB0C,SAAnB,IAAgCpB,WAAW,CAACzB,KAA5C;IAEA,MAAMgD,YAAY,GAAGP,UAAU,CAACtC,OAAX,CAAmByC,SAAnB,KAAiC,CAAtD;IACAnB,WAAW,CAACzB,KAAZ,GAAoBgD,YAApB;IAEAR,QAAQ,CAACrC,OAAT,GAAmByC,SAAnB,CArB2D,CAuB3D;;IACAjB,UAAU,CAAC3B,KAAX,GAAmBgD,YAAY,GAAG,CAAlC,CAxB2D,CA0B3D;;IACA,IAAI1B,UAAU,CAACtB,KAAX,GAAmB,CAAnB,IAAwBgD,YAAY,GAAGlC,YAA3C,EAAyD;MACrDQ,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAW,CAAX,EAAc;QAC7BC,QAAQ,EAAEpD;MADmB,CAAd,CAAnB;MAIAiC,OAAO,CAAC5B,KAAR,GAAgB,CAAhB;IACH;EACJ,CAlC2B,EAkCzB,CAACc,YAAD,CAlCyB,CAA5B;EAoCA,MAAMmC,aAAa,GAAG,IAAAC,+CAAA,EAAyB;IAC3CC,WAAW,EAAE,MAAM;MACf3B,cAAc,CAACxB,KAAf,GAAuBsB,UAAU,CAACtB,KAAlC;IACH,CAH0C;IAI3CoD,eAAe,EAAE,MAAM;MACnB5B,cAAc,CAACxB,KAAf,GAAuBsB,UAAU,CAACtB,KAAlC;IACH,CAN0C;IAO3CqD,QAAQ,EAAGC,KAAD,IAAW;MACjB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA,MAAMC,EAAE,GAAGpC,UAAU,CAACtB,KAAtB;MACA,MAAM2D,KAAK,GAAGvC,aAAa,CAACpB,KAA5B;MAEA,MAAM4D,MAAM,GAAGL,OAAO,GAAG7B,WAAW,CAAC1B,KAArC;MACA4B,OAAO,CAAC5B,KAAR,GAAiB4B,OAAO,CAAC5B,KAAR,GAAgB4D,MAAhB,IAA0B,CAA1B,IAA+BL,OAAO,GAAG,CAA1C,GAA+C3B,OAAO,CAAC5B,KAAR,GAAgB4D,MAA/D,GAAwEA,MAAxF;MACAlC,WAAW,CAAC1B,KAAZ,GAAoBuD,OAApB;;MAEA,IAAI3D,uBAAJ,EAA6B;QACzB,MAAMiE,EAAE,GAAGN,OAAO,GAAG9B,WAAW,CAACzB,KAAjC;QAEAsB,UAAU,CAACtB,KAAX,GAAmBuD,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBjD,IAAI,CAACwD,GAAL,CAASxD,IAAI,CAACC,GAAL,CAASiB,cAAc,CAACxB,KAAf,GAAuB6D,EAAhC,EAAoCF,KAApC,CAAT,EAAqD,CAArD,CAAtC;QAEAhC,UAAU,CAAC3B,KAAX,GAAmBuD,OAAO,GAAGjC,UAAU,CAACtB,KAArB,GAA6B,CAAhD;MACH,CAND,MAMO;QACH,IAAIuD,OAAO,GAAG,CAACI,KAAf,EAAsB;UAClB,IAAID,EAAE,KAAK,CAAX,EAAc;YACVpC,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAWxC,IAAI,CAACwD,GAAL,CAASxD,IAAI,CAACC,GAAL,CAAS,CAACgD,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAAX,EAAmD;cAClEZ,QAAQ,EAAEpD;YADwD,CAAnD,CAAnB;UAGH;QACJ,CAND,MAMO;UACH,IAAI+D,EAAE,KAAKC,KAAX,EAAkB;YACdrC,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAW,CAAX,EAAc;cAC7BC,QAAQ,EAAEpD;YADmB,CAAd,CAAnB;UAGH;QACJ;;QAEDgC,UAAU,CAAC3B,KAAX,GAAmBuD,OAAO,GAAG,CAA7B;QAEA9B,WAAW,CAACzB,KAAZ,GAAoBuD,OAApB;MACH;IACJ,CA1C0C;IA2C3CQ,SAAS,EAAGT,KAAD,IAAW;MAClB7B,WAAW,CAACzB,KAAZ,GAAoBsD,KAAK,CAACE,aAAN,CAAoBC,CAAxC;IACH,CA7C0C;IA8C3CO,aAAa,EAAGV,KAAD,IAAW;MACtB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEAhC,WAAW,CAACzB,KAAZ,GAAoBuD,OAApB;MAEA,MAAMG,EAAE,GAAGpC,UAAU,CAACtB,KAAtB;MACA,MAAM2D,KAAK,GAAGvC,aAAa,CAACpB,KAA5B,CANsB,CAQtB;;MACA,IAAI0D,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;QACxB;MACH;;MAED,MAAMO,SAAS,GAAGN,KAAK,GAAG,GAA1B;MAEA,MAAMO,cAAc,GAAIR,EAAE,GAAGO,SAAL,IAAkBV,OAAO,GAAGzC,YAA7B,GAA6C,CAA7C,GAAiD6C,KAAxE;MAEAhC,UAAU,CAAC3B,KAAX,GAAmBuD,OAAO,GAAGW,cAAV,GAA2B,CAA9C;MAEA5C,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAWoB,cAAX,EAA2B;QAC1CnB,QAAQ,EAAEpD;MADgC,CAA3B,CAAnB;IAGH;EApE0C,CAAzB,CAAtB;EAuEA,MAAMwE,cAAc,GAAGjD,wBAAwB,GAAG,CAAlD;EAEA,MAAMkD,WAAW,GAAG,CAChBrC,aADgB,EAEhB;IAAEsC,UAAU,EAAEzD,cAAc,CAAC0D;EAA7B,CAFgB,EAGhBH,cAAc,GAAGzD,MAAM,CAAC6D,QAAV,GAAqBC,SAHnB,CAApB;EAMA,OAAO;IACHJ,WADG;IAEHxC,OAFG;IAGHb,cAHG;IAIHI,0BAJG;IAKHkC,QAAQ,EAAEJ,aALP;IAMHP,mBANG;IAOH+B,mBAAmB,EAAE;MAAEH,GAAG,EAAEH,cAAc,GAAGlD,eAAH,GAAqB;IAA1C;EAPlB,CAAP;AASH;;AAAA"}
|
|
@@ -2,16 +2,22 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
|
|
3
3
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
4
|
import { Animated, useWindowDimensions } from 'react-native';
|
|
5
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
6
|
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
|
|
6
|
-
import { Column, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
|
|
7
|
+
import { Column, css, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
|
|
7
8
|
import { useTheme } from '@fountain-ui/styles';
|
|
8
9
|
import TransparentBackdrop from './TransparentBackdrop';
|
|
10
|
+
import useDynamicSnapPoints from './useDynamicSnapPoints.native';
|
|
9
11
|
|
|
10
12
|
const NoHandle = () => null;
|
|
11
13
|
|
|
14
|
+
const DEFAULT_PADDING_BOTTOM = 24;
|
|
15
|
+
const DEFAULT_PADDING_TOP = 22;
|
|
16
|
+
const TOP_ELEMENT_HIDDEN_OFFSET = 16;
|
|
12
17
|
export default function BottomSheet(props) {
|
|
13
18
|
const {
|
|
14
19
|
backdropOpacity = 0.5,
|
|
20
|
+
backgroundStyle: backgroundStyleProp,
|
|
15
21
|
borderRadius: borderRadiusProp,
|
|
16
22
|
children,
|
|
17
23
|
enableDynamicSizing = true,
|
|
@@ -19,7 +25,8 @@ export default function BottomSheet(props) {
|
|
|
19
25
|
index,
|
|
20
26
|
maxHeightNormalizedRatio = 0.8,
|
|
21
27
|
onChange,
|
|
22
|
-
snapPoints = []
|
|
28
|
+
snapPoints = [],
|
|
29
|
+
style: styleProp
|
|
23
30
|
} = props;
|
|
24
31
|
const indexRef = useRef(-1);
|
|
25
32
|
const bottomSheetRef = useRef(null);
|
|
@@ -27,7 +34,8 @@ export default function BottomSheet(props) {
|
|
|
27
34
|
height: windowHeight
|
|
28
35
|
} = useWindowDimensions();
|
|
29
36
|
const [topElementHeight, setTopElementHeight] = useState(0);
|
|
30
|
-
const
|
|
37
|
+
const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);
|
|
38
|
+
const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;
|
|
31
39
|
|
|
32
40
|
const handleTopElementLayout = event => {
|
|
33
41
|
const {
|
|
@@ -68,19 +76,25 @@ export default function BottomSheet(props) {
|
|
|
68
76
|
}, [index]);
|
|
69
77
|
const theme = useTheme();
|
|
70
78
|
const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
|
|
71
|
-
const backgroundStyle = {
|
|
79
|
+
const backgroundStyle = css([{
|
|
72
80
|
backgroundColor: theme.palette.surface.base,
|
|
73
81
|
borderTopLeftRadius: borderRadius,
|
|
74
82
|
borderTopRightRadius: borderRadius
|
|
75
|
-
};
|
|
76
|
-
const
|
|
77
|
-
|
|
83
|
+
}, backgroundStyleProp]);
|
|
84
|
+
const {
|
|
85
|
+
bottom: bottomSafeInset
|
|
86
|
+
} = useSafeAreaInsets();
|
|
87
|
+
const contentWrapperStyle = css([{
|
|
88
|
+
backgroundColor: theme.palette.surface.base,
|
|
89
|
+
borderTopLeftRadius: borderRadius,
|
|
90
|
+
borderTopRightRadius: borderRadius,
|
|
91
|
+
flexShrink: 1,
|
|
78
92
|
maxHeight: maxDynamicContentSize,
|
|
79
|
-
minHeight:
|
|
93
|
+
minHeight: 325,
|
|
80
94
|
overflow: 'hidden',
|
|
81
|
-
paddingBottom:
|
|
82
|
-
paddingTop:
|
|
83
|
-
};
|
|
95
|
+
paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,
|
|
96
|
+
paddingTop: DEFAULT_PADDING_TOP
|
|
97
|
+
}, styleProp]);
|
|
84
98
|
const isBackdropTransparent = backdropOpacity <= 0;
|
|
85
99
|
|
|
86
100
|
const OpacityAwareBackdrop = props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {
|
|
@@ -109,27 +123,37 @@ export default function BottomSheet(props) {
|
|
|
109
123
|
}).start();
|
|
110
124
|
};
|
|
111
125
|
|
|
126
|
+
const {
|
|
127
|
+
animatedHandleHeight,
|
|
128
|
+
animatedSnapPoints,
|
|
129
|
+
animatedContentHeight,
|
|
130
|
+
handleContentLayout
|
|
131
|
+
} = useDynamicSnapPoints(snapPoints);
|
|
112
132
|
return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
|
|
113
133
|
backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop // @ts-ignore
|
|
114
134
|
,
|
|
115
135
|
backgroundStyle: backgroundStyle,
|
|
136
|
+
enableOverDrag: false,
|
|
116
137
|
index: index,
|
|
117
138
|
handleComponent: NoHandle,
|
|
118
139
|
onChange: handleChange,
|
|
119
140
|
onDismiss: handleDismiss,
|
|
120
141
|
ref: bottomSheetRef,
|
|
121
|
-
snapPoints: snapPoints,
|
|
122
142
|
enablePanDownToClose: Boolean(onChange),
|
|
123
143
|
enableDynamicSizing: enableDynamicSizing,
|
|
124
144
|
maxDynamicContentSize: maxDynamicContentSize,
|
|
125
145
|
detached: Boolean(topElement),
|
|
126
|
-
onAnimate: topElement ? onAnimate : undefined
|
|
146
|
+
onAnimate: topElement ? onAnimate : undefined,
|
|
147
|
+
snapPoints: animatedSnapPoints,
|
|
148
|
+
handleHeight: animatedHandleHeight,
|
|
149
|
+
contentHeight: animatedContentHeight
|
|
127
150
|
}, topElement ? /*#__PURE__*/React.createElement(Animated.View, {
|
|
128
151
|
style: topElementAnimationStyle
|
|
129
152
|
}, /*#__PURE__*/React.createElement(Column, {
|
|
130
153
|
onLayout: handleTopElementLayout,
|
|
131
154
|
style: topElementLocationStyle
|
|
132
155
|
}, topElement)) : null, /*#__PURE__*/React.createElement(BottomSheetView, {
|
|
156
|
+
onLayout: handleContentLayout,
|
|
133
157
|
style: contentWrapperStyle
|
|
134
158
|
}, children)));
|
|
135
159
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundStyle","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flex","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","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 {\n BottomSheetBackdrop,\n BottomSheetBackdropProps,\n BottomSheetModal,\n BottomSheetModalProvider,\n BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, 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\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.5,\n borderRadius: borderRadiusProp,\n children,\n enableDynamicSizing = true,\n topElement,\n index,\n maxHeightNormalizedRatio = 0.8,\n onChange,\n snapPoints = [],\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 maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\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 = {\n backgroundColor: theme.palette.surface.base,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n };\n\n const contentWrapperStyle: ViewStyle = {\n flex: 1,\n maxHeight: maxDynamicContentSize,\n minHeight: 300,\n overflow: 'hidden',\n paddingBottom: theme.spacing(6),\n paddingTop: theme.spacing(5.5),\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 index={index}\n handleComponent={NoHandle}\n onChange={handleChange}\n onDismiss={handleDismiss}\n ref={bottomSheetRef}\n snapPoints={snapPoints}\n enablePanDownToClose={Boolean(onChange)}\n enableDynamicSizing={enableDynamicSizing}\n maxDynamicContentSize={maxDynamicContentSize}\n detached={Boolean(topElement)}\n onAnimate={topElement ? onAnimate : undefined}\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":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,EAAgDC,QAAhD,QAAgE,OAAhE;AACA,SAASC,QAAT,EAAsCC,mBAAtC,QAA4E,cAA5E;AACA,SACIC,mBADJ,EAGIC,gBAHJ,EAIIC,wBAJJ,EAKIC,eALJ,QAMO,sBANP;AAOA,SAASC,MAAT,EAAgCC,cAAhC,EAAgDC,gBAAhD,QAAwE,mBAAxE;AACA,SAASC,QAAT,QAAyB,qBAAzB;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;;AAEA,MAAMC,QAAQ,GAAG,MAAM,IAAvB;;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eAAe,GAAG,GADhB;IAEFC,YAAY,EAAEC,gBAFZ;IAGFC,QAHE;IAIFC,mBAAmB,GAAG,IAJpB;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG;EATX,IAUFV,KAVJ;EAYA,MAAMW,QAAQ,GAAG1B,MAAM,CAAS,CAAC,CAAV,CAAvB;EACA,MAAM2B,cAAc,GAAG3B,MAAM,CAA0B,IAA1B,CAA7B;EAEA,MAAM;IAAE4B,MAAM,EAAEC;EAAV,IAA2B1B,mBAAmB,EAApD;EACA,MAAM,CAAC2B,gBAAD,EAAmBC,mBAAnB,IAA0C9B,QAAQ,CAAC,CAAD,CAAxD;EAEA,MAAM+B,qBAAqB,GAAGC,IAAI,CAACC,KAAL,CAAWL,YAAY,GAAGN,wBAA1B,IAAsDO,gBAApF;;EAEA,MAAMK,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAER;IAAF,IAAaQ,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAP,mBAAmB,CAACH,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMW,YAAY,GAAGzC,WAAW,CAAE0C,QAAD,IAAsB;IACnDd,QAAQ,CAACe,OAAT,GAAmBD,QAAnB;;IAEA,IAAIhB,QAAJ,EAAc;MACVA,QAAQ,CAACgB,QAAD,CAAR;IACH;EACJ,CAN+B,EAM7B,CAAChB,QAAD,CAN6B,CAAhC;EAQA,MAAMkB,aAAa,GAAG5C,WAAW,CAAC,MAAM;IACpCyC,YAAY,CAAC,CAAC,CAAF,CAAZ;EACH,CAFgC,EAE9B,CAACA,YAAD,CAF8B,CAAjC;EAIAxC,SAAS,CAAC,MAAM;IACZ,IAAIuB,KAAK,KAAKI,QAAQ,CAACe,OAAvB,EAAgC;MAC5B;IACH;;IAED,IAAIf,QAAQ,CAACe,OAAT,GAAmB,CAAnB,IAAwBnB,KAAK,IAAI,CAArC,EAAwC;MAAA;;MACpC,yBAAAK,cAAc,CAACc,OAAf,gFAAwBE,OAAxB;IACH,CAFD,MAEO,IAAIjB,QAAQ,CAACe,OAAT,IAAoB,CAApB,IAAyBnB,KAAK,GAAG,CAArC,EAAwC;MAAA;;MAC3C,0BAAAK,cAAc,CAACc,OAAf,kFAAwBG,OAAxB;IACH,CAFM,MAEA;MAAA;;MACH;MACA,0BAAAjB,cAAc,CAACc,OAAf,kFAAwBI,WAAxB,CAAoCvB,KAApC;IACH;EACJ,CAbQ,EAaN,CAACA,KAAD,CAbM,CAAT;EAeA,MAAMwB,KAAK,GAAGnC,QAAQ,EAAtB;EAEA,MAAMM,YAAY,GAAGC,gBAAgB,IAAI4B,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,GAA5D;EACA,MAAMC,eAAe,GAAG;IACpBC,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,OAAd,CAAsBC,IADnB;IAEpBC,mBAAmB,EAAEtC,YAFD;IAGpBuC,oBAAoB,EAAEvC;EAHF,CAAxB;EAMA,MAAMwC,mBAA8B,GAAG;IACnCC,IAAI,EAAE,CAD6B;IAEnCC,SAAS,EAAE3B,qBAFwB;IAGnC4B,SAAS,EAAE,GAHwB;IAInCC,QAAQ,EAAE,QAJyB;IAKnCC,aAAa,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd,CALoB;IAMnCC,UAAU,EAAElB,KAAK,CAACiB,OAAN,CAAc,GAAd;EANuB,CAAvC;EASA,MAAME,qBAAqB,GAAGjD,eAAe,IAAI,CAAjD;;EAEA,MAAMkD,oBAAoB,GAAInD,KAAD,iBACzB,oBAAC,mBAAD,eACQA,KADR;IAEI,cAAc,EAAE,CAFpB;IAGI,iBAAiB,EAAE,CAAC,CAHxB;IAII,OAAO,EAAEC,eAJb;IAKI,aAAa,EAAEQ,QAAQ,GAAG,OAAH,GAAa;EALxC,GADJ;;EAUA,MAAM2C,iBAAiB,GAAGzD,gBAAgB,CAAC,CAAD,CAA1C;EACA,MAAM0D,wBAAmE,GAAG;IAAEC,OAAO,EAAEF;EAAX,CAA5E;EACA,MAAMG,uBAAsC,GAAG;IAC3CC,QAAQ,EAAE,UADiC;IAE3CC,KAAK,EAAE,MAFoC;IAG3CC,MAAM,EAAE;EAHmC,CAA/C;;EAKA,MAAMC,SAAS,GAAG,CAACC,SAAD,EAAoBC,OAApB,KAAwC;IACtD,MAAMC,SAAS,GAAGD,OAAO,GAAG,CAAC,CAA7B;IAEA1E,QAAQ,CAAC4E,MAAT,CAAgBX,iBAAhB,EAAmC;MAC/BY,OAAO,EAAEF,SAAS,GAAG,CAAH,GAAO,CADM;MAE/BG,QAAQ,EAAE,CAFqB;MAG/BC,eAAe,EAAExE;IAHc,CAAnC,EAIGyE,KAJH;EAKH,CARD;;EAUA,oBACI,oBAAC,wBAAD,qBACI,oBAAC,gBAAD;IACI,iBAAiB,EAAEjB,qBAAqB,GAAGrD,mBAAH,GAAyBsD,oBADrE,CAEI;IAFJ;IAGI,eAAe,EAAEhB,eAHrB;IAII,KAAK,EAAE5B,KAJX;IAKI,eAAe,EAAET,QALrB;IAMI,QAAQ,EAAE0B,YANd;IAOI,SAAS,EAAEG,aAPf;IAQI,GAAG,EAAEf,cART;IASI,UAAU,EAAEF,UAThB;IAUI,oBAAoB,EAAE0D,OAAO,CAAC3D,QAAD,CAVjC;IAWI,mBAAmB,EAAEJ,mBAXzB;IAYI,qBAAqB,EAAEY,qBAZ3B;IAaI,QAAQ,EAAEmD,OAAO,CAAC9D,UAAD,CAbrB;IAcI,SAAS,EAAEA,UAAU,GAAGqD,SAAH,GAAeU;EAdxC,GAgBK/D,UAAU,gBACP,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE+C;EAAtB,gBACI,oBAAC,MAAD;IACI,QAAQ,EAAEjC,sBADd;IAEI,KAAK,EAAEmC;EAFX,GAIKjD,UAJL,CADJ,CADO,GASP,IAzBR,eA2BI,oBAAC,eAAD;IAAiB,KAAK,EAAEoC;EAAxB,GACKtC,QADL,CA3BJ,CADJ,CADJ;AAmCH;AAAA"}
|
|
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 = 16;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.5,\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 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n /**\n * Opacity for BackdropComponent\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * Border radius for bottom sheet\n */\n borderRadius?: number;\n\n /**\n * BottomSheet children, usually the included sub-components.\n */\n children?: React.ReactNode;\n\n /**\n * Enable dynamic sizing for content size.\n * @default true\n */\n enableDynamicSizing?: boolean;\n\n /**\n * Top element for displaying additional information on the bottom sheet.\n */\n topElement?: React.ReactNode;\n\n /**\n * Snap index. You could also provide -1 to bottom sheet in closed state.\n */\n index: number;\n\n /**\n * Maximum height(normalized value) of dialog\n * ex. 30% => 0.3 / 90% => 0.9\n * @default 0.8\n */\n maxHeightNormalizedRatio?: number;\n\n /**\n * Callback fired when the index is changed.\n * Important! Use memoized value.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n * Important! Use memoized value.\n * Only number type or string type(~% format) can be used.\n * @default []\n */\n snapPoints?: Array<number | string>;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps, ExtendedStyle } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n /**\n * Opacity for BackdropComponent\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * View style to be applied to the background component. (only native)\n */\n backgroundStyle?: ExtendedStyle | ExtendedStyle[];\n\n /**\n * Border radius for bottom sheet\n */\n borderRadius?: number;\n\n /**\n * BottomSheet children, usually the included sub-components.\n */\n children?: React.ReactNode;\n\n /**\n * Enable dynamic sizing for content size.\n * @default true\n */\n enableDynamicSizing?: boolean;\n\n /**\n * Top element for displaying additional information on the bottom sheet.\n */\n topElement?: React.ReactNode;\n\n /**\n * Snap index. You could also provide -1 to bottom sheet in closed state.\n */\n index: number;\n\n /**\n * Maximum height(normalized value) of dialog\n * ex. 30% => 0.3 / 90% => 0.9\n * @default 0.8\n */\n maxHeightNormalizedRatio?: number;\n\n /**\n * Callback fired when the index is changed.\n * Important! Use memoized value.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n * Important! Use memoized value.\n * Only number type or string type(~% format) can be used.\n * @default []\n */\n snapPoints?: Array<number | string>;\n\n /**\n * View style to be applied to the content area.\n */\n style?: ExtendedStyle | ExtendedStyle[];\n}> {}\n"],"mappings":""}
|
|
@@ -21,19 +21,19 @@ const useStyles = function () {
|
|
|
21
21
|
borderTopLeftRadius: theme.shape.radius.xxl,
|
|
22
22
|
borderTopRightRadius: theme.shape.radius.xxl,
|
|
23
23
|
flexGrow: 1,
|
|
24
|
-
minHeight:
|
|
24
|
+
minHeight: 325,
|
|
25
25
|
overflow: 'hidden',
|
|
26
26
|
paddingBottom: theme.spacing(6),
|
|
27
27
|
paddingTop: theme.spacing(5.5)
|
|
28
28
|
},
|
|
29
29
|
topElementLocation: {
|
|
30
30
|
position: 'absolute',
|
|
31
|
-
bottom: 0,
|
|
32
31
|
width: '100%'
|
|
33
32
|
}
|
|
34
33
|
};
|
|
35
34
|
};
|
|
36
35
|
|
|
36
|
+
const TOP_ELEMENT_HIDDEN_OFFSET = 16;
|
|
37
37
|
export default function BottomSheet(props) {
|
|
38
38
|
const {
|
|
39
39
|
backdropOpacity,
|
|
@@ -44,14 +44,16 @@ export default function BottomSheet(props) {
|
|
|
44
44
|
index,
|
|
45
45
|
maxHeightNormalizedRatio = 0.8,
|
|
46
46
|
onChange,
|
|
47
|
-
snapPoints = []
|
|
47
|
+
snapPoints = [],
|
|
48
|
+
style: styleProp
|
|
48
49
|
} = props;
|
|
49
50
|
const styles = useStyles();
|
|
50
51
|
const {
|
|
51
52
|
height: windowHeight
|
|
52
53
|
} = useWindowDimensions();
|
|
53
54
|
const [topElementHeight, setTopElementHeight] = useState(0);
|
|
54
|
-
const
|
|
55
|
+
const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);
|
|
56
|
+
const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;
|
|
55
57
|
|
|
56
58
|
const handleTopElementLayout = event => {
|
|
57
59
|
const {
|
|
@@ -66,6 +68,7 @@ export default function BottomSheet(props) {
|
|
|
66
68
|
}
|
|
67
69
|
};
|
|
68
70
|
|
|
71
|
+
const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');
|
|
69
72
|
const {
|
|
70
73
|
convertedSnapPoints,
|
|
71
74
|
handleLayout,
|
|
@@ -73,18 +76,18 @@ export default function BottomSheet(props) {
|
|
|
73
76
|
} = useDynamicSnapPoints({
|
|
74
77
|
enableDynamicSizing,
|
|
75
78
|
maxDynamicContentSize,
|
|
76
|
-
snapPoints
|
|
79
|
+
snapPoints: filteredSnapPoints
|
|
77
80
|
});
|
|
78
|
-
const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
|
|
81
|
+
const translateY = convertedSnapPoints.length > 0 ? highestSnapPoint - (convertedSnapPoints[index] ?? 0) : 0;
|
|
79
82
|
const contentStyles = css([styles.paper, { ...(borderRadius ? {
|
|
80
83
|
borderTopLeftRadius: borderRadius,
|
|
81
84
|
borderTopRightRadius: borderRadius
|
|
82
85
|
} : {}),
|
|
83
|
-
...(highestSnapPoint !== maxDynamicContentSize ? {
|
|
86
|
+
...(!enableDynamicSizing && highestSnapPoint !== maxDynamicContentSize ? {
|
|
84
87
|
height: highestSnapPoint
|
|
85
88
|
} : {}),
|
|
86
89
|
maxHeight: maxDynamicContentSize
|
|
87
|
-
}]);
|
|
90
|
+
}, styleProp]);
|
|
88
91
|
return /*#__PURE__*/React.createElement(Modal, {
|
|
89
92
|
backdropOpacity: backdropOpacity,
|
|
90
93
|
onClose: handleClose,
|
|
@@ -94,7 +97,9 @@ export default function BottomSheet(props) {
|
|
|
94
97
|
translateY: translateY
|
|
95
98
|
}, topElement ? /*#__PURE__*/React.createElement(Column, {
|
|
96
99
|
onLayout: handleTopElementLayout,
|
|
97
|
-
style: styles.topElementLocation
|
|
100
|
+
style: [styles.topElementLocation, {
|
|
101
|
+
top: -topElementHeight
|
|
102
|
+
}]
|
|
98
103
|
}, topElement) : null, /*#__PURE__*/React.createElement(View, {
|
|
99
104
|
onLayout: handleLayout,
|
|
100
105
|
style: contentStyles
|
|
@@ -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","
|
|
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","filteredSnapPoints","filter","point","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 = 16;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity,\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 filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');\n\n const {\n convertedSnapPoints,\n handleLayout,\n highestSnapPoint,\n } = useDynamicSnapPoints({\n enableDynamicSizing,\n maxDynamicContentSize,\n snapPoints: filteredSnapPoints,\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,4 +1,4 @@
|
|
|
1
|
-
import { useCallback, useMemo,
|
|
1
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
2
2
|
import { useWindowDimensions } from 'react-native';
|
|
3
3
|
import * as R from 'ramda';
|
|
4
4
|
const INITIAL_CONTAINER_HEIGHT = -999;
|
|
@@ -28,7 +28,6 @@ export default function useDynamicSnapPoints(params) {
|
|
|
28
28
|
height: windowHeight
|
|
29
29
|
} = useWindowDimensions();
|
|
30
30
|
const [contentHeight, setContentHeight] = useState(INITIAL_CONTAINER_HEIGHT);
|
|
31
|
-
const hasMeasureRef = useRef(false);
|
|
32
31
|
const convertedSnapPoints = useMemo(() => {
|
|
33
32
|
if (contentHeight === INITIAL_CONTAINER_HEIGHT) {
|
|
34
33
|
return [];
|
|
@@ -46,15 +45,10 @@ export default function useDynamicSnapPoints(params) {
|
|
|
46
45
|
}, [contentHeight, enableDynamicSizing, maxDynamicContentSize, snapPoints, windowHeight]);
|
|
47
46
|
const highestSnapPoint = R.last(convertedSnapPoints) ?? maxDynamicContentSize;
|
|
48
47
|
const handleLayout = useCallback(event => {
|
|
49
|
-
if (hasMeasureRef.current) {
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
hasMeasureRef.current = true;
|
|
54
48
|
const {
|
|
55
49
|
height
|
|
56
50
|
} = event.nativeEvent.layout;
|
|
57
|
-
setContentHeight(height);
|
|
51
|
+
setContentHeight(prev => Math.abs(prev - height) > 1 ? height : prev);
|
|
58
52
|
}, []);
|
|
59
53
|
return {
|
|
60
54
|
convertedSnapPoints,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useMemo","
|
|
1
|
+
{"version":3,"names":["useCallback","useMemo","useState","useWindowDimensions","R","INITIAL_CONTAINER_HEIGHT","convertSnapPoint","snapPoint","windowHeight","maxDynamicContentSize","Math","min","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","round","useDynamicSnapPoints","params","enableDynamicSizing","snapPoints","height","contentHeight","setContentHeight","convertedSnapPoints","map","push","Array","from","Set","sort","a","b","highestSnapPoint","last","handleLayout","event","nativeEvent","layout","prev","abs"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport * as R from 'ramda';\n\nconst INITIAL_CONTAINER_HEIGHT = -999;\n\ninterface UseDynamicSnapPointsParams {\n enableDynamicSizing: boolean;\n maxDynamicContentSize: number;\n snapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n convertedSnapPoints: number[];\n handleLayout: (e: LayoutChangeEvent) => void;\n highestSnapPoint: number;\n}\n\nconst convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {\n if (typeof snapPoint === 'number') {\n return Math.min(maxDynamicContentSize, snapPoint);\n }\n\n const percentageRegex = new RegExp(/^[0-9]+%$/);\n if (percentageRegex.test(snapPoint)) {\n const percentage = parseFloat(snapPoint) / 100;\n return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));\n }\n\n return 0;\n};\n\nexport default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n const {\n enableDynamicSizing,\n maxDynamicContentSize,\n snapPoints,\n } = params;\n\n const { height: windowHeight } = useWindowDimensions();\n\n const [contentHeight, setContentHeight] = useState<number>(INITIAL_CONTAINER_HEIGHT);\n\n const convertedSnapPoints = useMemo(() => {\n if (contentHeight === INITIAL_CONTAINER_HEIGHT) {\n return [];\n }\n\n const convertedSnapPoints = snapPoints.map((snapPoint) => {\n return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);\n });\n\n if (enableDynamicSizing && contentHeight !== 0) {\n convertedSnapPoints.push(\n convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),\n );\n }\n\n return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);\n }, [\n contentHeight,\n enableDynamicSizing,\n maxDynamicContentSize,\n snapPoints,\n windowHeight,\n ]);\n\n const highestSnapPoint = R.last(convertedSnapPoints) ?? maxDynamicContentSize;\n\n const handleLayout = useCallback((event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setContentHeight(prev => (Math.abs(prev - height) > 1 ? height : prev));\n }, []);\n\n return {\n convertedSnapPoints,\n handleLayout,\n highestSnapPoint,\n };\n}\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,OAAtB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAA4BC,mBAA5B,QAAuD,cAAvD;AACA,OAAO,KAAKC,CAAZ,MAAmB,OAAnB;AAEA,MAAMC,wBAAwB,GAAG,CAAC,GAAlC;;AAcA,MAAMC,gBAAgB,GAAG,CAACC,SAAD,EAA6BC,YAA7B,EAAmDC,qBAAnD,KAA6F;EAClH,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOG,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCF,SAAhC,CAAP;EACH;;EAED,MAAMK,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBP,SAArB,CAAJ,EAAqC;IACjC,MAAMQ,UAAU,GAAGC,UAAU,CAACT,SAAD,CAAV,GAAwB,GAA3C;IACA,OAAOU,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBL,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGO,UAA1B,CAAhC,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASI,oBAAT,CAA8BC,MAA9B,EAA+F;EAC1G,MAAM;IACFC,mBADE;IAEFZ,qBAFE;IAGFa;EAHE,IAIFF,MAJJ;EAMA,MAAM;IAAEG,MAAM,EAAEf;EAAV,IAA2BL,mBAAmB,EAApD;EAEA,MAAM,CAACqB,aAAD,EAAgBC,gBAAhB,IAAoCvB,QAAQ,CAASG,wBAAT,CAAlD;EAEA,MAAMqB,mBAAmB,GAAGzB,OAAO,CAAC,MAAM;IACtC,IAAIuB,aAAa,KAAKnB,wBAAtB,EAAgD;MAC5C,OAAO,EAAP;IACH;;IAED,MAAMqB,mBAAmB,GAAGJ,UAAU,CAACK,GAAX,CAAgBpB,SAAD,IAAe;MACtD,OAAOD,gBAAgB,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,qBAA1B,CAAvB;IACH,CAF2B,CAA5B;;IAIA,IAAIY,mBAAmB,IAAIG,aAAa,KAAK,CAA7C,EAAgD;MAC5CE,mBAAmB,CAACE,IAApB,CACItB,gBAAgB,CAACkB,aAAD,EAAgBhB,YAAhB,EAA8BC,qBAA9B,CADpB;IAGH;;IAED,OAAOoB,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQL,mBAAR,CAAX,EAAyCM,IAAzC,CAA8C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA5D,CAAP;EACH,CAhBkC,EAgBhC,CACCV,aADD,EAECH,mBAFD,EAGCZ,qBAHD,EAICa,UAJD,EAKCd,YALD,CAhBgC,CAAnC;EAwBA,MAAM2B,gBAAgB,GAAG/B,CAAC,CAACgC,IAAF,CAAOV,mBAAP,KAA+BjB,qBAAxD;EAEA,MAAM4B,YAAY,GAAGrC,WAAW,CAAEsC,KAAD,IAA8B;IAC3D,MAAM;MAAEf;IAAF,IAAae,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAf,gBAAgB,CAACgB,IAAI,IAAK/B,IAAI,CAACgC,GAAL,CAASD,IAAI,GAAGlB,MAAhB,IAA0B,CAA1B,GAA8BA,MAA9B,GAAuCkB,IAAjD,CAAhB;EACH,CAH+B,EAG7B,EAH6B,CAAhC;EAKA,OAAO;IACHf,mBADG;IAEHW,YAFG;IAGHF;EAHG,CAAP;AAKH"}
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|