• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

zooniverse / front-end-monorepo / 13547957436

26 Feb 2025 03:52PM UTC coverage: 75.487% (-0.1%) from 75.625%
13547957436

Pull #6574

github

web-flow
Merge 45c6d0a81 into 1c40c2a2c
Pull Request #6574: [HOLD] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling

10908 of 16652 branches covered (65.51%)

Branch coverage included in aggregate %.

228 of 248 new or added lines in 24 files covered. (91.94%)

235 existing lines in 26 files now uncovered.

17008 of 20329 relevant lines covered (83.66%)

397.43 hits per line

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

67.5
/packages/lib-classifier/src/plugins/drawingTools/components/DeleteButton/DeleteButton.js
1
import PropTypes from 'prop-types'
1✔
2
import { observer } from 'mobx-react'
1✔
3
import styled, { css, withTheme } from 'styled-components'
1✔
4

5
import useScale from '../../hooks/useScale'
5✔
6

7
const StyledGroup = styled('g')`
1✔
8
  &:focus {
9
    ${props => css`outline: solid 4px ${props.focusColor};`}
1✔
10
  }
11

12
  &:hover {
13
    cursor: pointer;
14
  }
15
`
16

17
function DeleteButton ({ label, mark, onDelete, onDeselect, rotate, theme }) {
1✔
18
  const scale = useScale()
1✔
19
  const focusColor = theme.global.colors[theme.global.colors.focus]
1✔
20
  const RADIUS = (screen.width < 900) ? 11 : 8
1!
21
  const STROKE_COLOR = 'white'
1✔
22
  const FILL_COLOR = 'black'
1✔
23
  const STROKE_WIDTH = 1.5
1✔
24
  const CROSS_PATH = `
1✔
25
    M ${-1 * RADIUS * 0.7} 0
26
    L ${RADIUS * 0.7} 0
27
    M 0 ${-1 * RADIUS * 0.7}
28
    L 0 ${RADIUS * 0.7}
29
  `
30
  const { x, y } = mark.deleteButtonPosition(scale)
1✔
31
  const transform = `
1✔
32
    translate(${x}, ${y})
33
    rotate(${rotate})
34
    scale(${1 / scale})
35
  `
36
  
37
  function onKeyDown (event) {
UNCOV
38
    switch (event.key) {
×
39
      case 'Enter':
40
      case ' ': {
UNCOV
41
        return onPointerDown(event)
×
42
      }
43
      default: {
UNCOV
44
        return true
×
45
      }
46
    }
47
  }
48

49
  function onPointerDown (event) {
UNCOV
50
    event.preventDefault()
×
UNCOV
51
    event.stopPropagation()
×
UNCOV
52
    onDelete()
×
UNCOV
53
    return false
×
54
  }
55

56
  return (
1✔
57
    <StyledGroup
58
      aria-label={label}
59
      focusable
60
      focusColor={focusColor}
61
      onBlur={onDeselect}
62
      onKeyDown={onKeyDown}
63
      onPointerDown={onPointerDown}
64
      role='button'
65
      stroke={STROKE_COLOR}
66
      strokeWidth={STROKE_WIDTH}
67
      tabIndex='-1'
68
      transform={transform}
69
    >
70
      <circle
71
        fill={FILL_COLOR}
72
        r={RADIUS}
73
      />
74
      <path
75
        d={CROSS_PATH}
76
        transform='rotate(45)'
77
      />
78
    </StyledGroup>
79
  )
80
}
81

82
DeleteButton.propTypes = {
1✔
83
  label: PropTypes.string.isRequired,
84
  mark: PropTypes.object.isRequired,
85
  onDelete: PropTypes.func,
86
  onDeselect: PropTypes.func,
87
  rotate: PropTypes.number,
88
  theme: PropTypes.object
89
}
90
DeleteButton.defaultProps = {
1✔
UNCOV
91
  onDelete: () => true,
×
UNCOV
92
  onDeselect: () => true,
×
93
  rotate: 0,
94
  theme: {
95
    global: {
96
      colors: {}
97
    }
98
  }
99
}
1✔
100

101
export default withTheme(observer(DeleteButton))
102
export { DeleteButton }
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc