@draftbit/core 47.2.13-f38301.2 → 47.2.14-41b571.2

package/src/components/SwipeableItem/SwipeableItem.js

@@ -0,0 +1,114 @@
+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";
+import { SwipeableListContext } from "./SwipeableList";
+import { leftSwipeToSwipeableItemBehindItem, rightSwipeToSwipeableItemBehindItem, extractLeftSwipeProps, extractRightSwipeProps, } from "./SwipeableItemCommon";
+const SwipeableItem = ({ theme, style, children, Icon, closeOnPress, leftOpenValue, rightOpenValue, leftActivationValue, rightActivationValue, swipeActivationPercentage = 80, stopLeftSwipe, stopRightSwipe, friction = 20, ...rest }) => {
+    const instanceOfSwipeableItemButtonProps = (object) => {
+        return "title" in object && "side" in object;
+    };
+    const isEmptyObject = (object) => {
+        return Object.keys(object).length === 0;
+    };
+    const { onStartSwiping, onStopSwiping } = React.useContext(SwipeableListContext);
+    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) &&
+        instanceOfSwipeableItemButtonProps(child.props) &&
+        child.props.side === "left"), [children]);
+    const rightButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableItemButtonProps(child.props) &&
+        child.props.side === "right"), [children]);
+    const remainingChildren = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        !instanceOfSwipeableItemButtonProps(child.props)), [children]);
+    const leftSwipe = extractLeftSwipeProps(rest);
+    const rightSwipe = extractRightSwipeProps(rest);
+    const isLeftSwipeHandled = !isEmptyObject(leftSwipe);
+    const isRightSwipeHandled = !isEmptyObject(rightSwipe);
+    if (leftButtons.length > 2 || rightButtons.length > 2) {
+        throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
+    }
+    if ((leftButtons.length && isLeftSwipeHandled) ||
+        (rightButtons.length && isRightSwipeHandled)) {
+        throw Error("Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the side where swipe handling is configured. Either reset swipe configuration or remove the button(s).");
+    }
+    //Renders a single 'behind' item. Used for both buttons and swipe handler
+    const renderBehindItem = (item, index) => (React.createElement(Pressable, { key: index.toString(), onPress: item.onPress, style: [
+            styles.buttonContainer,
+            { backgroundColor: item.backgroundColor || theme.colors.primary },
+        ] },
+        item.icon && (React.createElement(Icon, { name: item.icon, size: item.iconSize || 25, color: item.color || theme.colors.surface })),
+        React.createElement(Text, { style: [textStyles, { color: item.color || theme.colors.surface }] }, item.title)));
+    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: isLeftSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+            , rightOpenValue: isRightSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue, leftActivationValue: leftActivationValue || isLeftSwipeHandled
+                ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+                : defaultLeftOpenValue, rightActivationValue: rightActivationValue || isRightSwipeHandled
+                ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+                : defaultRightOpenValue, stopLeftSwipe: stopLeftSwipe || defaultLeftOpenValue, stopRightSwipe: stopRightSwipe || defaultRightOpenValue, onLeftAction: isLeftSwipeHandled ? () => { var _a; return (_a = leftSwipe.onLeftSwipe) === null || _a === void 0 ? void 0 : _a.call(leftSwipe); } : undefined, onRightAction: isRightSwipeHandled ? () => { var _a; return (_a = rightSwipe.onRightSwipe) === null || _a === void 0 ? void 0 : _a.call(rightSwipe); } : undefined, swipeGestureBegan: onStartSwiping, swipeGestureEnded: onStopSwiping, closeOnRowPress: closeOnPress, friction: friction, ...rest },
+            React.createElement(View, { style: styles.behindContainer },
+                React.createElement(View, { style: styles.behindContainerItem }, isLeftSwipeHandled
+                    ? renderBehindItem(leftSwipeToSwipeableItemBehindItem(leftSwipe), 0)
+                    : leftButtons.map((item, index) => renderBehindItem(item.props, index))),
+                React.createElement(View, { style: styles.behindContainerItem }, isRightSwipeHandled
+                    ? renderBehindItem(rightSwipeToSwipeableItemBehindItem(rightSwipe), 0)
+                    : 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: {
+        width: "100%",
+        minHeight: 50,
+        overflow: "hidden",
+    },
+});
+export default withTheme(SwipeableItem);
+//# sourceMappingURL=SwipeableItem.js.map

