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

package/src/ComicViewer/ViewerItem.tsx

@@ -1,205 +1,102 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ImageBackground, Platform, TouchableOpacity, View } from 'react-native';
-import * as R from 'ramda';
-import type { PlaceholderProps } 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<'reload' | 'root'>;
-
-const useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'center',
-        },
-        reload: {
-            display: 'flex',
-            alignItems: 'center',
-        },
-    };
-};
+import React, { useMemo } from 'react';
+import { Image, TouchableWithoutFeedback, View } from 'react-native';
+import { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';
+import ReloadButton from './ReloadButton';
+
+export interface ViewerItemProps {
+    /**
+     * Image width.
+     */
+    width: number;
+
+    /**
+     * Image height.
+     */
+    height: number;
+
+    /**
+     * Image sourceUrl for displaying.
+     */
+    url?: string;
+
+    /**
+     * Error handler.
+     */
+    onError?: ImageProps['onError'];
+
+    /**
+     * Load handler.
+     */
+    onLoad?: ImageProps['onLoad'];
+
+    /**
+     * Handle Reload button press event.
+     */
+    onReloadPress?: ImageProps['onError'];
+
+    /**
+     * Handle item press event.
+     */
+    onPress?: () => void;
+
+    /**
+     * If true, reload button visible.
+     * @default false
+     */
+    reloadButtonVisible?: boolean;
+}
 
-function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
+export default function ViewerItem(props: ViewerItemProps) {
     const {
-        expiresAt,
-        errorRetryCount = 3,
         height,
-        itemState,
-        isViewable,
-        sortKey,
-        responseTimestamp,
         url,
         width,
-        getNextPage,
         onError,
-        onLoaded,
-        onItemPress,
+        onLoad,
+        onPress,
+        onReloadPress,
+        reloadButtonVisible = false,
     } = props;
 
-    const [isLoaded, setIsLoaded] = useState(false);
-
-    const styles = useStyles();
-
-    const errorCount = useRef<number>(R.defaultTo(0)(itemState?.error?.count));
-
-    const onLoad = useCallback(() => {
-        errorCount.current = 0;
-
-        setIsLoaded(true);
-
-        onLoaded && onLoaded(sortKey);
-    }, [sortKey, onLoaded]);
-
-    const handleError = 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, onError]);
-
-    const onReloadPress = useCallback(() => {
-        errorCount.current = 1;
-
-        onError && onError({
-            sortKey,
-            count: errorCount.current,
-            expired: false,
-        });
-    }, [sortKey, onError]);
-
-    const viewStyle = {
-        width: '100%',
-        height,
-        ...Platform.select({
-            web: { 'cursor': 'default' },
-        }),
+    const styles = {
+        view: {
+            height,
+            width: '100%',
+        },
+        image: {
+            height,
+            width,
+        },
     };
 
-    const imageStyle = { width, height };
-
-    const Placeholder = useCallback((props: PlaceholderProps) => {
-        const { children, failed } = props;
-
-        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 <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
-                    children={<Restart fill={'#ffffff'}/>}
-                    style={{
-                        width: 48,
-                        height: 48,
-                        borderRadius: 24,
-                        color: '#ffffff',
-                        backgroundColor: '#767676',
-                    }}
-                    onPress={onReloadPress}
-                />
-            </ImageBackground>;
-        }
-
-        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]);
+    const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;
 
-    useEffect(() => {
-        if (itemState?.state === STATE.INIT) {
-            getNextPage?.(sortKey);
-        }
-    }, []);
+    const placeholder = useMemo(() => <Image
+        source={require('./checkered-loading.jpg')}
+        resizeMode="repeat"
+        style={styles.image}
+    />, [width]);
 
     return (
-        <TouchableOpacity
-            activeOpacity={1}
-            onPress={onItemPress}
-        >
-            <View
-                style={[
-                    styles.root,
-                    viewStyle,
-                ]}
-            >
-                <Image
-                    failDependency={[url, expiresAt, responseTimestamp]}
-                    disableOutline={true}
-                    key={sortKey}
-                    disableLongClick={true}
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={styles.view}>
+                <FuiImage
                     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}
-                    disablePlaceholder={true}
+                    style={css([
+                        { alignSelf: 'center' },
+                        styles.image,
+                    ])}
                 />
             </View>
-        </TouchableOpacity>
+        </TouchableWithoutFeedback>
     );
-}
-
-export default React.memo(ViewerItem, (prevProps, nextProps) => {
-    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.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;
-});
+};

