@fountain-ui/lab 2.0.0-beta.44 → 2.0.0-beta.46

package/build/typescript/ComicViewer/FastScrollProps.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import type { RefObject } from 'react';
+/**
+ * Position infos with display: 'position'.
+ */
+export declare type AbsolutePosition = {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+/**
+ * Durations(millis) for show, hide animation.
+ */
+export declare 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;
+    /**
+     * Scroll content to offset appropriate for the indicator location.
+     * @param offset Content offset.
+     */
+    scrollContentToOffset: (offset: number) => void;
+}
+export default FastScrollProps;

package/build/typescript/ComicViewer/ReloadButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@fountain-ui/core';
 interface ReloadButtonProps {
     onPress: IconButtonProps['onPress'];

package/build/typescript/ComicViewer/ViewerItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageProps } from '@fountain-ui/core';
 export interface ViewerItemProps {
     /**
@@ -8,6 +9,10 @@ export interface ViewerItemProps {
      * Image height.
      */
     height: number;
+    /**
+     * Need invisible paddingTop viewer vertically expanded.
+     */
+    invisiblePaddingTop: number;
     /**
      * Image sourceUrl for displaying.
      */

package/build/typescript/ComicViewer/index.d.ts

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

package/build/typescript/ComicViewer/util.d.ts

@@ -0,0 +1,2 @@
+export declare const offsetToPercentage: (offset: number, total: number) => number;
+export declare const percentageToOffset: (percentage: number, total: number) => number;

package/build/typescript/DateTimePicker/DateTimePicker.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type DateTimePickerProps from './DateTimePickerProps';
 export default function DateTimePicker(props: DateTimePickerProps): JSX.Element;

package/build/typescript/DateTimePicker/YearPicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface YearPickerProps {
     date: Date;
     locale?: string;

package/build/typescript/FlipCard/FlipCard.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type FlipCardProps from './FlipCardProps';
 export default function FlipCard(props: FlipCardProps): JSX.Element;

package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type StatusBarProviderProps from './StatusBarProviderProps';
 export default function StatusBarProvider(props: StatusBarProviderProps): JSX.Element;

package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerView.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';
 export default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.44",
+  "version": "2.0.0-beta.46",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@fountain-ui/icons": "^2.0.0-beta.9",
+    "@fountain-ui/icons": "^2.0.0-beta.10",
     "@fountain-ui/utils": "^2.0.0-beta.4",
     "react-native-calendars": "1.1267.0"
   },
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d6c9346f8fd3675ac5096ee5caaad3f372f9def6"
+  "gitHead": "b0d9e43744035ca199189733ba172320955879c9"
 }

package/src/ComicViewer/ComicViewer.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FlatList, ListRenderItem, ViewToken } from 'react-native';
+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 ViewerItem from './ViewerItem';
+import FastScroll from './FastScroll';
 
 const appender = (left: number, right: number): [number, number] => [left + right, left + right];
 const getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);
@@ -46,6 +47,8 @@ const mapImageStateToItemState = (
     dimension: imageState.dimension,
 });
 
+const mapIndexed = R.addIndex<Dimension>(R.map);
+
 const MAXIMUM_WIDTH = 720;
 
 const NUMBER_OF_ADJACENT_ITEM = 5;
