@draftbit/core 47.2.13 → 47.2.14-76dc6c.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.2.13",
+  "version": "47.2.14-76dc6c.2+76dc6c6",
   "description": "Core (non-native) Components",
   "main": "lib/src/index.js",
   "types": "lib/src/index.d.ts",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "47.2.13",
+    "@draftbit/types": "^47.2.14-76dc6c.2+76dc6c6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.4",
@@ -77,5 +77,5 @@
     "node_modules/",
     "lib/"
   ],
-  "gitHead": "6cc1db6c08bbb09546c4540c55c20be8ab46673b"
+  "gitHead": "76dc6c64290b8b38fb6b0728b0b862fa7db7d547"
 }

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 && "revealSwipeDirection" 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 leftSwipeButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableItemButtonProps(child.props) &&
+        child.props.revealSwipeDirection === "left"), [children]);
+    const rightSwipeButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableItemButtonProps(child.props) &&
+        child.props.revealSwipeDirection === "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 (leftSwipeButtons.length > 2 || rightSwipeButtons.length > 2) {
+        throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
+    }
+    if ((leftSwipeButtons.length && isLeftSwipeHandled) ||
+        (rightSwipeButtons.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: isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+            , rightOpenValue: isLeftSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue, leftActivationValue: leftActivationValue || isRightSwipeHandled
+                ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+                : defaultLeftOpenValue, rightActivationValue: rightActivationValue || isLeftSwipeHandled
+                ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+                : defaultRightOpenValue, stopLeftSwipe: stopRightSwipe || defaultLeftOpenValue, stopRightSwipe: stopLeftSwipe || defaultRightOpenValue, onLeftAction: isRightSwipeHandled ? () => { var _a; return (_a = rightSwipe.onSwipeRight) === null || _a === void 0 ? void 0 : _a.call(rightSwipe); } : undefined, onRightAction: isLeftSwipeHandled ? () => { var _a; return (_a = leftSwipe.onSwipeLeft) === null || _a === void 0 ? void 0 : _a.call(leftSwipe); } : undefined, swipeGestureBegan: onStartSwiping, swipeGestureEnded: onStopSwiping, closeOnRowPress: closeOnPress, friction: friction, ...rest },
+            React.createElement(View, { style: styles.behindContainer },
+                React.createElement(View, { style: styles.behindContainerItem }, isRightSwipeHandled
+                    ? renderBehindItem(rightSwipeToSwipeableItemBehindItem(rightSwipe), 0)
+                    : rightSwipeButtons.map((item, index) => renderBehindItem(item.props, index))),
+                React.createElement(View, { style: styles.behindContainerItem }, isLeftSwipeHandled
+                    ? renderBehindItem(leftSwipeToSwipeableItemBehindItem(leftSwipe), 0)
+                    : leftSwipeButtons.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;AAuC/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,sBAAsB,IAAI,MAAM,CAAC;IAC/D,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,gBAAgB,GAAG,KAAK,CAAC,OAAO,CACpC,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,oBAAoB,KAAK,MAAM,CACI,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,kCAAkC,CAAC,KAAK,CAAC,KAAK,CAAC;QAC/C,KAAK,CAAC,KAAK,CAAC,oBAAoB,KAAK,OAAO,CACG,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,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;QAC/D,MAAM,KAAK,CAAC,yDAAyD,CAAC,CAAC;KACxE;IAED,IACE,CAAC,gBAAgB,CAAC,MAAM,IAAI,kBAAkB,CAAC;QAC/C,CAAC,iBAAiB,CAAC,MAAM,IAAI,mBAAmB,CAAC,EACjD;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,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,IAAI,oBAAoB,CAAC,qCAAqC;cAEvG,cAAc,EACZ,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,qBAAqB,EAElE,mBAAmB,EACjB,mBAAmB,IAAI,mBAAmB;gBACxC,CAAC,CAAC,oBAAoB,GAAG,CAAC,yBAAyB,GAAG,GAAG,CAAC,CAAC,+FAA+F;gBAC1J,CAAC,CAAC,oBAAoB,EAE1B,oBAAoB,EAClB,oBAAoB,IAAI,kBAAkB;gBACxC,CAAC,CAAC,qBAAqB,GAAG,CAAC,yBAAyB,GAAG,GAAG,CAAC;gBAC3D,CAAC,CAAC,qBAAqB,EAE3B,aAAa,EAAE,cAAc,IAAI,oBAAoB,EACrD,cAAc,EAAE,aAAa,IAAI,qBAAqB,EACtD,YAAY,EACV,mBAAmB,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,YAAY,0DAAI,CAAA,EAAA,CAAC,CAAC,CAAC,SAAS,EAErE,aAAa,EACX,kBAAkB,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,SAAS,CAAC,WAAW,yDAAI,CAAA,EAAA,CAAC,CAAC,CAAC,SAAS,EAElE,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,mBAAmB;oBAClB,CAAC,CAAC,gBAAgB,CACd,mCAAmC,CAAC,UAAU,CAAC,EAC/C,CAAC,CACF;oBACH,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACpC,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CACpC,CACA;gBACP,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,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACnC,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/{SwipeableView/SwipeableView.tsx → SwipeableItem/SwipeableItem.tsx}

@@ -20,10 +20,33 @@ 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";
+import { SwipeableItemButtonProps } from "./SwipeableItemButton";
+import { SwipeableListContext } from "./SwipeableList";
+import {
+  RightSwipeProps,
+  LeftSwipeProps,
+  SwipeableItemBehindItem,
+  leftSwipeToSwipeableItemBehindItem,
+  rightSwipeToSwipeableItemBehindItem,
+  extractLeftSwipeProps,
+  extractRightSwipeProps,
+} from "./SwipeableItemCommon";
+
+/**
+ * Clarification Regarding left/right directions and what they mean in the context of this component
+ * ------------------------------------------------------------------------------------------------------------
+ * Swipe Left / Left Swipe = Swiping to the left (i.e. Swiping from the right)
+ * Swipe Right / Right Swipe = Swiping to the right (i.e. Swiping from the left)
+ *
+ * This is only applies in the context of swipes, and not anywhere where a direction is refernced.
+ * For example 'rightOpenValue' referes to the open value on the right side.
+ * While 'stopRightSwipe' refers to the stop value of the swipe from left to right, which is on the left side.
+ * This is because one refers to a swipe and one does not, so the word 'right' has different meanings.
+ *
+ * This component is built around this concept to avoid confusion
+ */
 
-export interface SwipeableViewProps extends IconSlot {
+export interface SwipeableItemProps extends IconSlot {
   closeOnPress?: boolean;
   leftOpenValue?: number;
   rightOpenValue?: number;
@@ -44,7 +67,9 @@ export interface SwipeableViewProps extends IconSlot {
   theme: Theme;
 }
 
-const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
+type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
+
+const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   theme,
   style,
   children,
@@ -60,18 +85,19 @@ const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
   friction = 20,
   ...rest
 }) => {
-  const instanceOfSwipeableViewButtonProps = (
+  const instanceOfSwipeableItemButtonProps = (
     object: any
-  ): object is SwipeableViewButtonProps => {
-    return "title" in object && "side" in object && "onPress" in object;
+  ): object is SwipeableItemButtonProps => {
+    return "title" in object && "revealSwipeDirection" in object;
   };
 
-  const instanceOfSwipeableViewSwipeHandlerProps = (
-    object: any
-  ): object is SwipeableViewSwipeHandlerProps => {
-    return "title" in object && "side" in object && "onSwipe" 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 } =
@@ -98,47 +124,25 @@ const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
   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(
+  const leftSwipeButtons = React.useMemo(
     () =>
       React.Children.toArray(children).filter(
         (child) =>
           React.isValidElement(child) &&
-          instanceOfSwipeableViewButtonProps(child.props) &&
-          child.props.side === "right"
-      ) as React.ReactElement<SwipeableViewButtonProps>[],
+          instanceOfSwipeableItemButtonProps(child.props) &&
+          child.props.revealSwipeDirection === "left"
+      ) as React.ReactElement<SwipeableItemButtonProps>[],
     [children]
   );
 
-  const leftSwipeHandlers = React.useMemo(
+  const rightSwipeButtons = 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>[],
+          instanceOfSwipeableItemButtonProps(child.props) &&
+          child.props.revealSwipeDirection === "right"
+      ) as React.ReactElement<SwipeableItemButtonProps>[],
     [children]
   );
 
@@ -147,58 +151,53 @@ const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
       React.Children.toArray(children).filter(
         (child) =>
           React.isValidElement(child) &&
-          !instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
-          !instanceOfSwipeableViewButtonProps(child.props)
+          !instanceOfSwipeableItemButtonProps(child.props)
       ),
     [children]
   );
 
-  if (leftButtons.length > 2 || rightButtons.length > 2) {
-    throw Error("Cannot have more than 2 buttons per side");
-  }
+  const leftSwipe = extractLeftSwipeProps(rest);
+  const rightSwipe = extractRightSwipeProps(rest);
+
+  const isLeftSwipeHandled = !isEmptyObject(leftSwipe);
+  const isRightSwipeHandled = !isEmptyObject(rightSwipe);
 
-  if (leftSwipeHandlers.length > 1 || rightSwipeHandlers.length > 1) {
-    throw Error("Cannot have more than 1 swiper handler per side");
+  if (leftSwipeButtons.length > 2 || rightSwipeButtons.length > 2) {
+    throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
   }
 
   if (
-    (leftButtons.length && leftSwipeHandlers.length) ||
-    (rightButtons.length && rightSwipeHandlers.length)
+    (leftSwipeButtons.length && isLeftSwipeHandled) ||
+    (rightSwipeButtons.length && isRightSwipeHandled)
   ) {
-    throw Error("Cannot combine swiper handler and buttons on the same side");
+    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 button/item. Used for both buttons and swipe handler
-  const renderBehindItem = (
-    props: SwipeableViewSwipeHandlerProps | SwipeableViewButtonProps,
-    index: number
-  ) => (
+  //Renders a single 'behind' item. Used for both buttons and swipe handler
+  const renderBehindItem = (item: SwipeableItemBehindItem, index: number) => (
     <Pressable
       key={index.toString()}
-      onPress={(props as any).onPress}
+      onPress={(item as any).onPress}
       style={[
         styles.buttonContainer,
-        { backgroundColor: props.backgroundColor || theme.colors.primary },
+        { backgroundColor: item.backgroundColor || theme.colors.primary },
       ]}
     >
-      {props.icon && (
+      {item.icon && (
         <Icon
-          name={props.icon}
-          size={props.iconSize || 25}
-          color={props.color || theme.colors.surface}
+          name={item.icon}
+          size={item.iconSize || 25}
+          color={item.color || theme.colors.surface}
         />
       )}
-      <Text
-        style={[textStyles, { color: props.color || theme.colors.surface }]}
-      >
-        {props.title}
+      <Text style={[textStyles, { color: item.color || theme.colors.surface }]}>
+        {item.title}
       </Text>
     </Pressable>
   );
 
-  const isLeftSwipeHandler = !!leftSwipeHandlers.length;
-  const isRightSwipeHandler = !!rightSwipeHandlers.length;
-
   const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
   const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
 
@@ -212,47 +211,55 @@ const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
       {/*@ts-ignore*/}
       <SwipeRow
         leftOpenValue={
-          isLeftSwipeHandler ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+          isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
         }
         rightOpenValue={
-          isRightSwipeHandler ? 0 : rightOpenValue || defaultRightOpenValue
+          isLeftSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue
         }
         leftActivationValue={
-          leftActivationValue || isLeftSwipeHandler
+          leftActivationValue || isRightSwipeHandled
             ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
             : defaultLeftOpenValue
         }
         rightActivationValue={
-          rightActivationValue || isRightSwipeHandler
+          rightActivationValue || isLeftSwipeHandled
             ? defaultRightOpenValue * (swipeActivationPercentage / 100)
             : defaultRightOpenValue
         }
-        stopLeftSwipe={stopLeftSwipe || defaultLeftOpenValue}
-        stopRightSwipe={stopRightSwipe || defaultRightOpenValue}
+        stopLeftSwipe={stopRightSwipe || defaultLeftOpenValue}
+        stopRightSwipe={stopLeftSwipe || defaultRightOpenValue}
         onLeftAction={
-          isLeftSwipeHandler
-            ? () => leftSwipeHandlers[0].props.onSwipe?.()
-            : undefined
+          isRightSwipeHandled ? () => rightSwipe.onSwipeRight?.() : undefined
         }
         onRightAction={
-          isRightSwipeHandler
-            ? () => rightSwipeHandlers[0].props.onSwipe?.()
-            : undefined
+          isLeftSwipeHandled ? () => leftSwipe.onSwipeLeft?.() : undefined
         }
+        swipeGestureBegan={onStartSwiping}
+        swipeGestureEnded={onStopSwiping}
         closeOnRowPress={closeOnPress}
         friction={friction}
         {...rest}
       >
         <View style={styles.behindContainer}>
           <View style={styles.behindContainerItem}>
-            {(isLeftSwipeHandler ? leftSwipeHandlers : leftButtons).map(
-              (item, index) => renderBehindItem(item.props, index)
-            )}
+            {isRightSwipeHandled
+              ? renderBehindItem(
+                  rightSwipeToSwipeableItemBehindItem(rightSwipe),
+                  0
+                )
+              : rightSwipeButtons.map((item, index) =>
+                  renderBehindItem(item.props, index)
+                )}
           </View>
           <View style={styles.behindContainerItem}>
-            {(isRightSwipeHandler ? rightSwipeHandlers : rightButtons).map(
-              (item, index) => renderBehindItem(item.props, index)
-            )}
+            {isLeftSwipeHandled
+              ? renderBehindItem(
+                  leftSwipeToSwipeableItemBehindItem(leftSwipe),
+                  0
+                )
+              : leftSwipeButtons.map((item, index) =>
+                  renderBehindItem(item.props, index)
+                )}
           </View>
         </View>
         <View
@@ -298,4 +305,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withTheme(SwipeableView);
+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, [
+        "onSwipeRight",
+        "rightSwipeTitle",
+        "rightSwipeIcon",
+        "rightSwipeIconSize",
+        "rightSwipeBackgroundColor",
+        "rightSwipeColor",
+    ]);
+}
+export function extractLeftSwipeProps(object) {
+    return pick(object, [
+        "onSwipeLeft",
+        "leftSwipeTitle",
+        "leftSwipeIcon",
+        "leftSwipeIconSize",
+        "leftSwipeBackgroundColor",
+        "leftSwipeColor",
+    ]);
+}
+export function rightSwipeToSwipeableItemBehindItem(swipe) {
+    return {
+        title: swipe.rightSwipeTitle || "",
+        revealSwipeDirection: "right",
+        onSwipe: swipe.onSwipeRight,
+        icon: swipe.rightSwipeIcon,
+        iconSize: swipe.rightSwipeIconSize,
+        backgroundColor: swipe.rightSwipeBackgroundColor,
+        color: swipe.rightSwipeColor,
+    };
+}
+export function leftSwipeToSwipeableItemBehindItem(swipe) {
+    return {
+        title: swipe.leftSwipeTitle || "",
+        revealSwipeDirection: "left",
+        onSwipe: swipe.onSwipeLeft,
+        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,oBAAoB,EAAE,OAAO;QAC7B,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,oBAAoB,EAAE,MAAM;QAC5B,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;
+  revealSwipeDirection: "left" | "right";
+  onPress?: () => void;
+  onSwipe?: () => void;
+  icon?: string;
+  iconSize?: number;
+  backgroundColor?: string;
+  color?: string;
+}
+
+export interface RightSwipeProps {
+  onSwipeRight?: () => void;
+  rightSwipeTitle?: string;
+  rightSwipeIcon?: string;
+  rightSwipeIconSize?: number;
+  rightSwipeBackgroundColor?: string;
+  rightSwipeColor?: string;
+}
+
+export interface LeftSwipeProps {
+  onSwipeLeft?: () => void;
+  leftSwipeTitle?: string;
+  leftSwipeIcon?: string;
+  leftSwipeIconSize?: number;
+  leftSwipeBackgroundColor?: string;
+  leftSwipeColor?: string;
+}
+
+export function extractRightSwipeProps(object: object): RightSwipeProps {
+  return pick(object, [
+    "onSwipeRight",
+    "rightSwipeTitle",
+    "rightSwipeIcon",
+    "rightSwipeIconSize",
+    "rightSwipeBackgroundColor",
+    "rightSwipeColor",
+  ]);
+}
+
+export function extractLeftSwipeProps(object: object): LeftSwipeProps {
+  return pick(object, [
+    "onSwipeLeft",
+    "leftSwipeTitle",
+    "leftSwipeIcon",
+    "leftSwipeIconSize",
+    "leftSwipeBackgroundColor",
+    "leftSwipeColor",
+  ]);
+}
+
+export function rightSwipeToSwipeableItemBehindItem(
+  swipe: RightSwipeProps
+): Omit<SwipeableItemBehindItem, "onPress"> {
+  return {
+    title: swipe.rightSwipeTitle || "",
+    revealSwipeDirection: "right",
+    onSwipe: swipe.onSwipeRight,
+    icon: swipe.rightSwipeIcon,
+    iconSize: swipe.rightSwipeIconSize,
+    backgroundColor: swipe.rightSwipeBackgroundColor,
+    color: swipe.rightSwipeColor,
+  };
+}
+
+export function leftSwipeToSwipeableItemBehindItem(
+  swipe: LeftSwipeProps
+): Omit<SwipeableItemBehindItem, "onPress"> {
+  return {
+    title: swipe.leftSwipeTitle || "",
+    revealSwipeDirection: "left",
+    onSwipe: swipe.onSwipeLeft,
+    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"}