@fountain-ui/lab 2.0.0-beta.57 → 2.0.0-beta.58

package/build/commonjs/ComicViewer/FastScroll.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var R = _interopRequireWildcard(require("ramda"));
+
 var _reactNative = require("react-native");
 
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
@@ -23,9 +25,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const INDICATOR_WIDTH = 28;
+
 const styles = _core.StyleSheet.create({
   indicator: {
-    width: 28,
+    width: INDICATOR_WIDTH,
     height: 48,
     backgroundColor: '#767676',
     flexDirection: 'column',
@@ -34,7 +38,8 @@ const styles = _core.StyleSheet.create({
     borderRadius: 16
   },
   view: {
-    position: 'absolute'
+    position: 'absolute',
+    width: 0
   }
 });
 
@@ -61,6 +66,9 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }],
     opacity: indicatorOpacity.value
   }));
+  const position = { ...absolutePosition,
+    right: R.defaultTo(0)(absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.right) + INDICATOR_WIDTH
+  };
   const totalContentLength = contentLength + additionalLength;
 
   const onContentScroll = event => {
@@ -142,7 +150,7 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [{
       height: movementRange
-    }, styles.view, absolutePosition]
+    }, styles.view, position]
   }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
     gesture: pan
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","totalContentLength","onContentScroll","event","current","contentPercentage","offsetToPercentage","nativeEvent","contentOffset","y","offset","percentageToOffset","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 { 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 styles = StyleSheet.create({\n    indicator: {\n        width: 28,\n        height: 48,\n        backgroundColor: '#767676',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: { position: 'absolute' },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const lastIndicatorOffset = useSharedValue(0);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(1);\n    const [visible, setVisible] = useState(true);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }));\n\n    const totalContentLength = contentLength + additionalLength;\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        } 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                absolutePosition,\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","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","right","R","defaultTo","totalContentLength","onContentScroll","event","current","contentPercentage","offsetToPercentage","nativeEvent","contentOffset","y","offset","percentageToOffset","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        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const lastIndicatorOffset = useSharedValue(0);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(1);\n    const [visible, setVisible] = useState(true);\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 totalContentLength = contentLength + additionalLength;\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        } 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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"}

package/build/module/ComicViewer/FastScroll.js

@@ -1,13 +1,15 @@
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import * as R from 'ramda';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
 import { ChevronDown, ChevronUp } from '@fountain-ui/icons';
 import { StyleSheet } from '@fountain-ui/core';
 import { offsetToPercentage, percentageToOffset } from './util';
+const INDICATOR_WIDTH = 28;
 const styles = StyleSheet.create({
   indicator: {
-    width: 28,
+    width: INDICATOR_WIDTH,
     height: 48,
     backgroundColor: '#767676',
     flexDirection: 'column',
@@ -16,7 +18,8 @@ const styles = StyleSheet.create({
     borderRadius: 16
   },
   view: {
-    position: 'absolute'
+    position: 'absolute',
+    width: 0
   }
 });
 const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -42,6 +45,9 @@ const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
     }],
     opacity: indicatorOpacity.value
   }));
