ps99-api 2.6.4 → 2.7.0

package/example-web/react2/src/components/CollectionConfigIndex.tsx

@@ -13,6 +13,7 @@ import { FixedSizeGrid, FixedSizeList } from "./ReactWindowMock";
 import AutoSizer from "./AutoSizer";
 import { useScrollPersistence } from "../context/ScrollContext";
 import { useCollapsibleHeader } from '../hooks/useCollapsibleHeader';
+import { usePullToRefresh } from '../hooks/usePullToRefresh';
 import { formatGigantix } from "../utils/gigantix";
 
 // const FixedSizeGrid = Grid;
@@ -491,6 +492,20 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
     disabled: isShortContent // Disable collapsing if content is short
   });
 
+  // Pull To Refresh Logic
+  const { isRefreshing, pullDistance, onTouchStart, onTouchMove, onTouchEnd, updateScrollTop } = usePullToRefresh({
+    onRefresh: async () => {
+      // Simple reload to fetch new data
+      window.location.reload();
+    }
+  });
+
+  // Update scroll top for PTR
+  const onScroll = (scrollInfo: { scrollOffset?: number, scrollTop?: number, scrollHeight?: number, clientHeight?: number }) => {
+    handleScroll(scrollInfo);
+    updateScrollTop(scrollInfo.scrollTop ?? scrollInfo.scrollOffset ?? 0);
+  };
+
   // Loading State
   if (loading) {
     return (
@@ -656,6 +671,31 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
         position: 'relative' // Context for absolute header
       }}
     >
+      {/* Pull To Refresh Indicator */}
+      {(pullDistance > 0 || isRefreshing) && (
+        <div style={{
+          position: 'absolute',
+          top: showHeader ? headerHeight + 5 : 0, // Adjust based on header
+          left: 0,
+          right: 0,
+          height: isRefreshing ? 60 : pullDistance,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          backgroundColor: '#f5f5f5',
+          zIndex: 5,
+          transition: isDragging.current ? 'none' : 'height 0.3s ease'
+        }}>
+          {isRefreshing ? (
+            <div className="spinner" style={{ width: 24, height: 24, border: '3px solid #ccc', borderTopColor: '#333', borderRadius: '50%' }}></div>
+          ) : (
+            <span style={{ opacity: Math.min(pullDistance / 60, 1), transform: `rotate(${pullDistance * 2}deg)` }}>
+              ⬇️
+            </span>
+          )}
+        </div>
+      )}
       {/* Header Bar inside Window */}
       <div
         ref={headerRef}
@@ -828,8 +868,11 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
                   itemSize={80} // List view row height
                   width={width}
                   initialScrollOffset={initialScrollOffset}
-                  onScroll={handleScroll}
+                  onScroll={onScroll} // Use wrapped handler
                   bottomPadding={120} // Account for Android footer/nav
