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

package/src/ComicViewer/ViewerItem.tsx

@@ -1,31 +1,23 @@
 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 type { PlaceholderProps } from '@fountain-ui/core';
-import { IconButton, Image, Spacer, useTheme } from '@fountain-ui/core';
+import { IconButton, Image, Spacer } from '@fountain-ui/core';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { Restart } from '@fountain-ui/icons';
 import ComicViewerItemProps from './ComicViewerItemProps';
+import { STATE } from './ComicViewerProps';
 
-type PlaceholderStyles = NamedStylesStringUnion<'init' | 'failed' | 'reload' | 'root'>;
+type PlaceholderStyles = NamedStylesStringUnion<'reload' | 'root'>;
 
 const useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {
-    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',
         },
@@ -40,6 +32,7 @@ function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
         itemState,
         isViewable,
         sortKey,
+        responseTimestamp,
         url,
         width,
         getNextPage,
@@ -60,7 +53,7 @@ function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
         setIsLoaded(true);
 
         onLoaded && onLoaded(sortKey);
-    }, [sortKey]);
+    }, [sortKey, onLoaded]);
 
     const handleError = useCallback(() => {
         errorCount.current = errorCount.current + 1;
@@ -74,7 +67,7 @@ function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
             count: errorCount.current,
             expired,
         });
-    }, [errorCount.current]);
+    }, [errorCount.current, onError]);
 
     const onReloadPress = useCallback(() => {
         errorCount.current = 1;
@@ -84,25 +77,41 @@ function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
             count: errorCount.current,
             expired: false,
         });
-    }, [sortKey]);
+    }, [sortKey, onError]);
+
+    const viewStyle = {
+        width: '100%',
+        height,
+        ...Platform.select({
+            web: { 'cursor': 'default' },
+        }),
+    };
 
-    const viewStyle = { width, height };
+    const imageStyle = { width, height };
 
     const Placeholder = useCallback((props: PlaceholderProps) => {
         const { children, failed } = props;
 
-        if ((!isViewable && !isLoaded) || url === '') {
-            return <View style={[
-                viewStyle,
-                styles.init,
-            ]}/>;
+        if (!(isViewable || isLoaded || failed)
+            || (itemState?.state === STATE.FAIL)
+            || itemState?.state === STATE.INIT
+        ) {
+            return <ImageBackground
+                source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}
+                resizeMode="repeat"
+                style={viewStyle}
+            />;
         }
 
         if (errorCount.current >= errorRetryCount) {
-            return <View style={[
-                viewStyle,
-                styles.reload,
-            ]}>
+            return <ImageBackground
+                source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}
+                resizeMode="repeat"
+                style={[
+                    viewStyle,
+                    styles.reload,
+                ]}
+            >
                 <Spacer size={20}/>
 
                 <IconButton
@@ -116,47 +125,52 @@ function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
                     }}
                     onPress={onReloadPress}
                 />
-            </View>;
-        }
-
-        if (failed) {
-            return (
-                <View style={[
-                    viewStyle,
-                    styles.failed,
-                ]}/>
-            );
+            </ImageBackground>;
         }
 
-        return children ? (
-            <Pressable onPress={onItemPress}>
-                {children}
-            </Pressable>
-        ) : null;
-    }, [isViewable, isLoaded, errorCount.current, url, onItemPress]);
+        return <ImageBackground
+            source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}
+            resizeMode="repeat"
+            style={viewStyle}
+        >
+            {children}
+        </ImageBackground>;
+    }, [isViewable, isLoaded, errorCount.current, itemState?.state, responseTimestamp]);
 
     useEffect(() => {
-        if (url === '') {
+        if (itemState?.state === STATE.INIT) {
             getNextPage?.(sortKey);
         }
     }, []);
 
     return (
-        <View style={styles.root}>
-            <Image
-                disableOutline={true}
-                key={sortKey}
-                disableLongClick={true}
-                disableDrag={true}
-                onLoad={onLoad}
-                onError={handleError}
-                loading={'eager'}
-                source={{ uri: url }}
-                style={viewStyle}
-                square={true}
-                Placeholder={Placeholder}
-            />
-        </View>
+        <TouchableOpacity
+            activeOpacity={1}
+            onPress={onItemPress}
+        >
+            <View
+                style={[
+                    styles.root,
+                    viewStyle,
+                ]}
+            >
+                <Image
+                    failDependency={[url, expiresAt, responseTimestamp]}
+                    disableOutline={true}
+                    key={sortKey}
+                    disableLongClick={true}
+                    disableDrag={true}
+                    onLoad={onLoad}
+                    onError={handleError}
+                    loading={'eager'}
+                    source={{ uri: url }}
+                    style={imageStyle}
+                    square={true}
+                    Placeholder={Placeholder}
+                    disablePlaceholder={true}
+                />
+            </View>
+        </TouchableOpacity>
     );
 }
 
@@ -165,13 +179,27 @@ export default React.memo(ViewerItem, (prevProps, nextProps) => {
         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.itemState?.state !== nextProps.props.itemState?.state) {
+        return false;
+    }
+
+    if (prevProps.props.itemState?.state !== STATE.LOADED && prevProps.props.responseTimestamp !== nextProps.props.responseTimestamp) {
+        return false;
+    }
+
     return true;
-});
+});