@fountain-ui/lab 2.0.0-beta.3 → 2.0.0-beta.31

package/src/Carousel/hooks/usePagingAnimator.ts

@@ -0,0 +1,255 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { useAnimatedValue } from '@fountain-ui/core';
+import type {
+    CreateScrollAnimation,
+    DirectionalPagingAnimationConfig,
+    IndexController,
+    IndexPagingAnimationConfig,
+    PagingAnimationConfig,
+    PagingAnimationType,
+    PagingDirection,
+    StartPagingAnimation,
+} from '../types';
+
+export interface PagingAnimatorConfig {
+    createScrollAnimation: CreateScrollAnimation;
+    itemWidth: number;
+    indexController: IndexController;
+    initialIndex: number;
+    loop: boolean;
+    numberOfData: number;
+}
+
+export interface PagingAnimator {
+    gestureTranslationX: Animated.Value;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    interruptAnimation: () => void;
+    startPagingAnimation: StartPagingAnimation;
+}
+
+function directionToValue(itemWidth: number) {
+    return function (direction: PagingDirection): number {
+        switch (direction) {
+            case 'next':
+                return -itemWidth;
+            case 'prev':
+                return itemWidth;
+            case 'stay':
+                return 0;
+        }
+    };
+}
+
+function toValueCompensator(itemWidth: number) {
+    return function (toValue: number, currentOffset: number): number {
+        const remainder = Math.abs(currentOffset % itemWidth);
+
+        const halfOfItemWidth = Math.abs(itemWidth / 2);
+        const compensateVector = remainder > halfOfItemWidth
+            ? remainder - itemWidth
+            : remainder;
+
+        const direction = currentOffset > 0 ? -1 : 1;
+
+        return toValue + (direction * compensateVector);
+    };
+}
+
+export default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {
+    const {
+        createScrollAnimation,
+        itemWidth,
+        indexController,
+        initialIndex,
+        loop,
+        numberOfData,
+    } = config;
+
+    const {
+        getCurrentIndex,
+        lastIndex,
+        notifyScrollStateHasChanged,
+    } = indexController;
+
+    const initialOffsetX = itemWidth * initialIndex;
+    const accumulativeOffsetX = useAnimatedValue(initialOffsetX);
+    const animationOffsetX = useAnimatedValue(0);
+    const gestureTranslationX = useAnimatedValue(0);
+
+    const globalInterpolation = useMemo(() => {
+        return Animated.add(
+            Animated.add(accumulativeOffsetX, animationOffsetX),
+            gestureTranslationX,
+        );
+    }, []);
+
+    const toValueRef = useRef<number>(0);
+    const currentOffsetRef = useRef<number>(0);
+
+    const isAnimatingRef = useRef<boolean>(false);
+
+    const maxWidth = Math.abs(numberOfData * itemWidth);
+
+    const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {
+        if (loop) {
+            const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);
+            if (isCloseToEnd) {
+                const signOfOffset = offset > 0 ? 1 : -1;
+                return offset + (-signOfOffset * maxWidth);
+            }
+        }
+
+        return offset % maxWidth;
+    }, [itemWidth, loop, maxWidth]);
+
+    const requireNewOffset = useCallback((newOffset: number) => {
+        const nextOffset = ensureOffsetBoundary(newOffset);
+
+        currentOffsetRef.current = nextOffset;
+        accumulativeOffsetX.setValue(nextOffset);
+
+        toValueRef.current = 0;
+        animationOffsetX.setValue(0);
+    }, [
+        ensureOffsetBoundary,
+    ]);
+
+    const interruptAnimation = useCallback(() => {
+        if (!isAnimatingRef.current) {
+            return;
+        }
+
+        animationOffsetX.stopAnimation(lastValue => {
+            isAnimatingRef.current = false;
+
+            const prevOffset = currentOffsetRef.current;
+            const totalOffset = prevOffset + lastValue;
+
+            requireNewOffset(totalOffset);
+
+            notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });
+        });
+    }, [
+        notifyScrollStateHasChanged,
+        requireNewOffset,
+    ]);
+
+    const finalizeAnimation = useCallback(() => {
+        isAnimatingRef.current = false;
+
+        const prevOffset = currentOffsetRef.current;
+        const toValue = toValueRef.current;
+        const totalOffset = prevOffset + toValue;
+
+        requireNewOffset(totalOffset);
+
+        notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });
+    }, [
+        notifyScrollStateHasChanged,
+        requireNewOffset,
+    ]);
+
+    const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {
+        if (isAnimatingRef.current) {
+            return;
+        }
+
+        const configWithDefaults: PagingAnimationConfig = {
+            animated: true,
+            ...config,
+        };
+
+        const currentIndex = getCurrentIndex();
+
+        const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
+        const compensateToValue = toValueCompensator(itemWidth);
+
+        const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {
+            const { direction, isOriginatedFromGesture } = _config;
+
+            if (currentIndex === 0 && direction === 'prev') {
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
+                    : -lastIndex * itemWidth; // last position
+            } else if (currentIndex === lastIndex && direction === 'next') {
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
+                    : lastIndex * itemWidth; // first position
+            }
+            return getValueByDirectionOnAllAdjacentItemsVisible(direction);
+        };
+
+        const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {
+            const _configWithDefaults: DirectionalPagingAnimationConfig = {
+                isOriginatedFromGesture: false,
+                ..._config,
+            };
+
+            return loop
+                ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)
+                : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);
+        };
+
+        const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {
+            if (index < 0 || index > lastIndex || index === currentIndex) {
+                // no animation if index is invalid or equals to current index
+                return 0;
+            }
+
+            const distance = Math.abs(currentIndex - index) * itemWidth;
+            const direction = index > currentIndex ? -1 : 1;
+
+            return distance * direction;
+        };
+
+        const wantedToValue = type === 'directional'
+            // @ts-ignore
+            ? getValueByDirectionalPaging(configWithDefaults)
+            // @ts-ignore
+            : getValueByIndexPaging(configWithDefaults);
+
+        const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);
+
+        toValueRef.current = toValue;
+        isAnimatingRef.current = true;
+
+        notifyScrollStateHasChanged({
+            offset: currentOffsetRef.current + toValue,
+            state: 'dragging',
+        });
+
+        const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;
+        if (Number.isFinite(lastGestureTranslationX)) {
+            animationOffsetX.setValue(lastGestureTranslationX);
+            gestureTranslationX.setValue(0);
+        }
+
+        if (configWithDefaults.animated) {
+            const animation = createScrollAnimation(animationOffsetX, toValue);
+
+            animation.start(({ finished }) => {
+                if (finished) {
+                    finalizeAnimation();
+                }
+            });
+        } else {
+            finalizeAnimation();
+        }
+    }, [
+        createScrollAnimation,
+        getCurrentIndex,
+        finalizeAnimation,
+        itemWidth,
+        lastIndex,
+        loop,
+        notifyScrollStateHasChanged,
+    ]);
+
+    return {
+        gestureTranslationX,
+        globalInterpolation,
+        interruptAnimation,
+        startPagingAnimation,
+    };
+};

