@fountain-ui/lab 2.0.0-beta.5 → 2.0.0-beta.50

package/src/ComicViewer/ComicViewer.tsx

@@ -1,162 +1,341 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FlatList, ListRenderItem, ViewToken } from 'react-native';
+import { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, ViewToken } from 'react-native';
 import * as R from 'ramda';
-import { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
-import type ComicViewerItemProps from './ComicViewerItemProps';
+import { useDebounce } from '@fountain-ui/core';
+import { default as ComicViewerProps, Dimension } from './ComicViewerProps';
 import ViewerItem from './ViewerItem';
+import FastScroll from './FastScroll';
 
-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 getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);
 
-const keyExtractor = <T, >(item: ComicViewerItemProps<T>) => item.id;
+const keyExtractor = <T, >(item: ItemState) => String(item.index);
 
-export default function ComicViewer<T>(props: ComicViewerProps<T>) {
+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 mapIndexed = R.addIndex<Dimension>(R.map);
+
+const MAXIMUM_WIDTH = 720;
+
+const NUMBER_OF_ADJACENT_ITEM = 5;
+
+export default function ComicViewer(props: ComicViewerProps) {
     const {
-        data,
-        errorDebounceMillis = 500,
-        errorRetryCount = 3,
+        debounceMillis = 100,
+        autoHandleErrorCount = 3,
+        fastScrollOptions,
+        getUrlByIndex,
         initialNumToRender = 1,
         initialScrollPercentage = 0,
         itemVisiblePercentThreshold = 0,
+        intrinsicDimensions,
+        maxContentWidth = MAXIMUM_WIDTH,
+        onItemPress,
+        onScroll,
         onError,
-        viewerWidth,
+        onReloadPress,
+        viewportWidth,
+        invisiblePaddingTop = 0,
         windowSize = 3,
         ...otherProps
     } = props;
 
+    const fastScrollRef = fastScrollOptions?.ref;
+
     const flatListRef = useRef<FlatList>(null);
 
-    const errors = useRef<Map<string, number>>(new Map());
-    const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);
+    const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);
+
+    const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
 
-    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.sourceUrl)(data));
+    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicDimensions), []);
+    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);
 
-    const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({
-        ...itemData,
-        isViewable: false,
-        width: viewerWidth,
-        height: (itemData.height * viewerWidth) / itemData.width,
-    }))(data);
+    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {
+        return imageStates.map((image, index) => mapImageStateToItemState(
+            index, image, autoHandleErrorCount,
+        ));
+    };
+
+    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {
+        return mapImageStatesToItemStates(imageStatesRef.current);
+    });
+
+    const renderedDimensions = useMemo<Array<Dimension>>(() => {
+        return mapIndexed((intrinsicDimension, index) => {
+            const height = (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width + (index === 0 ? invisiblePaddingTop : 0);
+
+            return {
+                width: actualImageWidth,
+                height: isNaN(height) ? 0 : height,
+            };
+        }, intrinsicDimensions);
+    }, [actualImageWidth]);
+
+    const layoutFromDimensions = useCallback(() => {
+        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);
+        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);
+        const itemOffsets = R.prepend(0, heightAccum);
+
+        const getItemLayout = (data: any, index: number) => ({
+            index,
+            length: itemHeights[index],
+            offset: itemOffsets[index],
+        });
 
-    const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);
+        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 viewableItemIds = R.map((viewableItem: ViewToken) => viewableItem.item.id)(viewableItems);
-
-            return R.map((prevItem: ComicViewerItemProps<T>) => ({
-                ...prevItem,
-                isViewable: R.includes(prevItem.id, viewableItemIds),
-            }))([...prev]);
+        imageStatesRef.current = newImageStates;
+
+        setItemStates(prevItemStates => {
+            const newItemStates = mapImageStatesToItemStates(newImageStates);
+
+            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;
         });
-    });
+    };
 
-    const onErrorHandler = (errors: ErrorInfo[]) => {
-        const isRetryLimited = R.any((error: ErrorInfo) => error.count >= errorRetryCount)(errors);
+    const loadUrlByIndex = async (indexes: number[]) => {
+        const filteredIndexes = R.filter(index => {
+            const state = imageStatesRef.current[index];
 
-        if (isRetryLimited) {
-            return;
+            return !state.isNewUrlIncoming
+                && (R.isNil(state.urlState) || state.urlState?.validity === 'invalid');
+        }, indexes);
+
+        updateImageState((imageState, i) => {
+            return R.includes(i, filteredIndexes)
+                ? { ...imageState, isNewUrlIncoming: true }
+                : imageState;
+        });
+
+        try {
+            const urls = await getUrlByIndex(filteredIndexes);
+
+            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;
+            });
+        } catch (e) {
+            // ignore
+        } finally {
+            updateImageState((imageState, i) => {
+                return R.includes(i, filteredIndexes)
+                    ? { ...imageState, isNewUrlIncoming: false }
+                    : imageState;
+            });
         }
+    };
 
