krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ui fix

Browse Source
This commit is contained in:
gosangam
2026-06-15 15:24:49 +05:30
parent eac56b7974
commit cb376f8497
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/feed/new-users-strip.tsx
+29 -7
View File
@@ -18,7 +18,14 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
// Mouse drag-to-scroll. Touch/trackpad use native overflow scrolling, so we
// only engage for mouse; `moved` suppresses the click that would otherwise
// fire after a drag (and navigate to a profile).
const drag = useRef({ down: false, startX: 0, startScroll: 0, moved: false });
const drag = useRef({
down: false,
startX: 0,
startScroll: 0,
moved: false,
pointerId: -1,
captured: false,
});
if (users.length === 0) return null;
@@ -26,26 +33,41 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
if (e.pointerType !== "mouse") return;
const el = scrollRef.current;
if (!el) return;
// Record the start but DON'T capture yet — capturing here would retarget
// the click to this container, so a plain click on a card never reaches
// the <Link> (no navigation). We capture only once a real drag starts.
drag.current = {
down: true,
startX: e.clientX,
startScroll: el.scrollLeft,
moved: false,
pointerId: e.pointerId,
captured: false,
};
el.setPointerCapture(e.pointerId);
}
function onPointerMove(e: React.PointerEvent) {
if (!drag.current.down) return;
const el = scrollRef.current;
if (!el) return;
const dx = e.clientX - drag.current.startX;
if (Math.abs(dx) > 4) drag.current.moved = true;
el.scrollLeft = drag.current.startScroll - dx;
if (Math.abs(dx) > 4) {
drag.current.moved = true;
// Capture now so the drag keeps tracking even if the pointer leaves
// the strip; a click (no movement) never gets here, so it navigates.
if (!drag.current.captured) {
el.setPointerCapture(drag.current.pointerId);
drag.current.captured = true;
}
}
if (drag.current.moved) el.scrollLeft = drag.current.startScroll - dx;
}
function onPointerUp(e: React.PointerEvent) {
function onPointerUp() {
if (!drag.current.down) return;
drag.current.down = false;
scrollRef.current?.releasePointerCapture(e.pointerId);
if (drag.current.captured) {
scrollRef.current?.releasePointerCapture(drag.current.pointerId);
drag.current.captured = false;
}
}
function onClickCapture(e: React.MouseEvent) {
if (drag.current.moved) {
@@ -76,7 +98,7 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
onPointerUp={onPointerUp}
onPointerCancel={onPointerUp}
onClickCapture={onClickCapture}
className="-mx-5 flex gap-3 overflow-x-auto px-5 py-1 snap-x scroll-px-5 cursor-grab active:cursor-grabbing [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
className="-mx-5 flex gap-3 overflow-x-auto px-5 py-1 snap-x scroll-px-5 cursor-grab select-none active:cursor-grabbing [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
>
{users.map((u) => (
<Link