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

package/build/typescript/Carousel/types.d.ts

@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import type { Animated, ViewProps } from 'react-native';
 declare const directions: readonly ["next", "prev", "stay"];
 export declare type PagingDirection = (typeof directions)[number];
+export declare type ItemHeight = number | 'auto';
 export interface RenderItem<T> {
     (info: {
         item: T;
@@ -24,8 +25,20 @@ export interface IndexController {
     lastIndex: number;
     monitorElement: ReactElement;
 }
+export declare type PagingAnimationType = 'directional' | 'index';
+export interface BasePagingAnimationConfig {
+    animated?: boolean;
+}
+export interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {
+    direction: PagingDirection;
+    isOriginatedFromGesture?: boolean;
+}
+export interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {
+    index: number;
+}
+export declare type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;
 export interface StartPagingAnimation {
-    (direction: PagingDirection, isGesture?: boolean): void;
+    (type: PagingAnimationType, config: PagingAnimationConfig): void;
 }
 export declare type VisibleIndexRanges = Array<[number, number]>;
 export interface StoreSubscription {
@@ -40,7 +53,15 @@ 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.
      */
@@ -50,8 +71,9 @@ export interface CarouselInstance {
      */
     prev: () => void;
     /**
-     * Get current visible item index.
+     * Scroll to desired indexed item.
+     * Invalid index is ignored.
      */
-    getCurrentIndex: GetCurrentIndex;
+    scrollTo: (option: ScrollToOption) => void;
 }
 export {};

package/build/typescript/ViewPager/ViewPagerNative.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './ViewPagerProps';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "loading" | "initialPage" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedIndex"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "loading" | "initialPage" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/build/typescript/ViewPager/ViewPagerProps.d.ts

@@ -67,6 +67,6 @@ export default interface ViewPagerProps extends ComponentProps<{
     /**
      * Unstable API.
      */
-    UNSTABLE_sharedIndex?: SharedValue<number>;
+    UNSTABLE_sharedPage?: SharedValue<number>;
 }> {
 }

package/build/typescript/ViewPager/ViewPagerWeb.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './ViewPagerProps';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "loading" | "initialPage" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedIndex"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "loading" | "initialPage" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "efb9e6cc7cc65e52d1084a0c3664f419dc171240"
+  "gitHead": "4f247070bf942db98feafb9573e8c1dc3fc1d758"
 }

package/src/Carousel/Carousel.tsx

@@ -61,7 +61,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
     const {
         finalizeAnimation,
         globalInterpolation,
-        startAnimation,
+        startPagingAnimation,
     } = usePagingAnimation({
         controlledTx,
         createScrollAnimation,
@@ -76,7 +76,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
     const autoplayController = useAutoplayController({
         enabled: autoplay,
         intervalMillis: autoplayInterval,
-        startPagingAnimation: startAnimation,
+        startPagingAnimation,
     });
 
     useDimensionChangeReaction({
@@ -88,11 +88,12 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
     useImperativeHandle(
         ref,
         () => ({
-            next: () => startAnimation('next'),
-            prev: () => startAnimation('prev'),
             getCurrentIndex,
+            next: () => startPagingAnimation('directional', { direction: 'next' }),
+            prev: () => startPagingAnimation('directional', { direction: 'prev' }),
+            scrollTo: (option) => startPagingAnimation('index', option),
         }),
-        [startAnimation, getCurrentIndex],
+        [startPagingAnimation, getCurrentIndex],
     );
 
     const contextValue = useMemo(() => ({
@@ -133,7 +134,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
                     finalizeAnimation={finalizeAnimation}
                     offsetTx={offsetTx}
                     scrollEnabled={scrollEnabled}
-                    startAnimation={startAnimation}
+                    startPagingAnimation={startPagingAnimation}
                 >
                     <RootView
                         data={data}

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

@@ -2,28 +2,28 @@ 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,
@@ -33,9 +33,9 @@ export default function parallaxItemStyleFactory(config: ParallaxAnimationConfig
         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,5 +1,6 @@
 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';
@@ -8,10 +9,15 @@ 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

@@ -11,11 +11,11 @@ export interface ScrollViewGestureProps {
     finalizeAnimation: () => void;
     offsetTx: 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];
@@ -26,8 +26,12 @@ const endAnimationStates: Readonly<GestureHandlerState[]> = [
 ];
 
 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) {
@@ -37,7 +41,7 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
         finalizeAnimation,
         offsetTx,
         scrollEnabled,
-        startAnimation,
+        startPagingAnimation,
     } = props;
 
     const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;
@@ -57,15 +61,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/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/usePagingAnimation.ts

@@ -1,8 +1,17 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Animated, Platform } from 'react-native';
-import type { CreateScrollAnimation, GetCurrentIndex, PagingDirection, StartPagingAnimation } from '../types';
-
-export interface PagingAnimationConfig {
+import type {
+    CreateScrollAnimation,
+    DirectionalPagingAnimationConfig,
+    GetCurrentIndex,
+    IndexPagingAnimationConfig,
+    PagingAnimationConfig,
+    PagingAnimationType,
+    PagingDirection,
+    StartPagingAnimation,
+} from '../types';
+
+export interface PagingAnimationParameters {
     controlledTx: Animated.Value;
     createScrollAnimation: CreateScrollAnimation;
     getCurrentIndex: GetCurrentIndex;
@@ -16,7 +25,7 @@ export interface PagingAnimationConfig {
 export interface UsePagingAnimation {
     finalizeAnimation: () => void;
     globalInterpolation: Animated.AnimatedInterpolation;
-    startAnimation: StartPagingAnimation;
+    startPagingAnimation: StartPagingAnimation;
 }
 
 function directionToValue(itemWidth: number) {
@@ -32,7 +41,7 @@ function directionToValue(itemWidth: number) {
     };
 }
 
-export default function usePagingAnimation(config: PagingAnimationConfig): UsePagingAnimation {
+export default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation {
     const {
         controlledTx,
         createScrollAnimation,
@@ -42,7 +51,7 @@ export default function usePagingAnimation(config: PagingAnimationConfig): UsePa
         loop,
         numberOfData,
         offsetTx,
-    } = config;
+    } = params;
 
     const animationRef = useRef<Animated.CompositeAnimation | null>(null);
     const toValueRef = useRef<number>(0);
@@ -102,35 +111,73 @@ export default function usePagingAnimation(config: PagingAnimationConfig): UsePa
         resetBoundary();
     }, [controlledTx]);
 
-    const startAnimation = useCallback((direction: PagingDirection, isGesture: boolean = false) => {
-        const getToValueByDirection = directionToValue(itemWidth);
+    const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {
+        const configWithDefaults: PagingAnimationConfig = {
+            animated: true,
+            ...config,
+        };
 
         const currentIndex = getCurrentIndex();
 
-        const computeToValueOnNoLoop = (): number => {
+        const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
+
+        const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {
+            const { direction, isOriginatedFromGesture } = _config;
+
             if (currentIndex === 0 && direction === 'prev') {
-                return isGesture
-                    ? getToValueByDirection('stay')
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
                     : -lastIndex * itemWidth; // last position
             } else if (currentIndex === lastIndex && direction === 'next') {
-                return isGesture
-                    ? getToValueByDirection('stay')
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
                     : lastIndex * itemWidth; // first position
             }
-            return getToValueByDirection(direction);
+            return getValueByDirectionOnAllAdjacentItemsVisible(direction);
         };
 
-        const toValue = loop ? getToValueByDirection(direction) : computeToValueOnNoLoop();
-        const animation = createScrollAnimation(offsetTx, toValue);
+        const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {
+            const _configWithDefaults: DirectionalPagingAnimationConfig = {
+                isOriginatedFromGesture: false,
+                ..._config,
+            };
 
-        animationRef.current = animation;
-        toValueRef.current = toValue;
+            return loop
+                ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)
+                : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);
+        };
 
-        animation.start(({ finished }) => {
-            if (finished) {
-                finalizeAnimation();
+        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 toValue = type === 'directional'
+            // @ts-ignore
+            ? getValueByDirectionalPaging(configWithDefaults)
+            // @ts-ignore
+            : getValueByIndexPaging(configWithDefaults);
+
+        toValueRef.current = toValue;
+
+        if (configWithDefaults.animated) {
+            const animation = createScrollAnimation(offsetTx, toValue);
+            animationRef.current = animation;
+            animation.start(({ finished }) => {
+                if (finished) {
+                    finalizeAnimation();
+                }
+            });
+        } else {
+            finalizeAnimation();
+        }
     }, [
         createScrollAnimation,
         getCurrentIndex,
@@ -143,6 +190,6 @@ export default function usePagingAnimation(config: PagingAnimationConfig): UsePa
     return {
         globalInterpolation,
         finalizeAnimation,
-        startAnimation,
+        startPagingAnimation,
     };
 };

package/src/Carousel/types.ts

@@ -5,6 +5,8 @@ const directions = ['next', 'prev', 'stay'] as const;
 
 export type PagingDirection = (typeof directions)[number];
 
+export type ItemHeight = number | 'auto';
+
 export interface RenderItem<T> {
     (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;
 }
@@ -28,8 +30,25 @@ export interface IndexController {
     monitorElement: ReactElement;
 }
 
+export type PagingAnimationType = 'directional' | 'index';
+
+export interface BasePagingAnimationConfig {
+    animated?: boolean;
+}
+
+export interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {
+    direction: PagingDirection;
+    isOriginatedFromGesture?: boolean;
+}
+
+export interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {
+    index: number;
+}
+
+export type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;
+
 export interface StartPagingAnimation {
-    (direction: PagingDirection, isGesture?: boolean): void;
+    (type: PagingAnimationType, config: PagingAnimationConfig): void;
 }
 
 export type VisibleIndexRanges = Array<[number, number]>;
@@ -49,7 +68,17 @@ export interface AutoplayController {
     resume: () => void;
 }
 
+export interface ScrollToOption {
+    index: number;
+    animated?: boolean;
+}
+
 export interface CarouselInstance {
+    /**
+     * Get current visible item index.
+     */
+    getCurrentIndex: GetCurrentIndex;
+
     /**
      * Scroll to next visible item.
      */
@@ -61,7 +90,8 @@ export interface CarouselInstance {
     prev: () => void;
 
     /**
-     * Get current visible item index.
+     * Scroll to desired indexed item.
+     * Invalid index is ignored.
      */
-    getCurrentIndex: GetCurrentIndex;
+    scrollTo: (option: ScrollToOption) => void;
 }