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

package/build/typescript/ViewPager/components/ChildrenMemoizedPage.d.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { Loading } from '../types';
+export declare type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+declare function Page(props: PageProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Page>;
+export default _default;

package/build/typescript/ViewPager/components/FluxStoreProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FluxStoreProviderProps<State> {
+    children: React.ReactElement;
+    initialState: State;
+}
+export default function FluxStoreProvider<State>(props: FluxStoreProviderProps<State>): JSX.Element;

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

@@ -0,0 +1,2 @@
+export { default as ChildrenMemoizedPage } from './ChildrenMemoizedPage';
+export { default as FluxStoreProvider } from './FluxStoreProvider';

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

@@ -0,0 +1,7 @@
+export { default as useDispatch } from './useDispatch';
+export { default as useEagerState } from './useEagerState';
+export { default as useForceRender } from './useForceRender';
+export { default as useLazyState } from './useLazyState';
+export { default as usePageStore } from './usePageStore';
+export { default as useStore } from './useStore';
+export { default as useViewPagerPageState } from './useViewPagerPageState';

package/build/typescript/ViewPager/hooks/useDispatch.d.ts

@@ -0,0 +1,2 @@
+import type { DispatchAction } from '@fountain-ui/core';
+export default function useDispatch<State>(): (action: DispatchAction<State>) => void;

package/build/typescript/ViewPager/hooks/useEagerState.d.ts

@@ -0,0 +1 @@
+export default function useEagerState<State>(): State;

package/build/typescript/ViewPager/hooks/useForceRender.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useForceRender(): import("react").DispatchWithoutAction;

package/build/typescript/ViewPager/hooks/useLazyState.d.ts

@@ -0,0 +1,2 @@
+import type { EqualityFunction } from '../types';
+export default function useLazyState<State>(equalityFn?: EqualityFunction<State>): State;

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

@@ -0,0 +1,2 @@
+import type { FluxStore } from '../FluxContext';
+export default function useStore<State>(): FluxStore<State>;

package/build/typescript/ViewPager/hooks/useViewPagerPageState.d.ts

@@ -0,0 +1 @@
+export default function useViewPagerPageState(): import("../PageStateContext").PageState;

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

@@ -1,2 +1,5 @@
-export { default } from './ViewPagerWeb';
+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/build/typescript/ViewPager/types.d.ts

@@ -0,0 +1,12 @@
+export declare type KeyboardDismissMode = 'none' | 'on-drag';
+export declare 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/build/typescript/ViewPager/utils.d.ts

@@ -1,21 +1,6 @@
-import React from 'react';
-import ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';
-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 declare const defaultEnableVisibleHint: boolean;
-export declare const defaultEnableNeighborPageRerender: boolean;
+import type { EqualityFunction, Loading } from './types';
+export declare const defaultInitialPage: number;
 export declare const defaultLoading: Loading;
-export declare const defaultPageComponent: PageComponent;
-export declare const usePageRenderer: ({ enableVisibleHint, index: currentIndex, loading, pageComponent: PageComponent, pageForceRerenderKey, enableNeighborPageRerender, }: PageRenderOption) => PageRenderer;
+export declare const defaultOffscreenPageRerenderLimit: number;
+export declare const refEqual: EqualityFunction<any>;
+export declare function isValidPage(maybePage: number, numberOfPages: number): boolean;

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

@@ -1,5 +1,5 @@
 import { Falsy, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 declare type WebOnlyStyle = {
     boxShadow: any;
 };
@@ -13,12 +13,11 @@ export interface ContentInsets {
     right?: number;
 }
 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;

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

@@ -1,4 +1,4 @@
-import Animated from 'react-native-reanimated';
-export default function useAnimatedDisplayStyle(vectorY: Animated.SharedValue<number>, threshold?: number, defaultDisplay?: 'flex' | 'none'): {
+import type { SharedValue } from 'react-native-reanimated';
+export default function useAnimatedDisplayStyle(vectorY: SharedValue<number>, threshold?: number, defaultDisplay?: 'flex' | 'none'): {
     display: "flex" | "none";
 };

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.4",
+  "version": "2.0.0-beta.41",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -15,52 +15,38 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.0.0",
-    "@fountain-ui/icons": "^2.0.0-beta.4",
-    "@fountain-ui/utils": "^2.0.0-beta.3",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@fountain-ui/icons": "^2.0.0-beta.9",
+    "@fountain-ui/utils": "^2.0.0-beta.4",
     "react-native-calendars": "1.1267.0"
   },
   "peerDependencies": {
     "@fountain-ui/core": "^2.0.0-beta.3",
     "@gorhom/bottom-sheet": "^4.1.3",
-    "@react-native-community/viewpager": "> 4.2.x",
     "date-fns": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
-    "react-native-snap-carousel": "^3.9.0",
-    "react-slick": "^0.25.0"
+    "react-native-gesture-handler": "^2.0.0",
+    "react-native-pager-view": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
       "optional": true
     },
-    "@react-native-community/viewpager": {
-      "optional": true
-    },
     "react-dom": {
       "optional": true
     },
-    "react-native": {
-      "optional": true
-    },
-    "react-slick": {
-      "optional": true
-    },
-    "react-native-snap-carousel": {
+    "react-native-pager-view": {
       "optional": true
     }
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "4.1.3",
-    "@react-native-community/viewpager": "^4.2.2",
-    "@types/react-native-snap-carousel": "^3.8.4",
-    "@types/react-slick": "^0.23.5",
     "date-fns": "^2.23.0",
-    "react-native-safe-area-context": "^3.3.2",
-    "react-native-snap-carousel": "^3.9.1",
-    "react-slick": "^0.28.1"
+    "react-native-pager-view": "^4.2.4",
+    "react-native-safe-area-context": "^4.0.0"
   },
   "react-native-builder-bob": {
     "source": "./src",
@@ -84,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "041cca35a665927dfc8185624c7be2c4a2e86041"
+  "gitHead": "496c17e2592a14dae520a43297537c3273e98426"
 }

package/src/AnimatedY/AnimatedY.tsx

@@ -1,7 +1,13 @@
-import React from 'react';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type AnimatedYProps from './AnimatedYProps';
 
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = {
+    duration: 150,
+    easing: Easing.out(Easing.exp),
+};
+
 export default function AnimatedY(props: AnimatedYProps) {
     const {
         children,
@@ -9,17 +15,14 @@ export default function AnimatedY(props: AnimatedYProps) {
         style,
     } = props;
 
-    const animatedY = Animated.useSharedValue(translateY);
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedY = useSharedValue(translateY);
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
-    }));
+    }), []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (translateY >= 0) {
-            animatedY.value = Animated.withTiming(translateY, {
-                duration: 150,
-                easing: Easing.out(Easing.exp),
-            });
+            animatedY.value = withTiming(translateY, ANIMATION_CONFIG);
         }
     }, [translateY]);
 

