@fountain-ui/lab 2.0.0-beta.6 → 2.0.0-beta.60

package/src/ComicViewer/ComicViewer.tsx

@@ -1,162 +1,298 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FlatList, ListRenderItem, ViewToken } from 'react-native';
+import { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, Platform, ViewToken } from 'react-native';
 import * as R from 'ramda';
-import { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
-import type ComicViewerItemProps from './ComicViewerItemProps';
+import { default as ComicViewerProps, Dimension, IntrinsicImage } 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;
+    totalErrorCount: number;
+    dimension: Dimension;
+    tryRenderingMillis: number;
+}
+
+interface ItemState {
+    index: number;
+    url?: string;
+    imageKey: string;
+    reloadButtonVisible: boolean;
+    dimension: Dimension;
+}
+
+const createInitialImageState = (image: IntrinsicImage): ImageState => ({
+    totalErrorCount: 0,
+    dimension: image.dimension,
+    tryRenderingMillis: 0,
+    urlState: {
+        url: image.url,
+        validity: 'unknown',
+    },
+});
+
+const mapImageStateToItemState = (
+    index: number,
+    imageState: ImageState,
+    autoHandleErrorCount: number,
+): ItemState => ({
+    index,
+    url: imageState.urlState?.url,
+    imageKey: `${imageState.tryRenderingMillis}-${index}`,
+    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,
+    dimension: imageState.dimension,
+});
+
+const mapIndexed = R.addIndex<IntrinsicImage>(R.map);
+
+const MAXIMUM_WIDTH = 720;
+
+export default function ComicViewer(props: ComicViewerProps) {
     const {
-        data,
-        errorDebounceMillis = 500,
-        errorRetryCount = 3,
+        debounceMillis = 100,
+        autoHandleErrorCount = 3,
+        fastScrollOptions,
         initialNumToRender = 1,
         initialScrollPercentage = 0,
         itemVisiblePercentThreshold = 0,
+        intrinsicImages,
+        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 actualImageWidth = Math.min(viewportWidth, maxContentWidth);
+
+    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicImages), []);
+
+    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);
+
+    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((intrinsicImage, index) => {
+            const height = (intrinsicImage.dimension.height * actualImageWidth) / intrinsicImage.dimension.width + (index === 0 ? invisiblePaddingTop : 0);
 
-    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.sourceUrl)(data));
+            return {
+                width: actualImageWidth,
+                height: isNaN(height) ? 0 : height,
+            };
+        }, intrinsicImages);
+    }, [actualImageWidth]);
 
-    const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({
-        ...itemData,
-        isViewable: false,
-        width: viewerWidth,
-        height: (itemData.height * viewerWidth) / itemData.width,
-    }))(data);
+    const layoutFromDimensions = useCallback(() => {
+        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);
+        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);
+        const itemOffsets = R.prepend(0, heightAccum);
 
-    const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);
+        const getItemLayout = (data: any, index: number) => ({
+            index,
+            length: itemHeights[index],
+            offset: itemOffsets[index],
+        });
+
+        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 updateTryRenderingMillis = () => {
+        const tryRenderingMillis = new Date().getTime();
+
+        updateImageState((imageState, i) => {
+            const urlState = imageState.urlState;
+
+            if (urlState?.validity === 'invalid') {
+                return {
+                    ...imageState,
+                    tryRenderingMillis,
+                };
+            }
+
+            return imageState;
         });
+    };
+    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+        updateTryRenderingMillis();
     });
 
-    const onErrorHandler = (errors: ErrorInfo[]) => {
-        const isRetryLimited = R.any((error: ErrorInfo) => error.count >= errorRetryCount)(errors);
+    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        fastScrollRef?.current?.onContentScroll(event);
 
-        if (isRetryLimited) {
-            return;
-        }
+        onScroll?.(event);
+    }, [onScroll]);
 
-        onError && onError(errors);
+    const scrollContentToOffset = (offset: number) => {
+        flatListRef.current?.scrollToOffset({
+            offset,
+            animated: false,
+        });
     };
 
