@fountain-ui/lab 2.0.0-beta.45 → 2.0.0-beta.46

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\n\nexport interface Dimension {\n    width: number;\n    height: number;\n}\n\nexport default interface ComicViewerProps extends ComponentProps <{\n    /**\n     * Delay Time to call the error handler.\n     * @default 100\n     */\n    debounceMillis?: number;\n\n    /**\n     * How many times handle onError directly when item error occur\n     * @default 3\n     */\n    autoHandleErrorCount?: number;\n\n    /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /**\n     * Dimensions of each Image considering viewport.\n     */\n    intrinsicDimensions: Array<Dimension>;\n\n    /**\n     * Need invisible paddingTop viewer vertically expanded.\n     * @default 0\n     */\n    invisiblePaddingTop?: number;\n\n    /**\n     * Max value of contents image width size.\n     * @default 720\n     */\n    maxContentWidth?: number;\n\n    /**\n     * Width of viewport.\n     */\n    viewportWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n\n    /**\n     * Get contents urls by indexes.\n     */\n    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;\n\n    /**\n     * Handle scroll event.\n     * @param event Scroll event.\n     */\n    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Component for comic viewer footer.\n     */\n    ListFooterComponent?: React.ReactElement;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\nimport { FastScrollOptions } from './FastScrollProps';\n\nexport interface Dimension {\n    width: number;\n    height: number;\n}\n\nexport default interface ComicViewerProps extends ComponentProps <{\n    /**\n     * Delay Time to call the error handler.\n     * @default 100\n     */\n    debounceMillis?: number;\n\n    /**\n     * How many times handle onError directly when item error occur\n     * @default 3\n     */\n    autoHandleErrorCount?: number;\n\n    /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /**\n     * Dimensions of each Image considering viewport.\n     */\n    intrinsicDimensions: Array<Dimension>;\n\n    /**\n     * Need invisible paddingTop viewer vertically expanded.\n     * @default 0\n     */\n    invisiblePaddingTop?: number;\n\n    /**\n     * Max value of contents image width size.\n     * @default 720\n     */\n    maxContentWidth?: number;\n\n    /**\n     * Width of viewport.\n     */\n    viewportWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n\n    /**\n     * Options for fastscroll component.\n     */\n    fastScrollOptions: FastScrollOptions;\n\n    /**\n     * Get contents urls by indexes.\n     */\n    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;\n\n    /**\n     * Handle scroll event.\n     * @param event Scroll event.\n     */\n    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Component for comic viewer footer.\n     */\n    ListFooterComponent?: React.ReactElement;\n}> {}\n"],"mappings":""}

package/build/module/ComicViewer/FastScroll.js

@@ -0,0 +1,141 @@
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+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 styles = StyleSheet.create({
+  indicator: {
+    width: 24,
+    height: 40,
+    backgroundColor: '#767676',
+    flexDirection: 'column',
+    alignItems: 'center',
+    borderRadius: 4
+  },
+  view: {
+    position: 'absolute'
+  }
+});
+const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    absolutePosition,
+    additionalLength = 0,
+    contentLength,
+    movementRange,
+    scrollContentToOffset,
+    visibleDurations = {
+      hideMillis: 200,
+      showMillis: 350
+    }
+  } = props;
+  const lastIndicatorOffset = useSharedValue(0);
+  const indicatorOffset = useSharedValue(lastIndicatorOffset.value);
+  const isIndicatorDragging = useRef(false);
+  const indicatorOpacity = useSharedValue(1);
+  const [visible, setVisible] = useState(true);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: indicatorOffset.value
+    }],
+    opacity: indicatorOpacity.value
+  }));
+  const totalContentLength = contentLength + additionalLength;
+
+  const onContentScroll = event => {
+    if (isIndicatorDragging.current === false) {
+      const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);
+      const offset = percentageToOffset(contentPercentage, movementRange);
+
+      if (offset < 0 || indicatorOffset.value < 0) {
+        lastIndicatorOffset.value = 0;
+        indicatorOffset.value = 0;
+        return;
+      }
+
+      if (offset > movementRange || indicatorOffset.value > movementRange) {
+        lastIndicatorOffset.value = movementRange;
+        indicatorOffset.value = movementRange;
+        return;
+      }
+
+      lastIndicatorOffset.value = offset;
+    } else {
+      setVisible(true);
+    }
+  };
+
+  const getIsIndicatorDragging = () => isIndicatorDragging.current;
+
+  useImperativeHandle(ref, () => ({
+    getIsIndicatorDragging,
+    onContentScroll,
+    setVisible
+  }), []);
+
+  const handleUpdate = () => {
+    const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);
+    const offset = percentageToOffset(contentPercentage, totalContentLength);
+    scrollContentToOffset(offset);
+  };
+
+  const setIsIndicatorDragging = value => isIndicatorDragging.current = value;
+
+  const pan = Gesture.Pan().onBegin(e => {
+    indicatorOffset.value = lastIndicatorOffset.value;
+    runOnJS(setIsIndicatorDragging)(true);
+  }).onUpdate(e => {
+    if (indicatorOffset.value <= 0 && e.translationY < 0) {
+      indicatorOffset.value = 0;
+      return;
+    }
+
+    if (indicatorOffset.value >= movementRange && e.translationY > 0) {
+      indicatorOffset.value = movementRange;
+      return;
+    }
+
+    indicatorOffset.value = lastIndicatorOffset.value + e.translationY;
+    runOnJS(handleUpdate)();
+  }).onFinalize(e => {
+    lastIndicatorOffset.value = indicatorOffset.value;
+    runOnJS(setIsIndicatorDragging)(false);
+  });
+
+  const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, {
+    duration: visibleDurations.hideMillis
+  }));
+
+  const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, {
+    duration: visibleDurations.showMillis
+  }));
+
+  useEffect(() => {
+    if (visible) {
+      indicatorOffset.value = lastIndicatorOffset.value;
+      show();
+    } else {
+      hide();
+    }
+  }, [visible]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      height: movementRange
+    }, styles.view, absolutePosition]
+  }, /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: pan
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [animatedStyle, styles.indicator]
+  }, /*#__PURE__*/React.createElement(ChevronUp, {
+    fill: '#ededed',
+    height: 20,
+    width: 20
+  }), /*#__PURE__*/React.createElement(ChevronDown, {
+    fill: '#ededed',
+    height: 20,
+    width: 20
+  }))));
+});
+export default FastScroll;
+//# sourceMappingURL=FastScroll.js.map

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

