@fountain-ui/lab 2.0.0-beta.33 → 2.0.0-beta.35

package/build/commonjs/ComicViewer/ViewerItem.js

@@ -3,188 +3,73 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = ViewerItem;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var R = _interopRequireWildcard(require("ramda"));
-
 var _core = require("@fountain-ui/core");
 
-var _icons = require("@fountain-ui/icons");
+var _ReloadButton = _interopRequireDefault(require("./ReloadButton"));
 
-var _ComicViewerProps = require("./ComicViewerProps");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const useStyles = function () {
-  const theme = (0, _core.useTheme)();
-  return {
-    root: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center'
-    },
-    init: {
-      backgroundColor: theme.palette.paper.grey
-    },
-    failed: {
-      backgroundColor: theme.palette.paper.grey
-    },
-    reload: {
-      backgroundColor: theme.palette.paper.grey,
-      display: 'flex',
-      alignItems: 'center'
-    }
-  };
-};
-
-function ViewerItem(_ref) {
-  var _itemState$error;
-
-  let {
-    props
-  } = _ref;
+function ViewerItem(props) {
   const {
-    expiresAt,
-    errorRetryCount = 3,
     height,
-    itemState,
-    isViewable,
-    sortKey,
     url,
     width,
-    getNextPage,
     onError,
-    onLoaded,
-    onItemPress
+    onLoad,
+    onPress,
+    onReloadPress,
+    reloadButtonVisible = false
   } = props;
-  const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
-  const styles = useStyles();
-  const errorCount = (0, _react.useRef)(R.defaultTo(0)(itemState === null || itemState === void 0 ? void 0 : (_itemState$error = itemState.error) === null || _itemState$error === void 0 ? void 0 : _itemState$error.count));
-  const onLoad = (0, _react.useCallback)(() => {
-    errorCount.current = 0;
-    setIsLoaded(true);
-    onLoaded && onLoaded(sortKey);
-  }, [sortKey]);
-  const handleError = (0, _react.useCallback)(() => {
-    errorCount.current = errorCount.current + 1;
-    const now = new Date();
-    const utcNow = now.getTime() + now.getTimezoneOffset() * 60 * 1000;
-    const expired = new Date(expiresAt).getTime() <= utcNow;
-    onError && onError({
-      sortKey,
-      count: errorCount.current,
-      expired
-    });
-  }, [errorCount.current]);
-  const onReloadPress = (0, _react.useCallback)(() => {
-    errorCount.current = 1;
-    onError && onError({
-      sortKey,
-      count: errorCount.current,
-      expired: false
-    });
-  }, [sortKey]);
-  const viewStyle = {
-    width: '100%',
-    height,
-    ..._reactNative.Platform.select({
-      web: {
-        'cursor': 'default'
-      }
-    })
-  };
-  const imageStyle = {
-    width,
-    height
-  };
-  const Placeholder = (0, _react.useCallback)(props => {
-    const {
-      children,
-      failed
-    } = props;
-
-    if (!(isViewable || isLoaded) || failed || (itemState === null || itemState === void 0 ? void 0 : itemState.state) === _ComicViewerProps.STATE.INIT) {
-      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-        style: [viewStyle, styles.init]
-      });
-    }
-
-    if (errorCount.current >= errorRetryCount) {
-      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-        style: [viewStyle, styles.reload]
-      }, /*#__PURE__*/_react.default.createElement(_core.Spacer, {
-        size: 20
-      }), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-        children: /*#__PURE__*/_react.default.createElement(_icons.Restart, {
-          fill: '#ffffff'
-        }),
-        style: {
-          width: 48,
-          height: 48,
-          borderRadius: 24,
-          color: '#ffffff',
-          backgroundColor: '#767676'
-        },
-        onPress: onReloadPress
-      }));
-    }
-
-    return children;
-  }, [isViewable, isLoaded, errorCount.current, url, onItemPress]);
-  (0, _react.useEffect)(() => {
-    if ((itemState === null || itemState === void 0 ? void 0 : itemState.state) === _ComicViewerProps.STATE.INIT) {
-      getNextPage === null || getNextPage === void 0 ? void 0 : getNextPage(sortKey);
+  const styles = {
+    view: {
+      height,
+      width: '100%'
+    },
+    image: {
+      height,
+      width
     }
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    activeOpacity: 1,
-    onPress: onItemPress
+  };
+  const error = reloadButtonVisible ? /*#__PURE__*/_react.default.createElement(_ReloadButton.default, {
+    onPress: onReloadPress
+  }) : null;
+  const placeholder = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: require('./checkered-loading.jpg'),
+    resizeMode: "repeat",
+    style: styles.image
+  }), [width]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
+    onPress: onPress
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.root, viewStyle]
+    style: styles.view
   }, /*#__PURE__*/_react.default.createElement(_core.Image, {
-    disableOutline: true,
-    key: sortKey,
-    disableLongClick: true,
     disableDrag: true,
+    disableLongClick: true,
+    disableOutline: true,
+    error: error,
+    onError: onError,
     onLoad: onLoad,
-    onError: handleError,
     loading: 'eager',
+    placeholder: placeholder,
     source: {
       uri: url
     },
-    style: imageStyle,
     square: true,
-    Placeholder: Placeholder
+    style: (0, _core.css)([{
+      alignSelf: 'center'
+    }, styles.image])
   })));
 }
 
