@fountain-ui/lab 2.0.0-beta.1 → 2.0.0-beta.12

package/src/Carousel/hooks/useItemInterpolation.ts

@@ -0,0 +1,107 @@
+import { useContext, useMemo } from 'react';
+import { Animated } from 'react-native';
+import { InternalContext } from '../components';
+
+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 offsetX = globalInterpolation.interpolate(interpolationConfig);
+
+        return Animated.divide(offsetX, itemWidth);
+    }, [
+        globalInterpolation,
+        interpolationConfigOnLoop,
+        interpolationConfigOnNoLoop,
+        itemWidth,
+        loop,
+    ]);
+};

package/src/Carousel/hooks/useItemVisibilityStore.ts

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ItemVisibilityStore, VisibleIndexRanges } from '../types';
+
+export interface Parameters {
+    currentIndex: 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 mod(value: number, modulo: number): number {
+    return ((value % modulo) + modulo) % modulo;
+}
+
+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 {
+    const {
+        currentIndex,
+        numberOfData,
+        windowSize,
+    } = params;
+
+    const [initialRange] = useState(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));
+    const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;
+
+    useEffect(() => {
+        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);
+
+        store.dispatch(newRanges);
+    }, [currentIndex, numberOfData, windowSize]);
+
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, []);
+
+    return store;
+};

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

package/src/Carousel/hooks/usePagingAnimation.ts

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Platform } from 'react-native';
+import type { CreateScrollAnimation, GetCurrentIndex, PagingDirection, StartPagingAnimation } from '../types';
+
+export interface PagingAnimationConfig {
+    controlledTx: Animated.Value;
+    createScrollAnimation: CreateScrollAnimation;
+    getCurrentIndex: GetCurrentIndex;
+    itemWidth: number;
+    lastIndex: number;
+    loop: boolean;
+    numberOfData: number;
+    offsetTx: Animated.Value;
+}
+
+export interface UsePagingAnimation {
+    finalizeAnimation: () => void;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    startAnimation: StartPagingAnimation;
+}
+
+function directionToValue(itemWidth: number) {
+    return function (direction: PagingDirection): number {
+        switch (direction) {
+            case 'next':
+                return -itemWidth;
+            case 'prev':
+                return itemWidth;
+            case 'stay':
+                return 0;
+        }
+    };
+}
+
+export default function usePagingAnimation(config: PagingAnimationConfig): UsePagingAnimation {
+    const {
+        controlledTx,
+        createScrollAnimation,
+        getCurrentIndex,
+        itemWidth,
+        lastIndex,
+        loop,
+        numberOfData,
+        offsetTx,
+    } = config;
+
+    const animationRef = useRef<Animated.CompositeAnimation | null>(null);
+    const toValueRef = useRef<number>(0);
+
+    const globalInterpolation = useMemo(
+        () => Animated.add(controlledTx, offsetTx),
+        [controlledTx, offsetTx],
+    );
+
+    useEffect(() => {
+        const subscriptionId = controlledTx.addListener((value) => {
+            const currentTx = value.value;
+
+            // Prevent infinite loop
+            if (currentTx !== 0) {
+                const maxWidth = numberOfData * itemWidth;
+
+                if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {
+                    // reset position
+                    controlledTx.setValue(0);
+                }
+            }
+        });
+
+        return () => {
+            controlledTx.removeListener(subscriptionId);
+        };
+    }, [numberOfData, itemWidth]);
+
+    const finalizeAnimation = useCallback(() => {
+        const stopUnfinishedSnapAnimation = () => {
+            if (animationRef.current) {
+                animationRef.current?.stop();
+                animationRef.current = null;
+            }
+        };
+
+        const resetBoundary = () => {
+            controlledTx.setOffset(toValueRef.current);
+            controlledTx.flattenOffset();
+
+            // FIXME: react-native-web bug maybe?
+            //  `AnimatedValue.flattenOffset()` does not trigger any event listener.
+            //  Accessing value directly via `_value` is dangerous but working on web (`useNativeDriver` always false).
+            //  So setting same value with `value.setValue(value._value)` will trigger event listener.
+            if (Platform.OS === 'web') {
+                // @ts-ignore
+                controlledTx.setValue(controlledTx._value);
+            }
+
+            offsetTx.setValue(0);
+            toValueRef.current = 0;
+        };
+
+        stopUnfinishedSnapAnimation();
+
+        resetBoundary();
+    }, [controlledTx]);
+
+    const startAnimation = useCallback((direction: PagingDirection, isGesture: boolean = false) => {
+        const getToValueByDirection = directionToValue(itemWidth);
+
+        const currentIndex = getCurrentIndex();
+
+        const computeToValueOnNoLoop = (): number => {
+            if (currentIndex === 0 && direction === 'prev') {
+                return isGesture
+                    ? getToValueByDirection('stay')
+                    : -lastIndex * itemWidth; // last position
+            } else if (currentIndex === lastIndex && direction === 'next') {
+                return isGesture
+                    ? getToValueByDirection('stay')
+                    : lastIndex * itemWidth; // first position
+            }
+            return getToValueByDirection(direction);
+        };
+
+        const toValue = loop ? getToValueByDirection(direction) : computeToValueOnNoLoop();
+        const animation = createScrollAnimation(offsetTx, toValue);
+
+        animationRef.current = animation;
+        toValueRef.current = toValue;
+
+        animation.start(({ finished }) => {
+            if (finished) {
+                finalizeAnimation();
+            }
+        });
+    }, [
+        createScrollAnimation,
+        getCurrentIndex,
+        finalizeAnimation,
+        itemWidth,
+        lastIndex,
+        loop,
+    ]);
+
+    return {
+        globalInterpolation,
+        finalizeAnimation,
+        startAnimation,
+    };
+};

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/types.ts

