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

package/src/Carousel/CarouselProps.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { ComponentProps } from '@fountain-ui/core';
-import type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, RenderItem } from './types';
+import type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, ItemHeight, RenderItem } from './types';
 
 export default interface CarouselProps<ItemT = any> extends ComponentProps<{
     ref?: RefObject<CarouselInstance>;
@@ -47,9 +47,10 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
     initialIndex?: number;
 
     /**
-     * The item width.
+     * The item height.
+     * For a performance reason, always consider to provide a number value.
      */
-    itemHeight: number;
+    itemHeight: ItemHeight;
 
     /**
      * The item width.

package/src/Carousel/animation/createDefaultScrollAnimation.ts

@@ -6,8 +6,8 @@ export default function createDefaultScrollAnimation(
 ): Animated.CompositeAnimation {
     return Animated.timing(animatedValue, {
         toValue: toValue,
-        duration: 350,
-        easing: Easing.bezier(0.25, 1, 0.5, 1),
+        duration: 220,
+        easing: Easing.bezier(0.35, 0.5, 0.5, 0.75),
         useNativeDriver: true,
     });
 };

package/src/Carousel/animation/parallaxItemStyleFactory.ts

@@ -2,40 +2,40 @@ import type { CreateItemStyle } from '../types';
 import { itemInterpolationInputRange } from './animationUtils';
 
 export interface ParallaxAnimationConfig {
-    parallaxActiveItemScale?: number;
-    parallaxActiveItemOpacity?: number;
-    parallaxAdjacentItemScale?: number;
-    parallaxAdjacentItemOpacity?: number;
-    parallaxScrollingOffset?: number;
+    activeItemScale?: number;
+    activeItemOpacity?: number;
+    adjacentItemScale?: number;
+    adjacentItemOpacity?: number;
+    scrollingOffset?: number;
 }
 
 const defaultParallaxAnimationConfig: Required<Readonly<ParallaxAnimationConfig>> = {
-    parallaxActiveItemScale: 0.9,
-    parallaxActiveItemOpacity: 1,
-    parallaxAdjacentItemScale: Math.pow(0.9, 2),
-    parallaxAdjacentItemOpacity: 0.5,
-    parallaxScrollingOffset: 50,
+    activeItemScale: 0.9,
+    activeItemOpacity: 1,
+    adjacentItemScale: Math.pow(0.9, 2),
+    adjacentItemOpacity: 0.5,
+    scrollingOffset: 50,
 };
 
 export default function parallaxItemStyleFactory(config: ParallaxAnimationConfig = defaultParallaxAnimationConfig) {
     const {
-        parallaxActiveItemScale,
-        parallaxActiveItemOpacity,
-        parallaxAdjacentItemOpacity,
-        parallaxAdjacentItemScale,
-        parallaxScrollingOffset,
+        activeItemOpacity,
+        activeItemScale,
+        adjacentItemOpacity,
+        adjacentItemScale,
+        scrollingOffset,
     }: Required<ParallaxAnimationConfig> = {
-        ...config,
         ...defaultParallaxAnimationConfig,
+        ...config,
     };
 
     const createItemStyle: CreateItemStyle = (itemInterpolation, itemWidth) => {
         const translate = itemInterpolation.interpolate({
             inputRange: itemInterpolationInputRange,
             outputRange: [
-                -itemWidth + parallaxScrollingOffset,
+                -itemWidth + scrollingOffset,
                 0,
-                itemWidth - parallaxScrollingOffset,
+                itemWidth - scrollingOffset,
             ],
         });
 
@@ -48,9 +48,9 @@ export default function parallaxItemStyleFactory(config: ParallaxAnimationConfig
         const scale = itemInterpolation.interpolate({
             inputRange: itemInterpolationInputRange,
             outputRange: [
-                parallaxAdjacentItemScale,
-                parallaxActiveItemScale,
-                parallaxAdjacentItemScale,
+                adjacentItemScale,
+                activeItemScale,
+                adjacentItemScale,
             ],
             extrapolate: 'clamp',
         });
@@ -58,9 +58,9 @@ export default function parallaxItemStyleFactory(config: ParallaxAnimationConfig
         const opacity = itemInterpolation.interpolate({
             inputRange: itemInterpolationInputRange,
             outputRange: [
-                parallaxAdjacentItemOpacity,
-                parallaxActiveItemOpacity,
-                parallaxAdjacentItemOpacity,
+                adjacentItemOpacity,
+                activeItemOpacity,
+                adjacentItemOpacity,
             ],
             extrapolate: 'clamp',
         });

package/src/Carousel/components/InternalContext.ts

@@ -1,12 +1,12 @@
 import { createContext } from 'react';
 import { Animated } from 'react-native';
-import type { CreateItemStyle, ItemVisibilityStore } from '../types';
+import type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';
 
 export interface InternalContextValue<ItemT> {
     createItemStyle: CreateItemStyle;
     data: ReadonlyArray<ItemT>;
     globalInterpolation: Animated.AnimatedInterpolation;
-    itemHeight: number;
+    itemHeight: ItemHeight;
     itemWidth: number;
     itemVisibilityStore: ItemVisibilityStore;
     loop: boolean;

package/src/Carousel/components/ItemView.tsx

@@ -1,17 +1,23 @@
 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 '../hooks';
+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 } = props;
+    const {
+        children,
+        index,
+        onLayout,
+    } = props;
 
     const {
         createItemStyle,
@@ -39,8 +45,12 @@ export default function ItemView(props: ItemViewProps) {
     return (
         <Animated.View
             children={visible ? children(interpolation) : null}
+            onLayout={onLayout}
             style={[
-                { width: itemWidth, height: itemHeight },
+                {
+                    width: itemWidth,
+                    height: itemHeight !== 'auto' ? itemHeight : undefined,
+                },
                 styles.absolute,
                 // @ts-ignore
                 itemStyle,

package/src/Carousel/components/RootView.tsx

@@ -1,8 +1,8 @@
-import React, { memo, ReactElement, forwardRef } from 'react';
-import type { ViewProps, View } from 'react-native';
+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 { RenderItem } from '../types';
+import type { ItemHeight, RenderItem } from '../types';
 import ItemView from './ItemView';
 
 const styles = StyleSheet.create({
@@ -12,13 +12,14 @@ const styles = StyleSheet.create({
     },
     horizontal: {
         flexDirection: 'row',
-        overflow: 'hidden',
+        overflowX: 'hidden',
+        overflowY: 'visible',
     },
 });
 
 export type RootViewProps<ItemT> = ViewProps & {
     data: ReadonlyArray<ItemT>;
-    itemHeight: number;
+    itemHeight: ItemHeight;
     originalData: ReadonlyArray<ItemT>;
     renderItem: RenderItem<ItemT>;
 };
@@ -33,10 +34,22 @@ const RootView = forwardRef<View, RootViewProps<any>>(function RootView(props, r
         ...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,
@@ -49,7 +62,7 @@ const RootView = forwardRef<View, RootViewProps<any>>(function RootView(props, r
     const viewStyles = [
         styles.root,
         styles.horizontal,
-        { height: itemHeight },
+        { height: itemHeight === 'auto' ? maxHeightOfRenderedItems : itemHeight },
         style,
     ];
 

package/src/Carousel/components/ScrollViewGesture.tsx

@@ -8,14 +8,14 @@ import type { AutoplayController, PagingDirection, StartPagingAnimation } from '
 export interface ScrollViewGestureProps {
     autoplayController: AutoplayController;
     children: ReactNode;
-    finalizeAnimation: () => void;
-    offsetTx: Animated.Value,
+    interruptAnimation: () => void;
+    translateX: Animated.Value,
     scrollEnabled: boolean;
-    startAnimation: StartPagingAnimation;
+    startPagingAnimation: StartPagingAnimation;
 }
 
-const SCROLL_TO_ADJACENT_TX_THRESHOLD = 60;
-const SCROLL_TO_ADJACENT_VX_THRESHOLD = 500;
+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];
@@ -23,21 +23,26 @@ 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 {
-    return Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD
+    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,
-        finalizeAnimation,
-        offsetTx,
+        interruptAnimation,
+        translateX,
         scrollEnabled,
-        startAnimation,
+        startPagingAnimation,
     } = props;
 
     const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;
@@ -45,11 +50,11 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
     const handleGestureBegin = useCallback(() => {
         pauseAutoplay();
 
-        finalizeAnimation();
-    }, [finalizeAnimation, pauseAutoplay]);
+        interruptAnimation();
+    }, [interruptAnimation, pauseAutoplay]);
 
     const handleGestureEvent = useCallback(Animated.event(
-        [{ nativeEvent: { translationX: offsetTx } }],
+        [{ nativeEvent: { translationX: translateX } }],
         { useNativeDriver: true },
     ), []);
 
@@ -57,15 +62,18 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
         const { nativeEvent: { translationX, velocityX, state } } = event;
 
         if (endAnimationStates.includes(state)) {
-            const userDirection: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)
+            const direction: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)
                 ? (translationX < 0 ? 'next' : 'prev')
                 : 'stay';
 
-            startAnimation(userDirection, true);
+            startPagingAnimation(
+                'directional',
+                { direction: direction, isOriginatedFromGesture: true },
+            );
 
             resumeAutoplay();
         }
-    }, [startAnimation, resumeAutoplay]);
+    }, [startPagingAnimation, resumeAutoplay]);
 
     return (
         <PanGestureHandler

package/src/Carousel/{hooks → components}/useItemInterpolation.ts

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from 'react';
 import { Animated } from 'react-native';
-import { InternalContext } from '../components';
+import InternalContext from './InternalContext';
 
 const OVERSCROLL_FRICTION_FACTOR = 4;
 
@@ -94,9 +94,9 @@ export default function useItemInterpolation(index: number): Animated.AnimatedIn
             ? interpolationConfigOnLoop
             : interpolationConfigOnNoLoop;
 
-        const offsetX = globalInterpolation.interpolate(interpolationConfig);
+        const localOffsetX = globalInterpolation.interpolate(interpolationConfig);
 
-        return Animated.divide(offsetX, itemWidth);
+        return Animated.divide(localOffsetX, itemWidth);
     }, [
         globalInterpolation,
         interpolationConfigOnLoop,

package/src/Carousel/hooks/index.ts

@@ -1,7 +1,5 @@
 export { default as useAutoplayController } from './useAutoplayController';
-export { default as useDimensionChangeReaction } from './useDimensionChangeReaction';
 export { default as useIndexController } from './useIndexController';
-export { default as useItemInterpolation } from './useItemInterpolation';
 export { default as useLoopedData } from './useLoopedData';
 export { default as usePagingAnimation } from './usePagingAnimation';
 export { default as useItemVisibilityStore } from './useItemVisibilityStore';

package/src/Carousel/hooks/useAutoplayController.ts

@@ -25,7 +25,10 @@ export default function useAutoplayController(config: AutoplayConfig): AutoplayC
         }
 
         executor.execute(() => {
-            startPagingAnimation('next', false);
+            startPagingAnimation(
+                'directional',
+                { direction: 'next', isOriginatedFromGesture: false },
+            );
             play();
         }, intervalMillis);
     }, [intervalMillis, startPagingAnimation]);

package/src/Carousel/hooks/useIndexController.tsx

@@ -1,76 +1,46 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import React, { useCallback, useRef } from 'react';
+import { mod } from '@fountain-ui/utils';
 import type { IndexController } from '../types';
 
 export interface UseIndexControllerParameters {
-    controlledTx: Animated.AnimatedValue;
     initialIndex: number;
     itemWidth: number;
     numberOfOriginalData: number;
     onIndexChange?: (newIndex: number) => void;
 }
 
-const normalizeIndex = (maybeIndex: number, numberOfData: number): number =>
-    Math.abs(Math.floor(maybeIndex)) % numberOfData;
-
 export default function useIndexController(params: UseIndexControllerParameters): IndexController {
     const {
-        controlledTx,
         initialIndex,
         itemWidth,
         numberOfOriginalData,
         onIndexChange,
     } = params;
 
-    const indexRef = useRef<number>(initialIndex);
-    const [index, setIndex] = useState<number>(indexRef.current);
+    const currentIndexRef = useRef<number>(initialIndex);
 
-    const maybeIndex = useMemo(() => {
-        const negative = new Animated.Value(-1);
-        const reversedTx = Animated.multiply(controlledTx, negative);
-        const normalized = Animated.divide(reversedTx, itemWidth);
-        return Animated.modulo(normalized, numberOfOriginalData);
-    }, [
-        controlledTx,
-        itemWidth,
-        numberOfOriginalData,
-    ]);
+    const getCurrentIndex = useCallback(() => currentIndexRef.current, []);
 
-    useEffect(() => {
-        const subscriptionId = maybeIndex.addListener((observedValue) => {
-            const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);
+    const notifyOffsetHasChanged = useCallback((offset: number) => {
+        const roundedOffset = Math.round(offset / itemWidth) * itemWidth;
 
-            if (indexRef.current !== newIndex) {
-                indexRef.current = newIndex;
-                setIndex(newIndex);
+        // To prevent floating point problem, make sure index is integer type.
+        const nextIndex = Math.floor(mod((-roundedOffset / itemWidth), numberOfOriginalData));
 
-                onIndexChange?.(newIndex);
-            }
-        });
+        if (nextIndex !== currentIndexRef.current) {
+            currentIndexRef.current = nextIndex;
 
-        return () => {
-            maybeIndex.removeListener(subscriptionId);
-        };
+            onIndexChange?.(nextIndex);
+        }
     }, [
-        maybeIndex,
+        itemWidth,
         numberOfOriginalData,
         onIndexChange,
     ]);
 
-    const getCurrentIndex = useCallback(() => indexRef.current, []);
-
     return {
-        currentIndex: index,
         getCurrentIndex,
         lastIndex: numberOfOriginalData - 1,
-        monitorElement: (
-            <Animated.View
-                collapsable={false}
-                style={[
-                    { zIndex: maybeIndex },
-                    { width: 1, height: 1, position: 'absolute' },
-                ]}
-            />
-        ),
+        notifyOffsetHasChanged,
     };
 };

package/src/Carousel/hooks/useItemVisibilityStore.ts

@@ -1,12 +1,17 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { mod } from '@fountain-ui/utils';
 import type { ItemVisibilityStore, VisibleIndexRanges } from '../types';
 
 export interface Parameters {
-    currentIndex: number;
+    initialIndex: number;
     numberOfData: number;
     windowSize: number;
 }
 
+export interface OnIndexChange {
+    (newIndex: number): void;
+}
+
 class SimpleItemVisibilityStore implements ItemVisibilityStore {
 
     private store: VisibleIndexRanges;
@@ -52,10 +57,6 @@ function normalize(windowSize: number, numberOfData: number): number {
     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);
 
@@ -81,21 +82,24 @@ function makeVisibleIndexRanges(numberOfData: number, windowSize: number, index:
     ];
 }
 
-export default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore {
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnIndexChange] {
     const {
-        currentIndex,
+        initialIndex,
         numberOfData,
         windowSize,
     } = params;
 
-    const [initialRange] = useState(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));
+    const [initialRange] = useState(() => {
+        return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);
+    });
+
     const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;
 
-    useEffect(() => {
-        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);
+    const onIndexChange: OnIndexChange = useCallback((newIndex) => {
+        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, newIndex);
 
         store.dispatch(newRanges);
-    }, [currentIndex, numberOfData, windowSize]);
+    }, [numberOfData, windowSize]);
 
     useEffect(() => {
         return () => {
@@ -103,5 +107,5 @@ export default function useItemVisibilityStore(params: Parameters): ItemVisibili
         };
     }, []);
 
-    return store;
+    return [store, onIndexChange];
 };