@draftbit/core 46.12.1-07ad46.2 → 46.12.1-2b2e2a.2

package/src/components/BottomSheet/BottomSheet.js

@@ -2,10 +2,25 @@ import React from "react";
 import { StyleSheet, View, } from "react-native";
 import BottomSheetComponent from "./BottomSheetComponent";
 import { withTheme } from "../../theming";
-const BottomSheet = ({ theme, snapPoints = ["10%", "50%", "80%"], initialSnapIndex = 0, showHandle = true, handleColor = theme.colors.divider, topBorderRadius = 20, borderWidth = 1, borderColor = theme.colors.divider, onSettle, style, children, ...rest }) => {
+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, renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
+        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,

package/src/components/BottomSheet/BottomSheet.tsx

@@ -11,9 +11,14 @@ import BottomSheetComponent from "./BottomSheetComponent";
 import type { Theme } from "../../styles/DefaultTheme";
 import { withTheme } from "../../theming";
 
+type SnapPosition = "top" | "middle" | "bottom";
 export interface BottomSheetProps extends ScrollViewProps {
-  snapPoints?: (string | number)[];
+  topSnapPosition?: string | number;
+  middleSnapPosition?: string | number;
+  bottomSnapPosition?: string | number;
+  snapPoints: (string | number)[];
   initialSnapIndex?: number;
+  initialSnapPosition: SnapPosition;
   showHandle?: boolean;
   handleColor?: string;
   topBorderRadius?: number;
@@ -26,8 +31,12 @@ export interface BottomSheetProps extends ScrollViewProps {
 
 const BottomSheet: React.FC<React.PropsWithChildren<BottomSheetProps>> = ({
   theme,
-  snapPoints = ["10%", "50%", "80%"],
-  initialSnapIndex = 0,
+  snapPoints: snapPointsProp,
+  topSnapPosition = "10%",
+  middleSnapPosition = "50%",
+  bottomSnapPosition = "80%",
+  initialSnapIndex,
+  initialSnapPosition = "bottom",
   showHandle = true,
   handleColor = theme.colors.divider,
   topBorderRadius = 20,
@@ -41,12 +50,31 @@ const BottomSheet: React.FC<React.PropsWithChildren<BottomSheetProps>> = ({
   const backgroundColor =
     (style as ViewStyle)?.backgroundColor || theme.colors.background;
 
+  const snapPoints = snapPointsProp || [
+    topSnapPosition,
+    middleSnapPosition,
+    bottomSnapPosition,
+  ];
+
+  const getSnapIndexFromPosition = (position: SnapPosition) => {
+    switch (position) {
+      case "top":
+        return 0;
+      case "middle":
+        return 1;
+      case "bottom":
+        return 2;
+    }
+  };
+
   return (
     <View style={styles.parentContainer} pointerEvents="box-none">
       <BottomSheetComponent
         componentType="ScrollView"
         snapPoints={snapPoints}
-        initialSnapIndex={initialSnapIndex}
+        initialSnapIndex={
+          initialSnapIndex ?? getSnapIndexFromPosition(initialSnapPosition)
+        }
         renderHandle={() => (
           <>
             {showHandle && (

package/src/components/SwipeableView/SwipeableView.js

@@ -0,0 +1,121 @@
+import React from "react";
+import { View, StyleSheet, Text, } from "react-native";
+import Pressable from "../Pressable";
+import { extractBorderAndMarginStyles, extractEffectStyles, extractFlexItemStyles, extractPositionStyles, extractSizeStyles, extractStyles, } from "../../utilities";
+import { SwipeRow } from "react-native-swipe-list-view";
+import { withTheme } from "../../theming";
+const SwipeableView = ({ theme, style, children, Icon, closeOnPress, leftOpenValue, rightOpenValue, leftActivationValue, rightActivationValue, swipeActivationPercentage = 80, stopLeftSwipe, stopRightSwipe, friction = 20, ...rest }) => {
+    const instanceOfSwipeableViewButtonProps = (object) => {
+        return "title" in object && "side" in object && "onPress" in object;
+    };
+    const instanceOfSwipeableViewSwipeHandlerProps = (object) => {
+        return "title" in object && "side" in object && "onSwipe" in object;
+    };
+    const { viewStyles, textStyles } = extractStyles(style);
+    const { borderStyles, marginStyles } = extractBorderAndMarginStyles(viewStyles);
+    const sizeStyles = extractSizeStyles(viewStyles);
+    const parentContainerStyles = StyleSheet.flatten([
+        borderStyles,
+        marginStyles,
+        extractFlexItemStyles(viewStyles),
+        extractPositionStyles(viewStyles),
+        extractEffectStyles(viewStyles),
+        sizeStyles,
+    ]);
+    //Remove styles already consumed from viewStyles
+    Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
+    const surfaceContainerStyles = StyleSheet.flatten([
+        viewStyles,
+        sizeStyles /* Size styles needs to be readded to surface container due to inconsistencies on web */,
+    ]);
+    const [componentWidth, setComponentWidth] = React.useState(null);
+    const leftButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewButtonProps(child.props) &&
+        child.props.side === "left"), [children]);
+    const rightButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewButtonProps(child.props) &&
+        child.props.side === "right"), [children]);
+    const leftSwipeHandlers = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+        child.props.side === "left"), [children]);
+    const rightSwipeHandlers = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+        child.props.side === "right"), [children]);
+    const remainingChildren = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        !instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+        !instanceOfSwipeableViewButtonProps(child.props)), [children]);
+    if (leftButtons.length > 2 || rightButtons.length > 2) {
+        throw Error("Cannot have more than 2 buttons per side");
+    }
+    if (leftSwipeHandlers.length > 1 || rightSwipeHandlers.length > 1) {
+        throw Error("Cannot have more than 1 swiper handler per side");
+    }
+    if ((leftButtons.length && leftSwipeHandlers.length) ||
+        (rightButtons.length && rightSwipeHandlers.length)) {
+        throw Error("Cannot combine swiper handler and buttons on the same side");
+    }
+    //Renders a single button/item. Used for both buttons and swipe handler
+    const renderBehindItem = (props, index) => (React.createElement(Pressable, { key: index.toString(), onPress: props.onPress, style: [
+            styles.buttonContainer,
+            { backgroundColor: props.backgroundColor || theme.colors.primary },
+        ] },
+        props.icon && (React.createElement(Icon, { name: props.icon, size: props.iconSize || 25, color: props.color || theme.colors.surface })),
+        React.createElement(Text, { style: [textStyles, { color: props.color || theme.colors.surface }] }, props.title)));
+    const isLeftSwipeHandler = !!leftSwipeHandlers.length;
+    const isRightSwipeHandler = !!rightSwipeHandlers.length;
+    const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
+    const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
+    return (React.createElement(View, { onLayout: (event) => {
+            setComponentWidth(event.nativeEvent.layout.width);
+        }, style: [styles.parentContainer, parentContainerStyles] },
+        React.createElement(SwipeRow, { leftOpenValue: isLeftSwipeHandler ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+            , rightOpenValue: isRightSwipeHandler ? 0 : rightOpenValue || defaultRightOpenValue, leftActivationValue: leftActivationValue || isLeftSwipeHandler
+                ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+                : defaultLeftOpenValue, rightActivationValue: rightActivationValue || isRightSwipeHandler
+                ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+                : defaultRightOpenValue, stopLeftSwipe: stopLeftSwipe || defaultLeftOpenValue, stopRightSwipe: stopRightSwipe || defaultRightOpenValue, onLeftAction: isLeftSwipeHandler
+                ? () => { var _a, _b; return (_b = (_a = leftSwipeHandlers[0].props).onSwipe) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                : undefined, onRightAction: isRightSwipeHandler
+                ? () => { var _a, _b; return (_b = (_a = rightSwipeHandlers[0].props).onSwipe) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                : undefined, closeOnRowPress: closeOnPress, friction: friction, ...rest },
+            React.createElement(View, { style: styles.behindContainer },
+                React.createElement(View, { style: styles.behindContainerItem }, (isLeftSwipeHandler ? leftSwipeHandlers : leftButtons).map((item, index) => renderBehindItem(item.props, index))),
+                React.createElement(View, { style: styles.behindContainerItem }, (isRightSwipeHandler ? rightSwipeHandlers : rightButtons).map((item, index) => renderBehindItem(item.props, index)))),
+            React.createElement(View, { style: [
+                    styles.surfaceContainer,
+                    {
+                        backgroundColor: theme.colors.background,
+                    },
+                    surfaceContainerStyles,
+                ] }, remainingChildren))));
+};
+const styles = StyleSheet.create({
+    parentContainer: {
+        overflow: "hidden",
+        minHeight: 50,
+    },
+    behindContainer: {
+        flex: 1,
+        width: "100%",
+        height: "100%",
+        flexDirection: "row",
+    },
+    behindContainerItem: {
+        flex: 1,
+        flexDirection: "row",
+    },
+    buttonContainer: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    surfaceContainer: {
+        flexDirection: "row",
+        width: "100%",
+        minHeight: 50,
+        padding: 10,
+        alignItems: "center",
+        overflow: "hidden",
+    },
+});
+export default withTheme(SwipeableView);

package/src/components/SwipeableView/SwipeableView.tsx

@@ -0,0 +1,304 @@
+import React from "react";
+import {
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  StyleSheet,
+  Text,
+} from "react-native";
+import Pressable from "../Pressable";
+import {
+  extractBorderAndMarginStyles,
+  extractEffectStyles,
+  extractFlexItemStyles,
+  extractPositionStyles,
+  extractSizeStyles,
+  extractStyles,
+} from "../../utilities";
+import { SwipeRow } from "react-native-swipe-list-view";
+import { IconSlot } from "../../interfaces/Icon";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+import { SwipeableViewButtonProps } from "./SwipeableViewButton";
+import { SwipeableViewSwipeHandlerProps } from "./SwipeableViewSwipeHandler";
+
+export interface SwipeableViewProps extends IconSlot {
+  closeOnPress?: boolean;
+  leftOpenValue?: number;
+  rightOpenValue?: number;
+  leftActivationValue?: number;
+  rightActivationValue?: number;
+  swipeActivationPercentage?: number;
+  stopLeftSwipe?: number;
+  stopRightSwipe?: number;
+  directionalDistanceChangeThreshold?: number;
+  friction?: number;
+  tension?: number;
+  disableLeftSwipe?: boolean;
+  disableRightSwipe?: boolean;
+  swipeToOpenVelocityContribution?: number;
+  swipeToOpenPercent?: number;
+  swipeToClosePercent?: number;
+  style?: StyleProp<ViewStyle | TextStyle>;
+  theme: Theme;
+}
+
+const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
+  theme,
+  style,
+  children,
+  Icon,
+  closeOnPress,
+  leftOpenValue,
+  rightOpenValue,
+  leftActivationValue,
+  rightActivationValue,
+  swipeActivationPercentage = 80,
+  stopLeftSwipe,
+  stopRightSwipe,
+  friction = 20,
+  ...rest
+}) => {
+  const instanceOfSwipeableViewButtonProps = (
+    object: any
+  ): object is SwipeableViewButtonProps => {
+    return "title" in object && "side" in object && "onPress" in object;
+  };
+
+  const instanceOfSwipeableViewSwipeHandlerProps = (
+    object: any
+  ): object is SwipeableViewSwipeHandlerProps => {
+    return "title" in object && "side" in object && "onSwipe" in object;
+  };
+
+  const { viewStyles, textStyles } = extractStyles(style);
+
+  const { borderStyles, marginStyles } =
+    extractBorderAndMarginStyles(viewStyles);
+
+  const sizeStyles = extractSizeStyles(viewStyles);
+
+  const parentContainerStyles = StyleSheet.flatten([
+    borderStyles,
+    marginStyles,
+    extractFlexItemStyles(viewStyles),
+    extractPositionStyles(viewStyles),
+    extractEffectStyles(viewStyles),
+    sizeStyles,
+  ]);
+
+  //Remove styles already consumed from viewStyles
+  Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
+  const surfaceContainerStyles = StyleSheet.flatten([
+    viewStyles,
+    sizeStyles /* Size styles needs to be readded to surface container due to inconsistencies on web */,
+  ]);
+
+  const [componentWidth, setComponentWidth] = React.useState<number | null>(
+    null
+  );
+  const leftButtons = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewButtonProps(child.props) &&
+          child.props.side === "left"
+      ) as React.ReactElement<SwipeableViewButtonProps>[],
+    [children]
+  );
+
+  const rightButtons = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewButtonProps(child.props) &&
+          child.props.side === "right"
+      ) as React.ReactElement<SwipeableViewButtonProps>[],
+    [children]
+  );
+
+  const leftSwipeHandlers = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+          child.props.side === "left"
+      ) as React.ReactElement<SwipeableViewSwipeHandlerProps>[],
+    [children]
+  );
+
+  const rightSwipeHandlers = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+          child.props.side === "right"
+      ) as React.ReactElement<SwipeableViewSwipeHandlerProps>[],
+    [children]
+  );
+
+  const remainingChildren = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          !instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+          !instanceOfSwipeableViewButtonProps(child.props)
+      ),
+    [children]
+  );
+
+  if (leftButtons.length > 2 || rightButtons.length > 2) {
+    throw Error("Cannot have more than 2 buttons per side");
+  }
+
+  if (leftSwipeHandlers.length > 1 || rightSwipeHandlers.length > 1) {
+    throw Error("Cannot have more than 1 swiper handler per side");
+  }
+
+  if (
+    (leftButtons.length && leftSwipeHandlers.length) ||
+    (rightButtons.length && rightSwipeHandlers.length)
+  ) {
+    throw Error("Cannot combine swiper handler and buttons on the same side");
+  }
+
+  //Renders a single button/item. Used for both buttons and swipe handler
+  const renderBehindItem = (
+    props: SwipeableViewSwipeHandlerProps | SwipeableViewButtonProps,
+    index: number
+  ) => (
+    <Pressable
+      key={index.toString()}
+      onPress={(props as any).onPress}
+      style={[
+        styles.buttonContainer,
+        { backgroundColor: props.backgroundColor || theme.colors.primary },
+      ]}
+    >
+      {props.icon && (
+        <Icon
+          name={props.icon}
+          size={props.iconSize || 25}
+          color={props.color || theme.colors.surface}
+        />
+      )}
+      <Text
+        style={[textStyles, { color: props.color || theme.colors.surface }]}
+      >
+        {props.title}
+      </Text>
+    </Pressable>
+  );
+
+  const isLeftSwipeHandler = !!leftSwipeHandlers.length;
+  const isRightSwipeHandler = !!rightSwipeHandlers.length;
+
+  const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
+  const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
+
+  return (
+    <View
+      onLayout={(event) => {
+        setComponentWidth(event.nativeEvent.layout.width);
+      }}
+      style={[styles.parentContainer, parentContainerStyles]}
+    >
+      {/*@ts-ignore*/}
+      <SwipeRow
+        leftOpenValue={
+          isLeftSwipeHandler ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+        }
+        rightOpenValue={
+          isRightSwipeHandler ? 0 : rightOpenValue || defaultRightOpenValue
+        }
+        leftActivationValue={
+          leftActivationValue || isLeftSwipeHandler
+            ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+            : defaultLeftOpenValue
+        }
+        rightActivationValue={
+          rightActivationValue || isRightSwipeHandler
+            ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+            : defaultRightOpenValue
+        }
+        stopLeftSwipe={stopLeftSwipe || defaultLeftOpenValue}
+        stopRightSwipe={stopRightSwipe || defaultRightOpenValue}
+        onLeftAction={
+          isLeftSwipeHandler
+            ? () => leftSwipeHandlers[0].props.onSwipe?.()
+            : undefined
+        }
+        onRightAction={
+          isRightSwipeHandler
+            ? () => rightSwipeHandlers[0].props.onSwipe?.()
+            : undefined
+        }
+        closeOnRowPress={closeOnPress}
+        friction={friction}
+        {...rest}
+      >
+        <View style={styles.behindContainer}>
+          <View style={styles.behindContainerItem}>
+            {(isLeftSwipeHandler ? leftSwipeHandlers : leftButtons).map(
+              (item, index) => renderBehindItem(item.props, index)
+            )}
+          </View>
+          <View style={styles.behindContainerItem}>
+            {(isRightSwipeHandler ? rightSwipeHandlers : rightButtons).map(
+              (item, index) => renderBehindItem(item.props, index)
+            )}
+          </View>
+        </View>
+        <View
+          style={[
+            styles.surfaceContainer,
+            {
+              backgroundColor: theme.colors.background,
+            },
+            surfaceContainerStyles,
+          ]}
+        >
+          {remainingChildren}
+        </View>
+      </SwipeRow>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  parentContainer: {
+    overflow: "hidden",
+    minHeight: 50,
+  },
+  behindContainer: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    flexDirection: "row",
+  },
+  behindContainerItem: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  buttonContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  surfaceContainer: {
+    flexDirection: "row",
+    width: "100%",
+    minHeight: 50,
+    padding: 10,
+    alignItems: "center",
+    overflow: "hidden",
+  },
+});
+
+export default withTheme(SwipeableView);