+  const position = { ...absolutePosition,
+    right: R.defaultTo(0)(absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.right) + INDICATOR_WIDTH
+  };
   const totalContentLength = contentLength + additionalLength;
 
   const onContentScroll = event => {
@@ -123,7 +129,7 @@ const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(View, {
     style: [{
       height: movementRange
-    }, styles.view, absolutePosition]
+    }, styles.view, position]
   }, /*#__PURE__*/React.createElement(GestureDetector, {
     gesture: pan
   }, /*#__PURE__*/React.createElement(Animated.View, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useImperativeHandle","useRef","useState","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withDelay","withTiming","ChevronDown","ChevronUp","StyleSheet","offsetToPercentage","percentageToOffset","styles","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","totalContentLength","onContentScroll","event","current","contentPercentage","nativeEvent","contentOffset","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 { 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 styles = StyleSheet.create({\n    indicator: {\n        width: 28,\n        height: 48,\n        backgroundColor: '#767676',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: { position: 'absolute' },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const lastIndicatorOffset = useSharedValue(0);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(1);\n    const [visible, setVisible] = useState(true);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }));\n\n    const totalContentLength = contentLength + additionalLength;\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        } 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                absolutePosition,\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":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,mBAA3B,EAAgDC,MAAhD,EAAwDC,QAAxD,QAAwE,OAAxE;AACA,SAAkDC,IAAlD,QAA8D,cAA9D;AACA,SAASC,OAAT,EAAkBC,eAAlB,QAAyC,8BAAzC;AACA,OAAOC,QAAP,IAAmBC,OAAnB,EAA4BC,gBAA5B,EAA8CC,cAA9C,EAA8DC,SAA9D,EAAyEC,UAAzE,QAA2F,yBAA3F;AACA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,oBAAvC;AACA,SAASC,UAAT,QAA2B,mBAA3B;AAEA,SAASC,kBAAT,EAA6BC,kBAA7B,QAAuD,QAAvD;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,KAAK,EAAE,EADA;IAEPC,MAAM,EAAE,EAFD;IAGPC,eAAe,EAAE,SAHV;IAIPC,aAAa,EAAE,QAJR;IAKPC,UAAU,EAAE,QALL;IAMPC,cAAc,EAAE,QANT;IAOPC,YAAY,EAAE;EAPP,CADkB;EAU7BC,IAAI,EAAE;IAAEC,QAAQ,EAAE;EAAZ;AAVuB,CAAlB,CAAf;AAaA,MAAMC,UAAU,gBAAG/B,KAAK,CAACgC,UAAN,CAAiB,CAACC,KAAD,EAAyBC,GAAzB,KAAiC;EACjE,MAAM;IACFC,gBADE;IAEFC,gBAAgB,GAAG,CAFjB;IAGFC,aAHE;IAIFC,aAJE;IAKFC,qBALE;IAMFC,gBAAgB,GAAG;MAAEC,UAAU,EAAE,GAAd;MAAmBC,UAAU,EAAE;IAA/B;EANjB,IAOFT,KAPJ;EASA,MAAMU,mBAAmB,GAAGhC,cAAc,CAAC,CAAD,CAA1C;EACA,MAAMiC,eAAe,GAAGjC,cAAc,CAACgC,mBAAmB,CAACE,KAArB,CAAtC;EAEA,MAAMC,mBAAmB,GAAG3C,MAAM,CAAC,KAAD,CAAlC;EAEA,MAAM4C,gBAAgB,GAAGpC,cAAc,CAAC,CAAD,CAAvC;EACA,MAAM,CAACqC,OAAD,EAAUC,UAAV,IAAwB7C,QAAQ,CAAC,IAAD,CAAtC;EAEA,MAAM8C,aAAa,GAAGxC,gBAAgB,CAAC,OAAO;IAC1CyC,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAER,eAAe,CAACC;IAA9B,CAAD,CAD+B;IAE1CQ,OAAO,EAAEN,gBAAgB,CAACF;EAFgB,CAAP,CAAD,CAAtC;EAKA,MAAMS,kBAAkB,GAAGjB,aAAa,GAAGD,gBAA3C;;EAEA,MAAMmB,eAAe,GAAIC,KAAD,IAAoD;IACxE,IAAI,CAACV,mBAAmB,CAACW,OAAzB,EAAkC;MAC9B,MAAMC,iBAAiB,GAAGzC,kBAAkB,CAACuC,KAAK,CAACG,WAAN,CAAkBC,aAAlB,CAAgCC,CAAjC,EAAoCP,kBAApC,CAA5C;MACA,MAAMQ,MAAM,GAAG5C,kBAAkB,CAACwC,iBAAD,EAAoBpB,aAApB,CAAjC;;MAEA,IAAIwB,MAAM,GAAG,CAAT,IAAclB,eAAe,CAACC,KAAhB,GAAwB,CAA1C,EAA6C;QACzCF,mBAAmB,CAACE,KAApB,GAA4B,CAA5B;QACAD,eAAe,CAACC,KAAhB,GAAwB,CAAxB;QACA;MACH;;MAED,IAAIiB,MAAM,GAAGxB,aAAT,IAA0BM,eAAe,CAACC,KAAhB,GAAwBP,aAAtD,EAAqE;QACjEK,mBAAmB,CAACE,KAApB,GAA4BP,aAA5B;QACAM,eAAe,CAACC,KAAhB,GAAwBP,aAAxB;QACA;MACH;;MAEDK,mBAAmB,CAACE,KAApB,GAA4BiB,MAA5B;IACH,CAjBD,MAiBO;MACHb,UAAU,CAAC,IAAD,CAAV;IACH;EACJ,CArBD;;EAuBA,MAAMc,sBAAsB,GAAG,MAAMjB,mBAAmB,CAACW,OAAzD;;EAEAvD,mBAAmB,CACfgC,GADe,EAEf,OAAO;IACH6B,sBADG;IAEHR,eAFG;IAGHN;EAHG,CAAP,CAFe,EAOf,EAPe,CAAnB;;EAUA,MAAMe,YAAY,GAAG,MAAM;IACvB,MAAMN,iBAAiB,GAAGzC,kBAAkB,CAAC2B,eAAe,CAACC,KAAjB,EAAwBP,aAAxB,CAA5C;IACA,MAAMwB,MAAM,GAAG5C,kBAAkB,CAACwC,iBAAD,EAAoBJ,kBAApB,CAAjC;IAEAf,qBAAqB,CAACuB,MAAD,CAArB;EACH,CALD;;EAOA,MAAMG,sBAAsB,GAAIpB,KAAD,IAAoBC,mBAAmB,CAACW,OAApB,GAA8BZ,KAAjF;;EAEA,MAAMqB,GAAG,GAAG5D,OAAO,CAAC6D,GAAR,GACPC,OADO,CACEC,CAAD,IAAO;IACZzB,eAAe,CAACC,KAAhB,GAAwBF,mBAAmB,CAACE,KAA5C;IACApC,OAAO,CAACwD,sBAAD,CAAP,CAAgC,IAAhC;EACH,CAJO,EAKPK,QALO,CAKGD,CAAD,IAAO;IACb,IAAIzB,eAAe,CAACC,KAAhB,IAAyB,CAAzB,IAA8BwB,CAAC,CAACE,YAAF,GAAiB,CAAnD,EAAsD;MAClD3B,eAAe,CAACC,KAAhB,GAAwB,CAAxB;MACA;IACH;;IAED,IAAID,eAAe,CAACC,KAAhB,IAAyBP,aAAzB,IAA0C+B,CAAC,CAACE,YAAF,GAAiB,CAA/D,EAAkE;MAC9D3B,eAAe,CAACC,KAAhB,GAAwBP,aAAxB;MACA;IACH;;IAEDM,eAAe,CAACC,KAAhB,GAAwBF,mBAAmB,CAACE,KAApB,GAA4BwB,CAAC,CAACE,YAAtD;IAEA9D,OAAO,CAACuD,YAAD,CAAP;EACH,CAnBO,EAoBPQ,UApBO,CAoBKH,CAAD,IAAO;IACf1B,mBAAmB,CAACE,KAApB,GAA4BD,eAAe,CAACC,KAA5C;IACApC,OAAO,CAACwD,sBAAD,CAAP,CAAgC,KAAhC;EACH,CAvBO,CAAZ;;EAyBA,MAAMQ,IAAI,GAAG,MAAM1B,gBAAgB,CAACF,KAAjB,GAAyBjC,SAAS,CAAC,CAAD,EAAIC,UAAU,CAAC,CAAD,EAAI;IAAE6D,QAAQ,EAAElC,gBAAgB,CAACC;EAA7B,CAAJ,CAAd,CAArD;;EAEA,MAAMkC,IAAI,GAAG,MAAM5B,gBAAgB,CAACF,KAAjB,GAAyBjC,SAAS,CAAC,CAAD,EAAIC,UAAU,CAAC,CAAD,EAAI;IAAE6D,QAAQ,EAAElC,gBAAgB,CAACE;EAA7B,CAAJ,CAAd,CAArD;;EAEAzC,SAAS,CAAC,MAAM;IACZ,IAAI+C,OAAJ,EAAa;MACTJ,eAAe,CAACC,KAAhB,GAAwBF,mBAAmB,CAACE,KAA5C;MACA8B,IAAI;IACP,CAHD,MAGO;MACHF,IAAI;IACP;EACJ,CAPQ,EAON,CAACzB,OAAD,CAPM,CAAT;EASA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAE,CACH;MAAEzB,MAAM,EAAEe;IAAV,CADG,EAEHnB,MAAM,CAACU,IAFJ,EAGHM,gBAHG;EADX,gBAOI,oBAAC,eAAD;IAAiB,OAAO,EAAE+B;EAA1B,gBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAClBhB,aADkB,EAElB/B,MAAM,CAACE,SAFW;EAAtB,gBAII,oBAAC,SAAD;IACI,IAAI,EAAE,SADV;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAJJ,eASI,oBAAC,WAAD;IACI,IAAI,EAAE,SADV;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EATJ,CADJ,CAPJ,CADJ;AA2BH,CAtIkB,CAAnB;AAwIA,eAAeU,UAAf"}
+{"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","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","right","defaultTo","totalContentLength","onContentScroll","event","current","contentPercentage","nativeEvent","contentOffset","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        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const lastIndicatorOffset = useSharedValue(0);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(1);\n    const [visible, setVisible] = useState(true);\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 totalContentLength = contentLength + additionalLength;\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        } 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.57",
+  "version": "2.0.0-beta.58",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8976c712365cbe8117e1ac9d024188f2c75c1f23"
+  "gitHead": "3e292aa0995a8c458db9f6aa700e2a48cc3bf2c3"
 }

package/src/ComicViewer/FastScroll.tsx

@@ -1,4 +1,5 @@
 import React, { 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';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
@@ -7,9 +8,11 @@ import { StyleSheet } from '@fountain-ui/core';
 import FastScrollProps from './FastScrollProps';
 import { offsetToPercentage, percentageToOffset } from './util';
 
+const INDICATOR_WIDTH = 28;
+
 const styles = StyleSheet.create({
     indicator: {
-        width: 28,
+        width: INDICATOR_WIDTH,
         height: 48,
         backgroundColor: '#767676',
         flexDirection: 'column',
@@ -17,7 +20,10 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         borderRadius: 16,
     },
-    view: { position: 'absolute' },
+    view: {
+        position: 'absolute',
+        width: 0,
+    },
 });
 
 const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
@@ -43,6 +49,11 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
         opacity: indicatorOpacity.value,
     }));
 
+    const position = {
+        ...absolutePosition,
+        right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,
+    };
+
     const totalContentLength = contentLength + additionalLength;
 
     const onContentScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -132,7 +143,7 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
             style={[
                 { height: movementRange },
                 styles.view,
-                absolutePosition,
+                position,
             ]}
         >
             <GestureDetector gesture={pan}>