@draftbit/core 47.2.1-a33ddf.2 → 47.2.1-d833e1.2

package/lib/typescript/src/mappings/SwipeableView.d.ts

@@ -0,0 +1,426 @@
+export declare const SHARED_SEED_DATA_PROPS: {
+    title: any;
+    side: {
+        group: string;
+        label: string;
+        description: string;
+        editable: boolean;
+        required: boolean;
+        formType: string;
+        propType: string;
+        defaultValue: null;
+        options: never[];
+    };
+    icon: {
+        label: string;
+        description: string;
+        formType: string;
+        propType: string;
+        defaultValue: string;
+        required: boolean;
+        editable: boolean;
+        group: string;
+    };
+    iconSize: {
+        label: string;
+        description: string;
+        formType: string;
+        propType: string;
+        group: string;
+        defaultValue: null;
+        editable: boolean;
+        required: boolean;
+        step: number;
+    };
+    backgroundColor: {
+        group: string;
+        label: string;
+        description: string;
+        editable: boolean;
+        required: boolean;
+        defaultValue: null;
+        formType: string;
+        propType: string;
+    };
+    color: {
+        group: string;
+        label: string;
+        description: string;
+        editable: boolean;
+        required: boolean;
+        defaultValue: null;
+        formType: string;
+        propType: string;
+    };
+};
+export declare const SEED_DATA: ({
+    name: string;
+    tag: string;
+    doc_link: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        overflow: string;
+        flexDirection: string;
+        alignItems: string;
+        padding: number;
+    };
+    props: {
+        closeOnPress: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        swipeActivationPercentage: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        disableLeftSwipe: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        disableRightSwipe: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        leftOpenValue: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        rightOpenValue: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        leftActivationValue: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        rightActivationValue: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        stopLeftSwipe: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        stopRightSwipe: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        directionalDistanceChangeThreshold: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        friction: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        tension: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        swipeToOpenVelocityContribution: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        swipeToOpenPercent: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        swipeToClosePercent: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+    triggers?: undefined;
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: never[];
+    triggers: string[];
+    props: {
+        onPress: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        title: any;
+        side: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        icon: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            required: boolean;
+            editable: boolean;
+            group: string;
+        };
+        iconSize: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        backgroundColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        color: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        closeOnPress?: undefined;
+        swipeActivationPercentage?: undefined;
+        disableLeftSwipe?: undefined;
+        disableRightSwipe?: undefined;
+        leftOpenValue?: undefined;
+        rightOpenValue?: undefined;
+        leftActivationValue?: undefined;
+        rightActivationValue?: undefined;
+        stopLeftSwipe?: undefined;
+        stopRightSwipe?: undefined;
+        directionalDistanceChangeThreshold?: undefined;
+        friction?: undefined;
+        tension?: undefined;
+        swipeToOpenVelocityContribution?: undefined;
+        swipeToOpenPercent?: undefined;
+        swipeToClosePercent?: undefined;
+    };
+    doc_link?: undefined;
+    layout?: undefined;
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: never[];
+    triggers: string[];
+    props: {
+        onSwipe: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        title: any;
+        side: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        icon: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            required: boolean;
+            editable: boolean;
+            group: string;
+        };
+        iconSize: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        backgroundColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        color: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        closeOnPress?: undefined;
+        swipeActivationPercentage?: undefined;
+        disableLeftSwipe?: undefined;
+        disableRightSwipe?: undefined;
+        leftOpenValue?: undefined;
+        rightOpenValue?: undefined;
+        leftActivationValue?: undefined;
+        rightActivationValue?: undefined;
+        stopLeftSwipe?: undefined;
+        stopRightSwipe?: undefined;
+        directionalDistanceChangeThreshold?: undefined;
+        friction?: undefined;
+        tension?: undefined;
+        swipeToOpenVelocityContribution?: undefined;
+        swipeToOpenPercent?: undefined;
+        swipeToClosePercent?: undefined;
+    };
+    doc_link?: undefined;
+    layout?: undefined;
+})[];
+//# sourceMappingURL=SwipeableView.d.ts.map

