@fountain-ui/lab 2.0.0-beta.45 → 2.0.0-beta.47

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);
@@ -56,6 +57,7 @@ export default function ComicViewer(props: ComicViewerProps) {
     const {
         debounceMillis = 100,
         autoHandleErrorCount = 3,
+        fastScrollOptions,
         getUrlByIndex,
         initialNumToRender = 1,
         initialScrollPercentage = 0,
@@ -63,12 +65,17 @@ export default function ComicViewer(props: ComicViewerProps) {
         intrinsicDimensions,
         maxContentWidth = MAXIMUM_WIDTH,
         onItemPress,
+        onScroll,
+        onError,
+        onReloadPress,
         viewportWidth,
         invisiblePaddingTop = 0,
         windowSize = 3,
         ...otherProps
     } = props;
 
+    const fastScrollRef = fastScrollOptions?.ref;
+
     const flatListRef = useRef<FlatList>(null);
 
     const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);
@@ -210,8 +217,23 @@ export default function ComicViewer(props: ComicViewerProps) {
         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 = () => {
+        const handleError = () => {
+            onError && onError();
+
             updateImageState((imageState, i) => {
                 const urlState = imageState.urlState;
 
@@ -239,7 +261,9 @@ export default function ComicViewer(props: ComicViewerProps) {
             }
         };
 
-        const onReloadPress = () => {
+        const handleReloadPress = () => {
+            onReloadPress && onReloadPress();
+
             const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
             if (index >= startIndex || index < endIndex) {
                 loadUrlByIndex([index]);
@@ -266,10 +290,10 @@ export default function ComicViewer(props: ComicViewerProps) {
 
         return (
             <ViewerItem
-                onError={onError}
+                onError={handleError}
                 onLoad={onLoad}
                 onPress={onItemPress}
-                onReloadPress={onReloadPress}
+                onReloadPress={handleReloadPress}
                 url={item.url}
                 invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}
                 width={renderedDimensions[index]?.width ?? 0}
@@ -288,17 +312,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;
@@ -67,6 +68,11 @@ export default interface ComicViewerProps extends ComponentProps <{
      */
     windowSize?: number;
 
+    /**
+     * Options for fastscroll component.
+     */
+    fastScrollOptions: FastScrollOptions;
+
     /**
      * Get contents urls by indexes.
      */
@@ -83,6 +89,16 @@ export default interface ComicViewerProps extends ComponentProps <{
      */
     onItemPress?: () => void;
 
+    /**
+     * Handle image loading fail event.
+     */
+    onError?: () => void;
+
+    /**
+     * Handle reload button press event.
+     */
+    onReloadPress?: () => void;
+
     /**
      * Component for comic viewer footer.
      */

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/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;
+};

package/yarn-error.log

@@ -0,0 +1,103 @@
+Arguments: 
+  /Users/chan/.nvm/versions/node/v16.16.0/bin/node /usr/local/Cellar/yarn/1.22.19/libexec/bin/yarn.js add react-native-device-info
+
+PATH: 
+  /Users/chan/.nvm/versions/node/v16.16.0/bin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Library/Java/JavaVirtualMachines/jdk-12.0.2.jdk/Contents/Home/bin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/tools:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/platform-tools:/Users/chan/library/android/sdk/tools:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Library/Java/JavaVirtualMachines/jdk-12.0.2.jdk/Contents/Home/bin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/tools:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/platform-tools:/Users/hyungchanyuk/library/android/sdk/platform-tools:/Users/chan/WebstormProjects/tappytoon/bin/git-ext
+
+Yarn version: 
+  1.22.19
+
+Node version: 
+  16.16.0
+
+Platform: 
+  darwin x64
+
+Trace: 
+  SyntaxError: /Users/chan/WebstormProjects/tappytoon/nodejs/fountain-ui/packages/fountain-ui-lab/package.json: Unexpected token } in JSON at position 681
+      at JSON.parse (<anonymous>)
+      at /usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:1629:59
+      at Generator.next (<anonymous>)
+      at step (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:310:30)
+      at /usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:321:13
+
+npm manifest: 
+  {
+    "name": "@fountain-ui/lab",
+    "version": "2.0.0-beta.45",
+    "private": false,
+    "author": "Fountain-UI Team",
+    "description": "Incubator for Fountain-UI React components.",
+    "license": "MIT",
+    "main": "./build/commonjs/index.js",
+    "module": "./build/module/index.js",
+    "react-native": "./src/index.ts",
+    "source": "./src/index.ts",
+    "types": "./build/typescript/index.d.ts",
+    "scripts": {
+      "clean": "rimraf build",
+      "prepare": "bob build"
+    },
+    "dependencies": {
+      "@emotion/react": "^11.10.0",
+      "@emotion/styled": "^11.10.0",
+      "@fountain-ui/icons": "^2.0.0-beta.9",
+      "@fountain-ui/utils": "^2.0.0-beta.4",
+      "react-native-calendars": "1.1267.0",
+    },
+    "peerDependencies": {
+      "@fountain-ui/core": "^2.0.0-beta.3",
+      "@gorhom/bottom-sheet": "^4.5.0",
+      "date-fns": "^2.0.0",
+      "react": "^16.8.0 || ^17.0.0",
+      "react-dom": "^16.8.0 || ^17.0.0",
+      "react-native": "^0.63.0",
+      "react-native-gesture-handler": "^2.0.0",
+      "react-native-pager-view": "^4.0.0"
+    },
+    "peerDependenciesMeta": {
+      "@gorhom/bottom-sheet": {
+        "optional": true
+      },
+      "react-dom": {
+        "optional": true
+      },
+      "react-native-pager-view": {
+        "optional": true
+      }
+    },
+    "devDependencies": {
+      "@gorhom/bottom-sheet": "^4.5.0",
+      "date-fns": "^2.23.0",
+      "react-native-pager-view": "^4.2.4",
+      "react-native-safe-area-context": "^4.0.0"
+    },
+    "react-native-builder-bob": {
+      "source": "./src",
+      "output": "./build",
+      "targets": [
+        "commonjs",
+        "module",
+        [
+          "typescript",
+          {
+            "project": "tsconfig.build.json",
+            "tsc": "../../node_modules/.bin/tsc"
+          }
+        ]
+      ],
+      "files": [
+        "./src",
+        "./build"
+      ]
+    },
+    "publishConfig": {
+      "access": "public"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile