@fountain-ui/lab 2.0.0-beta.83 → 2.0.0-beta.85

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -171,11 +171,14 @@ function BottomSheet(props) {
   const stickyBottomElementShadow = (0, _core.useElevationStyle)(8);
   const stickyBottomElementStyle = {
     backgroundColor: theme.palette.paper.default,
-    position: 'absolute',
-    width: '100%',
-    bottom: 0,
     ...(isScrollable ? stickyBottomElementShadow : {})
   };
+
+  const renderFooter = props => /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetFooter, props, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: handleStickyBottomElementLayout,
+    style: stickyBottomElementStyle
+  }, stickyBottomElement));
+
   return /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModalProvider, null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? _TransparentBackdrop.default : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -191,7 +194,8 @@ function BottomSheet(props) {
     enableDynamicSizing: enableDynamicSizing,
     maxDynamicContentSize: maxDynamicContentSize,
     detached: Boolean(topElement),
-    onAnimate: topElement ? onAnimate : undefined
+    onAnimate: topElement ? onAnimate : undefined,
+    footerComponent: stickyBottomElement ? renderFooter : undefined
   }, topElement ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: topElementAnimationStyle
   }, /*#__PURE__*/_react.default.createElement(_core.Column, {
@@ -207,10 +211,7 @@ function BottomSheet(props) {
     style: headerStyle
   }, header), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: childrenStyle
-  }, children)), stickyBottomElement ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: stickyBottomElementStyle,
-    onLayout: handleStickyBottomElementLayout
-  }, stickyBottomElement) : null)));
+  }, children)))));
 }
 
 ;

