@draftbit/core 47.2.13-f38301.2 → 47.2.14-9580d7.2

package/lib/src/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { StyleProp, ViewStyle, ScrollViewProps } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+declare type SnapPosition = "top" | "middle" | "bottom";
+export interface BottomSheetProps extends ScrollViewProps {
+    topSnapPosition?: string | number;
+    middleSnapPosition?: string | number;
+    bottomSnapPosition?: string | number;
+    snapPoints: (string | number)[];
+    initialSnapIndex?: number;
+    initialSnapPosition: SnapPosition;
+    showHandle?: boolean;
+    handleColor?: string;
+    topBorderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    onSettle?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+    theme: Theme;
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<BottomSheetProps>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<BottomSheetProps>> & React.FC<React.PropsWithChildren<BottomSheetProps>>, {}>;
+export default _default;

package/lib/src/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { StyleSheet, View, } from "react-native";
+import BottomSheetComponent from "./BottomSheetComponent";
+import { withTheme } from "../../theming";
+const BottomSheet = ({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", showHandle = true, handleColor = theme.colors.divider, topBorderRadius = 20, borderWidth = 1, borderColor = theme.colors.divider, onSettle, style, children, ...rest }) => {
+    const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background;
+    const snapPoints = snapPointsProp || [
+        topSnapPosition,
+        middleSnapPosition,
+        bottomSnapPosition,
+    ];
+    const getSnapIndexFromPosition = (position) => {
+        switch (position) {
+            case "top":
+                return 0;
+            case "middle":
+                return 1;
+            case "bottom":
+                return 2;
+        }
+    };
+    return (React.createElement(View, { style: styles.parentContainer, pointerEvents: "box-none" },
+        React.createElement(BottomSheetComponent, { componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: initialSnapIndex !== null && initialSnapIndex !== void 0 ? initialSnapIndex : getSnapIndexFromPosition(initialSnapPosition), renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
+                    styles.handleContainer,
+                    {
+                        backgroundColor,
+                        borderTopLeftRadius: topBorderRadius,
+                        borderTopRightRadius: topBorderRadius,
+                    },
+                ] },
+                React.createElement(View, { style: [styles.handle, { backgroundColor: handleColor }] }))))), contentContainerStyle: [styles.contentContainerStyle, style], containerStyle: StyleSheet.flatten([
+                styles.containerStyle,
+                {
+                    backgroundColor,
+                    borderTopLeftRadius: topBorderRadius,
+                    borderTopRightRadius: topBorderRadius,
+                    borderWidth,
+                    borderColor,
+                },
+            ]), onSettle: onSettle, ...rest }, children)));
+};
+const styles = StyleSheet.create({
+    //Render on top of everything
+    parentContainer: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 10,
+        overflow: "hidden",
+    },
+    contentContainerStyle: {
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+    },
+    containerStyle: {
+        flex: 1,
+        overflow: "hidden",
+    },
+    handleContainer: {
+        alignItems: "center",
+        paddingVertical: 20,
+    },
+    handle: {
+        width: 40,
+        height: 2,
+        borderRadius: 4,
+    },
+});
+export default withTheme(BottomSheet);
+//# sourceMappingURL=BottomSheet.js.map

package/lib/src/components/BottomSheet/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"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"}

package/lib/src/components/BottomSheet/BottomSheetComponent.d.ts