package/src/components/SwipeableView/SwipeableViewButton.js

@@ -0,0 +1,5 @@
+//Renders nothing, acts as a wrapper be used by SwipeableView
+const SwipeableViewButton = () => {
+    return null;
+};
+export default SwipeableViewButton;

package/src/components/SwipeableView/SwipeableViewButton.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface SwipeableViewButtonProps {
+  title: string;
+  side: "left" | "right";
+  onPress?: () => void;
+  icon?: string;
+  iconSize?: number;
+  backgroundColor?: string;
+  color?: string;
+}
+
+//Renders nothing, acts as a wrapper be used by SwipeableView
+const SwipeableViewButton: React.FC<SwipeableViewButtonProps> = () => {
+  return null;
+};
+
+export default SwipeableViewButton;

package/src/components/SwipeableView/SwipeableViewSwipeHandler.js

@@ -0,0 +1,5 @@
+//Renders nothing, acts as a wrapper to be used by SwipeableView
+const SwipeableViewSwipeHandler = () => {
+    return null;
+};
+export default SwipeableViewSwipeHandler;

package/src/components/SwipeableView/SwipeableViewSwipeHandler.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export interface SwipeableViewSwipeHandlerProps {
+  title: string;
+  side: "left" | "right";
+  onSwipe?: () => void;
+  icon?: string;
+  iconSize?: number;
+  backgroundColor?: string;
+  color?: string;
+}
+
+//Renders nothing, acts as a wrapper to be used by SwipeableView
+const SwipeableViewSwipeHandler: React.FC<
+  SwipeableViewSwipeHandlerProps
+> = () => {
+  return null;
+};
+
+export default SwipeableViewSwipeHandler;