-var _default = /*#__PURE__*/_react.default.memo(ViewerItem, (prevProps, nextProps) => {
-  var _prevProps$props$item, _nextProps$props$item;
-
-  if (prevProps.props.isViewable !== nextProps.props.isViewable) {
-    return false;
-  }
-
-  if (prevProps.props.url !== nextProps.props.url) {
-    return false;
-  }
-
-  if (prevProps.props.width !== nextProps.props.width) {
-    return false;
-  }
-
-  if (((_prevProps$props$item = prevProps.props.itemState) === null || _prevProps$props$item === void 0 ? void 0 : _prevProps$props$item.state) !== ((_nextProps$props$item = nextProps.props.itemState) === null || _nextProps$props$item === void 0 ? void 0 : _nextProps$props$item.state)) {
-    return false;
-  }
-
-  return true;
-});
-
-exports.default = _default;
+;
 //# sourceMappingURL=ViewerItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","display","flexDirection","justifyContent","init","backgroundColor","palette","paper","grey","failed","reload","alignItems","ViewerItem","props","expiresAt","errorRetryCount","height","itemState","isViewable","sortKey","url","width","getNextPage","onError","onLoaded","onItemPress","isLoaded","setIsLoaded","useState","styles","errorCount","useRef","R","defaultTo","error","count","onLoad","useCallback","current","handleError","now","Date","utcNow","getTime","getTimezoneOffset","expired","onReloadPress","viewStyle","Platform","select","web","imageStyle","Placeholder","children","state","STATE","INIT","borderRadius","color","useEffect","uri","React","memo","prevProps","nextProps"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Platform, TouchableOpacity, View } from 'react-native';\nimport * as R from 'ramda';\nimport type { PlaceholderProps } from '@fountain-ui/core';\nimport { IconButton, Image, Spacer, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Restart } from '@fountain-ui/icons';\nimport ComicViewerItemProps from './ComicViewerItemProps';\nimport { STATE } from './ComicViewerProps';\n\ntype PlaceholderStyles = NamedStylesStringUnion<'init' | 'failed' | 'reload' | 'root'>;\n\nconst useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            display: 'flex',\n            flexDirection: 'row',\n            justifyContent: 'center',\n        },\n        init: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        failed: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        reload: {\n            backgroundColor: theme.palette.paper.grey,\n            display: 'flex',\n            alignItems: 'center',\n        },\n    };\n};\n\nfunction ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {\n    const {\n        expiresAt,\n        errorRetryCount = 3,\n        height,\n        itemState,\n        isViewable,\n        sortKey,\n        url,\n        width,\n        getNextPage,\n        onError,\n        onLoaded,\n        onItemPress,\n    } = props;\n\n    const [isLoaded, setIsLoaded] = useState(false);\n\n    const styles = useStyles();\n\n    const errorCount = useRef<number>(R.defaultTo(0)(itemState?.error?.count));\n\n    const onLoad = useCallback(() => {\n        errorCount.current = 0;\n\n        setIsLoaded(true);\n\n        onLoaded && onLoaded(sortKey);\n    }, [sortKey]);\n\n    const handleError = useCallback(() => {\n        errorCount.current = errorCount.current + 1;\n\n        const now = new Date();\n        const utcNow = now.getTime() + (now.getTimezoneOffset() * 60 * 1000);\n        const expired = new Date(expiresAt).getTime() <= utcNow;\n\n        onError && onError({\n            sortKey,\n            count: errorCount.current,\n            expired,\n        });\n    }, [errorCount.current]);\n\n    const onReloadPress = useCallback(() => {\n        errorCount.current = 1;\n\n        onError && onError({\n            sortKey,\n            count: errorCount.current,\n            expired: false,\n        });\n    }, [sortKey]);\n\n    const viewStyle = {\n        width: '100%',\n        height,\n        ...Platform.select({\n            web: { 'cursor': 'default' },\n        }),\n    };\n\n    const imageStyle = { width, height };\n\n    const Placeholder = useCallback((props: PlaceholderProps) => {\n        const { children, failed } = props;\n\n        if (!(isViewable || isLoaded)\n            || failed\n            || itemState?.state === STATE.INIT\n        ) {\n            return <View style={[\n                viewStyle,\n                styles.init,\n            ]}/>;\n        }\n\n        if (errorCount.current >= errorRetryCount) {\n            return <View style={[\n                viewStyle,\n                styles.reload,\n            ]}>\n                <Spacer size={20}/>\n\n                <IconButton\n                    children={<Restart fill={'#ffffff'}/>}\n                    style={{\n                        width: 48,\n                        height: 48,\n                        borderRadius: 24,\n                        color: '#ffffff',\n                        backgroundColor: '#767676',\n                    }}\n                    onPress={onReloadPress}\n                />\n            </View>;\n        }\n\n        return children;\n    }, [isViewable, isLoaded, errorCount.current, url, onItemPress]);\n\n    useEffect(() => {\n        if (itemState?.state === STATE.INIT) {\n            getNextPage?.(sortKey);\n        }\n    }, []);\n\n    return (\n        <TouchableOpacity\n            activeOpacity={1}\n            onPress={onItemPress}\n        >\n            <View\n                style={[\n                    styles.root,\n                    viewStyle,\n                ]}\n            >\n                <Image\n                    disableOutline={true}\n                    key={sortKey}\n                    disableLongClick={true}\n                    disableDrag={true}\n                    onLoad={onLoad}\n                    onError={handleError}\n                    loading={'eager'}\n                    source={{ uri: url }}\n                    style={imageStyle}\n                    square={true}\n                    Placeholder={Placeholder}\n                />\n            </View>\n        </TouchableOpacity>\n    );\n}\n\nexport default React.memo(ViewerItem, (prevProps, nextProps) => {\n    if (prevProps.props.isViewable !== nextProps.props.isViewable) {\n        return false;\n    }\n\n    if (prevProps.props.url !== nextProps.props.url) {\n        return false;\n    }\n\n    if (prevProps.props.width !== nextProps.props.width) {\n        return false;\n    }\n\n    if (prevProps.props.itemState?.state !== nextProps.props.itemState?.state) {\n        return false;\n    }\n\n    return true;\n});\n"],"mappings":"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"}
