@tapcart/mobile-components 0.7.92 → 0.7.93

package/dist/components/ui/swipeable-list-item.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+export interface SwipeAction {
+    icon?: ReactNode;
+    color?: string;
+    onPress: () => void;
+    closeOnAction?: boolean;
+    key?: string;
+}
+export interface SwipeableListItemProps {
+    children: ReactNode;
+    actions: SwipeAction[];
+    actionWidth?: number;
+    threshold?: number;
+}
+declare const SwipeableListItem: React.FC<SwipeableListItemProps>;
+export { SwipeableListItem };
+//# sourceMappingURL=swipeable-list-item.d.ts.map

package/dist/components/ui/swipeable-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeable-list-item.d.ts","sourceRoot":"","sources":["../../../components/ui/swipeable-list-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwHvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/swipeable-list-item.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useSwipeable } from "react-swipeable";
+const SwipeableListItem = ({ children, actions = [], actionWidth = 52, threshold = 0.3, }) => {
+    const [offset, setOffset] = useState(0);
+    const [isOpen, setIsOpen] = useState(false);
+    const totalActionsWidth = actionWidth * actions.length;
+    const thresholdPixels = totalActionsWidth * threshold;
+    const itemRef = useRef(null);
+    const closeItem = () => {
+        setIsOpen(false);
+        setOffset(0);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (itemRef.current && !itemRef.current.contains(event.target)) {
+                closeItem();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handlers = useSwipeable({
+        onSwiping: (event) => {
+            let newOffset = 0;
+            if (event.dir === "Left") {
+                newOffset = Math.min(event.absX, totalActionsWidth);
+            }
+            else if (event.dir === "Right" && isOpen) {
+                newOffset = Math.max(totalActionsWidth - event.absX, 0);
+            }
+            setOffset(newOffset);
+        },
+        onSwipedLeft: () => {
+            if (offset > thresholdPixels) {
+                setIsOpen(true);
+                setOffset(totalActionsWidth);
+            }
+            else {
+                closeItem();
+            }
+        },
+        onSwipedRight: () => closeItem(),
+        trackMouse: true,
+        trackTouch: true,
+        delta: 10,
+        preventScrollOnSwipe: true,
+        rotationAngle: 0,
+    });
+    return (_jsxs("div", Object.assign({ ref: itemRef, className: "relative overflow-hidden" }, { children: [_jsx("div", Object.assign({}, handlers, { className: "w-full transition-transform duration-200 ease-out", style: {
+                    transform: `translateX(-${offset}px)`,
+                    transition: offset === 0 || offset === totalActionsWidth
+                        ? "transform 0.2s ease-out"
+                        : "none",
+                }, role: "button", "aria-expanded": isOpen }, { children: children })), _jsx("div", Object.assign({ className: "absolute right-0 top-0 h-full flex", "aria-label": "Action buttons", style: { visibility: offset > 0 ? "visible" : "hidden" } }, { children: actions.map((action, index) => {
+                    const actionStartPosition = index * actionWidth;
+                    const isActionVisible = offset > actionStartPosition;
+                    return (_jsx("div", Object.assign({ className: "h-full flex items-center justify-center overflow-hidden", style: {
+                            width: `${actionWidth}px`,
+                            backgroundColor: action.color || "#e5e5e5",
+                            maxWidth: isActionVisible
+                                ? `${Math.min(offset - actionStartPosition, actionWidth)}px`
+                                : "0px",
+                            opacity: isActionVisible ? 1 : 0,
+                            transition: "max-width 0.1s ease-out, opacity 0.1s ease-out",
+                        } }, { children: _jsx("button", Object.assign({ onClick: () => {
+                                action.onPress();
+                                if (action.closeOnAction !== false) {
+                                    closeItem();
+                                }
+                            }, className: "w-full h-full flex items-center justify-center", style: { minWidth: `${actionWidth}px` } }, { children: action.icon && _jsx(_Fragment, { children: action.icon }) })) }), action.key || index));
+                }) }))] })));
+};
+SwipeableListItem.displayName = "SwipeableListItem";
+export { SwipeableListItem };

package/dist/index.d.ts

@@ -72,4 +72,5 @@ export * from "./components/hooks/use-nosto-recommendation";
 export * from "./components/libs/sort-filter/search-integration";
 export * from "./components/ui/tap";
 export * from "./components/ui/circular-progress";
+export * from "./components/ui/swipeable-list-item";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -73,3 +73,4 @@ export * from "./components/hooks/use-nosto-recommendation";
 export * from "./components/libs/sort-filter/search-integration";
 export * from "./components/ui/tap";
 export * from "./components/ui/circular-progress";
+export * from "./components/ui/swipeable-list-item";

package/dist/styles.css

@@ -2218,6 +2218,9 @@ video {
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 @keyframes enter {
 
   from {
@@ -2250,6 +2253,9 @@ video {
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 .paused {
   animation-play-state: paused;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.92",
+  "version": "0.7.93",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -77,17 +77,18 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.2",
-    "embla-carousel-react": "^8.3.0",
     "embla-carousel-autoplay": "8.5.2",
     "embla-carousel-fade": "8.5.2",
+    "embla-carousel-react": "^8.3.0",
     "lucide-react": "^0.248.0",
     "next": "^14.2.5",
-    "react-circular-progressbar": "2.2.0",
     "next-themes": "^0.2.1",
     "pluralize": "^8.0.0",
     "postcss-cli": "^11.0.0",
+    "react-circular-progressbar": "2.2.0",
     "react-intersection-observer": "^9.10.2",
     "react-svg": "^16.1.34",
+    "react-swipeable": "^7.0.2",
     "react-virtual": "^2.10.4",
     "swr": "^2.2.5",
     "tailwind-merge": "^1.13.2",