+                  onTouchStart={onTouchStart}
+                  onTouchMove={onTouchMove}
+                  onTouchEnd={onTouchEnd}
                   itemData={{
                     items: finalItems,
                     navigate,
@@ -861,9 +904,12 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
                       rowHeight={220}
                       width={width}
                       initialScrollOffset={initialScrollOffset}
-                      onScroll={handleScroll}
+                      onScroll={onScroll} // Use wrapped handler
                       style={{ overflowX: "hidden" }}
                       bottomPadding={120} // Account for Android footer/nav
+                      onTouchStart={onTouchStart}
+                      onTouchMove={onTouchMove}
+                      onTouchEnd={onTouchEnd}
                       itemData={{
                         items: finalItems,
                         columnCount: colCount,

package/example-web/react2/src/components/ReactWindowMock.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 
-export const FixedSizeList = ({ children, itemCount, itemSize, height, width, onScroll, initialScrollOffset, itemData, bottomPadding = 0 }: any) => {
+export const FixedSizeList = ({ children, itemCount, itemSize, height, width, onScroll, initialScrollOffset, itemData, bottomPadding = 0, onTouchStart, onTouchMove, onTouchEnd }: any) => {
     const items = [];
     for (let i = 0; i < itemCount; i++) {
         items.push(
@@ -22,7 +22,14 @@ export const FixedSizeList = ({ children, itemCount, itemSize, height, width, on
         <div
             ref={ref}
             style={{ height, width, overflow: "auto", position: 'relative' }}
-            onScroll={(e) => onScroll && onScroll({ scrollOffset: e.currentTarget.scrollTop })}
+            onScroll={(e) => onScroll && onScroll({
+                scrollOffset: e.currentTarget.scrollTop,
+                scrollHeight: e.currentTarget.scrollHeight,
+                clientHeight: e.currentTarget.clientHeight
+            })}
+            onTouchStart={onTouchStart}
+            onTouchMove={onTouchMove}
+            onTouchEnd={onTouchEnd}
         >
             {items}
             {bottomPadding > 0 && <div style={{ height: bottomPadding }} />}
@@ -30,7 +37,7 @@ export const FixedSizeList = ({ children, itemCount, itemSize, height, width, on
     );
 };
 
-export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, rowHeight, height, width, onScroll, initialScrollOffset, itemData, style, bottomPadding = 0 }: any) => {
+export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, rowHeight, height, width, onScroll, initialScrollOffset, itemData, style, bottomPadding = 0, onTouchStart, onTouchMove, onTouchEnd }: any) => {
     const items = [];
     for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
         for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
@@ -64,7 +71,14 @@ export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, ro
         <div
             ref={ref}
             style={{ height, width, overflowY: "auto", overflowX: "hidden", position: 'relative', ...style }}
-            onScroll={(e) => onScroll && onScroll({ scrollTop: e.currentTarget.scrollTop })}
+            onScroll={(e) => onScroll && onScroll({
+                scrollTop: e.currentTarget.scrollTop,
+                scrollHeight: e.currentTarget.scrollHeight,
+                clientHeight: e.currentTarget.clientHeight
+            })}
+            onTouchStart={onTouchStart}
+            onTouchMove={onTouchMove}
+            onTouchEnd={onTouchEnd}
         >
             <div style={{ height: rowCount * rowHeight + bottomPadding, width: columnWidth * columnCount }}>
                 {items}

package/example-web/react2/src/hooks/useCollapsibleHeader.ts

@@ -16,7 +16,7 @@ export const useCollapsibleHeader = (options: UseCollapsibleHeaderOptions = {})
     const lastScrollTop = useRef(0);
     const scrollRef = useRef<number>(0);
 
-    const handleScroll = ({ scrollOffset, scrollTop }: { scrollOffset?: number, scrollTop?: number }) => {
+    const handleScroll = ({ scrollOffset, scrollTop, scrollHeight, clientHeight }: { scrollOffset?: number, scrollTop?: number, scrollHeight?: number, clientHeight?: number }) => {
         if (disabled) {
             setShowHeader(true);
             return;
@@ -25,6 +25,14 @@ export const useCollapsibleHeader = (options: UseCollapsibleHeaderOptions = {})
         const currentScrollTop = scrollTop ?? scrollOffset ?? 0;
         const scrollDelta = currentScrollTop - lastScrollTop.current;
 
+        // Bounce Protection: Detect if we are near the bottom
+        // If we are at the bottom, a "scroll up" might be a bounce.
+        let isNearBottom = false;
+        if (scrollHeight && clientHeight) {
+            // Buffer of 100px to be safe
+            isNearBottom = (currentScrollTop + clientHeight) >= (scrollHeight - 100);
+        }
+
         // Threshold to prevent jitter
         if (Math.abs(scrollDelta) > threshold) {
             if (scrollDelta > 0 && currentScrollTop > triggerStart) {
@@ -32,7 +40,10 @@ export const useCollapsibleHeader = (options: UseCollapsibleHeaderOptions = {})
                 setShowHeader(false);
             } else if (scrollDelta < 0) {
                 // Scrolling Up
-                setShowHeader(true);
+                // ONLY show header if we are NOT at the very bottom (prevent bounce triggering it)
+                if (!isNearBottom) {
+                    setShowHeader(true);
+                }
             }
         }
         lastScrollTop.current = currentScrollTop;

package/example-web/react2/src/hooks/usePullToRefresh.ts

@@ -0,0 +1,87 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface PullToRefreshOptions {
+    onRefresh: () => Promise<void> | void;
+    threshold?: number; // px to pull down to trigger
+}
+
+export const usePullToRefresh = ({ onRefresh, threshold = 80 }: PullToRefreshOptions) => {
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [pullDistance, setPullDistance] = useState(0);
+    const startY = useRef<number>(0);
+    const isDragging = useRef(false);
+
+    // We need to know the scroll position to only allow pull when at top
+    const scrollTopRef = useRef(0);
+
+    const onTouchStart = (e: React.TouchEvent) => {
+        if (scrollTopRef.current === 0) {
+            startY.current = e.touches[0].clientY;
+            isDragging.current = true;
+        }
+    };
+
+    const onTouchMove = (e: React.TouchEvent) => {
+        if (!isDragging.current) return;
+        if (scrollTopRef.current > 0) {
+            isDragging.current = false;
+            setPullDistance(0);
+            return;
+        }
+
+        const currentY = e.touches[0].clientY;
+        const diff = currentY - startY.current;
+
+        if (diff > 0) {
+            // Resistance effect
+            setPullDistance(Math.min(diff * 0.5, threshold * 1.5));
+            // Prevent native scroll if we are pulling down? 
+            // Might interfere with normal scrolling if not careful.
+            // But since scrollTop is 0, pulling down usually does nothing in overflow:auto unless overscroll-behavior is set.
+        }
+    };
+
+    const onTouchEnd = async () => {
+        if (!isDragging.current) return;
+        isDragging.current = false;
+
+        if (pullDistance > threshold) {
+            setIsRefreshing(true);
+            setPullDistance(threshold); // Snap to threshold
+            try {
+                await onRefresh();
+            } finally {
+                setIsRefreshing(false);
+                setPullDistance(0);
+            }
+        } else {
+            setPullDistance(0);
+        }
+    };
+
+    const updateScrollTop = (val: number) => {
+        scrollTopRef.current = val;
+    };
+
+    // Expose boolean for UI
+    const [isDraggingState, setIsDraggingState] = useState(false);
+
+    // Sync ref to state for UI (optional, or just use state)
+    // Actually, let's just use state for the critical UI part if needed, 
+    // but typically we want ref for perf on touchmove. 
+    // Let's just return a getter or similar? 
+    // Simplest: just don't use isDragging for the transition logic in the UI, or use pullDistance === 0 check.
+
+    // Correction: In proper PTR, you want no transition during drag, but transition on release.
+    // So we need to know if we are dragging.
+
+    return {
+        isRefreshing,
+        pullDistance,
+        onTouchStart: (e: React.TouchEvent) => { onTouchStart(e); setIsDraggingState(true); },
+        onTouchMove,
+        onTouchEnd: async () => { setIsDraggingState(false); await onTouchEnd(); },
+        updateScrollTop,
+        isDragging: isDraggingState
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps99-api",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "description": "Pet Simulator Public API wrapper written in Typescript.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",