@@ -0,0 +1,67 @@
+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];
+
+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 IndexController {
+    currentIndex: number;
+    getCurrentIndex: GetCurrentIndex;
+    lastIndex: number;
+    monitorElement: ReactElement;
+}
+
+export interface StartPagingAnimation {
+    (direction: PagingDirection, isGesture?: boolean): 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 CarouselInstance {
+    /**
+     * Scroll to next visible item.
+     */
+    next: () => void;
+
+    /**
+     * Scroll to previous visible item.
+     */
+    prev: () => void;
+
+    /**
+     * Get current visible item index.
+     */
+    getCurrentIndex: GetCurrentIndex;
+}

package/src/DateTimePicker/DateTimePicker.tsx

@@ -82,8 +82,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
                 />
             )}
             theme={{
-                backgroundColor: theme.palette.background.default,
-                calendarBackground: theme.palette.background.default,
+                backgroundColor: theme.palette.paper.default,
+                calendarBackground: theme.palette.paper.default,
                 dayTextColor: theme.palette.text.primary,
                 textDisabledColor: theme.palette.text.hint,
             }}

package/src/FlipCard/FlipCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type FlipCardProps from './FlipCardProps';
 
 const styles = StyleSheet.create({
@@ -27,9 +27,9 @@ export default function FlipCard(props: FlipCardProps) {
         style,
     } = props;
 
-    const sharedAngle = Animated.useSharedValue(0);
+    const sharedAngle = useSharedValue(0);
 
-    const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedFrontCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
             transform: [
@@ -37,9 +37,9 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${sharedAngle.value}deg` },
             ],
         };
-    });
+    }, []);
 
-    const animatedBackCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedBackCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
             transform: [
@@ -47,11 +47,11 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${(sharedAngle.value + 180)}deg` },
             ],
         };