-    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {
-        errors.current.set(errorInfo.id, errorInfo.count);
+    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {
+        const handleError = () => {
+            onError && onError();
 
-        if (debounceTimeOut.current) {
-            clearTimeout(debounceTimeOut.current);
-        }
+            updateImageState((imageState, i) => {
+                const urlState = imageState.urlState;
+
+                if (i === index) {
+                    return {
+                        ...imageState,
+                        totalErrorCount: imageState.totalErrorCount + 1,
+                        urlState: {
+                            ...urlState,
+                            validity: 'invalid',
+                        },
+                    };
+                }
+
+                return imageState;
+            });
 
-        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,
+            if (item.reloadButtonVisible) {
+                return;
+            }
+
+            updateTryRenderingMillis();
         };
 
-        return <ViewerItem props={props}/>;
-    }, []);
+        const handleReloadPress = () => {
+            onReloadPress && onReloadPress();
 
-    useEffect(() => {
-        setItems((prev: ComicViewerItemProps<T>[]) => {
-            return R.map((prevItem: ComicViewerItemProps<T>) => {
-                const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.id === currentItemData.id)(data);
+            updateTryRenderingMillis();
+        };
 
-                if (currentData && (currentData.sourceUrl !== prevItem.sourceUrl)) {
+        const onLoad = () => {
+            updateImageState((imageState, i) => {
+                const urlState = imageState.urlState;
+
+                if (i === index && urlState !== undefined) {
                     return {
-                        ...prevItem,
-                        sourceUrl: currentData.sourceUrl,
+                        ...imageState,
+                        urlState: {
+                            ...urlState,
+                            validity: 'valid',
+                        },
                     };
                 }
 
-                return prevItem;
-            })([...prev]);
-        });
-    }, [resourceString]);
+                return imageState;
+            });
+        };
+
+        return (
+            <ViewerItem
+                onError={handleError}
+                onLoad={onLoad}
+                onPress={onItemPress}
+                onReloadPress={handleReloadPress}
+                url={item.url}
+                imageKey={item.imageKey}
+                invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}
+                width={renderedDimensions[index]?.width ?? 0}
+                height={renderedDimensions[index]?.height ?? 0}
+                reloadButtonVisible={item.reloadButtonVisible}
+            />
+        );
+    }, [onItemPress, renderedDimensions]);
 
     useEffect(() => {
-        const newItems = R.map((item: ComicViewerItemProps<T>) => ({
-            ...item,
-            width: viewerWidth,
-            height: (item.height * viewerWidth) / item.width,
-        }))(items);
+        const scroll = () => {
+            const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);
 
-        setItems(newItems);
-    }, [viewerWidth]);
+            if (flatListRef.current) {
+                flatListRef.current.scrollToOffset({ offset, animated: false });
+            }
+        };
 
-    useEffect(() => {
-        const totalHeight = itemHeightAccum[0];
-        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);
+        let timeoutId: NodeJS.Timeout | undefined = undefined;
 
-        if (flatListRef.current) {
-            flatListRef.current.scrollToOffset({ offset, animated: false });
+        /**
+         * @FIXME
+         * scrollToOffset has issue(no effect) in useEffect hook on iOS.
+         * ref: https://github.com/facebook/react-native/issues/35575
+         */
+        if (Platform.OS === 'ios') {
+            timeoutId = setTimeout(scroll, 0);
+        } else {
+            scroll();
         }
-    }, [flatListRef.current]);
+
+        return () => {
+            timeoutId && clearTimeout(timeoutId);
+        }
+    }, []);
 
     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}
+                initialScrollPercentage={initialScrollPercentage}
+                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 interface IntrinsicImage {
+    dimension: Dimension;
+    url: string;
+}
+
+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 and url info of each Image considering viewport.
      */
-    width: number;
-}
+    intrinsicImages: Array<IntrinsicImage>;
 
-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
+     */
+    maxContentWidth?: number;
+
+    /**
+     * Width of viewport.
      */
-    errorDebounceMillis?: number;
+    viewportWidth: number;
 
     /**
-     * How many times retry onError when same item error occur
+     * 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
+     * Handle scroll event.
+     * @param event Scroll event.
      */
-    initialScrollPercentage?: number;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 
     /**
-     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.
-     * @default 0
+     * Handle item press event.
      */
-    itemVisiblePercentThreshold?: number;
+    onItemPress?: () => void;
 
     /**
-     * Handling all viewerItem errors at once.
-     * @param errors Array of ViewerItems errorInfo.
+     * Handle image loading fail event.
      */
-    onError?: (errors: ErrorInfo[]) => void;
+    onError?: () => void;
 
     /**
-     * Comic viewer width.
+     * Handle reload button press event.
      */
-    viewerWidth: number;
+    onReloadPress?: () => void;
 
     /**
-     * The value for FlatList windowSize.
-     * @default 3
+     * Component for comic viewer footer.
      */
-    windowSize?: number;
-}> {}
+    ListFooterComponent?: React.ReactElement;
+}> {}