package/src/components/SwipeableView/index.js

@@ -0,0 +1,3 @@
+export { default as SwipeableView } from "./SwipeableView";
+export { default as SwipeableViewButton } from "./SwipeableViewButton";
+export { default as SwipeableViewSwipeHandler } from "./SwipeableViewSwipeHandler";

package/src/components/SwipeableView/index.tsx

@@ -0,0 +1,3 @@
+export { default as SwipeableView } from "./SwipeableView";
+export { default as SwipeableViewButton } from "./SwipeableViewButton";
+export { default as SwipeableViewSwipeHandler } from "./SwipeableViewSwipeHandler";

package/src/index.js

@@ -38,6 +38,7 @@ export { default as Markdown } from "./components/Markdown";
 export { BottomSheet } from "./components/BottomSheet";
 export { YoutubePlayer } from "./components/YoutubePlayer";
 export { Table, TableRow, TableCell } from "./components/Table";
+export { SwipeableView, SwipeableViewButton, SwipeableViewSwipeHandler, } from "./components/SwipeableView";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.tsx

@@ -64,6 +64,12 @@ export { YoutubePlayer } from "./components/YoutubePlayer";
 
 export { Table, TableRow, TableCell } from "./components/Table";
 
+export {
+  SwipeableView,
+  SwipeableViewButton,
+  SwipeableViewSwipeHandler,
+} from "./components/SwipeableView";
+
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/mappings/BottomSheet.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, createStaticNumberProp, createArrayProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, createStaticNumberProp, createArrayProp, GROUPS, createTextEnumProp, FORM_TYPES, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Bottom Sheet",
     tag: "BottomSheet",