package/src/Carousel/index.ts

@@ -1,2 +1,4 @@
-export { default } from './CarouselWeb';
-export type { default as CarouselProps } from './CarouselProps';
+export { default } from './Carousel';
+export type { default as CarouselProps } from './CarouselProps';
+export type { CarouselInstance } from './types';
+export { normalItemStyleFactory, parallaxItemStyleFactory } from './animation';

package/src/Carousel/tick.ts

@@ -0,0 +1,6 @@
+import { logger } from '@fountain-ui/utils';
+
+export default logger('Carousel', {
+    enabled: __DEV__,
+    format: 'diff',
+});

package/src/Carousel/types.ts

@@ -0,0 +1,114 @@
+import type { ReactElement } from 'react';
+import type { Animated, ViewProps } from 'react-native';
+
+const directions = ['next', 'prev', 'stay'] as const;
+
+export type PagingDirection = (typeof directions)[number];
+
+const scrollStates = ['idle', 'dragging', 'interrupted'] as const;
+
+export type ScrollState = (typeof scrollStates)[number];
+
+export type ItemHeight = number | 'auto';
+
+export interface RenderItem<T> {
+    (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;
+}
+
+export interface CreateScrollAnimation {
+    (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;
+}
+
+export interface CreateItemStyle {
+    (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;
+}
+
+export interface GetCurrentIndex {
+    (): number;
+}
+
+export interface OnIndexChange {
+    (itemIndex: number): void;
+}
+
+export interface OnPositionChange {
+    (position: number): void;
+}
+
+export interface ScrollStateChangeEvent {
+    offset: number;
+    state: ScrollState;
+}
+
+export interface IndexController {
+    getCurrentIndex: GetCurrentIndex;
+    lastIndex: number;
+    notifyScrollStateHasChanged: (event: ScrollStateChangeEvent) => void;
+}
+
+export type PagingAnimationType = 'directional' | 'index';
+
+export interface BasePagingAnimationConfig {
+    animated?: boolean;
+    lastGestureTranslationX?: number;
+}
+
+export interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {
+    direction: PagingDirection;
+    isOriginatedFromGesture?: boolean;
+}
+
+export interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {
+    index: number;
+}
+
+export type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;
+
+export interface StartPagingAnimation {
+    (type: PagingAnimationType, config: PagingAnimationConfig): void;
+}
+
+export type VisibleIndexRanges = Array<[number, number]>;
+
+export interface StoreSubscription {
+    (): void;
+}
+
+export interface ItemVisibilityStore {
+    dispatch: (ranges: VisibleIndexRanges) => void;
+    subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;
+    removeAllListeners: () => void;
+}
+
+export interface AutoplayController {
+    pause: () => void;
+    resume: () => void;
+}
+
+export interface ScrollToOption {
+    index: number;
+    animated?: boolean;
+}
+
+export interface CarouselInstance {
+    /**
+     * Get current visible item index.
+     */
+    getCurrentIndex: GetCurrentIndex;
+
+    /**
+     * Scroll to next visible item.
+     */
+    next: () => void;
+
+    /**
+     * Scroll to previous visible item.
+     */
+    prev: () => void;
+
+    /**
+     * Scroll to desired indexed item.
+     * Invalid index is ignored.
+     */
+    scrollTo: (option: ScrollToOption) => void;
+}

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,28 +26,42 @@ export default function ComicViewer<T>(props: ComicViewerProps<T>) {
         initialScrollPercentage = 0,
         itemVisiblePercentThreshold = 0,
         onError,
+        onScroll,
+        onItemPress,
+        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 imageWidth = Math.min(viewerWidth, 720);
     const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({
         ...itemData,
         isViewable: false,
-        width: viewerWidth,
-        height: (itemData.height * viewerWidth) / itemData.width,
+        width: imageWidth,
+        height: (itemData.height * imageWidth) / itemData.width,
     }))(data);
 
     const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);
 
-    const itemHeights = getItemHeights(items);
+    const initialItemState: ComicViewerItemState[] = R.map((itemData: ComicViewerItemData<T>) => ({
+        sortKey: itemData.sortKey,
+        state: STATE.UNLOAD,
+    }))(data);
+
+    const itemStates = useRef<Array<ComicViewerItemState>>(initialItemState);
+
+    const itemHeights = [...getItemHeights(items)];
     const itemHeightAccum = getHeightAccum(itemHeights);
 
     const viewabilityConfig = useMemo(() => ({
@@ -62,79 +82,113 @@ 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: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === sortKey)(itemStates.current);
 
-        if (isRetryLimited) {
+        if (R.isNil(itemState)) {
             return;
         }
 
-        onError && onError(errors);
-    };
+        itemState.state = STATE.LOADED;
+        itemState.error = undefined;
+    }, [itemStates]);
 
     const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {
-        errors.current.set(errorInfo.id, errorInfo.count);
+        const { sortKey, count } = errorInfo;
 
-        if (debounceTimeOut.current) {
-            clearTimeout(debounceTimeOut.current);
+        if (count >= errorRetryCount) {
+            return;
+        }
+
+        errors.current.set(sortKey, errorInfo);
+
+        const itemState: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === sortKey)(itemStates.current);
+
+        if (R.isNil(itemState)) {
+            return;
         }
 
-        debounceTimeOut.current = setTimeout(function () {
+        itemState.state = STATE.FAIL;
+        itemState.error = errorInfo;
+
+        const handleError = () => {
             const errorsArray = Array.from(errors.current.entries());
-            const errorsInfo = R.map(([key, value]: [string, number]) => ({
-                id: key,
-                count: value,
-            }))(errorsArray);
+            const errorsInfo = R.map(([key, value]: [number, ErrorInfo]) => value)(errorsArray);
 
-            onErrorHandler([...errorsInfo]);
+            onError && onError([...errorsInfo]);
             errors.current.clear();
-        }, errorDebounceMillis);
-    }, [errorDebounceMillis, errors.current]);
+        };
+
+        if (debounceTimeOut.current) {
+            clearTimeout(debounceTimeOut.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: ComicViewerItemState | undefined = R.find((state: ComicViewerItemState) => state.sortKey === item.sortKey)(itemStates.current);
+
         const props = {
             ...item,
+            itemState,
+            errorRetryCount,
             onError: itemErrorHandler,
+            onLoaded: itemLoadedHandler,
+            onItemPress,
+            getNextPage,
         };
 
         return <ViewerItem props={props}/>;
-    }, []);
+    }, [resourceString, itemErrorHandler, itemLoadedHandler, onItemPress]);
 
     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: 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 (currentData && (currentData.sourceUrl !== prevItem.sourceUrl)) {
+                if (currentData
+                    && itemState
+                    && itemState.state !== STATE.LOADED
+                    && (currentData.url !== prevItem.url)) {
                     return {
                         ...prevItem,
-                        sourceUrl: currentData.sourceUrl,
+                        url: currentData.url,
+                        expiresAt: currentData.expiresAt,
                     };
                 }
 
                 return prevItem;
             })([...prev]);
+            ;
         });
     }, [resourceString]);
 
     useEffect(() => {
         const newItems = R.map((item: ComicViewerItemProps<T>) => ({
             ...item,
-            width: viewerWidth,
-            height: (item.height * viewerWidth) / item.width,
+            width: imageWidth,
+            height: (item.height * imageWidth) / item.width,
         }))(items);
 
         setItems(newItems);
-    }, [viewerWidth]);
+    }, [imageWidth]);
 
     useEffect(() => {
         const totalHeight = itemHeightAccum[0];
@@ -152,10 +206,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,37 @@ 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;
+
+    /**
+     * 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;