@@ -0,0 +1,169 @@
+/**
+ * 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, RefObject } from "react";
+import { FlatList, FlatListProps, ScrollView, ScrollViewProps, SectionList, SectionListProps, ViewStyle } from "react-native";
+import Animated from "react-native-reanimated";
+import { Assign } from "utility-types";
+declare const FlatListComponentType: "FlatList";
+declare const ScrollViewComponentType: "ScrollView";
+declare const SectionListComponentType: "SectionList";
+declare const TimingAnimationType: "timing";
+declare const SpringAnimationType: "spring";
+declare type AnimatedScrollableComponent = FlatList | ScrollView | SectionList;
+declare type FlatListOption<T> = Assign<{
+    componentType: typeof FlatListComponentType;
+}, FlatListProps<T>>;
+declare type ScrollViewOption = Assign<{
+    componentType: typeof ScrollViewComponentType;
+}, ScrollViewProps>;
+declare type SectionListOption<T> = Assign<{
+    componentType: typeof SectionListComponentType;
+}, SectionListProps<T>>;
+declare type CommonProps = {
+    /**
+     * Array of numbers that indicate the different resting positions of the bottom sheet (in dp or %), starting from the top.
+     * If a percentage is used, that would translate to the relative amount of the total window height.
+     * For instance, if 50% is used, that'd be windowHeight * 0.5. If you wanna take into account safe areas during
+     * the calculation, such as status bars and notches, please use 'topInset' prop
+     */
+    snapPoints: Array<string | number>;
+    /**
+     * Index that references the initial resting position of the drawer, starting from the top
+     */
+    initialSnapIndex: number;
+    /**
+     * Render prop for the handle
+     */
+    renderHandle: () => React.ReactNode;
+    /**
+     * Callback that is executed right after the drawer settles on one of the snapping points.
+     * The new index is provided on the callback
+     * @param index
+     */
+    onSettle?: (index: number) => void;
+    /**
+     * Animated value that tracks the position of the drawer, being:
+     * 0 => closed
+     * 1 => fully opened
+     */
+    animatedPosition?: Animated.Value<number>;
+    /**
+     * This value is useful if you want to take into consideration safe area insets
+     * when applying percentages for snapping points. We recommend using react-native-safe-area-context
+     * library for that.
+     * @see https://github.com/th3rdwave/react-native-safe-area-context#usage, insets.top
+     */
+    topInset: number;
+    /**
+     * Reference to FlatList, ScrollView or SectionList in order to execute its imperative methods.
+     */
+    innerRef: RefObject<FlatList | ScrollView | SectionList>;
+    containerStyle?: Animated.AnimateStyle<ViewStyle>;
+    friction: number;
+    enableOverScroll: boolean;
+};
+declare type TimingAnimationProps = {
+    animationType: typeof TimingAnimationType;
+    /**
+     * Configuration for the timing reanimated function
+     */
+    animationConfig?: Partial<Animated.TimingConfig>;
+};
+declare type SpringAnimationProps = {
+    animationType: typeof SpringAnimationType;
+    /**
+     * Configuration for the spring reanimated function
+     */
+    animationConfig?: Partial<Animated.SpringConfig>;
+};
+declare type Props<T> = CommonProps & (FlatListOption<T> | ScrollViewOption | SectionListOption<T>) & (TimingAnimationProps | SpringAnimationProps);
+export declare class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
+    static defaultProps: {
+        topInset: number;
+        friction: number;
+        animationType: string;
+        innerRef: React.RefObject<AnimatedScrollableComponent>;
+        enableOverScroll: boolean;
+    };
+    /**
+     * Gesture Handler references
+     */
+    private masterDrawer;
+    private drawerHandleRef;
+    private drawerContentRef;
+    private scrollComponentRef;
+    /**
+     * ScrollView prop
+     */
+    private onScrollBeginDrag;
+    /**
+     * Pan gesture handler events for drawer handle and content
+     */
+    private onHandleGestureEvent;
+    private onDrawerGestureEvent;
+    /**
+     * Main Animated Value that drives the top position of the UI drawer at any point in time
+     */
+    private translateY;
+    /**
+     * Animated value that keeps track of the position: 0 => closed, 1 => opened
+     */
+    private position;
+    /**
+     * Flag to indicate imperative snapping
+     */
+    private isManuallySetValue;
+    /**
+     * Manual snapping amount
+     */
+    private manualYOffset;
+    /**
+     * Keeps track of the current index
+     */
+    private nextSnapIndex;
+    /**
+     * Deceleration rate of the scroll component. This is used only on Android to
+     * compensate the unexpected glide it gets sometimes.
+     */
+    private decelerationRate;
+    private prevSnapIndex;
+    private dragY;
+    private prevDragY;
+    private tempDestSnapPoint;
+    private isAndroid;
+    private animationClock;
+    private animationPosition;
+    private animationFinished;
+    private animationFrameTime;
+    private velocityY;
+    private lastStartScrollY;
+    private prevTranslateYOffset;
+    private translationY;
+    private destSnapPoint;
+    private lastSnap;
+    private dragWithHandle;
+    private scrollUpAndPullDown;
+    private didGestureFinish;
+    private didScrollUpAndPullDown;
+    private setTranslationY;
+    private extraOffset;
+    private calculateNextSnapPoint;
+    private scrollComponent;
+    convertPercentageToDp: (str: string) => number;
+    constructor(props: Props<T>);
+    private getNormalisedSnapPoints;
+    private getScrollComponent;
+    snapTo: (index: number) => void;
+    render(): JSX.Element;
+}
+export default ScrollBottomSheet;