// PullToRefresh — обгортка зверху над скролом.
// Показує індикатор при тязі вниз від верху. При достатній відстані — виконує onRefresh().
//
// Не перехоплює скрол усередині — якщо scrollTop > 0, жест ігнорується.
// Використовує pointer events для iOS/Android consistency.
const PTR_THRESHOLD = 70; // px — нижче цього порога скасовує
const PTR_MAX = 110; // px — візуальний максимум розтягу
const PTR_DAMPING = 0.5; // нелінійне розтягування
function PullToRefresh({ onRefresh, loading, children }) {
const ref = React.useRef(null);
const [pull, setPull] = React.useState(0); // 0..PTR_MAX
const [armed, setArmed] = React.useState(false); // чи буде тригеритись при release
const startY = React.useRef(null);
const active = React.useRef(false);
const onStart = React.useCallback((e) => {
const el = ref.current;
if (!el) return;
// Тільки якщо ми у самому верху скрола
const scrollTop = window.scrollY || document.documentElement.scrollTop || 0;
if (scrollTop > 0) return;
startY.current = e.touches ? e.touches[0].clientY : e.clientY;
active.current = true;
}, []);
const onMove = React.useCallback((e) => {
if (!active.current || startY.current == null) return;
const y = e.touches ? e.touches[0].clientY : e.clientY;
const raw = y - startY.current;
if (raw <= 0) { setPull(0); setArmed(false); return; }
// нелінійне
const d = Math.min(PTR_MAX, raw * PTR_DAMPING);
setPull(d);
setArmed(d >= PTR_THRESHOLD);
// Блокуємо браузерний bounce тільки коли ми активно тягнемо
if (e.cancelable && raw > 10) e.preventDefault();
}, []);
const onEnd = React.useCallback(() => {
if (!active.current) return;
active.current = false;
if (armed && !loading) {
setPull(PTR_THRESHOLD); // залишаємо видимим поки крутиться
Promise.resolve(onRefresh?.()).finally(() => {
setPull(0); setArmed(false);
});
} else {
setPull(0); setArmed(false);
}
startY.current = null;
}, [armed, loading, onRefresh]);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const opt = { passive: false };
el.addEventListener('touchstart', onStart, opt);
el.addEventListener('touchmove', onMove, opt);
el.addEventListener('touchend', onEnd);
el.addEventListener('touchcancel', onEnd);
return () => {
el.removeEventListener('touchstart', onStart);
el.removeEventListener('touchmove', onMove);
el.removeEventListener('touchend', onEnd);
el.removeEventListener('touchcancel', onEnd);
};
}, [onStart, onMove, onEnd]);
const spin = loading && pull > 0;
return (
);
}
function PTRIndicator({ pull, armed, spin }) {
const opacity = Math.min(1, pull / 40);
const rot = spin ? null : (pull / PTR_THRESHOLD) * 180;
const PALETTE = window.CHARTS.PALETTE;
return (
{spin ? (
) : (
)}
{spin ? 'Оновлення' : armed ? 'Відпустіть' : 'Потягніть'}
);
}
window.PTR = { PullToRefresh };