@fountain-ui/lab 2.0.0-beta.9 → 3.0.0-alpha.1

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

@@ -1,7 +1,8 @@
-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, OnIndexChange, RenderItem } from './types';
 export default interface CarouselProps<ItemT = any> extends ComponentProps<{
+    ref?: RefObject<CarouselInstance>;
     /**
      * If `true`, enable autoplay.
      * @default false
@@ -13,78 +14,62 @@ 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?: OnIndexChange;
     /**
      * 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/build/typescript/Carousel/animation/animationUtils.d.ts

@@ -0,0 +1 @@
+export declare const itemInterpolationInputRange: number[];

package/build/typescript/Carousel/animation/createDefaultItemStyle.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types").CreateItemStyle;
+export default _default;

package/build/typescript/Carousel/animation/createDefaultScrollAnimation.d.ts

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export default function createDefaultScrollAnimation(animatedValue: Animated.Value, toValue: number): Animated.CompositeAnimation;

package/build/typescript/Carousel/animation/index.d.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/build/typescript/Carousel/animation/normalItemStyleFactory.d.ts

@@ -0,0 +1,2 @@
+import type { CreateItemStyle } from '../types';
+export default function normalItemStyleFactory(): CreateItemStyle;

package/build/typescript/Carousel/animation/parallaxItemStyleFactory.d.ts

@@ -0,0 +1,9 @@
+import type { CreateItemStyle } from '../types';
+export interface ParallaxAnimationConfig {
+    activeItemScale?: number;
+    activeItemOpacity?: number;
+    adjacentItemScale?: number;
+    adjacentItemOpacity?: number;
+    scrollingOffset?: number;
+}
+export default function parallaxItemStyleFactory(config?: ParallaxAnimationConfig): CreateItemStyle;

package/build/typescript/Carousel/components/InternalContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="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;
+}
+declare const InternalContext: import("react").Context<InternalContextValue<any>>;
+export default InternalContext;

package/build/typescript/Carousel/components/ItemView.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+import type { ViewProps } from 'react-native';
+import { Animated } from 'react-native';
+export interface ItemViewProps {
+    children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;
+    index: number;
+    onLayout?: ViewProps['onLayout'];
+}
+export default function ItemView(props: ItemViewProps): JSX.Element;

package/build/typescript/Carousel/components/RootView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { View, ViewProps } from 'react-native';
+import type { ItemHeight, RenderItem } from '../types';
+export declare type RootViewProps<ItemT> = ViewProps & {
+    data: ReadonlyArray<ItemT>;
+    itemHeight: ItemHeight;
+    originalData: ReadonlyArray<ItemT>;
+    renderItem: RenderItem<ItemT>;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ViewProps & {
+    data: readonly any[];
+    itemHeight: ItemHeight;
+    originalData: readonly any[];
+    renderItem: RenderItem<any>;
+} & React.RefAttributes<View>>>;
+export default _default;

package/build/typescript/Carousel/components/ScrollViewGesture.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { Animated } from 'react-native';
+import type { AutoplayController, StartPagingAnimation } from '../types';
+export interface ScrollViewGestureProps {
+    autoplayController: AutoplayController;
+    children: ReactNode;
+    gestureTranslationX: Animated.Value;
+    interruptAnimation: () => void;
+    scrollEnabled: boolean;
+    startPagingAnimation: StartPagingAnimation;
+}
+export default function ScrollViewGesture(props: ScrollViewGestureProps): JSX.Element;

package/build/typescript/Carousel/components/index.d.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/build/typescript/Carousel/components/useItemInterpolation.d.ts

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export default function useItemInterpolation(index: number): Animated.AnimatedInterpolation;

package/build/typescript/Carousel/hooks/index.d.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/build/typescript/Carousel/hooks/useAutoplayController.d.ts

@@ -0,0 +1,7 @@
+import type { AutoplayController, StartPagingAnimation } from '../types';
+export interface AutoplayConfig {
+    enabled: boolean;
+    intervalMillis: number;
+    startPagingAnimation: StartPagingAnimation;
+}
+export default function useAutoplayController(config: AutoplayConfig): AutoplayController;

package/build/typescript/Carousel/hooks/useIndexController.d.ts

@@ -0,0 +1,10 @@
+import type { IndexController } 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;

package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts

@@ -0,0 +1,7 @@
+import type { ItemVisibilityStore, OnPositionChange } from '../types';
+export interface Parameters {
+    initialIndex: number;
+    numberOfData: number;
+    windowSize: number;
+}
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange];

package/build/typescript/Carousel/hooks/useLoopedData.d.ts

@@ -0,0 +1 @@
+export default function useLoopedData<ItemT>(originalData: ReadonlyArray<ItemT>, loop: boolean): ReadonlyArray<ItemT>;

package/build/typescript/Carousel/hooks/usePagingAnimator.d.ts

@@ -0,0 +1,17 @@
+import { Animated } from 'react-native';
+import type { CreateScrollAnimation, IndexController, StartPagingAnimation } from '../types';
+export interface PagingAnimatorConfig {
+    createScrollAnimation: CreateScrollAnimation;
+    itemWidth: number;
+    indexController: IndexController;
+    initialIndex: number;
+    loop: boolean;
+    numberOfData: number;
+}
+export interface PagingAnimator {
+    gestureTranslationX: Animated.Value;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    interruptAnimation: () => void;
+    startPagingAnimation: StartPagingAnimation;
+}
+export default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator;

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

@@ -1,2 +1,4 @@
-export { default } from './CarouselWeb';
+export { default } from './Carousel';
 export type { default as CarouselProps } from './CarouselProps';
+export type { CarouselInstance } from './types';
+export { normalItemStyleFactory, parallaxItemStyleFactory } from './animation';

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

@@ -0,0 +1,2 @@
+declare const _default: (key: string, message?: string | undefined) => void;
+export default _default;

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

@@ -0,0 +1,91 @@
+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];
+declare const scrollStates: readonly ["idle", "dragging", "interrupted"];
+export declare type ScrollState = (typeof scrollStates)[number];
+export declare type ItemHeight = number | 'auto';
+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 OnIndexChange {
+    (itemIndex: number): void;
+}
+export interface OnPositionChange {
+    (position: number): void;
+}
+export interface ScrollStateChangeEvent {
+    offset: number;
+    state: ScrollState;
+}
+export interface IndexController {
+    getCurrentIndex: GetCurrentIndex;
+    lastIndex: number;
+    notifyScrollStateHasChanged: (event: ScrollStateChangeEvent) => void;
+}
+export declare type PagingAnimationType = 'directional' | 'index';
+export interface BasePagingAnimationConfig {
+    animated?: boolean;
+    lastGestureTranslationX?: number;
+}
+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 {
+    (type: PagingAnimationType, config: PagingAnimationConfig): void;
+}
+export declare 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 ScrollToOption {
+    index: number;
+    animated?: boolean;
+}
+export interface CarouselInstance {
+    /**
+     * Get current visible item index.
+     */
+    getCurrentIndex: GetCurrentIndex;
+    /**
+     * Scroll to next visible item.
+     */
+    next: () => void;
+    /**
+     * Scroll to previous visible item.
+     */
+    prev: () => void;
+    /**
+     * Scroll to desired indexed item.
+     * Invalid index is ignored.
+     */
+    scrollTo: (option: ScrollToOption) => void;
+}
+export {};