package/lib/typescript/src/mappings/SwipeableView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/SwipeableView.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmClC,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4JrB,CAAC"}

package/lib/typescript/src/utilities.d.ts

@@ -10,6 +10,12 @@ export declare function extractBorderAndMarginStyles(style: StyleProp<any>, addi
     borderStyles: import("lodash").Dictionary<any>;
     marginStyles: import("lodash").Dictionary<any>;
 };
+export declare const flexItemStyleNames: string[];
+export declare function extractFlexItemStyles(style: StyleProp<any>, additionalFlexItemStyles?: string[]): import("lodash").Dictionary<any>;
+export declare const positionStyleNames: string[];
+export declare function extractPositionStyles(style: StyleProp<any>, additionalPositionStyles?: string[]): import("lodash").Dictionary<any>;
+export declare const effectsStyleNames: string[];
+export declare function extractEffectStyles(style: StyleProp<any>, additionalEffectStyles?: string[]): import("lodash").Dictionary<any>;
 export declare const sizeStyleNames: string[];
 export declare function extractSizeStyles(style: StyleProp<any>, additionalSizeStyles?: string[]): import("lodash").Dictionary<any>;
 /**

package/lib/typescript/src/utilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/utilities.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC;;;EA+BlD;AAED,eAAO,MAAM,gBAAgB,UAwB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAU5B,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EACjC,sBAAsB,CAAC,EAAE,MAAM,EAAE;;;EAqBlC;AAED,eAAO,MAAM,cAAc,UAAsB,CAAC;AAElD,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,oBAAoB,CAAC,EAAE,MAAM,EAAE,oCAahC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EACjC,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,OAe1C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,UAQ5D"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/utilities.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC;;;EA+BlD;AAED,eAAO,MAAM,gBAAgB,UAwB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAU5B,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EACjC,sBAAsB,CAAC,EAAE,MAAM,EAAE;;;EAqBlC;AAED,eAAO,MAAM,kBAAkB,UAM9B,CAAC;AAEF,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,wBAAwB,CAAC,EAAE,MAAM,EAAE,oCAapC;AAED,eAAO,MAAM,kBAAkB,UAQ9B,CAAC;AAEF,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,wBAAwB,CAAC,EAAE,MAAM,EAAE,oCAapC;AAED,eAAO,MAAM,iBAAiB,UAA2B,CAAC;AAE1D,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,sBAAsB,CAAC,EAAE,MAAM,EAAE,oCAalC;AAED,eAAO,MAAM,cAAc,UAAsB,CAAC;AAElD,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,oBAAoB,CAAC,EAAE,MAAM,EAAE,oCAahC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EACjC,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,OAe1C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,UAQ5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.2.1-a33ddf.2+a33ddf6",
+  "version": "47.2.1-d833e1.2+d833e1f",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^47.2.1-a33ddf.2+a33ddf6",
+    "@draftbit/types": "^47.2.1-d833e1.2+d833e1f",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.4",
@@ -61,6 +61,7 @@
     "react-native-reanimated": "~2.12.0",
     "react-native-shadow-2": "^7.0.6",
     "react-native-svg": "13.4.0",
+    "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^3.4.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3",
@@ -93,5 +94,5 @@
     "node_modules/",
     "lib/"
   ],
-  "gitHead": "a33ddf6d66acb34cd5de957e95359ef25284a90c"
+  "gitHead": "d833e1fefc9e0ad3ee353e9fd5e29ccb76f65f6b"
 }

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,117 @@
+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 parentContainerStyles = StyleSheet.flatten([
+        borderStyles,
+        marginStyles,
+        extractFlexItemStyles(viewStyles),
+        extractPositionStyles(viewStyles),
+        extractEffectStyles(viewStyles),
+        extractSizeStyles(viewStyles),
+    ]);
+    //Remove styles already consumed from viewStyles
+    Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
+    const surfaceContainerStyles = viewStyles;
+    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%",
+        height: "100%",
+        padding: 10,
+        alignItems: "center",
+        overflow: "hidden",
+    },
+});
+export default withTheme(SwipeableView);