@fountain-ui/lab 2.0.0-beta.29 → 2.0.0-beta.30

package/src/ComicViewer/ComicViewer.tsx

@@ -1,7 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, ListRenderItem, ViewToken } from 'react-native';
 import * as R from 'ramda';
-import { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
+import {
+    ComicViewerItemData,
+    ComicViewerItemState,
+    default as ComicViewerProps,
+    ErrorInfo,
+    STATE,
+} from './ComicViewerProps';
 import type ComicViewerItemProps from './ComicViewerItemProps';
 import ViewerItem from './ViewerItem';
 
@@ -9,7 +15,7 @@ const getItemHeights = <T, >(items: ComicViewerItemProps<T>[]): number[] => R.ma
 const appender = (left: number, right: number): [number, number] => [left + right, left + right];
 const getHeightAccum = (itemHeights: number[]): [number, number[]] => R.mapAccum(appender, 0, itemHeights);
 
-const keyExtractor = <T, >(item: ComicViewerItemProps<T>) => item.id;
+const keyExtractor = <T, >(item: ComicViewerItemProps<T>) => `${item.sortKey}`;
 
 export default function ComicViewer<T>(props: ComicViewerProps<T>) {
     const {
@@ -20,17 +26,22 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
         initialScrollPercentage = 0,
         itemVisiblePercentThreshold = 0,
         onError,
+        onScroll,
+        getNextPage,
         viewerWidth,
         windowSize = 3,
+        pageUnit,
+        ListFooterComponent,
         ...otherProps
     } = props;
 
     const flatListRef = useRef<FlatList>(null);
 
-    const errors = useRef<Map<string, number>>(new Map());
+    const errors = useRef<Map<number, ErrorInfo>>(new Map());
+
     const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);
 
-    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.sourceUrl)(data));
+    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.url)(data));
 
     const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({
         ...itemData,
@@ -41,7 +52,13 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
 
     const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);
 
-    const itemHeights = getItemHeights(items);
+    const initialItemState: ComicViewerItemState[] = R.map(() => ({
+        state: STATE.UNLOAD,
+    }))(data);
+
+    const itemStates = useRef<Array<ComicViewerItemState>>(initialItemState);
+
+    const itemHeights = [...getItemHeights(items)];
     const itemHeightAccum = getHeightAccum(itemHeights);
 
     const viewabilityConfig = useMemo(() => ({
@@ -62,67 +79,88 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
         viewableItems: Array<ViewToken>,
     }) => {
         setItems((prev: ComicViewerItemProps<T>[]) => {
-            const viewableItemIds = R.map((viewableItem: ViewToken) => viewableItem.item.id)(viewableItems);
+            const viewableItemSortKeys = R.map((viewableItem: ViewToken) => viewableItem.item.sortKey)(viewableItems);
 
-            return R.map((prevItem: ComicViewerItemProps<T>) => ({
+            const newItems = R.map((prevItem: ComicViewerItemProps<T>) => ({
                 ...prevItem,
-                isViewable: R.includes(prevItem.id, viewableItemIds),
+                isViewable: R.includes(prevItem.sortKey, viewableItemSortKeys),
             }))([...prev]);
+
+            return newItems;
         });
     });
 
-    const onErrorHandler = (errors: ErrorInfo[]) => {
-        const isRetryLimited = R.any((error: ErrorInfo) => error.count >= errorRetryCount)(errors);
+    const itemLoadedHandler = useCallback((sortKey: number) => {
+        const itemState = itemStates.current[sortKey - 1];
+        itemState.state = STATE.LOADED;
+        itemState.error = undefined;
+    }, [itemStates]);
 
-        if (isRetryLimited) {
+    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {
+        const { sortKey, count } = errorInfo;
+
+        if (count >= errorRetryCount) {
             return;
         }
 
-        onError && onError(errors);
-    };
+        errors.current.set(sortKey, errorInfo);
 
-    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {
-        errors.current.set(errorInfo.id, errorInfo.count);
+        const itemState = itemStates.current[sortKey - 1];
+        itemState.state = STATE.FAIL;
+        itemState.error = errorInfo;
+
+        const handleError = () => {
+            const errorsArray = Array.from(errors.current.entries());
+            const errorsInfo = R.map(([key, value]: [number, ErrorInfo]) => value)(errorsArray);
+
+            onError && onError([...errorsInfo]);
+            errors.current.clear();
+        };
 
         if (debounceTimeOut.current) {
             clearTimeout(debounceTimeOut.current);
         }
 
-        debounceTimeOut.current = setTimeout(function () {
-            const errorsArray = Array.from(errors.current.entries());
-            const errorsInfo = R.map(([key, value]: [string, number]) => ({
-                id: key,
-                count: value,
-            }))(errorsArray);
-
-            onErrorHandler([...errorsInfo]);
-            errors.current.clear();
-        }, errorDebounceMillis);
-    }, [errorDebounceMillis, errors.current]);
+        if (errors.current.size === pageUnit) {
+            handleError();
+        } else {
+            debounceTimeOut.current = setTimeout(handleError, errorDebounceMillis);
+        }
+    }, [errors.current, itemStates]);
 
     const renderItem: ListRenderItem<ComicViewerItemProps<T>> = useCallback(({ item }) => {
+        const itemState = itemStates.current[item.sortKey - 1];
+
         const props = {
             ...item,
+            itemState,
+            errorRetryCount,
             onError: itemErrorHandler,
+            onLoaded: itemLoadedHandler,
+            getNextPage,
         };
 
         return <ViewerItem props={props}/>;
-    }, []);
+    }, [resourceString, itemStates, itemErrorHandler, itemLoadedHandler]);
 
     useEffect(() => {
         setItems((prev: ComicViewerItemProps<T>[]) => {
             return R.map((prevItem: ComicViewerItemProps<T>) => {
-                const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.id === currentItemData.id)(data);
+                const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.sortKey === currentItemData.sortKey)(data);
 
-                if (currentData && (currentData.sourceUrl !== prevItem.sourceUrl)) {
+                if (currentData
+                    && itemStates.current[currentData.sortKey - 1].state !== STATE.LOADED
+                    && (currentData.url !== prevItem.url)) {
                     return {
                         ...prevItem,
-                        sourceUrl: currentData.sourceUrl,
+                        url: currentData.url,
+                        expiresAt: currentData.expiresAt,
                     };
                 }
 
                 return prevItem;
             })([...prev]);
+            ;
         });
     }, [resourceString]);
 
