@fountain-ui/lab 2.0.0-beta.4 → 2.0.0-beta.40

package/src/ViewPager/hooks/useViewPagerPageState.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import PageStateContext from '../PageStateContext';
+
+export default function useViewPagerPageState() {
+    return useContext(PageStateContext);
+};

package/src/ViewPager/index.ts

@@ -1,2 +1,11 @@
-export { default } from './ViewPagerWeb';
-export type { default as ViewPagerProps } from './ViewPagerProps';
+export { default } from './ViewPager';
+export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { ViewPagerInstance } from './types';
+export {
+    useDispatch as useFluxDispatch,
+    useEagerState,
+    useStore as useFluxStore,
+    useLazyState,
+    useViewPagerPageState,
+} from './hooks';
+export { FluxStoreProvider } from './components';

package/src/ViewPager/types.ts

@@ -0,0 +1,15 @@
+export type KeyboardDismissMode = 'none' | 'on-drag';
+
+export type Loading = 'lazy' | 'eager';
+
+export interface EqualityFunction<State> {
+    (a: State, b: State): boolean;
+}
+
+export interface ViewPagerInstance {
+    /**
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
+     */
+    setPage: (index: number) => void;
+}

package/src/ViewPager/utils.tsx

@@ -1,62 +1,15 @@
-import React from 'react';
-import ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';
-import ChildrenMemoizedPage from './ChildrenMemoizedPage';
+import type { EqualityFunction, Loading } from './types';
 
-export interface PageState {
-    visited?: boolean;
-}
-
-export interface PageRenderOption {
-    enableVisibleHint: boolean;
-    enableNeighborPageRerender: boolean;
-    index: number;
-    loading: Loading;
-    pageComponent: PageComponent;
-    pageForceRerenderKey?: any;
-}
-
-export interface PageRenderer {
-    (children: ViewPagerProps['children']): React.ReactNode;
-}
-
-export const defaultEnableVisibleHint: boolean = false;
-
-export const defaultEnableNeighborPageRerender: boolean = false;
+export const defaultInitialPage: number = 0;
 
 export const defaultLoading: Loading = 'lazy';
 
-export const defaultPageComponent: PageComponent = ChildrenMemoizedPage;
-
-export const usePageRenderer = ({
-    enableVisibleHint,
-    index: currentIndex,
-    loading,
-    pageComponent: PageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender,
-}: PageRenderOption): PageRenderer => {
-    const pagesStateRef = React.useRef<Array<PageState>>([]);
-
-    pagesStateRef.current[currentIndex] = {
-        ...pagesStateRef.current[currentIndex],
-        visited: true,
-    };
+export const defaultOffscreenPageRerenderLimit: number = 0;
 
-    return (children => React.Children.map(children, (child, index) => {
-        const visited = pagesStateRef.current[index]?.visited ?? false;
-        const content = (loading === 'eager' || visited) ? child : null;
+export const refEqual: EqualityFunction<any> = (a: any, b: any) => a === b;
 
-        const isVisible = enableVisibleHint ? (index === currentIndex) : false;
-        const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
-
-        return (
-            <PageComponent
-                key={index}
-                children={content}
-                isNeighbor={enableNeighborPageRerender && isNeighborIndex}
-                isVisible={isVisible}
-                rerenderKey={pageForceRerenderKey}
-            />
-        );
-    }));
-};
+export function isValidPage(maybePage: number, numberOfPages: number) {
+    return Number.isInteger(maybePage)
+        && maybePage >= 0
+        && maybePage < numberOfPages;
+}

package/src/ViewabilityTrackerView/Viewability.ts

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

package/src/ViewabilityTrackerView/ViewabilityTrackerView.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import useViewabilityTracker from './useViewabilityTracker';
+import type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';
+
+
+export default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps) {
+    const {
+        enabled = true,
+        measurementIntervalMillis = 1000,
+        onViewabilityChange,
+        visiblePercentThreshold = 50,
+        ...otherProps
+    } = props;
+
+    const viewRef = useRef<View>(null);
+
+    useViewabilityTracker({
+        enabled,
+        measurementIntervalMillis,
+        onViewabilityChange,
+        viewRef,
+        visiblePercentThreshold,
+    });
+
+    return (
+        <View
+            {...otherProps}
+            ref={viewRef}
+            collapsable={false}
+        />
+    );
+};

package/src/ViewabilityTrackerView/ViewabilityTrackerViewProps.ts

@@ -0,0 +1,25 @@
+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/src/ViewabilityTrackerView/index.ts

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

package/src/ViewabilityTrackerView/measureViewability.ts

