@fountain-ui/lab 2.0.0-beta.52 → 2.0.0-beta.54

package/build/commonjs/ComicViewer/ComicViewer.js

@@ -53,7 +53,6 @@ const mapImageStateToItemState = (index, imageState, autoHandleErrorCount) => {
 
 const mapIndexed = R.addIndex(R.map);
 const MAXIMUM_WIDTH = 720;
-const NUMBER_OF_ADJACENT_ITEM = 5;
 
 function ComicViewer(props) {
   const {
@@ -76,7 +75,6 @@ function ComicViewer(props) {
   } = props;
   const fastScrollRef = fastScrollOptions === null || fastScrollOptions === void 0 ? void 0 : fastScrollOptions.ref;
   const flatListRef = (0, _react.useRef)(null);
-  const maybeLoadableItemsIndexRange = (0, _react.useRef)([-1, 0]);
   const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
   const initialImageStates = (0, _react.useMemo)(() => R.map(createInitialImageState, intrinsicImages), []);
   const imageStatesRef = (0, _react.useRef)(initialImageStates);
@@ -131,13 +129,12 @@ function ComicViewer(props) {
     });
   };
 
-  const updateItems = indexes => {
+  const updateTryRenderingMillis = () => {
     const tryRenderingMillis = new Date().getTime();
     updateImageState((imageState, i) => {
       const urlState = imageState.urlState;
-      const shouldRerender = R.includes(i, R.defaultTo([], indexes));
 
-      if (shouldRerender && (urlState === null || urlState === void 0 ? void 0 : urlState.validity) !== 'valid') {
+      if ((urlState === null || urlState === void 0 ? void 0 : urlState.validity) === 'invalid') {
         return { ...imageState,
           tryRenderingMillis
         };
@@ -147,30 +144,11 @@ function ComicViewer(props) {
     });
   };
 
-  const renderMaybeLoadableItems = () => {
-    const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
-    const affectedIndexes = R.range(startIndex, endIndex);
-    updateItems(affectedIndexes);
-  };
-
   const onViewableItemsChanged = (0, _react.useRef)(_ref => {
-    var _R$head, _R$last;
-
     let {
       viewableItems
     } = _ref;
-    const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);
-    const firstViewableIndex = (_R$head = R.head(orderedViewableItems)) === null || _R$head === void 0 ? void 0 : _R$head.index;
-    const lastViewableItemIndex = (_R$last = R.last(orderedViewableItems)) === null || _R$last === void 0 ? void 0 : _R$last.index;
-
-    if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {
-      return;
-    }
-
-    const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);
-    const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);
-    maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
-    renderMaybeLoadableItems();
+    updateTryRenderingMillis();
   });
   const handleScroll = (0, _react.useCallback)(event => {
     var _fastScrollRef$curren;
@@ -217,16 +195,12 @@ function ComicViewer(props) {
         return;
       }
 
-      const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
-
-      if (index >= startIndex || index < endIndex) {
-        renderMaybeLoadableItems();
-      }
+      updateTryRenderingMillis();
     };
 
     const handleReloadPress = () => {
       onReloadPress && onReloadPress();
-      updateItems([index]);
+      updateTryRenderingMillis();
     };
 
     const onLoad = () => {
@@ -259,14 +233,33 @@ function ComicViewer(props) {
     });
   }, [onItemPress, renderedDimensions]);
   (0, _react.useEffect)(() => {
-    const offset = Math.floor(initialScrollPercentage / 100 * totalHeight);
+    const scroll = () => {
+      const offset = Math.floor(initialScrollPercentage / 100 * totalHeight);
+
+      if (flatListRef.current) {
+        flatListRef.current.scrollToOffset({
+          offset,
+          animated: false
+        });
+      }
+    };
 
-    if (flatListRef.current) {
-      flatListRef.current.scrollToOffset({
-        offset,
-        animated: false
-      });
+    let timeoutId = undefined;
+    /**
+     * @FIXME
+     * scrollToOffset has issue(no effect) in useEffect hook on iOS.
+     * ref: https://github.com/facebook/react-native/issues/35575
+     */
+
+    if (_reactNative.Platform.OS === 'ios') {
+      timeoutId = setTimeout(scroll, 0);
+    } else {
+      scroll();
     }
+
+    return () => {
+      timeoutId && clearTimeout(timeoutId);
+    };
   }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({
     data: itemStates,

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

@@ -1 +1 @@
-{"version":3,"names":["appender","left","right","getHeightAccum","heights","R","mapAccum","keyExtractor","item","String","index","createInitialImageState","image","totalErrorCount","dimension","tryRenderingMillis","urlState","url","validity","mapImageStateToItemState","imageState","autoHandleErrorCount","imageKey","reloadButtonVisible","mapIndexed","addIndex","map","MAXIMUM_WIDTH","NUMBER_OF_ADJACENT_ITEM","ComicViewer","props","debounceMillis","fastScrollOptions","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","fastScrollRef","ref","flatListRef","useRef","maybeLoadableItemsIndexRange","actualImageWidth","Math","min","initialImageStates","useMemo","imageStatesRef","mapImageStatesToItemStates","imageStates","itemStates","setItemStates","useState","current","renderedDimensions","intrinsicImage","height","width","isNaN","layoutFromDimensions","useCallback","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","updateItems","indexes","Date","getTime","i","shouldRerender","includes","defaultTo","renderMaybeLoadableItems","startIndex","endIndex","affectedIndexes","range","onViewableItemsChanged","viewableItems","orderedViewableItems","sort","a","b","firstViewableIndex","head","lastViewableItemIndex","last","isNil","max","handleScroll","event","onContentScroll","scrollContentToOffset","scrollToOffset","animated","renderItem","handleError","handleReloadPress","onLoad","undefined","useEffect","floor"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { default as ComicViewerProps, Dimension, IntrinsicImage } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\nimport FastScroll from './FastScroll';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n    url: string;\n    validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n    urlState: UrlState;\n    totalErrorCount: number;\n    dimension: Dimension;\n    tryRenderingMillis: number;\n}\n\ninterface ItemState {\n    index: number;\n    url?: string;\n    imageKey: string;\n    reloadButtonVisible: boolean;\n    dimension: Dimension;\n}\n\nconst createInitialImageState = (image: IntrinsicImage): ImageState => ({\n    totalErrorCount: 0,\n    dimension: image.dimension,\n    tryRenderingMillis: 0,\n    urlState: {\n        url: image.url,\n        validity: 'unknown',\n    },\n});\n\nconst mapImageStateToItemState = (\n    index: number,\n    imageState: ImageState,\n    autoHandleErrorCount: number,\n): ItemState => ({\n    index,\n    url: imageState.urlState?.url,\n    imageKey: `${imageState.tryRenderingMillis}-${index}`,\n    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n    dimension: imageState.dimension,\n});\n\nconst mapIndexed = R.addIndex<IntrinsicImage>(R.map);\n\nconst MAXIMUM_WIDTH = 720;\n\nconst NUMBER_OF_ADJACENT_ITEM = 5;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n    const {\n        debounceMillis = 100,\n        autoHandleErrorCount = 3,\n        fastScrollOptions,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages,\n        maxContentWidth = MAXIMUM_WIDTH,\n        onItemPress,\n        onScroll,\n        onError,\n        onReloadPress,\n        viewportWidth,\n        invisiblePaddingTop = 0,\n        windowSize = 3,\n        ...otherProps\n    } = props;\n\n    const fastScrollRef = fastScrollOptions?.ref;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);\n\n    const actualImageWidth = Math.min(viewportWidth, maxContentWidth);\n\n    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicImages), []);\n\n    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n        return imageStates.map((image, index) => mapImageStateToItemState(\n            index, image, autoHandleErrorCount,\n        ));\n    };\n\n    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n        return mapImageStatesToItemStates(imageStatesRef.current);\n    });\n\n    const renderedDimensions = useMemo<Array<Dimension>>(() => {\n        return mapIndexed((intrinsicImage, index) => {\n            const height = (intrinsicImage.dimension.height * actualImageWidth) / intrinsicImage.dimension.width + (index === 0 ? invisiblePaddingTop : 0);\n\n            return {\n                width: actualImageWidth,\n                height: isNaN(height) ? 0 : height,\n            };\n        }, intrinsicImages);\n    }, [actualImageWidth]);\n\n    const layoutFromDimensions = useCallback(() => {\n        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n        const itemOffsets = R.prepend(0, heightAccum);\n\n        const getItemLayout = (data: any, index: number) => ({\n            index,\n            length: itemHeights[index],\n            offset: itemOffsets[index],\n        });\n\n        return {\n            totalHeight,\n            getItemLayout,\n        };\n    }, [renderedDimensions]);\n\n    const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n        const prevImageStates = imageStatesRef.current;\n        const newImageStates = prevImageStates.map(updateFunction);\n\n        imageStatesRef.current = newImageStates;\n\n        setItemStates(prevItemStates => {\n            const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n        });\n    };\n\n    const updateItems = (indexes: number[]) => {\n        const tryRenderingMillis = new Date().getTime();\n\n        updateImageState((imageState, i) => {\n            const urlState = imageState.urlState;\n            const shouldRerender = R.includes(i, R.defaultTo([], indexes));\n\n            if (shouldRerender && urlState?.validity !== 'valid') {\n                return {\n                    ...imageState,\n                    tryRenderingMillis,\n                };\n            }\n\n            return imageState;\n        });\n    };\n\n    const renderMaybeLoadableItems = () => {\n        const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n        const affectedIndexes = R.range(startIndex, endIndex);\n\n        updateItems(affectedIndexes);\n    };\n\n    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n        const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);\n\n        const firstViewableIndex = R.head(orderedViewableItems)?.index;\n        const lastViewableItemIndex = R.last(orderedViewableItems)?.index;\n\n        if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {\n            return;\n        }\n\n        const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);\n        const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);\n\n        maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];\n\n        renderMaybeLoadableItems();\n    });\n\n    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        fastScrollRef?.current?.onContentScroll(event);\n\n        onScroll?.(event);\n    }, [onScroll]);\n\n    const scrollContentToOffset = (offset: number) => {\n        flatListRef.current?.scrollToOffset({\n            offset,\n            animated: false,\n        });\n    };\n\n    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n        const handleError = () => {\n            onError && onError();\n\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index) {\n                    return {\n                        ...imageState,\n                        totalErrorCount: imageState.totalErrorCount + 1,\n                        urlState: {\n                            ...urlState,\n                            validity: 'invalid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n\n            if (item.reloadButtonVisible) {\n                return;\n            }\n\n            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n            if (index >= startIndex || index < endIndex) {\n                renderMaybeLoadableItems();\n            }\n        };\n\n        const handleReloadPress = () => {\n            onReloadPress && onReloadPress();\n\n            updateItems([index]);\n        };\n\n        const onLoad = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            ...urlState,\n                            validity: 'valid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        };\n\n        return (\n            <ViewerItem\n                onError={handleError}\n                onLoad={onLoad}\n                onPress={onItemPress}\n                onReloadPress={handleReloadPress}\n                url={item.url}\n                imageKey={item.imageKey}\n                invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}\n                width={renderedDimensions[index]?.width ?? 0}\n                height={renderedDimensions[index]?.height ?? 0}\n                reloadButtonVisible={item.reloadButtonVisible}\n            />\n        );\n    }, [onItemPress, renderedDimensions]);\n\n    useEffect(() => {\n        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n        if (flatListRef.current) {\n            flatListRef.current.scrollToOffset({ offset, animated: false });\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <FlatList\n                data={itemStates}\n                getItemLayout={getItemLayout}\n                initialNumToRender={initialNumToRender}\n                keyExtractor={keyExtractor}\n                onViewableItemsChanged={onViewableItemsChanged.current}\n                ref={flatListRef}\n                renderItem={renderItem}\n                viewabilityConfig={viewabilityConfig}\n                windowSize={windowSize}\n                onScroll={handleScroll}\n                {...otherProps}\n            />\n\n            <FastScroll\n                {...fastScrollOptions}\n                contentLength={totalHeight}\n                scrollContentToOffset={scrollContentToOffset}\n            />\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,IAAD,EAAeC,KAAf,KAAmD,CAACD,IAAI,GAAGC,KAAR,EAAeD,IAAI,GAAGC,KAAtB,CAApE;;AACA,MAAMC,cAAc,GAAIC,OAAD,IAA2CC,CAAC,CAACC,QAAF,CAAWN,QAAX,EAAqB,CAArB,EAAwBI,OAAxB,CAAlE;;AAEA,MAAMG,YAAY,GAASC,IAAN,IAA0BC,MAAM,CAACD,IAAI,CAACE,KAAN,CAArD;;AAsBA,MAAMC,uBAAuB,GAAIC,KAAD,KAAwC;EACpEC,eAAe,EAAE,CADmD;EAEpEC,SAAS,EAAEF,KAAK,CAACE,SAFmD;EAGpEC,kBAAkB,EAAE,CAHgD;EAIpEC,QAAQ,EAAE;IACNC,GAAG,EAAEL,KAAK,CAACK,GADL;IAENC,QAAQ,EAAE;EAFJ;AAJ0D,CAAxC,CAAhC;;AAUA,MAAMC,wBAAwB,GAAG,CAC7BT,KAD6B,EAE7BU,UAF6B,EAG7BC,oBAH6B;EAAA;;EAAA,OAIhB;IACbX,KADa;IAEbO,GAAG,0BAAEG,UAAU,CAACJ,QAAb,yDAAE,qBAAqBC,GAFb;IAGbK,QAAQ,EAAG,GAAEF,UAAU,CAACL,kBAAmB,IAAGL,KAAM,EAHvC;IAIba,mBAAmB,EAAG,0BAAAH,UAAU,CAACJ,QAAX,gFAAqBE,QAArB,MAAkC,OAAnC,IAA+CE,UAAU,CAACP,eAAX,IAA8BQ,oBAJrF;IAKbP,SAAS,EAAEM,UAAU,CAACN;EALT,CAJgB;AAAA,CAAjC;;AAYA,MAAMU,UAAU,GAAGnB,CAAC,CAACoB,QAAF,CAA2BpB,CAAC,CAACqB,GAA7B,CAAnB;AAEA,MAAMC,aAAa,GAAG,GAAtB;AAEA,MAAMC,uBAAuB,GAAG,CAAhC;;AAEe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,cAAc,GAAG,GADf;IAEFV,oBAAoB,GAAG,CAFrB;IAGFW,iBAHE;IAIFC,kBAAkB,GAAG,CAJnB;IAKFC,uBAAuB,GAAG,CALxB;IAMFC,2BAA2B,GAAG,CAN5B;IAOFC,eAPE;IAQFC,eAAe,GAAGV,aARhB;IASFW,WATE;IAUFC,QAVE;IAWFC,OAXE;IAYFC,aAZE;IAaFC,aAbE;IAcFC,mBAAmB,GAAG,CAdpB;IAeFC,UAAU,GAAG,CAfX;IAgBF,GAAGC;EAhBD,IAiBFf,KAjBJ;EAmBA,MAAMgB,aAAa,GAAGd,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEe,GAAzC;EAEA,MAAMC,WAAW,GAAG,IAAAC,aAAA,EAAiB,IAAjB,CAApB;EAEA,MAAMC,4BAA4B,GAAG,IAAAD,aAAA,EAAyB,CAAC,CAAC,CAAF,EAAK,CAAL,CAAzB,CAArC;EAEA,MAAME,gBAAgB,GAAGC,IAAI,CAACC,GAAL,CAASX,aAAT,EAAwBL,eAAxB,CAAzB;EAEA,MAAMiB,kBAAkB,GAAG,IAAAC,cAAA,EAA2B,MAAMlD,CAAC,CAACqB,GAAF,CAAMf,uBAAN,EAA+ByB,eAA/B,CAAjC,EAAkF,EAAlF,CAA3B;EAEA,MAAMoB,cAAc,GAAG,IAAAP,aAAA,EAA0BK,kBAA1B,CAAvB;;EAEA,MAAMG,0BAA0B,GAAIC,WAAD,IAAsD;IACrF,OAAOA,WAAW,CAAChC,GAAZ,CAAgB,CAACd,KAAD,EAAQF,KAAR,KAAkBS,wBAAwB,CAC7DT,KAD6D,EACtDE,KADsD,EAC/CS,oBAD+C,CAA1D,CAAP;EAGH,CAJD;;EAMA,MAAM,CAACsC,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAA2B,MAAM;IACjE,OAAOJ,0BAA0B,CAACD,cAAc,CAACM,OAAhB,CAAjC;EACH,CAFmC,CAApC;EAIA,MAAMC,kBAAkB,GAAG,IAAAR,cAAA,EAA0B,MAAM;IACvD,OAAO/B,UAAU,CAAC,CAACwC,cAAD,EAAiBtD,KAAjB,KAA2B;MACzC,MAAMuD,MAAM,GAAID,cAAc,CAAClD,SAAf,CAAyBmD,MAAzB,GAAkCd,gBAAnC,GAAuDa,cAAc,CAAClD,SAAf,CAAyBoD,KAAhF,IAAyFxD,KAAK,KAAK,CAAV,GAAciC,mBAAd,GAAoC,CAA7H,CAAf;MAEA,OAAO;QACHuB,KAAK,EAAEf,gBADJ;QAEHc,MAAM,EAAEE,KAAK,CAACF,MAAD,CAAL,GAAgB,CAAhB,GAAoBA;MAFzB,CAAP;IAIH,CAPgB,EAOd7B,eAPc,CAAjB;EAQH,CAT0B,EASxB,CAACe,gBAAD,CATwB,CAA3B;EAWA,MAAMiB,oBAAoB,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC3C,MAAMC,WAAW,GAAGjE,CAAC,CAACqB,GAAF,CAAMZ,SAAS,IAAIA,SAAS,CAACmD,MAA7B,EAAqCF,kBAArC,CAApB;IACA,MAAM,CAACQ,WAAD,EAAcC,WAAd,IAA6BrE,cAAc,CAACmE,WAAD,CAAjD;IACA,MAAMG,WAAW,GAAGpE,CAAC,CAACqE,OAAF,CAAU,CAAV,EAAaF,WAAb,CAApB;;IAEA,MAAMG,aAAa,GAAG,CAACC,IAAD,EAAYlE,KAAZ,MAA+B;MACjDA,KADiD;MAEjDmE,MAAM,EAAEP,WAAW,CAAC5D,KAAD,CAF8B;MAGjDoE,MAAM,EAAEL,WAAW,CAAC/D,KAAD;IAH8B,CAA/B,CAAtB;;IAMA,OAAO;MACH6D,WADG;MAEHI;IAFG,CAAP;EAIH,CAf4B,EAe1B,CAACZ,kBAAD,CAf0B,CAA7B;EAiBA,MAAM;IAAEQ,WAAF;IAAeI;EAAf,IAAiCP,oBAAoB,EAA3D;EAEA,MAAMW,iBAAiB,GAAG,IAAAxB,cAAA,EAAQ,OAAO;IACrCpB;EADqC,CAAP,CAAR,EAEtB,CAACA,2BAAD,CAFsB,CAA1B;;EAIA,MAAM6C,gBAAgB,GAAIC,cAAD,IAAqE;IAC1F,MAAMC,eAAe,GAAG1B,cAAc,CAACM,OAAvC;IACA,MAAMqB,cAAc,GAAGD,eAAe,CAACxD,GAAhB,CAAoBuD,cAApB,CAAvB;IAEAzB,cAAc,CAACM,OAAf,GAAyBqB,cAAzB;IAEAvB,aAAa,CAACwB,cAAc,IAAI;MAC5B,MAAMC,aAAa,GAAG5B,0BAA0B,CAAC0B,cAAD,CAAhD;MAEA,OAAO9E,CAAC,CAACiF,MAAF,CAASF,cAAT,EAAyBC,aAAzB,IAA0CD,cAA1C,GAA2DC,aAAlE;IACH,CAJY,CAAb;EAKH,CAXD;;EAaA,MAAME,WAAW,GAAIC,OAAD,IAAuB;IACvC,MAAMzE,kBAAkB,GAAG,IAAI0E,IAAJ,GAAWC,OAAX,EAA3B;IAEAV,gBAAgB,CAAC,CAAC5D,UAAD,EAAauE,CAAb,KAAmB;MAChC,MAAM3E,QAAQ,GAAGI,UAAU,CAACJ,QAA5B;MACA,MAAM4E,cAAc,GAAGvF,CAAC,CAACwF,QAAF,CAAWF,CAAX,EAActF,CAAC,CAACyF,SAAF,CAAY,EAAZ,EAAgBN,OAAhB,CAAd,CAAvB;;MAEA,IAAII,cAAc,IAAI,CAAA5E,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEE,QAAV,MAAuB,OAA7C,EAAsD;QAClD,OAAO,EACH,GAAGE,UADA;UAEHL;QAFG,CAAP;MAIH;;MAED,OAAOK,UAAP;IACH,CAZe,CAAhB;EAaH,CAhBD;;EAkBA,MAAM2E,wBAAwB,GAAG,MAAM;IACnC,MAAM,CAACC,UAAD,EAAaC,QAAb,IAAyB/C,4BAA4B,CAACY,OAA5D;IACA,MAAMoC,eAAe,GAAG7F,CAAC,CAAC8F,KAAF,CAAQH,UAAR,EAAoBC,QAApB,CAAxB;IAEAV,WAAW,CAACW,eAAD,CAAX;EACH,CALD;;EAOA,MAAME,sBAAsB,GAAG,IAAAnD,aAAA,EAAO,QAA4D;IAAA;;IAAA,IAA3D;MAAEoD;IAAF,CAA2D;IAC9F,MAAMC,oBAAoB,GAAGjG,CAAC,CAACkG,IAAF,CAAO,CAACC,CAAD,EAAIC,CAAJ,KAAU,CAACD,CAAC,CAAC9F,KAAF,IAAW,CAAZ,KAAkB+F,CAAC,CAAC/F,KAAF,IAAW,CAA7B,CAAjB,EAAkD2F,aAAlD,CAA7B;IAEA,MAAMK,kBAAkB,cAAGrG,CAAC,CAACsG,IAAF,CAAOL,oBAAP,CAAH,4CAAG,QAA8B5F,KAAzD;IACA,MAAMkG,qBAAqB,cAAGvG,CAAC,CAACwG,IAAF,CAAOP,oBAAP,CAAH,4CAAG,QAA8B5F,KAA5D;;IAEA,IAAIL,CAAC,CAACyG,KAAF,CAAQJ,kBAAR,KAA+BrG,CAAC,CAACyG,KAAF,CAAQF,qBAAR,CAAnC,EAAmE;MAC/D;IACH;;IAED,MAAMZ,UAAU,GAAG3F,CAAC,CAAC0G,GAAF,CAAML,kBAAkB,GAAG9E,uBAA3B,EAAoD,CAApD,CAAnB;IACA,MAAMqE,QAAQ,GAAG5F,CAAC,CAACgD,GAAF,CAAMuD,qBAAqB,GAAGhF,uBAA9B,EAAuD+B,UAAU,CAACkB,MAAX,GAAoB,CAA3E,CAAjB;IAEA3B,4BAA4B,CAACY,OAA7B,GAAuC,CAACkC,UAAD,EAAaC,QAAQ,GAAG,CAAxB,CAAvC;IAEAF,wBAAwB;EAC3B,CAhB8B,CAA/B;EAkBA,MAAMiB,YAAY,GAAG,IAAA3C,kBAAA,EAAa4C,KAAD,IAAoD;IAAA;;IACjFnE,aAAa,SAAb,IAAAA,aAAa,WAAb,qCAAAA,aAAa,CAAEgB,OAAf,gFAAwBoD,eAAxB,CAAwCD,KAAxC;IAEA1E,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG0E,KAAH,CAAR;EACH,CAJoB,EAIlB,CAAC1E,QAAD,CAJkB,CAArB;;EAMA,MAAM4E,qBAAqB,GAAIrC,MAAD,IAAoB;IAAA;;IAC9C,wBAAA9B,WAAW,CAACc,OAAZ,8EAAqBsD,cAArB,CAAoC;MAChCtC,MADgC;MAEhCuC,QAAQ,EAAE;IAFsB,CAApC;EAIH,CALD;;EAOA,MAAMC,UAAqC,GAAG,IAAAjD,kBAAA,EAAY,SAAqB;IAAA;;IAAA,IAApB;MAAE7D,IAAF;MAAQE;IAAR,CAAoB;;IAC3E,MAAM6G,WAAW,GAAG,MAAM;MACtB/E,OAAO,IAAIA,OAAO,EAAlB;MAEAwC,gBAAgB,CAAC,CAAC5D,UAAD,EAAauE,CAAb,KAAmB;QAChC,MAAM3E,QAAQ,GAAGI,UAAU,CAACJ,QAA5B;;QAEA,IAAI2E,CAAC,KAAKjF,KAAV,EAAiB;UACb,OAAO,EACH,GAAGU,UADA;YAEHP,eAAe,EAAEO,UAAU,CAACP,eAAX,GAA6B,CAF3C;YAGHG,QAAQ,EAAE,EACN,GAAGA,QADG;cAENE,QAAQ,EAAE;YAFJ;UAHP,CAAP;QAQH;;QAED,OAAOE,UAAP;MACH,CAfe,CAAhB;;MAiBA,IAAIZ,IAAI,CAACe,mBAAT,EAA8B;QAC1B;MACH;;MAED,MAAM,CAACyE,UAAD,EAAaC,QAAb,IAAyB/C,4BAA4B,CAACY,OAA5D;;MACA,IAAIpD,KAAK,IAAIsF,UAAT,IAAuBtF,KAAK,GAAGuF,QAAnC,EAA6C;QACzCF,wBAAwB;MAC3B;IACJ,CA5BD;;IA8BA,MAAMyB,iBAAiB,GAAG,MAAM;MAC5B/E,aAAa,IAAIA,aAAa,EAA9B;MAEA8C,WAAW,CAAC,CAAC7E,KAAD,CAAD,CAAX;IACH,CAJD;;IAMA,MAAM+G,MAAM,GAAG,MAAM;MACjBzC,gBAAgB,CAAC,CAAC5D,UAAD,EAAauE,CAAb,KAAmB;QAChC,MAAM3E,QAAQ,GAAGI,UAAU,CAACJ,QAA5B;;QAEA,IAAI2E,CAAC,KAAKjF,KAAN,IAAeM,QAAQ,KAAK0G,SAAhC,EAA2C;UACvC,OAAO,EACH,GAAGtG,UADA;YAEHJ,QAAQ,EAAE,EACN,GAAGA,QADG;cAENE,QAAQ,EAAE;YAFJ;UAFP,CAAP;QAOH;;QAED,OAAOE,UAAP;MACH,CAde,CAAhB;IAeH,CAhBD;;IAkBA,oBACI,6BAAC,mBAAD;MACI,OAAO,EAAEmG,WADb;MAEI,MAAM,EAAEE,MAFZ;MAGI,OAAO,EAAEnF,WAHb;MAII,aAAa,EAAEkF,iBAJnB;MAKI,GAAG,EAAEhH,IAAI,CAACS,GALd;MAMI,QAAQ,EAAET,IAAI,CAACc,QANnB;MAOI,mBAAmB,EAAEZ,KAAK,KAAK,CAAV,GAAciC,mBAAd,GAAoC,CAP7D;MAQI,KAAK,EAAE,0BAAAoB,kBAAkB,CAACrD,KAAD,CAAlB,gFAA2BwD,KAA3B,KAAoC,CAR/C;MASI,MAAM,EAAE,2BAAAH,kBAAkB,CAACrD,KAAD,CAAlB,kFAA2BuD,MAA3B,KAAqC,CATjD;MAUI,mBAAmB,EAAEzD,IAAI,CAACe;IAV9B,EADJ;EAcH,CArE6C,EAqE3C,CAACe,WAAD,EAAcyB,kBAAd,CArE2C,CAA9C;EAuEA,IAAA4D,gBAAA,EAAU,MAAM;IACZ,MAAM7C,MAAM,GAAG1B,IAAI,CAACwE,KAAL,CAAY1F,uBAAuB,GAAG,GAA3B,GAAkCqC,WAA7C,CAAf;;IAEA,IAAIvB,WAAW,CAACc,OAAhB,EAAyB;MACrBd,WAAW,CAACc,OAAZ,CAAoBsD,cAApB,CAAmC;QAAEtC,MAAF;QAAUuC,QAAQ,EAAE;MAApB,CAAnC;IACH;EACJ,CAND,EAMG,EANH;EAQA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,qBAAD;IACI,IAAI,EAAE1D,UADV;IAEI,aAAa,EAAEgB,aAFnB;IAGI,kBAAkB,EAAE1C,kBAHxB;IAII,YAAY,EAAE1B,YAJlB;IAKI,sBAAsB,EAAE6F,sBAAsB,CAACtC,OALnD;IAMI,GAAG,EAAEd,WANT;IAOI,UAAU,EAAEsE,UAPhB;IAQI,iBAAiB,EAAEvC,iBARvB;IASI,UAAU,EAAEnC,UAThB;IAUI,QAAQ,EAAEoE;EAVd,GAWQnE,UAXR,EADJ,eAeI,6BAAC,mBAAD,eACQb,iBADR;IAEI,aAAa,EAAEuC,WAFnB;IAGI,qBAAqB,EAAE4C;EAH3B,GAfJ,CADJ;AAuBH;;AAAA"}
+{"version":3,"names":["appender","left","right","getHeightAccum","heights","R","mapAccum","keyExtractor","item","String","index","createInitialImageState","image","totalErrorCount","dimension","tryRenderingMillis","urlState","url","validity","mapImageStateToItemState","imageState","autoHandleErrorCount","imageKey","reloadButtonVisible","mapIndexed","addIndex","map","MAXIMUM_WIDTH","ComicViewer","props","debounceMillis","fastScrollOptions","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","fastScrollRef","ref","flatListRef","useRef","actualImageWidth","Math","min","initialImageStates","useMemo","imageStatesRef","mapImageStatesToItemStates","imageStates","itemStates","setItemStates","useState","current","renderedDimensions","intrinsicImage","height","width","isNaN","layoutFromDimensions","useCallback","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","updateTryRenderingMillis","Date","getTime","i","onViewableItemsChanged","viewableItems","handleScroll","event","onContentScroll","scrollContentToOffset","scrollToOffset","animated","renderItem","handleError","handleReloadPress","onLoad","undefined","useEffect","scroll","floor","timeoutId","Platform","OS","setTimeout","clearTimeout"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, Platform, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { default as ComicViewerProps, Dimension, IntrinsicImage } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\nimport FastScroll from './FastScroll';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n    url: string;\n    validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n    urlState: UrlState;\n    totalErrorCount: number;\n    dimension: Dimension;\n    tryRenderingMillis: number;\n}\n\ninterface ItemState {\n    index: number;\n    url?: string;\n    imageKey: string;\n    reloadButtonVisible: boolean;\n    dimension: Dimension;\n}\n\nconst createInitialImageState = (image: IntrinsicImage): ImageState => ({\n    totalErrorCount: 0,\n    dimension: image.dimension,\n    tryRenderingMillis: 0,\n    urlState: {\n        url: image.url,\n        validity: 'unknown',\n    },\n});\n\nconst mapImageStateToItemState = (\n    index: number,\n    imageState: ImageState,\n    autoHandleErrorCount: number,\n): ItemState => ({\n    index,\n    url: imageState.urlState?.url,\n    imageKey: `${imageState.tryRenderingMillis}-${index}`,\n    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n    dimension: imageState.dimension,\n});\n\nconst mapIndexed = R.addIndex<IntrinsicImage>(R.map);\n\nconst MAXIMUM_WIDTH = 720;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n    const {\n        debounceMillis = 100,\n        autoHandleErrorCount = 3,\n        fastScrollOptions,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages,\n        maxContentWidth = MAXIMUM_WIDTH,\n        onItemPress,\n        onScroll,\n        onError,\n        onReloadPress,\n        viewportWidth,\n        invisiblePaddingTop = 0,\n        windowSize = 3,\n        ...otherProps\n    } = props;\n\n    const fastScrollRef = fastScrollOptions?.ref;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const actualImageWidth = Math.min(viewportWidth, maxContentWidth);\n\n    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicImages), []);\n\n    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n        return imageStates.map((image, index) => mapImageStateToItemState(\n            index, image, autoHandleErrorCount,\n        ));\n    };\n\n    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n        return mapImageStatesToItemStates(imageStatesRef.current);\n    });\n\n    const renderedDimensions = useMemo<Array<Dimension>>(() => {\n        return mapIndexed((intrinsicImage, index) => {\n            const height = (intrinsicImage.dimension.height * actualImageWidth) / intrinsicImage.dimension.width + (index === 0 ? invisiblePaddingTop : 0);\n\n            return {\n                width: actualImageWidth,\n                height: isNaN(height) ? 0 : height,\n            };\n        }, intrinsicImages);\n    }, [actualImageWidth]);\n\n    const layoutFromDimensions = useCallback(() => {\n        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n        const itemOffsets = R.prepend(0, heightAccum);\n\n        const getItemLayout = (data: any, index: number) => ({\n            index,\n            length: itemHeights[index],\n            offset: itemOffsets[index],\n        });\n\n        return {\n            totalHeight,\n            getItemLayout,\n        };\n    }, [renderedDimensions]);\n\n    const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n        const prevImageStates = imageStatesRef.current;\n        const newImageStates = prevImageStates.map(updateFunction);\n\n        imageStatesRef.current = newImageStates;\n\n        setItemStates(prevItemStates => {\n            const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n        });\n    };\n\n    const updateTryRenderingMillis = () => {\n        const tryRenderingMillis = new Date().getTime();\n\n        updateImageState((imageState, i) => {\n            const urlState = imageState.urlState;\n\n            if (urlState?.validity === 'invalid') {\n                return {\n                    ...imageState,\n                    tryRenderingMillis,\n                };\n            }\n\n            return imageState;\n        });\n    };\n    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n        updateTryRenderingMillis();\n    });\n\n    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        fastScrollRef?.current?.onContentScroll(event);\n\n        onScroll?.(event);\n    }, [onScroll]);\n\n    const scrollContentToOffset = (offset: number) => {\n        flatListRef.current?.scrollToOffset({\n            offset,\n            animated: false,\n        });\n    };\n\n    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n        const handleError = () => {\n            onError && onError();\n\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index) {\n                    return {\n                        ...imageState,\n                        totalErrorCount: imageState.totalErrorCount + 1,\n                        urlState: {\n                            ...urlState,\n                            validity: 'invalid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n\n            if (item.reloadButtonVisible) {\n                return;\n            }\n\n            updateTryRenderingMillis();\n        };\n\n        const handleReloadPress = () => {\n            onReloadPress && onReloadPress();\n\n            updateTryRenderingMillis();\n        };\n\n        const onLoad = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            ...urlState,\n                            validity: 'valid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        };\n\n        return (\n            <ViewerItem\n                onError={handleError}\n                onLoad={onLoad}\n                onPress={onItemPress}\n                onReloadPress={handleReloadPress}\n                url={item.url}\n                imageKey={item.imageKey}\n                invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}\n                width={renderedDimensions[index]?.width ?? 0}\n                height={renderedDimensions[index]?.height ?? 0}\n                reloadButtonVisible={item.reloadButtonVisible}\n            />\n        );\n    }, [onItemPress, renderedDimensions]);\n\n    useEffect(() => {\n        const scroll = () => {\n            const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n            if (flatListRef.current) {\n                flatListRef.current.scrollToOffset({ offset, animated: false });\n            }\n        };\n\n        let timeoutId: NodeJS.Timeout | undefined = undefined;\n\n        /**\n         * @FIXME\n         * scrollToOffset has issue(no effect) in useEffect hook on iOS.\n         * ref: https://github.com/facebook/react-native/issues/35575\n         */\n        if (Platform.OS === 'ios') {\n            timeoutId = setTimeout(scroll, 0);\n        } else {\n            scroll();\n        }\n\n        return () => {\n            timeoutId && clearTimeout(timeoutId);\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <FlatList\n                data={itemStates}\n                getItemLayout={getItemLayout}\n                initialNumToRender={initialNumToRender}\n                keyExtractor={keyExtractor}\n                onViewableItemsChanged={onViewableItemsChanged.current}\n                ref={flatListRef}\n                renderItem={renderItem}\n                viewabilityConfig={viewabilityConfig}\n                windowSize={windowSize}\n                onScroll={handleScroll}\n                {...otherProps}\n            />\n\n            <FastScroll\n                {...fastScrollOptions}\n                contentLength={totalHeight}\n                scrollContentToOffset={scrollContentToOffset}\n            />\n        </React.Fragment>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/ComicViewer/FastScroll.js

@@ -25,14 +25,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const styles = _core.StyleSheet.create({
   indicator: {
-    width: 24,
-    height: 40,
+    width: 28,
+    height: 48,
     backgroundColor: '#767676',
     flexDirection: 'column',
     alignItems: 'center',
-    borderRadius: 4
+    justifyContent: 'center',
+    borderRadius: 16
   },
   view: {
+    padding: 4,
     position: 'absolute'
   }
 });
@@ -63,7 +65,7 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const totalContentLength = contentLength + additionalLength;
 
   const onContentScroll = event => {
-    if (isIndicatorDragging.current === false) {
+    if (!isIndicatorDragging.current) {
       const contentPercentage = (0, _util.offsetToPercentage)(event.nativeEvent.contentOffset.y, totalContentLength);
       const offset = (0, _util.percentageToOffset)(contentPercentage, movementRange);
 

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","indicator","width","height","backgroundColor","flexDirection","alignItems","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: 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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"}
+{"version":3,"names":["styles","StyleSheet","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","padding","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: { padding: 4, 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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"}

package/build/module/ComicViewer/ComicViewer.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, Platform } from 'react-native';
 import * as R from 'ramda';
 import ViewerItem from './ViewerItem';
 import FastScroll from './FastScroll';
@@ -36,7 +36,6 @@ const mapImageStateToItemState = (index, imageState, autoHandleErrorCount) => {
 
 const mapIndexed = R.addIndex(R.map);
 const MAXIMUM_WIDTH = 720;
-const NUMBER_OF_ADJACENT_ITEM = 5;
 export default function ComicViewer(props) {
   const {
     debounceMillis = 100,
@@ -58,7 +57,6 @@ export default function ComicViewer(props) {
   } = props;
   const fastScrollRef = fastScrollOptions === null || fastScrollOptions === void 0 ? void 0 : fastScrollOptions.ref;
   const flatListRef = useRef(null);
-  const maybeLoadableItemsIndexRange = useRef([-1, 0]);
   const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
   const initialImageStates = useMemo(() => R.map(createInitialImageState, intrinsicImages), []);
   const imageStatesRef = useRef(initialImageStates);
@@ -113,13 +111,12 @@ export default function ComicViewer(props) {
     });
   };
 
-  const updateItems = indexes => {
+  const updateTryRenderingMillis = () => {
     const tryRenderingMillis = new Date().getTime();
     updateImageState((imageState, i) => {
       const urlState = imageState.urlState;
-      const shouldRerender = R.includes(i, R.defaultTo([], indexes));
 
-      if (shouldRerender && (urlState === null || urlState === void 0 ? void 0 : urlState.validity) !== 'valid') {
+      if ((urlState === null || urlState === void 0 ? void 0 : urlState.validity) === 'invalid') {
         return { ...imageState,
           tryRenderingMillis
         };
@@ -129,30 +126,11 @@ export default function ComicViewer(props) {
     });
   };
 
-  const renderMaybeLoadableItems = () => {
-    const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
-    const affectedIndexes = R.range(startIndex, endIndex);
-    updateItems(affectedIndexes);
-  };
-
   const onViewableItemsChanged = useRef(_ref => {
-    var _R$head, _R$last;
-
     let {
       viewableItems
     } = _ref;
-    const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);
-    const firstViewableIndex = (_R$head = R.head(orderedViewableItems)) === null || _R$head === void 0 ? void 0 : _R$head.index;
-    const lastViewableItemIndex = (_R$last = R.last(orderedViewableItems)) === null || _R$last === void 0 ? void 0 : _R$last.index;
-
-    if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {
-      return;
-    }
-
-    const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);
-    const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);
-    maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
-    renderMaybeLoadableItems();
+    updateTryRenderingMillis();
   });
   const handleScroll = useCallback(event => {
     var _fastScrollRef$curren;
@@ -199,16 +177,12 @@ export default function ComicViewer(props) {
         return;
       }
 
-      const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
-
-      if (index >= startIndex || index < endIndex) {
-        renderMaybeLoadableItems();
-      }
+      updateTryRenderingMillis();
     };
 
     const handleReloadPress = () => {
       onReloadPress && onReloadPress();
-      updateItems([index]);
+      updateTryRenderingMillis();
     };
 
     const onLoad = () => {
@@ -241,14 +215,33 @@ export default function ComicViewer(props) {
     });
   }, [onItemPress, renderedDimensions]);
   useEffect(() => {
-    const offset = Math.floor(initialScrollPercentage / 100 * totalHeight);
+    const scroll = () => {
+      const offset = Math.floor(initialScrollPercentage / 100 * totalHeight);
+
+      if (flatListRef.current) {
+        flatListRef.current.scrollToOffset({
+          offset,
+          animated: false
+        });
+      }
+    };
 
-    if (flatListRef.current) {
-      flatListRef.current.scrollToOffset({
-        offset,
-        animated: false
-      });
+    let timeoutId = undefined;
+    /**
+     * @FIXME
+     * scrollToOffset has issue(no effect) in useEffect hook on iOS.
+     * ref: https://github.com/facebook/react-native/issues/35575
+     */
+
+    if (Platform.OS === 'ios') {
+      timeoutId = setTimeout(scroll, 0);
+    } else {
+      scroll();
     }
+
+    return () => {
+      timeoutId && clearTimeout(timeoutId);
+    };
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlatList, _extends({
     data: itemStates,

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","FlatList","R","ViewerItem","FastScroll","appender","left","right","getHeightAccum","heights","mapAccum","keyExtractor","item","String","index","createInitialImageState","image","totalErrorCount","dimension","tryRenderingMillis","urlState","url","validity","mapImageStateToItemState","imageState","autoHandleErrorCount","imageKey","reloadButtonVisible","mapIndexed","addIndex","map","MAXIMUM_WIDTH","NUMBER_OF_ADJACENT_ITEM","ComicViewer","props","debounceMillis","fastScrollOptions","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","fastScrollRef","ref","flatListRef","maybeLoadableItemsIndexRange","actualImageWidth","Math","min","initialImageStates","imageStatesRef","mapImageStatesToItemStates","imageStates","itemStates","setItemStates","current","renderedDimensions","intrinsicImage","height","width","isNaN","layoutFromDimensions","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","updateItems","indexes","Date","getTime","i","shouldRerender","includes","defaultTo","renderMaybeLoadableItems","startIndex","endIndex","affectedIndexes","range","onViewableItemsChanged","viewableItems","orderedViewableItems","sort","a","b","firstViewableIndex","head","lastViewableItemIndex","last","isNil","max","handleScroll","event","onContentScroll","scrollContentToOffset","scrollToOffset","animated","renderItem","handleError","handleReloadPress","onLoad","undefined","floor"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { default as ComicViewerProps, Dimension, IntrinsicImage } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\nimport FastScroll from './FastScroll';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n    url: string;\n    validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n    urlState: UrlState;\n    totalErrorCount: number;\n    dimension: Dimension;\n    tryRenderingMillis: number;\n}\n\ninterface ItemState {\n    index: number;\n    url?: string;\n    imageKey: string;\n    reloadButtonVisible: boolean;\n    dimension: Dimension;\n}\n\nconst createInitialImageState = (image: IntrinsicImage): ImageState => ({\n    totalErrorCount: 0,\n    dimension: image.dimension,\n    tryRenderingMillis: 0,\n    urlState: {\n        url: image.url,\n        validity: 'unknown',\n    },\n});\n\nconst mapImageStateToItemState = (\n    index: number,\n    imageState: ImageState,\n    autoHandleErrorCount: number,\n): ItemState => ({\n    index,\n    url: imageState.urlState?.url,\n    imageKey: `${imageState.tryRenderingMillis}-${index}`,\n    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n    dimension: imageState.dimension,\n});\n\nconst mapIndexed = R.addIndex<IntrinsicImage>(R.map);\n\nconst MAXIMUM_WIDTH = 720;\n\nconst NUMBER_OF_ADJACENT_ITEM = 5;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n    const {\n        debounceMillis = 100,\n        autoHandleErrorCount = 3,\n        fastScrollOptions,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages,\n        maxContentWidth = MAXIMUM_WIDTH,\n        onItemPress,\n        onScroll,\n        onError,\n        onReloadPress,\n        viewportWidth,\n        invisiblePaddingTop = 0,\n        windowSize = 3,\n        ...otherProps\n    } = props;\n\n    const fastScrollRef = fastScrollOptions?.ref;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);\n\n    const actualImageWidth = Math.min(viewportWidth, maxContentWidth);\n\n    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicImages), []);\n\n    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n        return imageStates.map((image, index) => mapImageStateToItemState(\n            index, image, autoHandleErrorCount,\n        ));\n    };\n\n    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n        return mapImageStatesToItemStates(imageStatesRef.current);\n    });\n\n    const renderedDimensions = useMemo<Array<Dimension>>(() => {\n        return mapIndexed((intrinsicImage, index) => {\n            const height = (intrinsicImage.dimension.height * actualImageWidth) / intrinsicImage.dimension.width + (index === 0 ? invisiblePaddingTop : 0);\n\n            return {\n                width: actualImageWidth,\n                height: isNaN(height) ? 0 : height,\n            };\n        }, intrinsicImages);\n    }, [actualImageWidth]);\n\n    const layoutFromDimensions = useCallback(() => {\n        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n        const itemOffsets = R.prepend(0, heightAccum);\n\n        const getItemLayout = (data: any, index: number) => ({\n            index,\n            length: itemHeights[index],\n            offset: itemOffsets[index],\n        });\n\n        return {\n            totalHeight,\n            getItemLayout,\n        };\n    }, [renderedDimensions]);\n\n    const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n        const prevImageStates = imageStatesRef.current;\n        const newImageStates = prevImageStates.map(updateFunction);\n\n        imageStatesRef.current = newImageStates;\n\n        setItemStates(prevItemStates => {\n            const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n        });\n    };\n\n    const updateItems = (indexes: number[]) => {\n        const tryRenderingMillis = new Date().getTime();\n\n        updateImageState((imageState, i) => {\n            const urlState = imageState.urlState;\n            const shouldRerender = R.includes(i, R.defaultTo([], indexes));\n\n            if (shouldRerender && urlState?.validity !== 'valid') {\n                return {\n                    ...imageState,\n                    tryRenderingMillis,\n                };\n            }\n\n            return imageState;\n        });\n    };\n\n    const renderMaybeLoadableItems = () => {\n        const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n        const affectedIndexes = R.range(startIndex, endIndex);\n\n        updateItems(affectedIndexes);\n    };\n\n    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n        const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);\n\n        const firstViewableIndex = R.head(orderedViewableItems)?.index;\n        const lastViewableItemIndex = R.last(orderedViewableItems)?.index;\n\n        if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {\n            return;\n        }\n\n        const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);\n        const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);\n\n        maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];\n\n        renderMaybeLoadableItems();\n    });\n\n    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        fastScrollRef?.current?.onContentScroll(event);\n\n        onScroll?.(event);\n    }, [onScroll]);\n\n    const scrollContentToOffset = (offset: number) => {\n        flatListRef.current?.scrollToOffset({\n            offset,\n            animated: false,\n        });\n    };\n\n    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n        const handleError = () => {\n            onError && onError();\n\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index) {\n                    return {\n                        ...imageState,\n                        totalErrorCount: imageState.totalErrorCount + 1,\n                        urlState: {\n                            ...urlState,\n                            validity: 'invalid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n\n            if (item.reloadButtonVisible) {\n                return;\n            }\n\n            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n            if (index >= startIndex || index < endIndex) {\n                renderMaybeLoadableItems();\n            }\n        };\n\n        const handleReloadPress = () => {\n            onReloadPress && onReloadPress();\n\n            updateItems([index]);\n        };\n\n        const onLoad = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            ...urlState,\n                            validity: 'valid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        };\n\n        return (\n            <ViewerItem\n                onError={handleError}\n                onLoad={onLoad}\n                onPress={onItemPress}\n                onReloadPress={handleReloadPress}\n                url={item.url}\n                imageKey={item.imageKey}\n                invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}\n                width={renderedDimensions[index]?.width ?? 0}\n                height={renderedDimensions[index]?.height ?? 0}\n                reloadButtonVisible={item.reloadButtonVisible}\n            />\n        );\n    }, [onItemPress, renderedDimensions]);\n\n    useEffect(() => {\n        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n        if (flatListRef.current) {\n            flatListRef.current.scrollToOffset({ offset, animated: false });\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <FlatList\n                data={itemStates}\n                getItemLayout={getItemLayout}\n                initialNumToRender={initialNumToRender}\n                keyExtractor={keyExtractor}\n                onViewableItemsChanged={onViewableItemsChanged.current}\n                ref={flatListRef}\n                renderItem={renderItem}\n                viewabilityConfig={viewabilityConfig}\n                windowSize={windowSize}\n                onScroll={handleScroll}\n                {...otherProps}\n            />\n\n            <FastScroll\n                {...fastScrollOptions}\n                contentLength={totalHeight}\n                scrollContentToOffset={scrollContentToOffset}\n            />\n        </React.Fragment>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","FlatList","Platform","R","ViewerItem","FastScroll","appender","left","right","getHeightAccum","heights","mapAccum","keyExtractor","item","String","index","createInitialImageState","image","totalErrorCount","dimension","tryRenderingMillis","urlState","url","validity","mapImageStateToItemState","imageState","autoHandleErrorCount","imageKey","reloadButtonVisible","mapIndexed","addIndex","map","MAXIMUM_WIDTH","ComicViewer","props","debounceMillis","fastScrollOptions","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","fastScrollRef","ref","flatListRef","actualImageWidth","Math","min","initialImageStates","imageStatesRef","mapImageStatesToItemStates","imageStates","itemStates","setItemStates","current","renderedDimensions","intrinsicImage","height","width","isNaN","layoutFromDimensions","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","updateTryRenderingMillis","Date","getTime","i","onViewableItemsChanged","viewableItems","handleScroll","event","onContentScroll","scrollContentToOffset","scrollToOffset","animated","renderItem","handleError","handleReloadPress","onLoad","undefined","scroll","floor","timeoutId","OS","setTimeout","clearTimeout"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, Platform, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { default as ComicViewerProps, Dimension, IntrinsicImage } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\nimport FastScroll from './FastScroll';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n    url: string;\n    validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n    urlState: UrlState;\n    totalErrorCount: number;\n    dimension: Dimension;\n    tryRenderingMillis: number;\n}\n\ninterface ItemState {\n    index: number;\n    url?: string;\n    imageKey: string;\n    reloadButtonVisible: boolean;\n    dimension: Dimension;\n}\n\nconst createInitialImageState = (image: IntrinsicImage): ImageState => ({\n    totalErrorCount: 0,\n    dimension: image.dimension,\n    tryRenderingMillis: 0,\n    urlState: {\n        url: image.url,\n        validity: 'unknown',\n    },\n});\n\nconst mapImageStateToItemState = (\n    index: number,\n    imageState: ImageState,\n    autoHandleErrorCount: number,\n): ItemState => ({\n    index,\n    url: imageState.urlState?.url,\n    imageKey: `${imageState.tryRenderingMillis}-${index}`,\n    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n    dimension: imageState.dimension,\n});\n\nconst mapIndexed = R.addIndex<IntrinsicImage>(R.map);\n\nconst MAXIMUM_WIDTH = 720;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n    const {\n        debounceMillis = 100,\n        autoHandleErrorCount = 3,\n        fastScrollOptions,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages,\n        maxContentWidth = MAXIMUM_WIDTH,\n        onItemPress,\n        onScroll,\n        onError,\n        onReloadPress,\n        viewportWidth,\n        invisiblePaddingTop = 0,\n        windowSize = 3,\n        ...otherProps\n    } = props;\n\n    const fastScrollRef = fastScrollOptions?.ref;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const actualImageWidth = Math.min(viewportWidth, maxContentWidth);\n\n    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicImages), []);\n\n    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n        return imageStates.map((image, index) => mapImageStateToItemState(\n            index, image, autoHandleErrorCount,\n        ));\n    };\n\n    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n        return mapImageStatesToItemStates(imageStatesRef.current);\n    });\n\n    const renderedDimensions = useMemo<Array<Dimension>>(() => {\n        return mapIndexed((intrinsicImage, index) => {\n            const height = (intrinsicImage.dimension.height * actualImageWidth) / intrinsicImage.dimension.width + (index === 0 ? invisiblePaddingTop : 0);\n\n            return {\n                width: actualImageWidth,\n                height: isNaN(height) ? 0 : height,\n            };\n        }, intrinsicImages);\n    }, [actualImageWidth]);\n\n    const layoutFromDimensions = useCallback(() => {\n        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n        const itemOffsets = R.prepend(0, heightAccum);\n\n        const getItemLayout = (data: any, index: number) => ({\n            index,\n            length: itemHeights[index],\n            offset: itemOffsets[index],\n        });\n\n        return {\n            totalHeight,\n            getItemLayout,\n        };\n    }, [renderedDimensions]);\n\n    const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n        const prevImageStates = imageStatesRef.current;\n        const newImageStates = prevImageStates.map(updateFunction);\n\n        imageStatesRef.current = newImageStates;\n\n        setItemStates(prevItemStates => {\n            const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n        });\n    };\n\n    const updateTryRenderingMillis = () => {\n        const tryRenderingMillis = new Date().getTime();\n\n        updateImageState((imageState, i) => {\n            const urlState = imageState.urlState;\n\n            if (urlState?.validity === 'invalid') {\n                return {\n                    ...imageState,\n                    tryRenderingMillis,\n                };\n            }\n\n            return imageState;\n        });\n    };\n    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n        updateTryRenderingMillis();\n    });\n\n    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        fastScrollRef?.current?.onContentScroll(event);\n\n        onScroll?.(event);\n    }, [onScroll]);\n\n    const scrollContentToOffset = (offset: number) => {\n        flatListRef.current?.scrollToOffset({\n            offset,\n            animated: false,\n        });\n    };\n\n    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n        const handleError = () => {\n            onError && onError();\n\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index) {\n                    return {\n                        ...imageState,\n                        totalErrorCount: imageState.totalErrorCount + 1,\n                        urlState: {\n                            ...urlState,\n                            validity: 'invalid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n\n            if (item.reloadButtonVisible) {\n                return;\n            }\n\n            updateTryRenderingMillis();\n        };\n\n        const handleReloadPress = () => {\n            onReloadPress && onReloadPress();\n\n            updateTryRenderingMillis();\n        };\n\n        const onLoad = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            ...urlState,\n                            validity: 'valid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        };\n\n        return (\n            <ViewerItem\n                onError={handleError}\n                onLoad={onLoad}\n                onPress={onItemPress}\n                onReloadPress={handleReloadPress}\n                url={item.url}\n                imageKey={item.imageKey}\n                invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}\n                width={renderedDimensions[index]?.width ?? 0}\n                height={renderedDimensions[index]?.height ?? 0}\n                reloadButtonVisible={item.reloadButtonVisible}\n            />\n        );\n    }, [onItemPress, renderedDimensions]);\n\n    useEffect(() => {\n        const scroll = () => {\n            const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n            if (flatListRef.current) {\n                flatListRef.current.scrollToOffset({ offset, animated: false });\n            }\n        };\n\n        let timeoutId: NodeJS.Timeout | undefined = undefined;\n\n        /**\n         * @FIXME\n         * scrollToOffset has issue(no effect) in useEffect hook on iOS.\n         * ref: https://github.com/facebook/react-native/issues/35575\n         */\n        if (Platform.OS === 'ios') {\n            timeoutId = setTimeout(scroll, 0);\n        } else {\n            scroll();\n        }\n\n        return () => {\n            timeoutId && clearTimeout(timeoutId);\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <FlatList\n                data={itemStates}\n                getItemLayout={getItemLayout}\n                initialNumToRender={initialNumToRender}\n                keyExtractor={keyExtractor}\n                onViewableItemsChanged={onViewableItemsChanged.current}\n                ref={flatListRef}\n                renderItem={renderItem}\n                viewabilityConfig={viewabilityConfig}\n                windowSize={windowSize}\n                onScroll={handleScroll}\n                {...otherProps}\n            />\n\n            <FastScroll\n                {...fastScrollOptions}\n                contentLength={totalHeight}\n                scrollContentToOffset={scrollContentToOffset}\n            />\n        </React.Fragment>\n    );\n};\n"],"mappings":"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"}

package/build/module/ComicViewer/FastScroll.js

@@ -7,14 +7,16 @@ import { StyleSheet } from '@fountain-ui/core';
 import { offsetToPercentage, percentageToOffset } from './util';
 const styles = StyleSheet.create({
   indicator: {
-    width: 24,
-    height: 40,
+    width: 28,
+    height: 48,
     backgroundColor: '#767676',
     flexDirection: 'column',
     alignItems: 'center',
-    borderRadius: 4
+    justifyContent: 'center',
+    borderRadius: 16
   },
   view: {
+    padding: 4,
     position: 'absolute'
   }
 });
@@ -44,7 +46,7 @@ const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
   const totalContentLength = contentLength + additionalLength;
 
   const onContentScroll = event => {
-    if (isIndicatorDragging.current === false) {
+    if (!isIndicatorDragging.current) {
       const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);
       const offset = percentageToOffset(contentPercentage, movementRange);
 

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","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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"}
+{"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","padding","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: { padding: 4, 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.52",
+  "version": "2.0.0-beta.54",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ba0faed7f492a6b00b7614c06f23f2fab290e01e"
+  "gitHead": "f9c278a3d035ceaf0745d32398b6036369327678"
 }

package/src/ComicViewer/ComicViewer.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, ViewToken } from 'react-native';
+import { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, Platform, ViewToken } from 'react-native';
 import * as R from 'ramda';
 import { default as ComicViewerProps, Dimension, IntrinsicImage } from './ComicViewerProps';
 import ViewerItem from './ViewerItem';
@@ -56,8 +56,6 @@ const mapIndexed = R.addIndex<IntrinsicImage>(R.map);
 
 const MAXIMUM_WIDTH = 720;
 
-const NUMBER_OF_ADJACENT_ITEM = 5;
-
 export default function ComicViewer(props: ComicViewerProps) {
     const {
         debounceMillis = 100,
@@ -82,8 +80,6 @@ export default function ComicViewer(props: ComicViewerProps) {
 
     const flatListRef = useRef<FlatList>(null);
 
-    const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);
-
     const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
 
     const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicImages), []);
@@ -147,14 +143,13 @@ export default function ComicViewer(props: ComicViewerProps) {
         });
     };
 
