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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "1.21.1",
+  "version": "2.0.0-beta.11",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -15,20 +15,21 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.0.0",
-    "@fountain-ui/icons": "^1.20.1",
-    "@fountain-ui/utils": "^1.1.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@fountain-ui/icons": "^2.0.0-beta.6",
+    "@fountain-ui/utils": "^2.0.0-beta.3",
     "react-native-calendars": "1.1267.0"
   },
   "peerDependencies": {
-    "@fountain-ui/core": "^1.0.0-alpha.4",
+    "@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-gesture-handler": "^2.0.0",
+    "react-native-pager-view": "^4.0.0",
     "react-native-snap-carousel": "^3.9.0",
     "react-slick": "^0.25.0"
   },
@@ -36,9 +37,6 @@
     "@gorhom/bottom-sheet": {
       "optional": true
     },
-    "@react-native-community/viewpager": {
-      "optional": true
-    },
     "react-dom": {
       "optional": true
     },
@@ -48,17 +46,19 @@
     "react-slick": {
       "optional": true
     },
+    "react-native-pager-view": {
+      "optional": true
+    },
     "react-native-snap-carousel": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@fountain-ui/core": "^1.19.1",
     "@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-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"
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1624478e1427948c29a61931e3af6658db41505f"
+  "gitHead": "80988af3fdfd671fcb655d4b36a017ce13baf29e"
 }

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/BottomSheetNative.tsx

@@ -46,6 +46,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         } else if (indexRef.current >= 0 && index < 0) {
             bottomSheetRef.current?.dismiss();
         } else {
+            // @ts-ignore
             bottomSheetRef.current?.snapToIndex(index);
         }
     }, [index]);
@@ -60,6 +61,9 @@ export default function BottomSheet(props: BottomSheetProps) {
             web: shadow?.boxShadow,
         }),
     };
+    const backgroundStyle = {
+        backgroundColor: theme.palette.paper.default,
+    };
 
     const isBackdropTransparent = backdropOpacity <= 0;
 
@@ -76,6 +80,8 @@ export default function BottomSheet(props: BottomSheetProps) {
         <BottomSheetModalProvider>
             <BottomSheetModal
                 backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}
+                // @ts-ignore
+                backgroundStyle={backgroundStyle}
                 index={index}
                 handleComponent={NoHandle}
                 onChange={handleChange}

