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

package/src/ComicViewer/ComicViewer.tsx

@@ -1,237 +1,292 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, ListRenderItem, ViewToken } from 'react-native';
 import * as R from 'ramda';
-import {
-    ComicViewerItemData,
-    ComicViewerItemState,
-    default as ComicViewerProps,
-    ErrorInfo,
-    STATE,
-} from './ComicViewerProps';
-import type ComicViewerItemProps from './ComicViewerItemProps';
+import { useDebounce } from '@fountain-ui/core';
+import { default as ComicViewerProps, Dimension } from './ComicViewerProps';
 import ViewerItem from './ViewerItem';
 
-const getItemHeights = <T, >(items: ComicViewerItemProps<T>[]): number[] => R.map((content: ComicViewerItemProps<T>) => content.height)(items);
 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.sortKey}`;
-
-export default function ComicViewer<T>(props: ComicViewerProps<T>) {
+const getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);
+
+const keyExtractor = <T, >(item: ItemState) => String(item.index);
+
+interface UrlState {
+    url: string;
+    validity: 'valid' | 'invalid' | 'unknown';
+}
+
+interface ImageState {
+    urlState?: UrlState;
+    isNewUrlIncoming: boolean;
+    totalErrorCount: number;
+    dimension: Dimension;
+}
+
+interface ItemState {
+    index: number;
+    url?: string;
+    reloadButtonVisible: boolean;
+    dimension: Dimension;
+}
+
+const createInitialImageState = (dimension: Dimension): ImageState => ({
+    isNewUrlIncoming: false,
+    totalErrorCount: 0,
+    dimension,
+});
+
+const mapImageStateToItemState = (
+    index: number,
+    imageState: ImageState,
+    autoHandleErrorCount: number,
+): ItemState => ({
+    index,
+    url: imageState.urlState?.url,
+    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,
+    dimension: imageState.dimension,
+});
+
+const MAXIMUM_WIDTH = 720;
+
+const NUMBER_OF_ADJACENT_ITEM = 5;
+
+export default function ComicViewer(props: ComicViewerProps) {
     const {
-        data,
-        errorDebounceMillis = 500,
-        errorRetryCount = 3,
-        responseTimestamp,
+        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<FlatList>(null);
 
-    const errors = useRef<Map<number, ErrorInfo>>(new Map());
+    const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+    const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);
+
+    const actualImageWidth = Math.min(viewportWidth, MAXIMUM_WIDTH);
+
+    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicDimensions), []);
+    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);
+
+    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {
+        return imageStates.map((image, index) => mapImageStateToItemState(
+            index, image, autoHandleErrorCount,
+        ));
+    };
 
-    const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);
+    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {
+        return mapImageStatesToItemStates(imageStatesRef.current);
+    });
 
-    const imageWidth = Math.min(viewerWidth, 720);
-    const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({
-        ...itemData,
-        isViewable: false,
-        width: imageWidth,
-        height: (itemData.height * imageWidth) / itemData.width,
-    }))(data);
+    const renderedDimensions = useMemo<Array<Dimension>>(() => {
+        return R.map(intrinsicDimension => ({
+            width: actualImageWidth,
+            height: (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width,
+        }), intrinsicDimensions);
+    }, [actualImageWidth]);
 
-    const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);
+    const layoutFromDimensions = useCallback(() => {
+        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);
+        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);
+        const itemOffsets = R.prepend(0, heightAccum);
 
-    const initialItemState: ComicViewerItemState[] = R.map((itemData: ComicViewerItemData<T>) => ({
-        sortKey: itemData.sortKey,
-        state: R.isNil(itemData.id) ? STATE.INIT : STATE.URL_LOADED,
-    }))(data);
+        const getItemLayout = (data: any, index: number) => ({
+            index,
+            length: itemHeights[index],
+            offset: itemOffsets[index],
+        });
 
-    const itemStates = useRef<Array<ComicViewerItemState>>(initialItemState);
+        return {
+            totalHeight,
+            getItemLayout,
+        };
+    }, [renderedDimensions]);
 
-    const itemHeights = [...getItemHeights(items)];
-    const itemHeightAccum = getHeightAccum(itemHeights);
+    const { totalHeight, getItemLayout } = layoutFromDimensions();
 
     const viewabilityConfig = useMemo(() => ({
         itemVisiblePercentThreshold,
     }), [itemVisiblePercentThreshold]);
 
-    const getItemLayout = useCallback((data: any, index: number) => {
-        const offsets = R.prepend(0, itemHeightAccum[1]);
+    const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {
+        const prevImageStates = imageStatesRef.current;
+        const newImageStates = prevImageStates.map(updateFunction);
 
-        return {
-            length: itemHeights[index],
-            offset: offsets[index],
-            index,
-        };
-    }, [itemHeights]);
-
-    const onViewableItemsChanged = useRef(({ viewableItems }: {
-        viewableItems: Array<ViewToken>,
-    }) => {
-        setItems((prev: ComicViewerItemProps<T>[]) => {
-            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;
-            }
+        imageStatesRef.current = newImageStates;
+
+        setItemStates(prevItemStates => {
+            const newItemStates = mapImageStatesToItemStates(newImageStates);
 
-            const frontBoundary = R.max(firstItem.sortKey, firstViewableSortKey - 1);
-            const backBoundary = R.min(lastItem.sortKey, lastViewableItemSortKey + 1);
+            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;
+        });
+    };
+
+    const loadUrlByIndex = async (indexes: number[]) => {
+        const filteredIndexes = R.filter(index => {
+            const state = imageStatesRef.current[index];
 
-            const viewableItemBoundary = R.range(frontBoundary, backBoundary + 1);
-            const newItems = R.map((prevItem: ComicViewerItemProps<T>) => ({
-                ...prevItem,
-                isViewable: R.includes(prevItem.sortKey, viewableItemBoundary),
-            }))([...prev]);
+            return R.isNil(state.urlState)
+                || (state.urlState?.validity === 'invalid' && !state.isNewUrlIncoming);
+        }, indexes);
 
-            return newItems;
+        updateImageState((imageState, i) => {
+            return R.includes(i, filteredIndexes)
+                ? { ...imageState, isNewUrlIncoming: true }
+                : imageState;
         });
-    });
 
-    const itemLoadedHandler = useCallback((sortKey: number) => {
-        const itemState: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === sortKey)(itemStates.current);
+        try {
+            const urls = await getUrlByIndex(filteredIndexes);
 
-        if (R.isNil(itemState)) {
-            return;
+            updateImageState((imageState, i) => {
+                const newUrl = urls?.get(i);
+                const urlState = imageState.urlState;
+
+                if (newUrl !== undefined && 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;
+            });
         }
+    };
 
-        itemState.state = STATE.LOADED;
-        itemState.error = undefined;
-    }, [itemStates]);
+    const loadMaybeLoadableItems = async () => {
+        const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+        const affectedIndexes = R.range(startIndex, endIndex);
 
-    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {
-        const { sortKey, count } = errorInfo;
+        await loadUrlByIndex(affectedIndexes);
+    };
 
-        if (count >= errorRetryCount) {
-            return;
-        }
+    const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);
 
-        errors.current.set(sortKey, errorInfo);
+    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+        const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);
 
-        const itemState: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === sortKey)(itemStates.current);
+        const firstViewableIndex = R.head(orderedViewableItems)?.index;
+        const lastViewableItemIndex = R.last(orderedViewableItems)?.index;
 
-        if (R.isNil(itemState)) {
+        if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {
             return;
         }
 
-        itemState.state = STATE.FAIL;
-        itemState.error = errorInfo;
+        const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);
+        const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);
 
-        const handleError = () => {
-            const errorsArray = Array.from(errors.current.entries());
-            const errorsInfo = R.map(([key, value]: [number, ErrorInfo]) => value)(errorsArray);
+        maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
 
-            onError && onError([...errorsInfo]);
-            errors.current.clear();
-        };
+        loadItemsDebounce();
+    });
 
-        if (debounceTimeOut.current) {
-            clearTimeout(debounceTimeOut.current);
-        }
+    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {
+        const onError = () => {
+            updateImageState((imageState, i) => {
+                const urlState = imageState.urlState;
 
-        if (errors.current.size === pageUnit) {
-            handleError();
-        } else {
-            debounceTimeOut.current = setTimeout(handleError, errorDebounceMillis);
-        }
-    }, [errors.current, itemStates]);
-
-    const renderItem: ListRenderItem<ComicViewerItemProps<T>> = useCallback(({ item }) => {
-        const itemState: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === item.sortKey)(itemStates.current);
-
-        const props = {
-            ...item,
-            itemState,
-            responseTimestamp,
-            errorRetryCount,
-            onError: itemErrorHandler,
-            onLoaded: itemLoadedHandler,
-            onItemPress,
-            getNextPage,
-        };
+                if (i === index && urlState !== undefined) {
+                    return {
+                        ...imageState,
+                        totalErrorCount: imageState.totalErrorCount + 1,
+                        urlState: {
+                            ...urlState,
+                            validity: 'invalid',
+                        },
+                    };
+                }
 
-        return <ViewerItem props={props}/>;
-    }, [responseTimestamp, itemErrorHandler, itemLoadedHandler, onItemPress]);
+                return imageState;
+            });
 
-    useEffect(() => {
-        setItems((prev: ComicViewerItemProps<T>[]) => {
-            return R.map((prevItem: ComicViewerItemProps<T>) => {
-                const currentData: ComicViewerItemData | undefined = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.sortKey === currentItemData.sortKey)(data);
-                const itemState: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === currentData?.sortKey)(itemStates.current);
+            if (item.reloadButtonVisible) {
+                return;
+            }
+
+            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+            if (index >= startIndex || index < endIndex) {
+                loadItemsDebounce();
+            }
+        };
 
-                if (currentData
-                    && currentData.id
-                    && itemState
-                    && itemState.state !== STATE.LOADED) {
+        const onReloadPress = () => {
+            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+            if (index >= startIndex || index < endIndex) {
+                loadUrlByIndex([index]);
+            }
+        };
 
-                    itemState.state = STATE.URL_LOADED;
+        const onLoad = () => {
+            updateImageState((imageState, i) => {
+                const urlState = imageState.urlState;
 
+                if (i === index && urlState !== undefined) {
                     return {
-                        ...prevItem,
-                        url: currentData.url,
-                        expiresAt: currentData.expiresAt,
+                        ...imageState,
+                        urlState: {
+                            ...urlState,
+                            validity: 'valid',
+                        },
                     };
                 }
 
-                return prevItem;
-            })([...prev]);
-            ;
-        });
-    }, [responseTimestamp]);
-
-    useEffect(() => {
-        const newItems = R.map((item: ComicViewerItemProps<T>) => ({
-            ...item,
-            width: imageWidth,
-            height: (item.height * imageWidth) / item.width,
-        }))(items);
+                return imageState;
+            });
+        };
 
-        setItems(newItems);
-    }, [imageWidth]);
+        return (
+            <ViewerItem
+                onError={onError}
+                onLoad={onLoad}
+                onPress={onItemPress}
+                onReloadPress={onReloadPress}
+                url={item.url}
+                width={renderedDimensions[index]?.width ?? 0}
+                height={renderedDimensions[index]?.height ?? 0}
+                reloadButtonVisible={item.reloadButtonVisible}
+            />
+        );
+    }, [onItemPress, renderedDimensions]);
 
     useEffect(() => {
-        const totalHeight = itemHeightAccum[0];
         const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);
 
         if (flatListRef.current) {
             flatListRef.current.scrollToOffset({ offset, animated: false });
         }
-    }, [flatListRef.current]);
+    }, []);
 
     return (
         <FlatList
-            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}
             {...otherProps}
         />
     );
-};
+};

package/src/ComicViewer/ComicViewerProps.ts

@@ -2,103 +2,23 @@ import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
 import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
-export const STATE = {
-    INIT: 'init',
-    URL_LOADED: 'url_loaded',
-    LOADED: 'loaded',
-    FAIL: 'fail',
-} as const;
-
-export type LoadingState = typeof STATE[keyof typeof STATE];
-
-export interface ComicViewerItemState{
-    /**
-     * Comic viewer item sortKey.
-     */
-    sortKey: number;
-
-    /**
-     * Content's loading state.
-     */
-    state: LoadingState;
-
-    /***
-     * Content's error Info.
-     */
-    error?: ErrorInfo;
-}
-
-export interface ErrorInfo {
-    /**
-     * ComicViewerItemData.sortKey.
-     */
-    sortKey: number;
-
-    /**
-     * Number of times an error occurred.
-     */
-    count: number;
-
-    /**
-     * Content is Expired: true
-     */
-    expired: boolean;
-}
-
-export type ComicViewerItemData<T = {}> = T & {
-    /**
-     * Image height.
-     */
-    height: number;
-
-    /**
-     * Unique value for identifying.
-     */
-    id: number | undefined;
-
-    /**
-     * Image sourceUrl for displaying.
-     */
-    url: string;
-
-    /**
-     * Image width.
-     */
+export interface Dimension {
     width: number;
-
-    /**
-     * SortKey
-     */
-    sortKey: number;
-
-    /**
-     * Image expire date.
-     */
-    expiresAt: string;
-
-    /***
-     * Timestamp when get content response
-     */
-    responseTimestamp: number;
+    height: number;
 }
 
-export default interface ComicViewerProps<T> extends ComponentProps <{
-    /**
-     * Data for render.
-     */
-    data: ComicViewerItemData<T>[];
-
+export default interface ComicViewerProps extends ComponentProps <{
     /**
      * Delay Time to call the error handler.
      * @default 500
      */
-    errorDebounceMillis?: number;
+    debounceMillis?: number;
 
     /**
-     * How many times retry onError when same item error occur
+     * How many times handle onError directly when item error occur
      * @default 3
      */
-    errorRetryCount?: number;
+    autoHandleErrorCount?: number;
 
     /**
      * How many items to render in the initial batch.
@@ -119,15 +39,15 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
      */
     itemVisiblePercentThreshold?: number;
 
-    /***
-     * Timestamp when get content response
+    /**
+     * Dimensions of each Image considering viewport.
      */
-    responseTimestamp: number;
+    intrinsicDimensions: Array<Dimension>;
 
     /**
-     * Comic viewer width.
+     * TBD
      */
-    viewerWidth: number;
+    viewportWidth: number;
 
     /**
      * The value for FlatList windowSize.
@@ -136,21 +56,9 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
     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.
+     * TBD
      */
-    onError?: (errors: ErrorInfo[]) => void;
+    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;
 
     /**
      * Handle scroll event.
@@ -167,4 +75,4 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
      * Component for comic viewer footer.
      */
     ListFooterComponent?: React.ReactElement;
-}> {}
+}> {}

package/src/ComicViewer/ReloadButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import { IconButton, IconButtonProps } from '@fountain-ui/core';
+import { Restart } from '@fountain-ui/icons';
+
+interface ReloadButtonProps {
+    onPress: IconButtonProps['onPress'];
+}
+
+export default function ReloadButton(props: ReloadButtonProps) {
+    return (
+        <View
+            style={{
+                width: '100%',
+                height: '100%',
+                alignItems: 'center',
+                paddingTop: 80,
+            }}
+        >
+            <IconButton
+                {...props}
+                children={<Restart fill={'#ffffff'}/>}
+                style={{
+                    width: 48,
+                    height: 48,
+                    borderRadius: 24,
+                    color: '#ffffff',
+                    backgroundColor: '#767676',
+                }}
+            />
+        </View>
+    );
+};