package/src/ComicViewer/index.ts

@@ -1,3 +1,3 @@
 export { default } from './ComicViewer';
-export type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
-export type { default as ComicViewerItemProps } from './ComicViewerItemProps';
+export type { Dimension, default as ComicViewerProps } from './ComicViewerProps';
+export type { ViewerItemProps } from './ViewerItem';

package/build/commonjs/ComicViewer/ComicViewerItemProps.js

@@ -1,6 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=ComicViewerItemProps.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["ComicViewerItemProps.ts"],"sourcesContent":["import { ComicViewerItemData, ErrorInfo, ComicViewerItemState } from './ComicViewerProps';\n\ntype ComicViewerItemProps<T> = ComicViewerItemData<T> & {\n    /**\n     * FlatListItem is viewable in screen.\n     */\n    isViewable: boolean;\n\n    /**\n     * How many times retry onError when same item error occur\n     * @default 3\n     */\n    errorRetryCount?: number;\n\n    /**\n     * Error handler\n     */\n    onError?: (errorInfo: ErrorInfo) => void;\n\n    /**\n     * Load handler\n     */\n    onLoaded?: (sortKey: number) => void;\n\n    /**\n     * Method for getting next page contents.\n     * @param sortKey\n     */\n    getNextPage?: (sortKey: number) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Image loading state and error info.\n     */\n    itemState?: ComicViewerItemState;\n}\n\nexport default ComicViewerItemProps;"],"mappings":""}

package/build/module/ComicViewer/ComicViewerItemProps.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=ComicViewerItemProps.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["ComicViewerItemProps.ts"],"sourcesContent":["import { ComicViewerItemData, ErrorInfo, ComicViewerItemState } from './ComicViewerProps';\n\ntype ComicViewerItemProps<T> = ComicViewerItemData<T> & {\n    /**\n     * FlatListItem is viewable in screen.\n     */\n    isViewable: boolean;\n\n    /**\n     * How many times retry onError when same item error occur\n     * @default 3\n     */\n    errorRetryCount?: number;\n\n    /**\n     * Error handler\n     */\n    onError?: (errorInfo: ErrorInfo) => void;\n\n    /**\n     * Load handler\n     */\n    onLoaded?: (sortKey: number) => void;\n\n    /**\n     * Method for getting next page contents.\n     * @param sortKey\n     */\n    getNextPage?: (sortKey: number) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Image loading state and error info.\n     */\n    itemState?: ComicViewerItemState;\n}\n\nexport default ComicViewerItemProps;"],"mappings":""}

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

@@ -1,34 +0,0 @@
-import { ComicViewerItemData, ErrorInfo, ComicViewerItemState } from './ComicViewerProps';
-declare type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
-    /**
-     * FlatListItem is viewable in screen.
-     */
-    isViewable: boolean;
-    /**
-     * How many times retry onError when same item error occur
-     * @default 3
-     */
-    errorRetryCount?: number;
-    /**
-     * Error handler
-     */
-    onError?: (errorInfo: ErrorInfo) => void;
-    /**
-     * Load handler
-     */
-    onLoaded?: (sortKey: number) => void;
-    /**
-     * Method for getting next page contents.
-     * @param sortKey
-     */
-    getNextPage?: (sortKey: number) => void;
-    /**
-     * Handle item press event.
-     */
-    onItemPress?: () => void;
-    /**
-     * Image loading state and error info.
-     */
-    itemState?: ComicViewerItemState;
-};
-export default ComicViewerItemProps;

package/src/ComicViewer/ComicViewerItemProps.ts

@@ -1,42 +0,0 @@
-import { ComicViewerItemData, ErrorInfo, ComicViewerItemState } from './ComicViewerProps';
-
-type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
-    /**
-     * FlatListItem is viewable in screen.
-     */
-    isViewable: boolean;
-
-    /**
-     * How many times retry onError when same item error occur
-     * @default 3
-     */
-    errorRetryCount?: number;
-
-    /**
-     * Error handler
-     */
-    onError?: (errorInfo: ErrorInfo) => void;
-
-    /**
-     * Load handler
-     */
-    onLoaded?: (sortKey: number) => void;
-
-    /**
-     * Method for getting next page contents.
-     * @param sortKey
-     */
-    getNextPage?: (sortKey: number) => void;
-
-    /**
-     * Handle item press event.
-     */
-    onItemPress?: () => void;
-
-    /**
-     * Image loading state and error info.
-     */
-    itemState?: ComicViewerItemState;
-}
-
-export default ComicViewerItemProps;