package/src/ComicViewer/ComicViewer.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FlatList, ListRenderItem, ViewToken } from 'react-native';
+import * as R from 'ramda';
+import { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
+import type ComicViewerItemProps from './ComicViewerItemProps';
+import ViewerItem from './ViewerItem';
+
+const getItemHeights = <T, >(items: ComicViewerItemProps<T>[]): number[] => R.map((content: ComicViewerItemProps<T>) => content.height)(items);
+const appender = (left: number, right: number): [number, number] => [left + right, left + right];
+const getHeightAccum = (itemHeights: number[]): [number, number[]] => R.mapAccum(appender, 0, itemHeights);
+
+const keyExtractor = <T, >(item: ComicViewerItemProps<T>) => item.id;
+
+export default function ComicViewer<T>(props: ComicViewerProps<T>) {
+    const {
+        data,
+        errorDebounceMillis = 500,
+        errorRetryCount = 3,
+        initialNumToRender = 1,
+        initialScrollPercentage = 0,
+        itemVisiblePercentThreshold = 0,
+        onError,
+        viewerWidth,
+        windowSize = 3,
+        ...otherProps
+    } = props;
+
+    const flatListRef = useRef<FlatList>(null);
+
+    const errors = useRef<Map<string, number>>(new Map());
+    const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);
+
+    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.sourceUrl)(data));
+
+    const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({
+        ...itemData,
+        isViewable: false,
+        width: viewerWidth,
+        height: (itemData.height * viewerWidth) / itemData.width,
+    }))(data);
+
+    const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);
+
+    const itemHeights = getItemHeights(items);
+    const itemHeightAccum = getHeightAccum(itemHeights);
+
+    const viewabilityConfig = useMemo(() => ({
+        itemVisiblePercentThreshold,
+    }), [itemVisiblePercentThreshold]);
+
+    const getItemLayout = useCallback((data: any, index: number) => {
+        const offsets = R.prepend(0, itemHeightAccum[1]);
+
+        return {
+            length: itemHeights[index],
+            offset: offsets[index],
+            index,
+        };
+    }, [itemHeights]);
+
+    const onViewableItemsChanged = useRef(({ viewableItems }: {
+        viewableItems: Array<ViewToken>,
+    }) => {
+        setItems((prev: ComicViewerItemProps<T>[]) => {
+            const viewableItemIds = R.map((viewableItem: ViewToken) => viewableItem.item.id)(viewableItems);
+
+            return R.map((prevItem: ComicViewerItemProps<T>) => ({
+                ...prevItem,
+                isViewable: R.includes(prevItem.id, viewableItemIds),
+            }))([...prev]);
+        });
+    });
+
+    const onErrorHandler = (errors: ErrorInfo[]) => {
+        const isRetryLimited = R.any((error: ErrorInfo) => error.count >= errorRetryCount)(errors);
+
+        if (isRetryLimited) {
+            return;
+        }
+
+        onError && onError(errors);
+    };
+
+    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {
+        errors.current.set(errorInfo.id, errorInfo.count);
+
+        if (debounceTimeOut.current) {
+            clearTimeout(debounceTimeOut.current);
+        }
+
+        debounceTimeOut.current = setTimeout(function () {
+            const errorsArray = Array.from(errors.current.entries());
+            const errorsInfo = R.map(([key, value]: [string, number]) => ({
+                id: key,
+                count: value,
+            }))(errorsArray);
+
+            onErrorHandler([...errorsInfo]);
+            errors.current.clear();
+        }, errorDebounceMillis);
+    }, [errorDebounceMillis, errors.current]);
+
+    const renderItem: ListRenderItem<ComicViewerItemProps<T>> = useCallback(({ item }) => {
+        const props = {
+            ...item,
+            onError: itemErrorHandler,
+        };
+
+        return <ViewerItem props={props}/>;
+    }, []);
+
+    useEffect(() => {
+        setItems((prev: ComicViewerItemProps<T>[]) => {
+            return R.map((prevItem: ComicViewerItemProps<T>) => {
+                const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.id === currentItemData.id)(data);
+
+                if (currentData && (currentData.sourceUrl !== prevItem.sourceUrl)) {
+                    return {
+                        ...prevItem,
+                        sourceUrl: currentData.sourceUrl,
+                    };
+                }
+
+                return prevItem;
+            })([...prev]);
+        });
+    }, [resourceString]);
+
+    useEffect(() => {
+        const newItems = R.map((item: ComicViewerItemProps<T>) => ({
+            ...item,
+            width: viewerWidth,
+            height: (item.height * viewerWidth) / item.width,
+        }))(items);
+
+        setItems(newItems);
+    }, [viewerWidth]);
+
+    useEffect(() => {
+        const totalHeight = itemHeightAccum[0];
+        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);
+
+        if (flatListRef.current) {
+            flatListRef.current.scrollToOffset({ offset, animated: false });
+        }
+    }, [flatListRef.current]);
+
+    return (
+        <FlatList
+            data={items}
+            getItemLayout={getItemLayout}
+            initialNumToRender={initialNumToRender}
+            keyExtractor={keyExtractor}
+            onViewableItemsChanged={onViewableItemsChanged.current}
+            ref={flatListRef}
+            renderItem={renderItem}
+            viewabilityConfig={viewabilityConfig}
+            windowSize={windowSize}
+            {...otherProps}
+        />
+    );
+};

package/src/ComicViewer/ComicViewerItemProps.ts

@@ -0,0 +1,15 @@
+import { ComicViewerItemData, ErrorInfo } from './ComicViewerProps';
+
+type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
+    /**
+     * FlatListItem is viewable in screen.
+     */
+    isViewable: boolean;
+
+    /**
+     * Error handler
+     */
+    onError?: (errorInfo: ErrorInfo) => void;
+}
+
+export default ComicViewerItemProps;

package/src/ComicViewer/ComicViewerProps.ts