package/src/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import {
+    Animated,
+    LayoutChangeEvent,
+    LayoutRectangle,
+    NativeScrollEvent,
+    NativeSyntheticEvent,
+    PanResponder,
+    ScrollView,
+    View,
+} from 'react-native';
+import { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import BottomSheetProps from './BottomSheetProps';
+import useDynamicSnapPoints from './useDynamicSnapPoints';
+
+type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'scrollView'>;
+
+const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            justifyContent: 'flex-end',
+            zIndex: theme.zIndex.dialog,
+        },
+        animated: {
+            alignSelf: 'center',
+            maxWidth: 720,
+            width: '100%',
+        },
+        paper: {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            flexGrow: 1,
+            overflow: 'hidden',
+        },
+        scrollView: {
+            flexGrow: 1,
+        },
+    };
+};
+
+export default function BottomSheet(props: BottomSheetProps) {
+    const {
+        backdropOpacity,
+        children,
+        header,
+        index,
+        onChange,
+        snapPoints: initialSnapPoints,
+    } = props;
+
+    const styles = useStyles();
+
+    const contentLayout = useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 });
+    const currentScrollY = useRef<number>(0);
+
+    const {
+        snapPoints,
+        handleContentLayout,
+    } = useDynamicSnapPoints({
+        index,
+        initialSnapPoints,
+    });
+
+    const height = snapPoints[snapPoints.length - 1] ?? 0;
+    const translateY = height - (snapPoints[index] ?? 0);
+
+    const animatedY = useAnimatedValue(translateY);
+
+    const isInsideScrollView = (locationX: number, locationY: number): boolean => {
+        const {
+            current: { x, y, width, height },
+        } = contentLayout;
+
+        return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;
+    };
+
+    const panResponder = useMemo(() => (
+        PanResponder.create({
+            onMoveShouldSetPanResponder: (event, gestureState) => {
+                const {
+                    nativeEvent: { locationX, locationY },
+                } = event;
+
+                if (isInsideScrollView(locationX, locationY)) {
+                    return gestureState.dy > 0 && currentScrollY.current === 0;
+                }
+
+                return true;
+            },
+            onPanResponderMove: (_, gestureState) => {
+                if (gestureState.dy > 0) {
+                    animatedY.setValue(translateY + gestureState.dy);
+                }
+            },
+            onPanResponderRelease: (_, gestureState) => {
+                if (gestureState.dy > 0 && gestureState.vy > 0.5) {
+                    handleClose();
+                } else {
+                    Animated.timing(animatedY, {
+                        toValue: translateY,
+                        useNativeDriver: false,
+                        duration: 300,
+                    }).start();
+                }
+            },
+        })
+    ), [translateY]);
+
+    useEffect(() => {
+        if (translateY >= 0) {
+            Animated.timing(animatedY, {
+                toValue: translateY,
+                useNativeDriver: false,
+                duration: 300,
+            }).start();
+        }
+    }, [translateY]);
+
+    const handleClose = () => {
+        if (onChange) {
+            onChange(-1);
+        }
+    };
+
+    const handleScrollViewLayout = (event: LayoutChangeEvent) => {
+        contentLayout.current = event.nativeEvent.layout;
+    };
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        currentScrollY.current = event.nativeEvent.contentOffset.y;
+    };
+
+    const animatedStyles = [
+        styles.animated,
+        { transform: [{ translateY: animatedY }] },
+    ];
+
+    const paperStyles = [
+        styles.paper,
+        { ...(height !== 0 ? { height } : {}) },
+    ];
+
+    const contentStyle = {
+        ...(snapPoints[index] !== 0 ? { height: snapPoints[index] } : {}),
+    };
+
+    return (
+        <Modal
+            backdropOpacity={backdropOpacity}
+            onClose={handleClose}
+            visible={index >= 0}
+            style={css([StyleSheet.absoluteFill, styles.root])}
+        >
+            <Animated.View
+                style={animatedStyles}
+                {...panResponder.panHandlers}
+            >
+                <Paper
+                    elevation={12}
+                    style={paperStyles}
+                >
+                    <View
+                        style={contentStyle}
+                        onLayout={handleContentLayout}
+                    >
+                        {header}
+
+                        <ScrollView
+                            onLayout={handleScrollViewLayout}
+                            onScroll={handleScroll}
+                            scrollEventThrottle={300}
+                            style={styles.scrollView}
+                        >
+                            {children}
+                        </ScrollView>
+                    </View>
+                </Paper>
+            </Animated.View>
+        </Modal>
+    );
+}