-        onError && onError(errors);
+    const loadMaybeLoadableItems = () => {
+        const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+        const affectedIndexes = R.range(startIndex, endIndex);
+
+        loadUrlByIndex(affectedIndexes);
     };
 
-    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {
-        errors.current.set(errorInfo.id, errorInfo.count);
+    const ignoreDebounce = useRef(true);
+    const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);
+
+    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+        const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);
 
-        if (debounceTimeOut.current) {
-            clearTimeout(debounceTimeOut.current);
+        const firstViewableIndex = R.head(orderedViewableItems)?.index;
+        const lastViewableItemIndex = R.last(orderedViewableItems)?.index;
+
+        if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {
+            return;
         }
 
-        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]);
-
-    const renderItem: ListRenderItem<ComicViewerItemProps<T>> = useCallback(({ item }) => {
-        const props = {
-            ...item,
-            onError: itemErrorHandler,
-        };
+        const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);
+        const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);
 
-        return <ViewerItem props={props}/>;
-    }, []);
+        maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
 
-    useEffect(() => {
-        setItems((prev: ComicViewerItemProps<T>[]) => {
-            return R.map((prevItem: ComicViewerItemProps<T>) => {
-                const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.id === currentItemData.id)(data);
+        if (ignoreDebounce.current) {
+            loadMaybeLoadableItems();
+
+            ignoreDebounce.current = false;
+            return;
+        }
+
+        loadItemsDebounce();
+    });
+
+    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        fastScrollRef?.current?.onContentScroll(event);
+
+        onScroll?.(event);
+    }, [onScroll]);
+
+    const scrollContentToOffset = (offset: number) => {
+        flatListRef.current?.scrollToOffset({
+            offset,
+            animated: false,
+        });
+    };
+
+    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {
+        const handleError = () => {
+            onError && onError();
+
+            updateImageState((imageState, i) => {
+                const urlState = imageState.urlState;
 
-                if (currentData && (currentData.sourceUrl !== prevItem.sourceUrl)) {
+                if (i === index && urlState !== undefined) {
                     return {
-                        ...prevItem,
-                        sourceUrl: currentData.sourceUrl,
+                        ...imageState,
+                        totalErrorCount: imageState.totalErrorCount + 1,
+                        urlState: {
+                            ...urlState,
+                            validity: 'invalid',
+                        },
                     };
                 }
 
-                return prevItem;
-            })([...prev]);
-        });
-    }, [resourceString]);
+                return imageState;
+            });
 
-    useEffect(() => {
-        const newItems = R.map((item: ComicViewerItemProps<T>) => ({
-            ...item,
-            width: viewerWidth,
-            height: (item.height * viewerWidth) / item.width,
-        }))(items);
+            if (item.reloadButtonVisible) {
+                return;
+            }
+
+            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+            if (index >= startIndex || index < endIndex) {
+                loadItemsDebounce();
+            }
+        };
+
+        const handleReloadPress = () => {
+            onReloadPress && onReloadPress();
+
+            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
+            if (index >= startIndex || index < endIndex) {
+                loadUrlByIndex([index]);
+            }
+        };
 
-        setItems(newItems);
-    }, [viewerWidth]);
+        const onLoad = () => {
+            updateImageState((imageState, i) => {
+                const urlState = imageState.urlState;
+
+                if (i === index && urlState !== undefined) {
+                    return {
+                        ...imageState,
+                        urlState: {
+                            ...urlState,
+                            validity: 'valid',
+                        },
+                    };
+                }
+
+                return imageState;
+            });
+        };
+
+        return (
+            <ViewerItem
+                onError={handleError}
+                onLoad={onLoad}
+                onPress={onItemPress}
+                onReloadPress={handleReloadPress}
+                url={item.url}
+                invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}
+                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}
-            getItemLayout={getItemLayout}
-            initialNumToRender={initialNumToRender}
-            keyExtractor={keyExtractor}
-            onViewableItemsChanged={onViewableItemsChanged.current}
-            ref={flatListRef}
-            renderItem={renderItem}
-            viewabilityConfig={viewabilityConfig}
-            windowSize={windowSize}
-            {...otherProps}
-        />
+        <React.Fragment>
+            <FlatList
+                data={itemStates}
+                getItemLayout={getItemLayout}
+                initialNumToRender={initialNumToRender}
+                keyExtractor={keyExtractor}
+                onViewableItemsChanged={onViewableItemsChanged.current}
+                ref={flatListRef}
+                renderItem={renderItem}
+                viewabilityConfig={viewabilityConfig}
+                windowSize={windowSize}
+                onScroll={handleScroll}
+                {...otherProps}
+            />
+
+            <FastScroll
+                {...fastScrollOptions}
+                contentLength={totalHeight}
+                scrollContentToOffset={scrollContentToOffset}
+            />
+        </React.Fragment>
     );
 };