package/src/components/SwipeableItem/SwipeableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableItem.js","sourceRoot":"","sources":["SwipeableItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,IAAI,EAIJ,UAAU,EACV,IAAI,GACL,MAAM,cAAc,CAAC;AACtB,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAIL,kCAAkC,EAClC,mCAAmC,EACnC,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAyB/B,MAAM,aAAa,GAA6C,CAAC,EAC/D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,GAAG,EAAE,EAC9B,aAAa,EACb,cAAc,EACd,QAAQ,GAAG,EAAE,EACb,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,kCAAkC,GAAG,CACzC,MAAW,EACyB,EAAE;QACtC,OAAO,OAAO,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE;QACvC,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,GACrC,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEzC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAClC,4BAA4B,CAAC,UAAU,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAEjD,MAAM,qBAAqB,GAAG,UAAU,CAAC,OAAO,CAAC;QAC/C,YAAY;QACZ,YAAY;QACZ,qBAAqB,CAAC,UAAU,CAAC;QACjC,qBAAqB,CAAC,UAAU,CAAC;QACjC,mBAAmB,CAAC,UAAU,CAAC;QAC/B,UAAU;KACX,CAAC,CAAC;IAEH,gDAAgD;IAChD,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5E,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,CAAC;QAChD,UAAU;QACV,UAAU,CAAC,wFAAwF;KACpG,CAAC,CAAC;IAEH,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CACxD,IAAI,CACL,CAAC;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CACH,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CACrC,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;QAC3B,kCAAkC,CAAC,KAAK,CAAC,KAAK,CAAC;QAC/C,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CACoB,EACrD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAChC,GAAG,EAAE,CACH,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CACrC,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;QAC3B,kCAAkC,CAAC,KAAK,CAAC,KAAK,CAAC;QAC/C,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CACmB,EACrD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CACrC,GAAG,EAAE,CACH,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CACrC,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;QAC3B,CAAC,kCAAkC,CAAC,KAAK,CAAC,KAAK,CAAC,CACnD,EACH,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAEhD,MAAM,kBAAkB,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,MAAM,mBAAmB,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEvD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;QACrD,MAAM,KAAK,CAAC,yDAAyD,CAAC,CAAC;KACxE;IAED,IACE,CAAC,WAAW,CAAC,MAAM,IAAI,kBAAkB,CAAC;QAC1C,CAAC,YAAY,CAAC,MAAM,IAAI,mBAAmB,CAAC,EAC5C;QACA,MAAM,KAAK,CACT,4LAA4L,CAC7L,CAAC;KACH;IAED,yEAAyE;IACzE,MAAM,gBAAgB,GAAG,CAAC,IAA6B,EAAE,KAAa,EAAE,EAAE,CAAC,CACzE,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,EACrB,OAAO,EAAG,IAAY,CAAC,OAAO,EAC9B,KAAK,EAAE;YACL,MAAM,CAAC,eAAe;YACtB,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;SAClE;QAEA,IAAI,CAAC,IAAI,IAAI,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,GACzC,CACH;QACD,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,IACrE,IAAI,CAAC,KAAK,CACN,CACG,CACb,CAAC;IAEF,MAAM,oBAAoB,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,OAAO,CACL,oBAAC,IAAI,IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,iBAAiB,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpD,CAAC,EACD,KAAK,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE,qBAAqB,CAAC;QAGtD,oBAAC,QAAQ,IACP,aAAa,EACX,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,IAAI,oBAAoB,CAAC,qCAAqC;cAEtG,cAAc,EACZ,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,qBAAqB,EAEnE,mBAAmB,EACjB,mBAAmB,IAAI,kBAAkB;gBACvC,CAAC,CAAC,oBAAoB,GAAG,CAAC,yBAAyB,GAAG,GAAG,CAAC,CAAC,+FAA+F;gBAC1J,CAAC,CAAC,oBAAoB,EAE1B,oBAAoB,EAClB,oBAAoB,IAAI,mBAAmB;gBACzC,CAAC,CAAC,qBAAqB,GAAG,CAAC,yBAAyB,GAAG,GAAG,CAAC;gBAC3D,CAAC,CAAC,qBAAqB,EAE3B,aAAa,EAAE,aAAa,IAAI,oBAAoB,EACpD,cAAc,EAAE,cAAc,IAAI,qBAAqB,EACvD,YAAY,EACV,kBAAkB,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,SAAS,CAAC,WAAW,yDAAI,CAAA,EAAA,CAAC,CAAC,CAAC,SAAS,EAElE,aAAa,EACX,mBAAmB,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,YAAY,0DAAI,CAAA,EAAA,CAAC,CAAC,CAAC,SAAS,EAErE,iBAAiB,EAAE,cAAc,EACjC,iBAAiB,EAAE,aAAa,EAChC,eAAe,EAAE,YAAY,EAC7B,QAAQ,EAAE,QAAQ,KACd,IAAI;YAER,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,eAAe;gBACjC,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,mBAAmB,IACpC,kBAAkB;oBACjB,CAAC,CAAC,gBAAgB,CACd,kCAAkC,CAAC,SAAS,CAAC,EAC7C,CAAC,CACF;oBACH,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC9B,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CACpC,CACA;gBACP,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,mBAAmB,IACpC,mBAAmB;oBAClB,CAAC,CAAC,gBAAgB,CACd,mCAAmC,CAAC,UAAU,CAAC,EAC/C,CAAC,CACF;oBACH,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC/B,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CACpC,CACA,CACF;YACP,oBAAC,IAAI,IACH,KAAK,EAAE;oBACL,MAAM,CAAC,gBAAgB;oBACvB;wBACE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;qBACzC;oBACD,sBAAsB;iBACvB,IAEA,iBAAiB,CACb,CACE,CACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE;QACf,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,EAAE;KACd;IACD,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,KAAK;KACrB;IACD,mBAAmB,EAAE;QACnB,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,KAAK;KACrB;IACD,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC,aAAa,CAAC,CAAC"}

package/src/components/SwipeableItem/SwipeableItem.tsx

@@ -0,0 +1,294 @@
+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 { SwipeableItemButtonProps } from "./SwipeableItemButton";
+import { SwipeableListContext } from "./SwipeableList";
+import {
+  RightSwipeProps,
+  LeftSwipeProps,
+  SwipeableItemBehindItem,
+  leftSwipeToSwipeableItemBehindItem,
+  rightSwipeToSwipeableItemBehindItem,
+  extractLeftSwipeProps,
+  extractRightSwipeProps,
+} from "./SwipeableItemCommon";
+
+export interface SwipeableItemProps 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;
+}
+
+type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
+
+const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
+  theme,
+  style,
+  children,
+  Icon,
+  closeOnPress,
+  leftOpenValue,
+  rightOpenValue,
+  leftActivationValue,
+  rightActivationValue,
+  swipeActivationPercentage = 80,
+  stopLeftSwipe,
+  stopRightSwipe,
+  friction = 20,
+  ...rest
+}) => {
+  const instanceOfSwipeableItemButtonProps = (
+    object: any
+  ): object is SwipeableItemButtonProps => {
+    return "title" in object && "side" in object;
+  };
+
+  const isEmptyObject = (object: object) => {
+    return Object.keys(object).length === 0;
+  };
+
+  const { onStartSwiping, onStopSwiping } =
+    React.useContext(SwipeableListContext);
+
+  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) &&
+          instanceOfSwipeableItemButtonProps(child.props) &&
+          child.props.side === "left"
+      ) as React.ReactElement<SwipeableItemButtonProps>[],
+    [children]
+  );
+
+  const rightButtons = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableItemButtonProps(child.props) &&
+          child.props.side === "right"
+      ) as React.ReactElement<SwipeableItemButtonProps>[],
+    [children]
+  );
+
+  const remainingChildren = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          !instanceOfSwipeableItemButtonProps(child.props)
+      ),
+    [children]
+  );
+
+  const leftSwipe = extractLeftSwipeProps(rest);
+  const rightSwipe = extractRightSwipeProps(rest);
+
+  const isLeftSwipeHandled = !isEmptyObject(leftSwipe);
+  const isRightSwipeHandled = !isEmptyObject(rightSwipe);
+
+  if (leftButtons.length > 2 || rightButtons.length > 2) {
+    throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
+  }
+
+  if (
+    (leftButtons.length && isLeftSwipeHandled) ||
+    (rightButtons.length && isRightSwipeHandled)
+  ) {
+    throw Error(
+      "Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the side where swipe handling is configured. Either reset swipe configuration or remove the button(s)."
+    );
+  }
+
+  //Renders a single 'behind' item. Used for both buttons and swipe handler
+  const renderBehindItem = (item: SwipeableItemBehindItem, index: number) => (
+    <Pressable
+      key={index.toString()}
+      onPress={(item as any).onPress}
+      style={[
+        styles.buttonContainer,
+        { backgroundColor: item.backgroundColor || theme.colors.primary },
+      ]}
+    >
+      {item.icon && (
+        <Icon
+          name={item.icon}
+          size={item.iconSize || 25}
+          color={item.color || theme.colors.surface}
+        />
+      )}
+      <Text style={[textStyles, { color: item.color || theme.colors.surface }]}>
+        {item.title}
+      </Text>
+    </Pressable>
+  );
+
+  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={
+          isLeftSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+        }
+        rightOpenValue={
+          isRightSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue
+        }
+        leftActivationValue={
+          leftActivationValue || isLeftSwipeHandled
+            ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+            : defaultLeftOpenValue
+        }
+        rightActivationValue={
+          rightActivationValue || isRightSwipeHandled
+            ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+            : defaultRightOpenValue
+        }
+        stopLeftSwipe={stopLeftSwipe || defaultLeftOpenValue}
+        stopRightSwipe={stopRightSwipe || defaultRightOpenValue}
+        onLeftAction={
+          isLeftSwipeHandled ? () => leftSwipe.onLeftSwipe?.() : undefined
+        }
+        onRightAction={
+          isRightSwipeHandled ? () => rightSwipe.onRightSwipe?.() : undefined
+        }
+        swipeGestureBegan={onStartSwiping}
+        swipeGestureEnded={onStopSwiping}
+        closeOnRowPress={closeOnPress}
+        friction={friction}
+        {...rest}
+      >
+        <View style={styles.behindContainer}>
+          <View style={styles.behindContainerItem}>
+            {isLeftSwipeHandled
+              ? renderBehindItem(
+                  leftSwipeToSwipeableItemBehindItem(leftSwipe),
+                  0
+                )
+              : leftButtons.map((item, index) =>
+                  renderBehindItem(item.props, index)
+                )}
+          </View>
+          <View style={styles.behindContainerItem}>
+            {isRightSwipeHandled
+              ? renderBehindItem(
+                  rightSwipeToSwipeableItemBehindItem(rightSwipe),
+                  0
+                )
+              : 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: {
+    width: "100%",
+    minHeight: 50,
+    overflow: "hidden",
+  },
+});
+
+export default withTheme(SwipeableItem);

package/src/components/SwipeableItem/SwipeableItemButton.js

@@ -0,0 +1,6 @@
+//Renders nothing, acts as a wrapper be used by SwipeableView
+const SwipeableItemButton = () => {
+    return null;
+};
+export default SwipeableItemButton;
+//# sourceMappingURL=SwipeableItemButton.js.map

package/src/components/SwipeableItem/SwipeableItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableItemButton.js","sourceRoot":"","sources":["SwipeableItemButton.tsx"],"names":[],"mappings":"AAKA,6DAA6D;AAC7D,MAAM,mBAAmB,GAAuC,GAAG,EAAE;IACnE,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/src/components/SwipeableItem/SwipeableItemButton.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { SwipeableItemBehindItem } from "./SwipeableItemCommon";
+
+export type SwipeableItemButtonProps = Omit<SwipeableItemBehindItem, "onSwipe">;
+
+//Renders nothing, acts as a wrapper be used by SwipeableView
+const SwipeableItemButton: React.FC<SwipeableItemButtonProps> = () => {
+  return null;
+};
+
+export default SwipeableItemButton;

package/src/components/SwipeableItem/SwipeableItemCommon.js

@@ -0,0 +1,44 @@
+import { pick } from "lodash";
+export function extractRightSwipeProps(object) {
+    return pick(object, [
+        "onRightSwipe",
+        "rightSwipeTitle",
+        "rightSwipeIcon",
+        "rightSwipeIconSize",
+        "rightSwipeBackgroundColor",
+        "rightSwipeColor",
+    ]);
+}
+export function extractLeftSwipeProps(object) {
+    return pick(object, [
+        "onLeftSwipe",
+        "leftSwipeTitle",
+        "leftSwipeIcon",
+        "leftSwipeIconSize",
+        "leftSwipeBackgroundColor",
+        "leftSwipeColor",
+    ]);
+}
+export function rightSwipeToSwipeableItemBehindItem(swipe) {
+    return {
+        title: swipe.rightSwipeTitle || "",
+        side: "right",
+        onSwipe: swipe.onRightSwipe,
+        icon: swipe.rightSwipeIcon,
+        iconSize: swipe.rightSwipeIconSize,
+        backgroundColor: swipe.rightSwipeBackgroundColor,
+        color: swipe.rightSwipeColor,
+    };
+}
+export function leftSwipeToSwipeableItemBehindItem(swipe) {
+    return {
+        title: swipe.leftSwipeTitle || "",
+        side: "left",
+        onSwipe: swipe.onLeftSwipe,
+        icon: swipe.leftSwipeIcon,
+        iconSize: swipe.leftSwipeIconSize,
+        backgroundColor: swipe.leftSwipeBackgroundColor,
+        color: swipe.leftSwipeColor,
+    };
+}
+//# sourceMappingURL=SwipeableItemCommon.js.map