package/build/commonjs/BottomSheet/BottomSheetNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["NoHandle","createHeightLayoutHandler","setHeight","event","height","nativeEvent","layout","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","header","stickyBottomElement","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","enableScrollableHeaderBorder","indexRef","React","useRef","bottomSheetRef","windowHeight","useWindowDimensions","isScrollable","setIsScrollable","useState","topElementHeight","setTopElementHeight","stickyBottomElementHeight","setStickyBottomElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","handleStickyBottomElementLayout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shadow","shape","roundnessExtra","modalStyle","backgroundColor","borderTopLeftRadius","borderTopRightRadius","Platform","select","android","elevation","ios","web","boxShadow","palette","paper","default","backgroundStyle","contentWrapperStyle","flex","overflow","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","handleContentSizeChange","_","contentHeight","headerStyle","borderBottomWidth","borderBottomColor","divider","childrenStyle","paddingBottom","stickyBottomElementShadow","useElevationStyle","stickyBottomElementStyle","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nconst createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {\n    return (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setHeight(height);\n    };\n}\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        header,\n        stickyBottomElement,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        enableScrollableHeaderBorder = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [isScrollable, setIsScrollable] = React.useState(false);\n    const [topElementHeight, setTopElementHeight] = React.useState(0);\n    const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);\n    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n    const shadow = theme.shadow[12];\n    const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        ...Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        }),\n    };\n    const backgroundColor = theme.palette.paper.default;\n    const backgroundStyle = {\n        backgroundColor,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n    const contentWrapperStyle: ViewStyle = {\n        flex: 1,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        overflow: 'hidden',\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const handleContentSizeChange = (_: number, contentHeight: number) => {\n        setIsScrollable(contentHeight > maxDynamicContentSize);\n    };\n\n    const headerStyle = {\n        backgroundColor,\n        ...(isScrollable && enableScrollableHeaderBorder ? {\n            borderBottomWidth: 0.5,\n            borderBottomColor: theme.palette.divider,\n        }: {})\n    }\n\n    const childrenStyle = {\n        backgroundColor,\n        paddingBottom: stickyBottomElementHeight,\n    }\n\n    const stickyBottomElementShadow = useElevationStyle(8);\n\n    const stickyBottomElementStyle = {\n        backgroundColor: theme.palette.paper.default,\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n        ...(isScrollable ? stickyBottomElementShadow : {}),\n    }\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                        onContentSizeChange={handleContentSizeChange}\n                    >\n                        <View style={headerStyle}>\n                            {header}\n                        </View>\n\n                        <View style={childrenStyle}>\n                            {children}\n                        </View>\n                    </BottomSheetScrollView>\n\n                    {stickyBottomElement ? (\n                        <View\n                            style={stickyBottomElementStyle}\n                            onLayout={handleStickyBottomElementLayout}\n                        >\n                            {stickyBottomElement}\n                        </View>\n                    ): null}\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["NoHandle","createHeightLayoutHandler","setHeight","event","height","nativeEvent","layout","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","header","stickyBottomElement","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","enableScrollableHeaderBorder","indexRef","React","useRef","bottomSheetRef","windowHeight","useWindowDimensions","isScrollable","setIsScrollable","useState","topElementHeight","setTopElementHeight","stickyBottomElementHeight","setStickyBottomElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","handleStickyBottomElementLayout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shadow","shape","roundnessExtra","modalStyle","backgroundColor","borderTopLeftRadius","borderTopRightRadius","Platform","select","android","elevation","ios","web","boxShadow","palette","paper","default","backgroundStyle","contentWrapperStyle","flex","overflow","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","handleContentSizeChange","_","contentHeight","headerStyle","borderBottomWidth","borderBottomColor","divider","childrenStyle","paddingBottom","stickyBottomElementShadow","useElevationStyle","stickyBottomElementStyle","renderFooter","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetFooter,\n    BottomSheetFooterProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nconst createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {\n    return (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setHeight(height);\n    };\n}\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        header,\n        stickyBottomElement,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        enableScrollableHeaderBorder = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [isScrollable, setIsScrollable] = React.useState(false);\n    const [topElementHeight, setTopElementHeight] = React.useState(0);\n    const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);\n    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n    const shadow = theme.shadow[12];\n    const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        ...Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        }),\n    };\n    const backgroundColor = theme.palette.paper.default;\n    const backgroundStyle = {\n        backgroundColor,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n    const contentWrapperStyle: ViewStyle = {\n        flex: 1,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        overflow: 'hidden',\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const handleContentSizeChange = (_: number, contentHeight: number) => {\n        setIsScrollable(contentHeight > maxDynamicContentSize);\n    };\n\n    const headerStyle = {\n        backgroundColor,\n        ...(isScrollable && enableScrollableHeaderBorder ? {\n            borderBottomWidth: 0.5,\n            borderBottomColor: theme.palette.divider,\n        }: {})\n    }\n\n    const childrenStyle = {\n        backgroundColor,\n        paddingBottom: stickyBottomElementHeight,\n    }\n\n    const stickyBottomElementShadow = useElevationStyle(8);\n\n    const stickyBottomElementStyle = {\n        backgroundColor: theme.palette.paper.default,\n        ...(isScrollable ? stickyBottomElementShadow : {}),\n    }\n\n    const renderFooter = (props: BottomSheetFooterProps) => (\n        <BottomSheetFooter {...props}>\n            <View\n                onLayout={handleStickyBottomElementLayout}\n                style={stickyBottomElementStyle}\n            >\n                {stickyBottomElement}\n            </View>\n        </BottomSheetFooter>\n    );\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                footerComponent={stickyBottomElement ? renderFooter : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                        onContentSizeChange={handleContentSizeChange}\n                    >\n                        <View style={headerStyle}>\n                            {header}\n                        </View>\n\n                        <View style={childrenStyle}>\n                            {children}\n                        </View>\n                    </BottomSheetScrollView>\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/ComicViewer/ComicViewer.js

@@ -172,9 +172,9 @@ function ComicViewer(props) {
   };
 
   const updateIntrinsicImages = (0, _react.useCallback)(() => {
-    const isInitialCreateFinish = R.all(imageState => imageState.urlState.validity !== 'unknown')(imageStatesRef.current);
+    const isInitialCreateFinish = shouldWaitInitialCreate.current ? R.all(imageState => imageState.urlState.validity !== 'unknown')(imageStatesRef.current) : true;
 
-    if (!isInitialCreateFinish || !shouldWaitInitialCreate.current) {
+    if (!isInitialCreateFinish) {
       return;
     }
 
@@ -284,6 +284,9 @@ function ComicViewer(props) {
       timeoutId && clearTimeout(timeoutId);
     };
   }, []);
+  (0, _react.useEffect)(() => {
+    updateIntrinsicImages();
+  }, [originalIntrinsicImages]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({
     data: itemStates,
     getItemLayout: getItemLayout,

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","ComicViewer","props","debounceMillis","fastScrollOptions","initialNumToRender","initialNumToCreate","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","originalIntrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","initialCreateCount","min","undefined","initialIntrinsicImages","take","setIntrinsicImages","useState","fastScrollRef","ref","flatListRef","useRef","actualImageWidth","Math","initialImageStates","useMemo","imageStatesRef","shouldWaitInitialCreate","isNil","mapImageStatesToItemStates","imageStates","itemStates","setItemStates","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","updateIntrinsicImages","isInitialCreateFinish","all","state","toPairs","mergeDeepLeft","renderItem","handleError","handleReloadPress","onLoad","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        initialNumToCreate,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages: originalIntrinsicImages,\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 initialCreateCount = initialNumToCreate ? R.min(initialNumToCreate, initialNumToRender) : undefined;\n    const initialIntrinsicImages = initialCreateCount ? R.take(initialCreateCount, originalIntrinsicImages) : originalIntrinsicImages;\n    const [intrinsicImages, setIntrinsicImages] = useState(initialIntrinsicImages);\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 shouldWaitInitialCreate = useRef<Boolean>(!R.isNil(initialCreateCount));\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, intrinsicImages]);\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 updateIntrinsicImages = useCallback(() => {\n        const isInitialCreateFinish = R.all((imageState: ImageState) => imageState.urlState.validity !== 'unknown')(imageStatesRef.current);\n\n        if (!isInitialCreateFinish || !shouldWaitInitialCreate.current) {\n            return;\n        }\n\n        setIntrinsicImages(originalIntrinsicImages);\n        const newImageStates = R.map(createInitialImageState, originalIntrinsicImages);\n        imageStatesRef.current = R.map(([, state]: [number, ImageState]) => state)(R.toPairs(R.mergeDeepLeft(imageStatesRef.current, newImageStates)));\n        setItemStates(mapImageStatesToItemStates(imageStatesRef.current));\n\n        shouldWaitInitialCreate.current = false;\n    }, [originalIntrinsicImages, createInitialImageState, mapImageStatesToItemStates]);\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            updateIntrinsicImages();\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            updateIntrinsicImages();\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, updateIntrinsicImages]);\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                initialScrollPercentage={initialScrollPercentage}\n                scrollContentToOffset={scrollContentToOffset}\n            />\n        </React.Fragment>\n    );\n};\n"],"mappings":"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"}
+{"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","initialNumToCreate","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","originalIntrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","initialCreateCount","min","undefined","initialIntrinsicImages","take","setIntrinsicImages","useState","fastScrollRef","ref","flatListRef","useRef","actualImageWidth","Math","initialImageStates","useMemo","imageStatesRef","shouldWaitInitialCreate","isNil","mapImageStatesToItemStates","imageStates","itemStates","setItemStates","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","updateIntrinsicImages","isInitialCreateFinish","all","state","toPairs","mergeDeepLeft","renderItem","handleError","handleReloadPress","onLoad","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        initialNumToCreate,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages: originalIntrinsicImages,\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 initialCreateCount = initialNumToCreate ? R.min(initialNumToCreate, initialNumToRender) : undefined;\n    const initialIntrinsicImages = initialCreateCount ? R.take(initialCreateCount, originalIntrinsicImages) : originalIntrinsicImages;\n    const [intrinsicImages, setIntrinsicImages] = useState(initialIntrinsicImages);\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 shouldWaitInitialCreate = useRef<Boolean>(!R.isNil(initialCreateCount));\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, intrinsicImages]);\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 updateIntrinsicImages = useCallback(() => {\n        const isInitialCreateFinish = shouldWaitInitialCreate.current\n            ? R.all((imageState: ImageState) => imageState.urlState.validity !== 'unknown')(imageStatesRef.current)\n            : true;\n\n        if (!isInitialCreateFinish) {\n            return;\n        }\n\n        setIntrinsicImages(originalIntrinsicImages);\n        const newImageStates = R.map(createInitialImageState, originalIntrinsicImages);\n        imageStatesRef.current = R.map(([, state]: [number, ImageState]) => state)(R.toPairs(R.mergeDeepLeft(imageStatesRef.current, newImageStates)));\n        setItemStates(mapImageStatesToItemStates(imageStatesRef.current));\n\n        shouldWaitInitialCreate.current = false;\n    }, [originalIntrinsicImages, createInitialImageState, mapImageStatesToItemStates]);\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            updateIntrinsicImages();\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            updateIntrinsicImages();\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, updateIntrinsicImages]);\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    useEffect(() => {\n        updateIntrinsicImages();\n    }, [originalIntrinsicImages]);\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                initialScrollPercentage={initialScrollPercentage}\n                scrollContentToOffset={scrollContentToOffset}\n            />\n        </React.Fragment>\n    );\n};\n"],"mappings":"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"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { Animated, Platform, useWindowDimensions, View } from 'react-native';
-import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import { Column, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import TransparentBackdrop from './TransparentBackdrop';
@@ -145,11 +145,14 @@ export default function BottomSheet(props) {
   const stickyBottomElementShadow = useElevationStyle(8);
   const stickyBottomElementStyle = {
     backgroundColor: theme.palette.paper.default,
-    position: 'absolute',
-    width: '100%',
-    bottom: 0,
     ...(isScrollable ? stickyBottomElementShadow : {})
   };
+
+  const renderFooter = props => /*#__PURE__*/React.createElement(BottomSheetFooter, props, /*#__PURE__*/React.createElement(View, {
+    onLayout: handleStickyBottomElementLayout,
+    style: stickyBottomElementStyle
+  }, stickyBottomElement));
+
   return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -165,7 +168,8 @@ export default function BottomSheet(props) {
     enableDynamicSizing: enableDynamicSizing,
     maxDynamicContentSize: maxDynamicContentSize,
     detached: Boolean(topElement),
-    onAnimate: topElement ? onAnimate : undefined
+    onAnimate: topElement ? onAnimate : undefined,
+    footerComponent: stickyBottomElement ? renderFooter : undefined
   }, topElement ? /*#__PURE__*/React.createElement(Animated.View, {
     style: topElementAnimationStyle
   }, /*#__PURE__*/React.createElement(Column, {
@@ -181,10 +185,7 @@ export default function BottomSheet(props) {
     style: headerStyle
   }, header), /*#__PURE__*/React.createElement(View, {
     style: childrenStyle
-  }, children)), stickyBottomElement ? /*#__PURE__*/React.createElement(View, {
-    style: stickyBottomElementStyle,
-    onLayout: handleStickyBottomElementLayout
-  }, stickyBottomElement) : null)));
+  }, children)))));
 }
 ;
 //# sourceMappingURL=BottomSheetNative.js.map