@@ -54,6 +57,7 @@ export default function ComicViewer(props: ComicViewerProps) {
     const {
         debounceMillis = 100,
         autoHandleErrorCount = 3,
+        fastScrollOptions,
         getUrlByIndex,
         initialNumToRender = 1,
         initialScrollPercentage = 0,
@@ -61,11 +65,15 @@ export default function ComicViewer(props: ComicViewerProps) {
         intrinsicDimensions,
         maxContentWidth = MAXIMUM_WIDTH,
         onItemPress,
+        onScroll,
         viewportWidth,
+        invisiblePaddingTop = 0,
         windowSize = 3,
         ...otherProps
     } = props;
 
+    const fastScrollRef = fastScrollOptions?.ref;
+
     const flatListRef = useRef<FlatList>(null);
 
     const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);
@@ -86,9 +94,9 @@ export default function ComicViewer(props: ComicViewerProps) {
     });
 
     const renderedDimensions = useMemo<Array<Dimension>>(() => {
-        return R.map(intrinsicDimension => ({
+        return mapIndexed((intrinsicDimension, index) => ({
             width: actualImageWidth,
-            height: (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width,
+            height: (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width + (index === 0 ? invisiblePaddingTop : 0),
         }), intrinsicDimensions);
     }, [actualImageWidth]);
 
@@ -132,8 +140,8 @@ export default function ComicViewer(props: ComicViewerProps) {
         const filteredIndexes = R.filter(index => {
             const state = imageStatesRef.current[index];
 
-            return R.isNil(state.urlState)
-                || (state.urlState?.validity === 'invalid' && !state.isNewUrlIncoming);
+            return !state.isNewUrlIncoming
+                && (R.isNil(state.urlState) || state.urlState?.validity === 'invalid');
         }, indexes);
 
         updateImageState((imageState, i) => {
@@ -161,6 +169,8 @@ export default function ComicViewer(props: ComicViewerProps) {
 
                 return imageState;
             });
+        } catch (e) {
+            // ignore
         } finally {
             updateImageState((imageState, i) => {
                 return R.includes(i, filteredIndexes)
@@ -170,13 +180,14 @@ export default function ComicViewer(props: ComicViewerProps) {
         }
     };
 
-    const loadMaybeLoadableItems = async () => {
+    const loadMaybeLoadableItems = () => {
         const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
         const affectedIndexes = R.range(startIndex, endIndex);
 
-        await loadUrlByIndex(affectedIndexes);
+        loadUrlByIndex(affectedIndexes);
     };
 
+    const ignoreDebounce = useRef(true);
     const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);
 
     const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
@@ -194,9 +205,29 @@ export default function ComicViewer(props: ComicViewerProps) {
 
         maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];
 
+        if (ignoreDebounce.current) {
+            loadMaybeLoadableItems();
+
+            ignoreDebounce.current = false;
+            return;
+        }
+
         loadItemsDebounce();
     });
 
+    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        fastScrollRef?.current?.onContentScroll(event);
+
+        onScroll?.(event);
+    }, [onScroll]);
+
+    const scrollContentToOffset = (offset: number) => {
+        flatListRef.current?.scrollToOffset({
+            offset,
+            animated: false,
+        });
+    };
+
     const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {
         const onError = () => {
             updateImageState((imageState, i) => {
@@ -258,6 +289,7 @@ export default function ComicViewer(props: ComicViewerProps) {
                 onPress={onItemPress}
                 onReloadPress={onReloadPress}
                 url={item.url}
+                invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}
                 width={renderedDimensions[index]?.width ?? 0}
                 height={renderedDimensions[index]?.height ?? 0}
                 reloadButtonVisible={item.reloadButtonVisible}
@@ -274,17 +306,26 @@ export default function ComicViewer(props: ComicViewerProps) {
     }, []);
 
     return (
-        <FlatList
-            data={itemStates}
-            getItemLayout={getItemLayout}
-            initialNumToRender={initialNumToRender}
-            keyExtractor={keyExtractor}
-            onViewableItemsChanged={onViewableItemsChanged.current}
-            ref={flatListRef}
-            renderItem={renderItem}
-            viewabilityConfig={viewabilityConfig}
-            windowSize={windowSize}
-            {...otherProps}
-        />
+        <React.Fragment>
+            <FlatList
+                data={itemStates}
+                getItemLayout={getItemLayout}
+                initialNumToRender={initialNumToRender}
+                keyExtractor={keyExtractor}
+                onViewableItemsChanged={onViewableItemsChanged.current}
+                ref={flatListRef}
+                renderItem={renderItem}
+                viewabilityConfig={viewabilityConfig}
+                windowSize={windowSize}
+                onScroll={handleScroll}
+                {...otherProps}
+            />
+
+            <FastScroll
+                {...fastScrollOptions}
+                contentLength={totalHeight}
+                scrollContentToOffset={scrollContentToOffset}
+            />
+        </React.Fragment>
     );
 };

package/src/ComicViewer/ComicViewerProps.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
 import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { FastScrollOptions } from './FastScrollProps';
 
 export interface Dimension {
     width: number;
@@ -44,6 +45,12 @@ export default interface ComicViewerProps extends ComponentProps <{
      */
     intrinsicDimensions: Array<Dimension>;
 
+    /**
+     * Need invisible paddingTop viewer vertically expanded.
+     * @default 0
+     */
+    invisiblePaddingTop?: number;
+
     /**
      * Max value of contents image width size.
      * @default 720
@@ -61,6 +68,11 @@ export default interface ComicViewerProps extends ComponentProps <{
      */
     windowSize?: number;
 
+    /**
+     * Options for fastscroll component.
+     */
+    fastScrollOptions: FastScrollOptions;
+
     /**
      * Get contents urls by indexes.
      */

package/src/ComicViewer/FastScroll.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { ChevronDown, ChevronUp } from '@fountain-ui/icons';
+import { StyleSheet } from '@fountain-ui/core';
+import FastScrollProps from './FastScrollProps';
+import { offsetToPercentage, percentageToOffset } from './util';
+
+const styles = StyleSheet.create({
+    indicator: {
+        width: 24,
+        height: 40,
+        backgroundColor: '#767676',
+        flexDirection: 'column',
+        alignItems: 'center',
+        borderRadius: 4,
+    },
+    view: { position: 'absolute' },
+});
+
+const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
+    const {
+        absolutePosition,
+        additionalLength = 0,
+        contentLength,
+        movementRange,
+        scrollContentToOffset,
+        visibleDurations = { hideMillis: 200, showMillis: 350 },
+    } = props;
+
+    const lastIndicatorOffset = useSharedValue(0);
+    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);
+
+    const isIndicatorDragging = useRef(false);
+
+    const indicatorOpacity = useSharedValue(1);
+    const [visible, setVisible] = useState(true);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: indicatorOffset.value }],
+        opacity: indicatorOpacity.value,
+    }));
+
+    const totalContentLength = contentLength + additionalLength;
+
+    const onContentScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        if (isIndicatorDragging.current === false) {
+            const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);
+            const offset = percentageToOffset(contentPercentage, movementRange);
+
+            if (offset < 0 || indicatorOffset.value < 0) {
+                lastIndicatorOffset.value = 0;
+                indicatorOffset.value = 0;
+                return;
+            }
+
+            if (offset > movementRange || indicatorOffset.value > movementRange) {
+                lastIndicatorOffset.value = movementRange;
+                indicatorOffset.value = movementRange;
+                return;
+            }
+
+            lastIndicatorOffset.value = offset;
+        } else {
+            setVisible(true);
+        }
+    };
+
+    const getIsIndicatorDragging = () => isIndicatorDragging.current;
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            getIsIndicatorDragging,
+            onContentScroll,
+            setVisible,
+        }),
+        [],
+    );
+
+    const handleUpdate = () => {
+        const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);
+        const offset = percentageToOffset(contentPercentage, totalContentLength);
+
+        scrollContentToOffset(offset);
+    };
+
+    const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;
+
+    const pan = Gesture.Pan()
+        .onBegin((e) => {
+            indicatorOffset.value = lastIndicatorOffset.value;
+            runOnJS(setIsIndicatorDragging)(true);
+        })
+        .onUpdate((e) => {
+            if (indicatorOffset.value <= 0 && e.translationY < 0) {
+                indicatorOffset.value = 0;
+                return;
+            }
+
+            if (indicatorOffset.value >= movementRange && e.translationY > 0) {
+                indicatorOffset.value = movementRange;
+                return;
+            }
+
+            indicatorOffset.value = lastIndicatorOffset.value + e.translationY;
+
+            runOnJS(handleUpdate)();
+        })
+        .onFinalize((e) => {
+            lastIndicatorOffset.value = indicatorOffset.value;
+            runOnJS(setIsIndicatorDragging)(false);
+        });
+
+    const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));
+
+    const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));
+
+    useEffect(() => {
+        if (visible) {
+            indicatorOffset.value = lastIndicatorOffset.value;
+            show();
+        } else {
+            hide();
+        }
+    }, [visible]);
+
+    return (
+        <View
+            style={[
+                { height: movementRange },
+                styles.view,
+                absolutePosition,
+            ]}
+        >
+            <GestureDetector gesture={pan}>
+                <Animated.View style={[
+                    animatedStyle,
+                    styles.indicator,
+                ]}>
+                    <ChevronUp
+                        fill={'#ededed'}
+                        height={20}
+                        width={20}
+                    />
+                    <ChevronDown
+                        fill={'#ededed'}
+                        height={20}
+                        width={20}
+                    />
+                </Animated.View>
+            </GestureDetector>
+        </View>
+    );
+});
+
+export default FastScroll;