@@ -152,10 +190,12 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
             initialNumToRender={initialNumToRender}
             keyExtractor={keyExtractor}
             onViewableItemsChanged={onViewableItemsChanged.current}
+            onScroll={onScroll}
             ref={flatListRef}
             renderItem={renderItem}
             viewabilityConfig={viewabilityConfig}
             windowSize={windowSize}
+            ListFooterComponent={ListFooterComponent}
             {...otherProps}
         />
     );

package/src/ComicViewer/ComicViewerItemProps.ts

@@ -1,4 +1,4 @@
-import { ComicViewerItemData, ErrorInfo } from './ComicViewerProps';
+import { ComicViewerItemData, ErrorInfo, ComicViewerItemState } from './ComicViewerProps';
 
 type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
     /**
@@ -6,10 +6,25 @@ type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
      */
     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;
+
+    getNextPage?: (sortKey: number) => void;
+
+    itemState?: ComicViewerItemState;
 }
 
 export default ComicViewerItemProps;

package/src/ComicViewer/ComicViewerProps.ts

@@ -1,15 +1,43 @@
+import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+export const STATE = {
+    UNLOAD: 'unload',
+    LOADING: 'loading',
+    LOADED: 'loaded',
+    FAIL: 'fail',
+} as const;
+
+export type LoadingState = typeof STATE[keyof typeof STATE];
+
+export interface ComicViewerItemState{
+    /**
+     * Content's loading state.
+     */
+    state: LoadingState,
+
+    /***
+     * Content's error Info.
+     */
+    error?: ErrorInfo,
+}
 
 export interface ErrorInfo {
     /**
-     * ComicViewerItemData.id.
+     * ComicViewerItemData.sortKey.
      */
-    id: string;
+    sortKey: number;
 
     /**
      * Number of times an error occurred.
      */
     count: number;
+
+    /**
+     * Content is Expired: true
+     */
+    expired: boolean;
 }
 
 export type ComicViewerItemData<T = {}> = T & {
@@ -21,17 +49,27 @@ export type ComicViewerItemData<T = {}> = T & {
     /**
      * Unique value for identifying.
      */
-    id: string;
+    id: number | undefined;
 
     /**
      * Image sourceUrl for displaying.
      */
-    sourceUrl: string;
+    url: string;
 
     /**
      * Image width.
      */
     width: number;
+
+    /**
+     * SortKey
+     */
+    sortKey: number;
+
+    /**
+     * Image expire date.
+     */
+    expiresAt: string;
 }
 
 export default interface ComicViewerProps<T> extends ComponentProps <{
@@ -52,7 +90,7 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
      */
     errorRetryCount?: number;
 
-     /**
+    /**
      * How many items to render in the initial batch.
      * @default 1
      */
@@ -71,6 +109,28 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
      */
     itemVisiblePercentThreshold?: number;
 
+    /**
+     * Comic viewer width.
+     */
+    viewerWidth: number;
+
+    /**
+     * The value for FlatList windowSize.
+     * @default 3
+     */
+    windowSize?: number;
+
+    /**
+     * How many images in one page.
+     */
+    pageUnit: number;
+
+    /**
+     * Method for getting next page contents.
+     * @param sortKey
+     */
+    getNextPage?: (sortKey: number) => void;
+
     /**
      * Handling all viewerItem errors at once.
      * @param errors Array of ViewerItems errorInfo.
@@ -78,13 +138,13 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
     onError?: (errors: ErrorInfo[]) => void;
 
     /**
-     * Comic viewer width.
+     * Handle scroll event.
+     * @param event Scroll event.
      */
-    viewerWidth: number;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 
     /**
-     * The value for FlatList windowSize.
-     * @default 3
+     * Component for comic viewer footer.
      */
-    windowSize?: number;
+    ListFooterComponent?: React.ReactElement;
 }> {}

package/src/ComicViewer/ViewerItem.tsx

@@ -1,64 +1,144 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
-import { Image, StyleSheet } from '@fountain-ui/core';
+import * as R from 'ramda';
+import type { PlaceholderProps } from '@fountain-ui/core';
+import { IconButton, Image, Spacer, useTheme } from '@fountain-ui/core';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { Restart } from '@fountain-ui/icons';
 import ComicViewerItemProps from './ComicViewerItemProps';
 
-const styles = StyleSheet.create({
-    placeholder: {
-        backgroundColor: '#abcabc',
-    },
-});
+type PlaceholderStyles = NamedStylesStringUnion<'init' | 'failed' | 'reload'>;
+
+const useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {
+    const theme = useTheme();
+
+    return {
+        init: {
+            backgroundColor: theme.palette.paper.grey,
+        },
+        failed: {
+            backgroundColor: theme.palette.paper.grey,
+        },
+        reload: {
+            backgroundColor: theme.palette.paper.grey,
+            display: 'flex',
+            alignItems: 'center',
+        },
+    };
+};
 
 function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
     const {
+        expiresAt,
+        errorRetryCount = 3,
         height,
-        id,
+        itemState,
         isViewable,
-        onError,
-        sourceUrl,
+        sortKey,
+        url,
         width,
+        getNextPage,
+        onError,
+        onLoaded,
     } = props;
 
     const [isLoaded, setIsLoaded] = useState(false);
 
-    const errorCount = useRef<number>(0);
+    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]);
 
     const handleError = useCallback(() => {
         errorCount.current = errorCount.current + 1;
 
+        const expired = expiresAt ? new Date(expiresAt) <= new Date() : false;
+
+        onError && onError({
+            sortKey,
+            count: errorCount.current,
+            expired,
+        });
+    }, [errorCount.current]);
+
+    const onReloadPress = useCallback(() => {
+        errorCount.current = 1;
+
         onError && onError({
-            id,
-            count: errorCount.current
+            sortKey,
+            count: errorCount.current,
+            expired: false,
         });
-    }, [id]);
+    }, [sortKey]);
 
     const viewStyle = { width, height };
 
