@fountain-ui/lab 2.0.0-beta.11 → 2.0.0-beta.14

package/src/Carousel/CarouselProps.ts

@@ -1,8 +1,10 @@
-import React, { RefObject } from 'react';
-import type { ListRenderItemInfo } from 'react-native';
+import type { RefObject } from 'react';
 import type { ComponentProps } from '@fountain-ui/core';
+import type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, ItemHeight, RenderItem } from './types';
 
 export default interface CarouselProps<ItemT = any> extends ComponentProps<{
+    ref?: RefObject<CarouselInstance>;
+
     /**
      * If `true`, enable autoplay.
      * @default false
@@ -16,92 +18,72 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
     autoplayInterval?: number;
 
     /**
-     * Padding for center slide. If specified, `slidesToScroll` and `slidesToShow` set to 1.
+     * The item style creator function.
+     * @default createDefaultItemStyle
      */
-    centerSlidePadding?: number;
+    createItemStyle?: CreateItemStyle;
 
     /**
-     * Delay in ms until navigating to the next item.
+     * The scroll animation creator function.
+     * @default createDefaultScrollAnimation
+     */
+    createScrollAnimation?: CreateScrollAnimation;
+
+    /**
+     * Data for render items.
      */
     data: ReadonlyArray<ItemT>;
 
     /**
-     * Value of the opacity effect applied to inactive slides.
-     * @default 0.7
+     * If `true`, carousel will detect its own viewability and control autoplay automatically.
+     * @default false
      */
-    inactiveSlideOpacity?: number;
+    disableSmartAutoplay?: boolean;
 
     /**
-     * Value of the 'scale' transform applied to inactive slides.
-     * @default 0.9
+     * Index of initial item that should be selected.
+     * @default 0
      */
-    inactiveSlideScale?: number;
+    initialIndex?: number;
 
     /**
-     * Web only. Value of the 'scale' transform applied to a active slide.
-     * @default 0.990
+     * The item height.
+     * For a performance reason, always consider to provide a number value.
      */
-    activeSlideScale?: number;
+    itemHeight: ItemHeight;
 
     /**
-     * A number representing the index of the active slide.
+     * The item width.
      */
-    index: number;
+    itemWidth: number;
 
     /**
      * Enable infinite loop mode.
      * @default false
      */
-    infinite?: boolean;
+    loop?: boolean;
 
     /**
      * Callback fired when an index is changed.
      */
-    onChange?: (newIndex: number) => void;
+    onIndexChange?: (newIndex: number) => void;
 
     /**
      * Takes an item from data and renders it into the list.
      */
-    renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null;
-
-    /**
-     * Web only. Number of slides to scroll at once.
-     * @default 1
-     */
-    slidesToScroll?: number;
-
-    /**
-     * Web only. Number of slides to display.
-     * @default 1
-     */
-    slidesToShow?: number;
+    renderItem: RenderItem<ItemT>;
 
     /**
-     * Web only. Enable items to display at the center.
+     * Whether to enable scroll gesture.
      * @default true
      */
-    centerMode?: boolean;
-
-    /**
-     * Web only. Enable arrows to display.
-     * @default true
-     */
-    arrows?: boolean;
-
-    /**
-     * Web only. Style of arrows
-     * @default true
-     */
-    arrowsStyle?: object;
-
-    /**
-     * Web only. Style of track
-     * @default object
-     */
-    trackStyle?: object;
+    scrollEnabled?: boolean;
 
     /**
-     * Only web. Refer slick object
+     * The maximum number of items that can respond to pan gesture events.
+     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)
+     * 0 means all items will respond to pan gesture events.
+     * @default 5
      */
-    ref?: RefObject<any>;
+    windowSize?: number;
 }> {}

package/src/Carousel/animation/animationUtils.ts

@@ -0,0 +1 @@
+export const itemInterpolationInputRange = [-1, 0, 1];

package/src/Carousel/animation/createDefaultItemStyle.ts

@@ -0,0 +1,3 @@
+import normalItemStyleFactory from './normalItemStyleFactory';
+
+export default normalItemStyleFactory();

package/src/Carousel/animation/createDefaultScrollAnimation.ts

@@ -0,0 +1,13 @@
+import { Animated, Easing } from 'react-native';
+
+export default function createDefaultScrollAnimation(
+    animatedValue: Animated.Value,
+    toValue: number,
+): Animated.CompositeAnimation {
+    return Animated.timing(animatedValue, {
+        toValue: toValue,
+        duration: 350,
+        easing: Easing.bezier(0.25, 1, 0.5, 1),
+        useNativeDriver: true,
+    });
+};