package/src/ComicViewer/FastScrollProps.ts

@@ -0,0 +1,83 @@
+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;
+
+    /**
+     * Scroll content to offset appropriate for the indicator location.
+     * @param offset Content offset.
+     */
+    scrollContentToOffset: (offset: number) => void;
+}
+
+export default FastScrollProps;

package/src/ComicViewer/ViewerItem.tsx

@@ -15,6 +15,11 @@ export interface ViewerItemProps {
      */
     height: number;
 
+    /**
+     * Need invisible paddingTop viewer vertically expanded.
+     */
+    invisiblePaddingTop: number;
+
     /**
      * Image sourceUrl for displaying.
      */
@@ -52,6 +57,7 @@ export default function ViewerItem(props: ViewerItemProps) {
         height,
         url,
         width,
+        invisiblePaddingTop,
         onError,
         onLoad,
         onPress,
@@ -63,9 +69,10 @@ export default function ViewerItem(props: ViewerItemProps) {
         view: {
             height,
             width: '100%',
+            paddingTop: invisiblePaddingTop,
         },
         image: {
-            height,
+            height: height - invisiblePaddingTop,
             width,
         },
     };

package/src/ComicViewer/index.ts

@@ -1,3 +1,9 @@
 export { default } from './ComicViewer';
 export type { Dimension, 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;
+};