-    });
+    }, []);
 
     useEffect(() => {
         sharedAngle.value = 0;
-        sharedAngle.value = Animated.withTiming(180, { duration: 500 });
+        sharedAngle.value = withTiming(180, { duration: 500 });
     }, [reanimationKey]);
 
     return (
@@ -65,4 +65,4 @@ export default function FlipCard(props: FlipCardProps) {
             </Animated.View>
         </View>
     );
-};
+};

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,36 +1,110 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { memo, useMemo, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { StyleSheet } from '@fountain-ui/core';
 import type { PageProps } from './ViewPagerProps';
+import PageStateContext from './PageStateContext';
 
-const Page = function Page(props: PageProps) {
-    const { isVisible, ...otherProps } = props;
+const styles = StyleSheet.create({
+    fill: { width: '100%', height: '100%' },
+    none: { display: 'none' },
+});
 
-    return (
-        <View
-            collapsable={false}
-            {...otherProps}
-        />
+interface InternalPageState {
+    isActive: boolean;
+    isLoaded: boolean;
+}
+
+function Page(props: PageProps) {
+    const {
+        index,
+        children,
+        loading,
+        offscreenPageRerenderLimit,
+        sharedIndex,
+    } = props;
+
+    const assumeInitialPageState = (): InternalPageState => {
+        const activeIndex = sharedIndex.value;
+
+        const isActive = index === activeIndex;
+
+        if (loading === 'eager') {
+            return { isActive, isLoaded: true };
+        }
+
+        const isLoaded = index >= activeIndex - offscreenPageRerenderLimit
+            && index <= activeIndex + offscreenPageRerenderLimit;
+
+        return { isActive, isLoaded };
+    };
+
+    const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);
+
+    const content = pageState.isLoaded ? children : null;
+
+    const onActiveStateChange = (isActive: boolean) => {
+        setPageState(prevState => ({
+            ...prevState,
+            isActive,
+            isLoaded: isActive || prevState.isLoaded,
+        }));
+    };
+
+    const onBecomeNeighbor = () => {
+        setPageState(prevState => ({
+            ...prevState,
+            isLoaded: true,
+        }));
+    };
+
+    useAnimatedReaction(
+        () => {
+            const activeIndex = sharedIndex.value;
+
+            const isActive = index === activeIndex;
+
+            const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
+                && index <= activeIndex + offscreenPageRerenderLimit;
+
+            const becomeNeighbor = shouldRerender && !isActive;
+
+            return { isActive, becomeNeighbor };
+        },
+        (nextState, prevState) => {
+            if (nextState.isActive !== prevState?.isActive) {
+                runOnJS(onActiveStateChange)(nextState.isActive);
+            } else if (nextState.becomeNeighbor) {
+                runOnJS(onBecomeNeighbor)();
+            }
+        },
+        [index],
     );
-};
 
-export default React.memo(Page, (prevProps, nextProps) => {
-    if (prevProps.children === null && nextProps.children === null) {
-        return true;
-    }
+    const contextValue = useMemo(() => ({
+        isActive: pageState.isActive,
+    }), [pageState.isActive]);
 
-    // isVisible is an important condition for determining memos on the web.
-    // Reference ViewPagerWeb's return.
-    if (prevProps.isVisible !== nextProps.isVisible) {
-        return false;
-    }
+    const style = Platform.OS === 'web'
+        ? (pageState.isActive ? StyleSheet.absoluteFill : styles.none)
+        : styles.fill;
 
-    if (nextProps.isVisible || nextProps.isNeighbor) {
-        return false;
-    }
+    return (
+        <View
+            collapsable={false}
+            style={style}
+        >
+            <PageStateContext.Provider value={contextValue}>
+                {content}
+            </PageStateContext.Provider>
+        </View>
+    );
+}
 
+export default memo(Page, (prevProps, nextProps) => {
     if (prevProps.rerenderKey !== nextProps.rerenderKey) {
         return false;
     }
 
-    return prevProps.children !== null && nextProps.children !== null;
+    return prevProps.index !== nextProps.index;
 });

package/src/ViewPager/PageStateContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+interface PageState {
+    isActive: boolean;
+}
+
+const initialPageState: Readonly<PageState> = { isActive: false };
+
+const PageStateContext = createContext<PageState>(initialPageState);
+
+export const useViewPagerPageState = () => {
+    return useContext(PageStateContext);
+};
+
+export default PageStateContext;