package/src/components/SwipeableItem/SwipeableItemCommon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableItemCommon.js","sourceRoot":"","sources":["SwipeableItemCommon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA+B9B,MAAM,UAAU,sBAAsB,CAAC,MAAc;IACnD,OAAO,IAAI,CAAC,MAAM,EAAE;QAClB,cAAc;QACd,iBAAiB;QACjB,gBAAgB;QAChB,oBAAoB;QACpB,2BAA2B;QAC3B,iBAAiB;KAClB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,MAAc;IAClD,OAAO,IAAI,CAAC,MAAM,EAAE;QAClB,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,mBAAmB;QACnB,0BAA0B;QAC1B,gBAAgB;KACjB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,mCAAmC,CACjD,KAAsB;IAEtB,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,eAAe,IAAI,EAAE;QAClC,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,KAAK,CAAC,YAAY;QAC3B,IAAI,EAAE,KAAK,CAAC,cAAc;QAC1B,QAAQ,EAAE,KAAK,CAAC,kBAAkB;QAClC,eAAe,EAAE,KAAK,CAAC,yBAAyB;QAChD,KAAK,EAAE,KAAK,CAAC,eAAe;KAC7B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kCAAkC,CAChD,KAAqB;IAErB,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,cAAc,IAAI,EAAE;QACjC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK,CAAC,WAAW;QAC1B,IAAI,EAAE,KAAK,CAAC,aAAa;QACzB,QAAQ,EAAE,KAAK,CAAC,iBAAiB;QACjC,eAAe,EAAE,KAAK,CAAC,wBAAwB;QAC/C,KAAK,EAAE,KAAK,CAAC,cAAc;KAC5B,CAAC;AACJ,CAAC"}