-    const Placeholder = () => (
-        <View style={[
-            viewStyle,
-            styles.placeholder,
-        ]}/>
-    );
+    const Placeholder = useCallback((props: PlaceholderProps) => {
+        const { children, failed } = props;
 
-    if (!isViewable && !isLoaded) {
-        return <Placeholder/>;
-    }
+        if (!isViewable && !isLoaded) {
+            return <View style={[
+                viewStyle,
+                styles.init,
+            ]}/>;
+        }
+
+        if (errorCount.current >= errorRetryCount) {
+            return <View 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}
+                />
+            </View>;
+        }
+
+        if (failed) {
+            return (
+                <View style={[
+                    viewStyle,
+                    styles.failed,
+                ]}/>
+            );
+        }
+
+        return children ? children : null;
+    }, [isViewable, isLoaded, errorCount.current, url]);
+
+    useEffect(() => {
+        if (url === '') {
+            getNextPage?.(sortKey);
+        }
+    }, []);
 
     return (
         <Image
             disableOutline={true}
-            key={sourceUrl}
+            key={sortKey}
             onLoad={onLoad}
             onError={handleError}
-            source={{ uri: sourceUrl }}
+            source={{ uri: url }}
             style={viewStyle}
             square={true}
+            Placeholder={Placeholder}
         />
     );
 }
@@ -68,7 +148,7 @@ export default React.memo(ViewerItem, (prevProps, nextProps) => {
         return false;
     }
 
-    if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
+    if (prevProps.props.url !== nextProps.props.url) {
         return false;
     }