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

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

@@ -0,0 +1,10 @@
+import { Animated } from 'react-native';
+import type { IndexController } from '../types';
+export interface UseIndexControllerParameters {
+    controlledTx: Animated.AnimatedValue;
+    initialIndex: number;
+    itemWidth: number;
+    numberOfOriginalData: number;
+    onIndexChange?: (newIndex: number) => void;
+}
+export default function useIndexController(params: UseIndexControllerParameters): IndexController;

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

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

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/usePagingAnimation.d.ts

@@ -0,0 +1,18 @@
+import { Animated } from 'react-native';
+import type { CreateScrollAnimation, GetCurrentIndex, StartPagingAnimation } from '../types';
+export interface PagingAnimationParameters {
+    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;
+    startPagingAnimation: StartPagingAnimation;
+}
+export default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation;

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

@@ -0,0 +1,79 @@
+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;
+        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 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 {
+    (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/ViewPager/ChildrenMemoizedPage.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PageProps } from './ViewPagerProps';
+import type { PageProps } from './types';
 declare function Page(props: PageProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Page>;
 export default _default;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MonoStore } from '@fountain-ui/core';
+export interface InternalContextValue {
+    pageStore: MonoStore<number>;
+}
+declare const InternalContext: import("react").Context<InternalContextValue>;
+export default InternalContext;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface PageState {
+    isActive: boolean;
+}
+declare const PageStateContext: import("react").Context<PageState>;
+export declare const useViewPagerPageState: () => PageState;
+export default PageStateContext;

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

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

@@ -1,23 +1,6 @@
-import type { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
-import type { ViewProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-import type { ComponentProps } from '@fountain-ui/core';
-export declare type KeyboardDismissMode = 'none' | 'on-drag';
-export declare type PageProps = PropsWithChildren<ViewProps> & {
-    index: number;
-    loading: ViewPagerProps['loading'];
-    sharedIndex: SharedValue<number>;
-    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
-};
-export declare type PageComponent = ComponentType<PageProps>;
-export declare type Loading = 'lazy' | 'eager';
-export interface ViewPagerInstance {
-    /**
-     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
-     * @param index
-     */
-    setPage: (index: number) => void;
-}
+import type { ReactNode, Ref } from 'react';
+import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
+import type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';
 export default interface ViewPagerProps extends ComponentProps<{
     ref?: Ref<ViewPagerInstance>;
     /**
@@ -34,6 +17,12 @@ export default interface ViewPagerProps extends ComponentProps<{
      * @default 'lazy'
      */
     loading?: Loading;
+    /**
+     * Mobile only. The number of pages that should be re-rendered to either side of the current page.
+     * Changing this value after the component mount has no effect.
+     * @default 0
+     */
+    offscreenPageRerenderLimit?: number;
     /**
      * Callback fired when an index is changed.
      */
@@ -57,5 +46,9 @@ export default interface ViewPagerProps extends ComponentProps<{
      * @default 'on-drag'
      */
     keyboardDismissMode?: KeyboardDismissMode;
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedPage?: SyncAnimatedValue;
 }> {
 }

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

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

@@ -1,2 +1,4 @@
 export { default } from './ViewPagerWeb';
-export type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';
+export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { ViewPagerInstance } from './types';
+export { useViewPagerPageState } from './PageStateContext';

package/build/typescript/ViewPager/index.native.d.ts

@@ -1 +1,2 @@
 export { default } from './ViewPagerNative';
+export { useViewPagerPageState } from './PageStateContext';

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

@@ -0,0 +1,19 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+export declare type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+export declare type KeyboardDismissMode = 'none' | 'on-drag';
+export declare type PageComponent = ComponentType<PageProps>;
+export declare type Loading = 'lazy' | 'eager';
+export interface ViewPagerInstance {
+    /**
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
+     */
+    setPage: (index: number) => void;
+}

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

@@ -0,0 +1,2 @@
+import type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';
+export default function usePageStore(value: SyncAnimatedValue): MonoStore<number>;

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

@@ -1,4 +1,5 @@
-import { Loading, PageComponent } from './ViewPagerProps';
+import type { Loading, PageComponent } from './types';
 export declare const defaultInitialPage: number;
 export declare const defaultLoading: Loading;
+export declare const defaultOffscreenPageRerenderLimit: number;
 export declare const defaultPageComponent: PageComponent;

package/build/typescript/ViewabilityTrackerView/Viewability.d.ts

@@ -0,0 +1,3 @@
+export default interface Viewability {
+    visible: boolean;
+}

package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerView.d.ts

@@ -0,0 +1,2 @@
+import type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';
+export default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps): JSX.Element;

package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerViewProps.d.ts

@@ -0,0 +1,22 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '@fountain-ui/core';
+import type Viewability from './Viewability';
+export default interface ViewabilityTrackerViewProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * @default 1000
+     */
+    measurementIntervalMillis?: number;
+    /**
+     *
+     */
+    onViewabilityChange?: (viewability: Viewability) => void;
+    /**
+     * @default 50
+     */
+    visiblePercentThreshold?: number;
+}> {
+}

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

@@ -0,0 +1,2 @@
+export { default } from './ViewabilityTrackerView';
+export type { default as ViewabilityTrackerViewProps } from './ViewabilityTrackerViewProps';

package/build/typescript/ViewabilityTrackerView/measureViewability.d.ts

@@ -0,0 +1,11 @@
+import type { View } from 'react-native';
+export interface ViewabilityDetail {
+    visiblePercent: number;
+}
+export interface MeasureViewabilityParameters {
+    view: View;
+    windowWidth: number;
+    windowHeight: number;
+    onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;
+}
+export default function measureViewability({ view, windowWidth, windowHeight, onViewabilityDetailMeasured, }: MeasureViewabilityParameters): void;

package/build/typescript/ViewabilityTrackerView/useViewabilityTracker.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+import type { View } from 'react-native';
+import type Viewability from './Viewability';
+export interface ViewabilityTrackerConfig {
+    enabled: boolean;
+    measurementIntervalMillis: number;
+    onViewabilityChange?: (viewability: Viewability) => void;
+    viewRef: RefObject<View>;
+    visiblePercentThreshold: number;
+}
+export default function useViewabilityTracker(config: ViewabilityTrackerConfig): void;

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

@@ -1,2 +1,4 @@
+export { default as useDeferredExecutor } from './useDeferredExecutor';
+export { default as useIsMounted } from './useIsMounted';
 export { default as useUnstableCollapsibleAppBar } from './useUnstableCollapsibleAppBar';
 export { default as useUnstableToggleDisplayStyle } from './useUnstableToggleDisplayStyle';

package/build/typescript/hooks/useDeferredExecutor.d.ts

@@ -0,0 +1,11 @@
+export interface Runnable {
+    (): void;
+}
+export interface DeferredExecute {
+    (runnable: Runnable, delay?: number): void;
+}
+export interface DeferredExecutor {
+    cancel: () => void;
+    execute: DeferredExecute;
+}
+export default function useDeferredExecutor(): DeferredExecutor;

package/build/typescript/hooks/useIsMounted.d.ts

@@ -0,0 +1,4 @@
+export interface UseIsMounted {
+    (): boolean;
+}
+export default function useIsMounted(): UseIsMounted;

package/build/typescript/index.d.ts

@@ -12,4 +12,6 @@ export { default as ComicViewer } from './ComicViewer';
 export * from './ComicViewer';
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';
 export * from './StatusBarProvider';
+export { default as ViewabilityTrackerView } from './ViewabilityTrackerView';
+export * from './ViewabilityTrackerView';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.14",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -29,9 +29,7 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
     "react-native-gesture-handler": "^2.0.0",
-    "react-native-pager-view": "^4.0.0",
-    "react-native-snap-carousel": "^3.9.0",
-    "react-slick": "^0.25.0"
+    "react-native-pager-view": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
@@ -40,28 +38,15 @@
     "react-dom": {
       "optional": true
     },
-    "react-native": {
-      "optional": true
-    },
-    "react-slick": {
-      "optional": true
-    },
     "react-native-pager-view": {
       "optional": true
-    },
-    "react-native-snap-carousel": {
-      "optional": true
     }
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "4.1.3",
-    "@types/react-native-snap-carousel": "^3.8.4",
-    "@types/react-slick": "^0.23.5",
     "date-fns": "^2.23.0",
     "react-native-pager-view": "^4.2.4",
-    "react-native-safe-area-context": "^3.3.2",
-    "react-native-snap-carousel": "^3.9.1",
-    "react-slick": "^0.28.1"
+    "react-native-safe-area-context": "^3.3.2"
   },
   "react-native-builder-bob": {
     "source": "./src",
@@ -85,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "80988af3fdfd671fcb655d4b36a017ce13baf29e"
+  "gitHead": "bd0ccbf7db51f1418dffb2da36fe167654a58f7e"
 }

package/src/Carousel/Carousel.tsx

@@ -0,0 +1,152 @@
+import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import ViewabilityTrackerView from '../ViewabilityTrackerView';
+import type CarouselProps from './CarouselProps';
+import type { CarouselInstance } from './types';
+import {
+    useAutoplayController,
+    useDimensionChangeReaction,
+    useIndexController,
+    useItemVisibilityStore,
+    useLoopedData,
+    usePagingAnimation,
+} from './hooks';
+import { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';
+import { InternalContext, RootView, ScrollViewGesture } from './components';
+
+const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {
+    const {
+        autoplay = false,
+        autoplayInterval = 3000,
+        createItemStyle = createDefaultItemStyle,
+        createScrollAnimation = createDefaultScrollAnimation,
+        data: originalData,
+        disableSmartAutoplay = false,
+        initialIndex = 0,
+        itemHeight,
+        itemWidth,
+        loop = false,
+        onIndexChange,
+        renderItem,
+        scrollEnabled = true,
+        style,
+        windowSize = 5,
+    } = props;
+
+    const data = useLoopedData(originalData, loop);
+
+    const initialTx = itemWidth * initialIndex;
+    const controlledTx = useRef(new Animated.Value(initialTx)).current;
+    const offsetTx = useRef(new Animated.Value(0)).current;
+
+    const {
+        currentIndex,
+        getCurrentIndex,
+        lastIndex,
+        monitorElement,
+    } = useIndexController({
+        controlledTx,
+        initialIndex,
+        itemWidth,
+        numberOfOriginalData: originalData.length,
+        onIndexChange,
+    });
+
+    const itemVisibilityStore = useItemVisibilityStore({
+        currentIndex,
+        numberOfData: data.length,
+        windowSize,
+    });
+
+    const {
+        finalizeAnimation,
+        globalInterpolation,
+        startPagingAnimation,
+    } = usePagingAnimation({
+        controlledTx,
+        createScrollAnimation,
+        getCurrentIndex,
+        itemWidth,
+        lastIndex,
+        loop,
+        numberOfData: data.length,
+        offsetTx,
+    });
+
+    const autoplayController = useAutoplayController({
+        enabled: autoplay,
+        intervalMillis: autoplayInterval,
+        startPagingAnimation,
+    });
+
+    useDimensionChangeReaction({
+        controlledTx,
+        currentIndex,
+        itemWidth,
+    });
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            getCurrentIndex,
+            next: () => startPagingAnimation('directional', { direction: 'next' }),
+            prev: () => startPagingAnimation('directional', { direction: 'prev' }),
+            scrollTo: (option) => startPagingAnimation('index', option),
+        }),
+        [startPagingAnimation, getCurrentIndex],
+    );
+
+    const contextValue = useMemo(() => ({
+        createItemStyle,
+        data,
+        globalInterpolation,
+        itemHeight,
+        itemWidth,
+        itemVisibilityStore,
+        loop,
+    }), [
+        createItemStyle,
+        data,
+        globalInterpolation,
+        itemHeight,
+        itemWidth,
+        itemVisibilityStore,
+        loop,
+    ]);
+
+    return (
+        <InternalContext.Provider value={contextValue}>
+            {monitorElement}
+
+            <ViewabilityTrackerView
+                enabled={autoplay && !disableSmartAutoplay}
+                measurementIntervalMillis={Math.max(3000, autoplayInterval)}
+                onViewabilityChange={({ visible }) => {
+                    if (visible) {
+                        autoplayController.resume();
+                    } else {
+                        autoplayController.pause();
+                    }
+                }}
+            >
+                <ScrollViewGesture
+                    autoplayController={autoplayController}
+                    finalizeAnimation={finalizeAnimation}
+                    offsetTx={offsetTx}
+                    scrollEnabled={scrollEnabled}
+                    startPagingAnimation={startPagingAnimation}
+                >
+                    <RootView
+                        data={data}
+                        itemHeight={itemHeight}
+                        originalData={originalData}
+                        renderItem={renderItem}
+                        style={style}
+                    />
+                </ScrollViewGesture>
+            </ViewabilityTrackerView>
+        </InternalContext.Provider>
+    );
+});
+
+export default memo(Carousel);