@tapcart/mobile-components 0.7.55 → 0.7.57

package/dist/components/ui/virtual-grid.d.ts

@@ -3,13 +3,16 @@ import { type VariantProps } from "class-variance-authority";
 interface GridType {
     className: any;
     children: React.ReactNode;
+    isLoadingMore: boolean;
+    loaderItem: React.ReactNode;
     overscan?: number;
+    estimatedHeight?: number;
 }
 declare const virtualGridVariants: (props?: ({
     columns?: 1 | 2 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface VirtualGridProps extends GridType, VariantProps<typeof virtualGridVariants> {
 }
-declare function VirtualGrid({ className, columns, children, overscan, ...props }: VirtualGridProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualGrid({ className, columns, children, overscan, estimatedHeight, isLoadingMore, loaderItem, ...props }: VirtualGridProps): import("react/jsx-runtime").JSX.Element;
 export { VirtualGrid, virtualGridVariants };
 //# sourceMappingURL=virtual-grid.d.ts.map

package/dist/components/ui/virtual-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,UAAU,QAAQ;IAChB,SAAS,EAAE,GAAG,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,mBAAmB;;mFAYvB,CAAA;AAEF,MAAM,WAAW,gBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiDlB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,UAAU,QAAQ;IAChB,SAAS,EAAE,GAAG,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,QAAA,MAAM,mBAAmB;;mFAYvB,CAAA;AAEF,MAAM,WAAW,gBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAa,EACb,eAAqB,EACrB,aAAa,EACb,UAAU,EACV,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAkElB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/ui/virtual-grid.js

@@ -29,17 +29,20 @@ const virtualGridVariants = cva("grid", {
     },
 });
 function VirtualGrid(_a) {
-    var { className, columns, children, overscan = 50 } = _a, props = __rest(_a, ["className", "columns", "children", "overscan"]);
+    var { className, columns, children, overscan = 50, estimatedHeight = 375, isLoadingMore, loaderItem } = _a, props = __rest(_a, ["className", "columns", "children", "overscan", "estimatedHeight", "isLoadingMore", "loaderItem"]);
+    const NUM_LOADER_ITEMS = 8;
+    const col = columns || 2;
     const parentRef = React.useRef(null);
     const childrenArray = React.Children.toArray(children);
-    const rowCount = Math.ceil(childrenArray.length / (columns || 2));
+    const rowCount = Math.ceil(childrenArray.length / col);
+    const loaderRowCount = Math.ceil(NUM_LOADER_ITEMS / col);
+    const totalItems = isLoadingMore ? rowCount + loaderRowCount : rowCount;
     const rowVirtualizer = useVirtual({
-        size: rowCount,
+        size: totalItems,
         parentRef,
-        estimateSize: React.useCallback(() => 100, []),
+        estimateSize: React.useCallback(() => estimatedHeight, []),
         overscan,
     });
-    const col = columns || 2;
     React.useEffect(() => {
         rowVirtualizer.measure();
     }, [childrenArray.length]);
@@ -47,6 +50,10 @@ function VirtualGrid(_a) {
                     height: rowVirtualizer.totalSize,
                 } }, props, { children: rowVirtualizer.virtualItems.map((virtualRow) => {
                     const rowStartIndex = virtualRow.index * col;
+                    // Render loader as a full row if we're loading and this is the last virtual row
+                    if (isLoadingMore && virtualRow.index === rowCount - 1) {
+                        return (_jsx(React.Fragment, { children: Array.from({ length: NUM_LOADER_ITEMS }).map((_, index) => (_jsx("div", Object.assign({ ref: virtualRow.measureRef }, { children: loaderItem }), index))) }, "loader"));
+                    }
                     return (_jsx(React.Fragment, { children: Array.from({ length: col }).map((_, colIndex) => {
                             const index = rowStartIndex + colIndex;
                             if (index >= childrenArray.length)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.55",
+  "version": "0.7.57",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -11,9 +11,23 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Tapcart Inc.",
   "homepage": "https://tapcart.com",
+  "scripts": {
+    "clean": "rm -rf dist node_modules",
+    "lint": "eslint \"**/*.ts*\"",
+    "ui:add": "pnpm dlx shadcn-ui@latest add",
+    "build:styles": "postcss styles/globals.css -o dist/styles.css",
+    "build:ts": "tsc -p tsconfig.json && tsc-alias",
+    "build": "pnpm run build:ts && pnpm run build:styles",
+    "dev:ts": "tsc -w -p tsconfig.json",
+    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
+    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
+    "test": "jest",
+    "test:silent": "jest --silent",
+    "test:watch": "jest --watch"
+  },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.3.1",
@@ -23,20 +37,20 @@
     "@types/pluralize": "^0.0.33",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "app-studio-types": "workspace:*",
     "autoprefixer": "^10.4.14",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^7.32.0",
+    "eslint-config-custom": "workspace:*",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
     "ts-jest": "^29.2.5",
     "tsc-alias": "^1.8.10",
-    "typescript": "^4.5.2",
-    "app-studio-types": "0.0.6",
-    "tsconfig": "0.0.0",
-    "eslint-config-custom": "0.0.0"
+    "tsconfig": "workspace:*",
+    "typescript": "^4.5.2"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
@@ -76,19 +90,5 @@
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6",
     "vaul": "0.9.1"
-  },
-  "scripts": {
-    "clean": "rm -rf dist node_modules",
-    "lint": "eslint \"**/*.ts*\"",
-    "ui:add": "pnpm dlx shadcn-ui@latest add",
-    "build:styles": "postcss styles/globals.css -o dist/styles.css",
-    "build:ts": "tsc -p tsconfig.json && tsc-alias",
-    "build": "pnpm run build:ts && pnpm run build:styles",
-    "dev:ts": "tsc -w -p tsconfig.json",
-    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
-    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
-    "test": "jest",
-    "test:silent": "jest --silent",
-    "test:watch": "jest --watch"
   }
-}
+}

package/dist/components/hooks/use-click-outside.d.ts

@@ -1,6 +0,0 @@
-import React from "react"
-export declare function useClickOutside(
-  ref: React.RefObject<HTMLElement>,
-  callback: () => void
-): void
-//# sourceMappingURL=use-click-outside.d.ts.map

package/dist/components/hooks/use-click-outside.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAE,IAAI,CAa5F"}

package/dist/components/hooks/use-click-outside.js

@@ -1,15 +0,0 @@
-"use client"
-import React from "react"
-export function useClickOutside(ref, callback) {
-  React.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback()
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [ref, callback])
-}

package/dist/components/hooks/use-outside-click.d.ts

@@ -1,7 +0,0 @@
-import React from "react"
-declare const useClickOutside: (
-  ref: React.RefObject<HTMLElement>,
-  callback: () => void
-) => void
-export default useClickOutside
-//# sourceMappingURL=use-outside-click.d.ts.map

package/dist/components/hooks/use-outside-click.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-outside-click.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-outside-click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,YAAY,MAAM,IAAI,SAa/E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/hooks/use-outside-click.js

@@ -1,16 +0,0 @@
-"use client"
-import React from "react"
-const useClickOutside = (ref, callback) => {
-  React.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback()
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [ref, callback])
-}
-export default useClickOutside

package/dist/components/hooks/use-tap.d.ts

@@ -1,8 +0,0 @@
-import React from "react"
-declare const useTap: (tapThreshold?: number) => {
-  onTap: (handler: (event: any) => void) => (event: any) => void
-  isPressed: boolean
-  ref: React.MutableRefObject<null>
-}
-export { useTap }
-//# sourceMappingURL=use-tap.d.ts.map

package/dist/components/hooks/use-tap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-tap.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-tap.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAuFvE,QAAA,MAAM,MAAM;6BAuBkC,GAAG,KAAK,IAAI,aACvC,GAAG;;;CAerB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/hooks/use-tap.js

@@ -1,100 +0,0 @@
-"use client"
-import { useState, useEffect, useCallback, useRef } from "react"
-// Shared manager for all instances of the hook
-const tapManager = (() => {
-  const elements = new Map()
-  let isListening = false
-  const startListening = () => {
-    if (isListening) return
-    const handleTouchStart = (e) => {
-      const touch = e.touches[0]
-      elements.forEach((data, el) => {
-        if (el.contains(touch.target)) {
-          data.touchStarted = true
-          data.touchMoved = false
-          data.startPosition = { x: touch.clientX, y: touch.clientY }
-          // Don't set isPressed here, wait to determine if it's a tap or drag
-        }
-      })
-    }
-    const handleTouchMove = (e) => {
-      const touch = e.touches[0]
-      elements.forEach((data, el) => {
-        if (data.touchStarted) {
-          const deltaX = Math.abs(touch.clientX - data.startPosition.x)
-          const deltaY = Math.abs(touch.clientY - data.startPosition.y)
-          if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
-            data.touchMoved = true
-            data.setIsPressed(false)
-          }
-        }
-      })
-    }
-    const handleTouchEnd = () => {
-      elements.forEach((data) => {
-        if (data.touchStarted) {
-          data.touchStarted = false
-          if (!data.touchMoved) {
-            // It's a tap, set isPressed briefly
-            data.setIsPressed(true)
-            setTimeout(() => data.setIsPressed(false), 100)
-          }
-        }
-      })
-    }
-    document.addEventListener("touchstart", (e) => handleTouchStart(e), {
-      passive: true,
-    })
-    document.addEventListener("touchmove", (e) => handleTouchMove(e), {
-      passive: true,
-    })
-    document.addEventListener("touchend", () => handleTouchEnd(), {
-      passive: true,
-    })
-    isListening = true
-  }
-  return {
-    register: (el, data) => {
-      elements.set(el, data)
-      startListening()
-    },
-    unregister: (el) => {
-      elements.delete(el)
-    },
-    elements,
-  }
-})()
-const useTap = (tapThreshold = 10) => {
-  const [isPressed, setIsPressed] = useState(false)
-  const elementRef = useRef(null)
-  useEffect(() => {
-    const element = elementRef.current
-    if (!element) return
-    const data = {
-      touchStarted: false,
-      touchMoved: false,
-      startPosition: { x: 0, y: 0 },
-      setIsPressed,
-      tapThreshold,
-    }
-    tapManager.register(element, data)
-    return () => {
-      tapManager.unregister(element)
-    }
-  }, [tapThreshold])
-  const onTap = useCallback((handler) => {
-    return (event) => {
-      const data = tapManager.elements.get(elementRef.current)
-      if (!data) return
-      if (event.type === "touchend" && !data.touchMoved) {
-        handler(event)
-      } else if (event.type === "click" && !data.touchStarted) {
-        handler(event)
-        setIsPressed(true)
-        setTimeout(() => setIsPressed(false), 100)
-      }
-    }
-  }, [])
-  return { onTap, isPressed, ref: elementRef }
-}
-export { useTap }