@@ -0,0 +1,54 @@
+import type { View } from 'react-native';
+import { clamp } from '@fountain-ui/utils';
+
+interface Rect {
+    top: number,
+    bottom: number;
+    left: number;
+    right: number;
+}
+
+export interface ViewabilityDetail {
+    visiblePercent: number;
+}
+
+export interface MeasureViewabilityParameters {
+    view: View;
+    windowWidth: number;
+    windowHeight: number;
+    onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;
+}
+
+const computeRectSize = (rect: Rect): number =>
+    (rect.bottom - rect.top) * (rect.right - rect.left);
+
+const normalizePagePosition = (value?: number): number =>
+    (value != null && Number.isFinite(value)) ? value : Number.MAX_SAFE_INTEGER;
+
+const normalizeViewSize = (size: number): number =>
+    Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
+
+export default function measureViewability({
+    view,
+    windowWidth,
+    windowHeight,
+    onViewabilityDetailMeasured,
+}: MeasureViewabilityParameters) {
+    view.measure((x, y, width, height, pageX?: number, pageY?: number) => {
+        const safePageX = normalizePagePosition(pageX);
+        const safePageY = normalizePagePosition(pageY);
+
+        const visibleRect: Rect = {
+            top: clamp(safePageY, 0, windowHeight),
+            bottom: clamp(safePageY + height, 0, windowHeight),
+            left: clamp(safePageX, 0, windowWidth),
+            right: clamp(safePageX + width, 0, windowWidth),
+        };
+
+        const visibleRectSize = computeRectSize(visibleRect);
+        const viewSize = normalizeViewSize(width * height);
+        const visiblePercent = Math.round(visibleRectSize / viewSize * 100);
+
+        onViewabilityDetailMeasured?.({ visiblePercent });
+    });
+};

package/src/ViewabilityTrackerView/useViewabilityTracker.ts

@@ -0,0 +1,85 @@
+import type { RefObject } from 'react';
+import { useEffect, useRef } from 'react';
+import type { View } from 'react-native';
+import { useValidWindowDimensions } from '@fountain-ui/core';
+import { useDeferredExecutor } from '../hooks';
+import type { ViewabilityDetail } from './measureViewability';
+import measureViewability from './measureViewability';
+import type Viewability from './Viewability';
+
+export interface ViewabilityTrackerConfig {
+    enabled: boolean;
+    measurementIntervalMillis: number;
+    onViewabilityChange?: (viewability: Viewability) => void;
+    viewRef: RefObject<View>;
+    visiblePercentThreshold: number;
+}
+
+const initialViewability: Readonly<Viewability> = { visible: false };
+
+export default function useViewabilityTracker(config: ViewabilityTrackerConfig) {
+    const {
+        enabled,
+        measurementIntervalMillis,
+        onViewabilityChange,
+        viewRef,
+        visiblePercentThreshold,
+    } = config;
+
+    const viewabilityRef = useRef<Viewability>(initialViewability);
+
+    const executor = useDeferredExecutor();
+
+    const window = useValidWindowDimensions();
+
+    const maybeMeasureRecursive = () => {
+        if (!enabled) {
+            return;
+        }
+
+        const mapViewabilityDetailToViewability = (detail: ViewabilityDetail): Viewability => {
+            return { visible: detail.visiblePercent >= visiblePercentThreshold };
+        };
+
+        const isViewabilityEquals = (a: Viewability, b: Viewability): boolean => {
+            return a.visible === b.visible;
+        };
+
+        const dispatchViewabilityChanged = (viewability: Viewability) => {
+            executor.execute(() => onViewabilityChange?.(viewability));
+        };
+
+        const onViewabilityDetailMeasured = (detail: ViewabilityDetail) => {
+            const nextViewability = mapViewabilityDetailToViewability(detail);
+
+            if (!isViewabilityEquals(viewabilityRef.current, nextViewability)) {
+                viewabilityRef.current = nextViewability;
+
+                dispatchViewabilityChanged(nextViewability);
+            }
+
+            maybeMeasureRecursive();
+        };
+
+        const maybeMeasure = () => {
+            if (viewRef.current) {
+                measureViewability({
+                    view: viewRef.current,
+                    windowWidth: window.width,
+                    windowHeight: window.height,
+                    onViewabilityDetailMeasured,
+                });
+            }
+        };
+
+        executor.execute(maybeMeasure, measurementIntervalMillis);
+    };
+
+    useEffect(() => {
+        if (enabled) {
+            maybeMeasureRecursive();
+        } else {
+            executor.cancel();
+        }
+    }, [enabled]);
+};

package/src/hooks/index.ts

@@ -1,3 +1,5 @@
+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/src/hooks/useDeferredExecutor.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useRef } from 'react';
+import useIsMounted from './useIsMounted';
+
+export interface Runnable {
+    (): void;
+}
+
+export interface DeferredExecute {
+    (runnable: Runnable, delay?: number): void;
+}
+
+export interface DeferredExecutor {
+    cancel: () => void;
+    execute: DeferredExecute;
+}
+
+export default function useDeferredExecutor(): DeferredExecutor {
+    const isMounted = useIsMounted();
+    const timeoutIdRef = useRef<NodeJS.Timer | null>(null);
+
+    const cancel = useCallback(() => {
+        if (timeoutIdRef.current) {
+            clearTimeout(timeoutIdRef.current);
+        }
+    }, []);
+
+    useEffect(() => {
+        return cancel;
+    }, []);
+
+    const execute = useCallback<DeferredExecute>((runnable, delay) => {
+        if (!isMounted()) {
+            return;
+        }
+
+        cancel();
+
+        if (Number.isFinite(delay)) {
+            timeoutIdRef.current = setTimeout(() => runnable(), delay);
+        } else {
+            runnable();
+        }
+    }, []);
+
+    return { cancel, execute };
+};

