{/* drag handle — desktop HTML5 DnD via dragHandlers, touch via
touchDragHandlers. stopPropagation on click so the synthesized tap
after touch-end doesn't bubble to the row's onClick (= jump to
detail). */}
);
}
function AMarkets({ t, nav, onPos, mode: extMode, onModeChange }) {
const th = aTheme(t);
const state = HL.useStore();
// 'watchlist' | 'crypto' | 'stock'. `state.markets` is two Top-20s
// concatenated; we split here by the namespaced-coin prefix. Mode can be
// lifted to the parent (Art) so the user's tab choice survives a detour
// through the detail page; if no parent owns it, fall back to local state.
const [localMode, setLocalMode] = React.useState('watchlist');
const mode = extMode !== undefined ? extMode : localMode;
const setMode = onModeChange || setLocalMode;
const [watch, setWatch] = useWatchlist();
const [searchOpen, setSearchOpen] = React.useState(false);
const baseCrypto = React.useMemo(
() => state.markets.filter(m => String(m.sym).indexOf(':') < 0).map(m => m.sym),
[state.markets]
);
const baseStock = React.useMemo(
() => state.markets.filter(m => String(m.sym).indexOf(':') >= 0).map(m => m.sym),
[state.markets]
);
const baseSyms = mode === 'watchlist' ? watch : mode === 'stock' ? baseStock : baseCrypto;
const [order, setOrder] = useOrderedList(mode, baseSyms);
const [dragIdx, setDragIdx] = React.useState(null);
const [overIdx, setOverIdx] = React.useState(null);
const rows = order.map(s => state.markets.find(m => m.sym === s)).filter(Boolean);
const toggleWatch = (sym) => {
setWatch(w => w.includes(sym) ? w.filter(x => x!==sym) : [...w, sym]);
};
// Drag handlers — works on desktop and touch (HTML5 DnD).
const onDragStart = (i) => (e) => {
setDragIdx(i);
try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(i)); } catch {}
};
const onDragOver = (i) => (e) => { e.preventDefault(); setOverIdx(i); };
const onDrop = (i) => (e) => {
e.preventDefault();
if (dragIdx == null || dragIdx === i) { setDragIdx(null); setOverIdx(null); return; }
setOrder(prev => {
const next = prev.slice();
const [moved] = next.splice(dragIdx, 1);
next.splice(i, 0, moved);
return next;
});
setDragIdx(null); setOverIdx(null);
};
const onDragEnd = () => { setDragIdx(null); setOverIdx(null); };
// ── Touch reorder (iOS) ──────────────────────────────────────────────
// HTML5 DnD doesn't fire on iOS Safari, so we implement a parallel touch
// pipeline. The user touches the dots-handle on a row and drags vertically;
// we resolve the hovered row via document.elementFromPoint and commit the
// reorder on touchend.
const touchDragRef = React.useRef({ active: false });
const onTouchDragStart = (i) => (e) => {
e.stopPropagation();
touchDragRef.current.active = true;
setDragIdx(i);
setOverIdx(i);
};
const onTouchDragMove = (e) => {
if (!touchDragRef.current.active) return;
e.preventDefault();
const t = e.touches[0]; if (!t) return;
const el = document.elementFromPoint(t.clientX, t.clientY);
const rowEl = el && el.closest && el.closest('[data-row-idx]');
if (!rowEl) return;
const idx = parseInt(rowEl.getAttribute('data-row-idx'), 10);
if (!isNaN(idx)) setOverIdx(idx);
};
const onTouchDragEnd = () => {
if (!touchDragRef.current.active) return;
touchDragRef.current.active = false;
if (dragIdx != null && overIdx != null && dragIdx !== overIdx) {
setOrder(prev => {
const next = prev.slice();
const [moved] = next.splice(dragIdx, 1);
next.splice(overIdx, 0, moved);
return next;
});
}
setDragIdx(null);
setOverIdx(null);
};
const touchDragHandlers = React.useCallback((i) => ({
onTouchStart: onTouchDragStart(i),
onTouchMove: onTouchDragMove,
onTouchEnd: onTouchDragEnd,
onTouchCancel: onTouchDragEnd,
}), [dragIdx, overIdx]);
return (
<>
{/* Header */}
市场
行情
{/* Mode tabs — three equal columns, large touch targets, centered
accent underline indicator that animates between selections. The
row's own bottom hairline doubles as the list's top divider so we
drop the list's borderTop below. */}