13031292266

Committed 29 Jan 2025 12:27PM UTC coverage: 68.733% (+1.7%) from 67.071%

Build # 13031292266

Build Type

Pull #220

github

Committed by

web-flow

Commit Message

Merge 04fad425d into 25a531eba

Pull Request Pull Request #220: feat(muxes): model overrides matcher

Run Details

387 of 673 branches covered (57.5%)

Branch coverage included in aggregate %.

41 of 60 new or added lines in 8 files covered. (68.33%)

2 existing lines in 1 file now uncovered.

844 of 1118 relevant lines covered (75.49%)

63.88 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

21.43

/src/components/SortableArea.tsx

import {
  closestCenter,
  DndContext,
  DragEndEvent,
  KeyboardSensor,
  PointerSensor,
  UniqueIdentifier,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { useSortable } from "@dnd-kit/sortable";
import { GripVertical } from "lucide-react";

type Props<T> = {
  children: (item: T, index: number) => React.ReactNode;

  setItems: (items: T[]) => void;
  items: T[];
};

function ItemWrapper({
  children,
  id,
}: {
  children: React.ReactNode;
  id: UniqueIdentifier;
}) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };
  return (
    <div style={style} className="flex items-center gap-2 w-full">
      <div ref={setNodeRef} {...attributes} {...listeners} className="size-8">
        <GripVertical className="size-full" />
      </div>
      <div className="grow">{children}</div>
    </div>
  );
}

export function SortableArea<T extends { id: UniqueIdentifier }>({
  children,
  setItems,
  items,
}: Props<T>) {
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;

    if (over == null) {
      return;
    }

    if (active.id !== over.id) {
      const oldIndex = items.findIndex(({ id }) => id === active.id);
      const newIndex = items.findIndex(({ id }) => id === over.id);

      setItems(arrayMove(items, oldIndex, newIndex));
    }
  }

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        {items.map((item, index) => (
          <ItemWrapper key={index} id={item.id}>
            {children(item, index)}
          </ItemWrapper>
        ))}
      </SortableContext>
    </DndContext>
  );
}

1	import {
2	closestCenter,
3	DndContext,
4	DragEndEvent,
5	KeyboardSensor,
6	PointerSensor,
7	UniqueIdentifier,
8	useSensor,
9	useSensors,
10	} from "@dnd-kit/core";
11	import {
12	arrayMove,
13	SortableContext,
14	sortableKeyboardCoordinates,
15	verticalListSortingStrategy,
16	} from "@dnd-kit/sortable";
17	import { CSS } from "@dnd-kit/utilities";
18	import { useSortable } from "@dnd-kit/sortable";
19	import { GripVertical } from "lucide-react";
20
21	type Props<T> = {
22	children: (item: T, index: number) => React.ReactNode;
23
24	setItems: (items: T[]) => void;
25	items: T[];
26	};
27
28	function ItemWrapper({
29	children,
30	id,
31	}: {
32	children: React.ReactNode;
33	id: UniqueIdentifier;
34	}) {
35	const { attributes, listeners, setNodeRef, transform, transition } =
36	useSortable({ id });	67✔
37	const style = {	67✔
38	transform: CSS.Transform.toString(transform),
39	transition,
40	};
41	return (
42	<div style={style} className="flex items-center gap-2 w-full">
43	<div ref={setNodeRef} {...attributes} {...listeners} className="size-8">
44	<GripVertical className="size-full" />
45	</div>
46	<div className="grow">{children}</div>
47	</div>
48	);
49	}
50
51	export function SortableArea<T extends { id: UniqueIdentifier }>({
52	children,
53	setItems,
54	items,
55	}: Props<T>) {
56	const sensors = useSensors(	27✔
57	useSensor(PointerSensor),
58	useSensor(KeyboardSensor, {
59	coordinateGetter: sortableKeyboardCoordinates,
60	}),
61	);
62
63	function handleDragEnd(event: DragEndEvent) {
NEW 64	const { active, over } = event;	×
65
NEW 66	if (over == null) {	×
NEW 67	return;	×
68	}
69
NEW 70	if (active.id !== over.id) {	×
NEW 71	const oldIndex = items.findIndex(({ id }) => id === active.id);	×
NEW 72	const newIndex = items.findIndex(({ id }) => id === over.id);	×
73
NEW 74	setItems(arrayMove(items, oldIndex, newIndex));	×
75	}
76	}
77
78	return (
79	<DndContext
80	sensors={sensors}
81	collisionDetection={closestCenter}
82	onDragEnd={handleDragEnd}
83	>
84	<SortableContext items={items} strategy={verticalListSortingStrategy}>
85	{items.map((item, index) => (
86	<ItemWrapper key={index} id={item.id}>
87	{children(item, index)}
88	</ItemWrapper>
89	))}
90	</SortableContext>
91	</DndContext>
92	);
93	}

stacklok / codegate-ui / 13031292266

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous