@fountain-ui/lab 2.0.0-beta.32 → 2.0.0-beta.34

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

@@ -1 +1 @@
-{"version":3,"names":["STATE","UNLOAD","LOADING","LOADED","FAIL"],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\n\nexport const STATE = {\n    UNLOAD: 'unload',\n    LOADING: 'loading',\n    LOADED: 'loaded',\n    FAIL: 'fail',\n} as const;\n\nexport type LoadingState = typeof STATE[keyof typeof STATE];\n\nexport interface ComicViewerItemState{\n    /**\n     * Comic viewer item sortKey.\n     */\n    sortKey: number;\n\n    /**\n     * Content's loading state.\n     */\n    state: LoadingState;\n\n    /***\n     * Content's error Info.\n     */\n    error?: ErrorInfo;\n}\n\nexport interface ErrorInfo {\n    /**\n     * ComicViewerItemData.sortKey.\n     */\n    sortKey: number;\n\n    /**\n     * Number of times an error occurred.\n     */\n    count: number;\n\n    /**\n     * Content is Expired: true\n     */\n    expired: boolean;\n}\n\nexport type ComicViewerItemData<T = {}> = T & {\n    /**\n     * Image height.\n     */\n    height: number;\n\n    /**\n     * Unique value for identifying.\n     */\n    id: number | undefined;\n\n    /**\n     * Image sourceUrl for displaying.\n     */\n    url: string;\n\n    /**\n     * Image width.\n     */\n    width: number;\n\n    /**\n     * SortKey\n     */\n    sortKey: number;\n\n    /**\n     * Image expire date.\n     */\n    expiresAt: string;\n}\n\nexport default interface ComicViewerProps<T> extends ComponentProps <{\n    /**\n     * Data for render.\n     */\n    data: ComicViewerItemData<T>[];\n\n    /**\n     * Delay Time to call the error handler.\n     * @default 500\n     */\n    errorDebounceMillis?: number;\n\n    /**\n     * How many times retry onError when same item error occur\n     * @default 3\n     */\n    errorRetryCount?: number;\n\n    /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /**\n     * Comic viewer width.\n     */\n    viewerWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n\n    /**\n     * How many images in one page.\n     */\n    pageUnit: number;\n\n    /**\n     * Method for getting next page contents.\n     * @param sortKey\n     */\n    getNextPage?: (sortKey: number) => void;\n\n    /**\n     * Handling all viewerItem errors at once.\n     * @param errors Array of ViewerItems errorInfo.\n     */\n    onError?: (errors: ErrorInfo[]) => void;\n\n    /**\n     * Handle scroll event.\n     * @param event Scroll event.\n     */\n    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Component for comic viewer footer.\n     */\n    ListFooterComponent?: React.ReactElement;\n}> {}"],"mappings":"AAIA,OAAO,MAAMA,KAAK,GAAG;EACjBC,MAAM,EAAE,QADS;EAEjBC,OAAO,EAAE,SAFQ;EAGjBC,MAAM,EAAE,QAHS;EAIjBC,IAAI,EAAE;AAJW,CAAd"}
+{"version":3,"names":["STATE","INIT","URL_LOADED","LOADED","FAIL"],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\n\nexport const STATE = {\n    INIT: 'init',\n    URL_LOADED: 'url_loaded',\n    LOADED: 'loaded',\n    FAIL: 'fail',\n} as const;\n\nexport type LoadingState = typeof STATE[keyof typeof STATE];\n\nexport interface ComicViewerItemState{\n    /**\n     * Comic viewer item sortKey.\n     */\n    sortKey: number;\n\n    /**\n     * Content's loading state.\n     */\n    state: LoadingState;\n\n    /***\n     * Content's error Info.\n     */\n    error?: ErrorInfo;\n}\n\nexport interface ErrorInfo {\n    /**\n     * ComicViewerItemData.sortKey.\n     */\n    sortKey: number;\n\n    /**\n     * Number of times an error occurred.\n     */\n    count: number;\n\n    /**\n     * Content is Expired: true\n     */\n    expired: boolean;\n}\n\nexport type ComicViewerItemData<T = {}> = T & {\n    /**\n     * Image height.\n     */\n    height: number;\n\n    /**\n     * Unique value for identifying.\n     */\n    id: number | undefined;\n\n    /**\n     * Image sourceUrl for displaying.\n     */\n    url: string;\n\n    /**\n     * Image width.\n     */\n    width: number;\n\n    /**\n     * SortKey\n     */\n    sortKey: number;\n\n    /**\n     * Image expire date.\n     */\n    expiresAt: string;\n\n    /***\n     * Timestamp when get content response\n     */\n    responseTimestamp: number;\n}\n\nexport default interface ComicViewerProps<T> extends ComponentProps <{\n    /**\n     * Data for render.\n     */\n    data: ComicViewerItemData<T>[];\n\n    /**\n     * Delay Time to call the error handler.\n     * @default 500\n     */\n    errorDebounceMillis?: number;\n\n    /**\n     * How many times retry onError when same item error occur\n     * @default 3\n     */\n    errorRetryCount?: number;\n\n    /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /***\n     * Timestamp when get content response\n     */\n    responseTimestamp: number;\n\n    /**\n     * Comic viewer width.\n     */\n    viewerWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n\n    /**\n     * How many images in one page.\n     */\n    pageUnit: number;\n\n    /**\n     * Method for getting next page contents.\n     * @param sortKey\n     */\n    getNextPage?: (sortKey: number) => void;\n\n    /**\n     * Handling all viewerItem errors at once.\n     * @param errors Array of ViewerItems errorInfo.\n     */\n    onError?: (errors: ErrorInfo[]) => void;\n\n    /**\n     * Handle scroll event.\n     * @param event Scroll event.\n     */\n    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Component for comic viewer footer.\n     */\n    ListFooterComponent?: React.ReactElement;\n}> {}"],"mappings":"AAIA,OAAO,MAAMA,KAAK,GAAG;EACjBC,IAAI,EAAE,MADW;EAEjBC,UAAU,EAAE,YAFK;EAGjBC,MAAM,EAAE,QAHS;EAIjBC,IAAI,EAAE;AAJW,CAAd"}

package/build/module/ComicViewer/ViewerItem.js

@@ -1,25 +1,18 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Pressable, View } from 'react-native';
+import { ImageBackground, Platform, TouchableOpacity, View } from 'react-native';
 import * as R from 'ramda';
-import { IconButton, Image, Spacer, useTheme } from '@fountain-ui/core';
+import { IconButton, Image, Spacer } from '@fountain-ui/core';
 import { Restart } from '@fountain-ui/icons';
+import { STATE } from './ComicViewerProps';
 
 const useStyles = function () {
-  const theme = 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'
     }
@@ -39,6 +32,7 @@ function ViewerItem(_ref) {
     itemState,
     isViewable,
     sortKey,
+    responseTimestamp,
     url,
     width,
     getNextPage,
@@ -53,7 +47,7 @@ function ViewerItem(_ref) {
     errorCount.current = 0;
     setIsLoaded(true);
     onLoaded && onLoaded(sortKey);
-  }, [sortKey]);
+  }, [sortKey, onLoaded]);
   const handleError = useCallback(() => {
     errorCount.current = errorCount.current + 1;
     const now = new Date();
@@ -64,7 +58,7 @@ function ViewerItem(_ref) {
       count: errorCount.current,
       expired
     });
-  }, [errorCount.current]);
+  }, [errorCount.current, onError]);
   const onReloadPress = useCallback(() => {
     errorCount.current = 1;
     onError && onError({
@@ -72,8 +66,17 @@ function ViewerItem(_ref) {
       count: errorCount.current,
       expired: false
     });
-  }, [sortKey]);
+  }, [sortKey, onError]);
   const viewStyle = {
+    width: '100%',
+    height,
+    ...Platform.select({
+      web: {
+        'cursor': 'default'
+      }
+    })
+  };
+  const imageStyle = {
     width,
     height
   };