package/src/hooks/useHeight.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useWorkletCallback } from 'react-native-reanimated';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
     const [height, setHeight] = React.useState<number>(initialHeight);
 
-    const onLayout = Animated.useWorkletCallback((e) => {
+    const onLayout = useWorkletCallback((e) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);
 

package/src/hooks/useIsMounted.ts

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export interface UseIsMounted {
+    (): boolean;
+}
+
+export default function useIsMounted(): UseIsMounted {
+    const mountedRef = useRef<boolean>(false);
+
+    useEffect(() => {
+        mountedRef.current = true;
+
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+
+    return useCallback(() => mountedRef.current, []);
+};

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -1,6 +1,13 @@
-import React, { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import {
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useAppbarStyles from './useAppbarStyles';
 import useElevationStyle from './useElevationStyle';
@@ -22,13 +29,12 @@ export interface ContentInsets {
 }
 
 export interface Options {
-    translucent?: boolean;
     shouldTranslateYReset?: boolean;
 }
 
 export interface CollapsibleAppBar {
     appBarStyle: ViewStyleProp;
-    vectorY: Animated.SharedValue<number>;
+    vectorY: SharedValue<number>;
     onAppBarLayout: OnLayoutCallback;
     onCollapsibleToolbarLayout: OnLayoutCallback;
     onScroll: OnScroll;
@@ -37,7 +43,6 @@ export interface CollapsibleAppBar {
 }
 
 const defaultOptions: Required<Options> = {
-    translucent: false,
     shouldTranslateYReset: false,
 };
 
@@ -45,7 +50,6 @@ const ANIMATION_DURATION_MILLIS = 100;
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
-
 function useLargerValueOfLastTwoValues(value: number) {
     const refLatestTwoValues = useRef([0, 0]);
 
@@ -55,12 +59,8 @@ function useLargerValueOfLastTwoValues(value: number) {
     return Math.max(...refLatestTwoValues.current);
 }
 
-
 export default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const {
-        translucent,
-        shouldTranslateYReset,
-    }: Required<Options> = {
+    const { shouldTranslateYReset }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -73,38 +73,55 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
     const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const prevOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
-    const vectorY = Animated.useSharedValue<number>(0);
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const prevOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
+    const vectorY = useSharedValue<number>(0);
 
     const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
-    });
-
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
-
-    const onScrollViewChanged = (nextIndex: number) => {
+    const animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
+        if (Platform.OS === 'web') {
+            return {
+                transform,
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform,
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform,
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
+    }, [
+        /**
+         * FIXME: Consider add `elevationStyle` to dependencies.
+         */
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
+
+    const onScrollViewChanged = useCallback((nextIndex: number) => {
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             if (shouldTranslateYReset) {
-                translateY.value = Animated.withTiming(0, {
+                translateY.value = withTiming(0, {
                     duration: ANIMATION_DURATION_MILLIS,
                 });
 
@@ -128,15 +145,15 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
+            translateY.value = withTiming(0, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
 
             vectorY.value = 0;
         }
-    };
+    }, [appBarHeight]);
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             lastTranslateY.value = translateY.value;
         },
@@ -162,13 +179,13 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
+                        translateY.value = withTiming(0, {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
@@ -201,17 +218,17 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
+            translateY.value = withTiming(nextTranslateY, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    });
+    }, [appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];
 

package/src/hooks/useUnstableToggleDisplayStyle.ts

@@ -1,13 +1,14 @@
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 export default function useAnimatedDisplayStyle(
-    vectorY: Animated.SharedValue<number>,
+    vectorY: SharedValue<number>,
     threshold: number = 200,
     defaultDisplay: 'flex' | 'none' = 'flex',
 ) {
-    const display = Animated.useSharedValue(defaultDisplay);
+    const display = useSharedValue(defaultDisplay);
 
-    Animated.useAnimatedReaction(
+    useAnimatedReaction(
         () => vectorY.value,
         (vy) => {
             if (vy >= threshold) {
@@ -16,9 +17,10 @@ export default function useAnimatedDisplayStyle(
                 display.value = 'flex';
             }
         },
+        [threshold],
     );
 
-    return Animated.useAnimatedStyle(() => ({
+    return useAnimatedStyle(() => ({
         display: display.value,
-    }));
+    }), []);
 };

package/src/index.ts

@@ -19,4 +19,7 @@ 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';