@fountain-ui/lab 2.0.0-beta.3 → 2.0.0-beta.31

package/src/ComicViewer/ComicViewerProps.ts

@@ -1,15 +1,48 @@
+import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+export const STATE = {
+    UNLOAD: 'unload',
+    LOADING: 'loading',
+    LOADED: 'loaded',
+    FAIL: 'fail',
+} as const;
+
+export type LoadingState = typeof STATE[keyof typeof STATE];
+
+export interface ComicViewerItemState{
+    /**
+     * Comic viewer item sortKey.
+     */
+    sortKey: number;
+
+    /**
+     * Content's loading state.
+     */
+    state: LoadingState;
+
+    /***
+     * Content's error Info.
+     */
+    error?: ErrorInfo;
+}
 
 export interface ErrorInfo {
     /**
-     * ComicViewerItemData.id.
+     * ComicViewerItemData.sortKey.
      */
-    id: string;
+    sortKey: number;
 
     /**
      * Number of times an error occurred.
      */
     count: number;
+
+    /**
+     * Content is Expired: true
+     */
+    expired: boolean;
 }
 
 export type ComicViewerItemData<T = {}> = T & {
@@ -21,17 +54,27 @@ export type ComicViewerItemData<T = {}> = T & {
     /**
      * Unique value for identifying.
      */
-    id: string;
+    id: number | undefined;
 
     /**
      * Image sourceUrl for displaying.
      */
-    sourceUrl: string;
+    url: string;
 
     /**
      * Image width.
      */
     width: number;
+
+    /**
+     * SortKey
+     */
+    sortKey: number;
+
+    /**
+     * Image expire date.
+     */
+    expiresAt: string;
 }
 
 export default interface ComicViewerProps<T> extends ComponentProps <{
@@ -52,7 +95,7 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
      */
     errorRetryCount?: number;
 
-     /**
+    /**
      * How many items to render in the initial batch.
      * @default 1
      */
@@ -71,6 +114,28 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
      */
     itemVisiblePercentThreshold?: number;
 
+    /**
+     * Comic viewer width.
+     */
+    viewerWidth: number;
+
+    /**
+     * The value for FlatList windowSize.
+     * @default 3
+     */
+    windowSize?: number;
+
+    /**
+     * How many images in one page.
+     */
+    pageUnit: number;
+
+    /**
+     * Method for getting next page contents.
+     * @param sortKey
+     */
+    getNextPage?: (sortKey: number) => void;
+
     /**
      * Handling all viewerItem errors at once.
      * @param errors Array of ViewerItems errorInfo.
@@ -78,13 +143,18 @@ export default interface ComicViewerProps<T> extends ComponentProps <{
     onError?: (errors: ErrorInfo[]) => void;
 
     /**
-     * Comic viewer width.
+     * Handle scroll event.
+     * @param event Scroll event.
      */
-    viewerWidth: number;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 
     /**
-     * The value for FlatList windowSize.
-     * @default 3
+     * Handle item press event.
      */
-    windowSize?: number;
+    onItemPress?: () => void;
+
+    /**
+     * Component for comic viewer footer.
+     */
+    ListFooterComponent?: React.ReactElement;
 }> {}

package/src/ComicViewer/ViewerItem.tsx

@@ -1,65 +1,161 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { View } from 'react-native';
-import { Image, StyleSheet } from '@fountain-ui/core';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import * as R from 'ramda';
+import type { PlaceholderProps } from '@fountain-ui/core';
+import { IconButton, Image, Spacer, useTheme } from '@fountain-ui/core';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { Restart } from '@fountain-ui/icons';
 import ComicViewerItemProps from './ComicViewerItemProps';
 
-const styles = StyleSheet.create({
-    placeholder: {
-        backgroundColor: '#abcabc',
-    },
-});
+type PlaceholderStyles = NamedStylesStringUnion<'init' | 'failed' | 'reload' | 'root'>;
+
+const useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+        },
+        init: {
+            backgroundColor: theme.palette.paper.grey,
+        },
+        failed: {
+            backgroundColor: theme.palette.paper.grey,
+        },
+        reload: {
+            backgroundColor: theme.palette.paper.grey,
+            display: 'flex',
+            alignItems: 'center',
+        },
+    };
+};
 
 function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
     const {
+        expiresAt,
+        errorRetryCount = 3,
         height,
-        id,
+        itemState,
         isViewable,
-        onError,
-        sourceUrl,
+        sortKey,
+        url,
         width,
+        getNextPage,
+        onError,
+        onLoaded,
+        onItemPress,
     } = props;
 
     const [isLoaded, setIsLoaded] = useState(false);
 