@@ -11,16 +11,32 @@ export const SEED_DATA = {
             label: "On settle",
             description: "Action to execute when sheet settles on a snap point",
         }),
-        snapPoints: createArrayProp({
-            label: "Snap points",
-            description: "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
-            defaultValue: ["10%", "50%", "80%"],
+        topSnapPosition: createStaticNumberProp({
+            label: "Top snap position",
+            description: "Top most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+            defaultValue: "10%",
+            required: false,
+            formType: FORM_TYPES.numeric,
         }),
-        initialSnapIndex: createStaticNumberProp({
-            label: "Initial snap index",
-            description: "Index of the snap point to be used as the initial point",
-            defaultValue: 0,
+        middleSnapPosition: createStaticNumberProp({
+            label: "Middle snap position",
+            description: "Middle postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+            defaultValue: "50%",
             required: false,
+            formType: FORM_TYPES.numeric,
+        }),
+        bottomSnapPosition: createStaticNumberProp({
+            label: "Bottom snap position",
+            description: "Bottom most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+            defaultValue: "80%",
+            required: false,
+            formType: FORM_TYPES.numeric,
+        }),
+        initialSnapPosition: createTextEnumProp({
+            label: "Initial snap position",
+            description: "Initial snap position that bottom sheet will snap to",
+            options: ["top", "middle", "bottom"],
+            defaultValue: "bottom",
         }),
         showHandle: createStaticBoolProp({
             label: "Show handle",
@@ -59,5 +75,17 @@ export const SEED_DATA = {
             description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
             defaultValue: true,
         }),
+        snapPoints: createArrayProp({
+            label: "Custom Snap points",
+            description: "An array of numerical values (that represent distance from the top) where bottom sheet can snap to. Accepts numbers and percentages (minimum 2 snap points). Overrides snap position props",
+            defaultValue: null,
+        }),
+        initialSnapIndex: createStaticNumberProp({
+            label: "Initial snap index",
+            description: "Index of the snap point to be used as the initial point. Overrides initial snap position",
+            defaultValue: null,
+            required: false,
+            group: GROUPS.advanced,
+        }),
     },
 };