@@ -0,0 +1,90 @@
+import { ComponentProps } from '@fountain-ui/core';
+
+export interface ErrorInfo {
+    /**
+     * ComicViewerItemData.id.
+     */
+    id: string;
+
+    /**
+     * Number of times an error occurred.
+     */
+    count: number;
+}
+
+export type ComicViewerItemData<T = {}> = T & {
+    /**
+     * Image height.
+     */
+    height: number;
+
+    /**
+     * Unique value for identifying.
+     */
+    id: string;
+
+    /**
+     * Image sourceUrl for displaying.
+     */
+    sourceUrl: string;
+
+    /**
+     * Image width.
+     */
+    width: number;
+}
+
+export default interface ComicViewerProps<T> extends ComponentProps <{
+    /**
+     * Data for render.
+     */
+    data: ComicViewerItemData<T>[];
+
+    /**
+     * Delay Time to call the error handler.
+     * @default 500
+     */
+    errorDebounceMillis?: number;
+
+    /**
+     * How many times retry onError when same item error occur
+     * @default 3
+     */
+    errorRetryCount?: number;
+
+     /**
+     * How many items to render in the initial batch.
+     * @default 1
+     */
+    initialNumToRender?: number;
+
+    /**
+     * Start at initialScrollPercentage.
+     * If over 100, scroll to end.
+     * @default 0
+     */
+    initialScrollPercentage?: number;
+
+    /**
+     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.
+     * @default 0
+     */
+    itemVisiblePercentThreshold?: number;
+
+    /**
+     * Handling all viewerItem errors at once.
+     * @param errors Array of ViewerItems errorInfo.
+     */
+    onError?: (errors: ErrorInfo[]) => void;
+
+    /**
+     * Comic viewer width.
+     */
+    viewerWidth: number;
+
+    /**
+     * The value for FlatList windowSize.
+     * @default 3
+     */
+    windowSize?: number;
+}> {}

package/src/ComicViewer/ViewerItem.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { Image, StyleSheet } from '@fountain-ui/core';
+import ComicViewerItemProps from './ComicViewerItemProps';
+
+const styles = StyleSheet.create({
+    placeholder: {
+        backgroundColor: '#abcabc',
+    },
+});
+
+function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
+    const {
+        height,
+        id,
+        isViewable,
+        onError,
+        sourceUrl,
+        width,
+    } = props;
+
+    const [isLoaded, setIsLoaded] = useState(false);
+
+    const errorCount = useRef<number>(0);
+
+    const onLoad = useCallback(() => {
+        errorCount.current = 0;
+        setIsLoaded(true);
+    }, []);
+
+    const handleError = useCallback(() => {
+        errorCount.current = errorCount.current + 1;
+
+        onError && onError({
+            id,
+            count: errorCount.current
+        });
+    }, [id]);
+
+    const viewStyle = { width, height };
+
+    const Placeholder = () => (
+        <View style={[
+            viewStyle,
+            styles.placeholder,
+        ]}/>
+    );
+
+    if (!isViewable && !isLoaded) {
+        return <Placeholder/>;
+    }
+
+    return (
+        <Image
+            disableOutline={true}
+            key={sourceUrl}
+            onLoad={onLoad}
+            onError={handleError}
+            source={{ uri: sourceUrl }}
+            style={viewStyle}
+            square={true}
+        />
+    );
+}
+
+export default React.memo(ViewerItem, (prevProps, nextProps) => {
+    if (prevProps.props.isViewable !== nextProps.props.isViewable) {
+        return false;
+    }
+
+    if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
+        return false;
+    }
+
+    return true;
+});

package/src/ComicViewer/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ComicViewer';
+export type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
+export type { default as ComicViewerItemProps } from './ComicViewerItemProps';

package/src/DateTimePicker/DateTimePicker.tsx

@@ -81,6 +81,12 @@ export default function DateTimePicker(props: DateTimePickerProps) {
                     onPress={() => setYearPickerVisible(true)}
                 />
             )}
+            theme={{
+                backgroundColor: theme.palette.paper.default,
+                calendarBackground: theme.palette.paper.default,
+                dayTextColor: theme.palette.text.primary,
+                textDisabledColor: theme.palette.text.hint,
+            }}
         />
     );
 };

package/src/DateTimePicker/YearPicker.tsx