-    const errorCount = useRef<number>(0);
+    const styles = useStyles();
+
+    const errorCount = useRef<number>(R.defaultTo(0)(itemState?.error?.count));
 
     const onLoad = useCallback(() => {
         errorCount.current = 0;
+
         setIsLoaded(true);
-    }, []);
+
+        onLoaded && onLoaded(sortKey);
+    }, [sortKey]);
 
     const handleError = useCallback(() => {
         errorCount.current = errorCount.current + 1;
 
+        const now = new Date();
+        const utcNow = now.getTime() + (now.getTimezoneOffset() * 60 * 1000);
+        const expired = new Date(expiresAt).getTime() <= utcNow;
+
         onError && onError({
-            id,
-            count: errorCount.current
+            sortKey,
+            count: errorCount.current,
+            expired,
         });
-    }, [id]);
+    }, [errorCount.current]);
+
+    const onReloadPress = useCallback(() => {
+        errorCount.current = 1;
+
+        onError && onError({
+            sortKey,
+            count: errorCount.current,
+            expired: false,
+        });
+    }, [sortKey]);
 
     const viewStyle = { width, height };
 
-    const Placeholder = () => (
-        <View style={[
-            viewStyle,
-            styles.placeholder,
-        ]}/>
-    );
+    const Placeholder = useCallback((props: PlaceholderProps) => {
+        const { children, failed } = props;
 
-    if (!isViewable && !isLoaded) {
-        return <Placeholder/>;
-    }
+        if (!isViewable && !isLoaded) {
+            return <View style={[
+                viewStyle,
+                styles.init,
+            ]}/>;
+        }
+
+        if (errorCount.current >= errorRetryCount) {
+            return <View style={[
+                viewStyle,
+                styles.reload,
+            ]}>
+                <Spacer size={20}/>
+
+                <IconButton
+                    children={<Restart fill={'#ffffff'}/>}
+                    style={{
+                        width: 48,
+                        height: 48,
+                        borderRadius: 24,
+                        color: '#ffffff',
+                        backgroundColor: '#767676',
+                    }}
+                    onPress={onReloadPress}
+                />
+            </View>;
+        }
+
+        if (failed) {
+            return (
+                <View style={[
+                    viewStyle,
+                    styles.failed,
+                ]}/>
+            );
+        }
+
+        return children ? (
+            <Pressable onPress={onItemPress}>
+                {children}
+            </Pressable>
+        ) : null;
+    }, [isViewable, isLoaded, errorCount.current, url, onItemPress]);
+
+    useEffect(() => {
+        if (url === '') {
+            getNextPage?.(sortKey);
+        }
+    }, []);
 
     return (
-        <Image
-            disableOutline={true}
-            key={sourceUrl}
-            onLoad={onLoad}
-            onError={handleError}
-            source={{ uri: sourceUrl }}
-            style={viewStyle}
-            square={true}
-        />
+        <View style={styles.root}>
+            <Image
+                disableOutline={true}
+                key={sortKey}
+                disableLongClick={true}
+                disableDrag={true}
+                onLoad={onLoad}
+                onError={handleError}
+                source={{ uri: url }}
+                style={viewStyle}
+                square={true}
+                Placeholder={Placeholder}
+            />
+        </View>
     );
 }
 