package/src/components/SwipeableItem/SwipeableItemCommon.ts

@@ -0,0 +1,80 @@
+import { pick } from "lodash";
+
+export interface SwipeableItemBehindItem {
+  title: string;
+  side: "left" | "right";
+  onPress?: () => void;
+  onSwipe?: () => void;
+  icon?: string;
+  iconSize?: number;
+  backgroundColor?: string;
+  color?: string;
+}
+
+export interface RightSwipeProps {
+  onRightSwipe?: () => void;
+  rightSwipeTitle?: string;
+  rightSwipeIcon?: string;
+  rightSwipeIconSize?: number;
+  rightSwipeBackgroundColor?: string;
+  rightSwipeColor?: string;
+}
+
+export interface LeftSwipeProps {
+  onLeftSwipe?: () => void;
+  leftSwipeTitle?: string;
+  leftSwipeIcon?: string;
+  leftSwipeIconSize?: number;
+  leftSwipeBackgroundColor?: string;
+  leftSwipeColor?: string;
+}
+
+export function extractRightSwipeProps(object: object): RightSwipeProps {
+  return pick(object, [
+    "onRightSwipe",
+    "rightSwipeTitle",
+    "rightSwipeIcon",
+    "rightSwipeIconSize",
+    "rightSwipeBackgroundColor",
+    "rightSwipeColor",
+  ]);
+}
+
+export function extractLeftSwipeProps(object: object): LeftSwipeProps {
+  return pick(object, [
+    "onLeftSwipe",
+    "leftSwipeTitle",
+    "leftSwipeIcon",
+    "leftSwipeIconSize",
+    "leftSwipeBackgroundColor",
+    "leftSwipeColor",
+  ]);
+}
+
+export function rightSwipeToSwipeableItemBehindItem(
+  swipe: RightSwipeProps
+): Omit<SwipeableItemBehindItem, "onPress"> {
+  return {
+    title: swipe.rightSwipeTitle || "",
+    side: "right",
+    onSwipe: swipe.onRightSwipe,
+    icon: swipe.rightSwipeIcon,
+    iconSize: swipe.rightSwipeIconSize,
+    backgroundColor: swipe.rightSwipeBackgroundColor,
+    color: swipe.rightSwipeColor,
+  };
+}
+
+export function leftSwipeToSwipeableItemBehindItem(
+  swipe: LeftSwipeProps
+): Omit<SwipeableItemBehindItem, "onPress"> {
+  return {
+    title: swipe.leftSwipeTitle || "",
+    side: "left",
+    onSwipe: swipe.onLeftSwipe,
+    icon: swipe.leftSwipeIcon,
+    iconSize: swipe.leftSwipeIconSize,
+    backgroundColor: swipe.leftSwipeBackgroundColor,
+    color: swipe.leftSwipeColor,
+  };
+}

package/src/components/SwipeableItem/SwipeableList.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { FlashList } from "@shopify/flash-list";
+import { FlatList } from "react-native";
+export const SwipeableListContext = React.createContext({
+    onStartSwiping: () => { },
+    onStopSwiping: () => { },
+});
+const SwipeableList = ({ disableScrollWhenSwiping = true, listComponent = "FlatList", ...rest }) => {
+    const [isSwiping, setIsSwiping] = React.useState(false);
+    const onStartSwiping = () => {
+        setIsSwiping(true);
+    };
+    const onStopSwiping = () => {
+        setIsSwiping(false);
+    };
+    rest.scrollEnabled = disableScrollWhenSwiping ? !isSwiping : true;
+    const renderListComponent = () => {
+        switch (listComponent) {
+            case "FlatList":
+                return React.createElement(FlatList, { ...rest });
+            case "FlashList":
+                return React.createElement(FlashList, { ...rest });
+        }
+    };
+    return (React.createElement(SwipeableListContext.Provider, { value: { onStartSwiping, onStopSwiping } },
+        React.createElement(React.Fragment, null, renderListComponent())));
+};
+export default SwipeableList;
+//# sourceMappingURL=SwipeableList.js.map

