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

package/src/Carousel/components/ItemView.tsx

@@ -0,0 +1,66 @@
+import type { ReactElement } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import type { ViewProps } from 'react-native';
+import { Animated } from 'react-native';
+import { StyleSheet } from '@fountain-ui/core';
+import useItemInterpolation from './useItemInterpolation';
+import InternalContext from './InternalContext';
+
+export interface ItemViewProps {
+    children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;
+    index: number;
+    onLayout?: ViewProps['onLayout'];
+}
+
+export default function ItemView(props: ItemViewProps) {
+    const {
+        children,
+        index,
+        onLayout,
+    } = props;
+
+    const {
+        createItemStyle,
+        itemHeight,
+        itemWidth,
+        itemVisibilityStore,
+    } = useContext(InternalContext);
+
+    const [visible, setVisible] = useState(false);
+
+    const interpolation = useItemInterpolation(index);
+
+    const itemStyle = useMemo(
+        () => createItemStyle(interpolation, itemWidth),
+        [createItemStyle, interpolation, itemWidth],
+    );
+
+    useEffect(() => {
+        return itemVisibilityStore.subscribe(ranges => {
+            const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);
+            setVisible(nextVisible);
+        });
+    }, [index, itemVisibilityStore]);
+
+    return (
+        <Animated.View
+            children={visible ? children(interpolation) : null}
+            onLayout={onLayout}
+            style={[
+                {
+                    width: itemWidth,
+                    height: itemHeight !== 'auto' ? itemHeight : undefined,
+                },
+                styles.absolute,
+                // @ts-ignore
+                itemStyle,
+            ]}
+        />
+    );
+};
+
+const styles = StyleSheet.create({
+    absolute: {
+        position: 'absolute',
+    },
+});

package/src/Carousel/components/RootView.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef, memo, ReactElement, useState } from 'react';
+import type { View, ViewProps, LayoutChangeEvent } from 'react-native';
+import { Animated } from 'react-native';
+import { StyleSheet } from '@fountain-ui/core';
+import type { ItemHeight, RenderItem } from '../types';
+import ItemView from './ItemView';
+
+const styles = StyleSheet.create({
+    root: {
+        width: '100%',
+        justifyContent: 'center',
+    },
+    horizontal: {
+        flexDirection: 'row',
+        overflowX: 'hidden',
+        overflowY: 'visible',
+    },
+});
+
+export type RootViewProps<ItemT> = ViewProps & {
+    data: ReadonlyArray<ItemT>;
+    itemHeight: ItemHeight;
+    originalData: ReadonlyArray<ItemT>;
+    renderItem: RenderItem<ItemT>;
+};
+
+const RootView = forwardRef<View, RootViewProps<any>>(function RootView(props, ref) {
+    const {
+        data,
+        itemHeight,
+        originalData,
+        renderItem,
+        style,
+        ...otherProps
+    } = props;
+
+    const [maxHeightOfRenderedItems, setMaxHeightOfRenderedItems] = useState(0);
+
+    const handleItemLayout = (e: LayoutChangeEvent) => {
+        const { nativeEvent: { layout: { height } } } = e;
+
+        const heightInt = Math.round(height);
+        if (heightInt > maxHeightOfRenderedItems) {
+            setMaxHeightOfRenderedItems(heightInt);
+        }
+    };
+
+    const renderItemView = (item: any, index: number): ReactElement => (
+        <ItemView
+            key={index}
+            index={index}
+            onLayout={itemHeight === 'auto' ? handleItemLayout : undefined}
+        >
+            {(interpolation) => renderItem({
+                item,
+                index: index % originalData.length,
+                interpolation,
+            })}
+        </ItemView>
+    );
+
+    const viewStyles = [
+        styles.root,
+        styles.horizontal,
+        { height: itemHeight === 'auto' ? maxHeightOfRenderedItems : itemHeight },
+        style,
+    ];
+
+    return (
+        <Animated.View
+            ref={ref}
+            {...otherProps}
+            children={data.map(renderItemView)}
+            style={viewStyles}
+        />
+    );
+});
+
+export default memo(RootView);