@@ -68,7 +164,11 @@ export default React.memo(ViewerItem, (prevProps, nextProps) => {
         return false;
     }
 
-    if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
+    if (prevProps.props.url !== nextProps.props.url) {
+        return false;
+    }
+
+    if (prevProps.props.width !== nextProps.props.width) {
         return false;
     }
 

package/src/DateTimePicker/DateTimePicker.tsx

@@ -82,8 +82,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
                 />
             )}
             theme={{
-                backgroundColor: theme.palette.background.default,
-                calendarBackground: theme.palette.background.default,
+                backgroundColor: theme.palette.paper.default,
+                calendarBackground: theme.palette.paper.default,
                 dayTextColor: theme.palette.text.primary,
                 textDisabledColor: theme.palette.text.hint,
             }}

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/FluxContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import type { MonoStore } from '@fountain-ui/core';
+
+export type FluxStore<S> = MonoStore<S>;
+
+const FluxContext = createContext<FluxStore<any> | null>(null);
+
+export default FluxContext;

package/src/ViewPager/InternalContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { MonoStore } from '@fountain-ui/core';
+import { MockStore } from '@fountain-ui/core';
+
+export interface InternalContextValue {
+    pageStore: MonoStore<number>;
+}
+
+const InternalContext = createContext<InternalContextValue>({
+    pageStore: new MockStore(),
+});
+
+export default InternalContext;

package/src/ViewPager/PageStateContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export interface PageState {
+    isActive: boolean;
+}
+
+const initialPageState: Readonly<PageState> = { isActive: false };
+
+const PageStateContext = createContext<PageState>(initialPageState);
+
+export default PageStateContext;

package/src/ViewPager/ViewPager.native.tsx

@@ -0,0 +1,150 @@
+import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
+import RNViewPager from 'react-native-pager-view';
+import { useSyncAnimatedValue } from '@fountain-ui/core';
+import { ChildrenMemoizedPage } from './components';
+import type ViewPagerProps from './ViewPagerProps';
+import type { ViewPagerInstance } from './types';
+import { usePageStore } from './hooks';
+import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, isValidPage } from './utils';
+import InternalContext from './InternalContext';
+
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
+    const {
+        children,
+        initialPage = defaultInitialPage,
+        keyboardDismissMode = 'on-drag',
+        loading = defaultLoading,
+        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
+        onChange,
+        pageForceRerenderKey,
+        scrollEnabled = true,
+        style,
+        UNSTABLE_sharedPage,
+    } = props;
+
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
+
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
+
+    const pageRef = useRef<number>(sharedPage.initialValue);
+
+    const desiredPageRef = useRef<number>(NaN);
+
+    const pagerRef = useRef<RNViewPager | null>(null);
+
+    const animationFrameRef = useRef<number>(NaN);
+
+    const numberOfPages = Children.count(children);
+    const setPage = useCallback((newPage: number) => {
+        if (!isValidPage(newPage, numberOfPages)) {
+            return;
+        }
+
+        animationFrameRef.current = requestAnimationFrame(() => {
+            if (Number.isFinite(desiredPageRef.current)) {
+                if (pageRef.current === desiredPageRef.current) {
+                    // end of state machine. clear desired page.
+                    desiredPageRef.current = NaN;
+                    return;
+                }
+
+                if (newPage === desiredPageRef.current) {
+                    return;
+                }
+            }
+
+            desiredPageRef.current = newPage;
+            pagerRef.current?.setPage(newPage);
+        });
+    }, [numberOfPages]);
+
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        const animatedValue = sharedPage.animatedValue;
+        const id = animatedValue.addListener(newValue => {
+            const newPage = newValue.value;
+            pageRef.current = newPage;
+            setPage(newPage);
+        });
+
+        return () => {
+            animatedValue.removeListener(id);
+        };
+    }, [sharedPage, setPage]);
+
+    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
+        if (Number.isFinite(desiredPageRef.current)) {
+            // onPageSelected is called from outer controlling mechanism
+            // e.g. sharedPage.value is changed, setPage() is called
+            // Due to the onPageSelected bug,
+            // we don't trust the value from event, (e.nativeEvent.position)
+            // other than that trust the value from desiredPageRef.
+
+            const desiredPage = desiredPageRef.current;
+
+            if (pageRef.current === desiredPage) {
+                // end of state machine. clear desired page.
+                desiredPageRef.current = NaN;
+            } else {
+                sharedPage.animatedValue.setValue(desiredPage);
+            }
+
+            onChange?.(desiredPage);
+        } else {
+            const trustfulNextPage = e.nativeEvent.position;
+
+            if (trustfulNextPage !== pageRef.current) {
+                desiredPageRef.current = trustfulNextPage;
+                sharedPage.animatedValue.setValue(trustfulNextPage);
+
+                onChange?.(trustfulNextPage);
+            }
+        }
+    }, [onChange, sharedPage]);
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
+    const pageStore = usePageStore(sharedPage);
+
+    const contextValue = useMemo(() => ({ pageStore }), [pageStore]);
+
+    return (
+        <InternalContext.Provider value={contextValue}>
+            <RNViewPager
+                ref={pagerRef}
+                initialPage={sharedPage.initialValue}
+                keyboardDismissMode={keyboardDismissMode}
+                onPageSelected={handlePageSelected}
+                pageMargin={8}
+                scrollEnabled={scrollEnabled}
+                style={style}
+            >
+                {Children.map(children, (child, index) => (
+                    <ChildrenMemoizedPage
+                        key={index}
+                        children={child}
+                        index={index}
+                        initialPage={sharedPage.initialValue}
+                        loading={loading}
+                        offscreenPageRerenderLimit={offscreenPageRerenderLimit}
+                        rerenderKey={pageForceRerenderKey}
+                    />
+                ))}
+            </RNViewPager>
+        </InternalContext.Provider>
+    );
+});
+
+export default ViewPager;