package/build/typescript/ComicViewer/ComicViewer.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { default as ComicViewerProps } from './ComicViewerProps';
-export default function ComicViewer<T>(props: ComicViewerProps<T>): JSX.Element;
+export default function ComicViewer(props: ComicViewerProps): JSX.Element;

package/build/typescript/ComicViewer/ComicViewerProps.d.ts

@@ -1,76 +1,94 @@
+import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
-export interface ErrorInfo {
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { FastScrollOptions } from './FastScrollProps';
+export interface Dimension {
+    width: number;
+    height: number;
+}
+export interface IntrinsicImage {
+    dimension: Dimension;
+    url: string;
+}
+export default interface ComicViewerProps extends ComponentProps<{
     /**
-     * ComicViewerItemData.id.
+     * Delay Time to call the error handler.
+     * @default 100
      */
-    id: string;
+    debounceMillis?: number;
     /**
-     * Number of times an error occurred.
+     * How many times handle onError directly when item error occur
+     * @default 3
      */
-    count: number;
-}
-export declare type ComicViewerItemData<T = {}> = T & {
+    autoHandleErrorCount?: number;
     /**
-     * Image height.
+     * How many items to render in the initial batch.
+     * @default 1
      */
-    height: number;
+    initialNumToRender?: number;
     /**
-     * Unique value for identifying.
+     * How many items to create in the initial batch.
+     * @default 1
      */
-    id: string;
+    initialNumToCreate?: number;
     /**
-     * Image sourceUrl for displaying.
+     * Start at initialScrollPercentage.
+     * If over 100, scroll to end.
+     * @default 0
      */
-    sourceUrl: string;
+    initialScrollPercentage?: number;
     /**
-     * Image width.
+     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.
+     * @default 0
      */
-    width: number;
-};
-export default interface ComicViewerProps<T> extends ComponentProps<{
+    itemVisiblePercentThreshold?: number;
     /**
-     * Data for render.
+     * Dimensions and url info of each Image considering viewport.
      */
-    data: ComicViewerItemData<T>[];
+    intrinsicImages: Array<IntrinsicImage>;
     /**
-     * Delay Time to call the error handler.
-     * @default 500
+     * Need invisible paddingTop viewer vertically expanded.
+     * @default 0
      */
-    errorDebounceMillis?: number;
+    invisiblePaddingTop?: number;
     /**
-     * How many times retry onError when same item error occur
+     * Max value of contents image width size.
+     * @default 720
+     */
+    maxContentWidth?: number;
+    /**
+     * Width of viewport.
+     */
+    viewportWidth: number;
+    /**
+     * The value for FlatList windowSize.
      * @default 3
      */
-    errorRetryCount?: number;
+    windowSize?: number;
     /**
-    * How many items to render in the initial batch.
-    * @default 1
-    */
-    initialNumToRender?: number;
+     * Options for fastscroll component.
+     */
+    fastScrollOptions: FastScrollOptions;
     /**
-     * Start at initialScrollPercentage.
-     * If over 100, scroll to end.
-     * @default 0
+     * Handle scroll event.
+     * @param event Scroll event.
      */
-    initialScrollPercentage?: number;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     /**
-     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.
-     * @default 0
+     * Handle item press event.
      */
-    itemVisiblePercentThreshold?: number;
+    onItemPress?: () => void;
     /**
-     * Handling all viewerItem errors at once.
-     * @param errors Array of ViewerItems errorInfo.
+     * Handle image loading fail event.
      */
-    onError?: (errors: ErrorInfo[]) => void;
+    onError?: () => void;
     /**
-     * Comic viewer width.
+     * Handle reload button press event.
      */
-    viewerWidth: number;
+    onReloadPress?: () => void;
     /**
-     * The value for FlatList windowSize.
-     * @default 3
+     * Component for comic viewer footer.
      */
-    windowSize?: number;
+    ListFooterComponent?: React.ReactElement;
 }> {
 }