-    const updateItems = (indexes: number[]) => {
+    const updateTryRenderingMillis = () => {
         const tryRenderingMillis = new Date().getTime();
 
         updateImageState((imageState, i) => {
             const urlState = imageState.urlState;
-            const shouldRerender = R.includes(i, R.defaultTo([], indexes));
 
-            if (shouldRerender && urlState?.validity !== 'valid') {
+            if (urlState?.validity === 'invalid') {
                 return {
                     ...imageState,
                     tryRenderingMillis,
@@ -164,30 +159,8 @@ export default function ComicViewer(props: ComicViewerProps) {
             return imageState;
         });
     };
-
-    const renderMaybeLoadableItems = () => {
-        const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
-        const affectedIndexes = R.range(startIndex, endIndex);
-
-        updateItems(affectedIndexes);
-    };
-
     const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
-        const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);
-
-        const firstViewableIndex = R.head(orderedViewableItems)?.index;
-        const lastViewableItemIndex = R.last(orderedViewableItems)?.index;
-
-        if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {
-            return;
-        }
-
-        const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);
-        const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);
-
-        maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
-
-        renderMaybeLoadableItems();
+        updateTryRenderingMillis();
     });
 
     const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -228,16 +201,13 @@ export default function ComicViewer(props: ComicViewerProps) {
                 return;
             }
 