package/src/Carousel/components/ScrollViewGesture.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react';
+import React, { useCallback } from 'react';
+import { Animated, Platform } from 'react-native';
+import type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+import { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';
+import * as R from 'ramda';
+import type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';
+
+export interface ScrollViewGestureProps {
+    autoplayController: AutoplayController;
+    children: ReactNode;
+    gestureTranslationX: Animated.Value,
+    interruptAnimation: () => void;
+    scrollEnabled: boolean;
+    startPagingAnimation: StartPagingAnimation;
+}
+
+const SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;
+const SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;
+
+const ACTIVE_OFFSET_ABS_X = 5;
+const activeOffsetX: number[] = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
+
+const endAnimationStates: Readonly<GestureHandlerState[]> = [
+    GestureHandlerState.CANCELLED,
+    GestureHandlerState.END,
+    GestureHandlerState.FAILED,
+];
+
+function shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {
+    const isSameDirection = translationX * velocityX > 0;
+    const isEnoughMovement =
+        Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD
+        || Math.abs(velocityX) >= SCROLL_TO_ADJACENT_VX_THRESHOLD;
+
+    return isSameDirection && isEnoughMovement;
+}
+
+export default function ScrollViewGesture(props: ScrollViewGestureProps) {
+    const {
+        autoplayController,
+        children,
+        interruptAnimation,
+        gestureTranslationX,
+        scrollEnabled,
+        startPagingAnimation,
+    } = props;
+
+    const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;
+
+    const handleGestureBegin = useCallback(() => {
+        pauseAutoplay();
+
+        interruptAnimation();
+    }, [interruptAnimation, pauseAutoplay]);
+
+    const handleGestureEvent = useCallback(Animated.event(
+        [{ nativeEvent: { translationX: gestureTranslationX } }],
+        { useNativeDriver: R.not(Platform.OS === 'android' && Platform.Version === 31) },
+    ), []);
+
+    const handleHandlerStateChange = useCallback((event: PanGestureHandlerStateChangeEvent) => {
+        const { nativeEvent: { translationX, velocityX, state } } = event;
+
+        if (endAnimationStates.includes(state)) {
+            const direction: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)
+                ? (translationX < 0 ? 'next' : 'prev')
+                : 'stay';
+
+            startPagingAnimation(
+                'directional',
+                {
+                    direction: direction,
+                    isOriginatedFromGesture: true,
+                    lastGestureTranslationX: translationX,
+                },
+            );
+
+            resumeAutoplay();
+        }
+    }, [startPagingAnimation, resumeAutoplay]);
+
+    return (
+        <PanGestureHandler
+            activeOffsetX={activeOffsetX}
+            children={children}
+            enabled={scrollEnabled}
+            onBegan={handleGestureBegin}
+            onGestureEvent={handleGestureEvent}
+            onHandlerStateChange={handleHandlerStateChange}
+        />
+    );
+}

package/src/Carousel/components/index.ts

@@ -0,0 +1,4 @@
+export { default as InternalContext } from './InternalContext';
+export { default as ItemView } from './ItemView';
+export { default as RootView } from './RootView';
+export { default as ScrollViewGesture } from './ScrollViewGesture';

package/src/Carousel/components/useItemInterpolation.ts

