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

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