package/src/ComicViewer/ComicViewerProps.ts

@@ -1,90 +1,106 @@
+import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { FastScrollOptions } from './FastScrollProps';
 
-export interface ErrorInfo {
+export interface Dimension {
+    width: number;
+    height: number;
+}
+
+export default interface ComicViewerProps extends ComponentProps <{
     /**
-     * ComicViewerItemData.id.
+     * Delay Time to call the error handler.
+     * @default 100
      */
-    id: string;
+    debounceMillis?: number;
 
     /**
-     * Number of times an error occurred.
+     * How many times handle onError directly when item error occur
+     * @default 3
      */
-    count: number;
-}
+    autoHandleErrorCount?: number;
 
-export type ComicViewerItemData<T = {}> = T & {
     /**
-     * Image height.
+     * How many items to render in the initial batch.
+     * @default 1
      */
-    height: number;
+    initialNumToRender?: number;
 
     /**
-     * Unique value for identifying.
+     * Start at initialScrollPercentage.
+     * If over 100, scroll to end.
+     * @default 0
      */
-    id: string;
+    initialScrollPercentage?: number;
 
     /**
-     * Image sourceUrl for displaying.
+     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.
+     * @default 0
      */
-    sourceUrl: string;
+    itemVisiblePercentThreshold?: number;
 
     /**
-     * Image width.
+     * Dimensions of each Image considering viewport.
      */
-    width: number;
-}
+    intrinsicDimensions: Array<Dimension>;
 
-export default interface ComicViewerProps<T> extends ComponentProps <{
     /**
-     * Data for render.
+     * Need invisible paddingTop viewer vertically expanded.
+     * @default 0
      */
-    data: ComicViewerItemData<T>[];
+    invisiblePaddingTop?: number;
 
     /**
-     * Delay Time to call the error handler.
-     * @default 500
+     * Max value of contents image width size.
+     * @default 720
      */
-    errorDebounceMillis?: number;
+    maxContentWidth?: number;
 
     /**
-     * How many times retry onError when same item error occur
+     * Width of viewport.
+     */
+    viewportWidth: number;
+
+    /**
+     * The value for FlatList windowSize.
      * @default 3
      */
-    errorRetryCount?: number;
+    windowSize?: number;
 
-     /**
-     * How many items to render in the initial batch.
-     * @default 1
+    /**
+     * Options for fastscroll component.
      */
-    initialNumToRender?: number;
+    fastScrollOptions: FastScrollOptions;
 
     /**
-     * Start at initialScrollPercentage.
-     * If over 100, scroll to end.
-     * @default 0
+     * Get contents urls by indexes.
      */
-    initialScrollPercentage?: number;
+    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;
 
     /**
-     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.
-     * @default 0
+     * Handle scroll event.
+     * @param event Scroll event.
      */
-    itemVisiblePercentThreshold?: number;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 
     /**
-     * Handling all viewerItem errors at once.
-     * @param errors Array of ViewerItems errorInfo.
+     * Handle item press event.
      */
-    onError?: (errors: ErrorInfo[]) => void;
+    onItemPress?: () => void;
 
     /**
-     * Comic viewer width.
+     * Handle image loading fail event.
      */
-    viewerWidth: number;
+    onError?: () => void;
 
     /**
-     * The value for FlatList windowSize.
-     * @default 3
+     * Handle reload button press event.
      */
-    windowSize?: number;
-}> {}
+    onReloadPress?: () => void;
+
+    /**
+     * Component for comic viewer footer.
+     */
+    ListFooterComponent?: React.ReactElement;
+}> {}