ps99-api 2.7.1 → 2.8.0

package/example-web/react2/src/App.tsx

@@ -13,16 +13,18 @@ const App: React.FC = () => {
   return (
     <Router>
       <ScrollProvider>
-        <Header />
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/collections" element={<CollectionsIndex />} />
-          <Route element={<CollectionsLayout />}>
-            <Route path="/collections/:collectionName" element={<CollectionConfigIndex />} />
-            <Route path="/collections/:collectionName/:configName" element={<DynamicCollectionConfigData />} />
-          </Route>
-        </Routes>
-        <Footer />
+        <ScrollProvider>
+          <Header />
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/collections" element={<CollectionsIndex />} />
+            <Route element={<CollectionsLayout />}>
+              <Route path="/collections/:collectionName" element={<CollectionConfigIndex />} />
+              <Route path="/collections/:collectionName/:configName" element={<DynamicCollectionConfigData />} />
+            </Route>
+          </Routes>
+          <Footer />
+        </ScrollProvider>
       </ScrollProvider>
     </Router>
   );

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

@@ -497,7 +497,8 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
     onRefresh: async () => {
       // Simple reload to fetch new data
       window.location.reload();
-    }
+    },
+    disabled: !isMobile
   });
 
   // Update scroll top for PTR

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

@@ -6,6 +6,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';
 
 const FixedSizeGridAny = FixedSizeGrid;
 const FixedSizeListAny = FixedSizeList;
@@ -138,8 +139,24 @@ const CollectionsIndex: React.FC = () => {
     const [searchTerm, setSearchTerm] = useState("");
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
     const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+    const isMobile = windowWidth < 768; // Defined before use
     const { showHeader, handleScroll, scrollRef, headerRef, headerHeight, contentPadding } = useCollapsibleHeader({ deps: [collections] });
 
+    // Pull To Refresh Logic
+
+    // Pull To Refresh Logic
+    const { isRefreshing, pullDistance, onTouchStart, onTouchMove, onTouchEnd, updateScrollTop, isDragging } = usePullToRefresh({
+        onRefresh: async () => {
+            window.location.reload();
+        },
+        disabled: !isMobile
+    });
+
+    const onScroll = (scrollInfo: { scrollOffset?: number, scrollTop?: number, scrollHeight?: number, clientHeight?: number }) => {
+        handleScroll(scrollInfo);
+        updateScrollTop(scrollInfo.scrollTop ?? scrollInfo.scrollOffset ?? 0);
+    };
+
     useEffect(() => {
         const fetchCollections = async () => {
             const api = new PetSimulator99API();
@@ -157,7 +174,6 @@ const CollectionsIndex: React.FC = () => {
         return () => window.removeEventListener("resize", handleResize);
     }, []);
 
-    const isMobile = windowWidth < 768;
 
     // Scroll Persistence
     const { saveScrollPosition, getScrollPosition } = useScrollPersistence();
@@ -322,6 +338,33 @@ const CollectionsIndex: React.FC = () => {
                         </div>
                     )}
                 </div>
+
+                {/* Pull To Refresh Indicator */}
+                {(pullDistance > 0 || isRefreshing) && (
+                    <div style={{
+                        position: 'absolute',
+                        top: showHeader ? headerHeight : 0,
+                        left: 0,
+                        right: 0,
+                        height: isRefreshing ? 60 : pullDistance,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        overflow: 'hidden',
+                        backgroundColor: '#f5f5f5',
+                        zIndex: 5,
+                        transition: isDragging ? '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>
+                )}
+
                 {/* Content */}
                 <div style={{ height: "100%", width: "100%", flex: 1, paddingTop: isMobile ? contentPadding : "0px", transition: "padding-top 0.3s ease-in-out" }}>
                     {/* @ts-ignore */}
@@ -336,7 +379,10 @@ const CollectionsIndex: React.FC = () => {
                                     itemSize={80}
                                     width={width}
                                     initialScrollOffset={initialScrollOffset}
-                                    onScroll={handleScroll}
+                                    onScroll={onScroll}
+                                    onTouchStart={onTouchStart}
+                                    onTouchMove={onTouchMove}
+                                    onTouchEnd={onTouchEnd}
                                     itemData={{
                                         items: filteredCollections,
                                         navigate
@@ -364,7 +410,10 @@ const CollectionsIndex: React.FC = () => {
                                     rowHeight={rowHeight}
                                     width={width}
                                     initialScrollOffset={initialScrollOffset}
-                                    onScroll={handleScroll}
+                                    onScroll={onScroll}
+                                    onTouchStart={onTouchStart}
+                                    onTouchMove={onTouchMove}
+                                    onTouchEnd={onTouchEnd}
                                     itemData={{
                                         items: filteredCollections,
                                         columnCount,

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

@@ -3,9 +3,10 @@ import { useState, useEffect, useRef } from 'react';
 interface PullToRefreshOptions {
     onRefresh: () => Promise<void> | void;
     threshold?: number; // px to pull down to trigger
+    disabled?: boolean;
 }
 
-export const usePullToRefresh = ({ onRefresh, threshold = 80 }: PullToRefreshOptions) => {
+export const usePullToRefresh = ({ onRefresh, threshold = 80, disabled = false }: PullToRefreshOptions) => {
     const [isRefreshing, setIsRefreshing] = useState(false);
     const [pullDistance, setPullDistance] = useState(0);
     const startY = useRef<number>(0);
@@ -15,6 +16,7 @@ export const usePullToRefresh = ({ onRefresh, threshold = 80 }: PullToRefreshOpt
     const scrollTopRef = useRef(0);
 
     const onTouchStart = (e: React.TouchEvent) => {
+        if (disabled) return;
         if (scrollTopRef.current === 0) {
             startY.current = e.touches[0].clientY;
             isDragging.current = true;

package/package.json

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