@fountain-ui/lab 2.0.0-beta.50 → 2.0.0-beta.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.50",
+  "version": "2.0.0-beta.52",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e88aa7213f667ee522d4c1e7d684d5f935df6f2a"
+  "gitHead": "ba0faed7f492a6b00b7614c06f23f2fab290e01e"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -23,6 +23,8 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.9,
         onChange,
         snapPoints = [],
+        disableDefaultBackgroundColor = false,
+        disableDefaultShadow = false,
     } = props;
 
     const indexRef = React.useRef<number>(-1);
@@ -62,14 +64,14 @@ export default function BottomSheet(props: BottomSheetProps) {
     const shadow = theme.shadow[12];
     const modalStyle = {
         backgroundColor: '#ffffff00',
-        ...Platform.select<object>({
+        ...(disableDefaultShadow ? {} : Platform.select<object>({
             android: shadow?.elevation,
             ios: shadow?.shadow,
             web: shadow?.boxShadow,
-        }),
+        })),
     };
     const backgroundStyle = {
-        backgroundColor: theme.palette.paper.default,
+        backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,
     };
     const contentWrapperStyle = {
         flex: 1,

package/src/BottomSheet/BottomSheetProps.ts

@@ -49,4 +49,16 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default []
      */
     snapPoints?: Array<number | string>;
+
+    /**
+     * Disable default backgroundColor.
+     * @default false
+     */
+    disableDefaultBackgroundColor?: boolean;
+
+    /**
+     * Disable default shadow.
+     * @default false
+     */
+    disableDefaultShadow?: boolean;
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -40,6 +40,8 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.9,
         onChange,
         snapPoints = [],
+        disableDefaultBackgroundColor = false,
+        disableDefaultShadow = false,
     } = props;
 
     const styles = useStyles();
@@ -79,8 +81,9 @@ export default function BottomSheet(props: BottomSheetProps) {
                 translateY={translateY}
             >
                 <Paper
-                    elevation={12}
+                    elevation={disableDefaultShadow ? 0 : 12}
                     style={paperStyles}
+                    colorValue={disableDefaultBackgroundColor ? '#ffffff00' : undefined}
                 >
                     <ScrollView
                         onContentSizeChange={handleContentSizeChange}

package/src/ComicViewer/ComicViewer.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, ViewToken } from 'react-native';
 import * as R from 'ramda';
-import { useDebounce } from '@fountain-ui/core';
-import { default as ComicViewerProps, Dimension } from './ComicViewerProps';
+import { default as ComicViewerProps, Dimension, IntrinsicImage } from './ComicViewerProps';
 import ViewerItem from './ViewerItem';
 import FastScroll from './FastScroll';
 
@@ -17,23 +16,28 @@ interface UrlState {
 }
 
 interface ImageState {
-    urlState?: UrlState;
-    isNewUrlIncoming: boolean;
+    urlState: UrlState;
     totalErrorCount: number;
     dimension: Dimension;
+    tryRenderingMillis: number;
 }
 
 interface ItemState {
     index: number;
     url?: string;
+    imageKey: string;
     reloadButtonVisible: boolean;
     dimension: Dimension;
 }
 
-const createInitialImageState = (dimension: Dimension): ImageState => ({
-    isNewUrlIncoming: false,
+const createInitialImageState = (image: IntrinsicImage): ImageState => ({
     totalErrorCount: 0,
-    dimension,
+    dimension: image.dimension,
+    tryRenderingMillis: 0,
+    urlState: {
+        url: image.url,
+        validity: 'unknown',
+    },
 });
 
 const mapImageStateToItemState = (
@@ -43,11 +47,12 @@ const mapImageStateToItemState = (
 ): ItemState => ({
     index,
     url: imageState.urlState?.url,
+    imageKey: `${imageState.tryRenderingMillis}-${index}`,
     reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,
     dimension: imageState.dimension,
 });
 
-const mapIndexed = R.addIndex<Dimension>(R.map);
+const mapIndexed = R.addIndex<IntrinsicImage>(R.map);
 
 const MAXIMUM_WIDTH = 720;
 
@@ -58,11 +63,10 @@ export default function ComicViewer(props: ComicViewerProps) {
         debounceMillis = 100,
         autoHandleErrorCount = 3,
         fastScrollOptions,
-        getUrlByIndex,
         initialNumToRender = 1,
         initialScrollPercentage = 0,
         itemVisiblePercentThreshold = 0,
-        intrinsicDimensions,
+        intrinsicImages,
         maxContentWidth = MAXIMUM_WIDTH,
         onItemPress,
         onScroll,
@@ -82,7 +86,8 @@ export default function ComicViewer(props: ComicViewerProps) {
 
     const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
 
-    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicDimensions), []);
+    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicImages), []);
+
     const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);
 
     const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {
@@ -96,14 +101,14 @@ export default function ComicViewer(props: ComicViewerProps) {
     });
 
     const renderedDimensions = useMemo<Array<Dimension>>(() => {
-        return mapIndexed((intrinsicDimension, index) => {
-            const height = (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width + (index === 0 ? invisiblePaddingTop : 0);
+        return mapIndexed((intrinsicImage, index) => {
+            const height = (intrinsicImage.dimension.height * actualImageWidth) / intrinsicImage.dimension.width + (index === 0 ? invisiblePaddingTop : 0);
 
             return {
                 width: actualImageWidth,
                 height: isNaN(height) ? 0 : height,
             };
-        }, intrinsicDimensions);
+        }, intrinsicImages);
     }, [actualImageWidth]);
 
     const layoutFromDimensions = useCallback(() => {
@@ -142,60 +147,31 @@ export default function ComicViewer(props: ComicViewerProps) {
         });
     };
 
-    const loadUrlByIndex = async (indexes: number[]) => {
-        const filteredIndexes = R.filter(index => {
-            const state = imageStatesRef.current[index];
-
-            return !state.isNewUrlIncoming
-                && (R.isNil(state.urlState) || state.urlState?.validity === 'invalid');
-        }, indexes);
+    const updateItems = (indexes: number[]) => {
+        const tryRenderingMillis = new Date().getTime();
 
         updateImageState((imageState, i) => {
-            return R.includes(i, filteredIndexes)
-                ? { ...imageState, isNewUrlIncoming: true }
-                : imageState;
-        });
-
-        try {
-            const urls = await getUrlByIndex(filteredIndexes);
-
-            updateImageState((imageState, i) => {
-                const newUrl = urls?.get(i);
-                const urlState = imageState.urlState;
-
-                if (newUrl !== undefined && urlState?.validity !== 'valid') {
-                    return {
-                        ...imageState,
-                        urlState: {
-                            url: newUrl,
-                            validity: 'unknown',
-                        },
-                    };
-                }
+            const urlState = imageState.urlState;
+            const shouldRerender = R.includes(i, R.defaultTo([], indexes));
+
+            if (shouldRerender && urlState?.validity !== 'valid') {
+                return {
+                    ...imageState,
+                    tryRenderingMillis,
+                };
+            }
 
-                return imageState;
-            });
-        } catch (e) {
-            // ignore
-        } finally {
-            updateImageState((imageState, i) => {
-                return R.includes(i, filteredIndexes)
-                    ? { ...imageState, isNewUrlIncoming: false }
-                    : imageState;
-            });
-        }
+            return imageState;
+        });
     };
 
-    const loadMaybeLoadableItems = () => {
+    const renderMaybeLoadableItems = () => {
         const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
         const affectedIndexes = R.range(startIndex, endIndex);
 
-        loadUrlByIndex(affectedIndexes);
+        updateItems(affectedIndexes);
     };
 
-    const ignoreDebounce = useRef(true);
-    const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);
-
     const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
         const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);
 