package/src/Carousel/animation/index.ts

@@ -0,0 +1,4 @@
+export { default as createDefaultItemStyle } from './createDefaultItemStyle';
+export { default as createDefaultScrollAnimation } from './createDefaultScrollAnimation';
+export { default as normalItemStyleFactory } from './normalItemStyleFactory';
+export { default as parallaxItemStyleFactory } from './parallaxItemStyleFactory';

package/src/Carousel/animation/normalItemStyleFactory.ts

@@ -0,0 +1,19 @@
+import type { CreateItemStyle } from '../types';
+import { itemInterpolationInputRange } from './animationUtils';
+
+export default function normalItemStyleFactory() {
+    const createItemStyle: CreateItemStyle = (itemInterpolation, itemWidth) => {
+        const translate = itemInterpolation.interpolate({
+            inputRange: itemInterpolationInputRange,
+            outputRange: [
+                -itemWidth,
+                0,
+                itemWidth,
+            ],
+        });
+
+        return { transform: [{ translateX: translate }] };
+    };
+
+    return createItemStyle;
+};

package/src/Carousel/animation/parallaxItemStyleFactory.ts

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

package/src/Carousel/components/InternalContext.ts

@@ -0,0 +1,33 @@
+import { createContext } from 'react';
+import { Animated } from 'react-native';
+import type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';
+
+export interface InternalContextValue<ItemT> {
+    createItemStyle: CreateItemStyle;
+    data: ReadonlyArray<ItemT>;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    itemHeight: ItemHeight;
+    itemWidth: number;
+    itemVisibilityStore: ItemVisibilityStore;
+    loop: boolean;
+}
+
+const mockItemVisibilityStore: ItemVisibilityStore = {
+    dispatch: () => void 0,
+    subscribe: () => () => void 0,
+    removeAllListeners: () => void 0,
+};
+
+const initialValue: Readonly<InternalContextValue<any>> = {
+    createItemStyle: () => ({}),
+    data: [],
+    globalInterpolation: Animated.add(new Animated.Value(0), 0),
+    itemHeight: 0,
+    itemWidth: 0,
+    itemVisibilityStore: mockItemVisibilityStore,
+    loop: false,
+};
+
+const InternalContext = createContext<InternalContextValue<any>>(initialValue);
+
+export default InternalContext;

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 '../hooks';
+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],
+    );
+
+    useEffect(() => {
+        return itemVisibilityStore.subscribe(ranges => {
+            const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);
+            setVisible(nextVisible);
+        });
+    }, [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,87 @@
+import type { ReactNode } from 'react';
+import React, { useCallback } from 'react';
+import { Animated } from 'react-native';
+import type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+import { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';
+import type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';
+
+export interface ScrollViewGestureProps {
+    autoplayController: AutoplayController;
+    children: ReactNode;
+    finalizeAnimation: () => void;
+    offsetTx: Animated.Value,
+    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,
+];
+
+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,
+        finalizeAnimation,
+        offsetTx,
+        scrollEnabled,
+        startPagingAnimation,
+    } = props;
+
+    const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;
+
+    const handleGestureBegin = useCallback(() => {
+        pauseAutoplay();
+
+        finalizeAnimation();
+    }, [finalizeAnimation, pauseAutoplay]);
+
+    const handleGestureEvent = useCallback(Animated.event(
+        [{ nativeEvent: { translationX: offsetTx } }],
+        { useNativeDriver: true },
+    ), []);
+
+    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 },
+            );
+
+            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/hooks/index.ts

@@ -0,0 +1,7 @@
+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

@@ -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/useDimensionChangeReaction.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { Animated } from 'react-native';
+
+export interface Parameters {
+    controlledTx: Animated.AnimatedValue;
+    currentIndex: number;
+    itemWidth: number;
+}
+
+export default function useDimensionChangeReaction(params: Parameters) {
+    const {
+        controlledTx,
+        currentIndex,
+        itemWidth,
+    } = params;
+
+    useEffect(() => {
+        const newTx = -currentIndex * itemWidth;
+        controlledTx.setValue(newTx);
+    }, [
+        controlledTx,
+        currentIndex,
+        itemWidth,
+    ]);
+};