+{"version":3,"names":["ViewerItem","props","height","url","width","onError","onLoad","onPress","onReloadPress","reloadButtonVisible","styles","view","image","error","placeholder","useMemo","require","uri","css","alignSelf"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Image, TouchableWithoutFeedback, View } from 'react-native';\nimport { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';\nimport ReloadButton from './ReloadButton';\n\nexport interface ViewerItemProps {\n    /**\n     * Image width.\n     */\n    width: number;\n\n    /**\n     * Image height.\n     */\n    height: number;\n\n    /**\n     * Image sourceUrl for displaying.\n     */\n    url?: string;\n\n    /**\n     * Error handler.\n     */\n    onError?: ImageProps['onError'];\n\n    /**\n     * Load handler.\n     */\n    onLoad?: ImageProps['onLoad'];\n\n    /**\n     * Handle Reload button press event.\n     */\n    onReloadPress?: ImageProps['onError'];\n\n    /**\n     * Handle item press event.\n     */\n    onPress?: () => void;\n\n    /**\n     * If true, reload button visible.\n     * @default false\n     */\n    reloadButtonVisible?: boolean;\n}\n\nexport default function ViewerItem(props: ViewerItemProps) {\n    const {\n        height,\n        url,\n        width,\n        onError,\n        onLoad,\n        onPress,\n        onReloadPress,\n        reloadButtonVisible = false,\n    } = props;\n\n    const styles = {\n        view: {\n            height,\n            width: '100%',\n        },\n        image: {\n            height,\n            width,\n        },\n    };\n\n    const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;\n\n    const placeholder = useMemo(() => <Image\n        source={require('./checkered-loading.jpg')}\n        resizeMode=\"repeat\"\n        style={styles.image}\n    />, [width]);\n\n    return (\n        <TouchableWithoutFeedback onPress={onPress}>\n            <View style={styles.view}>\n                <FuiImage\n                    disableDrag={true}\n                    disableLongClick={true}\n                    disableOutline={true}\n                    error={error}\n                    onError={onError}\n                    onLoad={onLoad}\n                    loading={'eager'}\n                    placeholder={placeholder}\n                    source={{ uri: url }}\n                    square={true}\n                    style={css([\n                        { alignSelf: 'center' },\n                        styles.image,\n                    ])}\n                />\n            </View>\n        </TouchableWithoutFeedback>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AA6Ce,SAASA,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,MADE;IAEFC,GAFE;IAGFC,KAHE;IAIFC,OAJE;IAKFC,MALE;IAMFC,OANE;IAOFC,aAPE;IAQFC,mBAAmB,GAAG;EARpB,IASFR,KATJ;EAWA,MAAMS,MAAM,GAAG;IACXC,IAAI,EAAE;MACFT,MADE;MAEFE,KAAK,EAAE;IAFL,CADK;IAKXQ,KAAK,EAAE;MACHV,MADG;MAEHE;IAFG;EALI,CAAf;EAWA,MAAMS,KAAK,GAAGJ,mBAAmB,gBAAG,6BAAC,qBAAD;IAAc,OAAO,EAAED;EAAvB,EAAH,GAA6C,IAA9E;EAEA,MAAMM,WAAW,GAAG,IAAAC,cAAA,EAAQ,mBAAM,6BAAC,kBAAD;IAC9B,MAAM,EAAEC,OAAO,CAAC,yBAAD,CADe;IAE9B,UAAU,EAAC,QAFmB;IAG9B,KAAK,EAAEN,MAAM,CAACE;EAHgB,EAAd,EAIhB,CAACR,KAAD,CAJgB,CAApB;EAMA,oBACI,6BAAC,qCAAD;IAA0B,OAAO,EAAEG;EAAnC,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,gBACI,6BAAC,WAAD;IACI,WAAW,EAAE,IADjB;IAEI,gBAAgB,EAAE,IAFtB;IAGI,cAAc,EAAE,IAHpB;IAII,KAAK,EAAEE,KAJX;IAKI,OAAO,EAAER,OALb;IAMI,MAAM,EAAEC,MANZ;IAOI,OAAO,EAAE,OAPb;IAQI,WAAW,EAAEQ,WARjB;IASI,MAAM,EAAE;MAAEG,GAAG,EAAEd;IAAP,CATZ;IAUI,MAAM,EAAE,IAVZ;IAWI,KAAK,EAAE,IAAAe,SAAA,EAAI,CACP;MAAEC,SAAS,EAAE;IAAb,CADO,EAEPT,MAAM,CAACE,KAFA,CAAJ;EAXX,EADJ,CADJ,CADJ;AAsBH;;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';\nexport type { default as ComicViewerItemProps } from './ComicViewerItemProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { Dimension, default as ComicViewerProps } from './ComicViewerProps';\nexport type { ViewerItemProps } from './ViewerItem';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/module/ComicViewer/ComicViewer.js

@@ -3,183 +3,238 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList } from 'react-native';
 import * as R from 'ramda';
-import { STATE } from './ComicViewerProps';
+import { useDebounce } from '@fountain-ui/core';
 import ViewerItem from './ViewerItem';
 
-const getItemHeights = items => R.map(content => content.height)(items);
-
 const appender = (left, right) => [left + right, left + right];
 
-const getHeightAccum = itemHeights => R.mapAccum(appender, 0, itemHeights);
+const getHeightAccum = heights => R.mapAccum(appender, 0, heights);
+
+const keyExtractor = item => String(item.index);
+
+const createInitialImageState = dimension => ({
+  isNewUrlIncoming: false,
+  totalErrorCount: 0,
+  dimension
+});
 
-const keyExtractor = item => `${item.sortKey}`;
+const mapImageStateToItemState = (index, imageState, autoHandleErrorCount) => {
+  var _imageState$urlState, _imageState$urlState2;
 
+  return {
+    index,
+    url: (_imageState$urlState = imageState.urlState) === null || _imageState$urlState === void 0 ? void 0 : _imageState$urlState.url,
+    reloadButtonVisible: ((_imageState$urlState2 = imageState.urlState) === null || _imageState$urlState2 === void 0 ? void 0 : _imageState$urlState2.validity) !== 'valid' && imageState.totalErrorCount >= autoHandleErrorCount,
+    dimension: imageState.dimension
+  };
+};
+
+const MAXIMUM_WIDTH = 720;
+const NUMBER_OF_ADJACENT_ITEM = 5;
 export default function ComicViewer(props) {
   const {
-    data,
-    errorDebounceMillis = 500,
-    errorRetryCount = 3,
+    debounceMillis = 100,
+    autoHandleErrorCount = 3,
+    getUrlByIndex,
     initialNumToRender = 1,
     initialScrollPercentage = 0,
     itemVisiblePercentThreshold = 0,
-    onError,
-    onScroll,
+    intrinsicDimensions,
     onItemPress,
-    getNextPage,
-    viewerWidth,
+    viewportWidth,
     windowSize = 3,
-    pageUnit,
-    ListFooterComponent,
     ...otherProps
   } = props;
   const flatListRef = useRef(null);
-  const errors = useRef(new Map());
-  const debounceTimeOut = useRef(null);
-  const resourceString = R.toString(R.map(itemData => itemData.url)(data));
-  const imageWidth = Math.min(viewerWidth, 720);
-  const initialItems = R.map(itemData => ({ ...itemData,
-    isViewable: false,
-    width: imageWidth,
-    height: itemData.height * imageWidth / itemData.width
-  }))(data);
-  const [items, setItems] = useState(initialItems);
-  const initialItemState = R.map(itemData => ({
-    sortKey: itemData.sortKey,
-    state: R.isEmpty(itemData.expiresAt) ? STATE.INIT : STATE.URL_LOADED
-  }))(data);
-  const itemStates = useRef(initialItemState);
-  const itemHeights = [...getItemHeights(items)];
-  const itemHeightAccum = getHeightAccum(itemHeights);
+  const debounceTimeout = useRef(null);
+  const maybeLoadableItemsIndexRange = useRef([-1, 0]);
+  const actualImageWidth = Math.min(viewportWidth, MAXIMUM_WIDTH);
+  const initialImageStates = useMemo(() => R.map(createInitialImageState, intrinsicDimensions), []);
+  const imageStatesRef = useRef(initialImageStates);
+
+  const mapImageStatesToItemStates = imageStates => {
+    return imageStates.map((image, index) => mapImageStateToItemState(index, image, autoHandleErrorCount));
+  };
+
+  const [itemStates, setItemStates] = useState(() => {
+    return mapImageStatesToItemStates(imageStatesRef.current);
+  });
+  const renderedDimensions = useMemo(() => {
+    return R.map(intrinsicDimension => ({
+      width: actualImageWidth,
+      height: intrinsicDimension.height * actualImageWidth / intrinsicDimension.width
+    }), intrinsicDimensions);
+  }, [actualImageWidth]);
+  const layoutFromDimensions = useCallback(() => {
+    const itemHeights = R.map(dimension => dimension.height, renderedDimensions);
+    const [totalHeight, heightAccum] = getHeightAccum(itemHeights);
+    const itemOffsets = R.prepend(0, heightAccum);
+
+    const getItemLayout = (data, index) => ({
+      index,
+      length: itemHeights[index],
+      offset: itemOffsets[index]
+    });
+
+    return {
+      totalHeight,
+      getItemLayout
+    };
+  }, [renderedDimensions]);
+  const {
+    totalHeight,
+    getItemLayout
+  } = layoutFromDimensions();
   const viewabilityConfig = useMemo(() => ({
     itemVisiblePercentThreshold
   }), [itemVisiblePercentThreshold]);
-  const getItemLayout = useCallback((data, index) => {
-    const offsets = R.prepend(0, itemHeightAccum[1]);
-    return {
-      length: itemHeights[index],
-      offset: offsets[index],
-      index
-    };
-  }, [itemHeights]);
+
+  const updateImageState = updateFunction => {
+    const prevImageStates = imageStatesRef.current;
+    const newImageStates = prevImageStates.map(updateFunction);
+    imageStatesRef.current = newImageStates;
+    setItemStates(prevItemStates => {
+      const newItemStates = mapImageStatesToItemStates(newImageStates);
+      return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;
+    });
+  };
+
+  const loadUrlByIndex = async indexes => {
+    const filteredIndexes = R.filter(index => {
+      var _state$urlState;
+
+      const state = imageStatesRef.current[index];
+      return R.isNil(state.urlState) || ((_state$urlState = state.urlState) === null || _state$urlState === void 0 ? void 0 : _state$urlState.validity) === 'invalid' && !state.isNewUrlIncoming;
+    }, indexes);
+    updateImageState((imageState, i) => {
+      return R.includes(i, filteredIndexes) ? { ...imageState,
+        isNewUrlIncoming: true
+      } : imageState;
+    });
+
+    try {
+      const urls = await getUrlByIndex(filteredIndexes);
+      updateImageState((imageState, i) => {
+        const newUrl = urls === null || urls === void 0 ? void 0 : urls.get(i);
+        const urlState = imageState.urlState;
+
+        if (newUrl !== undefined && (urlState === null || urlState === void 0 ? void 0 : urlState.validity) !== 'valid') {
+          return { ...imageState,
+            urlState: {
+              url: newUrl,
+              validity: 'unknown'
+            }
+          };
+        }
+
+        return imageState;
+      });
+    } finally {
+      updateImageState((imageState, i) => {
+        return R.includes(i, filteredIndexes) ? { ...imageState,
+          isNewUrlIncoming: false
+        } : imageState;
+      });
+    }
+  };
+
+  const loadMaybeLoadableItems = async () => {
+    const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+    const affectedIndexes = R.range(startIndex, endIndex);
+    await loadUrlByIndex(affectedIndexes);
+  };
+
+  const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);
   const onViewableItemsChanged = useRef(_ref => {
+    var _R$head, _R$last;
+
     let {
       viewableItems
     } = _ref;
-    setItems(prev => {
-      const viewableItemSortKeys = R.map(viewableItem => viewableItem.item.sortKey)(viewableItems);
-      const firstViewableSortKey = R.head(viewableItemSortKeys);
-      const lastViewableItemSortKey = R.last(viewableItemSortKeys);
-      const firstItem = R.head(prev);
-      const lastItem = R.last(prev);
-
-      if (R.isNil(firstViewableSortKey) || R.isNil(lastViewableItemSortKey) || R.isNil(firstItem) || R.isNil(lastItem)) {
-        return prev;
-      }
+    const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);
+    const firstViewableIndex = (_R$head = R.head(orderedViewableItems)) === null || _R$head === void 0 ? void 0 : _R$head.index;
+    const lastViewableItemIndex = (_R$last = R.last(orderedViewableItems)) === null || _R$last === void 0 ? void 0 : _R$last.index;
 
-      const frontBoundary = R.max(firstItem.sortKey, firstViewableSortKey - 1);
-      const backBoundary = R.min(lastItem.sortKey, lastViewableItemSortKey + 1);
-      const viewableItemBoundary = R.range(frontBoundary, backBoundary + 1);
-      const newItems = R.map(prevItem => ({ ...prevItem,
-        isViewable: R.includes(prevItem.sortKey, viewableItemBoundary)
-      }))([...prev]);
-      return newItems;
-    });
-  });
-  const itemLoadedHandler = useCallback(sortKey => {
-    const itemState = R.find(state => state.sortKey === sortKey)(itemStates.current);
-
-    if (R.isNil(itemState)) {
+    if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {
       return;
     }
 
-    itemState.state = STATE.LOADED;
-    itemState.error = undefined;
-  }, [itemStates]);
-  const itemErrorHandler = useCallback(errorInfo => {
-    const {
-      sortKey,
-      count
-    } = errorInfo;
+    const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);
+    const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);
+    maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
+    loadItemsDebounce();
+  });
+  const renderItem = useCallback(_ref2 => {
+    var _renderedDimensions$i, _renderedDimensions$i2;
 
-    if (count >= errorRetryCount) {
-      return;
-    }
+    let {
+      item,
+      index
+    } = _ref2;
 
-    errors.current.set(sortKey, errorInfo);
-    const itemState = R.find(state => state.sortKey === sortKey)(itemStates.current);
+    const onError = () => {
+      updateImageState((imageState, i) => {
+        const urlState = imageState.urlState;
 
-    if (R.isNil(itemState)) {
-      return;
-    }
+        if (i === index && urlState !== undefined) {
+          return { ...imageState,
+            totalErrorCount: imageState.totalErrorCount + 1,
+            urlState: { ...urlState,
+              validity: 'invalid'
+            }
+          };
+        }
+
+        return imageState;
+      });
+
+      if (item.reloadButtonVisible) {
+        return;
+      }
 
-    itemState.state = STATE.FAIL;
-    itemState.error = errorInfo;
-
-    const handleError = () => {
-      const errorsArray = Array.from(errors.current.entries());
-      const errorsInfo = R.map(_ref2 => {
-        let [key, value] = _ref2;
-        return value;
-      })(errorsArray);
-      onError && onError([...errorsInfo]);
-      errors.current.clear();
+      const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+
+      if (index >= startIndex || index < endIndex) {
+        loadItemsDebounce();
+      }
     };
 
-    if (debounceTimeOut.current) {
-      clearTimeout(debounceTimeOut.current);
-    }
+    const onReloadPress = () => {
+      const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
 
-    if (errors.current.size === pageUnit) {
-      handleError();
-    } else {
-      debounceTimeOut.current = setTimeout(handleError, errorDebounceMillis);
-    }
-  }, [errors.current, itemStates]);
-  const renderItem = useCallback(_ref3 => {
-    let {
-      item
-    } = _ref3;
-    const itemState = R.find(state => state.sortKey === item.sortKey)(itemStates.current);
-    const props = { ...item,
-      itemState,
-      errorRetryCount,
-      onError: itemErrorHandler,
-      onLoaded: itemLoadedHandler,
-      onItemPress,
-      getNextPage
+      if (index >= startIndex || index < endIndex) {
+        loadUrlByIndex([index]);
+      }
     };
-    return /*#__PURE__*/React.createElement(ViewerItem, {
-      props: props
-    });
-  }, [resourceString, itemErrorHandler, itemLoadedHandler, onItemPress]);
-  useEffect(() => {
-    setItems(prev => {
-      return R.map(prevItem => {
-        const currentData = R.find(currentItemData => prevItem.sortKey === currentItemData.sortKey)(data);
-        const itemState = R.find(state => state.sortKey === (currentData === null || currentData === void 0 ? void 0 : currentData.sortKey))(itemStates.current);
-
-        if (currentData && itemState && itemState.state !== STATE.LOADED && currentData.url !== prevItem.url) {
-          itemState.state = STATE.URL_LOADED;
-          return { ...prevItem,
-            url: currentData.url,
-            expiresAt: currentData.expiresAt
+
+    const onLoad = () => {
+      updateImageState((imageState, i) => {
+        const urlState = imageState.urlState;
+
+        if (i === index && urlState !== undefined) {
+          return { ...imageState,
+            urlState: { ...urlState,
+              validity: 'valid'
+            }
           };
         }
 
-        return prevItem;
-      })([...prev]);
-      ;
+        return imageState;
+      });
+    };
+
+    return /*#__PURE__*/React.createElement(ViewerItem, {
+      onError: onError,
+      onLoad: onLoad,
+      onPress: onItemPress,
+      onReloadPress: onReloadPress,
+      url: item.url,
+      width: ((_renderedDimensions$i = renderedDimensions[index]) === null || _renderedDimensions$i === void 0 ? void 0 : _renderedDimensions$i.width) ?? 0,
+      height: ((_renderedDimensions$i2 = renderedDimensions[index]) === null || _renderedDimensions$i2 === void 0 ? void 0 : _renderedDimensions$i2.height) ?? 0,
+      reloadButtonVisible: item.reloadButtonVisible
     });
-  }, [resourceString]);
-  useEffect(() => {
-    const newItems = R.map(item => ({ ...item,
-      width: imageWidth,
-      height: item.height * imageWidth / item.width
-    }))(items);
-    setItems(newItems);
-  }, [imageWidth]);
+  }, [onItemPress, renderedDimensions]);
   useEffect(() => {
-    const totalHeight = itemHeightAccum[0];
     const offset = Math.floor(initialScrollPercentage / 100 * totalHeight);
 
     if (flatListRef.current) {
@@ -188,19 +243,18 @@ export default function ComicViewer(props) {
         animated: false
       });
     }
-  }, [flatListRef.current]);
+  }, []);
   return /*#__PURE__*/React.createElement(FlatList, _extends({
-    data: items,
+    data: itemStates,
     getItemLayout: getItemLayout,
     initialNumToRender: initialNumToRender,
     keyExtractor: keyExtractor,
     onViewableItemsChanged: onViewableItemsChanged.current,
-    onScroll: onScroll,
     ref: flatListRef,
+    removeClippedSubviews: false,
     renderItem: renderItem,
     viewabilityConfig: viewabilityConfig,
-    windowSize: windowSize,
-    ListFooterComponent: ListFooterComponent
+    windowSize: windowSize
   }, otherProps));
 }
 ;