@@ -211,14 +187,7 @@ export default function ComicViewer(props: ComicViewerProps) {
 
         maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
 
-        if (ignoreDebounce.current) {
-            loadMaybeLoadableItems();
-
-            ignoreDebounce.current = false;
-            return;
-        }
-
-        loadItemsDebounce();
+        renderMaybeLoadableItems();
     });
 
     const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -241,7 +210,7 @@ export default function ComicViewer(props: ComicViewerProps) {
             updateImageState((imageState, i) => {
                 const urlState = imageState.urlState;
 
-                if (i === index && urlState !== undefined) {
+                if (i === index) {
                     return {
                         ...imageState,
                         totalErrorCount: imageState.totalErrorCount + 1,
@@ -261,17 +230,14 @@ export default function ComicViewer(props: ComicViewerProps) {
 
             const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
             if (index >= startIndex || index < endIndex) {
-                loadItemsDebounce();
+                renderMaybeLoadableItems();
             }
         };
 
         const handleReloadPress = () => {
             onReloadPress && onReloadPress();
 
-            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
-            if (index >= startIndex || index < endIndex) {
-                loadUrlByIndex([index]);
-            }
+            updateItems([index]);
         };
 
         const onLoad = () => {
@@ -299,6 +265,7 @@ export default function ComicViewer(props: ComicViewerProps) {
                 onPress={onItemPress}
                 onReloadPress={handleReloadPress}
                 url={item.url}
+                imageKey={item.imageKey}
                 invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}
                 width={renderedDimensions[index]?.width ?? 0}
                 height={renderedDimensions[index]?.height ?? 0}

package/src/ComicViewer/ComicViewerProps.ts

@@ -8,6 +8,11 @@ export interface Dimension {
     height: number;
 }
 
+export interface IntrinsicImage {
+    dimension: Dimension;
+    url: string;
+}
+
 export default interface ComicViewerProps extends ComponentProps <{
     /**
      * Delay Time to call the error handler.
@@ -41,9 +46,9 @@ export default interface ComicViewerProps extends ComponentProps <{
     itemVisiblePercentThreshold?: number;
 
     /**
-     * Dimensions of each Image considering viewport.
+     * Dimensions and url info of each Image considering viewport.
      */
-    intrinsicDimensions: Array<Dimension>;
+    intrinsicImages: Array<IntrinsicImage>;
 
     /**
      * Need invisible paddingTop viewer vertically expanded.
@@ -73,11 +78,6 @@ export default interface ComicViewerProps extends ComponentProps <{
      */
     fastScrollOptions: FastScrollOptions;
 
-    /**
-     * Get contents urls by indexes.
-     */
-    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;
-
     /**
      * Handle scroll event.
      * @param event Scroll event.

package/src/ComicViewer/ViewerItem.tsx

@@ -50,6 +50,11 @@ export interface ViewerItemProps {
      * @default false
      */
     reloadButtonVisible?: boolean;
+
+    /**
+     * FuiImage key for trigger image rerender.
+     */
+    imageKey: string;
 }
 
 export default function ViewerItem(props: ViewerItemProps) {
@@ -57,6 +62,7 @@ export default function ViewerItem(props: ViewerItemProps) {
         height,
         url,
         width,
+        imageKey,
         invisiblePaddingTop,
         onError,
         onLoad,
@@ -89,6 +95,7 @@ export default function ViewerItem(props: ViewerItemProps) {
         <TouchableWithoutFeedback onPress={onPress}>
             <View style={styles.view}>
                 <FuiImage
+                    key={imageKey}
                     cache={'web'}
                     disableDrag={true}
                     disableLongClick={true}

package/src/ComicViewer/index.ts

@@ -1,5 +1,5 @@
 export { default } from './ComicViewer';
-export type { Dimension, default as ComicViewerProps } from './ComicViewerProps';
+export type { Dimension, IntrinsicImage, default as ComicViewerProps } from './ComicViewerProps';
 export type { ViewerItemProps } from './ViewerItem';
 export type {
     AbsolutePosition,

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,
             }}
         />
     );