@@ -0,0 +1,107 @@
+import { useContext, useMemo } from 'react';
+import { Animated } from 'react-native';
+import InternalContext from './InternalContext';
+
+const OVERSCROLL_FRICTION_FACTOR = 4;
+
+export default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {
+    const {
+        itemWidth,
+        data,
+        globalInterpolation,
+        loop,
+    } = useContext(InternalContext);
+
+    const numberOfData = data.length;
+
+    const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {
+        const lastIndex = numberOfData - 1;
+        const maxWidth = Math.abs(itemWidth * numberOfData);
+        const halfOfItemWidth = 0.5 * itemWidth;
+
+        const positiveCount = Math.round(lastIndex / 2);
+        const startPosition = index > positiveCount
+            ? (index - numberOfData) * itemWidth
+            : itemWidth * index;
+
+        const max = positiveCount * itemWidth;
+        const min = -((lastIndex - positiveCount) * itemWidth);
+
+        const inputRange = [
+            -maxWidth,
+            min - halfOfItemWidth - startPosition - Number.MIN_VALUE,
+            min - halfOfItemWidth - startPosition,
+            0,
+            max + halfOfItemWidth - startPosition,
+            max + halfOfItemWidth - startPosition + Number.MIN_VALUE,
+            maxWidth,
+        ];
+
+        const outputRange = [
+            startPosition,
+            max + halfOfItemWidth - Number.MIN_VALUE,
+            min - halfOfItemWidth,
+            startPosition,
+            max + halfOfItemWidth,
+            min - halfOfItemWidth + Number.MIN_VALUE,
+            startPosition,
+        ];
+
+        return {
+            inputRange,
+            outputRange,
+            extrapolate: 'clamp',
+        };
+    }, [
+        index,
+        itemWidth,
+        numberOfData,
+    ]);
+
+    const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {
+        const lastIndex = numberOfData - 1;
+        const maxWidth = itemWidth * lastIndex;
+        const startPosition = itemWidth * index;
+        const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;
+
+        const inputRange = [
+            -(maxWidth + itemWidth), // overscroll
+            -maxWidth,
+            0,
+            itemWidth, // overscroll
+        ];
+
+        const outputRange = [
+            -maxWidth + startPosition - friction,
+            -maxWidth + startPosition,
+            startPosition,
+            startPosition + friction,
+        ];
+
+        return {
+            inputRange,
+            outputRange,
+            extrapolate: 'clamp',
+        };
+    }, [
+        index,
+        itemWidth,
+        numberOfData,
+    ]);
+
+    return useMemo(() => {
+        const interpolationConfig = loop
+            ? interpolationConfigOnLoop
+            : interpolationConfigOnNoLoop;
+
+        const localOffsetX = globalInterpolation.interpolate(interpolationConfig);
+
+        return Animated.divide(localOffsetX, itemWidth);
+    }, [
+        globalInterpolation,
+        interpolationConfigOnLoop,
+        interpolationConfigOnNoLoop,
+        itemWidth,
+        loop,
+    ]);
+};

package/src/Carousel/hooks/index.ts

@@ -0,0 +1,5 @@
+export { default as useAutoplayController } from './useAutoplayController';
+export { default as useIndexController } from './useIndexController';
+export { default as useLoopedData } from './useLoopedData';
+export { default as usePagingAnimator } from './usePagingAnimator';
+export { default as useItemVisibilityStore } from './useItemVisibilityStore';

package/src/Carousel/hooks/useAutoplayController.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { AutoplayController, StartPagingAnimation } from '../types';
+import { useDeferredExecutor } from '../../hooks';
+
+export interface AutoplayConfig {
+    enabled: boolean;
+    intervalMillis: number;
+    startPagingAnimation: StartPagingAnimation;
+}
+
+export default function useAutoplayController(config: AutoplayConfig): AutoplayController {
+    const {
+        enabled,
+        intervalMillis,
+        startPagingAnimation,
+    } = config;
+
+    const paused = useRef<boolean>(false);
+
+    const executor = useDeferredExecutor();
+
+    const play = useCallback(() => {
+        if (paused.current) {
+            return;
+        }
+
+        executor.execute(() => {
+            startPagingAnimation(
+                'directional',
+                { direction: 'next', isOriginatedFromGesture: false },
+            );
+            play();
+        }, intervalMillis);
+    }, [intervalMillis, startPagingAnimation]);
+
+    const pause = useCallback(() => {
+        executor.cancel();
+        paused.current = true;
+    }, []);
+
+    const resume = useCallback(() => {
+        paused.current = false;
+        if (enabled) {
+            play();
+        }
+    }, [play, enabled]);
+
+    useEffect(() => {
+        if (enabled) {
+            resume();
+        } else {
+            pause();
+        }
+    }, [enabled]);
+
+    return { pause, resume };
+};

package/src/Carousel/hooks/useIndexController.tsx

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+import { useImperativeState } from '@fountain-ui/core';
+import { mod } from '@fountain-ui/utils';
+import type { IndexController, ScrollStateChangeEvent } from '../types';
+
+export interface UseIndexControllerParameters {
+    initialIndex: number;
+    itemWidth: number;
+    numberOfData: number;
+    numberOfOriginalData: number;
+    onIndexChange?: (itemIndex: number) => void;
+    onPositionChange?: (position: number) => void;
+}
+
+export default function useIndexController(params: UseIndexControllerParameters): IndexController {
+    const {
+        initialIndex,
+        itemWidth,
+        numberOfData,
+        numberOfOriginalData,
+        onIndexChange,
+        onPositionChange,
+    } = params;
+
+    const currentIndex = useImperativeState(initialIndex);
+    const currentPosition = useImperativeState(initialIndex);
+
+    const notifyScrollStateHasChanged = useCallback(({ offset, state }: ScrollStateChangeEvent) => {
+        const normalized = -Math.round(offset / itemWidth);
+        const index = Math.floor(mod(normalized, numberOfOriginalData));
+        const position = Math.floor(mod(normalized, numberOfData));
+
+        if (state === 'idle' || state === 'interrupted') {
+            if (currentIndex.hasChanged()) {
+                onIndexChange?.(currentIndex.get());
+            }
+            if (currentPosition.hasChanged()) {
+                onPositionChange?.(currentPosition.get());
+            }
+        }
+
+        currentIndex.set(index);
+        currentPosition.set(position);
+    }, [
+        itemWidth,
+        numberOfData,
+        numberOfOriginalData,
+        onIndexChange,
+        onPositionChange,
+    ]);
+
+    return {
+        getCurrentIndex: currentIndex.get,
+        lastIndex: numberOfOriginalData - 1,
+        notifyScrollStateHasChanged,
+    };
+};