package/src/ViewPager/ViewPager.tsx

@@ -0,0 +1,69 @@
+import React, { Children, forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet, useSyncAnimatedValue } from '@fountain-ui/core';
+import { ChildrenMemoizedPage } from './components';
+import type ViewPagerProps from './ViewPagerProps';
+import type { ViewPagerInstance } from './types';
+import { defaultInitialPage, defaultLoading, isValidPage } from './utils';
+import { usePageStore } from './hooks';
+import InternalContext from './InternalContext';
+
+const styles = StyleSheet.create({
+    root: {
+        // @ts-ignore
+        overflow: 'auto',
+        position: 'relative',
+    },
+});
+
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
+    const {
+        children,
+        initialPage = defaultInitialPage,
+        loading = defaultLoading,
+        pageForceRerenderKey,
+        style,
+        UNSTABLE_sharedPage,
+    } = props;
+
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
+
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
+
+    const numberOfPages = Children.count(children);
+    const setPage = useCallback((newPage: number) => {
+        if (isValidPage(newPage, numberOfPages)) {
+            sharedPage.animatedValue.setValue(newPage);
+        }
+    }, [sharedPage, numberOfPages]);
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
+    const pageStore = usePageStore(sharedPage);
+
+    const contextValue = useMemo(() => ({ pageStore }), [pageStore]);
+
+    return (
+        <InternalContext.Provider value={contextValue}>
+            <View style={[styles.root, style]}>
+                {Children.map(children, (child, index) => (
+                    <ChildrenMemoizedPage
+                        key={index}
+                        children={child}
+                        index={index}
+                        initialPage={sharedPage.initialValue}
+                        loading={loading}
+                        offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
+                        rerenderKey={pageForceRerenderKey}
+                    />
+                ))}
+            </View>
+        </InternalContext.Provider>
+    );
+});
+
+export default ViewPager;