package/src/components/SwipeableItem/SwipeableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableList.js","sourceRoot":"","sources":["SwipeableList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAiB,QAAQ,EAAE,MAAM,cAAc,CAAC;AAoBvD,MAAM,CAAC,MAAM,oBAAoB,GAC/B,KAAK,CAAC,aAAa,CAA2B;IAC5C,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;CACxB,CAAC,CAAC;AAEL,MAAM,aAAa,GAAG,CAAmB,EACvC,wBAAwB,GAAG,IAAI,EAC/B,aAAa,GAAG,UAAU,EAC1B,GAAG,IAAI,EACwD,EAAE,EAAE;IACnE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAElE,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,QAAQ,aAAa,EAAE;YACrB,KAAK,UAAU;gBACb,OAAO,oBAAC,QAAQ,OAAM,IAAyB,GAAI,CAAC;YACtD,KAAK,WAAW;gBACd,OAAO,oBAAC,SAAS,OAAM,IAA0B,GAAI,CAAC;SACzD;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,aAAa,EAAE;QACrE,0CAAG,mBAAmB,EAAE,CAAI,CACE,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/src/components/SwipeableItem/SwipeableList.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { FlashListProps, FlashList } from "@shopify/flash-list";
+import { FlatListProps, FlatList } from "react-native";
+
+type ListComponentType = "FlatList" | "FlashList";
+
+interface AdditionalSwipeableListProps {
+  disableScrollWhenSwiping?: boolean;
+  listComponent?: ListComponentType;
+}
+
+type FlatListSwipeableListProps<T> = FlatListProps<T> &
+  AdditionalSwipeableListProps;
+
+type FlashListSwipeableListProps<T> = FlashListProps<T> &
+  AdditionalSwipeableListProps;
+
+type SwipeableListContextType = {
+  onStartSwiping: () => void;
+  onStopSwiping: () => void;
+};
+
+export const SwipeableListContext =
+  React.createContext<SwipeableListContextType>({
+    onStartSwiping: () => {},
+    onStopSwiping: () => {},
+  });
+
+const SwipeableList = <T extends object>({
+  disableScrollWhenSwiping = true,
+  listComponent = "FlatList",
+  ...rest
+}: FlashListSwipeableListProps<T> | FlatListSwipeableListProps<T>) => {
+  const [isSwiping, setIsSwiping] = React.useState(false);
+
+  const onStartSwiping = () => {
+    setIsSwiping(true);
+  };
+
+  const onStopSwiping = () => {
+    setIsSwiping(false);
+  };
+
+  rest.scrollEnabled = disableScrollWhenSwiping ? !isSwiping : true;
+
+  const renderListComponent = () => {
+    switch (listComponent) {
+      case "FlatList":
+        return <FlatList {...(rest as FlatListProps<T>)} />;
+      case "FlashList":
+        return <FlashList {...(rest as FlashListProps<T>)} />;
+    }
+  };
+
+  return (
+    <SwipeableListContext.Provider value={{ onStartSwiping, onStopSwiping }}>
+      <>{renderListComponent()}</>
+    </SwipeableListContext.Provider>
+  );
+};
+
+export default SwipeableList;

package/src/components/SwipeableItem/index.js

@@ -0,0 +1,4 @@
+export { default as SwipeableItem } from "./SwipeableItem";
+export { default as SwipeableItemButton } from "./SwipeableItemButton";
+export { default as SwipeableList } from "./SwipeableList";
+//# sourceMappingURL=index.js.map