@fountain-ui/lab 2.0.0-beta.67 → 2.0.0-beta.68

package/build/commonjs/ComicViewer/FastScroll.js

@@ -74,8 +74,7 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const position = { ...absolutePosition,
     right: R.defaultTo(0)(absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.right) + INDICATOR_WIDTH
   };
-
-  const onContentScroll = event => {
+  const onContentScroll = (0, _react.useCallback)(event => {
     if (!isIndicatorDragging.current) {
       const contentPercentage = (0, _util.offsetToPercentage)(event.nativeEvent.contentOffset.y, totalContentLength);
       const offset = (0, _util.percentageToOffset)(contentPercentage, movementRange);
@@ -97,7 +96,7 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     } else {
       setVisible(true);
     }
-  };
+  }, [totalContentLength, movementRange]);
 
   const getIsIndicatorDragging = () => isIndicatorDragging.current;
 
@@ -105,7 +104,7 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     getIsIndicatorDragging,
     onContentScroll,
     setVisible
-  }), []);
+  }), [onContentScroll]);
 
   const handleUpdate = () => {
     const contentPercentage = (0, _util.offsetToPercentage)(indicatorOffset.value, movementRange);

package/build/commonjs/ComicViewer/FastScroll.js.map

@@ -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","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, { 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 = (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    };\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [],\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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"}
+{"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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"}

package/build/module/ComicViewer/FastScroll.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import * as R from 'ramda';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -53,8 +53,7 @@ const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
   const position = { ...absolutePosition,
     right: R.defaultTo(0)(absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.right) + INDICATOR_WIDTH
   };
-
-  const onContentScroll = event => {
+  const onContentScroll = useCallback(event => {
     if (!isIndicatorDragging.current) {
       const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);
       const offset = percentageToOffset(contentPercentage, movementRange);
@@ -76,7 +75,7 @@ const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
     } else {
       setVisible(true);
     }
-  };
+  }, [totalContentLength, movementRange]);
 
   const getIsIndicatorDragging = () => isIndicatorDragging.current;
 
@@ -84,7 +83,7 @@ const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
     getIsIndicatorDragging,
     onContentScroll,
     setVisible
-  }), []);
+  }), [onContentScroll]);
 
   const handleUpdate = () => {
     const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);

package/build/module/ComicViewer/FastScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useImperativeHandle","useRef","useState","R","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withDelay","withTiming","ChevronDown","ChevronUp","StyleSheet","offsetToPercentage","percentageToOffset","INDICATOR_WIDTH","styles","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","initialLastIndicatorOffset","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","right","defaultTo","onContentScroll","event","current","nativeEvent","y","offset","getIsIndicatorDragging","handleUpdate","setIsIndicatorDragging","pan","Pan","onBegin","e","onUpdate","translationY","onFinalize","hide","duration","show"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { 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 = (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    };\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [],\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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"}
+{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","R","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withDelay","withTiming","ChevronDown","ChevronUp","StyleSheet","offsetToPercentage","percentageToOffset","INDICATOR_WIDTH","styles","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","initialLastIndicatorOffset","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","right","defaultTo","onContentScroll","event","current","nativeEvent","y","offset","getIsIndicatorDragging","handleUpdate","setIsIndicatorDragging","pan","Pan","onBegin","e","onUpdate","translationY","onFinalize","hide","duration","show"],"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.67",
+  "version": "2.0.0-beta.68",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "95bf275cefa1434261e833dfa0bbc4dc1c325e30"
+  "gitHead": "4920ef572df215338c7050ceff96d12afd65fe8c"
 }

package/src/ComicViewer/FastScroll.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import * as R from 'ramda';
 import { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -39,7 +39,7 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
 
     const totalContentLength = contentLength + additionalLength;
 
-    const contentOffset =  Math.floor((initialScrollPercentage / 100) * contentLength);
+    const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);
     const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);
     const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);
 
@@ -61,7 +61,7 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
         right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,
     };
 
-    const onContentScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
         if (!isIndicatorDragging.current) {
             const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);
             const offset = percentageToOffset(contentPercentage, movementRange);
@@ -83,7 +83,7 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
         } else {
             setVisible(true);
         }
-    };
+    }, [totalContentLength, movementRange]);
 
     const getIsIndicatorDragging = () => isIndicatorDragging.current;
 
@@ -94,7 +94,7 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
             onContentScroll,
             setVisible,
         }),
-        [],
+        [onContentScroll],
     );
 
     const handleUpdate = () => {