// ============================================================
// API4ATKA mobile — core: icons, atoms, chrome, swipe hook, sheet
// All shared symbols exported to window at bottom.
// ============================================================
const { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } = React;
// ---------- haptics ----------
const buzz = (ms = 10) => { try { navigator.vibrate && navigator.vibrate(ms); } catch (e) {} };
// ---------- formatting ----------
const money = (n, dp = 2) => {
if (n == null || isNaN(n)) return "—";
return (n < 0 ? "-" : "") + Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: dp, maximumFractionDigits: dp });
};
const signed = (n, dp = 2) => (n >= 0 ? "+" : "") + money(n, dp);
const pct = (n, dp = 1) => (n >= 0 ? "+" : "") + n.toFixed(dp) + "%";
const price = (n) => n >= 1000 ? n.toLocaleString("en-US", { maximumFractionDigits: 1 }) : n >= 1 ? n.toFixed(2) : n.toFixed(4);
// ---------- icons (lucide-style; crisp across Yandex/Chrome/Safari, unlike emoji) ----------
const MIcon = ({ name, size = 20, color = "currentColor", sw = 2, style }) => {
const P = {
home: <>,
journal:<>,
signal: <>,
gear: <>,
bell: <>,
back: <>,
x: <>,
check: <>,
search: <>,
chevR: <>,
arrowR: <>,
up: <>,
down: <>,
trendUp:<>,
wallet: <>,
target: <>,
stop: <>,
hand: <>,
refresh:<>,
mail: <>,
lock: <>,
logout: <>,
plane: <>,
key: <>,
bot: <>,
plus: <>,
briefcase: <>,
layers: <>,
sliders:<>,
coffee: <>,
inbox: <>,
clock: <>,
sun: <>,
globe: <>,
};
return (
);
};
// ---------- coin badge ----------
const Coin = ({ sym, size }) => {
const bg = window.M_DATA.COIN_COLORS[sym] || "#555";
return {sym.slice(0, 1)};
};
// ---------- side pill ----------
const Side = ({ side }) => {side};
// ---------- sparkline ----------
const Spark = ({ data, color, w = 200, h = 56 }) => {
if (!data || !data.length) return null;
const mn = Math.min(...data), mx = Math.max(...data), r = mx - mn || 1, step = w / (data.length - 1);
const pts = data.map((v, i) => [i * step, h - ((v - mn) / r) * h]);
const d = pts.map(([x, y], i) => (i ? "L" : "M") + x.toFixed(1) + " " + y.toFixed(1)).join(" ");
const id = "sp" + Math.random().toString(36).slice(2, 7);
return (
);
};
// ---------- pull-to-refresh hook (reusable для любого scroll-контейнера) ----------
// Возвращает { ptr, refreshing, scrollRef, handlers, indicatorStyle }.
// Использует touch-события вместо pointer для надёжности на Android Yandex/Chrome
// (PointerEvents иногда конфликтуют со встроенными жестами браузера).
const usePullToRefresh = (onRefresh) => {
const [ptr, setPtr] = useState(0);
const [refreshing, setRefreshing] = useState(false);
const scrollRef = useRef(null);
const st = useRef({ y: 0, pulling: false });
const ptrRef = useRef(0);
const handleStart = (clientY) => {
if (scrollRef.current && scrollRef.current.scrollTop <= 0) {
st.current = { y: clientY, pulling: true };
}
};
const handleMove = (clientY, e) => {
if (!st.current.pulling) return;
const d = clientY - st.current.y;
if (d > 0 && scrollRef.current && scrollRef.current.scrollTop <= 0) {
// Чем дальше — тем сильнее сопротивление (нелинейное)
const next = Math.min(80, Math.sqrt(d) * 5);
setPtr(next);
ptrRef.current = next;
// Блокируем штатный скролл браузера если уже тянем
if (e && e.cancelable) e.preventDefault();
} else if (d < 0) {
// Тянем вверх — закрываем индикатор
st.current.pulling = false;
setPtr(0);
ptrRef.current = 0;
}
};
const handleEnd = async () => {
if (!st.current.pulling) return;
st.current.pulling = false;
const currentPtr = ptrRef.current;
if (currentPtr > 50) {
setRefreshing(true);
try { buzz(); } catch (e) {}
try { if (onRefresh) await onRefresh(); } catch (e) {}
setRefreshing(false);
}
setPtr(0);
ptrRef.current = 0;
};
return {
ptr, refreshing, scrollRef,
handlers: {
// Touch — основной канал на мобиле
onTouchStart: (e) => handleStart(e.touches[0].clientY),
onTouchMove: (e) => handleMove(e.touches[0].clientY, e),
onTouchEnd: handleEnd,
onTouchCancel: handleEnd,
// Pointer/mouse — для desktop тестирования
onMouseDown: (e) => handleStart(e.clientY),
onMouseMove: (e) => {
if (e.buttons === 1) handleMove(e.clientY, null);
},
onMouseUp: handleEnd,
},
};
};
// Компонент-индикатор для pull-to-refresh
const PullIndicator = ({ ptr, refreshing }) => (
{refreshing
? (window.M_I18N ? window.M_I18N.t("common.refreshing", "Обновление…") : "Обновление…")
: ptr > 48
? (window.M_I18N ? window.M_I18N.t("common.releaseToRefresh", "Отпустите для обновления") : "Отпустите для обновления")
: (window.M_I18N ? window.M_I18N.t("common.pullToRefresh", "Потяните вниз") : "Потяните вниз")}
);
// ---------- pulse-on-change hook ----------
const usePulse = (val) => {
const [c, setC] = useState("");
const prev = useRef(val);
useEffect(() => {
if (val === prev.current) return;
setC(val > prev.current ? "pulse-up" : "pulse-down");
prev.current = val;
const t = setTimeout(() => setC(""), 220);
return () => clearTimeout(t);
}, [val]);
return c;
};
// ---------- swipe hook (pointer events, cross-platform) ----------
// onLeft/onRight fire when dragged past threshold and released.
const useSwipe = ({ onLeft, onRight, threshold = 0.4, enabled = true } = {}) => {
const [dx, setDx] = useState(0);
const [active, setActive] = useState(false);
const st = useRef({ x: 0, y: 0, w: 1, locked: null, id: null });
const down = (e) => {
if (!enabled) return;
const el = e.currentTarget;
st.current = { x: e.clientX, y: e.clientY, w: el.offsetWidth, locked: null, id: e.pointerId };
};
const move = (e) => {
if (!enabled || st.current.id !== e.pointerId) return;
const ddx = e.clientX - st.current.x;
const ddy = e.clientY - st.current.y;
if (st.current.locked === null) {
if (Math.abs(ddx) < 6 && Math.abs(ddy) < 6) return;
st.current.locked = Math.abs(ddx) > Math.abs(ddy) ? "x" : "y";
}
if (st.current.locked !== "x") return;
setActive(true);
// rubber-band resistance
setDx(ddx);
};
const up = (e) => {
if (st.current.id !== e.pointerId) { return; }
const ratio = dx / st.current.w;
if (ratio <= -threshold && onLeft) { buzz(12); onLeft(); }
else if (ratio >= threshold && onRight) { buzz(12); onRight(); }
setDx(0); setActive(false);
st.current.id = null;
};
const handlers = { onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up };
return { dx, active, handlers, reset: () => { setDx(0); setActive(false); } };
};
// ============================================================
// Top app bar
// ============================================================
const TopBar = ({ variant, title, onBack, exchange = "WEEX", online = true, notif = 0, onBell, right }) => {
if (variant === "back") {
return (
{title}
{right}
);
}
if (variant === "title") {
return (
);
}
return (
API4ATKA
{exchange} · {online ? "online" : "offline"}
);
};
// ============================================================
// Bottom navigation
// ============================================================
const NAV = [
{ id: "home", label: T("tabs.home", "Главная"), icon: "home" },
{ id: "journal", label: T("tabs.journal", "Журнал"), icon: "journal" },
{ id: "signals", label: T("topbar.signals", "Сигналы"), icon: "signal" },
{ id: "settings", label: T("topbar.settings", "Настройки"), icon: "gear" },
];
const BottomNav = ({ active, onChange, badges = {} }) => (
);
// ============================================================
// FAB — swipe up to arm "close all"
// ============================================================
// Fab: тап → onTrigger (закрыть всё); long-press 600мс → onLongPress (шторм-режим).
const Fab = ({ onTrigger, onLongPress }) => {
const [armed, setArmed] = useState(false);
const st = useRef({ y: 0, id: null, lpTimer: null });
const down = (e) => {
st.current = { y: e.clientY, id: e.pointerId, lpTimer: null };
e.currentTarget.setPointerCapture?.(e.pointerId);
if (onLongPress) {
st.current.lpTimer = setTimeout(() => {
buzz(40);
st.current.lpTimer = "fired";
onLongPress();
}, 600);
}
};
const move = (e) => {
if (st.current.id !== e.pointerId) return;
if (Math.abs(e.clientY - st.current.y) > 6 && st.current.lpTimer && typeof st.current.lpTimer !== "string") {
clearTimeout(st.current.lpTimer); st.current.lpTimer = null;
}
if (st.current.y - e.clientY > 28) setArmed(true); else setArmed(false);
};
const up = (e) => {
if (st.current.id !== e.pointerId) return;
if (st.current.lpTimer && typeof st.current.lpTimer !== "string") {
clearTimeout(st.current.lpTimer);
}
if (st.current.lpTimer === "fired") {
// long-press уже сработал — обычный тап не выполняем
} else if (armed) {
buzz(20); onTrigger();
}
setArmed(false); st.current.id = null; st.current.lpTimer = null;
};
return (
);
};
// ============================================================
// Bottom sheet (drag-down to dismiss)
// ============================================================
const BottomSheet = ({ title, onClose, children, foot, maxH = "86vh" }) => {
const sheetRef = useRef(null);
const [drag, setDrag] = useState(0);
const st = useRef({ y: 0, id: null, fromGrab: false });
useEffect(() => {
const h = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [onClose]);
const down = (e) => { st.current = { y: e.clientY, id: e.pointerId }; };
const move = (e) => {
if (st.current.id !== e.pointerId) return;
const d = e.clientY - st.current.y;
if (d > 0) setDrag(d);
};
const up = (e) => {
if (st.current.id !== e.pointerId) return;
if (drag > 110) { buzz(); onClose(); } else setDrag(0);
st.current.id = null;
};
return (
<>
{ buzz(); onClose(); }}>
{title && (
{title}
)}
{children}
{foot &&
{foot}
}
);
};
// ============================================================
// Toast (auto-dismiss 5s, optional action)
// ============================================================
const Toast = ({ msg, action, onAction, onDone, err }) => {
useEffect(() => { const t = setTimeout(() => onDone && onDone(), 5000); return () => clearTimeout(t); }, []);
return (
{msg}
{action && }
);
};
// ---------- empty state ----------
const EmptyState = ({ icon, title, msg, art }) => (
);
// ---------- skeleton card ----------
const SkelCard = () => (
);
Object.assign(window, {
buzz, money, signed, pct, price,
MIcon, Coin, Side, Spark, usePulse, useSwipe,
usePullToRefresh, PullIndicator,
TopBar, BottomNav, NAV, Fab, BottomSheet, Toast, EmptyState, SkelCard,
});