@@ -83,14 +86,22 @@ function ViewerItem(_ref) {
       failed
     } = props;
 
-    if (!isViewable && !isLoaded || url === '') {
-      return /*#__PURE__*/React.createElement(View, {
-        style: [viewStyle, styles.init]
+    if (!(isViewable || isLoaded || failed) || (itemState === null || itemState === void 0 ? void 0 : itemState.state) === STATE.FAIL || (itemState === null || itemState === void 0 ? void 0 : itemState.state) === STATE.INIT) {
+      return /*#__PURE__*/React.createElement(ImageBackground, {
+        source: {
+          uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg'
+        },
+        resizeMode: "repeat",
+        style: viewStyle
       });
     }
 
     if (errorCount.current >= errorRetryCount) {
-      return /*#__PURE__*/React.createElement(View, {
+      return /*#__PURE__*/React.createElement(ImageBackground, {
+        source: {
+          uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg'
+        },
+        resizeMode: "repeat",
         style: [viewStyle, styles.reload]
       }, /*#__PURE__*/React.createElement(Spacer, {
         size: 20
@@ -109,24 +120,26 @@ function ViewerItem(_ref) {
       }));
     }
 
-    if (failed) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: [viewStyle, styles.failed]
-      });
-    }
-
-    return children ? /*#__PURE__*/React.createElement(Pressable, {
-      onPress: onItemPress
-    }, children) : null;
-  }, [isViewable, isLoaded, errorCount.current, url, onItemPress]);
+    return /*#__PURE__*/React.createElement(ImageBackground, {
+      source: {
+        uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg'
+      },
+      resizeMode: "repeat",
+      style: viewStyle
+    }, children);
+  }, [isViewable, isLoaded, errorCount.current, itemState === null || itemState === void 0 ? void 0 : itemState.state, responseTimestamp]);
   useEffect(() => {
-    if (url === '') {
+    if ((itemState === null || itemState === void 0 ? void 0 : itemState.state) === STATE.INIT) {
       getNextPage === null || getNextPage === void 0 ? void 0 : getNextPage(sortKey);
     }
   }, []);
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.root
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    activeOpacity: 1,
+    onPress: onItemPress
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.root, viewStyle]
   }, /*#__PURE__*/React.createElement(Image, {
+    failDependency: [url, expiresAt, responseTimestamp],
     disableOutline: true,
     key: sortKey,
     disableLongClick: true,
@@ -137,25 +150,42 @@ function ViewerItem(_ref) {
     source: {
       uri: url
     },
-    style: viewStyle,
+    style: imageStyle,
     square: true,
-    Placeholder: Placeholder
-  }));
+    Placeholder: Placeholder,
+    disablePlaceholder: true
+  })));
 }
 
 export default /*#__PURE__*/React.memo(ViewerItem, (prevProps, nextProps) => {
+  var _prevProps$props$item, _nextProps$props$item, _prevProps$props$item2;
+
   if (prevProps.props.isViewable !== nextProps.props.isViewable) {
     return false;
-  }
+  } // NO NEED ?
+
 
   if (prevProps.props.url !== nextProps.props.url) {
     return false;
+  } // NO NEED ?
+
+
+  if (prevProps.props.expiresAt !== nextProps.props.expiresAt) {
+    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;
+  }
+
+  if (((_prevProps$props$item2 = prevProps.props.itemState) === null || _prevProps$props$item2 === void 0 ? void 0 : _prevProps$props$item2.state) !== STATE.LOADED && prevProps.props.responseTimestamp !== nextProps.props.responseTimestamp) {
+    return false;
+  }
+
   return true;
 });
 //# sourceMappingURL=ViewerItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Pressable","View","R","IconButton","Image","Spacer","useTheme","Restart","useStyles","theme","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","styles","errorCount","defaultTo","error","count","onLoad","current","handleError","now","Date","utcNow","getTime","getTimezoneOffset","expired","onReloadPress","viewStyle","Placeholder","children","borderRadius","color","uri","memo","prevProps","nextProps"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Pressable, 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';\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 = { width, height };\n\n    const Placeholder = useCallback((props: PlaceholderProps) => {\n        const { children, failed } = props;\n\n        if ((!isViewable && !isLoaded) || url === '') {\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        if (failed) {\n            return (\n                <View style={[\n                    viewStyle,\n                    styles.failed,\n                ]}/>\n            );\n        }\n\n        return children ? (\n            <Pressable onPress={onItemPress}>\n                {children}\n            </Pressable>\n        ) : null;\n    }, [isViewable, isLoaded, errorCount.current, url, onItemPress]);\n\n    useEffect(() => {\n        if (url === '') {\n            getNextPage?.(sortKey);\n        }\n    }, []);\n\n    return (\n        <View style={styles.root}>\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={viewStyle}\n                square={true}\n                Placeholder={Placeholder}\n            />\n        </View>\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    return true;\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","ImageBackground","Platform","TouchableOpacity","View","R","IconButton","Image","Spacer","Restart","STATE","useStyles","root","display","flexDirection","justifyContent","reload","alignItems","ViewerItem","props","expiresAt","errorRetryCount","height","itemState","isViewable","sortKey","responseTimestamp","url","width","getNextPage","onError","onLoaded","onItemPress","isLoaded","setIsLoaded","styles","errorCount","defaultTo","error","count","onLoad","current","handleError","now","Date","utcNow","getTime","getTimezoneOffset","expired","onReloadPress","viewStyle","select","web","imageStyle","Placeholder","children","failed","state","FAIL","INIT","uri","borderRadius","color","backgroundColor","memo","prevProps","nextProps","LOADED"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ImageBackground, Platform, TouchableOpacity, View } from 'react-native';\nimport * as R from 'ramda';\nimport type { PlaceholderProps } from '@fountain-ui/core';\nimport { IconButton, Image, Spacer } 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<'reload' | 'root'>;\n\nconst useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {\n    return {\n        root: {\n            display: 'flex',\n            flexDirection: 'row',\n            justifyContent: 'center',\n        },\n        reload: {\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        responseTimestamp,\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, onLoaded]);\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, onError]);\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, onError]);\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 || failed)\n            || (itemState?.state === STATE.FAIL)\n            || itemState?.state === STATE.INIT\n        ) {\n            return <ImageBackground\n                source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}\n                resizeMode=\"repeat\"\n                style={viewStyle}\n            />;\n        }\n\n        if (errorCount.current >= errorRetryCount) {\n            return <ImageBackground\n                source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}\n                resizeMode=\"repeat\"\n                style={[\n                    viewStyle,\n                    styles.reload,\n                ]}\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            </ImageBackground>;\n        }\n\n        return <ImageBackground\n            source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}\n            resizeMode=\"repeat\"\n            style={viewStyle}\n        >\n            {children}\n        </ImageBackground>;\n    }, [isViewable, isLoaded, errorCount.current, itemState?.state, responseTimestamp]);\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                    failDependency={[url, expiresAt, responseTimestamp]}\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                    disablePlaceholder={true}\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    // NO NEED ?\n    if (prevProps.props.url !== nextProps.props.url) {\n        return false;\n    }\n\n    // NO NEED ?\n    if (prevProps.props.expiresAt !== nextProps.props.expiresAt) {\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    if (prevProps.props.itemState?.state !== STATE.LOADED && prevProps.props.responseTimestamp !== nextProps.props.responseTimestamp) {\n        return false;\n    }\n\n    return true;\n});"],"mappings":"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"}

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
 import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 export declare const STATE: {
-    readonly UNLOAD: "unload";
-    readonly LOADING: "loading";
+    readonly INIT: "init";
+    readonly URL_LOADED: "url_loaded";
     readonly LOADED: "loaded";
     readonly FAIL: "fail";
 };