package/src/BottomSheet/BottomSheetNative.tsx

@@ -73,6 +73,7 @@ export default function BottomSheet(props: BottomSheetProps) {
             appearsOnIndex={0}
             disappearsOnIndex={-1}
             opacity={backdropOpacity}
+            pressBehavior={onChange ? 'close' : 'none'}
         />
     );
 
@@ -89,6 +90,7 @@ export default function BottomSheet(props: BottomSheetProps) {
                 ref={bottomSheetRef}
                 snapPoints={snapPoints}
                 style={modalStyle}
+                enablePanDownToClose={Boolean(onChange)}
             >
                 {children}
             </BottomSheetModal>

package/src/BottomSheet/BottomSheetProps.ts

@@ -13,6 +13,11 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     children?: React.ReactNode;
 
+    /**
+     * Area to be fixed on the top of the bottom sheet.
+     */
+    header?: React.ReactNode;
+
     /**
      * Snap index. You could also provide -1 to bottom sheet in closed state.
      */
@@ -27,6 +32,7 @@ export default interface BottomSheetProps extends ComponentProps<{
     /**
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
+     * Only number type or string type(~% format) can be used.
      */
-    snapPoints: Array<number>;
+    snapPoints: Array<number | string>;
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useWindowDimensions } from 'react-native';
 import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import AnimatedY from '../AnimatedY';
@@ -12,7 +13,7 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     return {
         root: {
             justifyContent: 'flex-end',
-            zIndex: theme.zIndex.dialog
+            zIndex: theme.zIndex.dialog,
         },
         animated: {
             alignSelf: 'center',
@@ -28,8 +29,18 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     };
 };
 
-const calculateHeight = (points: BottomSheetProps['snapPoints']): number => {
-    return points[points.length - 1] ?? 0;
+const convertHeightAsPixel = (windowHeight: number, value: number | string): number => {
+    if (typeof value === 'number') {
+        return value;
+    }
+
+    const percentageRegex = new RegExp(/^[0-9]+%$/);
+    if (percentageRegex.test(value)) {
+        const percentage = parseFloat(value) / 100;
+        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
+    }
+
+    return 0;
 };
 
 export default function BottomSheet(props: BottomSheetProps) {
@@ -43,14 +54,16 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     const styles = useStyles();
 
+    const { height: windowHeight } = useWindowDimensions();
+
     const handleClose = () => {
         if (onChange) {
             onChange(-1);
         }
     };
 
-    const height = calculateHeight(snapPoints);
-    const translateY = height - (snapPoints[index] ?? 0);
+    const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
+    const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));
 
     return (
         <Modal