@@ -61,6 +61,7 @@ const YearPicker = ({
         <Column>
             <Typography
                 children={formatDate(date, locale)}
+                color={'textPrimary'}
                 variant={'subtitle2'}
             />
             <FlatList
@@ -84,4 +85,4 @@ const YearPicker = ({
     );
 };
 
-export default YearPicker;
+export default YearPicker;

package/src/FlipCard/FlipCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type FlipCardProps from './FlipCardProps';
 
 const styles = StyleSheet.create({
@@ -27,9 +27,9 @@ export default function FlipCard(props: FlipCardProps) {
         style,
     } = props;
 
-    const sharedAngle = Animated.useSharedValue(0);
+    const sharedAngle = useSharedValue(0);
 
-    const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedFrontCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
             transform: [
@@ -37,9 +37,9 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${sharedAngle.value}deg` },
             ],
         };
-    });
+    }, []);
 
-    const animatedBackCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedBackCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
             transform: [
@@ -47,11 +47,11 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${(sharedAngle.value + 180)}deg` },
             ],
         };
-    });
+    }, []);
 
     useEffect(() => {
         sharedAngle.value = 0;
-        sharedAngle.value = Animated.withTiming(180, { duration: 500 });
+        sharedAngle.value = withTiming(180, { duration: 500 });
     }, [reanimationKey]);
 
     return (
@@ -65,4 +65,4 @@ export default function FlipCard(props: FlipCardProps) {
             </Animated.View>
         </View>
     );
-};
+};

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,36 +1,105 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { memo, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { StyleSheet } from '@fountain-ui/core';
 import type { PageProps } from './ViewPagerProps';
 
-const Page = function Page(props: PageProps) {
-    const { isVisible, ...otherProps } = props;
+const OFFSCREEN_RERENDER_LIMIT = 1;
+
+const styles = StyleSheet.create({
+    none: { display: 'none' },
+});
+
+interface PageState {
+    active: boolean;
+    visited: boolean;
+}
+
+function Page(props: PageProps) {
+    const {
+        index,
+        children,
+        loading,
+        sharedIndex,
+    } = props;
+
+    const assumeInitialPageState = (): PageState => {
+        const activeIndex = sharedIndex.value;
+
+        const active = index === activeIndex;
+
+        if (Platform.OS === 'web') {
+            return { active, visited: active };
+        }
+
+        if (loading === 'eager') {
+            return { active, visited: true };
+        }
+
+        const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
+            && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+
+        return { active, visited };
+    };
+
+    const [pageState, setPageState] = useState<PageState>(assumeInitialPageState);
+
+    const content = pageState.visited ? children : null;
+
+    const updatePageState = (active: boolean, neighbor: boolean) => {
+        setPageState(prevState => {
+            if (prevState.active !== active) {
+                return { active, visited: active || prevState.visited };
+            }
+
+            if (neighbor && !prevState.visited) {
+                return { ...prevState, visited: true };
+            }
+
+            return prevState;
+        });
+    };
+
+    useAnimatedReaction(
+        () => {
+            const activeIndex = sharedIndex.value;
+
+            const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
+                && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+
+            const willActive = index === activeIndex;
+            const willNeighbor = Platform.OS === 'web' ? false : (willVisible && !willActive);
+
+            return { willActive, willNeighbor };
+        },
+        (nextState, prevState) => {
+            const activeStateChanged = nextState.willActive !== prevState?.willActive;
+            const willNewNeighbor = nextState.willNeighbor && !prevState?.willNeighbor;
+
+            if (activeStateChanged || willNewNeighbor) {
+                runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);
+            }
+        },
+        [index],
+    );
+
+    const style = Platform.OS === 'web'
+        ? (pageState.active ? StyleSheet.absoluteFill : styles.none)
+        : undefined;
 
     return (
         <View
+            children={content}
             collapsable={false}
-            {...otherProps}
+            style={style}
         />
     );
-};
-
-export default React.memo(Page, (prevProps, nextProps) => {
-    if (prevProps.children === null && nextProps.children === null) {
-        return true;
-    }
-
-    // isVisible is an important condition for determining memos on the web.
-    // Reference ViewPagerWeb's return.
-    if (prevProps.isVisible !== nextProps.isVisible) {
-        return false;
-    }
-
-    if (nextProps.isVisible || nextProps.isNeighbor) {
-        return false;
-    }
+}
 
+export default memo(Page, (prevProps, nextProps) => {
     if (prevProps.rerenderKey !== nextProps.rerenderKey) {
         return false;
     }
 
-    return prevProps.children !== null && nextProps.children !== null;
+    return prevProps.index !== nextProps.index;
 });