@fountain-ui/lab 2.0.0-beta.7 → 2.0.0-beta.71

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;
+}