@@ -0,0 +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","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: 24,\n        height: 40,\n        backgroundColor: '#767676',\n        flexDirection: 'column',\n        alignItems: 'center',\n        borderRadius: 4,\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 === false) {\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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"}

package/build/module/ComicViewer/FastScrollProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FastScrollProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["FastScrollProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\nimport type { RefObject } from 'react';\n\n/**\n * Position infos with display: 'position'.\n */\nexport type AbsolutePosition = {\n    top: number;\n    bottom: number;\n    right: number;\n    left: number;\n};\n\n/**\n * Durations(millis) for show, hide animation.\n */\nexport type VisibleDurations = {\n    hideMillis: number;\n    showMillis: number;\n}\n\nexport interface FastScrollInstance {\n    /**\n     * Handle content scroll event, not using fast scroll indicator.\n     * @param event Function onScroll event params.\n     */\n    onContentScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Set indicator visible state.\n     */\n    setVisible: React.Dispatch<React.SetStateAction<boolean>>;\n\n    /**\n     * Return true, if pan gesture state is begin to finalize.\n     */\n    getIsIndicatorDragging: () => boolean,\n}\n\nexport interface FastScrollOptions {\n    /**\n     * Ref for React.forwardRef.\n     */\n    ref: RefObject<FastScrollInstance>;\n\n    /**\n     * Range within which the indicator can move.\n     */\n    movementRange: number;\n\n    /**\n     * Scrollbar positions for 'display: position'.\n     */\n    absolutePosition?: Partial<AbsolutePosition>;\n\n    /**\n     * Durations(millis) for show, hide animation.\n     * @default { hide: 200, show: 350 }\n     */\n    visibleDurations?: VisibleDurations;\n\n    /**\n     * Additional height except contentLength.\n     * @default 0\n     */\n    additionalLength?: number;\n}\n\ninterface FastScrollProps extends FastScrollOptions {\n    /**\n     * Total length of scrollable content.\n     */\n    contentLength: number;\n\n    /**\n     * Scroll content to offset appropriate for the indicator location.\n     * @param offset Content offset.\n     */\n    scrollContentToOffset: (offset: number) => void;\n}\n\nexport default FastScrollProps;\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { Dimension, default as ComicViewerProps } from './ComicViewerProps';\nexport type { ViewerItemProps } from './ViewerItem';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB"}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { Dimension, default as ComicViewerProps } from './ComicViewerProps';\nexport type { ViewerItemProps } from './ViewerItem';\nexport type {\n    AbsolutePosition,\n    FastScrollInstance,\n    FastScrollOptions,\n    VisibleDurations,\n} from './FastScrollProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB"}

package/build/module/ComicViewer/util.js

@@ -0,0 +1,15 @@
+export const offsetToPercentage = (offset, total) => {
+  if (offset === 0 || total === 0) {
+    return 0;
+  }
+
+  return offset / total * 100;
+};
+export const percentageToOffset = (percentage, total) => {
+  if (percentage === 0 || total === 0) {
+    return 0;
+  }
+
+  return percentage / 100 * total;
+};
+//# sourceMappingURL=util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["offsetToPercentage","offset","total","percentageToOffset","percentage"],"sources":["util.ts"],"sourcesContent":["export const offsetToPercentage = (offset: number, total: number) => {\n    if (offset === 0 || total === 0) {\n        return 0;\n    }\n\n    return offset / total * 100;\n};\n\nexport const percentageToOffset = (percentage: number, total: number) => {\n    if (percentage === 0 || total === 0) {\n        return 0;\n    }\n\n    return percentage / 100 * total;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,kBAAkB,GAAG,CAACC,MAAD,EAAiBC,KAAjB,KAAmC;EACjE,IAAID,MAAM,KAAK,CAAX,IAAgBC,KAAK,KAAK,CAA9B,EAAiC;IAC7B,OAAO,CAAP;EACH;;EAED,OAAOD,MAAM,GAAGC,KAAT,GAAiB,GAAxB;AACH,CANM;AAQP,OAAO,MAAMC,kBAAkB,GAAG,CAACC,UAAD,EAAqBF,KAArB,KAAuC;EACrE,IAAIE,UAAU,KAAK,CAAf,IAAoBF,KAAK,KAAK,CAAlC,EAAqC;IACjC,OAAO,CAAP;EACH;;EAED,OAAOE,UAAU,GAAG,GAAb,GAAmBF,KAA1B;AACH,CANM"}

package/build/typescript/AnimatedY/AnimatedY.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type AnimatedYProps from './AnimatedYProps';
 export default function AnimatedY(props: AnimatedYProps): JSX.Element;

package/build/typescript/BottomSheet/BottomSheetNative.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type BottomSheetProps from './BottomSheetProps';
 export default function BottomSheet(props: BottomSheetProps): JSX.Element;

package/build/typescript/BottomSheet/BottomSheetWeb.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type BottomSheetProps from './BottomSheetProps';
 export default function BottomSheet(props: BottomSheetProps): JSX.Element;

package/build/typescript/BottomSheet/TransparentBackdrop.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
 export default function TransparentBackdrop(props: BottomSheetBackdropProps): JSX.Element;

package/build/typescript/ComicViewer/ComicViewer.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { default as ComicViewerProps } from './ComicViewerProps';
 export default function ComicViewer(props: ComicViewerProps): JSX.Element;

package/build/typescript/ComicViewer/ComicViewerProps.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
 import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { FastScrollOptions } from './FastScrollProps';
 export interface Dimension {
     width: number;
     height: number;
@@ -55,6 +56,10 @@ export default interface ComicViewerProps extends ComponentProps<{
      * @default 3
      */
     windowSize?: number;
+    /**
+     * Options for fastscroll component.
+     */
+    fastScrollOptions: FastScrollOptions;
     /**
      * Get contents urls by indexes.
      */

package/build/typescript/ComicViewer/FastScroll.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import FastScrollProps from './FastScrollProps';
+declare const FastScroll: React.ForwardRefExoticComponent<Pick<FastScrollProps, "contentLength" | "scrollContentToOffset" | "movementRange" | "absolutePosition" | "visibleDurations" | "additionalLength"> & React.RefAttributes<unknown>>;
+export default FastScroll;

package/build/typescript/ComicViewer/FastScrollProps.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import type { RefObject } from 'react';
+/**
+ * Position infos with display: 'position'.
+ */
+export declare type AbsolutePosition = {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+/**
+ * Durations(millis) for show, hide animation.
+ */
+export declare type VisibleDurations = {
+    hideMillis: number;
+    showMillis: number;
+};
+export interface FastScrollInstance {
+    /**
+     * Handle content scroll event, not using fast scroll indicator.
+     * @param event Function onScroll event params.
+     */
+    onContentScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Set indicator visible state.
+     */
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Return true, if pan gesture state is begin to finalize.
+     */
+    getIsIndicatorDragging: () => boolean;
+}
+export interface FastScrollOptions {
+    /**
+     * Ref for React.forwardRef.
+     */
+    ref: RefObject<FastScrollInstance>;
+    /**
+     * Range within which the indicator can move.
+     */
+    movementRange: number;
+    /**
+     * Scrollbar positions for 'display: position'.
+     */
+    absolutePosition?: Partial<AbsolutePosition>;
+    /**
+     * Durations(millis) for show, hide animation.
+     * @default { hide: 200, show: 350 }
+     */
+    visibleDurations?: VisibleDurations;
+    /**
+     * Additional height except contentLength.
+     * @default 0
+     */
+    additionalLength?: number;
+}
+interface FastScrollProps extends FastScrollOptions {
+    /**
+     * Total length of scrollable content.
+     */
+    contentLength: number;
+    /**
+     * Scroll content to offset appropriate for the indicator location.
+     * @param offset Content offset.
+     */
+    scrollContentToOffset: (offset: number) => void;
+}
+export default FastScrollProps;

package/build/typescript/ComicViewer/ReloadButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@fountain-ui/core';
 interface ReloadButtonProps {
     onPress: IconButtonProps['onPress'];

package/build/typescript/ComicViewer/ViewerItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageProps } from '@fountain-ui/core';
 export interface ViewerItemProps {
     /**

package/build/typescript/ComicViewer/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './ComicViewer';
 export type { Dimension, default as ComicViewerProps } from './ComicViewerProps';
 export type { ViewerItemProps } from './ViewerItem';
+export type { AbsolutePosition, FastScrollInstance, FastScrollOptions, VisibleDurations, } from './FastScrollProps';

package/build/typescript/ComicViewer/util.d.ts

@@ -0,0 +1,2 @@
+export declare const offsetToPercentage: (offset: number, total: number) => number;
+export declare const percentageToOffset: (percentage: number, total: number) => number;

package/build/typescript/DateTimePicker/DateTimePicker.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type DateTimePickerProps from './DateTimePickerProps';
 export default function DateTimePicker(props: DateTimePickerProps): JSX.Element;

package/build/typescript/DateTimePicker/YearPicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface YearPickerProps {
     date: Date;
     locale?: string;

package/build/typescript/FlipCard/FlipCard.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type FlipCardProps from './FlipCardProps';
 export default function FlipCard(props: FlipCardProps): JSX.Element;

package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type StatusBarProviderProps from './StatusBarProviderProps';
 export default function StatusBarProvider(props: StatusBarProviderProps): JSX.Element;

package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerView.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';
 export default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.45",
+  "version": "2.0.0-beta.46",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@fountain-ui/icons": "^2.0.0-beta.9",
+    "@fountain-ui/icons": "^2.0.0-beta.10",
     "@fountain-ui/utils": "^2.0.0-beta.4",
     "react-native-calendars": "1.1267.0"
   },
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "928b060600a7fc8cd8eccd59c573aca76cdcbec6"
+  "gitHead": "b0d9e43744035ca199189733ba172320955879c9"
 }

package/src/ComicViewer/ComicViewer.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FlatList, ListRenderItem, ViewToken } from 'react-native';
+import { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, ViewToken } from 'react-native';
 import * as R from 'ramda';
 import { useDebounce } from '@fountain-ui/core';
 import { default as ComicViewerProps, Dimension } from './ComicViewerProps';
 import ViewerItem from './ViewerItem';
+import FastScroll from './FastScroll';
 
 const appender = (left: number, right: number): [number, number] => [left + right, left + right];
 const getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);
@@ -56,6 +57,7 @@ export default function ComicViewer(props: ComicViewerProps) {
     const {
         debounceMillis = 100,
         autoHandleErrorCount = 3,
+        fastScrollOptions,
         getUrlByIndex,
         initialNumToRender = 1,
         initialScrollPercentage = 0,
@@ -63,12 +65,15 @@ export default function ComicViewer(props: ComicViewerProps) {
         intrinsicDimensions,
         maxContentWidth = MAXIMUM_WIDTH,
         onItemPress,
+        onScroll,
         viewportWidth,
         invisiblePaddingTop = 0,
         windowSize = 3,
         ...otherProps
     } = props;
 
+    const fastScrollRef = fastScrollOptions?.ref;
+
     const flatListRef = useRef<FlatList>(null);
 
     const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);
@@ -210,6 +215,19 @@ export default function ComicViewer(props: ComicViewerProps) {
         loadItemsDebounce();
     });
 
+    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        fastScrollRef?.current?.onContentScroll(event);
+
+        onScroll?.(event);
+    }, [onScroll]);
+
+    const scrollContentToOffset = (offset: number) => {
+        flatListRef.current?.scrollToOffset({
+            offset,
+            animated: false,
+        });
+    };
+
     const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {
         const onError = () => {
             updateImageState((imageState, i) => {
@@ -288,17 +306,26 @@ export default function ComicViewer(props: ComicViewerProps) {
     }, []);
 
     return (
-        <FlatList
-            data={itemStates}
-            getItemLayout={getItemLayout}
-            initialNumToRender={initialNumToRender}
-            keyExtractor={keyExtractor}
-            onViewableItemsChanged={onViewableItemsChanged.current}
-            ref={flatListRef}
-            renderItem={renderItem}
-            viewabilityConfig={viewabilityConfig}
-            windowSize={windowSize}
-            {...otherProps}
-        />
+        <React.Fragment>
+            <FlatList
+                data={itemStates}
+                getItemLayout={getItemLayout}
+                initialNumToRender={initialNumToRender}
+                keyExtractor={keyExtractor}
+                onViewableItemsChanged={onViewableItemsChanged.current}
+                ref={flatListRef}
+                renderItem={renderItem}
+                viewabilityConfig={viewabilityConfig}
+                windowSize={windowSize}
+                onScroll={handleScroll}
+                {...otherProps}
+            />
+
+            <FastScroll
+                {...fastScrollOptions}
+                contentLength={totalHeight}
+                scrollContentToOffset={scrollContentToOffset}
+            />
+        </React.Fragment>
     );
 };

package/src/ComicViewer/ComicViewerProps.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
 import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { FastScrollOptions } from './FastScrollProps';
 
 export interface Dimension {
     width: number;
@@ -67,6 +68,11 @@ export default interface ComicViewerProps extends ComponentProps <{
      */
     windowSize?: number;
 
+    /**
+     * Options for fastscroll component.
+     */
+    fastScrollOptions: FastScrollOptions;
+
     /**
      * Get contents urls by indexes.
      */