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

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.background.default,
+                calendarBackground: theme.palette.background.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/index.ts

@@ -13,6 +13,9 @@ export * from './FlipCard';
 export { default as ViewPager } from './ViewPager';
 export * from './ViewPager';
 
+export { default as ComicViewer } from './ComicViewer';
+export * from './ComicViewer';
+
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';
 export * from './StatusBarProvider';