package/build/module/BottomSheet/BottomSheetNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Platform","useWindowDimensions","View","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetScrollView","Column","isNotAndroid12","useAnimatedValue","useElevationStyle","useTheme","TransparentBackdrop","NoHandle","createHeightLayoutHandler","setHeight","event","height","nativeEvent","layout","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","header","stickyBottomElement","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","enableScrollableHeaderBorder","indexRef","useRef","bottomSheetRef","windowHeight","isScrollable","setIsScrollable","useState","topElementHeight","setTopElementHeight","stickyBottomElementHeight","setStickyBottomElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","handleStickyBottomElementLayout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","shape","roundnessExtra","modalStyle","backgroundColor","borderTopLeftRadius","borderTopRightRadius","select","android","elevation","ios","web","boxShadow","palette","paper","default","backgroundStyle","contentWrapperStyle","flex","overflow","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","handleContentSizeChange","_","contentHeight","headerStyle","borderBottomWidth","borderBottomColor","divider","childrenStyle","paddingBottom","stickyBottomElementShadow","stickyBottomElementStyle","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nconst createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {\n    return (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setHeight(height);\n    };\n}\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        header,\n        stickyBottomElement,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        enableScrollableHeaderBorder = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [isScrollable, setIsScrollable] = React.useState(false);\n    const [topElementHeight, setTopElementHeight] = React.useState(0);\n    const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);\n    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n    const shadow = theme.shadow[12];\n    const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        ...Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        }),\n    };\n    const backgroundColor = theme.palette.paper.default;\n    const backgroundStyle = {\n        backgroundColor,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n    const contentWrapperStyle: ViewStyle = {\n        flex: 1,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        overflow: 'hidden',\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const handleContentSizeChange = (_: number, contentHeight: number) => {\n        setIsScrollable(contentHeight > maxDynamicContentSize);\n    };\n\n    const headerStyle = {\n        backgroundColor,\n        ...(isScrollable && enableScrollableHeaderBorder ? {\n            borderBottomWidth: 0.5,\n            borderBottomColor: theme.palette.divider,\n        }: {})\n    }\n\n    const childrenStyle = {\n        backgroundColor,\n        paddingBottom: stickyBottomElementHeight,\n    }\n\n    const stickyBottomElementShadow = useElevationStyle(8);\n\n    const stickyBottomElementStyle = {\n        backgroundColor: theme.palette.paper.default,\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n        ...(isScrollable ? stickyBottomElementShadow : {}),\n    }\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                        onContentSizeChange={handleContentSizeChange}\n                    >\n                        <View style={headerStyle}>\n                            {header}\n                        </View>\n\n                        <View style={childrenStyle}>\n                            {children}\n                        </View>\n                    </BottomSheetScrollView>\n\n                    {stickyBottomElement ? (\n                        <View\n                            style={stickyBottomElementStyle}\n                            onLayout={handleStickyBottomElementLayout}\n                        >\n                            {stickyBottomElement}\n                        </View>\n                    ): null}\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Animated","Platform","useWindowDimensions","View","BottomSheetBackdrop","BottomSheetFooter","BottomSheetModal","BottomSheetModalProvider","BottomSheetScrollView","Column","isNotAndroid12","useAnimatedValue","useElevationStyle","useTheme","TransparentBackdrop","NoHandle","createHeightLayoutHandler","setHeight","event","height","nativeEvent","layout","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","header","stickyBottomElement","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","enableScrollableHeaderBorder","indexRef","useRef","bottomSheetRef","windowHeight","isScrollable","setIsScrollable","useState","topElementHeight","setTopElementHeight","stickyBottomElementHeight","setStickyBottomElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","handleStickyBottomElementLayout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","shape","roundnessExtra","modalStyle","backgroundColor","borderTopLeftRadius","borderTopRightRadius","select","android","elevation","ios","web","boxShadow","palette","paper","default","backgroundStyle","contentWrapperStyle","flex","overflow","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","handleContentSizeChange","_","contentHeight","headerStyle","borderBottomWidth","borderBottomColor","divider","childrenStyle","paddingBottom","stickyBottomElementShadow","stickyBottomElementStyle","renderFooter","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetFooter,\n    BottomSheetFooterProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nconst createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {\n    return (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setHeight(height);\n    };\n}\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        header,\n        stickyBottomElement,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        enableScrollableHeaderBorder = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [isScrollable, setIsScrollable] = React.useState(false);\n    const [topElementHeight, setTopElementHeight] = React.useState(0);\n    const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);\n    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n    const shadow = theme.shadow[12];\n    const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        ...Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        }),\n    };\n    const backgroundColor = theme.palette.paper.default;\n    const backgroundStyle = {\n        backgroundColor,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n    const contentWrapperStyle: ViewStyle = {\n        flex: 1,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        overflow: 'hidden',\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const handleContentSizeChange = (_: number, contentHeight: number) => {\n        setIsScrollable(contentHeight > maxDynamicContentSize);\n    };\n\n    const headerStyle = {\n        backgroundColor,\n        ...(isScrollable && enableScrollableHeaderBorder ? {\n            borderBottomWidth: 0.5,\n            borderBottomColor: theme.palette.divider,\n        }: {})\n    }\n\n    const childrenStyle = {\n        backgroundColor,\n        paddingBottom: stickyBottomElementHeight,\n    }\n\n    const stickyBottomElementShadow = useElevationStyle(8);\n\n    const stickyBottomElementStyle = {\n        backgroundColor: theme.palette.paper.default,\n        ...(isScrollable ? stickyBottomElementShadow : {}),\n    }\n\n    const renderFooter = (props: BottomSheetFooterProps) => (\n        <BottomSheetFooter {...props}>\n            <View\n                onLayout={handleStickyBottomElementLayout}\n                style={stickyBottomElementStyle}\n            >\n                {stickyBottomElement}\n            </View>\n        </BottomSheetFooter>\n    );\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                footerComponent={stickyBottomElement ? renderFooter : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                        onContentSizeChange={handleContentSizeChange}\n                    >\n                        <View style={headerStyle}>\n                            {header}\n                        </View>\n\n                        <View style={childrenStyle}>\n                            {children}\n                        </View>\n                    </BottomSheetScrollView>\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

package/build/module/ComicViewer/ComicViewer.js

@@ -154,9 +154,9 @@ export default function ComicViewer(props) {
   };
 
   const updateIntrinsicImages = useCallback(() => {
-    const isInitialCreateFinish = R.all(imageState => imageState.urlState.validity !== 'unknown')(imageStatesRef.current);
+    const isInitialCreateFinish = shouldWaitInitialCreate.current ? R.all(imageState => imageState.urlState.validity !== 'unknown')(imageStatesRef.current) : true;
 
-    if (!isInitialCreateFinish || !shouldWaitInitialCreate.current) {
+    if (!isInitialCreateFinish) {
       return;
     }
 
@@ -266,6 +266,9 @@ export default function ComicViewer(props) {
       timeoutId && clearTimeout(timeoutId);
     };
   }, []);
+  useEffect(() => {
+    updateIntrinsicImages();
+  }, [originalIntrinsicImages]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlatList, _extends({
     data: itemStates,
     getItemLayout: getItemLayout,

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

@@ -1 +1 @@
-{"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","initialNumToCreate","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","originalIntrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","initialCreateCount","min","undefined","initialIntrinsicImages","take","setIntrinsicImages","fastScrollRef","ref","flatListRef","actualImageWidth","Math","initialImageStates","imageStatesRef","shouldWaitInitialCreate","isNil","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","updateIntrinsicImages","isInitialCreateFinish","all","state","toPairs","mergeDeepLeft","renderItem","handleError","handleReloadPress","onLoad","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        initialNumToCreate,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages: originalIntrinsicImages,\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 initialCreateCount = initialNumToCreate ? R.min(initialNumToCreate, initialNumToRender) : undefined;\n    const initialIntrinsicImages = initialCreateCount ? R.take(initialCreateCount, originalIntrinsicImages) : originalIntrinsicImages;\n    const [intrinsicImages, setIntrinsicImages] = useState(initialIntrinsicImages);\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 shouldWaitInitialCreate = useRef<Boolean>(!R.isNil(initialCreateCount));\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, intrinsicImages]);\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 updateIntrinsicImages = useCallback(() => {\n        const isInitialCreateFinish = R.all((imageState: ImageState) => imageState.urlState.validity !== 'unknown')(imageStatesRef.current);\n\n        if (!isInitialCreateFinish || !shouldWaitInitialCreate.current) {\n            return;\n        }\n\n        setIntrinsicImages(originalIntrinsicImages);\n        const newImageStates = R.map(createInitialImageState, originalIntrinsicImages);\n        imageStatesRef.current = R.map(([, state]: [number, ImageState]) => state)(R.toPairs(R.mergeDeepLeft(imageStatesRef.current, newImageStates)));\n        setItemStates(mapImageStatesToItemStates(imageStatesRef.current));\n\n        shouldWaitInitialCreate.current = false;\n    }, [originalIntrinsicImages, createInitialImageState, mapImageStatesToItemStates]);\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            updateIntrinsicImages();\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            updateIntrinsicImages();\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, updateIntrinsicImages]);\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                initialScrollPercentage={initialScrollPercentage}\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","initialNumToCreate","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicImages","originalIntrinsicImages","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","initialCreateCount","min","undefined","initialIntrinsicImages","take","setIntrinsicImages","fastScrollRef","ref","flatListRef","actualImageWidth","Math","initialImageStates","imageStatesRef","shouldWaitInitialCreate","isNil","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","updateIntrinsicImages","isInitialCreateFinish","all","state","toPairs","mergeDeepLeft","renderItem","handleError","handleReloadPress","onLoad","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        initialNumToCreate,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicImages: originalIntrinsicImages,\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 initialCreateCount = initialNumToCreate ? R.min(initialNumToCreate, initialNumToRender) : undefined;\n    const initialIntrinsicImages = initialCreateCount ? R.take(initialCreateCount, originalIntrinsicImages) : originalIntrinsicImages;\n    const [intrinsicImages, setIntrinsicImages] = useState(initialIntrinsicImages);\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 shouldWaitInitialCreate = useRef<Boolean>(!R.isNil(initialCreateCount));\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, intrinsicImages]);\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 updateIntrinsicImages = useCallback(() => {\n        const isInitialCreateFinish = shouldWaitInitialCreate.current\n            ? R.all((imageState: ImageState) => imageState.urlState.validity !== 'unknown')(imageStatesRef.current)\n            : true;\n\n        if (!isInitialCreateFinish) {\n            return;\n        }\n\n        setIntrinsicImages(originalIntrinsicImages);\n        const newImageStates = R.map(createInitialImageState, originalIntrinsicImages);\n        imageStatesRef.current = R.map(([, state]: [number, ImageState]) => state)(R.toPairs(R.mergeDeepLeft(imageStatesRef.current, newImageStates)));\n        setItemStates(mapImageStatesToItemStates(imageStatesRef.current));\n\n        shouldWaitInitialCreate.current = false;\n    }, [originalIntrinsicImages, createInitialImageState, mapImageStatesToItemStates]);\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            updateIntrinsicImages();\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            updateIntrinsicImages();\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, updateIntrinsicImages]);\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    useEffect(() => {\n        updateIntrinsicImages();\n    }, [originalIntrinsicImages]);\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                initialScrollPercentage={initialScrollPercentage}\n                scrollContentToOffset={scrollContentToOffset}\n            />\n        </React.Fragment>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,OAAxC,EAAiDC,MAAjD,EAAyDC,QAAzD,QAAyE,OAAzE;AACA,SAASC,QAAT,EAA4EC,QAA5E,QAAuG,cAAvG;AACA,OAAO,KAAKC,CAAZ,MAAmB,OAAnB;AAEA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,UAAP,MAAuB,cAAvB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,IAAD,EAAeC,KAAf,KAAmD,CAACD,IAAI,GAAGC,KAAR,EAAeD,IAAI,GAAGC,KAAtB,CAApE;;AACA,MAAMC,cAAc,GAAIC,OAAD,IAA2CP,CAAC,CAACQ,QAAF,CAAWL,QAAX,EAAqB,CAArB,EAAwBI,OAAxB,CAAlE;;AAEA,MAAME,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,GAAG1B,CAAC,CAAC2B,QAAF,CAA2B3B,CAAC,CAAC4B,GAA7B,CAAnB;AAEA,MAAMC,aAAa,GAAG,GAAtB;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,cAAc,GAAG,GADf;IAEFT,oBAAoB,GAAG,CAFrB;IAGFU,iBAHE;IAIFC,kBAAkB,GAAG,CAJnB;IAKFC,kBALE;IAMFC,uBAAuB,GAAG,CANxB;IAOFC,2BAA2B,GAAG,CAP5B;IAQFC,eAAe,EAAEC,uBARf;IASFC,eAAe,GAAGX,aAThB;IAUFY,WAVE;IAWFC,QAXE;IAYFC,OAZE;IAaFC,aAbE;IAcFC,aAdE;IAeFC,mBAAmB,GAAG,CAfpB;IAgBFC,UAAU,GAAG,CAhBX;IAiBF,GAAGC;EAjBD,IAkBFjB,KAlBJ;EAoBA,MAAMkB,kBAAkB,GAAGd,kBAAkB,GAAGnC,CAAC,CAACkD,GAAF,CAAMf,kBAAN,EAA0BD,kBAA1B,CAAH,GAAmDiB,SAAhG;EACA,MAAMC,sBAAsB,GAAGH,kBAAkB,GAAGjD,CAAC,CAACqD,IAAF,CAAOJ,kBAAP,EAA2BV,uBAA3B,CAAH,GAAyDA,uBAA1G;EACA,MAAM,CAACD,eAAD,EAAkBgB,kBAAlB,IAAwCzD,QAAQ,CAACuD,sBAAD,CAAtD;EAEA,MAAMG,aAAa,GAAGtB,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEuB,GAAzC;EAEA,MAAMC,WAAW,GAAG7D,MAAM,CAAW,IAAX,CAA1B;EAEA,MAAM8D,gBAAgB,GAAGC,IAAI,CAACT,GAAL,CAASL,aAAT,EAAwBL,eAAxB,CAAzB;EAEA,MAAMoB,kBAAkB,GAAGjE,OAAO,CAAoB,MAAMK,CAAC,CAAC4B,GAAF,CAAMf,uBAAN,EAA+ByB,eAA/B,CAA1B,EAA2E,EAA3E,CAAlC;EAEA,MAAMuB,cAAc,GAAGjE,MAAM,CAAoBgE,kBAApB,CAA7B;EAEA,MAAME,uBAAuB,GAAGlE,MAAM,CAAU,CAACI,CAAC,CAAC+D,KAAF,CAAQd,kBAAR,CAAX,CAAtC;;EAEA,MAAMe,0BAA0B,GAAIC,WAAD,IAAsD;IACrF,OAAOA,WAAW,CAACrC,GAAZ,CAAgB,CAACd,KAAD,EAAQF,KAAR,KAAkBS,wBAAwB,CAC7DT,KAD6D,EACtDE,KADsD,EAC/CS,oBAD+C,CAA1D,CAAP;EAGH,CAJD;;EAMA,MAAM,CAAC2C,UAAD,EAAaC,aAAb,IAA8BtE,QAAQ,CAAmB,MAAM;IACjE,OAAOmE,0BAA0B,CAACH,cAAc,CAACO,OAAhB,CAAjC;EACH,CAF2C,CAA5C;EAIA,MAAMC,kBAAkB,GAAG1E,OAAO,CAAmB,MAAM;IACvD,OAAO+B,UAAU,CAAC,CAAC4C,cAAD,EAAiB1D,KAAjB,KAA2B;MACzC,MAAM2D,MAAM,GAAID,cAAc,CAACtD,SAAf,CAAyBuD,MAAzB,GAAkCb,gBAAnC,GAAuDY,cAAc,CAACtD,SAAf,CAAyBwD,KAAhF,IAAyF5D,KAAK,KAAK,CAAV,GAAckC,mBAAd,GAAoC,CAA7H,CAAf;MAEA,OAAO;QACH0B,KAAK,EAAEd,gBADJ;QAEHa,MAAM,EAAEE,KAAK,CAACF,MAAD,CAAL,GAAgB,CAAhB,GAAoBA;MAFzB,CAAP;IAIH,CAPgB,EAOdjC,eAPc,CAAjB;EAQH,CATiC,EAS/B,CAACoB,gBAAD,EAAmBpB,eAAnB,CAT+B,CAAlC;EAWA,MAAMoC,oBAAoB,GAAGjF,WAAW,CAAC,MAAM;IAC3C,MAAMkF,WAAW,GAAG3E,CAAC,CAAC4B,GAAF,CAAMZ,SAAS,IAAIA,SAAS,CAACuD,MAA7B,EAAqCF,kBAArC,CAApB;IACA,MAAM,CAACO,WAAD,EAAcC,WAAd,IAA6BvE,cAAc,CAACqE,WAAD,CAAjD;IACA,MAAMG,WAAW,GAAG9E,CAAC,CAAC+E,OAAF,CAAU,CAAV,EAAaF,WAAb,CAApB;;IAEA,MAAMG,aAAa,GAAG,CAACC,IAAD,EAAYrE,KAAZ,MAA+B;MACjDA,KADiD;MAEjDsE,MAAM,EAAEP,WAAW,CAAC/D,KAAD,CAF8B;MAGjDuE,MAAM,EAAEL,WAAW,CAAClE,KAAD;IAH8B,CAA/B,CAAtB;;IAMA,OAAO;MACHgE,WADG;MAEHI;IAFG,CAAP;EAIH,CAfuC,EAerC,CAACX,kBAAD,CAfqC,CAAxC;EAiBA,MAAM;IAAEO,WAAF;IAAeI;EAAf,IAAiCN,oBAAoB,EAA3D;EAEA,MAAMU,iBAAiB,GAAGzF,OAAO,CAAC,OAAO;IACrC0C;EADqC,CAAP,CAAD,EAE7B,CAACA,2BAAD,CAF6B,CAAjC;;EAIA,MAAMgD,gBAAgB,GAAIC,cAAD,IAAqE;IAC1F,MAAMC,eAAe,GAAG1B,cAAc,CAACO,OAAvC;IACA,MAAMoB,cAAc,GAAGD,eAAe,CAAC3D,GAAhB,CAAoB0D,cAApB,CAAvB;IAEAzB,cAAc,CAACO,OAAf,GAAyBoB,cAAzB;IAEArB,aAAa,CAACsB,cAAc,IAAI;MAC5B,MAAMC,aAAa,GAAG1B,0BAA0B,CAACwB,cAAD,CAAhD;MAEA,OAAOxF,CAAC,CAAC2F,MAAF,CAASF,cAAT,EAAyBC,aAAzB,IAA0CD,cAA1C,GAA2DC,aAAlE;IACH,CAJY,CAAb;EAKH,CAXD;;EAaA,MAAME,wBAAwB,GAAG,MAAM;IACnC,MAAM3E,kBAAkB,GAAG,IAAI4E,IAAJ,GAAWC,OAAX,EAA3B;IAEAT,gBAAgB,CAAC,CAAC/D,UAAD,EAAayE,CAAb,KAAmB;MAChC,MAAM7E,QAAQ,GAAGI,UAAU,CAACJ,QAA5B;;MAEA,IAAI,CAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEE,QAAV,MAAuB,SAA3B,EAAsC;QAClC,OAAO,EACH,GAAGE,UADA;UAEHL;QAFG,CAAP;MAIH;;MAED,OAAOK,UAAP;IACH,CAXe,CAAhB;EAYH,CAfD;;EAgBA,MAAM0E,sBAAsB,GAAGpG,MAAM,CAAC,QAA4D;IAAA,IAA3D;MAAEqG;IAAF,CAA2D;IAC9FL,wBAAwB;EAC3B,CAFoC,CAArC;EAIA,MAAMM,YAAY,GAAGzG,WAAW,CAAE0G,KAAD,IAAoD;IAAA;;IACjF5C,aAAa,SAAb,IAAAA,aAAa,WAAb,qCAAAA,aAAa,CAAEa,OAAf,gFAAwBgC,eAAxB,CAAwCD,KAAxC;IAEAzD,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGyD,KAAH,CAAR;EACH,CAJ+B,EAI7B,CAACzD,QAAD,CAJ6B,CAAhC;;EAMA,MAAM2D,qBAAqB,GAAIlB,MAAD,IAAoB;IAAA;;IAC9C,wBAAA1B,WAAW,CAACW,OAAZ,8EAAqBkC,cAArB,CAAoC;MAChCnB,MADgC;MAEhCoB,QAAQ,EAAE;IAFsB,CAApC;EAIH,CALD;;EAOA,MAAMC,qBAAqB,GAAG/G,WAAW,CAAC,MAAM;IAC5C,MAAMgH,qBAAqB,GAAG3C,uBAAuB,CAACM,OAAxB,GACxBpE,CAAC,CAAC0G,GAAF,CAAOpF,UAAD,IAA4BA,UAAU,CAACJ,QAAX,CAAoBE,QAApB,KAAiC,SAAnE,EAA8EyC,cAAc,CAACO,OAA7F,CADwB,GAExB,IAFN;;IAIA,IAAI,CAACqC,qBAAL,EAA4B;MACxB;IACH;;IAEDnD,kBAAkB,CAACf,uBAAD,CAAlB;IACA,MAAMiD,cAAc,GAAGxF,CAAC,CAAC4B,GAAF,CAAMf,uBAAN,EAA+B0B,uBAA/B,CAAvB;IACAsB,cAAc,CAACO,OAAf,GAAyBpE,CAAC,CAAC4B,GAAF,CAAM;MAAA,IAAC,GAAG+E,KAAH,CAAD;MAAA,OAAqCA,KAArC;IAAA,CAAN,EAAkD3G,CAAC,CAAC4G,OAAF,CAAU5G,CAAC,CAAC6G,aAAF,CAAgBhD,cAAc,CAACO,OAA/B,EAAwCoB,cAAxC,CAAV,CAAlD,CAAzB;IACArB,aAAa,CAACH,0BAA0B,CAACH,cAAc,CAACO,OAAhB,CAA3B,CAAb;IAEAN,uBAAuB,CAACM,OAAxB,GAAkC,KAAlC;EACH,CAfwC,EAetC,CAAC7B,uBAAD,EAA0B1B,uBAA1B,EAAmDmD,0BAAnD,CAfsC,CAAzC;EAiBA,MAAM8C,UAAqC,GAAGrH,WAAW,CAAC,SAAqB;IAAA;;IAAA,IAApB;MAAEiB,IAAF;MAAQE;IAAR,CAAoB;;IAC3E,MAAMmG,WAAW,GAAG,MAAM;MACtBpE,OAAO,IAAIA,OAAO,EAAlB;MAEA0C,gBAAgB,CAAC,CAAC/D,UAAD,EAAayE,CAAb,KAAmB;QAChC,MAAM7E,QAAQ,GAAGI,UAAU,CAACJ,QAA5B;;QAEA,IAAI6E,CAAC,KAAKnF,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+E,qBAAqB;MAErBZ,wBAAwB;IAC3B,CA3BD;;IA6BA,MAAMoB,iBAAiB,GAAG,MAAM;MAC5BpE,aAAa,IAAIA,aAAa,EAA9B;MAEAgD,wBAAwB;IAC3B,CAJD;;IAMA,MAAMqB,MAAM,GAAG,MAAM;MACjB5B,gBAAgB,CAAC,CAAC/D,UAAD,EAAayE,CAAb,KAAmB;QAChC,MAAM7E,QAAQ,GAAGI,UAAU,CAACJ,QAA5B;;QAEA,IAAI6E,CAAC,KAAKnF,KAAN,IAAeM,QAAQ,KAAKiC,SAAhC,EAA2C;UACvC,OAAO,EACH,GAAG7B,UADA;YAEHJ,QAAQ,EAAE,EACN,GAAGA,QADG;cAENE,QAAQ,EAAE;YAFJ;UAFP,CAAP;QAOH;;QAED,OAAOE,UAAP;MACH,CAde,CAAhB;MAgBAkF,qBAAqB;IACxB,CAlBD;;IAoBA,oBACI,oBAAC,UAAD;MACI,OAAO,EAAEO,WADb;MAEI,MAAM,EAAEE,MAFZ;MAGI,OAAO,EAAExE,WAHb;MAII,aAAa,EAAEuE,iBAJnB;MAKI,GAAG,EAAEtG,IAAI,CAACS,GALd;MAMI,QAAQ,EAAET,IAAI,CAACc,QANnB;MAOI,mBAAmB,EAAEZ,KAAK,KAAK,CAAV,GAAckC,mBAAd,GAAoC,CAP7D;MAQI,KAAK,EAAE,0BAAAuB,kBAAkB,CAACzD,KAAD,CAAlB,gFAA2B4D,KAA3B,KAAoC,CAR/C;MASI,MAAM,EAAE,2BAAAH,kBAAkB,CAACzD,KAAD,CAAlB,kFAA2B2D,MAA3B,KAAqC,CATjD;MAUI,mBAAmB,EAAE7D,IAAI,CAACe;IAV9B,EADJ;EAcH,CAtEwD,EAsEtD,CAACgB,WAAD,EAAc4B,kBAAd,EAAkCmC,qBAAlC,CAtEsD,CAAzD;EAwEA9G,SAAS,CAAC,MAAM;IACZ,MAAMwH,MAAM,GAAG,MAAM;MACjB,MAAM/B,MAAM,GAAGxB,IAAI,CAACwD,KAAL,CAAY/E,uBAAuB,GAAG,GAA3B,GAAkCwC,WAA7C,CAAf;;MAEA,IAAInB,WAAW,CAACW,OAAhB,EAAyB;QACrBX,WAAW,CAACW,OAAZ,CAAoBkC,cAApB,CAAmC;UAAEnB,MAAF;UAAUoB,QAAQ,EAAE;QAApB,CAAnC;MACH;IACJ,CAND;;IAQA,IAAIa,SAAqC,GAAGjE,SAA5C;IAEA;AACR;AACA;AACA;AACA;;IACQ,IAAIpD,QAAQ,CAACsH,EAAT,KAAgB,KAApB,EAA2B;MACvBD,SAAS,GAAGE,UAAU,CAACJ,MAAD,EAAS,CAAT,CAAtB;IACH,CAFD,MAEO;MACHA,MAAM;IACT;;IAED,OAAO,MAAM;MACTE,SAAS,IAAIG,YAAY,CAACH,SAAD,CAAzB;IACH,CAFD;EAGH,CAzBQ,EAyBN,EAzBM,CAAT;EA2BA1H,SAAS,CAAC,MAAM;IACZ8G,qBAAqB;EACxB,CAFQ,EAEN,CAACjE,uBAAD,CAFM,CAAT;EAIA,oBACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,QAAD;IACI,IAAI,EAAE2B,UADV;IAEI,aAAa,EAAEc,aAFnB;IAGI,kBAAkB,EAAE9C,kBAHxB;IAII,YAAY,EAAEzB,YAJlB;IAKI,sBAAsB,EAAEuF,sBAAsB,CAAC5B,OALnD;IAMI,GAAG,EAAEX,WANT;IAOI,UAAU,EAAEqD,UAPhB;IAQI,iBAAiB,EAAE1B,iBARvB;IASI,UAAU,EAAErC,UAThB;IAUI,QAAQ,EAAEmD;EAVd,GAWQlD,UAXR,EADJ,eAeI,oBAAC,UAAD,eACQf,iBADR;IAEI,aAAa,EAAE2C,WAFnB;IAGI,uBAAuB,EAAExC,uBAH7B;IAII,qBAAqB,EAAEiE;EAJ3B,GAfJ,CADJ;AAwBH;AAAA"}

package/package.json

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

package/src/BottomSheet/BottomSheetNative.tsx

@@ -3,6 +3,8 @@ import { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewS
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
+    BottomSheetFooter,
+    BottomSheetFooterProps,
     BottomSheetModal,
     BottomSheetModalProvider,
     BottomSheetScrollView,
@@ -153,12 +155,20 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     const stickyBottomElementStyle = {
         backgroundColor: theme.palette.paper.default,
-        position: 'absolute',
-        width: '100%',
-        bottom: 0,
         ...(isScrollable ? stickyBottomElementShadow : {}),
     }
 
+    const renderFooter = (props: BottomSheetFooterProps) => (
+        <BottomSheetFooter {...props}>
+            <View
+                onLayout={handleStickyBottomElementLayout}
+                style={stickyBottomElementStyle}
+            >
+                {stickyBottomElement}
+            </View>
+        </BottomSheetFooter>
+    );
+
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
@@ -177,6 +187,7 @@ export default function BottomSheet(props: BottomSheetProps) {
                 maxDynamicContentSize={maxDynamicContentSize}
                 detached={Boolean(topElement)}
                 onAnimate={topElement ? onAnimate : undefined}
+                footerComponent={stickyBottomElement ? renderFooter : undefined}
             >
                 {topElement ? (
                     <Animated.View style={topElementAnimationStyle}>
@@ -203,15 +214,6 @@ export default function BottomSheet(props: BottomSheetProps) {
                             {children}
                         </View>
                     </BottomSheetScrollView>
-
-                    {stickyBottomElement ? (
-                        <View
-                            style={stickyBottomElementStyle}
-                            onLayout={handleStickyBottomElementLayout}
-                        >
-                            {stickyBottomElement}
-                        </View>
-                    ): null}
                 </View>
             </BottomSheetModal>
         </BottomSheetModalProvider>

package/src/ComicViewer/ComicViewer.tsx

@@ -184,9 +184,11 @@ export default function ComicViewer(props: ComicViewerProps) {
     };
 
     const updateIntrinsicImages = useCallback(() => {
-        const isInitialCreateFinish = R.all((imageState: ImageState) => imageState.urlState.validity !== 'unknown')(imageStatesRef.current);
+        const isInitialCreateFinish = shouldWaitInitialCreate.current
+            ? R.all((imageState: ImageState) => imageState.urlState.validity !== 'unknown')(imageStatesRef.current)
+            : true;
 
-        if (!isInitialCreateFinish || !shouldWaitInitialCreate.current) {
+        if (!isInitialCreateFinish) {
             return;
         }
 
@@ -297,6 +299,10 @@ export default function ComicViewer(props: ComicViewerProps) {
         };
     }, []);
 
+    useEffect(() => {
+        updateIntrinsicImages();
+    }, [originalIntrinsicImages]);
+
     return (
         <React.Fragment>
             <FlatList