@fountain-ui/lab 2.0.0-beta.8 → 2.0.0-beta.80

package/src/ComicViewer/FastScrollProps.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import type { RefObject } from 'react';
+
+/**
+ * Position infos with display: 'position'.
+ */
+export type AbsolutePosition = {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+
+/**
+ * Durations(millis) for show, hide animation.
+ */
+export type VisibleDurations = {
+    hideMillis: number;
+    showMillis: number;
+}
+
+export interface FastScrollInstance {
+    /**
+     * Handle content scroll event, not using fast scroll indicator.
+     * @param event Function onScroll event params.
+     */
+    onContentScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+
+    /**
+     * Set indicator visible state.
+     */
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+
+    /**
+     * Return true, if pan gesture state is begin to finalize.
+     */
+    getIsIndicatorDragging: () => boolean,
+}
+
+export interface FastScrollOptions {
+    /**
+     * Ref for React.forwardRef.
+     */
+    ref: RefObject<FastScrollInstance>;
+
+    /**
+     * Range within which the indicator can move.
+     */
+    movementRange: number;
+
+    /**
+     * Scrollbar positions for 'display: position'.
+     */
+    absolutePosition?: Partial<AbsolutePosition>;
+
+    /**
+     * Durations(millis) for show, hide animation.
+     * @default { hide: 200, show: 350 }
+     */
+    visibleDurations?: VisibleDurations;
+
+    /**
+     * Additional height except contentLength.
+     * @default 0
+     */
+    additionalLength?: number;
+}
+
+interface FastScrollProps extends FastScrollOptions {
+    /**
+     * Total length of scrollable content.
+     */
+    contentLength: number;
+
+    /**
+     * Content initial scroll percentage.
+     */
+    initialScrollPercentage: number;
+
+    /**
+     * Scroll content to offset appropriate for the indicator location.
+     * @param offset Content offset.
+     */
+    scrollContentToOffset: (offset: number) => void;
+}
+
+export default FastScrollProps;

package/src/ComicViewer/ReloadButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import { IconButton, IconButtonProps, StyleSheet } from '@fountain-ui/core';
+import { Restart } from '@fountain-ui/icons';
+
+interface ReloadButtonProps {
+    onPress: IconButtonProps['onPress'];
+}
+
+const styles = StyleSheet.create({
+    root: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        paddingTop: 80,
+    },
+    button: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        color: '#ffffff',
+        backgroundColor: '#767676',
+    },
+});
+
+export default function ReloadButton(props: ReloadButtonProps) {
+    return (
+        <View style={styles.root}>
+            <IconButton
+                {...props}
+                children={<Restart fill={'#ffffff'}/>}
+                style={styles.button}
+            />
+        </View>
+    );
+};

package/src/ComicViewer/ViewerItem.tsx

@@ -1,76 +1,118 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { View } from 'react-native';
-import { Image, StyleSheet } from '@fountain-ui/core';
-import ComicViewerItemProps from './ComicViewerItemProps';
+import React from 'react';
+import { Image, TouchableWithoutFeedback, View } from 'react-native';
+import { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';
+import ReloadButton from './ReloadButton';
+import EncodedTile from './EncodedTile';
 
-const styles = StyleSheet.create({
-    placeholder: {
-        backgroundColor: '#abcabc',
-    },
-});
+export interface ViewerItemProps {
+    /**
+     * Image width.
+     */
+    width: number;
 
-function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
-    const {
-        height,
-        id,
-        isViewable,
-        onError,
-        sourceUrl,
-        width,
-    } = props;
+    /**
+     * Image height.
+     */
+    height: number;
 
-    const [isLoaded, setIsLoaded] = useState(false);
+    /**
+     * Need invisible paddingTop viewer vertically expanded.
+     */
+    invisiblePaddingTop: number;
 
-    const errorCount = useRef<number>(0);
+    /**
+     * Image sourceUrl for displaying.
+     */
+    url?: string;
 
-    const onLoad = useCallback(() => {
-        errorCount.current = 0;
-        setIsLoaded(true);
-    }, []);
+    /**
+     * Error handler.
+     */
+    onError?: ImageProps['onError'];
 
-    const handleError = useCallback(() => {
-        errorCount.current = errorCount.current + 1;
+    /**
+     * Load handler.
+     */
+    onLoad?: ImageProps['onLoad'];
 
-        onError && onError({
-            id,
-            count: errorCount.current
-        });
-    }, [id]);
+    /**
+     * Handle Reload button press event.
+     */
+    onReloadPress?: ImageProps['onError'];
 
-    const viewStyle = { width, height };
+    /**
+     * Handle item press event.
+     */
+    onPress?: () => void;
 
-    const Placeholder = () => (
-        <View style={[
-            viewStyle,
-            styles.placeholder,
-        ]}/>
-    );
-
-    if (!isViewable && !isLoaded) {
-        return <Placeholder/>;
-    }
+    /**
+     * If true, reload button visible.
+     * @default false
+     */
+    reloadButtonVisible?: boolean;
 
-    return (
-        <Image
-            disableOutline={true}
-            key={sourceUrl}
-            onLoad={onLoad}
-            onError={handleError}
-            source={{ uri: sourceUrl }}
-            style={viewStyle}
-            square={true}
-        />
-    );
+    /**
+     * FuiImage key for trigger image rerender.
+     */
+    imageKey: string;
 }
 
-export default React.memo(ViewerItem, (prevProps, nextProps) => {
-    if (prevProps.props.isViewable !== nextProps.props.isViewable) {
-        return false;
-    }
+export default function ViewerItem(props: ViewerItemProps) {
+    const {
+        height,
+        url,
+        width,
+        imageKey,
+        invisiblePaddingTop,
+        onError,
+        onLoad,
+        onPress,
+        onReloadPress,
+        reloadButtonVisible = false,
+    } = props;
 
-    if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
-        return false;
-    }
+    const styles = {
+        view: {
+            height,
+            width: '100%',
+            paddingTop: invisiblePaddingTop,
+        },
+        image: {
+            height: height - invisiblePaddingTop,
+            width,
+        },
+    };
 
-    return true;
-});
+    const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;
+
+    const placeholder = <Image
+        source={{ uri: EncodedTile }}
+        resizeMode={'cover'}
+        style={styles.image}
+    />;
+
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={styles.view}>
+                <FuiImage
+                    key={imageKey}
+                    cache={'web'}
+                    disableDrag={true}
+                    disableLongClick={true}
+                    disableOutline={true}
+                    error={error}
+                    onError={onError}
+                    onLoad={onLoad}
+                    loading={'eager'}
+                    placeholder={placeholder}
+                    source={{ uri: url }}
+                    square={true}
+                    style={css([
+                        { alignSelf: 'center' },
+                        styles.image,
+                    ])}
+                />
+            </View>
+        </TouchableWithoutFeedback>
+    );
+};

