11559616749

Committed 28 Oct 2024 05:43PM CUT coverage: 97.394% (-1.0%) from 98.403%

Build # 11559616749

Build Type

push

github

Committed by

ChengShi-1

Commit Message

fix: add some missing code in account page

Run Details

1451 of 1518 branches covered (95.59%)

Branch coverage included in aggregate %.

3818 of 3892 relevant lines covered (98.1%)

9054.4 hits per line

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

78.95

/packages/design-system/src/lib/components/transfer-list/ListItem.tsx

import { useId } from 'react'
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { ListGroup } from 'react-bootstrap'
import { Form } from '../form/Form'
import { TransferListItem } from './TransferList'
import { Stack } from '../stack/Stack'
import styles from './TransferList.module.scss'

interface ListItemProps {
  item: TransferListItem
  side: 'left' | 'right'
  checked: readonly TransferListItem[]
  onToggle: (item: TransferListItem) => () => void
  disabled: boolean
}

export const ListItem = ({ item, side, checked, onToggle, disabled }: ListItemProps) => {
  const { attributes, listeners, transform, transition, setNodeRef, setActivatorNodeRef } =
    useSortable({ id: item.id })

  const attributesCheckingDisabled = disabled
    ? { ...attributes, ['aria-disabled']: true, tabIndex: -1 }
    : attributes

  const uniqueID = useId()
  const labelId = `transfer-list-item-${item.value}-label-${uniqueID}`

  if (side === 'left') {
    return (
      <ListGroup.Item
        className={`${styles['list-item']} ${disabled ? styles['disabled'] : ''}`}
        disabled={disabled}>
        <Form.Group.Checkbox
          label={item.label}
          onChange={onToggle(item)}
          id={labelId}
          checked={checked.indexOf(item) !== -1}
          disabled={disabled}
        />
      </ListGroup.Item>
    )
  }

  const style = {
    transform: CSS.Translate.toString(transform),
    transition
  }

  return (
    <ListGroup.Item
      ref={setNodeRef}
      {...attributesCheckingDisabled}
      role=""
      style={style}
      className={`${styles['list-item']} ${disabled ? styles['disabled'] : ''}`}
      disabled={disabled}>
      <Stack direction="horizontal" gap={1}>
        <button
          type="button"
          ref={setActivatorNodeRef}
          {...listeners}
          className={`${styles['drag-handle']} ${disabled ? styles['disabled'] : ''}`}
          aria-label="press space to select and keys to drag"
          disabled={disabled}>
          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
            <circle cx="9" cy="6" r="1.5" fill="#777" />
            <circle cx="15" cy="6" r="1.5" fill="#777" />
            <circle cx="9" cy="12" r="1.5" fill="#777" />
            <circle cx="15" cy="12" r="1.5" fill="#777" />
            <circle cx="9" cy="18" r="1.5" fill="#777" />
            <circle cx="15" cy="18" r="1.5" fill="#777" />
          </svg>
        </button>
        <Form.Group.Checkbox
          label={item.label}
          onChange={onToggle(item)}
          id={labelId}
          checked={checked.indexOf(item) !== -1}
          disabled={disabled}
        />
      </Stack>
    </ListGroup.Item>
  )
}

1	import { useId } from 'react'
2	import { useSortable } from '@dnd-kit/sortable'
3	import { CSS } from '@dnd-kit/utilities'
4	import { ListGroup } from 'react-bootstrap'
5	import { Form } from '../form/Form'
6	import { TransferListItem } from './TransferList'
7	import { Stack } from '../stack/Stack'
8	import styles from './TransferList.module.scss'
9
10	interface ListItemProps {
11	item: TransferListItem
12	side: 'left' \| 'right'
13	checked: readonly TransferListItem[]
14	onToggle: (item: TransferListItem) => () => void
15	disabled: boolean
16	}
17
18	export const ListItem = ({ item, side, checked, onToggle, disabled }: ListItemProps) => {	5,844✔
19	const { attributes, listeners, transform, transition, setNodeRef, setActivatorNodeRef } =
20	useSortable({ id: item.id })	5,844✔
21
22	const attributesCheckingDisabled = disabled	5,844!
23	? { ...attributes, ['aria-disabled']: true, tabIndex: -1 }
24	: attributes
25
26	const uniqueID = useId()	5,844✔
27	const labelId = `transfer-list-item-${item.value}-label-${uniqueID}`	5,844✔
28
29	if (side === 'left') {	5,844✔
30	return (	3,756✔
31	<ListGroup.Item
32	className={`${styles['list-item']} ${disabled ? styles['disabled'] : ''}`}	3,756!
33	disabled={disabled}>
34	<Form.Group.Checkbox
35	label={item.label}
36	onChange={onToggle(item)}
37	id={labelId}
38	checked={checked.indexOf(item) !== -1}
39	disabled={disabled}
40	/>
41	</ListGroup.Item>
42	)
43	}
44
45	const style = {	2,088✔
46	transform: CSS.Translate.toString(transform),
47	transition
48	}
49
50	return (	2,088✔
51	<ListGroup.Item
52	ref={setNodeRef}
53	{...attributesCheckingDisabled}
54	role=""
55	style={style}
56	className={`${styles['list-item']} ${disabled ? styles['disabled'] : ''}`}	2,088!
57	disabled={disabled}>
58	<Stack direction="horizontal" gap={1}>
59	<button
60	type="button"
61	ref={setActivatorNodeRef}
62	{...listeners}
63	className={`${styles['drag-handle']} ${disabled ? styles['disabled'] : ''}`}	2,088!
64	aria-label="press space to select and keys to drag"
65	disabled={disabled}>
66	<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
67	<circle cx="9" cy="6" r="1.5" fill="#777" />
68	<circle cx="15" cy="6" r="1.5" fill="#777" />
69	<circle cx="9" cy="12" r="1.5" fill="#777" />
70	<circle cx="15" cy="12" r="1.5" fill="#777" />
71	<circle cx="9" cy="18" r="1.5" fill="#777" />
72	<circle cx="15" cy="18" r="1.5" fill="#777" />
73	</svg>
74	</button>
75	<Form.Group.Checkbox
76	label={item.label}
77	onChange={onToggle(item)}
78	id={labelId}
79	checked={checked.indexOf(item) !== -1}
80	disabled={disabled}
81	/>
82	</Stack>
83	</ListGroup.Item>
84	)
85	}	94✔

IQSS / dataverse-frontend / 11559616749

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