13903674755

Committed 17 Mar 2025 03:42PM UTC coverage: 61.874% (-4.6%) from 66.452%

Build # 13903674755

Build Type

Pull #345

github

Committed by

web-flow

Commit Message

Merge ce2550358 into 5d463ef04

Pull Request Pull Request #345: feat: react-hook-form field array for provider muxes

Run Details

443 of 798 branches covered (55.51%)

Branch coverage included in aggregate %.

63 of 93 new or added lines in 21 files covered. (67.74%)

50 existing lines in 4 files now uncovered.

904 of 1379 relevant lines covered (65.55%)

36.88 hits per line

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

0.0

/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 { Drag } from './icons'

type Props<T> = {
  children: (item: T, index: number) => React.ReactNode
  setItems: (items: T[]) => void
  items: T[]
  disableDragByIndex?: number
}

function ItemWrapper({
  children,
  id,
  hasDragDisabled,
}: {
  children: React.ReactNode
  id: UniqueIdentifier
  hasDragDisabled: boolean
}) {
  const {
    attributes,
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore - type declaration appears to be incorrect
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({ id })
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

  return (
    <div style={style} className="flex w-full items-center">
      {hasDragDisabled ? (
        <div className="size-8" />
      ) : (
        <div ref={setNodeRef} {...attributes} {...listeners} className="size-8">
          <Drag />
        </div>
      )}
      <div className="grow">{children}</div>
    </div>
  )
}

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

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

    if (over == null) {
      // The item was dropped in it's original place
      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}
            hasDragDisabled={disableDragByIndex === index}
          >
            {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 { Drag } from './icons'
20
21	type Props<T> = {
22	children: (item: T, index: number) => React.ReactNode
23	setItems: (items: T[]) => void
24	items: T[]
25	disableDragByIndex?: number
26	}
27
28	function ItemWrapper({
29	children,
30	id,
31	hasDragDisabled,
32	}: {
33	children: React.ReactNode
34	id: UniqueIdentifier
35	hasDragDisabled: boolean
36	}) {
37	const {
38	attributes,
39	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
40	// @ts-ignore - type declaration appears to be incorrect
41	listeners,
42	setNodeRef,
43	transform,
44	transition,
UNCOV 45	} = useSortable({ id })	×
UNCOV 46	const style = {	×
47	transform: CSS.Transform.toString(transform),
48	transition,
49	}
50
51	return (
52	<div style={style} className="flex w-full items-center">
53	{hasDragDisabled ? (
54	<div className="size-8" />	×
55	) : (
56	<div ref={setNodeRef} {...attributes} {...listeners} className="size-8">
57	<Drag />
58	</div>
59	)}
60	<div className="grow">{children}</div>
61	</div>
62	)
63	}
64
65	export function SortableArea<T extends { id: UniqueIdentifier }>({
66	children,
67	setItems,
68	items,
69	disableDragByIndex,
70	}: Props<T>) {
UNCOV 71	const sensors = useSensors(	×
72	useSensor(PointerSensor),
73	useSensor(KeyboardSensor, {
74	coordinateGetter: sortableKeyboardCoordinates,
75	})
76	)
77
78	function handleDragEnd(event: DragEndEvent) {
79	const { active, over } = event	×
80
81	if (over == null) {	×
82	// The item was dropped in it's original place
83	return	×
84	}
85
86	if (active.id !== over.id) {	×
87	const oldIndex = items.findIndex(({ id }) => id === active.id)	×
88	const newIndex = items.findIndex(({ id }) => id === over.id)	×
89
90	setItems(arrayMove(items, oldIndex, newIndex))	×
91	}
92	}
93
94	return (
95	<DndContext
96	sensors={sensors}
97	collisionDetection={closestCenter}
98	onDragEnd={handleDragEnd}
99	>
100	<SortableContext items={items} strategy={verticalListSortingStrategy}>
101	{items.map((item, index) => (
102	<ItemWrapper
103	key={index}
104	id={item.id}
105	hasDragDisabled={disableDragByIndex === index}
106	>
107	{children(item, index)}
108	</ItemWrapper>
109	))}
110	</SortableContext>
111	</DndContext>
112	)
113	}

stacklok / codegate-ui / 13903674755

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