-            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
-            if (index >= startIndex || index < endIndex) {
-                renderMaybeLoadableItems();
-            }
+            updateTryRenderingMillis();
         };
 
         const handleReloadPress = () => {
             onReloadPress && onReloadPress();
 
-            updateItems([index]);
+            updateTryRenderingMillis();
         };
 
         const onLoad = () => {
@@ -275,10 +245,29 @@ export default function ComicViewer(props: ComicViewerProps) {
     }, [onItemPress, renderedDimensions]);
 
     useEffect(() => {
-        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);
+        const scroll = () => {
+            const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);
+
+            if (flatListRef.current) {
+                flatListRef.current.scrollToOffset({ offset, animated: false });
+            }
+        };
+
+        let timeoutId: NodeJS.Timeout | undefined = undefined;
+
+        /**
+         * @FIXME
+         * scrollToOffset has issue(no effect) in useEffect hook on iOS.
+         * ref: https://github.com/facebook/react-native/issues/35575
+         */
+        if (Platform.OS === 'ios') {
+            timeoutId = setTimeout(scroll, 0);
+        } else {
+            scroll();
+        }
 
-        if (flatListRef.current) {
-            flatListRef.current.scrollToOffset({ offset, animated: false });
+        return () => {
+            timeoutId && clearTimeout(timeoutId);
         }
     }, []);
 

package/src/ComicViewer/FastScroll.tsx

@@ -9,14 +9,15 @@ import { offsetToPercentage, percentageToOffset } from './util';
 
 const styles = StyleSheet.create({
     indicator: {
-        width: 24,
-        height: 40,
+        width: 28,
+        height: 48,
         backgroundColor: '#767676',
         flexDirection: 'column',
         alignItems: 'center',
-        borderRadius: 4,
+        justifyContent: 'center',
+        borderRadius: 16,
     },
-    view: { position: 'absolute' },
+    view: { padding: 4, position: 'absolute' },
 });
 
 const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
@@ -45,7 +46,7 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
     const totalContentLength = contentLength + additionalLength;
 
     const onContentScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        if (isIndicatorDragging.current === false) {
+        if (!isIndicatorDragging.current) {
             const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);
             const offset = percentageToOffset(contentPercentage, movementRange);