package/src/ComicViewer/index.ts

@@ -1,3 +1,9 @@
 export { default } from './ComicViewer';
-export type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
-export type { default as ComicViewerItemProps } from './ComicViewerItemProps';
+export type { Dimension, IntrinsicImage, default as ComicViewerProps } from './ComicViewerProps';
+export type { ViewerItemProps } from './ViewerItem';
+export type {
+    AbsolutePosition,
+    FastScrollInstance,
+    FastScrollOptions,
+    VisibleDurations,
+} from './FastScrollProps';

package/src/ComicViewer/util.ts

@@ -0,0 +1,15 @@
+export const offsetToPercentage = (offset: number, total: number) => {
+    if (offset === 0 || total === 0) {
+        return 0;
+    }
+
+    return offset / total * 100;
+};
+
+export const percentageToOffset = (percentage: number, total: number) => {
+    if (percentage === 0 || total === 0) {
+        return 0;
+    }
+
+    return percentage / 100 * total;
+};

package/src/DateTimePicker/DateTimePicker.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { format } from 'date-fns';
 //@ts-ignore
 import { Calendar, LocaleConfig } from 'react-native-calendars';
-import { Button, Typography } from '@fountain-ui/core';
+import { Button, createFontStyle, Typography } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import YearPicker from './YearPicker';
 import { DateTimePickerContext } from './DateTimePickerProvider';
@@ -26,6 +26,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
 
     const theme = useTheme();
 
+    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2 });
+
     const [yearPickerVisible, setYearPickerVisible] = React.useState(false);
     const { locales } = useDateTimePicker();
 
@@ -86,6 +88,12 @@ export default function DateTimePicker(props: DateTimePickerProps) {
                 calendarBackground: theme.palette.paper.default,
                 dayTextColor: theme.palette.text.primary,
                 textDisabledColor: theme.palette.text.hint,
+                textDayFontFamily: textDayFontStyle.fontFamily,
+                textDayFontSize: textDayFontStyle.fontSize,
+                textDayFontWeight: textDayFontStyle.fontWeight,
+                textDayHeaderFontFamily: textDayFontStyle.fontFamily,
+                textDayHeaderFontSize: textDayFontStyle.fontSize,
+                textDayHeaderFontWeight: textDayFontStyle.fontWeight,
             }}
         />
     );

package/src/FlipCard/FlipCard.tsx

@@ -37,7 +37,7 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${sharedAngle.value}deg` },
             ],
         };
-    });
+    }, []);
 
     const animatedBackCardStyle = useAnimatedStyle(() => {
         return {
@@ -47,7 +47,7 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${(sharedAngle.value + 180)}deg` },
             ],
         };
-    });
+    }, []);
 
     useEffect(() => {
         sharedAngle.value = 0;

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 | null> = null;
+
+const PageStateContext = createContext<PageState | null>(initialPageState);
+
+export default PageStateContext;

package/src/ViewPager/ViewPager.native.tsx

@@ -0,0 +1,152 @@
+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,
+        onPageScrollStateChanged,
+        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}
+                onPageScrollStateChanged={onPageScrollStateChanged}
+                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;