@@ -61,6 +61,10 @@ export declare type ComicViewerItemData<T = {}> = T & {
      * Image expire date.
      */
     expiresAt: string;
+    /***
+     * Timestamp when get content response
+     */
+    responseTimestamp: number;
 };
 export default interface ComicViewerProps<T> extends ComponentProps<{
     /**
@@ -93,6 +97,10 @@ export default interface ComicViewerProps<T> extends ComponentProps<{
      * @default 0
      */
     itemVisiblePercentThreshold?: number;
+    /***
+     * Timestamp when get content response
+     */
+    responseTimestamp: number;
     /**
      * Comic viewer width.
      */

package/package.json

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

package/src/ComicViewer/ComicViewer.tsx

@@ -22,6 +22,7 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
         data,
         errorDebounceMillis = 500,
         errorRetryCount = 3,
+        responseTimestamp,
         initialNumToRender = 1,
         initialScrollPercentage = 0,
         itemVisiblePercentThreshold = 0,
@@ -42,8 +43,6 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
 
     const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);
 
-    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.url)(data));
-
     const imageWidth = Math.min(viewerWidth, 720);
     const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({
         ...itemData,
@@ -56,7 +55,7 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
 
     const initialItemState: ComicViewerItemState[] = R.map((itemData: ComicViewerItemData<T>) => ({
         sortKey: itemData.sortKey,
-        state: STATE.UNLOAD,
+        state: R.isNil(itemData.id) ? STATE.INIT : STATE.URL_LOADED,
     }))(data);
 
     const itemStates = useRef<Array<ComicViewerItemState>>(initialItemState);
@@ -82,11 +81,27 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
         viewableItems: Array<ViewToken>,
     }) => {
         setItems((prev: ComicViewerItemProps<T>[]) => {
-            const viewableItemSortKeys = R.map((viewableItem: ViewToken) => viewableItem.item.sortKey)(viewableItems);
-
+            const viewableItemSortKeys: number[] = R.map((viewableItem: ViewToken) => 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 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: ComicViewerItemProps<T>) => ({
                 ...prevItem,
-                isViewable: R.includes(prevItem.sortKey, viewableItemSortKeys),
+                isViewable: R.includes(prevItem.sortKey, viewableItemBoundary),
             }))([...prev]);
 
             return newItems;
@@ -147,6 +162,7 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
         const props = {
             ...item,
             itemState,
+            responseTimestamp,
             errorRetryCount,
             onError: itemErrorHandler,
             onLoaded: itemLoadedHandler,
@@ -155,7 +171,7 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
         };
 
         return <ViewerItem props={props}/>;
-    }, [resourceString, itemErrorHandler, itemLoadedHandler, onItemPress]);
+    }, [responseTimestamp, itemErrorHandler, itemLoadedHandler, onItemPress]);
 
     useEffect(() => {
         setItems((prev: ComicViewerItemProps<T>[]) => {
@@ -164,9 +180,12 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
                 const itemState: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === currentData?.sortKey)(itemStates.current);
 
                 if (currentData
+                    && currentData.id
                     && itemState
-                    && itemState.state !== STATE.LOADED
-                    && (currentData.url !== prevItem.url)) {
+                    && itemState.state !== STATE.LOADED) {
+
+                    itemState.state = STATE.URL_LOADED;
+
                     return {
                         ...prevItem,
                         url: currentData.url,
@@ -178,7 +197,7 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
             })([...prev]);
             ;
         });
-    }, [resourceString]);
+    }, [responseTimestamp]);
 
     useEffect(() => {
         const newItems = R.map((item: ComicViewerItemProps<T>) => ({
@@ -215,4 +234,4 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
             {...otherProps}
         />
     );
-};
+};

package/src/ComicViewer/ComicViewerProps.ts

@@ -3,8 +3,8 @@ import { ComponentProps } from '@fountain-ui/core';
 import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 export const STATE = {
-    UNLOAD: 'unload',
-    LOADING: 'loading',
+    INIT: 'init',
+    URL_LOADED: 'url_loaded',
     LOADED: 'loaded',
     FAIL: 'fail',
 } as const;
@@ -75,6 +75,11 @@ export type ComicViewerItemData<T = {}> = T & {
      * Image expire date.
      */
     expiresAt: string;
+
+    /***
+     * Timestamp when get content response
+     */
+    responseTimestamp: number;
 }
 
 export default interface ComicViewerProps<T> extends ComponentProps <{
@@ -114,6 +119,11 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
      */
     itemVisiblePercentThreshold?: number;
 
+    /***
+     * Timestamp when get content response
+     */
+    responseTimestamp: number;
+
     /**
      * Comic viewer width.
      */