src/frontend/app/components/PullToRefresh.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import { type ReactNode } from "react";
import { RotateCcw } from "lucide-react";
import "./PullToRefresh.css";

interface PullToRefreshIndicatorProps {
  pullDistance: number;
  isRefreshing: boolean;
  canRefresh: boolean;
  children: ReactNode;
}

export function PullToRefreshIndicator({
  pullDistance,
  isRefreshing,
  canRefresh,
  children,
}: PullToRefreshIndicatorProps) {
  const opacity = Math.min(pullDistance / 60, 1);
  const rotation = isRefreshing ? 360 : pullDistance * 4;
  const scale = Math.min(0.5 + (pullDistance / 120), 1);

  return (
    <div className="pull-to-refresh-container">
      <div 
        className="pull-to-refresh-indicator"
        style={{
          transform: `translateY(${Math.min(pullDistance, 80)}px)`,
          opacity: opacity,
        }}
      >
        <div 
          className={`pull-to-refresh-icon ${isRefreshing ? 'spinning' : ''} ${canRefresh ? 'ready' : ''}`}
          style={{
            transform: `rotate(${rotation}deg) scale(${scale})`,
          }}
        >
          <RotateCcw size={24} />
        </div>
        <div className="pull-to-refresh-text">
          {isRefreshing ? "Actualizando..." : canRefresh ? "Suelta para actualizar" : "Arrastra para actualizar"}
        </div>
      </div>
      <div 
        className="pull-to-refresh-content"
        style={{
          transform: `translateY(${Math.min(pullDistance * 0.5, 40)}px)`,
        }}
      >
        {children}
      </div>
    </div>
  );
}