package/src/Carousel/hooks/useItemVisibilityStore.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { mod } from '@fountain-ui/utils';
+import type { ItemVisibilityStore, OnPositionChange, VisibleIndexRanges } from '../types';
+
+export interface Parameters {
+    initialIndex: number;
+    numberOfData: number;
+    windowSize: number;
+}
+
+class SimpleItemVisibilityStore implements ItemVisibilityStore {
+
+    private store: VisibleIndexRanges;
+
+    constructor(initialValue: VisibleIndexRanges) {
+        this.store = initialValue;
+    }
+
+    private listeners: Array<(ranges: VisibleIndexRanges) => void> = [];
+
+    subscribe(listener: (ranges: VisibleIndexRanges) => void) {
+        this.listeners.push(listener);
+
+        listener(this.store);
+
+        return () => {
+            const index = this.listeners.indexOf(listener);
+            this.listeners.splice(index, 1);
+        };
+    }
+
+    dispatch(ranges: VisibleIndexRanges): void {
+        this.store = ranges;
+        for (const id in this.listeners) {
+            const listener = this.listeners[id];
+            listener?.(ranges);
+        }
+    }
+
+    removeAllListeners(): void {
+        this.listeners.splice(0, this.listeners.length);
+    }
+
+}
+
+function normalize(windowSize: number, numberOfData: number): number {
+    if (windowSize <= 0) {
+        return numberOfData;
+    }
+    if (windowSize > 0 && windowSize % 2 === 0) {
+        return windowSize + 1;
+    }
+    return windowSize;
+}
+
+function makeVisibleIndexRanges(numberOfData: number, windowSize: number, index: number): VisibleIndexRanges {
+    const ws = normalize(windowSize, numberOfData);
+
+    const firstIndex = 0;
+    const lastIndex = numberOfData - 1;
+    const halfNumberOfAdjacent = Math.floor(ws / 2);
+
+    const leftSide = index - halfNumberOfAdjacent;
+    const rightSide = index + halfNumberOfAdjacent;
+
+    const leftRanges = leftSide >= 0
+        ? [[leftSide, index]]
+        : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];
+
+    const rightRanges = rightSide < numberOfData
+        ? [[index, rightSide]]
+        : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]];
+
+    // @ts-ignore
+    return [
+        ...leftRanges,
+        ...rightRanges,
+    ];
+}
+
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange] {
+    const {
+        initialIndex,
+        numberOfData,
+        windowSize,
+    } = params;
+
+    const [initialRange] = useState(() => {
+        return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);
+    });
+
+    const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;
+
+    const onPositionChange: OnPositionChange = useCallback((position) => {
+        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, position);
+
+        store.dispatch(newRanges);
+    }, [numberOfData, windowSize]);
+
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, []);
+
+    return [store, onPositionChange];
+};

package/src/Carousel/hooks/useLoopedData.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+
+export default function useLoopedData<ItemT>(
+    originalData: ReadonlyArray<ItemT>,
+    loop: boolean,
+): ReadonlyArray<ItemT> {
+    return useMemo(() => {
+        if (!loop) {
+            return originalData;
+        }
+
+        const numberOfData = originalData.length;
+
+        if (numberOfData === 1) {
+            const [first] = originalData;
+            return [first, first, first];
+        }
+
+        if (numberOfData === 2) {
+            const [first, second] = originalData;
+            return [first, second, first, second];
+        }
+
+        return originalData;
+    }, [originalData, loop]);
+};