@draftbit/core 46.11.1-a58bd6.2 → 46.11.1-c64d65.2

package/src/components/BottomSheet/BottomSheetComponent.js

@@ -1,437 +0,0 @@
-/**
- * Slightly modfied version as taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet
- * Main previously breaking change:
- * const node = this.props.innerRef.current?.getNode() ==> const node = this.props.innerRef.current as any
- */
-/**
- * Copyright (c) 2020 Raul Gomez Acuna
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import React, { Component } from "react";
-import { Dimensions, FlatList, Platform, ScrollView, SectionList, StyleSheet, View, } from "react-native";
-import Animated, { abs, add, and, call, Clock, clockRunning, cond, Easing as EasingDeprecated, 
-// @ts-ignore: this property is only present in Reanimated 2
-EasingNode, eq, event, Extrapolate, greaterOrEq, greaterThan, multiply, not, onChange, or, set, startClock, stopClock, sub, spring, timing, Value, } from "react-native-reanimated";
-import { NativeViewGestureHandler, PanGestureHandler, State as GestureState, TapGestureHandler, } from "react-native-gesture-handler";
-const { 
-//@ts-ignore
-interpolate: interpolateDeprecated, 
-// @ts-ignore: this property is only present in Reanimated 2
-interpolateNode, } = Animated;
-const interpolate = interpolateNode !== null && interpolateNode !== void 0 ? interpolateNode : interpolateDeprecated;
-//@ts-ignore
-const Easing = EasingNode !== null && EasingNode !== void 0 ? EasingNode : EasingDeprecated;
-const FlatListComponentType = "FlatList";
-const ScrollViewComponentType = "ScrollView";
-const SectionListComponentType = "SectionList";
-const TimingAnimationType = "timing";
-const SpringAnimationType = "spring";
-const DEFAULT_SPRING_PARAMS = {
-    damping: 50,
-    mass: 0.3,
-    stiffness: 121.6,
-    overshootClamping: true,
-    restSpeedThreshold: 0.3,
-    restDisplacementThreshold: 0.3,
-};
-const { height: windowHeight } = Dimensions.get("window");
-const IOS_NORMAL_DECELERATION_RATE = 0.998;
-const ANDROID_NORMAL_DECELERATION_RATE = 0.985;
-const DEFAULT_ANIMATION_DURATION = 250;
-const DEFAULT_EASING = Easing.inOut(Easing.linear);
-const imperativeScrollOptions = {
-    [FlatListComponentType]: {
-        method: "scrollToIndex",
-        args: {
-            index: 0,
-            viewPosition: 0,
-            viewOffset: 1000,
-            animated: true,
-        },
-    },
-    [ScrollViewComponentType]: {
-        method: "scrollTo",
-        args: {
-            x: 0,
-            y: 0,
-            animated: true,
-        },
-    },
-    [SectionListComponentType]: {
-        method: "scrollToLocation",
-        args: {
-            itemIndex: 0,
-            sectionIndex: 0,
-            viewPosition: 0,
-            viewOffset: 1000,
-            animated: true,
-        },
-    },
-};
-export class ScrollBottomSheet extends Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        /**
-         * Gesture Handler references
-         */
-        this.masterDrawer = React.createRef();
-        this.drawerHandleRef = React.createRef();
-        this.drawerContentRef = React.createRef();
-        this.scrollComponentRef = React.createRef();
-        /**
-         * Flag to indicate imperative snapping
-         */
-        this.isManuallySetValue = new Value(0);
-        /**
-         * Manual snapping amount
-         */
-        this.manualYOffset = new Value(0);
-        this.prevSnapIndex = -1;
-        this.dragY = new Value(0);
-        this.prevDragY = new Value(0);
-        this.tempDestSnapPoint = new Value(0);
-        this.isAndroid = new Value(Number(Platform.OS === "android"));
-        this.animationClock = new Clock();
-        this.animationPosition = new Value(0);
-        this.animationFinished = new Value(0);
-        this.animationFrameTime = new Value(0);
-        this.velocityY = new Value(0);
-        this.lastStartScrollY = new Value(0);
-        this.destSnapPoint = new Value(0);
-        this.dragWithHandle = new Value(0);
-        this.scrollUpAndPullDown = new Value(0);
-        this.convertPercentageToDp = (str) => (Number(str.split("%")[0]) * (windowHeight - this.props.topInset)) / 100;
-        this.getNormalisedSnapPoints = () => {
-            return this.props.snapPoints.map((p) => {
-                if (typeof p === "string") {
-                    return this.convertPercentageToDp(p);
-                }
-                else if (typeof p === "number") {
-                    return p;
-                }
-                throw new Error(`Invalid type for value ${p}: ${typeof p}. It should be either a percentage string or a number`);
-            });
-        };
-        this.getScrollComponent = () => {
-            switch (this.props.componentType) {
-                case "FlatList":
-                    return FlatList;
-                case "ScrollView":
-                    return ScrollView;
-                case "SectionList":
-                    return SectionList;
-                default:
-                    throw new Error("Component type not supported: it should be one of `FlatList`, `ScrollView` or `SectionList`");
-            }
-        };
-        this.snapTo = (index) => {
-            const snapPoints = this.getNormalisedSnapPoints();
-            this.isManuallySetValue.setValue(1);
-            this.manualYOffset.setValue(snapPoints[index]);
-            this.nextSnapIndex.setValue(index);
-        };
-        const { initialSnapIndex, animationType } = props;
-        const animationDriver = animationType === "timing" ? 0 : 1;
-        const animationDuration = (props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.duration)) ||
-            DEFAULT_ANIMATION_DURATION;
-        const ScrollComponent = this.getScrollComponent();
-        // @ts-ignore
-        this.scrollComponent = Animated.createAnimatedComponent(ScrollComponent);
-        const snapPoints = this.getNormalisedSnapPoints();
-        const openPosition = snapPoints[0];
-        const closedPosition = this.props.enableOverScroll
-            ? windowHeight
-            : snapPoints[snapPoints.length - 1];
-        const initialSnap = snapPoints[initialSnapIndex];
-        this.nextSnapIndex = new Value(initialSnapIndex);
-        const initialDecelerationRate = Platform.select({
-            android: props.initialSnapIndex === 0 ? ANDROID_NORMAL_DECELERATION_RATE : 0,
-            ios: IOS_NORMAL_DECELERATION_RATE,
-        });
-        this.decelerationRate = new Value(initialDecelerationRate);
-        //@ts-ignore
-        const handleGestureState = new Value(-1);
-        //@ts-ignore
-        const handleOldGestureState = new Value(-1);
-        //@ts-ignore
-        const drawerGestureState = new Value(-1);
-        //@ts-ignore
-        const drawerOldGestureState = new Value(-1);
-        const lastSnapInRange = new Value(1);
-        this.prevTranslateYOffset = new Value(initialSnap);
-        this.translationY = new Value(initialSnap);
-        this.lastSnap = new Value(initialSnap);
-        this.onHandleGestureEvent = event([
-            {
-                nativeEvent: {
-                    translationY: this.dragY,
-                    oldState: handleOldGestureState,
-                    state: handleGestureState,
-                    velocityY: this.velocityY,
-                },
-            },
-        ]);
-        this.onDrawerGestureEvent = event([
-            {
-                nativeEvent: {
-                    translationY: this.dragY,
-                    oldState: drawerOldGestureState,
-                    state: drawerGestureState,
-                    velocityY: this.velocityY,
-                },
-            },
-        ]);
-        this.onScrollBeginDrag = event([
-            {
-                nativeEvent: {
-                    contentOffset: { y: this.lastStartScrollY },
-                },
-            },
-        ]);
-        const didHandleGestureBegin = eq(handleGestureState, GestureState.ACTIVE);
-        const isAnimationInterrupted = and(or(eq(handleGestureState, GestureState.BEGAN), eq(drawerGestureState, GestureState.BEGAN), and(eq(this.isAndroid, 0), eq(animationDriver, 1), or(eq(drawerGestureState, GestureState.ACTIVE), eq(handleGestureState, GestureState.ACTIVE)))), clockRunning(this.animationClock));
-        this.didGestureFinish = or(and(eq(handleOldGestureState, GestureState.ACTIVE), eq(handleGestureState, GestureState.END)), and(eq(drawerOldGestureState, GestureState.ACTIVE), eq(drawerGestureState, GestureState.END)));
-        // Function that determines if the last snap point is in the range {snapPoints}
-        // In the case of interruptions in the middle of an animation, we'll get
-        // lastSnap values outside the range
-        const isLastSnapPointInRange = (i = 0) => i === snapPoints.length
-            ? lastSnapInRange
-            : cond(eq(this.lastSnap, snapPoints[i]), [set(lastSnapInRange, 1)], isLastSnapPointInRange(i + 1));
-        const scrollY = [
-            set(lastSnapInRange, 0),
-            isLastSnapPointInRange(),
-            cond(or(didHandleGestureBegin, and(this.isManuallySetValue, not(eq(this.manualYOffset, snapPoints[0])))), [set(this.dragWithHandle, 1), 0]),
-            cond(
-            // This is to account for a continuous scroll on the drawer from a snap point
-            // Different than top, bringing the drawer to the top position, so that if we
-            // change scroll direction without releasing the gesture, it doesn't pull down the drawer again
-            and(eq(this.dragWithHandle, 1), greaterThan(snapPoints[0], add(this.lastSnap, this.dragY)), and(not(eq(this.lastSnap, snapPoints[0])), lastSnapInRange)), [
-                set(this.lastSnap, snapPoints[0]),
-                set(this.dragWithHandle, 0),
-                this.lastStartScrollY,
-            ], cond(eq(this.dragWithHandle, 1), 0, this.lastStartScrollY)),
-        ];
-        this.didScrollUpAndPullDown = cond(and(greaterOrEq(this.dragY, this.lastStartScrollY), greaterThan(this.lastStartScrollY, 0)), set(this.scrollUpAndPullDown, 1));
-        this.setTranslationY = cond(and(not(this.dragWithHandle), not(greaterOrEq(this.dragY, this.lastStartScrollY))), set(this.translationY, sub(this.dragY, this.lastStartScrollY)), set(this.translationY, this.dragY));
-        this.extraOffset = cond(eq(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0);
-        const endOffsetY = add(this.lastSnap, this.translationY, multiply(1 - props.friction, this.velocityY));
-        this.calculateNextSnapPoint = (i = 0) => i === snapPoints.length
-            ? this.tempDestSnapPoint
-            : cond(greaterThan(abs(sub(this.tempDestSnapPoint, endOffsetY)), abs(sub(add(snapPoints[i], this.extraOffset), endOffsetY))), [
-                set(this.tempDestSnapPoint, add(snapPoints[i], this.extraOffset)),
-                set(this.nextSnapIndex, i),
-                this.calculateNextSnapPoint(i + 1),
-            ], this.calculateNextSnapPoint(i + 1));
-        const runAnimation = ({ clock, from, to, position, finished, velocity, frameTime, }) => {
-            var _a;
-            const state = {
-                finished,
-                velocity: new Value(0),
-                position,
-                time: new Value(0),
-                frameTime,
-            };
-            const timingConfig = {
-                duration: animationDuration,
-                easing: (props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.easing)) ||
-                    DEFAULT_EASING,
-                toValue: new Value(0),
-            };
-            const springConfig = {
-                ...DEFAULT_SPRING_PARAMS,
-                ...((props.animationType === "spring" && props.animationConfig) || {}),
-                toValue: new Value(0),
-            };
-            return [
-                cond(and(not(clockRunning(clock)), not(eq(finished, 1))), [
-                    // If the clock isn't running, we reset all the animation params and start the clock
-                    set(state.finished, 0),
-                    set(state.velocity, velocity),
-                    set(state.time, 0),
-                    set(state.position, from),
-                    set(state.frameTime, 0),
-                    set(timingConfig.toValue, to),
-                    set(springConfig.toValue, to),
-                    startClock(clock),
-                ]),
-                // We run the step here that is going to update position
-                cond(eq(animationDriver, 0), 
-                //@ts-ignore
-                timing(clock, state, timingConfig), spring(clock, state, springConfig)),
-                cond(state.finished, [
-                    call([this.nextSnapIndex], ([value]) => {
-                        var _a, _b;
-                        if (value !== this.prevSnapIndex) {
-                            (_b = (_a = this.props).onSettle) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                        }
-                        this.prevSnapIndex = value;
-                    }),
-                    // Resetting appropriate values
-                    set(drawerOldGestureState, GestureState.END),
-                    set(handleOldGestureState, GestureState.END),
-                    set(this.prevTranslateYOffset, state.position),
-                    cond(eq(this.scrollUpAndPullDown, 1), [
-                        set(this.prevTranslateYOffset, sub(this.prevTranslateYOffset, this.lastStartScrollY)),
-                        set(this.lastStartScrollY, 0),
-                        set(this.scrollUpAndPullDown, 0),
-                    ]),
-                    cond(eq(this.destSnapPoint, snapPoints[0]), [
-                        set(this.dragWithHandle, 0),
-                    ]),
-                    set(this.isManuallySetValue, 0),
-                    set(this.manualYOffset, 0),
-                    stopClock(clock),
-                    this.prevTranslateYOffset,
-                ], 
-                // We made the block return the updated position,
-                state.position),
-            ];
-        };
-        const translateYOffset = cond(isAnimationInterrupted, [
-            // set(prevTranslateYOffset, animationPosition) should only run if we are
-            // interrupting an animation when the drawer is currently in a different
-            // position than the top
-            cond(or(this.dragWithHandle, greaterOrEq(abs(this.prevDragY), this.lastStartScrollY)), set(this.prevTranslateYOffset, this.animationPosition)),
-            set(this.animationFinished, 1),
-            set(this.translationY, 0),
-            // Resetting appropriate values
-            set(drawerOldGestureState, GestureState.END),
-            set(handleOldGestureState, GestureState.END),
-            // By forcing that frameTime exceeds duration, it has the effect of stopping the animation
-            set(this.animationFrameTime, add(animationDuration, 1000)),
-            set(this.velocityY, 0),
-            stopClock(this.animationClock),
-            this.prevTranslateYOffset,
-        ], cond(or(this.didGestureFinish, this.isManuallySetValue, clockRunning(this.animationClock)), [
-            runAnimation({
-                clock: this.animationClock,
-                from: cond(this.isManuallySetValue, this.prevTranslateYOffset, add(this.prevTranslateYOffset, this.translationY)),
-                to: this.destSnapPoint,
-                position: this.animationPosition,
-                finished: this.animationFinished,
-                frameTime: this.animationFrameTime,
-                velocity: this.velocityY,
-            }),
-        ], [
-            set(this.animationFrameTime, 0),
-            set(this.animationFinished, 0),
-            // @ts-ignore
-            this.prevTranslateYOffset,
-        ]));
-        this.translateY = interpolate(add(translateYOffset, this.dragY, multiply(scrollY, -1)), {
-            inputRange: [openPosition, closedPosition],
-            outputRange: [openPosition, closedPosition],
-            extrapolate: Extrapolate.CLAMP,
-        });
-        this.position = interpolate(this.translateY, {
-            inputRange: [openPosition, snapPoints[snapPoints.length - 1]],
-            outputRange: [1, 0],
-            extrapolate: Extrapolate.CLAMP,
-        });
-    }
-    render() {
-        const { renderHandle, initialSnapIndex, containerStyle, ...rest } = this.props;
-        const AnimatedScrollableComponent = this.scrollComponent;
-        const normalisedSnapPoints = this.getNormalisedSnapPoints();
-        const initialSnap = normalisedSnapPoints[initialSnapIndex];
-        const Content = (React.createElement(Animated.View, { style: [
-                StyleSheet.absoluteFillObject,
-                containerStyle,
-                // @ts-ignore
-                {
-                    transform: [{ translateY: this.translateY }],
-                },
-            ] },
-            React.createElement(PanGestureHandler, { ref: this.drawerHandleRef, shouldCancelWhenOutside: false, simultaneousHandlers: this.masterDrawer, onGestureEvent: this.onHandleGestureEvent, onHandlerStateChange: this.onHandleGestureEvent },
-                React.createElement(Animated.View, null, renderHandle())),
-            React.createElement(PanGestureHandler, { ref: this.drawerContentRef, simultaneousHandlers: [this.scrollComponentRef, this.masterDrawer], shouldCancelWhenOutside: false, onGestureEvent: this.onDrawerGestureEvent, onHandlerStateChange: this.onDrawerGestureEvent },
-                React.createElement(Animated.View, { style: styles.container },
-                    React.createElement(NativeViewGestureHandler, { ref: this.scrollComponentRef, waitFor: this.masterDrawer, simultaneousHandlers: this.drawerContentRef },
-                        React.createElement(AnimatedScrollableComponent, { overScrollMode: "never", bounces: false, ...rest, ref: this.props.innerRef, 
-                            // @ts-ignore
-                            decelerationRate: this.decelerationRate, onScrollBeginDrag: this.onScrollBeginDrag, scrollEventThrottle: 1, contentContainerStyle: [
-                                rest.contentContainerStyle,
-                                { paddingBottom: this.getNormalisedSnapPoints()[0] },
-                            ] })))),
-            this.props.animatedPosition && (React.createElement(Animated.Code, { exec: onChange(this.position, set(this.props.animatedPosition, this.position)) })),
-            React.createElement(Animated.Code, { exec: onChange(this.dragY, cond(not(eq(this.dragY, 0)), set(this.prevDragY, this.dragY))) }),
-            React.createElement(Animated.Code, { exec: onChange(this.didGestureFinish, cond(this.didGestureFinish, [
-                    this.didScrollUpAndPullDown,
-                    this.setTranslationY,
-                    set(this.tempDestSnapPoint, add(normalisedSnapPoints[0], this.extraOffset)),
-                    set(this.nextSnapIndex, 0),
-                    set(this.destSnapPoint, this.calculateNextSnapPoint()),
-                    cond(and(greaterThan(this.dragY, this.lastStartScrollY), this.isAndroid, not(this.dragWithHandle)), call([], () => {
-                        var _a, _b;
-                        // This prevents the scroll glide from happening on Android when pulling down with inertia.
-                        // It's not perfect, but does the job for now
-                        const { method, args } = imperativeScrollOptions[this.props.componentType];
-                        // @ts-ignore
-                        const node = this.props.innerRef.current;
-                        if (node &&
-                            node[method] &&
-                            ((this.props.componentType === "FlatList" &&
-                                (((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0) ||
-                                (this.props.componentType === "SectionList" &&
-                                    this.props.sections.length > 0) ||
-                                this.props.componentType === "ScrollView")) {
-                            node[method](args);
-                        }
-                    })),
-                    set(this.dragY, 0),
-                    set(this.velocityY, 0),
-                    set(this.lastSnap, sub(this.destSnapPoint, cond(eq(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0))),
-                    call([this.lastSnap], ([value]) => {
-                        var _a, _b;
-                        // This is the TapGHandler trick
-                        // @ts-ignore
-                        (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
-                            maxDeltaY: value - this.getNormalisedSnapPoints()[0],
-                        });
-                    }),
-                    set(this.decelerationRate, cond(eq(this.isAndroid, 1), cond(eq(this.lastSnap, normalisedSnapPoints[0]), ANDROID_NORMAL_DECELERATION_RATE, 0), IOS_NORMAL_DECELERATION_RATE)),
-                ])) }),
-            React.createElement(Animated.Code, { exec: onChange(this.isManuallySetValue, [
-                    cond(this.isManuallySetValue, [
-                        set(this.destSnapPoint, this.manualYOffset),
-                        set(this.animationFinished, 0),
-                        set(this.lastSnap, this.manualYOffset),
-                        call([this.lastSnap], ([value]) => {
-                            var _a, _b;
-                            // This is the TapGHandler trick
-                            // @ts-ignore
-                            (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
-                                maxDeltaY: value - this.getNormalisedSnapPoints()[0],
-                            });
-                        }),
-                    ], [set(this.nextSnapIndex, 0)]),
-                ]) })));
-        // On Android, having an intermediary view with pointerEvents="box-none", breaks the
-        // waitFor logic
-        if (Platform.OS === "android") {
-            return (React.createElement(TapGestureHandler, { maxDurationMs: 100000, ref: this.masterDrawer, maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0], shouldCancelWhenOutside: false }, Content));
-        }
-        // On iOS, We need to wrap the content on a view with PointerEvents box-none
-        // So that we can start scrolling automatically when reaching the top without
-        // Stopping the gesture
-        return (React.createElement(TapGestureHandler, { maxDurationMs: 100000, ref: this.masterDrawer, maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0] },
-            React.createElement(View, { style: StyleSheet.absoluteFillObject, pointerEvents: "box-none" }, Content)));
-    }
-}
-ScrollBottomSheet.defaultProps = {
-    topInset: 0,
-    friction: 0.95,
-    animationType: "timing",
-    innerRef: React.createRef(),
-    enableOverScroll: false,
-};
-export default ScrollBottomSheet;
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-});